October 7th, 2010

SDU Webship

What did we learn last week?jQuery makes it really easy to select

elements and do stuff with them.jQuery can process data, create visual

effects, and add other interactive elements to your websites

All of this could be done with plain Javascript, but it would take about 20x longer.

https://developer.mozilla.org/en/JavaScript/Guide

How to remember thingsHTTP (HyperText Transfer Protocol) is a

stateless protocol.This means that it has no memory of any

past queries.What can we do if we want our webpage to

remember users?Cookies!

What is a cookie?A cookie is a string of text with a name

which is sent and called by a webpage.Cookies are “set” (stored in the memory of

your browser) using the HTTP protocol.Cookies are retrieved by a browser requestMay have expiration date; if not, will be

stored until cookies are cleared. Cookies cannot be executed, but can be

used as spyware.

Graphically:

What are cookies used for?Session managementPersonalizationTracking

Setting and retrieving cookies$.cookie("example", "foo");$.cookie("example", "foo", { expires: 7 });alert($.cookie("example") );$.cookie("example", null);

AjaxAsynchronous Javascript and XMLUsed to send and retrieve data without

reloading the page.XMLHttpRequest object (to exchange data

asynchronously with a server)JavaScript/DOM (to display/interact with the

information)CSS (to style the data)XML (often used as the format for

transferring data)

Why use it?Improves interaction – pages don’t need to

reload every time data changes.Added functionality – chat, suggestions,

etc.

Demo time!http://www.ajaxdaddy.com/

Whatsitlooklike?http://jquery.com/demo/ajax/

Ajax and interactionNon-jQuery implementation:

http://www.albertwavering.com/ajaxsample.html

jQueryhttp://jquery.com/demo/ajax/

Next week:Applied AJAX (send/receive)HTML, CSS, and Javascript reviewAfter we review the basics, we will move

onto more advanced topics.

HomeworkReview slides from previous weeksEmail us or come to office hours if you have

questions – we want to be sure that you understand everything before we move on!