PIC 40A - University of California, Los Angelesvirtanen/40a.1.17su/schedule/final_review.pdf · PIC...

Copyright 2011 Jukka Virtanen UCLA 1

PIC 40A

06/05/15

Review for the Final

06/05/15 Copyright Jukka Virtanen 2011 2

Overview

Final is on:

Monday, June 08, 201511:30 AM - 2:30 PM Geology 4645

Double check on myucla.edu.


Overview

Short answerXHTMLCSSJavaScriptPHPPHP MySQLXML/DTD

Most likely 6 or 7 questions.


PHP MySQL

You should know:How to write a form.What happens when submit button is pressed.How you use PHP to capture the data from the form.How to process the data.How to open a connection to a MySQL database.How to write data into a database.How to retrieve information from a database.How to use the data to create a new web page.


Using PHP to create webpages

I will most likely ask you to create a table or a list or somethingelse from some data that can come from the user or from aMySQL database or something like that.

You should know how to use various PHP techniques to writeXHTML or even JavaScript.


Example

Consider the following XHTML form:

<p>In the form below please write what kind of animals your pets are and their names. Then clicksubmit.</p> <form action="www.pic.ucla.edu/~virtanen/process_form.php" method="get"> <p> Animal <input type="text" name="animal1"/> Name <input type="text" name="name1"/><br/> Animal <input type="text" name="animal2"/> Name <input type="text" name="name2"/><br/> <input type="submit" value="Submit"/> </p> </form>

When the user clicks submit, a PHP program process_form.php is called. process_form takes theinformation supplied by the user and writes it into a table form.

For example filling the form as below:


Example

Should result in the following XHTML page being sent to the user:

Write the PHP code snippet to process the form data and to create theXHTML table. You need not have the PHP write any other XHTML thanwhat is required for the table.


Solution

<?php

$animal1 = $_GET['animal1'];$animal2 = $_GET['animal2'];$name1 = $_GET['name1'];$name2 = $_GET['name2'];

print "<table>";print "<tr><td>$animal1</td><td>$name1</td></tr>";print "<tr><td>$animal2</td><td>$name2</td></tr>";print "</table>";?>


PHP and timestamps

Timestamp is just a number of seconds elapsed since Jan 11970 up to some given time.

We can extract lot of information from a time stamp using thepredefined function date.

mktime( ... ) allows us to create a timestamp if we give asarguments hr,min,sec,mo,day, year.

time() will give us the current timestamp.

You should review: Midterm 2 question 4, Homeworks 5,6.


PHP Arrays

PHP arrays are indexed by keys.

The important concepts are:Declaring arraysAccessing array elements using keyssizeofexplode/implodenext,currentforeachsorting arrays

This is not an all inclusive list but these are concepts I expect you toknow without wasting time at looking at notes.


Example

Assume that you have a PHP array called $days. The $days array containsstrings that represent dates with the following format: MM-DD-YYYY. Forexample: 05-16-2010. The array $days might look something like:

$days = array("05-16-2010","4-02-1990","05-06-2007");

Your boss wants you to write code that outputs this array keeping the samemonth and day but fixing the year to be the current year. Warning: Thisarray is indexed by keys.

a) Write the code to get the current Unix timestamp then use this timestampwith the date function to get the current year. (Hint: “Y” is used to get theyear.)

b) Assume that the current year is now in a variable called $year. Use thisvariable along with the $days array to output the array with the old days andupdated years.


Solution

a)$year = date("Y");

b)<?php$ar = array("key1"=>"05-16-2010", "key2"=>"05-16-2010","key3"=>"05-16-2010", "key4"=>"05-16-2010");

foreach ($ar as $k =>$v){$date_array = explode("-",$v);$date_array[2] = $year;$d = implode("-",$date_array);echo "$d<br/>";}?>


PHP Regular expressions

You are expected to know basic regular expressionconcepts.

Since regular expression patterns are same in JS asthey are in PHP I might switch things up a bit and askyou to apply regular expressions in JS. I will of coursehave to tell you what the relevant functions are.


Example

We have a PHP array called $student_info.

Each entry in this array is a string describing a singlestudents information. You do not know exactly in whatformat this string is however you do know that itcontains the students email address.

Extract from each entry an email address:bruinonlineid.ucla.edu and write it to an array calledemails.


Example

<?php$ar = array("key1" => "hmhmhmhhm [email protected]", "key2"=>"fsdkjdkfdkfjdkfj [email protected]", "key3"=>"[email protected]@ucla.edu", "key4"=>"[email protected]");

$pattern = "/[a-z][a-z0-9]{2,14}@ucla\.edu/";

foreach ($ar as $k =>$v){preg_match_all($pattern, $v, $email_ar);

$email = $email_ar[0][0];echo $email."<br/>";}

?>


JavaScript

There are 4 main topics:

"Ordinary" JavaScript stuff -basics, functions, control structures, random numbers etc.

DOM manipulationsCookiesEvents


DOM Example

a) Write a function that prompts the user to enter a string and then appends thestring to an unordered list. You may assume that the page already contains a singleelement <ul></ul> and you need only to append <li> tags (with appropratecontent) to this element.


DOM Example

function create_list(){

var str = prompt("Type some text"); ul_node = document.getElementsByTagName("ul")[0]; var li_object = document.createElement("li"); text_object = document.createTextNode(str); li_object.appendChild(text_object); ul_node.appendChild(li_object);}


DOM Example

b) Write a JS function called next(). This function "cycles" through the words inyour unordered list from part a). When the function next() is called, the next wordin the unordered list is selected by underlining the text in it and the previouslyselected word is no longer underlined. When the last word is currently selected andnext() is called, the first word on the list should be selected. You may assume thatthere is a global variable called current defined for you. This variable is the objectnode of the currently selected word. However, when you use the variable currentit is up to you to update this variable. Hints: current.nextSibling is the node object of the next list item.current.nextSibling is false if there is no next sibling. You can always get thefirst list item by referring to the firstChild of the ul node.


DOM Example

current = ul_node.firstChild;current.style.textDecoration="underline";

}

function next(){

ul_node = document.getElementsByTagName("ul")[0];current.style.textDecoration = "none";if (current.nextSibling) current = current.nextSibling;else current = ul_node.firstChild; current.style.textDecoration="underline"; }


Cookies

It is likely that there will be some question about cookies because it is agood way for me to test you on JS arrays and functions.

Main facts about cookies:

To update a cookie write:

document.cookie="cookie_name=new_value";

This will overwrite the cookie_name's old value cookie with a new_value.

To append a new cookie to the cookies

document.cookie="new_cookie_name=cookie_value";

Aside from these two things document.cookie is nothing more than a string!


Cookie example

Assume that the web page you are working on has multiple cookies. One ofthese cookies is a cookie called visitors. Write a function calledappend_visitor that takes as an argument a string called name and thenappends the name to the visitors cookie.

The visitors cookie has the form:

visitors=joe^joanna^joe^cub;


Solution

function append_visitor(name){

var cookies_ar = document.cookie.split("; ");for (var i=0; i < cookies_ar.length(); i++){

var cookie = cookies_ar[i].split("=");if (cookie[0] == "visitors")

var cookie_value = cookie[1] + "^" + name;}document.cookie = "visitors=" + cookie_value;

}


Events

Browser detects when an event occurs and if an event handler has beenregistered then a function is called.

Our favorite event has been the onclick event.

You should also know onhover and onload events.

If I tell you another event you should understand how to write theappropriate code.

Event can be either "hard coded" into the XHTML such as onclick usually is.

Event can also be registered dynamically.


Registration Example 1

Assign a tag attribute:

<head><title>Event Handler Example</title><script type="text/javascript"></script>

</head>

<body onload="load_greeting()"></body>


Registration Example 2

In a head JavaScript script

<script type="text/javascript"></script>

In the body

<form id="messageBoard" action=""><input type="button" name="mybutton" id="mybutton"

value=“See a message" /></form><script type="text/javascript"></script>


XML/DTD

You are exprected to know:What XML is and is not.Why is XML useful.What is an XML application.What is and XML document.What is well-formed XML.What is valid XML.What is a DTD.How do you write a DTD.What are the content models.


Example

a) You will create a DTD from scratch. Write the correct DTD declaration for each of the following descriptions. (Your answersshould NOT be XML elements!)

Declare an element e which has string content:

Declare an element d which cannot have any content:

Declare an element c which contains precisely one e followed by possibly one d:

Declare an element b which has mixed content, namely strings mixed with any number of e elements.

Declare an element a whose content will be a choice between a sequence of (one or more c, then one d, then 0 or more e,then one b) and a sequence of (one b, then one d, then one c):


Solution

Declare an element e which has string content<!ELEMENT e (#PCDATA)>

Declare an element d which cannot have any content:<!ELEMENT d EMPTY>

Declare an element c which contains precisely one e followed by possibly one d: <!ELEMENT c (e,d?)>

Declare an element b which has mixed content, namely strings mixed with any number of eelements. <!ELEMENT b (#PCDATA|e)*>

Declare an element a whose content will be a choice between a sequence of(one or more c, then one d, then 0 or more e,then one b) and a sequence of (one b, then two ormore d, then one c):<!ELEMENT a ( (c+, d, e*, b) | (b, d, d+, c) )>


Example

b) Create a well-formed and valid XML document that uses the DTD above and has root element a. (Only write the XML. Youneed not write DOCTYPE declaration.)

<a> <c> <e>text</e> //here you could have one <d/> </c> <d/> // Here one could have <e> text</e> <b> //Here you could have any number of <e>text</e> mixed with text </b></a>

Or another possibility is

<a> <b> //Here you could have any number of <e>text</e> mixed with text </b> <d/> <d/> // could have more <d/>s

<c> <e>text</e> //here you could have one <d/> </c></a>


T/F fun

____An XHTML document is an example of a XML application.

____<Phone_Number>555-6789</Phone_Number> is not correct XML because all XML tags should be lower case.

____Valid XML documents are automatically also well-formed XML documents.

Consider the following PHP fragment:

$my_ar[0] = 0;$my_ar[1] = 1;while ($elt = next($my_ar)) {print "Hello!";}

____The output of the above code is: Hello!Hello!

____The JavaScript line:

document.cookie = "New_Cookie = new_val";

overwrites any previous cookies a website may have.


T/F fun

____In JavaScript, primitive types are often coerced to their wrapper objects.

____The output of the following PHP lines is Hello!

if (mktime (5,20,4,12,14,2012) >= mktime (4,0,4,12,15,2012)) print "Hello!";

____Browser wars led to the intertwining of structure layers and style layers.

____Tim Berners-Lee was the first one to use the term internet.

____The style rule:

div p {color:red;}

will be applied to the element <p> in the code below:

<div> <ul> <li><p>Hello!</p></li> </ul>

</div>

Date post:	22-Mar-2018
Category:	Documents
Upload:	vanxuyen
View:	219 times
Download:	3 times

PIC 40A - University of California, Los Angelesvirtanen/40a.1.17su/schedule/final_review.pdf · PIC...

Documents