CS 174: Web Programming October 12 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak More JavaScript Regular Expressions  JavaScript uses regular expressions for more than just pattern matching.  You can use regular expressions also for string manipulation. 2

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak 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: 3 Gerald Ford Ronald Reagan George Bush Bill Clinton Ford, Gerald Reagan, Ronald Bush, George Clinton, Bill Demo

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak Reversing Names, cont’d 4 Reverse names: Enter a list of names with first name first, one per line: <input type="button" value="Reverse names" onclick=reverseNames() /> re/reverse.html

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak Reversing Names, cont’d 5 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; } Use the matching pattern to split the string into an array of names \s = whitespace character Replace each name string according to the matching pattern. We can improve this regular expression! \S = non-whitespace character re/reverse.js

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak Example: Formatting Names  Suppose you allow users to be sloppy:  But you still want: 6 gerald ford RONALD REAGAN GeOrGe BuSh BiLL CLinTON Ford, Gerald Reagan, Ronald Bush, George Clinton, Bill Demo

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak 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.  Called 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. 7 var formatter = /\s*(\S)(\S+)\s+(\S)(\S+)\s*/

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak Formatting Names, cont’d 8 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"; } } re/format.js

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak More Document Object Model (DOM)  Recall the DOM. Example: 9 JavaScript, 9 th ed. by Tom Negrino and Dori Smith Peachpit Press, 2015 ISBN

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak DOM, cont’d  Also recall how we used innerHTML and JavaScript to modify the DOM: Output will appear here. document.getElementById("outputDiv").innerHTML = " " + x + " + " + y + " = " + sum + " ”;

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak DOM, cont’d  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. 11 document.getElementById("outputDiv").innerHTML = " " + x + " + " + y + " = " + sum + " "; Demo

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak Example: DOM Modification  The root node whose children we will manipulate using JavaScript’s DOM API: 12 dom/nodes.html

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak DOM Modification, cont’d 13 window.onload = init; var textArea; var chooser; var indexer; var rootNode; function init() { textArea = document.getElementById("textArea"); chooser = document.getElementById("chooser"); indexer = document.getElementById("indexer"); root = document.getElementById("root"); } dom/nodes.js

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak DOM Modification: Add a Child Node 14 function addNode() { var text = textArea.value; var textNode = document.createTextNode(text); var pNode = document.createElement("p"); pNode.appendChild(textNode); rootNode.appendChild(pNode); textArea.value = ""; } dom/nodes.js

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak DOM Modification: Insert a Child Node 15 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 = rootNode.getElementsByTagName("p"); var chosenPNode = pNodes.item(index); rootNode.insertBefore(pNode, chosenPNode); textArea.value = ""; } dom/nodes.js

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak DOM Modification: Replace a Child Node 16 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 = rootNode.getElementsByTagName("p"); var chosenPNode = pNodes.item(index); rootNode.replaceChild(pNode, chosenPNode); textArea.value = ""; } dom/nodes.js

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak DOM Modification: Delete a Child Node 17 function deleteNode() { var index = indexer.selectedIndex; var pNodes = rootNode.getElementsByTagName("p"); var chosenPNode = pNodes.item(index); rootNode.removeChild(chosenPNode); } dom/nodes.js

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak Custom JavaScript Objects  At run time, a JavaScript variable can have any value.  Create a custom object simply by giving it properties and methods. 18

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak Example Custom JavaScript Object 19 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 objects/person.html

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak JavaScript Classes and Objects  A JavaScript class has a constructor function. Example: 20 function Person(name, age) { this.name = name; this.age = age; this.nextYear = function() { return this.age + 1; }; } Convention: Capitalized constructor name.

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak Example Object Instantiation  Use the constructor to create new instances: 21 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 objects/people.html

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak Prototype Objects  A JavaScript class is a set of objects that inherit properties from the same prototype object. 22 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); } Demo objects/prototype.html

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak Hybrid Web Pages  Now we can have pages that contain: HTML CSS  … JavaScript  … PHP  23

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak Hybrid Web Pages, cont’d  Remember that HTML, CSS, and JavaScript are interpreted by the client-side web browser. Firefox, Chrome, Apache, etc.  Remember that PHP is interpreted by the server-side web server. Apache, etc. 24

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak Hybrid Web Pages, cont’d  All web pages live in the web server’s htdocs (or public_html ) directory. Access each page via its URL.  Pages containing PHP must go through the web server for the PHP code to be executed. If you simply open such a page in a web browser, the HTML, CSS, and JavaScript code may work, but the PHP code will not execute. PHP code is executed by the web server. 25

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak Hybrid Web Pages, cont’d  A web page can contain PHP code that generates a new page containing HTML, CSS, JavaScript, and even PHP code.  TIP: To avoid confusion, have your web pages contain only HTML code as much as possible. Link to separate CSS and JavaScript files. Include separate PHP files. 26

Computer Science Dept. Fall 2015: October 12 CS 174: Web Programming © R. Mak Coming Soon …  JQuery 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. 27