Web design
1 / 39

Web Design: - PowerPoint PPT Presentation

  • Uploaded on

Web Design:. Fall 2010 Mondays 7-9pm 200 Sutardja -Dai Hall. Basic to Advanced Techniques. jQuery and AJAX. Lecture Code: 788458. Today’s Agenda. Review JavaScript from last lecture Forms: Post, Get jQuery APIs Ajax: jQuery Ajax API Effects: jQuery Effects API

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Web Design:' - joylyn

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Web design

Web Design:

Fall 2010

Mondays 7-9pm

200 Sutardja-Dai Hall

Basic to Advanced Techniques

jQuery and AJAX

Lecture Code: 788458

Today s agenda
Today’s Agenda

  • Review JavaScript from last lecture

  • Forms: Post, Get

  • jQuery APIs

    • Ajax: jQuery Ajax API

    • Effects: jQuery Effects API

    • Events: jQuery Events API

    • Manipulation: jQuery Maniplation API

    • Traversing: jQuery Traversing API

  • Ajax


  • MP #2 Part 2 deadline extended Friday (10/29)

    • YouTube video tutorial up

  • MP #3 tWDDer due Monday (11/1)

    • Finish today’s lab and turn in for MP #3

  • Office hours Wednesday night? 7PM?

    • CSS Positioning

    • MP #2 & MP #3 help

  • Final Project Reminder

Feedback 1
Feedback #1

  • Lecture

    • Summarize key points form prev. lecture

    • More social interaction (group work)

    • More live examples

  • Mini Projects

    • More screencasted assignments

  • Help Outside of Class

    • Office Hours

    • Workshops

  • Additional Resources

    • List of Resources

    • Photoshop Tutorial

    • Supplemental Worksheets

    • Syntax Cheatsheets

Feedback 1 cont
Feedback #1 Cont.

  • Lecturers

    • Alex

      • Will provide more examples

      • Shouldn’t miss any more class (missed a few lectures due to business trips)

    • Amber

      • Will talk slower

    • Jon

      • Will be more enthusiastic and engaging

  • Opportunities

    • ? Last semester had a few recruiters probably because of summer

    • Ask Alex, Amber, and Jon if you want to get more info on freelance work or working on a project

Changing after load
Changing After Load

  • WDD fishes and clouds move

  • Google changes results on the fly

Javascript or php
JavaScript or PHP?

  • JavaScript allows us to do one of the two criteria for dynamic pages. Which one?

  • “Change After Load” or “Different Depending on Request”?

A: Change After Load

What is javascript
What is JavaScript?

Client Side

Server Side

Web Server

Serve Website

Send HTML and CSS files

Send images

  • Web Browser

  • HTTP Request (visit website)

  • Interpret and render received files

  • Send JavaScript code

  • Execute JavaScript

  • PHP and MySQL

Runs in your browser

– on the client side

Q: Why can’t JavaScript serve a different page depending on request?

A: Executed on the client side after page load

What does javascript do
What does JavaScript do?

  • “Plays with the blocks”

    • Modifies HTML and CSS

    • “Moves blocks around”

      • Change position of HTML objects via CSS

    • “Buys new and throws away old blocks”

      • Can create and delete HTML objects and CSS rules

    • “Stacks blocks”

      • Can change nested structure of HTML code

  • Essentially change HTML and CSS in anyway it wants

    • Anything you could have created or styled ahead of time in HTML and CSS, JavaScript can create or style after the page has loaded

How do we spot javascript
How do we spot JavaScript?

  • If a HTML and CSS page is anything but static, there’s JavaScript there.

    • Only exception is :hover, :active, :visited pseudo classes for links

How does javascript do it
How does JavaScript do it?

  • Browser represents web page as a DOM tree

    • DOM = Document Object Model



















Dom tree
DOM Tree

  • Each HTML element is a node on the tree (an object)

    • Its container (whatever it is nested in) is its parent

    • What is nested within it is its children

    • Each object has attributes (HTML and CSS)

      • <img src=“http://awi.com/i.gif” />

      • img { border: 1px solid black; }






1px solid black;

Basic coding flow in jquery
Basic Coding Flow in jQuery

  • Select element that you want to modify using $() syntax

    • $(‘CSS Select String’)

  • Chain function calls after select tag

    • $(‘p’).css(‘color’, ‘red’).click(function(){$(this).remove(); });

Selecting html elements
Selecting HTML Elements

  • jQuery allows us to use CSS selectors in conjunction with $ to select objects in HTML

    • $(‘#myElement’) gives us the element with id=“myElement”

    • $(‘img’) gives us an array of all images on page

  • Selecting elements with $ also gives the element some additional JavaScript functionality which include…

Changing element attributes
Changing Element Attributes

  • Method: .attr

  • Get attributes with:

    • $(‘#myImg’).attr(‘src’);

  • Set attributes with:

    • $(‘#myImg’).attr(‘src’, ‘someImage.jpg’);

    • $(‘#myImg’).attr({ src : ‘someImage.jpg’, alt : ‘some image’ });

Changing css properties
Changing CSS Properties

  • Method: .css

  • Get properties with:

    • $(‘h1’).css(‘color’);

  • Set properties with:

    • $(‘h1’).css(‘color’, ‘red’);

    • $(‘h1’).css({ color: ‘red’, ‘font-weight’ : ‘normal’ });

Adding css class
Adding CSS Class

  • Method: .addClass

    • $(‘#myDiv’).addClass(‘header’);

  • Method: .removeClass

    • $(‘#myDiv’).removeClass(‘header’);

Event handling
Event handling

  • Mouse click

    • $(“#blah").click(function() { alert("Hello world!"); });

  • Hover

    • $('#blah').mouseover(function() { alert(“Hello world!”); });

  • Keyup/down/press, onfocus/blur, etc.

    • For more, check out the Jquery API: http://api.jquery.com/category/events/

Javascript functions
JavaScript Functions

  • Doesn’t do anything until called

    • Controlled execution

    • Repetitive (code reusability)

  • function doSomething(var1, var2, …){



Math functions remember from algebra
Math Functions (Remember from algebra?)

  • f(x) = x2 + x + 3

  • f(1) = 12 + 1 + 3 = 5

  • f(x, y) = x3 + y2 + 1

  • f(2, 1) = 23 + 12 + 1 = 10

  • Basic idea: Functions are machines that take can take an input, do some stuff, then spit a result out. These functions can also have variable number of inputs/arguments.

Javascript functions cont d
JavaScript Functions (cont’d)

  • Anonymous functions

    • Assign it to a variable to call later

      • var eatCakeAnon = function(){

        alert("So delicious and moist");



    • Pass it directly as a function argument (callback)

      • $('#target').click(function() {

        alert(‘Something happened!');


Stringing along jquery commands
Stringing along jQuery commands

  • With jQuery you can string along any other jQuery commands, as long as you’ve selected the element first.

  • $(“div”).attr(title, “newTitle”)

  • $(“div”).css(background-color, “newColor”);

  • $(“div”).attr(title, “newTitle”).css(background-color, “newColor”);

Append vs appendto
.append() vs .appendTo()

  • $('<p>Test</p>').appendTo('.inner');

    • This first creates an HTML element with inner text and appends to all elements in the existimg HTML DOM with class “inner”

  • $('.inner').append('<p>Test</p>');

    • This looks for all element with class “inner” first, then appends “<p>Test</p>” to each one

Jquery traversal


jQuery Traversal

  • .add(selector)

  • .children(selector)

  • .first()

  • .last()

  • .parent()

  • .find(selector)

  • .closest()

Jquery manipulation


jQuery Manipulation

  • .addClass()—covered this

  • .removeClass()—covered this

  • .append(), .prepend() —covered this

  • .appendTo(), .prependTo() —covered this

  • .after(), .before()

  • .remove()

  • .val()

Jquery effects


jQuery Effects

  • .slideDown()

  • .slideUp()

  • .slideToggle()

  • .hide()

  • .show()

  • .animate()

Html forms
HTML Forms

<form name="input" action="html_form_action.php" method="get"> </form>

  • action: the URL you will be directing the submitting arguments to

  • name: specifies the name of the form. It’s not strictly necessary, but can be referenced in a script (ie. document.forms[“input"]).

  • Method: either ‘get’ or ‘post’. More about this next.

  • Main point: this allows us to pass values to a server (like updating facebook statuses).

Web design

  • A GET request will generate a parameters driven URL

  • Parameters are passed in the following form:

  • <URL>?key1=value1&key2=value2&key3=…

  • ? – lets the browser know anything thereafter are parameters to be passed to the server

  • Each parameter is formulated by a ‘key=value’ pair. Each ‘key=value’ pair is delaminated (separated) by a ‘&’ character

Get example
GET Example

  • Our Domain: http://twdder.decal.aw-industries.com/

  • The URL we want to send parameters to: http://twdder.decal.aw-industries.com/messages/retrieve

  • Attach parameters like so:

    • ?key=tWDDer>twitter&created_after=2000-1-1 00:00:00

    • key, created_after – these are the ‘keys’ names of parameters we wish to send.

    • tWDDer>twitter, 2000-1-1 00:00:00 – these are the ‘values’ of their respective ‘keys’

Web design

  • Can’t really be visualized, but we can see the results by looking at the web traffic through FireBug.

  • <form action="form_action.asp“ method=“post”>

    • First name: <input type="text" name="FirstName" />

    • Last name: <input type="text" name="LastName" />

    • <input type="submit" value="Submit" />

  • </form>

Post vs get


Good: More secure, hides the data away from plain sight

Good: Handles long requests well, since it’s not limited by URL length

Bad: the server cannot cache these values

If you are doing password inputs, use this! Sensitive data should use this.


Good: Server Caches the parameters, so if you submit with the same parameters more than once, it might not have to do the computation over again.

Good: remains in browser history

Can be bookmarked, therefore also available for distribution among friends (ie sending google search results)

Bad: Values available in plain sight


  • There’s a huge discussion around when and how to use it.

Resource: The Definitive Guide to GET vs POST

What is ajax
What is AJAX?

…We’re not talking about your household cleanser!

What is ajax1

Demo: maps.google.com

What is AJAX?

  • Asynchronous JavaScript And XML

    • Asynchronous—fetches/sends data to the server without a page refresh

    • JavaScript—you know this already

    • XML—Extensible Markup Language (Like HTML!). It’s human readable, but don’t worry about it too much.

  • It’s part of Javascript, so it’s Client-side technology

    • So what can it do for us?


<title>AJAX for dummies</title>

<publisher>Berkeley Books</publisher>

<author>Some guys you've never heard of</author>



What s going on just the ajax view



What’s going on? (just the Ajax view)

  • Synchronous Actions (Initial load)

    • You visit http://maps.google.com

    • Google’s Web Server receives request and serves you the web page.

  • Asynchronous Actions

    • Event triggered by zooming (actually .click()). Each magnification “redraws” the map.

    • Client-side makes Ajax call to retrieve the new map images at the set zoom level.



How do we do ajax with jquery

Demo: tWDDer Lab

How do we do Ajax with jQuery?


url: <URL>,

data: { key1:value1, key2:value2, key3=… },

dataType: 'jsonp',

success: function(data, textStatus, XMLHttpRequest){

//This is your callback, where you do stuff after a success


error: function (XMLHttpRequest, textStatus, errorThrown){

//fallback in case the request failed.



Resource: jQuery .ajax()


  • Piece of executable code that is passed as an argument to other code

  • Allows us control timing of function calls

  • Allows us to execute X only if Y was sucessful.

  • Just like the jQuery .click()

$("p").click(function () {



The future of ajax
The Future of Ajax

  • Ajax is everywhere on the web today (google, facebook, twitter).

    • Limitations

      • It is a Pull Technology: we have to keep blindly asking the server for data, even if it’s not available yet. Not good if we want a live feed application with twitter updates.

      • It might be better for the server to send us data when it’s available. There is much less wasteful traffic and overhead.

  • The next cool thing: HTML 5 WebSockets.

    • Allows Push Technology: when the data is read, the server contacts us.

    • For the web enthusiasts…this works by keeping a persistent connection

    • Q: Is this Client-side?

A: Yes, AND also Server-side!

References additional resources
References & Additional Resources

  • jQuery APIs

    • Ajax: jQuery Ajax API

    • Effects: jQuery Effects API

    • Events: jQuery Events API

    • Manipulation: jQuery Maniplation API

    • Traversing: jQuery Traversing API

  • Websockets

    • HTML 5 Web Sockets vs. Comet and Ajax

    • HTML5 Web Sockets: A Quantum Leap in Scalability for the Web

Javascript date just a reference
JavaScript Date() – Just a reference…

  • It is part of plain JavaScript, not jQuery!

  • To create it, you will need to do

    • var myDate = new Date();

    • Some functions it has

      • myDate .getTime() - Milliseconds since 1/1/1970 @ 12:00 AM

      • myDate . getSeconds() - Number of seconds (0-59)

      • myDate. getMinutes() - Number of minutes (0-59)

      • myDate . getHours() - Number of hours (0-23)

      • myDate . getDay() - Day of the week(0-6). 0 = Sunday, ... ,

      • myDate . getDate() - Day of the month (0-31)

      • myDate . getMonth() - Number of month (0-11)

      • myDate . getFullYear() - The four digit year (1970-9999)

Resources: Javascript Tutorial – Date, JavaScript Date Object