Taking JavaScript Seriously

20
Taking JavaScript Seriously IS NOT THE WORST IDEA

description

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: - PowerPoint PPT Presentation

Transcript of Taking JavaScript Seriously

Page 1: Taking JavaScript  Seriously

Taking JavaScript SeriouslyIS NOT THE WORST IDEA

Page 2: Taking JavaScript  Seriously

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

Page 3: Taking JavaScript  Seriously

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

Page 4: Taking JavaScript  Seriously

JavaScript Types•typeof works in a bizarre way•typeof([0, 1, 2]) === 'object'

•To avoid problems:• Use === and !==

• Explicitly convert using parseInt() and toString()

Page 5: Taking JavaScript  Seriously

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.

Page 6: Taking JavaScript  Seriously

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

}};

Page 7: Taking JavaScript  Seriously

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

Page 8: Taking JavaScript  Seriously

JavaScript Inheritance•The stuff of madness

•Prototyping•Objects inherit from other objects

•object.prototype points to the ‘parent’ object

Page 9: Taking JavaScript  Seriously

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}

}

Page 10: Taking JavaScript  Seriously

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

Page 11: Taking JavaScript  Seriously

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

Page 12: Taking JavaScript  Seriously

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

Page 13: Taking JavaScript  Seriously

•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

})()

Page 14: Taking JavaScript  Seriously

Events in JavaScript•Not built into the language

• Use anonymous functions:

node.addEventListener('click', function(event) {//handle the event here

}

Page 15: Taking JavaScript  Seriously

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

}

Page 16: Taking JavaScript  Seriously

JS File Template(function() {"use strict";

document.addEventListener('DOMContentLoaded', function() {//Initialization stuff here

});

// Other code here

})()

Page 17: Taking JavaScript  Seriously

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.

Page 18: Taking JavaScript  Seriously

Resources• jslint

•Mozilla Developer Network

•W3CSchools

Page 19: Taking JavaScript  Seriously

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!

Page 20: Taking JavaScript  Seriously

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

•http://goo.gl/92CuHq