1. CMPE 280 Web UI Design and Development September 21 Class Meeting
Department of Computer Engineering San Jose State University Fall 2017 Instructor: Ron Mak

2. 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.

3. 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.

4. 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.

5. 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.

6. 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>

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

8. 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 " +
              " ");
        return false;
    }
    else {
        alert("Submitted: " + ccNumber.value);
        return true; }

9. 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.

10. 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); }

11. 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;
}    

12. 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.

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

14. 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

15. 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>

16. 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.

17. 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

18. 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*/

19. 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"; }

20. More Document Object Model (DOM)
Recall the DOM.
Example:
JavaScript, 9th ed.
by Tom Negrino and Dori Smith
Peachpit Press, 2015
ISBN

21. 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>”;

22. 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

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

24. 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"); }

25. 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 = ""; }

26. 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 = ""; }

27. 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 = ""; }

28. 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); }

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

30. 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

31. 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; }; }

32. 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

33. 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

34. 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.