SetupSetup

►Go to Go to http://www.permanentstudent.comhttp://www.permanentstudent.com

►Click on link to Ajax hands-onClick on link to Ajax hands-on►Download the files to a folder on your Download the files to a folder on your

laptoplaptop► If you don’t have Venkman and If you don’t have Venkman and

Firebug set up please follow Firebug set up please follow instructions at link instructions at link installsinstalls

Ajax Fundamentals – Ajax Fundamentals – Hands OnHands On

Catherine DavesCatherine Daves

AgendaAgenda

► Ajax ExampleAjax Example► Background ConceptsBackground Concepts► Hands-onHands-on

xmlHTTPxmlHTTP dynamic buttonsdynamic buttons JavaScriptJavaScript

► Syntax, Callbacks, Context, ClosuresSyntax, Callbacks, Context, Closures Event handlersEvent handlers StylesStyles

► Avoiding Some Common MistakesAvoiding Some Common Mistakes

Getting information to a web Getting information to a web browser – a non-comprehensive browser – a non-comprehensive

listlist► HttpHttp

http://www.google.com/firefox?client=firefox-a&rlhttp://www.google.com/firefox?client=firefox-a&rls=org.mozilla:en-US:officials=org.mozilla:en-US:official

► XMLHttpRequestXMLHttpRequest var xmlhttp=new XMLHttpRequest()var xmlhttp=new XMLHttpRequest() Must be from same serverMust be from same server

► <Script><Script> Can be dangerousCan be dangerous

► iFrameiFrame► <img><img>

Key IngredientsKey Ingredients

►DOMDOM►CSSCSS► JavaScriptJavaScript

HTML DOMHTML DOM

►Document Object ModelDocument Object Model Representation of elements on pageRepresentation of elements on page

►divdiv►div.firstChilddiv.firstChild

Allows interaction with elements on pageAllows interaction with elements on page ExamplesExamples

►document.getElementById()document.getElementById()►document.createElement (“div”);document.createElement (“div”);►element.style.backgroundColor = “red”;element.style.backgroundColor = “red”;

CSSCSS

►Cascading Style SheetsCascading Style Sheets css stylecss style

►background-colorbackground-color

JavaScript styleJavaScript style►backgroundColorbackgroundColor

FloatFloat►float: left;float: left;►cssFloat = “left”;cssFloat = “left”;

JavaScriptJavaScript

► JavaScriptJavaScript Allows manipulation of Allows manipulation of

►DOMDOM►CSSCSS►Event handlingEvent handling

DOM + CSS + JavaScriptDOM + CSS + JavaScript

►The goodThe good Allows lots of control of the appearance Allows lots of control of the appearance

and interaction of a web pageand interaction of a web page

►The badThe bad Three different systems interacting can Three different systems interacting can

make them hard to understand and debugmake them hard to understand and debug

►The uglyThe ugly Not the same in every browserNot the same in every browser

What does this have to do with What does this have to do with Ajax?Ajax?

►Client-side JavaScript, along with Client-side JavaScript, along with manipulation of the DOM and CSS, are manipulation of the DOM and CSS, are the core of an Ajax appthe core of an Ajax app

Hands-OnHands-On

SetupSetup

►Venkman DebuggerVenkman Debugger Background colorBackground color Error triggerError trigger Throw triggerThrow trigger

►FirebugFirebug

Exercises 1 & 2Exercises 1 & 2

►Exercise 1Exercise 1 Load 3 types of data with innerHTMLLoad 3 types of data with innerHTML

►Exercise 2Exercise 2 Load 3 types of data with JavaScriptLoad 3 types of data with JavaScript

Exercises 1 & 2 – key pointsExercises 1 & 2 – key points

► innerHTML is fast way to get contents innerHTML is fast way to get contents into a pageinto a page contents must be valid HTMLcontents must be valid HTML overwrites existing contentsoverwrites existing contents

► JavaScript can be used to select which JavaScript can be used to select which parts of reply go into pageparts of reply go into page new HTML elements are created and new HTML elements are created and

inserted into pageinserted into page

Exercises 3 & 4Exercises 3 & 4

►Exercise 3Exercise 3 JavaScript object creationJavaScript object creation

►Exercise 4Exercise 4 Creating buttons on the flyCreating buttons on the fly

CallbacksCallbacksContextContext

andandClosuresClosures

CallbacksCallbacks

►A callback isA callback is Comp Sci Version Comp Sci Version

►a a callbackcallback is is executable codeexecutable code that is passed as that is passed as an an argumentargument to other code (Wikipedia) to other code (Wikipedia)

What this meansWhat this means►I know what I want to happen when the user I know what I want to happen when the user

presses a button. And I don’t want it to happen presses a button. And I don’t want it to happen until the button is pressed. So I give the button until the button is pressed. So I give the button handler a callback.handler a callback.

Why it matters for AjaxWhy it matters for Ajax►Response is generally handled by a callback Response is generally handled by a callback

functionfunction

Context (or where’s the this)Context (or where’s the this)

►““this” refers to the current contextthis” refers to the current context►Closures can be used to control what Closures can be used to control what

“this” refers to“this” refers to► If “this” doesn’t refer to what you If “this” doesn’t refer to what you

expect, there will be errorsexpect, there will be errors

ClosuresClosures

► If you program in JavaScript, it is a If you program in JavaScript, it is a good idea to understand at least the good idea to understand at least the basics of closuresbasics of closures

►Understanding closuresUnderstanding closures Makes it easier to debugMakes it easier to debug Avoids lots of errorsAvoids lots of errors Helps avoid memory problemsHelps avoid memory problems

ClosuresClosures

►ScopeScope To understand closures, start with scopeTo understand closures, start with scope Best way to understand is to write small Best way to understand is to write small

sample programs, then test your sample programs, then test your assumptions using debugger and output.assumptions using debugger and output.

ExampleExample►Scope.htmScope.htm

Avoiding Some Common Avoiding Some Common MistakesMistakes

false is false?false is false?► TRUETRUE

““false” is true?false” is true?► TRUETRUE

0 == false?0 == false?► TRUETRUE

0 === false?0 === false?► FALSEFALSE

► 1 == true?1 == true? TRUETRUE

► 1 === true?1 === true? FALSEFALSE

► 1 === false?1 === false? FALSEFALSE

► Try the same with Try the same with undefined and nullundefined and null

•True or False?

Avoiding Some Common Avoiding Some Common MistakesMistakes

► Watch out for:Watch out for:► Variable ScopeVariable Scope

Accidentally putting object references in the Accidentally putting object references in the prototype objectprototype object

► Now all objects share the same dataNow all objects share the same data

► ClosureClosure Incorrect scopeIncorrect scope Clean object deletionClean object deletion

► Accidental globalsAccidental globals (i = 0; i < size; i++)(i = 0; i < size; i++)

► Global i just createdGlobal i just created

Avoiding Some Common Avoiding Some Common MistakesMistakes

►Under architected applicationsUnder architected applications Ajax powered web applications need to Ajax powered web applications need to

have client-side architecture designed just have client-side architecture designed just as carefully as server-sideas carefully as server-side

►““OO” problemsOO” problems JavaScript isn’t JavaJavaScript isn’t Java

►Some OO concepts translate wellSome OO concepts translate well►Some don’tSome don’t

Q & AQ & A