A great intro to JavaScript. Covers all the basics you need to get up and running with Ajax development. http://www.enterpriseajax.com

1. JavaScript Bootcamp Alexei White - Nitobi

8. Part 1 The Basics

41. Value vs Reference // copying by Value var a = 1; var b = a; // copy by value.. Two distinct values now // passing an argument by Value function add_to_sum(sum, x) { sum = sum + x; // this only changes the internal } // copy of x add_to_sum(a,1); if (b == 1) b = 2; // b is a distinct numeric value // a is still 1, and b is 2 Won’t actually do anything

42. Value vs Reference // copying by reference var xmas = new Date(2007, 11, 25); var gift_day = xmas; // both variables refer to the same object gift_day.setDate(26); // we’ve now changed both variables function add_to_sum(sum, x) { sum[0] = sum[0] + x; sum[1] = sum[1] + x; sum[2] = sum[1] + x; } (xmas == gift_day) // this is true still xmas.getDate(); // returns 26 not 25 var newdate1 = new Date(2007,10,10); var newdate2 = new Date(2007,10,10); (newdate1 == newdate2) // this is false Permanently changes ‘sum’ in global context Note: Strings are compared by value

47. Variable Scope var x = 1; function f() { } function g() { }

51. Operators Operator Operand type(s) Operation performed . Object, identifier Property access [ ] Array, integer Array index ! Boolean Logical complement == Any Equality === Any Identity && Booleans Logical AND || Booleans Logical OR ?: Booleans, any, any Conditional operator , Any Multiple evaluation

52. Assignment with Operation Operator Example Equivalent += a += b a = a + b -= a -= b a = a – b *= a *= b a = a * b /= a /= b a = a / b %= a %= b a = a % b <<= a <<= b a = a <<b >>= a >>= b a = a >>b >>>= a >>>= b a = a >>> b &= a &= b a = a & b |= a |= b a = a | b ^= a ^= b a = a ^ b

57. while, do/while var count = 0; while (count < 10) { console.log(count); count++; } var count = 0; do { console.log(count); count++; } while (count < 10) Will execute at least once

58. for for( initialize ; test ; increment ) statement for (var count = 0; count < 10; count++) console.log(count); for( variable in object ) statement var o = {x:1, y:2, z:3} var a = new Array(); var I = 0; for(a[i++] in o) {} Curly braces {} are not required if just one statement Copies the object “o” to the array “a” Not all properties are enumerable!

66. Part 2 More Advanced

76. Window Geometry Browser Differences Browser window.innerHeight document.body.clientHeight document.documentElement.clientHeight Opera 9.5+ strict window document window Opera 9.5+ quirks window window document Opera 7-9.2 window window document Opera 6 window window N/A Mozilla strict window document window Mozilla quirks window window document KHTML window document document Safari window document document iCab 3 window document document iCab 2 window window N/A IE 6+ strict N/A document window IE 5-7 quirks N/A window 0 IE 4 N/A window N/A ICEbrowser window window document Tkhtml Hv3 window window document Netscape 4 window N/A N/A

89. Exercise 1 – Possible Solution InsertDOM = function() { var myDiv = document.createElement('div'); var myHeading = document.createElement('h2'); myHeading.innerHTML = &quot;Customer Profile&quot;; var myP1 = document.createElement('p'); myP1.innerHTML = &quot;Jimmy Smith&quot;; var myDiv2 = document.createElement('div'); myDiv2.innerHTML = &quot;Jimmy is married with 2 kids and likes to Golf. Favorite beer is Molson Export.&quot;; // Here we asseble everything into one node myDiv.appendChild(myHeading); myDiv.appendChild(myP1); myDiv.appendChild(myDiv2); var body = document.getElementsByTagName('body')[0]; body.appendChild(myDiv); }

103. Exercise 2 – Possible Solution AnimateDOMWithThread = function() { var myDiv = document.createElement('div'); myDiv.style.backgroundColor = &quot;#FFFF00&quot;; myDiv.style.width = &quot;100px&quot;; myDiv.style.height = &quot;100px&quot;; myDiv.innerHTML = &quot;Some text&quot;; var body = document.getElementsByTagName('body')[0]; body.appendChild(myDiv); window.myAnimObj = setTimeout(function() {animateBox(myDiv,100, 100)}, 20); } animateBox = function(myBox, w, h) { myBox.style.width = w + 'px'; myBox.style.height = h + 'px'; var neww = w+1; var newh = h+1; if ((neww <= 300) || (newh <= 300)) window.myAnimObj = setTimeout(function() {animateBox(myBox,neww,newh)}, 20); } Absolute positioning not required

104. Part 3 More Advanced

108. Using Call function showLength() { alert(this.length); } showLength.call(new Array(10)); // Alerts 10! “ this” refers to the new Array

119. Inheritance Function extend = function(subClass, baseClass) { function inheritance() {}; inheritance.prototype = baseClass.prototype; subClass.prototype = new inheritance(); subClass.baseConstructor = baseClass; if (baseClass.base) { baseClass.prototype.base = baseClass.base; } subClass.base = baseClass.prototype; } Customer = function (firstName, lastName) { Customer.baseConstructor.call(this, firstName, lastName); this.balance = 0; } Customer.prototype.getFullName = function() { Customer.base.getFullName.call(this); } extend(Customer, Person); remove compile-time constructor execution base constructor pointer base method pointers

124. Ajax Versus Traditional

144. DOM Event Decoration var domNode = document.getElementById(“myNode”); domNode.attachEvent(“onmouseover”, highlight); W3C - Firefox var domNode = document.getElementById(“myNode”); domNode.addEventListener(“mouseover”, hightlight, false); Internet Explorer Capture Function pointer Prefixed with “on”

145. Event Object Internet Explorer W3C document.documentElement.clientHeight clientX / Y clientX / Y, pageX / Y clientX / Y returns the event coordinates without the document scroll position taken into account, whereas pageX / Y does take scrolling into account. N/A currentTarget The HTML element to which the event handler was attached. keyCode, altKey, ctrlKey, shiftKey keyCode, altKey, ctrlKey, shiftKey Various key event modifiers to check if ctrlKey, shiftKey ctrlKey, shiftKey the Shift or Ctrl key are pressed. srcElement target The HTML element on which the event actually took place. Both properties are supported in Opera and Safari. type type The event type without the “on” prefix. fromElement / toElement relatedTarget from is used only for mouseover and mouseout events. Both properties are supported in Opera and Safari

151. Event Flow <body> <div> </div> <a onclick=“handler()”></a> </body> Bubble Capture

154. Exercise 3 – Possible Solution Person = function(fname, lname, age) { this.firstName = fname; this.lastName = lname; this.age = age; } Person.prototype.getFullName = function() { return this.firstName + &quot; &quot; + this.lastName; } Customer = function(fname, lname, age, balance) { this.balance = balance; Person.call(this,fname, lname, age); } Customer.prototype = new Person(); Customer.prototype.getBalance = function() { return '$' + this.balance;} setupCustomers = function() { var cust1 = new Customer(&quot;John&quot;, &quot;Smith&quot;, 24, 233.23); console.log(cust1.getFullName()); console.log(cust1.getBalance()); }

155. Finito Questions?