CS 174: Web Programming October 12 Class Meeting Department of Computer Science San Jose State...
-
Upload
ashlyn-dixon -
Category
Documents
-
view
224 -
download
0
Transcript of CS 174: Web Programming October 12 Class Meeting Department of Computer Science San Jose State...
CS 174: Web ProgrammingOctober 12 Class Meeting
Department of Computer ScienceSan Jose State University
Fall 2015Instructor: Ron Mak
www.cs.sjsu.edu/~mak
Computer Science Dept.Fall 2015: October 12
CS 174: Web Programming© R. Mak
2
More JavaScript Regular Expressions
JavaScript uses regular expressions for more than just pattern matching.
You can use regular expressions also for string manipulation.
Computer Science Dept.Fall 2015: October 12
CS 174: Web Programming© R. Mak
3
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 FordRonald ReaganGeorge BushBill Clinton
Ford, GeraldReagan, RonaldBush, GeorgeClinton, Bill
Demo
Computer Science Dept.Fall 2015: October 12
CS 174: Web Programming© R. Mak
4
Reversing Names, cont’d
<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>
re/reverse.html
Computer Science Dept.Fall 2015: October 12
CS 174: Web Programming© R. Mak
5
Reversing Names, cont’dfunction 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 tosplit the string into an arrayof 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
6
Example: Formatting Names
Suppose you allow users to be sloppy:
But you still want:
gerald ford RONALD REAGANGeOrGe BuSh BiLL CLinTON
Ford, GeraldReagan, RonaldBush, GeorgeClinton, Bill
Demo
Computer Science Dept.Fall 2015: October 12
CS 174: Web Programming© R. Mak
7
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 accessstored parts of the match.
var formatter = /\s*(\S)(\S+)\s+(\S)(\S+)\s*/
Computer Science Dept.Fall 2015: October 12
CS 174: Web Programming© R. Mak
8
Formatting Names, cont’d
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
9
More Document Object Model (DOM)
Recall the DOM. Example:
JavaScript, 9th ed.by Tom Negrino and Dori SmithPeachpit Press, 2015ISBN 978-0-321-99670-1
Computer Science Dept.Fall 2015: October 12
CS 174: Web Programming© R. Mak
10
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>”;
Computer Science Dept.Fall 2015: October 12
CS 174: Web Programming© R. Mak
11
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.
document.getElementById("outputDiv").innerHTML = "<p><strong>" + x + " + " + y + " = " + sum + "</strong></p>";
Demo
Computer Science Dept.Fall 2015: October 12
CS 174: Web Programming© R. Mak
12
Example: DOM Modification
The root node whose children we will manipulate using JavaScript’s DOM API:
<div id="root"> </div>
dom/nodes.html
Computer Science Dept.Fall 2015: October 12
CS 174: Web Programming© R. Mak
13
DOM Modification, cont’d
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
14
DOM Modification: Add a Child Node
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
15
DOM Modification: Insert a Child Node
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
16
DOM Modification: Replace a Child Node
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
17
DOM Modification: Delete a Child Node
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
18
Custom JavaScript Objects
At run time, a JavaScript variable can have any value.
Create a custom object simply by giving it properties and methods.
Computer Science Dept.Fall 2015: October 12
CS 174: Web Programming© R. Mak
19
Example Custom JavaScript Object
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
20
JavaScript Classes and Objects
A JavaScript class has a constructor function. Example:
function Person(name, age){ this.name = name; this.age = age; this.nextYear = function() { return this.age + 1; };}
Convention: Capitalizedconstructor name.
Computer Science Dept.Fall 2015: October 12
CS 174: Web Programming© R. Mak
21
Example Object Instantiation
Use the constructor to create new instances:
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
22
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);}
Demo
objects/prototype.html
Computer Science Dept.Fall 2015: October 12
CS 174: Web Programming© R. Mak
23
Hybrid Web Pages
Now we can have pages that contain:
HTML
CSS <style type="text/css"> … </style>
JavaScript <script type="text/javascript"> … </script>
PHP <?php … ?>
Computer Science Dept.Fall 2015: October 12
CS 174: Web Programming© R. Mak
24
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.
Computer Science Dept.Fall 2015: October 12
CS 174: Web Programming© R. Mak
25
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.
Computer Science Dept.Fall 2015: October 12
CS 174: Web Programming© R. Mak
26
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.
Computer Science Dept.Fall 2015: October 12
CS 174: Web Programming© R. Mak
27
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.