CMPE 280 Web UI Design and Development September 21 Class Meeting Department of Computer Engineering San Jose State University Fall 2017 Instructor: Ron Mak www.cs.sjsu.edu/~mak

Midterm Solution: Question 1 Briefly explain the concept of a “callback function” as used by Express. A function that is called by Express whenever a particular event occurs.

Midterm Solution: Question 2 What are the primary responsibilities of JavaScript code In the web client? Handle events such as button presses. Input validation. In the web server? Process form data. Generate dynamic web pages.

Midterm Solution: Question 3 Write three functional requirements. New users must be able to create a profile. Users must be able to specify selection criteria. A dealer must be able to add, remove, and modify car data. Write three nonfunctional requirements. The application must run in Chrome and Firefox. The application must respond to button clicks within 3 seconds.

Midterm Solution: Question 3, cont’d HTML Client side: Provide web page content, structure, and semantics. CSS Client side: Provide web page formatting and layout. JavaScript Client side: Event handling and input formatting. Server side: Form data processing and dynamic page generation. MongoDB Server side: Store user profiles, car data, etc.

Midterm Solution: Question 4 <table border="1">     <caption>Courses</caption>     <tr>         <th>Dept</th>         <th>Number</th>         <th>Section</th>         <th>Name</th>     </tr>         <td rowspan="2">CMPE</td>         <td>180</td>         <td>92</td>         <td>C++ Programming</td>         <td>280</td>         <td>04</td>         <td>Web UI Design</td>         <td>CS</td>         <td>153</td>         <td>01</td>         <td>Compiler Writing</td> </table>

Midterm Solution: Question 5 HTML code: <form action = "" onsubmit = "validate()">     <fieldset>         <legend>Enter your credit card number</legend>         <input type = "name"                placeholder="9999 9999 9999 9999"                value = ""                id = "ccNumber" />         <input type = "submit" />     </fieldset> </form>

Midterm Solution: Question 5, cont’d JavaScript: function validate() {     ccNumber = document.getElementById("ccNumber");     message  = document.getElementById("message");     ccn = ccNumber.value;             ccnRE = /(\d{4}) (\d{4}) (\d{4}) (\d{4})/;     if (!ccn.match(ccnRE)){         alert("Invalid credit card number. " +               "The correct format is " +               "9999 9999 9999 9999");         return false;     }     else {         alert("Submitted: " + ccNumber.value);         return true; }

Midterm Solution: Question 6 Explain how: Create an HTML canvas. Initialize a global size variable to 1. In a draw function: Draw the letter O with the current font size in the middle of the canvas. Increment size. When size exceeds the maximum, reset it to 1. Call setInterval with draw and the number of milliseconds.

Midterm Solution: Question 6, cont’d Code: const CANVAS_W  = 100; const CANVAS_H  = CANVAS_W; const MIN_SIZE  = 1; const MAX_SIZE  = CANVAS_W - 5; const INCREMENT = 5; var con; var size = MIN_SIZE; function init() {     con = document.getElementById("canvas")                   .getContext("2d");     setInterval(draw, 50); }

Midterm Solution: Question 6, cont’d function draw() {     con.strokeStyle = "black";     con.fillStyle = "green";     con.fillRect(0, 0, CANVAS_W, CANVAS_H);     con.strokeRect(0, 0, CANVAS_W, CANVAS_H);          con.font = size + "pt sans-serif";     con.fillStyle = "red";     con.fillText("O", (CANVAS_W - size)/2,                       (CANVAS_H + size)/2);     size += INCREMENT;     if (size > MAX_SIZE) size = MIN_SIZE; }    

Midterm Solution: Question 7 What are the advantages of allowing JavaScript code to access the DOM? The JavaScript code can modify the DOM on the client side and immediately change what is displayed in the web page.

More JavaScript Regular Expressions JavaScript uses regular expressions for more than just pattern matching. You can use regular expressions also for string manipulation.

Example: Reversing Names Suppose you had a list of names, such as You want to reverse the names, last name first, and insert a comma: Gerald Ford Ronald Reagan George Bush Bill Clinton Ford, Gerald Reagan, Ronald Bush, George Clinton, Bill Demo

Reversing Names, cont’d re/reverse.html <body> <h1>Reverse names:</h1> <form action=""> Enter a list of names with first name first, one per line:<br> <textarea id="names" rows="10" cols="50"></textarea> <p> <input type="button" value="Reverse names" onclick=reverseNames() /> <input type="reset" /> </p> </form> </body>

Reversing Names, cont’d function reverseNames() { var names = document.getElementById("names").value; var splitter = /\s*\n\s*/; var nameList = names.split(splitter); var newList = new Array; var reverser = /(\S+)\s(\S+)/; for (var i = 0; i < nameList.length; i++) { if (nameList[i].trim().length > 0) { newList[i] = nameList[i].replace(reverser, "$2, $1"); newNames += newList[i] + "\n"; } document.getElementById("names").value = newNames; re/reverse.js Use the matching pattern to split the string into an array of names \s = whitespace character We can improve this regular expression! \S = non-whitespace character Replace each name string according to the matching pattern.

Example: Formatting Names Suppose you allow users to be sloppy: But you still want: gerald ford RONALD REAGAN GeOrGe BuSh BiLL CLinTON Ford, Gerald Reagan, Ronald Bush, George Clinton, Bill Demo

Formatting Names, cont’d Our regular expression for formatting names: Split the first and last names each into an initial letter followed by the rest of the letters. Call the regular expression’s exec() method on a string. Automatically sets JavaScript’s built-in RegExp object. Use RegExp.$1, RegExp.$2, etc. to access stored parts of the match. var formatter = /\s*(\S)(\S+)\s+(\S)(\S+)\s*/

Formatting Names, cont’d re/format.js var newNames = ""; for (var i = 0; i < nameList.length; i++) { if (nameList[i].trim().length > 0) { formatter.exec(nameList[i]); newList[i] = RegExp.$3.toUpperCase() + RegExp.$4.toLowerCase() + ", " + RegExp.$1.toUpperCase() + RegExp.$2.toLowerCase(); newNames += newList[i] + "\n"; }

More Document Object Model (DOM) Recall the DOM. Example: JavaScript, 9th ed. by Tom Negrino and Dori Smith Peachpit Press, 2015 ISBN 978-0-321-99670-1

DOM, cont’d Also recall how we used innerHTML and JavaScript to modify the DOM: <body> <form action=""> <fieldset> ... </fieldset> </form> <div id="outputDiv"> <p>Output will appear here.</p> </div> </body> document.getElementById("outputDiv").innerHTML = "<p><strong>" + x + " + " + y + " = " + sum + "</strong></p>”;

DOM, cont’d Using innerHTML is error-prone. document.getElementById("outputDiv").innerHTML = "<p><strong>" + x + " + " + y + " = " + sum + "</strong></p>"; Using innerHTML is error-prone. You can create elements with unclosed tags, or invalid tags. A safer way to modify the DOM is to use JavaScript’s DOM manipulation API. Demo

Example: DOM Modification The root node whose children we will manipulate using JavaScript’s DOM API: <div id="root"> </div> dom/nodes.html

DOM Modification, cont’d dom/nodes.js window.onload = init; var textArea; var chooser; var indexer; var root; function init() { textArea = document.getElementById("textArea"); chooser = document.getElementById("chooser"); indexer = document.getElementById("indexer"); root = document.getElementById("root"); }

DOM Modification: Add a Child Node dom/nodes.js function addNode() { var text = textArea.value; var textNode = document.createTextNode(text); var pNode = document.createElement("p"); pNode.appendChild(textNode); root.appendChild(pNode); textArea.value = ""; }

DOM Modification: Insert a Child Node dom/nodes.js function insertNode() { var textNode = textArea.value; var index = indexer.selectedIndex; var textNode = document.createTextNode(textNode); var pNode = document.createElement("p"); pNode.appendChild(textNode); var pNodes = root.getElementsByTagName("p"); var chosenPNode = pNodes.item(index); root.insertBefore(pNode, chosenPNode); textArea.value = ""; }

DOM Modification: Replace a Child Node dom/nodes.js function replaceNode() { var text = textArea.value; var index = indexer.selectedIndex; var textNode = document.createTextNode(text); var pNode = document.createElement("p"); pNode.appendChild(textNode); var pNodes = root.getElementsByTagName("p"); var chosenPNode = pNodes.item(index); root.replaceChild(pNode, chosenPNode); textArea.value = ""; }

DOM Modification: Delete a Child Node dom/nodes.js function deleteNode() { var index = indexer.selectedIndex; var pNodes = root.getElementsByTagName("p"); var chosenPNode = pNodes.item(index); root.removeChild(chosenPNode); }

Custom JavaScript Objects At run time, a JavaScript variable can have any value. Create a custom object simply by giving it properties and methods.

Example Custom JavaScript Object objects/person.html var person = new Object(); person.name = "Mary"; person.age = 20; person.nextYear = function() { return this.age + 1; }; alert("Name = " + this.name + ", age = " + this.age + ", age next year = " + this.nextYear()); Demo

JavaScript Classes and Objects A JavaScript class has a constructor function. Example: Convention: Capitalized constructor name. function Person(name, age) { this.name = name; this.age = age; this.nextYear = function() return this.age + 1; }; }

Example Object Instantiation Use the constructor to create new instances: objects/people.html function createPeople() { mary = new Person("Mary", 20); john = new Person("John", 25); showPerson(mary); showPerson(john); } function showPerson(p) alert("Name = " + p.name + ", age = " + p.age + ", age next year = " + p.nextYear()); Demo

Prototype Objects A JavaScript class is a set of objects that inherit properties from the same prototype object. Person.prototype = { toString: function() { return "Person[name: '" + this.name + "', age: " + this.age + "]"; } function createPeople() mary = new Person("Mary", 20); john = new Person("John", 25); alert(mary); alert(john); objects/prototype.html Demo

Coming Soon … JQuery AJAX A JavaScript framework that simplifies client-side programming. AJAX A JavaScript technique for communicating with the web server that is more efficient than having the server download a new web page each time.