1. CS 174: Web Programming October 26 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak

2. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak Web Browser – Web Server Cycle  Each time you submit form data from the web browser to the web server, you must wait : 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. 2

3. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak Web Browser – Web Server Cycle, cont’d  Example: Click the submit button. PHP 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. 3

4. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak Web Browser – Web Server Cycle, cont’d 4 <?php $hidden = filter_input(INPUT_GET, "hidden"); if ($hidden != NULL) { $fp = fopen("lorem.txt", "r") or die("File error."); while (!feof($fp)) { $line = fgets($fp); $line = str_replace("\n", " ", $line); print " $line\n"; } } else { print " Watch this space!\n"; } ?> nonajax.php

5. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak 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. 5

6. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak AJAX, cont’d 6 AJAX <canvas id = "canvas" height = "200" width = "200"> Canvas not supported! <button type="button" onclick="doAJAX()"> Click for AJAX! Watch this space! ajax.html

7. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak AJAX, cont’d 7 var request; function doAJAX() { request = new XMLHttpRequest(); request.open("GET", "lorem.txt"); 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, " "); document.getElementById("output").innerHTML = " " + text + " "; } } } ajax.html

8. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak The XMLHttpRequest Object  Use the properties and methods of the XMLHttpRequest object to control a request from the web browser to the web server. 8 JavaScript, 9 th ed. by Tom Negrino and Dori Smith Peachpit Press, 2015 ISBN 978-0-321-99670-1 See also: http://www.w3schools.com/xml/dom_http.asphttp://www.w3schools.com/xml/dom_http.asp

9. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak readyState Property Values 9 JavaScript, 9 th ed. by Tom Negrino and Dori Smith Peachpit Press, 2015 ISBN 978-0-321-99670-1

10. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak 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. 10

11. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery Downloads  Visit jquery.comjquery.com  Download either jQuery 1.11.3 jQuery 2.1.4  Same as jQuery 1.x but without support for Microsoft Internet Explorer  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. 11

12. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak 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: 12 <script type="text/javascript” src ="jquery.js"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">

13. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery API  For the complete jQuery API, see http://api.jquery.comhttp://api.jquery.com 13

14. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak Simple AJAX with jQuery 14 Simple AJAX with jQuery $(document).ready(init); function init() { $("#output").load("lorem.txt"); } ajax.html ajax.js Demo

15. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak 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: 15 $("#output") document.getElementById("output")

16. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak 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: 16 $("#output").load("lorem.txt"); $("#output").html(" Hello, world! "); document.getElementById("output").innerHTML(" Hello, world! ");

17. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak 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: 17 $(document).ready(init); $(init);

18. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak 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. 18 $("h1") $("#output") $(".indented") $("li img");

19. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak 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. 19 $("h1").css("backgroundColor", "yellow"); $("#warning").css( {"backgroundColor":"yellow", "color":"red"} ); One parameter: JavaScript Object Notation (JSON) Two parameters

20. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak Example: Hover Event 20 Hover Demo Computer Science Mathematics Physics Chemistry $(init); function init() { $("li").hover(highlight, plain); } function highlight() { $(this).css( {"background": "black", "color": "white"} ); } function plain() { $(this).css( {"background": "white", "color": "black"} ); } hover.htmlhover.js Note: $this refers to a DOM element. $(this) refers to the corresponding jQuery object. Demo

21. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery Events  Mouse click dblclick mousedown mouseup mouseover mouseout mousemove hover  Document/window load unload ready resize scroll  Keyboard keypress keydown keyup 21

22. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery Events, cont’d  Form submit reset change focus blur 22

23. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak Changing Classes Dynamically  addClass()  removeClass()  toggleClass() 23.highlighted { background: red; color: yellow; } $(init); function init() { $("li").click(toggleHighlight); } function toggleHighlight() { $(this).toggleClass("highlighted"); } class.js class.css Demo

24. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak 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. 24 Demo

25. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery/AJAX Templates, cont’d 25 Courses Only one course div in the template. courses.html

26. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery/AJAX Templates, cont’d 26 $(init); function init() { $("#header").load("parts/header.html");... $("#footer").load("parts/footer.html"); } courses.js

27. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery/AJAX Templates, cont’d 27 function init() {... var files = new Array("CS149.html", "CS153.html", "CS174.html", "CS235.html"); var nameItems = " \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 += " \n"; $("#names").html(nameItems);... } “function chaining” courses.js

28. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery/AJAX Templates, cont’d 28 function courseName(name) { return " " + name.split(".")[0] + " "; } courses.js

29. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak 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. 29 $("img").hide(); $("img").each(myFunction);

30. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak Automatic Looping with each(), cont’d 30 Automatic Pull Quotes Vestibulum semper 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. Vivamus justo mi, aliquam vitae, eleifend et, lobortis quis, eros. Ut felis arcu, mollis ut, interdum molestie, vehicula a, sapien. Sed nisi nunc, bibendum vel,...... pullquote.html

31. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak Automatic Looping with each(), cont’d 31.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

32. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak Automatic Looping with each(), cont’d  What is the result? 32 $(init); function init() { $('span.pq').each(pullQuotes); } function pullQuotes() { var quote = $(this).clone(); quote.removeClass('pq'); quote.addClass('pullquote'); $(this).before(quote); } Demo pullquote.js

33. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery Object Effects 33 MethodOperation 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.

34. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery Object Effects, cont’d 34 Object Effects Show Hide Toggle Slide Down Slide Up Fade In Fade Out Wrap Unwrap effects.html

35. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery Object Effects, cont’d 35 #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

36. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery Object Effects, cont’d 36 $(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

37. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery Object Effects, cont’d 37 function showContent() { $("#content").show(); showing = true; } function hideContent() { $("#content").hide(); showing = false; } function toggleContent() { $("#content").toggle(); showing = !showing; } effects.js

38. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery Object Effects, cont’d 38 function slideDown() { $("#content").slideDown("medium"); showing = true; } function slideUp() { $("#content").slideUp(500); showing = false; } effects.js

39. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery Object Effects, cont’d 39 function fadeIn() { $("#content").fadeIn(1000, meow); showing = true; } function fadeOut() { $("#content").fadeOut("fast"); showing = false; } function meow() { alert("MEOW!"); } effects.js

40. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery Object Effects, cont’d 40 function wrapImage() { if (showing) { $("#image").wrap(" "); wrapped = true; } function unwrapImage() { if (showing && wrapped) { var image = $("#image").clone(); $(".wrapped").remove(); $("#content").append(image); wrapped = false; } effects.js Demo

41. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery Object Animation  Use the css() method to change an object’s position. Use chaining: Or use a JSON object: 41 $("#content").css("left", "10px").css("top", "120px"); $("#content").css( {"left": "10px", "top": "120px"} );

42. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak 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. 42 var end = {"left": "500px", "top": "300px"};... $("#content").animate(end, 2000);

43. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak 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. 43 $("#content").animate(end, 2000, "linear");

44. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery Object Animation, cont’d 44 Home Swing glide Linear glide <-- --> animate.html

45. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery Object Animation, cont’d 45 $(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); } animate.js

46. Computer Science Dept. Fall 2015: October 26 CS 174: Web Programming © R. Mak jQuery Object Animation, cont’d 46 function swingGlide() { home(); $("#content").animate(end, 2000); } function linearGlide() { home(); $("#content").animate(end, 2000, "linear"); } function left() { $("#content").animate({"left": "-=10px"}, 100); } function right() { $("#content").animate({"left": "+=10px"}, 100); } animate.js Demo