Taking JavaScript Seriously IS NOT THE WORST IDEA

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

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

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

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.

JavaScript Objects Everything is an object Objects are collections of key/value pairs Create using object literal notation var obj = { att1: 1, 'att2': 556.8, 'some att': { thing: 'sing', 'other thing': true } };

Creating Objects var iterator = 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; } }; } var it = iterator(['apples', 'bananas']) it.next() // 'apples' it.hasNext() // true it.next() // 'bananas' it.hasNext() // false

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

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

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

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

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

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

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

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 || {}; }

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

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

Resources jslint Mozilla Developer Network W3CSchools

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 at Note the hash!

Pitch Preferences Once you’ve spoken to all three TAs, fill out the form at