Introducing RaveJS: Spring Boot concepts for JavaScript applications
Core concepts-javascript
-
Upload
prajwala-manchikatla -
Category
Technology
-
view
1.225 -
download
2
description
Transcript of Core concepts-javascript
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? :)