PIC 40A. Review for the Final. Copyright 2011 Jukka Virtanen UCLA 1 06/05/15

Transcription

1 PIC 40A Review for the Final 06/05/15 Copyright 2011 Jukka Virtanen UCLA 1

2 Overview Final is on: Monday, June 08, :30 AM - 2:30 PM Geology 4645 Double check on myucla.edu. 06/05/15 Copyright Jukka Virtanen

3 Overview Short answer XHTML CSS JavaScript PHP PHP MySQL XML/DTD Most likely 6 or 7 questions. 06/05/15 Copyright Jukka Virtanen

4 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. 06/05/15 Copyright Jukka Virtanen

5 Using PHP to create webpages I will most likely ask you to create a table or a list or something else from some data that can come from the user or from a MySQL database or something like that. You should know how to use various PHP techniques to write XHTML or even JavaScript. 06/05/15 Copyright Jukka Virtanen

6 Example Consider the following XHTML form: <p> In the form below please write what kind of animals your pets are and their names. Then click submit.</p> <form action=" 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 the information supplied by the user and writes it into a table form. For example filling the form as below: 06/05/15 Copyright Jukka Virtanen

7 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 the XHTML table. You need not have the PHP write any other XHTML than what is required for the table. 06/05/15 Copyright Jukka Virtanen

8 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>";?> 06/05/15 Copyright Jukka Virtanen

9 PHP and timestamps Timestamp is just a number of seconds elapsed since Jan up to some given time. We can extract lot of information from a time stamp using the predefined function date. mktime(... ) allows us to create a timestamp if we give as arguments hr,min,sec,mo,day, year. time() will give us the current timestamp. You should review: Midterm 2 question 4, Homeworks 5,6. 06/05/15 Copyright Jukka Virtanen

10 PHP Arrays PHP arrays are indexed by keys. The important concepts are: Declaring arrays Accessing array elements using keys sizeof explode/implode next,current foreach sorting arrays This is not an all inclusive list but these are concepts I expect you to know without wasting time at looking at notes. 06/05/15 Copyright Jukka Virtanen

11 Example Assume that you have a PHP array called $days. The $days array contains strings that represent dates with the following format: MM-DD-YYYY. For example: The array $days might look something like: $days = array(" "," "," "); Your boss wants you to write code that outputs this array keeping the same month and day but fixing the year to be the current year. Warning: This array is indexed by keys. a) Write the code to get the current Unix timestamp then use this timestamp with the date function to get the current year. (Hint: Y is used to get the year.) b) Assume that the current year is now in a variable called $year. Use this variable along with the $days array to output the array with the old days and updated years. 06/05/15 Copyright Jukka Virtanen

12 Solution a) $year = date("y"); b) <?php $ar = array("key1"=>" ", "key2"=>" ", "key3"=>" ", "key4"=>" "); foreach ($ar as $k =>$v) { $date_array = explode("-",$v); $date_array[2] = $year; $d = implode("-",$date_array); echo "$d<br/>"; }?> 06/05/15 Copyright Jukka Virtanen

13 PHP Regular expressions You are expected to know basic regular expression concepts. Since regular expression patterns are same in JS as they are in PHP I might switch things up a bit and ask you to apply regular expressions in JS. I will of course have to tell you what the relevant functions are. 06/05/15 Copyright Jukka Virtanen

14 Example We have a PHP array called $student_info. Each entry in this array is a string describing a single students information. You do not know exactly in what format this string is however you do know that it contains the students address. Extract from each entry an address: bruinonlineid.ucla.edu and write it to an array called s. 06/05/15 Copyright Jukka Virtanen

15 Example <?php $ar = array("key1" => "hmhmhmhhm jukka@ucla.edu", "key2"=>"fsdkjdkf dkfjdkfj j56hello@ucla.edu", "key3"=>"m78@ucla.edu jhjoo4fj@ucla.edu", "key4"=>"moo@ucla.edu"); $pattern = "/[a-z][a-z0-9]{2,14}@ucla\.edu/"; foreach ($ar as $k =>$v) { preg_match_all($pattern, $v, $ _ar); $ = $ _ar[0][0]; echo $ ."<br/>"; }?> 06/05/15 Copyright Jukka Virtanen

16 JavaScript There are 4 main topics: "Ordinary" JavaScript stuff -basics, functions, control structures, random numbers etc. DOM manipulations Cookies Events 06/05/15 Copyright Jukka Virtanen

17 DOM Example a) Write a function that prompts the user to enter a string and then appends the string to an unordered list. You may assume that the page already contains a single element <ul></ul> and you need only to append <li> tags (with approprate content) to this element. 06/05/15 Copyright Jukka Virtanen

18 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); } 06/05/15 Copyright Jukka Virtanen

19 DOM Example b) Write a JS function called next(). This function "cycles" through the words in your unordered list from part a). When the function next() is called, the next word in the unordered list is selected by underlining the text in it and the previously selected word is no longer underlined. When the last word is currently selected and next() is called, the first word on the list should be selected. You may assume that there is a global variable called current defined for you. This variable is the object node of the currently selected word. However, when you use the variable current it 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 the first list item by referring to the firstchild of the ul node. 06/05/15 Copyright Jukka Virtanen

20 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"; } 06/05/15 Copyright Jukka Virtanen

21 Cookies It is likely that there will be some question about cookies because it is a good 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! 06/05/15 Copyright Jukka Virtanen

22 Cookie example Assume that the web page you are working on has multiple cookies. One of these cookies is a cookie called visitors. Write a function called append_visitor that takes as an argument a string called name and then appends the name to the visitors cookie. The visitors cookie has the form: visitors=joe^joanna^joe^cub; 06/05/15 Copyright Jukka Virtanen

23 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; } 06/05/15 Copyright Jukka Virtanen

24 Events Browser detects when an event occurs and if an event handler has been registered 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 the appropriate code. Event can be either "hard coded" into the XHTML such as onclick usually is. Event can also be registered dynamically. 06/05/15 Copyright Jukka Virtanen

25 Registration Example 1 Assign a tag attribute: <head> <title>event Handler Example</title> <script type="text/javascript"> <!-- function load_greeting() { alert("whatup!");} // --> </script> </head> <body onload="load_greeting()"> </body> 06/05/15 Copyright Jukka Virtanen

26 Registration Example 2 In a head JavaScript script <script type="text/javascript"> <!-- function message() {alert("thanks for clicking");} // --> </script> In the body <form id="messageboard" action=""> <input type="button" name="mybutton" id="mybutton" value= See a message" /> </form> <script type="text/javascript"> <!-- document.getelementbyid("mybutton").onclick = message; // --> </script> 06/05/15 Copyright Jukka Virtanen

27 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. 06/05/15 Copyright Jukka Virtanen

28 Example a) You will create a DTD from scratch. Write the correct DTD declaration for each of the following descriptions. (Your answers should 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): 06/05/15 Copyright Jukka Virtanen

29 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 e elements. <!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 or more d, then one c): <!ELEMENT a ( (c+, d, e*, b) (b, d, d+, c) )> 06/05/15 Copyright Jukka Virtanen

30 Example b) Create a well-formed and valid XML document that uses the DTD above and has root element a. (Only write the XML. You need not write DOCTYPE declaration.) <a> </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> 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 </a> <c> </c> <e>text</e> //here you could have one <d/> 06/05/15 Copyright Jukka Virtanen

31 T/F fun An XHTML document is an example of a XML application. <Phone_Number> </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. 06/05/15 Copyright Jukka Virtanen

32 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> 06/05/15 Copyright Jukka Virtanen