-
Scope
-
{ blocks }
- no scope
-
function
- has scope
-
global
-
object
-
in browsers
- window
-
variable
- no var
-
namespace
-
use an object to organize vars and objs
- YOUR_OBJ={};
-
Objects
- everything is objects
-
contain
- data
- methods
-
collection
-
name
- strings
-
value
- any type
- other objects
- a little database
-
literals
-
value
- any type
- expressions
- can add parameters on-fly to any object
-
Linkage
-
inheritense
-
objects can be created linked to another object
- creation
- object(o)
- a new empty object with a link to object o
- get
- linked object properties
- this object properties
- set
- this object properties only
-
Object.prototype
- all objects linked to it
-
basic methods
- not useful
- hasOwnProperty(name)
-
operations
-
creation
-
var myObject = {};
- var myObject = {name: "My Name", grade: 'A', level: 3};
-
Maker Function
- myObject = maker("My Name", 'A', 3);
- new Object()
- object(Object.prototype)
-
access
- var theName = myObject.name;
- var grade = myObject['grade'];
-
compare
-
===
- compares object references, not values
-
==
- do type coercion
-
delete
-
delete myObject[name]
- deletes propety name from an object
-
use
- names - strings
-
built-in
-
wrappers
- Integer
- Boolean
- String
- Number
-
Arrays
-
operations
-
creation
-
var myArray = [];
- var myArray = ['oats', 'peas', 'beans'];
- new Array()
-
append
- myArray[myList.lenght] = "new value";
-
delete
-
delete array[number]
- removes element, but leaves a hole
-
methods
- concat
- join
- pop
- push
- slice
- sort
- splice
-
array
-
don't work in different frames
- value.constructor === Array
- value instanceof Array
-
Linkage
-
inheritance
- Object produced from array prototype doesn't have array nature.
It'll inherit array values and methods, but not its length.
-
augment
-
single array
- assign method to it
-
all arrays
- assign methods to Array.prototype
-
Array.prototype
- all arrays linked to it
-
use
- names - integers
-
Statements
-
typeof(argument)
-
returns a string
-
note
- array
- "object"
- null
- "object"
-
break
-
java sintax
- labels
-
for
- for(var i =0; i < array.lenght; i+=1)
-
for(var name in object)
-
name
- key
-
object[name]
- value
-
iterates all object properties
- inherited
- own
- if(object.hasOwnProperty(name)){}
-
switch
-
switch value
- numbers
- strings
-
case value
- constant
- expression
-
throw
-
exceptions
-
built-in
- Error
- EvalError
- RangeError
- SyntaxError
- TypeError
- URIError
-
user
- { name: exceptionName, message: reason }
-
usage
- constructors
- new Error(reason)
-
try
-
catch
-
no classes
- one catch block
- exception type
-
with
-
advantages
- short-hand
-
disadvantages
-
confusing
- local
- global
- error-prone
- ambiguous
-
var
- defines variables
- no types
-
return
- return expression;
-
return;
-
return value
- undefined
-
Functions
-
inherited from Object
-
can store
- name/value pairs
- can be passed and returned
-
statement
-
function foo(){}
-
==
- var foo = function foo(){};
-
inner
-
Static Scoping
- has access to outer functions
params and variables
-
Closure
- variables available after the outer function returned
-
invocation
-
arguments
- implicid variable
- can be iterated
-
extra parameters
- ignored
-
fewer parameters
- undefined
-
ways to call
-
Function
- functionObject(arguments)
- this = global object
-
Method
- thisObject.methodName(arguments)
- this = thisObject
- thisObject["methodName"](arguments)
-
Constructor
- new functionObject(arguments)
- new object created and assigned to this
- no explicit return
- return this
-
Apply
- functionObject.apply(thisObject, [arguments])
-
standard
-
eval(argument)
-
compiles argument
- calls the compiller at run time
-
new Function(parameters, body)
-
creates function
- function(parameters) {body}
-
uses compiler
- similar to eval
- use only to compile fresh source from server
-
DOM part
- alert(text)
- confirm(text)
- promt(text, default)
- setTimeout(func, msec)
- setInterval(func, msec)
-
blocks browser stream
- avoid in AJAX apps
-
RegEx
-
syntax
- /regex/
-
DOM
-
document.write
-
onload()
-
before
- insert
-
after
- replace
-
HTML text
- document
-
collections
- document.anchors
- document.applets
- document.embeds
- document.forms
- document.frames
- document.images
- document.plugins
- document.scripts
- document.stylesheets
-
<script></script>
-
attributes
-
<!-- // -->
- hack
- Mosaic
- Navigator 1.0
-
language=javascript
- deprecated
-
type=text/javascript
- ignored
- src=URL
- don't use
-
tips
-
closure
- <body>
-
elements
-
attributes
-
name
- identifies
- form
- data
- window/frame
-
id
- identifies
- unique
-
retrieving
- document.getElementById(id)
- document.getElementsByName(name)
- node.getElementsByTagName(tagName)
-
direct access
-
document
- document
-
document.documentElement
- <html>
-
document.body
- <body>
-
pointers
-
BODY
- H1
- #text
- H1
- #text
- P
- #text
-
manipulating
-
nodes
-
create
- document.createElement(tagName)
- document.createTextNode(text)
- node.cloneNode()
- single
- node.cloneNode(true)
- childs
- not attached to document
-
attach
- node.appendChild(new)
- node.insertBefore(new, sibling)
- node.replaceChild(new, old)
- node.innerHtml
- HTML text
- browser parses to nodes
- single node
- multiple
-
remove
- node.removeChild(old)
- returns
- removed node
- before
- remove any handlers
- IE 6
- memory leaks
- set function
- null
-
properties
-
old scool
- if(my_img.complete) {my_img.src=superurl}
-
new scool
- if(my_img.getAttribute('complete')){my_img.setAttribute('src',superurl)}
- fires event
-
style
- node.className
- class names devided by ' '
- node.style.stylename
- stylename
- css style
- get
- css assigned styles
- IE
- W3C
-
events
- boolean_param
-
mouse
-
target
- topmost element
- z-index
-
types
- click
- dblclick
- mousedown
- mousemove
- mouseout
- mouseover
- mouseup
-
input
- blur
- change
- focus
- keydown
- keypress
- keyup
- submit
-
handlers
-
classic
- node["on"+type]=f
- every browser
-
w3c
- node.addEventListener(type, f, boolean_param)
- IE
-
microsoft
- node.attachEvent("on"+type, f)
- IE
-
event parameter
- passed to handler
- IE
- global variable
- event
- others
- processing
-
dispatching
-
pattern
- trickling
- netscape 4
- BODY
- H1
- DIV
- DIV
- bubling
- BODY
- H1
- DIV
- DIV
- set handler to parent container only
-
stop dispatching
- cancel bubbling event
- prevent default action
-
window
- global object
-
unique for
- window
- frame
- iframe
-
properties
-
frames[]
- child
- frame
- iframe
- name
-
opener
- reference
- creator/opener
- parent
- self
- top
- window
-
open()
- new window
- references
-
access another window
- can get reference to it
- document.domain === otherwindow.document.domain
-
cross browser
-
browser detection
- browsers lie
-
feature detection
- reflection
- execute conditionally
-
platform libraries
- YUI
- ...
-
Inheritence
-
protorypal
- has link to inherited object
-
Pseudoclassical
-
Constructor
- function
-
this
- points to new object
-
new
- operator
-
prototype
- function member