Browser

m

DOM

init()

load()

ready()

HTML

<head>

JavaScript

layout

CSS

table

<body>

<div>

<canvas>

pixel

png, gif, jpg

vector

SVG

media

<form>

<ul> / <ol>

<li> item 1 </li>

<li> item 2 </li>

<a></a>

r

<a> == anchor?

href=""

url link

href="#"

on same page : different section/element/div

<tag prop>

Screen

elements

block

inline

selector

CSS

#

id

.

class

Skeleton

StyleSheet

content

layout.css

framework

base.css

skeleton.css

URL

Fetch

Cache

Parser

return Tree

Flow

Display List

Paint

Render Pixel

SVG

<path/>

r

<html> <head> <title>Mike is damn cool</title> </head> <body><svg mt_Datagjxmlns='http://www.w3.org/2000/svg'><path d="M 200,200 l 150,0 a150,150 0 0,0 -37,-97 z" fill="red" stroke="black" stroke-width="2" stroke-linejoin="round" /></svg> </body></html>

XPCOM

CrossPlatformComponentObjectModel

XPCOM is tailored toward providing modular component support at the application level, so proxy services only support multiple threads sharing an otherwise non-reentrant component. If you wish to access a component remotely, you will have to write your own proxy to marshal data back and forth to the remote object. There are some existing components that can help you do this, so it isn't actually as tough as it sounds.

component

Script

Change

Javascript

function object

expression

var foo = function foo( ) {};

preferable

makes it clear that functions are values

statement

function foo( ) {};

requires name

can't put in if statement because of variable hoisting

moved to the top of the scope in which it's defined

relaxes the req that functions should be declared before usage; sloppy

return

all functions return something; "undefined" if not specifiec

invocation

parameters

this

contains reference to the object of invocation

allows a single function object instance to service many functions

key to prototypal inheritance

arguments

array like, but not exactly

read only structure; wise

extra parameters placed into argument collection

recursion

when a function calls itself

quicksort

tip

declare variables at top of function

declare all function before using

Closure

The context of an inner function includes the scope of the outer function

An inner function enjoys that context even after the parent functions have returned

timers

notes

browser object

never interrupt another currently running timer

type

var id = setTimeout(fn, delay);

var id = setInterval(fn, delay);

returns unique id

clearInterval(id);

clearTimeout(id);

bad parts

global variables

foo = value

implied global

use variable without declaring it

var foo = value;

var statement outside of any function

window.foo = value

add to property of global object

window is global object of web browsers

scope

function scoped, not block scope

C

declare variable at site of first use

javascript

declare all variables at the top of each function

semicolon insertion