taking javascript seriously is not the worst idea

Taking JavaScript SeriouslyIS 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' // false0 == '' // true0 == '0‘ // truefalse == 'false' // falsefalse == '0' // truefalse == undefined // falsefalse == null // falsenull == 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 Objectsvar 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() // trueit.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 JSvar 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() // trueit.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. 2008.

•Stefanov, Stoyan, JavaScript Patterns. O’Reilly Media Inc, Cambridge, MA. 2010.

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 http://web.cs.dal.ca/~yule#teaching/csci3130

•Note the hash!

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

•http://goo.gl/92CuHq