Taking JavaScript Seriously

1. Taking JavaScript Seriously Is not the worst idea

2. A Brief History of JavaScript • Invented at Netscape in 1995 • Has nothing to do with Java • Standardized by ECMAScript • Current version is 3 • Version 5 is available, but not widely adopted

3. JavaScript Types • Types are: • Number, String, Boolean Object, Function, Array • Types get automatically converted when needed • Examples: • '' == '0' // false • 0 =='' // true • 0 == '0‘ // true • false =='false' // false • false =='0' // true • false == undefined // false • false ==null // false • null ==undefined // true • ' \t\r\n ' == 0 // true

4. JavaScript Types • typeofworks in a bizarre way • typeof([0, 1, 2]) === 'object' • To avoid problems: • Use === and !== • Explicitly convert using parseInt() and toString()

5. JavaScript Variables • Have function scope • If you don’t declare them, they are implicitly global (This is awful) • Global environment has a name (window in the browser, global in nodejs) • To avoid problems, always declare all variables at the top of the function.

6. JavaScript Objects • Everything is an object • Objects are collections of key/value pairs • Create using object literal notation varobj = { att1: 1, 'att2': 556.8, 'someatt': { thing: 'sing', 'otherthing': true } };

7. Creating Objects variterator = function(arr){ return { myArr: arr, index: 0, next: function() { this.index += 1; return this.myArr[index - 1]; }, hasNext: function() { return this.index < this.arr.length; } }; } varit = iterator(['apples', 'bananas']) it.next() // 'apples' it.hasNext() // true it.next() // 'bananas' it.hasNext() // false

8. JavaScript Inheritance • The stuff of madness • Prototyping • Objects inherit from other objects • object.prototype points to the ‘parent’ object

9. Handling Inheritance • Every object has a prototype of object • Adding something to object.prototypewill add it to all objects in all scripts on the page • When enumerating objects, always use for (varkey in object){ if (object.hasOwnProperty(key)) { //Do some stuff } }

10. JavaScript Functions • Are also objects • Can be defined anywhere • Look like this: Used internally in the function function name (arg1, arg2, arg3) { //Do some stuff }

11. JavaScript Functions • Can access the variables of their environment • For example function outer(a, b) { vari, j; varinner = function() { //Can access a, b, i, j, inner } } Closure of inner

12. Information Hiding with JS variterator = function(arr){ var index = 0; return { next: function() { index += 1; return arr[index - 1]; }, hasNext: function() { return index < arr.length; } }; } varit = iterator(['apples', 'bananas']) it.next() // 'apples' it.hasNext() // true it.next() // 'bananas' it.hasNext() // false

13. Immediate Execution • Functions can be executed right after definition • Use this to create a module that won’t affect the global namespace (function() { varv1, v2; //Put your code here })()

14. Events in JavaScript • Not built into the language • Use anonymous functions: node.addEventListener('click', function(event) { //handle the event here }

15. Misc Tidbits • If you want to do defaults: • Always put semi-colons on the ends of lines • Put "use strict" at the top of your module function • The . notation and [] notation are interchangeable • Never ever ever use eval function (arg1, arg2) { arg1 = arg1 || 5; arg2 = arg2 || {}; }

16. JS File Template (function() { "use strict"; document.addEventListener('DOMContentLoaded', function() { //Initialization stuff here }); // Other code here })()

17. References • Crockford, Douglas. JavaScript: The Good Parts. O’Reilly Media Inc, Cambridge, MA. 2008. • Stefanov, Stoyan, JavaScript Patterns. O’Reilly Media Inc, Cambridge, MA. 2010.

18. Resources • jslint • Mozilla Developer Network • W3CSchools

19. Exercise • Change the file javascript_exercise.js so that the object returned by create_calorie_counter has no public data (see slide on information hiding) • The exercise and these slides are available athttp://web.cs.dal.ca/~yule#teaching/csci3130 • Note the hash!

20. Pitch Preferences • Once you’ve spoken to all three TAs, fill out the form at • http://goo.gl/92CuHq