Taking javascript seriously
Download
1 / 20

Taking JavaScript Seriously - PowerPoint PPT Presentation


  • 126 Views
  • Uploaded on

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:

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Taking JavaScript Seriously' - adia


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Taking javascript seriously

Taking JavaScript Seriously

Is not the worst idea


A brief history of javascript
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
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 types1
JavaScript Types

  • typeofworks in a bizarre way

    • typeof([0, 1, 2]) === 'object'

  • To avoid problems:

    • Use === and !==

    • Explicitly convert using parseInt() and toString()


Javascript variables
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
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

}

};


Creating objects
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


Javascript inheritance
JavaScript Inheritance

  • The stuff of madness

  • Prototyping

    • Objects inherit from other objects

    • object.prototype points to the ‘parent’ object


Handling inheritance
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

}

}


Javascript functions
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

}


Javascript functions1
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


Information hiding with js
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


Immediat e execution
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

})()


Events in javascript
Events in JavaScript

  • Not built into the language

  • Use anonymous functions:

node.addEventListener('click', function(event) {

//handle the event here

}


Misc tidbits
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
JS File Template

(function() {

"use strict";

document.addEventListener('DOMContentLoaded', function() {

//Initialization stuff here

});

// Other code here

})()


References
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
Resources

  • jslint

  • Mozilla Developer Network

  • W3CSchools


Exercise
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!


Pitch preferences
Pitch Preferences

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

  • http://goo.gl/92CuHq


ad