Javascript

Quick introduction to the language

Created by Camel Aissani / @camelaissani Inspired by Douglas Crockford

JavaScript !== Java

JavaScript is not Java or a subset af Java but it is a complete programming language.

The little story

In 1992 (James Gosling at Sun and FirstPerson)

C++++ -> Oak -> Java First demonstrated with HotJava browser (Applet)

In 1995 (Brendan Eich at Netscape)

Mocha -> LiveScript First language in the web browser/ web server

Finally Sun and Netscape made an alliance to escape microsoft and renamed LiveScript to JavaScript

Key ideas

• Load and go delivery (not compiled / embedded in web pages)

• Loose typing (very controversal)

• Objects as general containers

• Prototypal inheritance (not class inheritance)

• Lambda (function as first class objects)

• Linkage though global variables

Values

Number

String

Boolean

null

undefined

Object

Statements

if

switch

while

do

for

break

continue

return

try / throw

function

var

Falsy values

• false
• null
• undefined
• ""
• 0
• NaN

Truthy values

All other values (including all objects)

Scope

{bocks} do not have scope

only function have scope

vars defined inside a function are not visible outside of the function

Object

Unification of Object and Hashtable (member is pair of key/value) members can be accessed:

myObject.firstname = 'Douglas';
myObject['lastname'] = 'Crockford';

Create an object

var myObject1 = new Object();
var myObject2 = Object(Object.prototype);

// literal notation:
var myObject3 = {};
var myObkect4 = {firstname: 'Douglas', lastname:'Crockford'}

//Maker function
var myObject5 = maker('Douglas', 'Crockford');

function maker(firstname, lastname) {
	var it = {};
	it.firstname = firstname;
	it.lastname = lastname;
	return it;
}

An object can contain an object as member

var myObject6 = {
	firstname: 'Douglas', 
	lastname:'Crockford',
	friend: {
		firstname: 'Camel', 
		lastname:'Aissani'
	}
}

Augmentation

At any time you can add new members to any object by simple assignment

myObject.format.colorModel = "red";

Delete

Members can be remove from an object with the delete operator

delete myObject['name'];
delete myObject.firstname;

Linkage

Linkage provides a simple inheritance mechanism between objects.

An object contains a secret pointer to another object.

All objects are linked directly or indirectly to Object.prototype.

Object.prototype provides some basic methods. ex: hasOwnProperty(name) but no toString or equals methods

Linkage sample

var myOldObject = {
	name:'Douglas Crockford', 
	grade: 'A', 
	level: 3
};

var myNewObject = Object(myOldObject); 
myNewObject.name = 'Camel Aissani';
myNewObject.level += 1;
myNewObject.language = 'french';

Results

• name -> Camel Aissani
• grade -> A (myOldObject.grade)
• level -> 4 (myOldObject.level + 1 )
• language -> (myNewObject.language)

Prototypal inheritance

Object languages have classes, methods, constructors and modules.

JavaScript has only functions that doing the job but differently.

Functions

Functions are objects and can contain members

var myObject = function name(parameters) {

};

parameters can be values, objects, function

function can be defined in function:

function name(parameters) {

	function foo(otherParameters) {
		// scope of the parent function is available here
		// Called Static Scoping / Lexical Scoping
	}
}

Closure

The scope of the parent function from a inner function is still available even after the parent function has returned.

function parent() {
	var value = 1;

	function inner() {
		value++;
		if (value===3) {
			return;
		}
		setTimeout(inner, 100);
	}

	setTimeout(inner, 100); // (1)
}

Function call types

Function can be called as function form:

functionObject(parameters)

As method form:

thisObject.methodName(parameters)

As constructor form:

new functionObject(parameters)

As apply form:

functionObject.apply(thisObject, [parameters])

Inside a function we have two integrated variables.

• "this" access to all the members / functions of the object
• "arguments" (array of all parameters)

Arrays

Array inherits from Object

Indexes are strings (int indexed are converted into strings)

Length is dynamic

Create array:

var myArray = new Array();
var myArray = [];
var myArray = ['blue', 'yellow', 'red'];

Update an item:
myArray[1] = 'gray';

Add an item:
myArray[3] = 'pink';

Read an item:

• 'pink' -> (myArray[3])

Delete

Delete an element in array

var myArray = ['blue', 'yellow', 'red'];
delete myArray[1];

// ['blue', undefined, 'red']

myArraysplice(1,1);

// ['blue', 'red']

Global object

Container for all global variables and all built-in objects (In browsers: window, document, console...)

Any variables declared without var is considered as global by default.

Then global variables are evil (cooperating applications can clobber each other)

Namespace / Encapsulate

Object is a separate namespace.

Encapsulation with function

MYLIB = function() {
	// define private variables and functions
	return {
		// here the public function
		foo1 : function() {},
		foo2: function() {}
	};
}();

Live coding

Thank you!