Javascript Bootcamp
Javascript Bootcamp
bootcamp
by amy hoy, www.slash7.com
Javascript is a real
boy language
J ava s c rip t 1 .3 J ava
1.2
scri
pt 1
t
rip
.4
5
99
asc
1.1
.1
Jav
est
t
rip
ECMAScript, edition 1
asc
Jav
est. 1997
1 .5
i p t Javascript 1.6
sc r
va
Ja
far
so
o nly
fox
fire
ECMAScript, edition 3
est. 1999
Follow Along
www.squarefree.com/shell/shell.html
Syntax & Style
whirlwind tour
look ma, no primitives!
data types are fun!
* Number * null
* String * undefined
* Boolean * RegExp
creating numbers
yes, they’re all numbers
creating
creatin’ em strings
creating regexps
booleans - dead simple
null and undefined are special
doin’ stuff with basic types
creating arrays
this deserves repeating
creating simple functions
creating simple objects
this deserves repeating
if... or else!
gonna have to make a switch()
while()
do..while() while() while()
for(), our old friend
for..in(), a new trick!
strings
strings act like arrays
concatenation & auto type conversion
breakin’ up is not hard to do
the great escape. and unescape.
RegExps
a bit more on regexps
functions
closures & callbacks
function handles
the arguments object
objects
JavaScript Object Notation (JSON)
using a JSON object
turning strings into code (more JSON!)
don’t forget your commas
creating an object constructor
creating a better object constructor
Javascript has a prototype-
based inheritance model
using prototype to extend objects
creating an object hierarchy
SweetLiquid
head body
div#sidebar div#main
textNode
b
textNode
window
document
head body
div#sidebar div#main
textNode
b
textNode
iterating through the DOM tree
DOM element attributes
DOM element attributes
DOM element attributes
DOM element attributes
DOM element attributes & methods
DOM element attributes & methods
DOM element attributes & methods
node.childNodes
node.innerHTML
finding DOM elements by id
finding DOM elements by tagName
creating new DOM nodes
embedding javascript
Prototype
Development
& Debugging
FireFox
your long-term best bud
FireBug
your new soulmate
inspecting DOM elements: source
inspecting DOM elements: style
inspecting DOM elements: live events
console: errors and filtering things to show
console: logging / inspecting AJAX requests
console: logging / inspecting AJAX requests
the step-thru debugger: new in FireBug .4
breakpoints
step-through debugging
flexible console logging
built-in profiling & testing functionality
live DOM inspector / editor
the ability to send email
Javascript Shell
no snazzy logo
www.squarefree.com/shell/shell.html
Other Tools & Libraries
JSUnit MochiKit
jQuery moo.ajax
TrimPath moo.fx
Behavior & event:Selectors
Scriptaculous (fx)
moo.fx
Links for You
http://www.slash7.com/
look for the list of presentations under the
“Goodies” sidebar