Core concepts-javascript

JavaScript – Core Concepts

prajwala@azrisolutions.com

Azri

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

Azri

‘Me’

My village
HUZURABAD

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 inspired
by 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...

LiveScript
became
JavaScript
became
ECMAScript (Standard*)

Azri

Misunderstandings...

The name “Java” Prefix
Lisp in C's clothing
Design errors
Poor implementation
Insufficient literature
Mostly adopted by amateurs

Azri

Is JavaScript Object Oriented?

Azri

Think about this...

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

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 Initializers
var 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

Array
Boolean
Date
Function
Math
Number
RegExp
String
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

Inheritance
function Manager(id, name) {
function Employee(id) {
this.id = id;
this.id = id;
this.name = name;
}
}
Employee.prototype.toString = Manager.prototype = new
function () { Employee();
return "Employee Id " + Manager.prototype.test =
this.id; function (name) {
}; return this.name === name;
};

Var mark = new Manager(1, 'Foo');
Mark.toString();
mark.test('foo');
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

invocation
There 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

slow
var digit_name = function (n) {
'three', 'four', 'five',
'six',
return names[n];
};
Azri

closure
var digit_name = (function () {
'three', 'four', 'five', 'six',
return function (n) {
return names[n];
};
}());
Azri

closure
function 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/0
596101996/wrrrldwideweb
Azri

Core concepts-javascript

Recommended

More Related Content

What's hot (20)

Similar to Core concepts-javascript (20)

Recently uploaded (20)

Core concepts-javascript