javascript basics
DESCRIPTION
Overview of JavaScriptTRANSCRIPT
![Page 1: JavaScript Basics](https://reader033.vdocuments.net/reader033/viewer/2022052906/558bee66d8b42a195c8b45eb/html5/thumbnails/1.jpg)
2009 Mats Bryntse
![Page 2: JavaScript Basics](https://reader033.vdocuments.net/reader033/viewer/2022052906/558bee66d8b42a195c8b45eb/html5/thumbnails/2.jpg)
Contents What is JavaScript JavaScript Basics Functions Objects Bad parts Prototype Scope Ajax JSON Debugging Tools Performance Events Error handling Future of JavaScript
![Page 3: JavaScript Basics](https://reader033.vdocuments.net/reader033/viewer/2022052906/558bee66d8b42a195c8b45eb/html5/thumbnails/3.jpg)
What is JavaScript
ECMAScript Current version in browsers is ECMA-262 edition 3, 3.1 to be finalized in December
2009 http://www.ecma-international.org Not tied to web browsers
DOM – Document object model API for working with XML/HTML, 3 levels (level 1 became W3C recommendation in October 1998) http://www.w3.org/DOM/
BOM (Browser object model) navigator, location, screen, XMLHttpRequest, ActiveXObject... No backing standard
ECMAScript
DOM BOM
JavaScript
- The worlds most popular programming language..?
![Page 4: JavaScript Basics](https://reader033.vdocuments.net/reader033/viewer/2022052906/558bee66d8b42a195c8b45eb/html5/thumbnails/4.jpg)
JavaScript overviewJavaScript is a class-free, object-oriented languageDynamic language, you can change any object at any
timePrototypal inheritance (inherit from objects)Lamda functions (or ’anonymous’ functions)5 primitive types:
number string boolean null undefined
Loosely typed language var a = 2;a === "2" // falsea = "2"; // a is now a stringa === "2" // true
![Page 5: JavaScript Basics](https://reader033.vdocuments.net/reader033/viewer/2022052906/558bee66d8b42a195c8b45eb/html5/thumbnails/5.jpg)
FunctionsFunctions are first class objects
var Cat = function () { // This is called a constructor function this.purr = function() {};}
Create instance: use the new keywordvar myCat = new Cat(); typeof(myCat) // ”object”, not very intuitivemyCat instanceof Cat // true, instanceof gives the expected answer
// Watch out when forgetting the new operatorvar cat = Cat();window.purr // window object is now clobbered
Function arguments available through arguments
function myFunc() {return arguments.length;
}myFunc(”a”, ”b”, ”c”); // returns 3
![Page 6: JavaScript Basics](https://reader033.vdocuments.net/reader033/viewer/2022052906/558bee66d8b42a195c8b45eb/html5/thumbnails/6.jpg)
Objects and arrays Everything that is not a primitive derives from Object
window.toString instanceof Object // = true Objects are associative arrays / hashtables
var a = { text : 'test'};a["text"] == a.text // true
Testing for object property”text” in a // true
Enumerating object propertiesfor (var o in window) { console.log(o + ':' + window[o]);}
Array basics push : adds an element length concat : join 2 arrays join(string) : string represenation of the array split by the argument slice(start, end) : returns elements between args sort ([function]) : sorts by alphabet or by function supplied as arg pop : extracts last element
![Page 7: JavaScript Basics](https://reader033.vdocuments.net/reader033/viewer/2022052906/558bee66d8b42a195c8b45eb/html5/thumbnails/7.jpg)
Some bad partsGlobal variables
window object is shared by everyoneno warning or crash if a variable is overwritten Easy to end-up with ”function soup”, an unmaintainable
mess of global objects & functions (MS Virtual Earth)eval & with
var o = {};with (o) { prop = 2; // prop isn’t defined on object o and ends up on the global object}alert(prop); // 2
== & !=typeofsemi-colon insertion0.1 + 0.2 == 0.3 // false (IEEE 754 floating point)
![Page 8: JavaScript Basics](https://reader033.vdocuments.net/reader033/viewer/2022052906/558bee66d8b42a195c8b45eb/html5/thumbnails/8.jpg)
PrototypeEvery function has a prototype, a shared object
var sword = function() { this.swing = function(){ // Every sword instance will have its own version of
swing console.log(”Swing”); };};
var sword = function() {};
sword.prototype.swing = function(){ // Every sword created will share this function
console.log(”Swing”);};
Use hasOwnProperty to distinguish prototype methods from own properties
![Page 9: JavaScript Basics](https://reader033.vdocuments.net/reader033/viewer/2022052906/558bee66d8b42a195c8b45eb/html5/thumbnails/9.jpg)
Execution ScopeScope is the execution context, the this property
var obj = { number : 42, showNumber: function () { alert(this.number); }}; obj.showNumber(); // 42
document.body.onclick = obj.showNumber; // clicking the body shows ”undefined”
call and apply can bind a new scope to a functionvar anotherObj = { number : ”blablabla” };obj.showNumber.call(anotherObj); // ”blablabla”
call (scope, arg1, arg2, ...) apply(scope, [arg1, arg2, ...])
Variable scope: function scope, not block scopefor(var i = 0; i<5;i++) {}alert(i); // 5
![Page 10: JavaScript Basics](https://reader033.vdocuments.net/reader033/viewer/2022052906/558bee66d8b42a195c8b45eb/html5/thumbnails/10.jpg)
Asynchronous JavaScript and XMLTerm coined by Jesse James Garret in 2005XHR added in IE5 through an ActiveX objectAll browsers (IE7+) supports the
XMLHttpRequest objectCross domain restrictions applyIE8 implements XDomainRequests, (does
not send cookies)
![Page 11: JavaScript Basics](https://reader033.vdocuments.net/reader033/viewer/2022052906/558bee66d8b42a195c8b45eb/html5/thumbnails/11.jpg)
JSONJavaScript Object NotationInvented by Douglas Crockford of YahooThe preferred data transfer format of the webMore lightweight than XML{ ”property” : ”value”}
Possible value types: String Number Object Array true false null
eval the JSON to get a native JS object, or use a JSON parser. ECMAScript 3.1 will have native support for JSON.parse and JSON.stringify (already in FF3.1)
![Page 12: JavaScript Basics](https://reader033.vdocuments.net/reader033/viewer/2022052906/558bee66d8b42a195c8b45eb/html5/thumbnails/12.jpg)
DebuggingFireBug for Firefox(Lite for IE) (1.4 adds JSON
viewer)Fiddler (if using http://localhost, use
http://localhost.) JsonViewer plugin SyntaxViewer plugin
IE: Internet Options -> Advanced -> Disable script debugging
debugger; attaches a client-side debuggerIE8 has a developer toolbar builtin, for previous
versions there is IE Developer Toolbar
![Page 13: JavaScript Basics](https://reader033.vdocuments.net/reader033/viewer/2022052906/558bee66d8b42a195c8b45eb/html5/thumbnails/13.jpg)
Tools Validators
JsLint JavaScriptLint
Minifiers JsMin Dojo ShrinkSafe YUI Compressor
Unit testing JsUnit YUI Test Dojo Object Harness
Documentation generators JsDoc YUI Doc
Secure execution environments ADSafe (Crockford) Caja
![Page 14: JavaScript Basics](https://reader033.vdocuments.net/reader033/viewer/2022052906/558bee66d8b42a195c8b45eb/html5/thumbnails/14.jpg)
Performance YUI Exceptional Performance Team Use Yslow plugin to FB If using namespaced objects repeatedly, assign to a local variable first
BADmyNS.subNS.obj.prop = 2;myNS.subNS.obj.name = ”Test”;myNS.subNS.obj.index = 2345;
BETTERvar m = myNS.subNS.obj;m.prop = 2;m.name ....
Even if the JavaScript engines ran at infinite speed, web pages would not run noticeably faster. The DOM operations are typically the culprit when it comes to poor performance.
Read Steve Souders blog on High performance websites
![Page 15: JavaScript Basics](https://reader033.vdocuments.net/reader033/viewer/2022052906/558bee66d8b42a195c8b45eb/html5/thumbnails/15.jpg)
EventsEvents handling in the DOM is tricky, browser
implementations vary. Using a JS library that normalizes the event
object is very helpfulRegistering events the old fashioned way (DOM
level 0) <a href="http://www.facebook.com” onclick="return
fbs_click(this)">Facebook</a> element.onclick = function() {} Only one listener can be registered, last listener assigned wins
”Correct” way of doing this W3C : element.addEventListener(’click’, fn, [executeInCapturePhase]) IE : element.attachEvent('onclick', fn) // flawed (this points to window in
fn, useless)
![Page 16: JavaScript Basics](https://reader033.vdocuments.net/reader033/viewer/2022052906/558bee66d8b42a195c8b45eb/html5/thumbnails/16.jpg)
Error handling Exception handling: try/catch/finally Throw an error
throw new Error(’Oops’); Use window.onerror (currently only supported by IE & FF)
window.onerror = function(message, url, line) { logError(message); return true; // Indicate the error is handled};
function logError(msg, severity) {
var img = new Image(); severity = encodeURIComponent(severity || 0); msg = encodeURIComponent(msg); img.src = "CaptureClientError.aspx?severity=" + severity + "&msg=" + msg;}
![Page 17: JavaScript Basics](https://reader033.vdocuments.net/reader033/viewer/2022052906/558bee66d8b42a195c8b45eb/html5/thumbnails/17.jpg)
Future of JavaScriptECMAScript 3.1 to be finalized in December. Some parts
already implemented in FF3.xSupport for getters/settersObject hardening (.seal and .freeze) JSON support