cs 174: web programming april 7 class meeting department of computer science san jose state...

CS 174: Web ProgrammingApril 7 Class Meeting

Department of Computer ScienceSan Jose State University

Spring 2015Instructor: Ron Mak

www.cs.sjsu.edu/~mak

http://www.cs.sjsu.edu/~mak

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_1401 My summer seminar: http://www.cs.sjsu.edu/~mak/1401/ Restoration:

http://ed-thelen.org/1401Project/1401RestorationPage.html

http://www.computerhistory.org/

http://en.wikipedia.org/wiki/IBM_1401

http://www.cs.sjsu.edu/~mak/1401/

http://ed-thelen.org/1401Project/1401RestorationPage.html



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

HollerithCensus

Machine



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/

http://www.computerhistory.org/babbage/



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

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.



7

jQuery Downloads

Visit jquery.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.



8

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/1.11.2/jquery.min.js"></script>



9

jQuery API

For the complete jQuery API, see http://api.jquery.com

http://api.jquery.com/





10

Simple AJAX with jQuery

<body> <h1>Simple AJAX with jQuery</h1> <div id="output"></div></body>

$(document).ready(init);

function init(){ $("#output").load("lorem.txt");}

ajax.html

ajax.js

Demo



11

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:

<div id="output"></div>

$("#output")

document.getElementById("output")



12

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>");



13

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);



14

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");



15

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.

$("h1").css("backgroundColor", "yellow");

$("h1").css( {"backgroundColor":"yellow", "color":"red"} );

One parameter:JavaScript Object Notation (JSON)

Two parameters



16

Example: Hover Event<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(){ $(this).css( {"background": "white", "color": "black"} );}

hover.html hover.js

Note: $this refers toa DOM element.$(this) refers tothe correspondingjQuery object.

Demo



17

jQuery Events

Mouse click dblclick mousedown mouseup mouseover mouseout mousemove hover

Document/window

load unload ready resize scroll

Keyboard keypress keydown keyup



18

jQuery Events, cont’d

Form submit reset change focus blur



19

Changing Classes Dynamically

addClass() removeClass() toggleClass()

.highlighted { background: red; color: yellow;}

$(init);

function init(){ $("li").click(toggleHighlight);}

function toggleHighlight(){ $(this).toggleClass("highlighted");}

class.js

class.css

Demo



20

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



21

jQuery/AJAX Templates, cont’d

<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> </div></body>

Only one course div in the template.

courses.html



22


$(init);

function init(){ $("#header").load("parts/header.html"); ...

$("#footer").load("parts/footer.html");}

courses.js



23

jQuery/AJAX Templates, cont’dfunction 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); ...}

“function chaining”

courses.js



24


function courseName(name){ return " <li><a href=''>" + name.split(".")[0] + "</a></li>";}

courses.js



25

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);



26

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



27

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



28

Automatic Looping with each(), cont’d

What is the result?

$(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

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.



30

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



31

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



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


function showContent(){ $("#content").show(); showing = true;}

function hideContent(){ $("#content").hide(); showing = false;}

function toggleContent(){ $("#content").toggle(); showing = !showing;}

effects.js



34


function slideDown(){ $("#content").slideDown("medium"); showing = true;}

function slideUp(){ $("#content").slideUp(500); showing = false;}

effects.js



35


function fadeIn(){ $("#content").fadeIn(1000, meow); showing = true;}

function fadeOut(){ $("#content").fadeOut("fast"); showing = false;}

function meow(){ alert("MEOW!");}

effects.js



36


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; }}

effects.js

Demo



37

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"} );



38

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);



39


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");



40

jQuery Object Animation, cont’d<form action = ""> <fieldset> <button type = "button" id = "home"> Home </button> <button type = "button" id = "swing"> Swing glide </button> <button type = "button" id = "linear"> Linear glide </button> <button type = "button" id = "left"> <-- </button> <button type = "button" id = "right"> --> </button> </fieldset></form>

<p id="content"> <img src="images/Bristol.png" width="200" id="image"/></p>

animate.html



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


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

cs 174: web programming april 7 class meeting department of computer science san jose state...

Documents