Azri

JavaScript – Core Concepts

prajwala@azrisolutions.com

Azri

AGENDA Me and my company JavaScript history Misunderstandings about JavaScript Core Concepts Questions ?????

Azri

‘Me’

My villageHUZURABAD

Azri

More about ‘Me’

• I build applications on Drupal• I am an active contributor of code on

Drupal, jQuery and PHP communities• One of my projects, a real-time

collaboration suite was showcased at TechCrunch 50 in SF

Azri

Once upon a time...

...there was...

Azri

Jim was inspiredby the UI of...

Azri

So, Jim met Brendan...

So in 1995, Brendan Eich built a

language called Livescript

Azri

Livescript?

Java + Scheme + Self

Azri

In time...

LiveScriptbecame

JavaScriptbecame

ECMAScript (Standard*)

Azri

Misunderstandings...

The name “Java” PrefixLisp in C's clothing

Design errorsPoor implementationInsufficient literature

Mostly adopted by amateurs

Azri

Is JavaScript Object Oriented?

Azri

JavaScript is all about objects, more object oriented than Java.

Think about this...

Azri

Get, Set and Delete

get

object.name

object[expression]

set

object.name = value;

object[expression] = value;

delete

delete object.name

delete object[expression]

Azri

Creating New Objects

Using Object Initializersvar obj = {property_1: value_1, 2: value_2,

"property_n": value_n };

Azri

Creating New Objects

Using Constructor Function

function car(make, model, year) {

this.make = make;

this.model = model;

this.year = year;

this.display = function() {return this.make+ “ - “ + this.model + “ - “ + this.year};

}

var mycar = new car("Eagle", "Talon TSi", 1993);

mycar.display();

Azri

Object Reference

Objects can be passed as arguments to functions, and can be returned by

functions.

Objects are passed by reference.

The === operator compares object references, not values. It returns true

only if both operands are the same object

Azri

Predefined Core Objects

ArrayBoolean

DateFunction

MathNumberRegExpString

Azri

Classes versus Prototype

Azri

Working with Prototype

Make an object that you like.

Create new instances that inherit from that object.

Customize the new objects.

Taxonomy and classification are not necessary.

Azri

Inheritancefunction Employee(id) {

this.id = id;

}

Employee.prototype.toString = function () {

return "Employee Id " + this.id;

};

function Manager(id, name) {

this.id = id;

this.name = name;

}

Manager.prototype = new Employee();

Manager.prototype.test = function (name) {

return this.name === name;

};

Var mark = new Manager(1, 'Foo');

Mark.toString();

mark.test('foo');

Azri

Function

Azri

Function

Function Expression

Var foo = function foo(arg1, arg2) {}

Var foo = function(arg1, arg2) {}

var ele = document.getElementById('link');

ele.onclick = function(event){}

Function Statement

Function foo(arg1, arg2){}

Azri

Scope

• In JavaScript, {blocks} do not have scope.

• Only functions have scope.

• Variables defined in a function are not visible outside of the function

Azri

Return Statement

return expression; or

return;• If there is no expression, then the

return value is undefined.• Except for constructors, whose default

return value is 'this'.

Azri

Two Pseudo Parameters

'arguments'

'this'

Azri

arguments

• When a function is invoked, in addition to its

parameters, it also gets a special parameter called arguments.

• It contains all of the arguments from the invocation.

• It is an array-like object.

• arguments.length is the number of arguments passed.

Azri

this

• The 'this' parameter contains a reference to the object of invocation.

• 'this' allows a method to know what object it is concerned with.

• 'this' allows a single function object to service many functions.

• 'this' is key to inheritance.

Azri

invocation

The ( ) suffix operator surrounding zero or more comma separated arguments.

The arguments will be bound to parameters. If a function is called with too many arguments,

the extra arguments are ignored. If a function is called with too few arguments,

the missing values will be undefined. There is no implicit type checking on the

arguments.

Azri

invocationThere are four ways to call a function:

• Function form

• functionObject(arguments)

• Method form

• thisObject.methodName(arguments)

• thisObject["methodName"](arguments)

• Constructor form

• new FunctionObject(arguments)

• Apply form

• functionObject.apply(thisObject,[arguments])

Azri

global

var names = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];var digit_name = function (n) { return names[n];};alert(digit_name(3)); // 'three'

Azri

slowvar digit_name = function (n) { var names = ['zero', 'one', 'two', 'three', 'four', 'five',

'six', 'seven', 'eight', 'nine']; return names[n];};alert(digit_name(3)); // 'three'

Azri

closurevar digit_name = (function () {

var names = ['zero', 'one', 'two',

'three', 'four', 'five', 'six',

'seven', 'eight', 'nine'];

return function (n) {

return names[n];

};

}());

alert(digit_name(3)); // 'three'

Azri

closurefunction fade(id) {

var dom = document.getElementById(id),

level = 1;

function step() {

var h = level.toString(16);

dom.style.backgroundColor = '#FFFF' + h + h;

if (level < 15) {

level += 1;

setTimeout(step, 100);

}

}

setTimeout(step, 100);

}

Azri

References

https://developer.mozilla.org/en/JavaScript

http://msdn.microsoft.com/en-us/library/hbxc2t98.aspx

http://javascript.crockford.com/

http://www.amazon.com/exec/obidos/ASIN/0596101996/wrrrldwideweb

Azri

Questions? :)