1 / 37

CMPE 280 Web UI Design and Development February 21 Class Meeting

This example demonstrates animated menus for Shakespeare's plays, categorized into comedies, tragedies, and histories. Clicking on a menu item toggles the display of the corresponding play list. Improve your UI design and web development skills.

marroyo
Download Presentation

CMPE 280 Web UI Design and Development February 21 Class Meeting

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CMPE 280Web UI Design and DevelopmentFebruary 21 Class Meeting Department of Computer EngineeringSan Jose State UniversitySpring 2019Instructor: Ron Mak www.cs.sjsu.edu/~mak

  2. Animated Menus: Example 1 <body>     <h1>Shakespeare's Plays</h1>     <div>         <a href="menu1.html" class="menuLink">Comedies</a>         <ul class="menu" id="menu1">             <li><a href="pg1.html">All's Well That Ends Well</a></li>             <li><a href="pg2.html">As You Like It</a></li>             <li><a href="pg3.html">Love's Labour's Lost</a></li>             <li><a href="pg4.html">The Comedy of Errors</a></li>         </ul>     </div>     <div>         <a href="menu2.html" class="menuLink">Tragedies</a>         <ul class="menu" id="menu2">             <li><a href="pg5.html">Anthony &amp; Cleopatra</a></li>             <li><a href="pg6.html">Hamlet</a></li>             <li><a href="pg7.html">Romeo &amp; Juliet</a></li>         </ul>         </div>     <div>         <a href="menu3.html" class="menuLink">Histories</a>         <ul class="menu" id="menu3">             <li><a href="pg8.html">Henry IV, Part 1</a></li>             <li><a href="pg9.html">Henry IV, Part 2</a></li>         </ul>     </div> </body> menus/menu1.html

  3. Animated Menus: Example 1, cont’d menus/menu1.js window.onload = init; function init()  { varallLinks = document.getElementsByTagName("a");     for (vari = 0; i < allLinks.length; i++) {         if (allLinks[i].className == "menuLink") { allLinks[i].onclick = toggleMenu;         }     } }

  4. Animated Menus: Example 1, cont’d menus/menu1.js function toggleMenu(event)  { varstartMenu    = this.href.lastIndexOf("/") + 1; varstopMenu     = this.href.lastIndexOf("."); varthisMenuName = this.href.substring(startMenu, stopMenu); varthisMenuStyle = document.getElementById(thisMenuName).style; if (thisMenuStyle.display == "block") { thisMenuStyle.display = "none";     }     else { thisMenuStyle.display = "block";     } event.preventDefault(); } Toggle between invisible and visible. ul.menu { display: none; list-style-type: none; margin-top: 5px; } Initially invisible. menus/menu1.css

  5. Assignment #3 • Further develop your prototype code. • User authentication using sessions and cookies. • Server-side page generation. • Input form validation with HTML, CSS, and/or JavaScript. • Improved user interactivity with client-side JavaScript. • HTML 5 canvas drawing and animation. • Use your imagination! • This assignment is primarily about the client side. • Make any necessary changes to your server-side code to support your client-side components.

  6. Assignment #3, cont’d • Brief (2- or 3-page) report: • Describe what input validation and interactivity features you added on the client side. • Describe what the server side does to support the client side. • Include any necessary instructions to build and run your code. • Submit your zip file to Canvas. • Assignment #3 • Do not include the node_modules directory. • Due Friday, September 27 at 11:59 PM.

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

  8. 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: Bill Clinton George Bush Barack Obama Donald Trump Clinton, Bill Bush, George Obama, Barack Trump, Donald Demo

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

  10. Reversing Names, cont’d re/reverse.js function reverseNames() { var names = document.getElementById("names").value; var splitter = /\s*\n\s*/; var nameList = names.split(splitter); var newList = newArray; 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 pattern to split the string into an array of names. The pattern separates the names. \s is a whitespace character. \S= non-whitespace character Replace each name string usingthereverser pattern.

  11. Example: Formatting Names • Suppose you allow users to be sloppy: • But you still want: BiLLCLinTON GeOrGeBuSh barack OBAMA dOnAlDtruMP Clinton, Bill Bush, George Obama, Barack Trump, Donald Demo

  12. 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 each string. • Automatically sets JavaScript’s built-in RegExpobject. • Use RegExp.$1, RegExp.$2, etc. to access stored parts of the match. var formatter = /\s*(\S)(\S+)\s+(\S)(\S+)\s*/

  13. Formatting Names, cont’d re/format.js varnewNames = ""; for (vari = 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"; } }

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

  15. DOM, cont’d • Also recall how we used innerHTMLand 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>”;

  16. DOM, cont’d • Using innerHTMLis 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>";

  17. Example: DOM Modification <head>     <title>Node Actions</title>     <script src="nodes.js"></script> </head> <body>     <h1>Node actions</h1>     <form id="theForm">         Enter some text and choose an action:         <p><textarea id="textArea" 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=nodeAction() />         </p>     </form>     <hr /> <div id="workspace"> </div> </body> dom/nodes.html The node whose children we will manipulate using JavaScript’s DOM API.

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

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

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

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

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

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

  24. Example Custom JavaScript Object objects/person.html varperson = 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

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

  26. 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); } functionshowPerson(p) { alert("Name = " + p.name + ", age = " + p.age + ", age next year = " + p.nextYear()); } Demo

  27. Prototype Objects • A JavaScript class is a set of objects that inherit properties from the same prototype object. objects/prototype.html 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

  28. Web Browser – Web Server Cycle • Each time you submit form data from the web browser to the web server, you must wait for: • 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.

  29. Web Browser – Web Server Cycle, cont’d • Example: • Click the submit button. • JavaScript 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.

  30. Web Browser – Web Server Cycle, cont’d <body>     <form action="text-response"           method="get">         <fieldset>             <legend>User input</legend>             <p>                 <label>First name:</label>                 <input name="firstName" type="text" />             </p>             <p>                 <label>Last name:</label>                 <input name="lastName" type="text" />             </p>             <p>                 <input type="submit" value="Submit" />             </p>         </fieldset>     </form> </body> Client side

  31. 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 firstName = req.param('firstName');         var lastName  = req.param('lastName');         var html = 'Hello, ' + firstName + ' ' + lastName + '!';         res.send(html);     } );

  32. AJAX • Asynchronous JavaScript and XML • Tighter communication between the web browser and the web server. • 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. • The browser does not have to wait for the download from the server.

  33. AJAX Example • We will compare AJAX to non-AJAX. Demo

  34. AJAX Example, cont’d module.exports.home = function(request, result)  { sendPage('index.html', result); }; module.exports.get_nonajax = function(request, result)  { sendPage('nonajax.html', result); }; module.exports.post_nonajax = function(request, result)  { sendPage('nonajax2.html', result); }; module.exports.get_ajax = function(request, result)  { sendPage('ajax.html', result); }; module.exports.post_ajax = function(request, result)  { sendPage('lorem.txt', result); }; controllers/main.js

  35. AJAX Example, cont’d public/common.js var request; function doAJAX() {     request = new XMLHttpRequest(); request.open("POST", "/ajax"); request.onreadystatechange = displayFile; request.send(null); } function displayFile() {     if (request.readyState == 4) {         if (request.status == 200) { var text = request.responseText;             text = text.replace(/\n/g, "<br />"); document.getElementById("output").innerHTML =                     "<p>" + text + "</p>";         }     } } Function displayFile() will be called asynchronously.

  36. The XMLHttpRequest Object • Use the properties and methods of the XMLHttpRequestobject to control a request from the web browser to the web server. See also: http://www.w3schools.com/xml/dom_http.asp JavaScript, 9th ed. by Tom Negrino and Dori Smith Peachpit Press, 2015 ISBN 978-0-321-99670-1

  37. readyState Property Values JavaScript, 9th ed. by Tom Negrino and Dori Smith Peachpit Press, 2015 ISBN 978-0-321-99670-1

More Related