CMPE 280 Web UI Design and Development February
CMPE 280 Web UI Design and Development February 20 Class Meeting Department of Computer Engineering San Jose State University Spring 2020 Instructor: Ron Mak www. cs. sjsu. edu/~mak 1
More Java. Script Regular Expressions o Java. Script uses regular expressions for more than just pattern matching. o You can use regular expressions also for string manipulation. Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 2
Example: Reversing Names o Suppose you had a list of names, such as Bill Clinton George Bush Barack Obama Donald Trump o You want to reverse the names, last name first, and insert a comma: Clinton, Bill Bush, George Obama, Barack Trump, Donald Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak Demo 3
Reversing Names, cont’d re/reverse. html <body> <h 1>Reverse names: </h 1> <form action=""> Enter a list of names with first name first, one per line: <textarea id="names" rows="10" cols="50"></textarea> <p> <input type="button" value="Reverse names" onclick=reverse. Names() /> <input type="reset" /> </p> </form> </body> Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 4
Reversing Names, cont’d function reverse. Names() { var names = document. get. Element. By. Id("names"). value; re/reverse. js Use the pattern to split the string var splitter = /s*ns*/; into an array of names. The var name. List = names. split(splitter); pattern separates the names. s is a whitespace character. var new. List = new Array; var reverser = /(S+)s(S+)/; S = non-whitespace character for (var i = 0; i < name. List. length; i++) { if (name. List[i]. trim(). length > 0) { new. List[i] = name. List[i]. replace(reverser, "$2, $1"); new. Names += new. List[i] + "n"; Replace each name string using the reverser pattern. } } document. get. Element. By. Id("names"). value = new. Names; } Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 5
Example: Formatting Names o Suppose you allow users to be sloppy: Bi. LL CLin. TON Ge. Or. Ge Bu. Sh barack OBAMA d. On. Al. D tru. MP o But you still want: Clinton, Bill Bush, George Obama, Barack Trump, Donald Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak Demo 6
Formatting Names, cont’d o Our regular expression formatting names: var formatter = /s*(S)(S+)s+(S)(S+)s*/ n o 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 each string. n n Automatically sets Java. Script’s built-in Reg. Exp object. Use Reg. Exp. $1, Reg. Exp. $2, etc. to access stored parts of the match. Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 7
Formatting Names, cont’d re/format. js var new. Names = ""; for (var i = 0; i < name. List. length; i++) { if (name. List[i]. trim(). length > 0) { formatter. exec(name. List[i]); new. List[i] = + + Reg. Exp. $3. to. Upper. Case() Reg. Exp. $4. to. Lower. Case() ", " Reg. Exp. $1. to. Upper. Case() Reg. Exp. $2. to. Lower. Case(); new. Names += new. List[i] + "n"; } } Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 8
More Document Object Model (DOM) o Recall the DOM. n Example: Java. Script, 9 th ed. by Tom Negrino and Dori Smith Peachpit Press, 2015 ISBN 978 -0 -321 -99670 -1 Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 9
DOM, cont’d o Also recall how we used inner. HTML and Java. Script to modify the DOM: <body> <form action=""> <fieldset>. . . </fieldset> </form> <div id="output. Div"> <p>Output will appear here. </p> </div> </body> document. get. Element. By. Id("output. Div"). inner. HTML = "<p><strong>" + x + " + y + " = " + sum + "</strong></p>”; Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 10
DOM, cont’d document. get. Element. By. Id("output. Div"). inner. HTML = "<p><strong>" + x + " + y + " = " + sum + "</strong></p>"; o Using inner. HTML is error-prone. n o You can create elements with unclosed tags, or invalid tags. A safer way to modify the DOM is to use Java. Script’s DOM manipulation API. Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 11
Example: DOM Modification <head> dom/nodes. html <title>Node Actions</title> <script src="nodes. js"></script> </head> <body> <h 1>Node actions</h 1> <form id="the. Form"> Enter some text and choose an action: <p><textarea id="text. Area" rows="5" cols="30"></textarea></p> <p> Node action: <select id="chooser"> <option value="Add">Add to end</option> <option value="Insert">Insert before</option> <option value="Replace">Replace</option> <option value="Delete">Delete</option> </select> Paragraph: <select id="indexer"></select> <input type=button value="Do it!" onclick=node. Action() /> </p> </form> <hr /> The node whose children we will manipulate <div id="workspace"> </div> Computer Engineering Dept. CMPE 280: Web UI Design and Development using Java. Script’s DOM API. </body>Spring 2020: February 20 © R. Mak 12
DOM Modification, cont’d window. onload = init; var var dom/nodes. js text. Area; chooser; indexer; workspace; function init() { text. Area = chooser = indexer = workspace = } Computer Engineering Dept. Spring 2020: February 20 document. get. Element. By. Id("text. Area"); document. get. Element. By. Id("chooser"); document. get. Element. By. Id("indexer"); document. get. Element. By. Id("workspace"); CMPE 280: Web UI Design and Development © R. Mak 13
DOM Modification: Add a Child Node dom/nodes. js function add. Node() { var text = text. Area. value; var text. Node = document. create. Text. Node(text); var p. Node = document. create. Element("p"); p. Node. append. Child(text. Node); workspace. append. Child(p. Node); text. Area. value = ""; } Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 14
DOM Modification: Insert a Child Node function insert. Node() { var text. Node = text. Area. value; var index = indexer. selected. Index; dom/nodes. js var text. Node = document. create. Text. Node(text. Node); var p. Node = document. create. Element("p"); p. Node. append. Child(text. Node); var p. Nodes = workspace. get. Elements. By. Tag. Name("p"); var chosen. PNode = p. Nodes. item(index); workspace. insert. Before(p. Node, chosen. PNode); text. Area. value = ""; } Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 15
DOM Modification: Replace a Child Node function replace. Node() { var text = text. Area. value; var index = indexer. selected. Index; dom/nodes. js var text. Node = document. create. Text. Node(text); var p. Node = document. create. Element("p"); p. Node. append. Child(text. Node); var p. Nodes = workspace. get. Elements. By. Tag. Name("p"); var chosen. PNode = p. Nodes. item(index); workspace. replace. Child(p. Node, chosen. PNode); text. Area. value = ""; } Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 16
DOM Modification: Delete a Child Node dom/nodes. js function delete. Node() { var index = indexer. selected. Index; var p. Nodes = workspace. get. Elements. By. Tag. Name("p"); var chosen. PNode = p. Nodes. item(index); workspace. remove. Child(chosen. PNode); } Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 17
Custom Java. Script Objects o At run time, a Java. Script variable can have any value. o Create a custom object simply by giving it properties and methods. Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 18
Example Custom Java. Script Object var person = new Object(); person. name = "Mary"; person. age = 20; objects/person. html person. next. Year = function() { return this. age + 1; }; alert("Name = " + this. name + ", age = " + this. age + ", age next year = " + this. next. Year()); Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak Demo 19
Java. Script Classes and Objects o A Java. Script class has a constructor function. n Example: Convention: Capitalize function Person(name, age) the constructor name. { this. name = name; this. age = age; this. next. Year = function() { return this. age + 1; }; } Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 20
Example Object Instantiation o Use the constructor to create new instances: function create. People() { mary = new Person("Mary", 20); john = new Person("John", 25); objects/people. html show. Person(mary); show. Person(john); } function show. Person(p) { alert("Name = " + p. name + ", age = " + p. age + ", age next year = " + p. next. Year()); Computer Engineering Dept. CMPE 280: Web UI Design and Development } Spring 2020: February 20 © R. Mak Demo 21
Prototype Objects o A Java. Script class is a set of objects that inherit properties from the same prototype objects/prototype. html Person. prototype = { to. String: function() { return "Person[name: '" + this. name + "', age: " + this. age + "]"; } } function create. People() { mary = new Person("Mary", 20); john = new Person("John", 25); alert(mary); alert(john); Computer Engineering Dept. } Spring 2020: February 20 Demo CMPE 280: Web UI Design and Development © R. Mak 22
Web Browser – Web Server Cycle o Each time you submit form data from the web browser to the web server, you must wait for: n n o The data to upload to the web server. The web server to generate the next web page. The next web page to download to your browser. Your browser to render the next web page. You experience a noticeable page refresh. Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 23
Web Browser – Web Server Cycle, cont’d o Example: n n n Click the submit button. Java. Script code on the server opens and reads a text file and generates a new web page containing the contents of the text file. The browser displays the new web page. Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 24
Web Browser – Web Server Cycle, cont’d <body> Client side <form action="text-response" method="get"> <fieldset> <legend>User input</legend> <p> <label>First name: </label> <input name="first. Name" type="text" /> </p> <label>Last name: </label> <input name="last. Name" type="text" /> </p> <input type="submit" value="Submit" /> </p> </fieldset> </form> </body> Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 25
Web Browser – Web Server Cycle, cont’d Server side // Process the form data and send a response. app. get('/text-response’, function(req, res) { var first. Name = req. param('first. Name'); var last. Name = req. param('last. Name'); var html = 'Hello, ' + first. Name + ' ' + last. Name + '!'; res. send(html); } ); Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 26
AJAX o Asynchronous Java. Script and XML o Tighter communication between the web browser and the web server. n n n o Shortens the browser-server cycle. The server generates and downloads part of a page. The web browser refreshes only the part of the page that needs to change. The browser and server work asynchronously. n The browser does not have to wait for the download from the server. Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak 27
AJAX Example o We will compare AJAX to non-AJAX. Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak Demo 28
AJAX Example, cont’d module. exports. home = function(request, result) { send. Page('index. html', result); }; module. exports. get_nonajax = function(request, result) { send. Page('nonajax. html', result); }; module. exports. post_nonajax = function(request, result) { send. Page('nonajax 2. html', result); }; module. exports. get_ajax = function(request, result) { send. Page('ajax. html', result); }; module. exports. post_ajax = function(request, result) { send. Page('lorem. txt', result); Computer Engineering Dept. CMPE 280: Web UI Design and Development controllers/main. js Spring 2020: February 20 © R. Mak }; 29
AJAX Example, cont’d var request; public/common. js function do. AJAX() { request = new XMLHttp. Request(); request. open("POST", "/ajax"); request. onreadystatechange = display. File; request. send(null); } Function display. File() function display. File() will be called asynchronously. { if (request. ready. State == 4) { if (request. status == 200) { var text = request. response. Text; text = text. replace(/n/g, " "); document. get. Element. By. Id("output"). inner. HTML = "<p>" + text + "</p>"; } } Computer Engineering Dept. CMPE 280: Web UI Design and Development } Spring 2020: February 20 © R. Mak 30
The XMLHttp. Request Object o Use the properties and methods of the XMLHttp. Request object to control a request from the web browser to the web server. See also: http: //www. w 3 schools. com/xml/dom_http. asp Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak Java. Script, 9 th ed. by Tom Negrino and Dori Smith Peachpit Press, 2015 ISBN 978 -0 -321 -99670 -1 31
ready. State Property Values Computer Engineering Dept. Spring 2020: February 20 CMPE 280: Web UI Design and Development © R. Mak Java. Script, 9 th ed. by Tom Negrino and Dori Smith Peachpit Press, 2015 ISBN 978 -0 -321 -99670 -1 32
- Slides: 32