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

2. Computer Science Dept. Spring 2015: April 7 CS 174: Web Programming © R. Mak 2 Unofficial Field Trip  Computer History Museum in Mt. View http://www.computerhistory.org/  Saturday, May 9, 11:30 – closing time Special free admission. Do a self-guided tour of the new Revolution exhibit. See a life-size working model of Charles Babbage’s Difference Engine in operation, a hand-cranked mechanical computer designed in the early 1800s. Experience a fully restored IBM 1401 mainframe computer from the early 1960s in operation.  General info: http://en.wikipedia.org/wiki/IBM_1401http://en.wikipedia.org/wiki/IBM_1401  My summer seminar: http://www.cs.sjsu.edu/~mak/1401/http://www.cs.sjsu.edu/~mak/1401/  Restoration: http://ed- thelen.org/1401Project/1401RestorationPage.htmlhttp://ed- thelen.org/1401Project/1401RestorationPage.html

3. Computer Science Dept. Spring 2015: April 7 CS 174: Web Programming © R. Mak 3 Unofficial Field Trip  The new Revolution exhibit is now open! Walk through a timeline of the First 2000 Years of Computing History. Historic computer systems, data processing equipment, and other artifacts. Small theater presentations. Atanasoff-Berry Computer Hollerith Census Machine

4. Computer Science Dept. Spring 2015: April 7 CS 174: Web Programming © R. Mak 4 Unofficial Field Trip  Babbage Difference Engine, fully operational. Hand-cranked mechanical computer. Computed polynomial functions. Designed by Charles Babbage in the early to mid 1800s.  Arguably the world’s first computer scientist, lived 1791-1871. He wasn’t able to build it because he lost his funding.  Live demo at 1:00  His plans survived and this working model was built. Includes a working printer! http://www.computerhistory.org/babbage/

5. Computer Science Dept. Spring 2015: April 7 CS 174: Web Programming © R. Mak 5 Unofficial Field Trip  IBM 1401 computer, fully restored and operational A small transistor-based mainframe computer. Extremely popular with small businesses in the late 1950s through the mid 1960s  Maximum of 16K bytes of memory.  800 card/minute card reader (wire brushes).  600 line/minute line printer (impact).  6 magnetic tape drives, no disk drives.

6. Computer Science Dept. Spring 2015: April 7 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. 6

7. Computer Science Dept. Spring 2015: April 7 CS 174: Web Programming © R. Mak jQuery Downloads  Visit jquery.comjquery.com  Download either jQuery 1.11.2 jQuery 2.1.3  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. 7

8. Computer Science Dept. Spring 2015: April 7 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: 8 <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">

9. Computer Science Dept. Spring 2015: April 7 CS 174: Web Programming © R. Mak jQuery API  For the complete jQuery API, see http://api.jquery.comhttp://api.jquery.com 9

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

11. Computer Science Dept. Spring 2015: April 7 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: 11 $("#output") document.getElementById("output")

12. Computer Science Dept. Spring 2015: April 7 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: 12 $("#output").load("lorem.txt"); $("#output").html(" Hello, world! "); document.getElementById("output").innerHTML(" Hello, world! ");

13. Computer Science Dept. Spring 2015: April 7 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: 13 $(document).ready(init); $(init);

14. Computer Science Dept. Spring 2015: April 7 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. 14 $("h1") $("#output") $(".indented") $("li img");

15. Computer Science Dept. Spring 2015: April 7 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. 15 $("h1").css("backgroundColor", "yellow"); $("h1").css( {"backgroundColor":"yellow", "color":"red"} ); One parameter: JavaScript Object Notation (JSON) Two parameters

16. Computer Science Dept. Spring 2015: April 7 CS 174: Web Programming © R. Mak Example: Hover Event 16 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

17. Computer Science Dept. Spring 2015: April 7 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 17

18. Computer Science Dept. Spring 2015: April 7 CS 174: Web Programming © R. Mak jQuery Events, cont’d  Form submit reset change focus blur 18

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

20. Computer Science Dept. Spring 2015: April 7 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. 20 Demo

21. Computer Science Dept. Spring 2015: April 7 CS 174: Web Programming © R. Mak jQuery/AJAX Templates, cont’d 21 Courses Only one course div in the template. courses.html

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

23. Computer Science Dept. Spring 2015: April 7 CS 174: Web Programming © R. Mak jQuery/AJAX Templates, cont’d 23 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

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

25. Computer Science Dept. Spring 2015: April 7 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. 25 $("img").hide(); $("img").each(myFunction);

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

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

28. Computer Science Dept. Spring 2015: April 7 CS 174: Web Programming © R. Mak Automatic Looping with each(), cont’d  What is the result? 28 $(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

29. Computer Science Dept. Spring 2015: April 7 CS 174: Web Programming © R. Mak jQuery Object Effects 29 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.

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

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

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

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

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

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

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

37. Computer Science Dept. Spring 2015: April 7 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: 37 $("#content").css("left", "10px").css("top", "120px"); $("#content").css( {"left": "10px", "top": "120px"} );

38. Computer Science Dept. Spring 2015: April 7 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. 38 var end = {"left": "500px", "top": "300px"};... $("#content").animate(end, 2000);

39. Computer Science Dept. Spring 2015: April 7 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. 39 $("#content").animate(end, 2000, "linear");

40. Computer Science Dept. Spring 2015: April 7 CS 174: Web Programming © R. Mak jQuery Object Animation, cont’d 40 Home Swing glide Linear glide <-- --> animate.html

41. Computer Science Dept. Spring 2015: April 7 CS 174: Web Programming © R. Mak jQuery Object Animation, cont’d 41 $(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

42. Computer Science Dept. Spring 2015: April 7 CS 174: Web Programming © R. Mak jQuery Object Animation, cont’d 42 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