taking javascript seriously
Download
Skip this Video
Download Presentation
Taking JavaScript Seriously

Loading in 2 Seconds...

play fullscreen
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