Rocking the DOM - PowerPoint PPT Presentation

1 / 12
About This Presentation
Title:

Rocking the DOM

Description:

form method='post' id='contact_form' onsubmit='sayhi();' The JavaScript. Let's Do Something ... Waiting for the DOM to load. Now unobtrusively. if(!document. ... – PowerPoint PPT presentation

Number of Views:55
Avg rating:3.0/5.0
Slides: 13
Provided by: MCP392
Category:
Tags: dom | postid | rocking

less

Transcript and Presenter's Notes

Title: Rocking the DOM


1
Rocking the DOM
Session 04
2
Rocking the DOM
Tonights agenda
  • Questions?
  • Design time
  • The DOM
  • Unobtrusive JS

3
Questions?
Holler if youve got em
4
Design Time
Show us your design face
5
The DOM
You already know it
  • Document Object Model
  • Nesting

Kevin Yanks and Cameron Adams. Simply JavaScript.
SitePoint, 2007
6
The DOM
You already know it
Text nodes
Kevin Yanks and Cameron Adams. Simply JavaScript.
SitePoint, 2007
7
The DOM
You already know it
Attributes
Kevin Yanks and Cameron Adams. Simply JavaScript.
SitePoint, 2007
8
The DOM
Getting what you want
HTML
ltp idintrogtTextlt/pgt
CSS
intro font-size 12px
JavaScript
document.getElementById(intro)
9
The DOM
Getting what you want
HTML
ltpgtTextlt/pgt
CSS
p font-size 12px
JavaScript
document.getElementsByTagName(p)
10
Lets Do Something
First obtrusively
Event Handler (in HTML)
ltform method"post" id"contact_form"
onsubmit"sayhi()"gt
The JavaScript
ltscript typetext/javascriptgt var first_name
document.getElementById(first_name).value
alert(welcome_message) lt/scriptgt
11
Lets Do Something
Now unobtrusively
Waiting for the DOM to load
window.onload function() all your JS
Checking for compatibility
if(!document.getElementsByTagName) return false
Event listening
contact_form.onsubmit function() sayhi()
12
Wrap Up
Next time jquery
Write a Comment
User Comments (0)
About PowerShow.com