Your SlideShare is downloading. ×
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Ajax Fundamentals ? Hands On
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ajax Fundamentals ? Hands On

347

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
347
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Setup
    • Go to http://www.permanentstudent.com
    • Click on link to Ajax hands-on
    • Download the files to a folder on your laptop
    • If you don’t have Venkman and Firebug set up please follow instructions at link installs
  • 2. Ajax Fundamentals – Hands On Catherine Daves
  • 3. Agenda
    • Ajax Example
    • Background Concepts
    • Hands-on
      • xmlHTTP
      • dynamic buttons
      • JavaScript
        • Syntax, Callbacks, Context, Closures
      • Event handlers
      • Styles
    • Avoiding Some Common Mistakes
  • 4. Getting information to a web browser – a non-comprehensive list
    • Http
      • http://www.google.com/firefox?client=firefox-a&rls=org.mozilla:en-US:official
    • XMLHttpRequest
      • var xmlhttp=new XMLHttpRequest()
      • Must be from same server
    • <Script>
      • Can be dangerous
    • iFrame
    • <img>
  • 5. Key Ingredients
    • DOM
    • CSS
    • JavaScript
  • 6. HTML DOM
    • Document Object Model
      • Representation of elements on page
        • div
        • div.firstChild
      • Allows interaction with elements on page
      • Examples
        • document.getElementById()
        • document.createElement (“div”);
        • element.style.backgroundColor = “red”;
  • 7. CSS
    • Cascading Style Sheets
      • css style
        • background-color
      • JavaScript style
        • backgroundColor
      • Float
        • float: left;
        • cssFloat = “left”;
  • 8. JavaScript
    • JavaScript
      • Allows manipulation of
        • DOM
        • CSS
        • Event handling
  • 9. DOM + CSS + JavaScript
    • The good
      • Allows lots of control of the appearance and interaction of a web page
    • The bad
      • Three different systems interacting can make them hard to understand and debug
    • The ugly
      • Not the same in every browser
  • 10. What does this have to do with Ajax?
    • Client-side JavaScript, along with manipulation of the DOM and CSS, are the core of an Ajax app
  • 11. Hands-On
  • 12. Setup
    • Venkman Debugger
      • Background color
      • Error trigger
      • Throw trigger
    • Firebug
  • 13. Exercises 1 & 2
    • Exercise 1
      • Load 3 types of data with innerHTML
    • Exercise 2
      • Load 3 types of data with JavaScript
  • 14. Exercises 1 & 2 – key points
    • innerHTML is fast way to get contents into a page
      • contents must be valid HTML
      • overwrites existing contents
    • JavaScript can be used to select which parts of reply go into page
      • new HTML elements are created and inserted into page
  • 15. Exercises 3 & 4
    • Exercise 3
      • JavaScript object creation
    • Exercise 4
      • Creating buttons on the fly
  • 16. Callbacks Context and Closures
  • 17. Callbacks
    • A callback is
      • Comp Sci Version
        • a callback is executable code that is passed as an argument to other code (Wikipedia)
      • What this means
        • I know what I want to happen when the user presses a button. And I don’t want it to happen until the button is pressed. So I give the button handler a callback.
      • Why it matters for Ajax
        • Response is generally handled by a callback function
  • 18. Context (or where’s the this)
    • “this” refers to the current context
    • Closures can be used to control what “this” refers to
    • If “this” doesn’t refer to what you expect, there will be errors
  • 19. Closures
    • If you program in JavaScript, it is a good idea to understand at least the basics of closures
    • Understanding closures
      • Makes it easier to debug
      • Avoids lots of errors
      • Helps avoid memory problems
  • 20. Closures
    • Scope
      • To understand closures, start with scope
      • Best way to understand is to write small sample programs, then test your assumptions using debugger and output.
      • Example
        • Scope.htm
  • 21. Avoiding Some Common Mistakes
      • false is false?
        • TRUE
      • “ false” is true?
        • TRUE
      • 0 == false?
        • TRUE
      • 0 === false?
        • FALSE
    • 1 == true?
      • TRUE
    • 1 === true?
      • FALSE
    • 1 === false?
      • FALSE
    • Try the same with undefined and null
    • True or False?
  • 22. Avoiding Some Common Mistakes
    • Watch out for:
    • Variable Scope
      • Accidentally putting object references in the prototype object
        • Now all objects share the same data
    • Closure
      • Incorrect scope
      • Clean object deletion
    • Accidental globals
      • (i = 0; i < size; i++)
        • Global i just created
  • 23. Avoiding Some Common Mistakes
    • Under architected applications
      • Ajax powered web applications need to have client-side architecture designed just as carefully as server-side
    • “OO” problems
      • JavaScript isn’t Java
        • Some OO concepts translate well
        • Some don’t
  • 24. Q & A

×