The document provides an overview of JavaScript core concepts including: - A brief history of JavaScript originating from LiveScript and becoming ECMAScript. - Core misunderstandings about JavaScript being object-oriented and prototype-based. - Key concepts like objects, functions, scope, 'this', arguments, invocation, and closures. - How functions work with parameters, return values, and different invocation styles. - Global versus function scope and how closures allow accessing outer function variables. - Resources for further reading on JavaScript fundamentals.

1. JavaScript – Core Concepts
prajwala@azrisolutions.com
Azri

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

3. ‘Me’
My village
HUZURABAD
Azri

4. 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

6. Once upon a time...
...there was...
Azri

8. Jim was inspired
by the UI of...
Azri

9. So, Jim met Brendan...
So in 1995, Brendan
Eich built a
language called
Livescript
Azri

10. Livescript?
Java + Scheme + Self
Azri

11. In time...
LiveScript
became
JavaScript
became
ECMAScript (Standard*)
Azri

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

13. Is JavaScript Object Oriented?
Azri

14. Think about this...
JavaScript is all about objects,
more object oriented than Java.
Azri

15. Get, Set and Delete
get
object.name
object[expression]
set
object.name = value;
object[expression] = value;
delete
delete object.name
delete object[expression]
Azri

16. Creating New Objects
Using Object Initializers
var obj = {property_1: value_1,
2: value_2,
"property_n": value_n };
Azri

17. 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

18. 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

19. Predefined Core Objects
Array
Boolean
Date
Function
Math
Number
RegExp
String
Azri

20. Classes versus Prototype
Azri

21. 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

22. 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

23. Function
Azri

24. 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

25. 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

26. 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

27. Two Pseudo Parameters
'arguments'
'this'
Azri

28. 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

29. 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

30. 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

31. 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

32. 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

33. slow
var 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

34. closure
var 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

35. 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

36. 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

37. Questions? :)
Azri