CMPE 280 Web UI Design and Development September 26 Class Meeting Department of Computer Engineering San Jose State University Fall 2017 Instructor: Ron Mak www.cs.sjsu.edu/~mak
Web Browser – Web Server Cycle Each time you submit form data from the web browser to the web server, you must wait for: 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.
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.
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> <label>Last name:</label> <input name="lastName" type="text" /> <input type="submit" value="Submit" /> </fieldset> </form> </body> Client side
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); } );
Web Browser – node.js Cycle app.get('/nonajax.html', function(req, res) { var html = ''; lineReader.eachLine('nonajax.html', function(line, last) { html += line + '\n'; if (last) { res.send(html); return false; } else { return true; }); }); nonajax.js
Web Browser – node.js Cycle, cont’d app.get('/nonajax-response', function(req, res) { var html = ''; lineReader.eachLine("nonajax2.html", function(line, last) { html += line + '\n'; if (last) { res.send(html); return false; } else { return true; }); }); nonajax.js
Web Browser – node.js Cycle, cont’d <head> ... <script type = "text/javascript" > // do the bounce animation </script> </head> <body onload = "init()"> <h1>Non-AJAX</h1> <canvas id = "canvas" height = "200" width = "200"> <p>Canvas not supported!</p> </canvas> <form action="nonajax-response" method="get"> <input type="submit" /> </form> <hr /> <div id="output"> <p> Watch this space! </p> </div> </body> nonajax.html
Web Browser – node.js Cycle, cont’d nonajax2.html // bounce animation code, etc .... <body onload = "init()"> <h1>Non-AJAX</h1> <canvas id = "canvas" height = "200" width = "200"> <p>Canvas not supported!</p> </canvas> <form action="nonajax-response" method="get"> <input type="submit" /> </form> <hr /> <div id="output"> <p> Lorem ipsum dolor sit amet, <br> consectetur adipiscing elit, <br> sed do eiusmod tempor incididunt <br> ut labore et dolore magna aliqua. </p> </div> </body>
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.
AJAX, cont’d app.get('/ajax.html', function(req, res) ajax.js { { var html = ''; lineReader.eachLine('ajax.html', function(line, last) { html += line + '\n'; if (last) { res.send(html); return false; } else { return true; }); }); ajax.js
AJAX, cont’d // Process the form data and send a response. app.get('/ajax-response', function(req, res) { var html = ''; lineReader.eachLine('lorem.txt', function(line, last) { html += line + '<br>'; if (last) { res.send(html); return false; } else { return true; }); }); ajax.js
AJAX, cont’d // bounce animation code, etc. ... <body onload = "init()"> <h1>AJAX</h1> <canvas id = "canvas" height = "200" width = "200"> <p>Canvas not supported!</p> </canvas> <form action=""> <button type="button" onclick="doAJAX()"> Click for AJAX! </button> </form> <hr /> <div id="output"> <p>Watch this space!</p> </div> </body> ajax.html
AJAX, cont’d ajax.html Function displayFile() <script type = "text/javascript"> // bounce animation code ... var request; function doAJAX() { request = new XMLHttpRequest(); request.open("GET", "/ajax-response"); 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>"; } } </script> ajax.html Function displayFile() will be called asynchronously.
The XMLHttpRequest Object Use the properties and methods of the XMLHttpRequest object 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
readyState Property Values JavaScript, 9th ed. by Tom Negrino and Dori Smith Peachpit Press, 2015 ISBN 978-0-321-99670-1
jQuery A lightweight but powerful JavaScript library. Greatly simplifies JavaScript programming, especially animation and AJAX. Adds new capabilities to DOM elements. Adds new user interface widgets. Cross-platform: Works with different browsers. Highly extensible. Free and open source.
jQuery Downloads Visit jquery.com to download. The compressed versions will enable your web pages that use jQuery to download faster. Create a symbolic link jquery.js to the version you downloaded.
Using the jQuery Library To use the jQuery library in your web page: You can also download from a Content Delivery Network (CDN) such as Google hosted libraries: <script type="text/javascript” src ="jquery.js"> </script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
jQuery API For the complete jQuery API, see http://api.jquery.com
Simple AJAX with jQuery <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple AJAX with jQuery</title> <script type = "text/javascript" src = "js/jquery.js"> </script> src = "js/jq-ajax.js"> </head> <body> <h1>Simple AJAX with jQuery</h1> <div id = "output"></div> </body> </html> jq-ajax.html jq-ajax.js $(document).ready(init); function init() { $("#output").load("lorem.txt"); } Demo
jQuery Objects Create a jQuery object from a DOM element. Use the $() function. Example: creates a jQuery object from the div with id output: Simpler than: $("#output") <div id="output"></div> document.getElementById("output")
jQuery Objects, cont’d A jQuery object adds new functionality to its DOM element. Example: Perform an AJAX document load and replace the contents of the div with the document contents. Example: Equivalent to: $("#output").load("lorem.txt"); $("#output").html("<h2><em>Hello, world!</em></h2>"); document.getElementById("output") .innerHTML("<h2><em>Hello, world!</em></h2>");
jQuery Initialization Instead of: Call init() after the entire page is displayed. Use the jQuery statement: Call init() after the entire page is loaded but before the page displays. A shortcut: <body onload="init()"> $(document).ready(init); $(init);
Selecting Elements jQuery uses CSS-style selectors. Example: Refer to all h1 headings. Example: Refer to the object with id output. Example: Refer to the objects with class indented. Example: Refer to images that are in list items. $("h1") $("#output") $(".indented") $("li img");
Setting Style Use jQuery’s css() method to set the style of an object or a set of objects. Example: Set the background of all h1 headings to yellow. Example: Set the background of the paragraph with id warning to yellow and its text to red. Two parameters $("h1").css("backgroundColor", "yellow"); One parameter: JavaScript Object Notation (JSON) $("#warning").css( {"backgroundColor":"yellow", "color":"red"} );
Example: Hover Event Note: $this refers to a DOM element. <body> <h1>Hover Demo</h1> <ul> <li>Computer Science</li> <li>Mathematics</li> <li>Physics</li> <li>Chemistry</li> </ul> </body> $(init); function init() { $("li").hover(highlight, plain); } function highlight() $(this).css( {"background": "black", "color": "white"} ); function plain() {"background": "white", "color": "black"} hover.html hover.js Note: $this refers to a DOM element. $(this) refers to the corresponding jQuery object. Demo
jQuery Events Mouse Keyboard Document/window load unload click ready dblclick mousedown resize scroll mouseup mouseover Keyboard mouseout keypress mousemove keydown hover keyup Document/window
jQuery Events, cont’d Form submit reset change focus blur
Changing Classes Dynamically addClass() removeClass() toggleClass() class.css .highlighted { background: lightgray; color: blue; } class.js $(init); function init() { $("li").click(toggleHighlight); } function toggleHighlight() $(this).toggleClass("highlighted"); Demo
jQuery/AJAX Templates jQuery and AJAX make it easy to create a template for a content management system. Dynamically construct the parts of the CMS at run time from data files on the web server. Demo
jQuery/AJAX Templates, cont’d courses.html <body> <div id="all"> <div id="header"></div> <div id="menu"> <h2>Courses</h2> <div id="names"></div> </div> <div class="course"></div> <div id="footer"></div> </body> Only one course div in the template.
jQuery/AJAX Templates, cont’d courses.js $(init); function init() { $("#header").load("parts/header.html"); ... $("#footer").load("parts/footer.html"); }
jQuery/AJAX Templates, cont’d function init() { ... var files = new Array("CS149.html", "CS153.html", "CS174.html", "CS235.html"); var nameItems = "<ul>\n" + courseName(files[0]); var course = $(".course"); course.load("courses/" + files[0]); for (var i = 1; i < files.length; i++) { course = course.clone().insertAfter(course); course.load("courses/" + files[i]); nameItems += courseName(files[i]); } nameItems += "</ul>\n"; $("#names").html(nameItems); courses.js “function chaining”
jQuery/AJAX Templates, cont’d courses.js function courseName(name) { return " <li><a href=''>" + name.split(".")[0] + "</a></li>"; }
Automatic Looping with each() Most jQuery methods automatically loop over each element in a selection. Example: Make every image disappear. Use the each() function to provide your own callback function to apply to each element in a selection. Example: Call function myFunction() on each image. $("img").hide(); $("img").each(myFunction);
Automatic Looping with each(), cont’d <body> <div class="text"> <h1>Automatic Pull Quotes</h1> <h2>Vestibulum semper</h2> <p> Vestibulum semper tincidunt sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pulvinar, justo non fringilla dapibus, sapien tortor cursus erat, at posuere magna nisi tincidunt sapien. Sed nisl. Fusce venenatis, libero porta porta fringilla, sapien odio tincidunt sem, id aliquam tellus sapien sit amet quam. <span class="pq">Vivamus justo mi, aliquam vitae, eleifend et, lobortis quis, eros.</span> Ut felis arcu, mollis ut, interdum molestie, vehicula a, sapien. Sed nisi nunc, bibendum vel, ... </p> ... </div> </body> pullquote.html
Automatic Looping with each(), cont’d .text { font-family: sans-serif; width: 600px; margin-top:2em; margin-left: auto; margin-right: auto; min-height: 600px; } .pullquote { float: right; clear: right; width: 200px; padding: 10px; font-size: 20px; background-color: #DDD; border-radius: 10px; margin: 20px 0 10px 10px; font-style: italic; pullquote.css
Automatic Looping with each(), cont’d $(init); function init() { $('span.pq').each(pullQuotes); } function pullQuotes() var quote = $(this).clone(); quote.removeClass('pq'); quote.addClass('pullquote'); $(this).before(quote); pullquote.js What is the result? Demo
jQuery Object Effects Method Operation show() Make the object visible. hide() Make the object invisible. toggle() Toggle visible/invisible. fadeIn() Fade the object in. fadeOut() Fade the object out. fadeToggle() Toggle fade in/fade out. slideDown() Slide the object into view from top to bottom. slideUp() Slide the object out of view from bottom to top. slideToggle() Toggle slide down/slide up.
jQuery Object Effects, cont’d <body> <h1>Object Effects</h1> <div id="buttons"> <h2 id="show">Show</h2> <h2 id="hide">Hide</h2> <h2 id="toggle">Toggle</h2> <h2 id="slideDown">Slide Down</h2> <h2 id="slideUp">Slide Up</h2> <h2 id="fadeIn">Fade In</h2> <h2 id="fadeOut">Fade Out</h2> <h2 id="wrap">Wrap</h2> <h2 id="unwrap">Unwrap</h2> </div> <p id="content"> <img src="images/Bristol.png" width="400" id="image"/> </p> </body> effects.html
jQuery Object Effects, cont’d #buttons { float: left; } #content { float: right; h2 { width: 10em; border: 3px outset black; background-color: lightgray; text-align: center; font-family: sans-serif; border-radius: 5px; box-shadow: 5px 5px 5px gray; .wrapped { border: 3px solid red; padding: 2px; effects.css
jQuery Object Effects, cont’d $(init); var showing = false; var wrapped = false; function init() { $("#content").hide(); $("#show").click(showContent); $("#hide").click(hideContent); $("#toggle").click(toggleContent); $("#slideDown").click(slideDown); $("#slideUp").click(slideUp); $("#fadeIn").click(fadeIn); $("#fadeOut").click(fadeOut); $("#wrap").click(wrapImage); $("#unwrap").click(unwrapImage); } effects.js
jQuery Object Effects, cont’d effects.js function showContent() { $("#content").show(); showing = true; } function hideContent() $("#content").hide(); showing = false; function toggleContent() $("#content").toggle(); showing = !showing;
jQuery Object Effects, cont’d effects.js function slideDown() { $("#content").slideDown("medium"); showing = true; } function slideUp() $("#content").slideUp(500); showing = false;
jQuery Object Effects, cont’d effects.js function fadeIn() { $("#content").fadeIn(1000, meow); showing = true; } function fadeOut() $("#content").fadeOut("fast"); showing = false; function meow() alert("MEOW!");
jQuery Object Effects, cont’d effects.js function wrapImage() { if (showing) { $("#image").wrap("<div class='wrapped'></div>"); wrapped = true; } function unwrapImage() if (showing && wrapped) { var image = $("#image").clone(); $(".wrapped").remove(); $("#content").append(image); wrapped = false; Demo
jQuery Object Animation Use the css() method to change an object’s position. Use chaining: Or use a JSON object: $("#content").css("left", "10px").css("top", "120px"); $("#content").css( {"left": "10px", "top": "120px"} );
jQuery Object Animation, cont’d The jQuery animate() method changes any DOM characteristics (such as position) over time. Example: Change the left and top attribute values to 500px and 300px, respectively, over a span of 2 seconds. var end = {"left": "500px", "top": "300px"}; ... $("#content").animate(end, 2000);
jQuery Object Animation, cont’d The animation can occur in two modes. swing: The animation starts slowly, speeds up, and then ends slowly (like a child on a swing). This is the default mode. linear: The animation occurs at a constant speed. $("#content").animate(end, 2000, "linear");
jQuery Object Animation, cont’d <form action = ""> <fieldset> <button type = "button" id = "home"> Home </button> <button type = "button" id = "swing"> Swing glide <button type = "button" id = "linear"> Linear glide <button type = "button" id = "left"> <-- <button type = "button" id = "right"> --> </fieldset> </form> <p id="content"> <img src="images/Bristol.png" width="200" id="image"/> </p> animate.html
jQuery Object Animation, cont’d animate.js $(init); var start = {"left": "10px", "top": "120px"}; var end = {"left": "500px", "top": "300px"}; function init() { $("#home").click(home); $("#swing").click(swingGlide); $("#linear").click(linearGlide); $("#left").click(left); $("#right").click(right); } function home() $("#content").css(start);
jQuery Object Animation, cont’d animate.js function swingGlide() { home(); $("#content").animate(end, 2000); } function linearGlide() $("#content").animate(end, 2000, "linear"); function left() $("#content").animate({"left": "-=10px"}, 100); function right() $("#content").animate({"left": "+=10px"}, 100); Demo