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)
}
						
  1. After (1) the parent function return and it finnished.
  2. 100ms later inner is called and "value" is still available (value=2)
  3. 100ms later inner is called and "value" is still available (value=3)

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!