JavaScript Basics

2,408 views

Published on

Overview of JavaScript

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,408
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
153
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

JavaScript Basics

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

×