Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

JavaScript by Mind Map: JavaScript
5.0 stars - 10 reviews range from 0 to 5

JavaScript

AJAX

Pure implementation

XMLHttpRequest, Methods, abort(), getAllResponseHeaders(), getResponseHeader(headerName), open(method, URL, async, userName, password), send(content), setRequestHeader(type, value), Fields, readystate, responseText, responseXML, status

Frameworks

GWT

Dojo

jQuery

History handling

Native

History object, Fields, current, next, prev, length, Methods, forward(), back(), go(link)

Managing, In jQuery its used using iframe and timert

DOM

See native support

Inside

Browser events

Types, DOM events, onclick, mouseover, Window events, resize, Other events, load(handler), Used for deferred binding, readystatechange

Working with, addEventListener, removeEventListener, detachEvent, Use event as a parameter in fuction

Event bubbling, Parents handle child events, Slows down gwt code and huge widget hierarchies

Methods, stopPropagation, to protect from handle bubbling, preventDefault, prevent default action handling (example: anchor click not redirects to URI)

DOM standart, First - capture event, Then - bubble, ! not all the browsers use this standart

Prevent unnecessary bubbling, if (event.target == this) {}, event.stopPropagation()

Removal, unbind('name'), Example: unbind('click')

Rebind, bind('name', handlerFunction)

Simulating user actions, trigger(eventName), Example: trigger('click')

Hierarchy, 4 Model registration models, inline, <A HREF="somewhere.html" onClick="alert('I\'ve been clicked!')">, Don't use it because it means bad separation of models, traditional, element.onClick = doSomething, $(..).click(function);, Problems, Only one function may be registered, Solution, Function of functions, w3c, element.addEventListener('click, handlerFunction, false), last boolean argument, false = bubbling, true = capturing, Microsoft, element.attachEvent('onclick',doSomething), this keyword refers to window, no capturing, Event access, function(event), Cross-browser, 2 Event order models, Event capturing, Local handling, Even bubbling, Propagate upper

Execution context

call() and apply() methods, Example: someFunction().call(objectB), 'this' will now link to objectB instance

Event loop

Thread by browser checking event states

Executed using event queue

Objects

Window

Methods, onload, onresize, onkeyup, onerror

Global scope (browser-based JS)

Implemented as JS object

Fields, parent, screen, window, current window

Document

Reference to HTML DOM els

Not JS

Fields, cookie, Usage: window.document.cookie, activeElement, focused element, anchors, body, defaultCharset, documentElement, link to itself, location, changing forces refresh, URL, read-only, parentWindow, referrer, scripts, width

One instance for web page

Methods, ready, DeferredBinding analog

Hierarchy

Navigator, MimeType, Window, Frame, History, Location, Document, Anchor, Link, ..., Form, Hidden, Option, ..., Text, TextArea, ..., Layer, Plugin

Functions

Function closure, Acts as anonymous class in java

Server side

Node.js

Socket.io library

Event-driven

Non-blocking

Being used, eBay, Microsoft

May be used, Creating web servers, HTTP servers are very easy

Execution, node program.js

Objects, global, process, console

STDIO, using console object

Other features, Buffers, DNS work, HTTP utils, FS, SSL, ...

Language notes

No {} scope like in other langs

OOP

Instead of class/instance - Object

Instead of super: __proto__

Functions have an attribute called prototype

Immutable

All variables are function-local. Even in loops!

Also has gc

Functions are classes

Browser compatibility

Events

http://www.quirksmode.org/dom/events/index.html

Autohead

Automatical creating 'head' element even if it doesn't exist

Disabled in android, iPhome, Opera 8, That's why adding script to head from code may fail here

When you modify body from script which isn't a part of it - you get 'Operation aborted' in IE

Correct insertion of script

var first = document.getElementsByTagName('script')[0]; first.parentNode.insertBefore(js, first);

IE

GET caching in IE, Usage of hashes in links, set expire flag

Operation aborted, Change parent while it hasn't been constructed yet

Doesn't have capturing

Doesn't have w3c event registration mechanism (addEventListener)

Debug

Chrome should be started with debug option

Patterns

See JavaScript MVC

Other notes

window.onload may be called when DOM hasn't been constructed

Use document.ready

To prevent from default event handling use return false;

Cases like a href="bla" and $(a).click(function() {bla2})

jQuery

JavaScriptMVC

MVC mechanism

jQueryMX, $.Model, encapsulates app model, $.View, $.Controller

Dependency management

StealJS, Loads several modules, prevents from reloading, Single load point, Usage, steal('widgets/tabs.js', './style.css', function(){ $('#tabs ).tabs(); });

Functional, unit testing

FuncUnit, Asserts, test("counter", function() { ok(Conctacts.first().name, "there is a name property"); equal(Contacts.counter(), 5, "there are 5 contacts"); });, Methods, setup, test, teardown

Engines

Google v8

Used in Chrome

Main features

Memory allocation

Compile

GC

Tools

yui compressor

Obfuscates and compressed, short names, css compression