Intro to JavaScript

(ECMaScript V)

Writing JS code

JS Bin

Simple gotchas

• use var
• execution is single-threaded

JS is built for the DOM

Functions are first-class objects

Semicolon insertion

function(){
    return
    1 + 2
}

➙

function(){
    return;
    1 + 2;
}

➙ always use ;

Block-less JS

if (true)
 doThis()
 doThat()

➙

if (true) {
 doThis();
}
doThat();

Data types

var num = 42;                               
var num2 = x * 42;                           
var str = "BioJS";                      
var arr = ["BioJS", "is", "aweseome"];           
var dict  = {name:"BioJS", url:"www.biojs.net"};

Access

• arr[index]
• dict.key or dict[key]

JSON

JavaScript Object Notation

• JSON.parse(obj)
• JSON.stringify(obj)

"course": {
    "chair": "RostLab",
    teachers: ["Tatyana Goldberg", "Juan Miguel Cejuela"],
    "location": {
        "postcode": "85748",
        "city": "Garching"
    }
}

Language rules

• always
  • var
  • ;
• no
  • eval,with
  • modification of builtin Objects (Object.prototype)
• use sparingly
  • for-in (only for map/hash/associative arrays)
  • this (constructor, methods assignment)

Style tips

• C++/Java rules
  • functionNamesLikeThis, variableNamesLikeThis, ClassNamesLikeThis
  • function () {
• name your anounymous functions ➙ debugging
• avoid new Object (➙ {}) && new Array(➙ [])

➙ style guides

BE CONSISTENT

Iterators

Simple for loop

for(var i = 0; i < arr.length; i++){
    console.log(arr[i]);
}

forEach

arr.forEach(function(entry){
    console.log(entry);
});

for-in

for(var key in arr){
    console.log(arr[key]);
}

Attention:

for-in

• slow
• enumerates all the properties on the prototype chain
• only use it for dicts

if (arr.hasOwnProperty(key){

}

Iterators

Other control constructs

Closures

Scope

Scope tricks

• bind the scope

method.bind(instance);

CS / ES6: =>

• save the scope

function(){
    var self = this;
    foo.on("click", function(evt){
        console.log(this,self);
    }
}

Hoisting

x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;                     // Display x in the element

var x; // Declare x

(only for var declarations)

Prototyping

Mixins