Web design
Sponsored Links
This presentation is the property of its rightful owner.
1 / 39

Web Design: PowerPoint PPT Presentation


  • 130 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

Web Design:

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:

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

    • Events: jQuery Events API

    • Manipulation: jQuery Maniplation API

    • Traversing: jQuery Traversing API

  • Ajax


Announcements

  • 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

  • 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.

  • 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

  • WDD fishes and clouds move

  • Google changes results on the fly


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?

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?

  • “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?

  • 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?

  • Browser represents web page as a DOM tree

    • DOM = Document Object Model

html

<html>

<head>

<title></title>

</head>

<body>

<div>

<h1></h1>

<p></p>

</div>

</body>

</html>

head

body

title

div

h1

p


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

src

http://awi.com/i.gif

img

style

border

1px solid black;


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

  • 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

  • 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

  • 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

  • Method: .addClass

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

  • Method: .removeClass

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


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

  • Doesn’t do anything until called

    • Controlled execution

    • Repetitive (code reusability)

  • function doSomething(var1, var2, …){

    //body

    }


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)

  • Anonymous functions

    • Assign it to a variable to call later

      • var eatCakeAnon = function(){

        alert("So delicious and moist");

        };

        eatCakeAnon();

    • Pass it directly as a function argument (callback)

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

        alert(‘Something happened!');

        });


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

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


Demo

jQuery Traversal

  • .add(selector)

  • .children(selector)

  • .first()

  • .last()

  • .parent()

  • .find(selector)

  • .closest()


Demo

jQuery Manipulation

  • .addClass()—covered this

  • .removeClass()—covered this

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

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

  • .after(), .before()

  • .remove()

  • .val()


Demo

jQuery Effects

  • .slideDown()

  • .slideUp()

  • .slideToggle()

  • .hide()

  • .show()

  • .animate()


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


GET

  • 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

  • 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’


POST

  • 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

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.

GET

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

POST vs. GET

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

Resource: The Definitive Guide to GET vs POST


What is AJAX?

…We’re not talking about your household cleanser!


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?

<book>

<title>AJAX for dummies</title>

<publisher>Berkeley Books</publisher>

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

</book>

Example


1.a

1.b

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.

2.a.

2.b.


Demo: tWDDer Lab

How do we do Ajax with jQuery?

$.ajax({

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


Callbacks

  • 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 () {

$(this).slideUp();

});


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

  • 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…

  • 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


  • Login