Javascript Bootcamp

javascript bootcamp by amy hoy, www.slash7.com

Javascript is a real boy language

1.2 rip t Jav asc

1.1

99 5 .1

rip t

est

Jav asc

J ava .3 1 t p i r c s a v a J scri pt 1 .4

ECMAScript, edition 1 est. 1997

so

far

Javascript 1.6

fire

fox o

nly

a v Ja

p i r sc

.5 1 t

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 * String * Boolean

* null * undefined * RegExp

creating numbers

yes, they’re all numbers

creating strings creatin’ em

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 prototypebased inheritance model

using prototype to extend objects

creating an object hierarchy SweetLiquid

Molasses

Soda

KoolAid

creating the parent object

creating the children

creating the relationship

mucking about with your new objects

further extending objects

extending specific instances

exceptions

try..catch

fancier try..catch

throwing custom exceptions

throwing custom exceptions

throwing custom exception objects

catching custom exceptions

the browser

“Javascript” ECMAScript W3C DOM Document Object Model

the split-personality language

Javascript the language is mostly compatible the DOM is the problem area IE is the problem, but not as bad as you’d think

Don’t hate the language, hate the runtime environment

the DOM

document head

body div#sidebar

div.block p textNode

b textNode

div.block

div#main div.block

window document head

body div#sidebar

div.block p textNode

b textNode

div.block

div#main div.block

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 moo.fx TrimPath Behavior & event:Selectors Scriptaculous (fx) moo.fx

Links for You http://www.slash7.com/ look for the list of presentations under the “Goodies” sidebar