core concepts-javascript
DESCRIPTION
TRANSCRIPT
![Page 2: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/2.jpg)
Azri
AGENDA Me and my company JavaScript history Misunderstandings about JavaScript Core Concepts Questions ?????
![Page 3: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/3.jpg)
Azri
‘Me’
My villageHUZURABAD
![Page 4: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/4.jpg)
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
![Page 5: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/5.jpg)
![Page 6: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/6.jpg)
Azri
Once upon a time...
...there was...
![Page 7: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/7.jpg)
![Page 8: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/8.jpg)
Azri
Jim was inspiredby the UI of...
![Page 9: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/9.jpg)
Azri
So, Jim met Brendan...
So in 1995, Brendan Eich built a
language called Livescript
![Page 10: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/10.jpg)
Azri
Livescript?
Java + Scheme + Self
![Page 11: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/11.jpg)
Azri
In time...
LiveScriptbecame
JavaScriptbecame
ECMAScript (Standard*)
![Page 12: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/12.jpg)
Azri
Misunderstandings...
The name “Java” PrefixLisp in C's clothing
Design errorsPoor implementationInsufficient literature
Mostly adopted by amateurs
![Page 13: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/13.jpg)
Azri
Is JavaScript Object Oriented?
![Page 14: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/14.jpg)
Azri
JavaScript is all about objects, more object oriented than Java.
Think about this...
![Page 15: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/15.jpg)
Azri
Get, Set and Delete
get
object.name
object[expression]
set
object.name = value;
object[expression] = value;
delete
delete object.name
delete object[expression]
![Page 16: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/16.jpg)
Azri
Creating New Objects
Using Object Initializersvar obj = {property_1: value_1, 2: value_2,
"property_n": value_n };
![Page 17: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/17.jpg)
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();
![Page 18: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/18.jpg)
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
![Page 19: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/19.jpg)
Azri
Predefined Core Objects
ArrayBoolean
DateFunction
MathNumberRegExpString
![Page 20: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/20.jpg)
Azri
Classes versus Prototype
![Page 21: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/21.jpg)
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.
![Page 22: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/22.jpg)
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');
![Page 23: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/23.jpg)
Azri
Function
![Page 24: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/24.jpg)
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){}
![Page 25: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/25.jpg)
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
![Page 26: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/26.jpg)
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'.
![Page 27: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/27.jpg)
Azri
Two Pseudo Parameters
'arguments'
'this'
![Page 28: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/28.jpg)
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.
![Page 29: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/29.jpg)
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.
![Page 30: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/30.jpg)
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.
![Page 31: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/31.jpg)
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])
![Page 32: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/32.jpg)
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'
![Page 33: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/33.jpg)
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'
![Page 34: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/34.jpg)
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'
![Page 35: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/35.jpg)
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);
}
![Page 36: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/36.jpg)
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
![Page 37: Core concepts-javascript](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7b7074a795921278b45ce/html5/thumbnails/37.jpg)
Azri
Questions? :)