JavaScript – Core Concepts  prajwala@azrisolutions.com            Azri
AGENDA  Me and my company  JavaScript history  Misunderstandings about JavaScript  Core Concepts  Questions ?????    ...
‘Me’       My village       HUZURABADAzri
More about ‘Me’• I build applications on Drupal• I am an active contributor of code on  Drupal, jQuery and PHP communities...
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       becameECMAScript (Standard*)         Azri
Misunderstandings...  The name “Java” Prefix    Lisp in Cs clothing       Design errors   Poor implementation   Insufficie...
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...
Creating New Objects   Using Object Initializersvar obj = {property_1: value_1,                    2: value_2,         "pr...
Creating New Objects                 Using Constructor Functionfunction car(make, model, year) {    this.make = make;    t...
Object ReferenceObjects can be passed as arguments to   functions, and can be returned by               functions.   Objec...
Predefined Core Objects        Array       Boolean         Date       Function         Math       Number       RegExp     ...
Classes versus Prototype         Azri
Working with Prototype       Make an object that you like.Create new instances that inherit from that                  obj...
Inheritance                                       function Manager(id, name) {function Employee(id) {                     ...
Function Azri
Function           Function Expression   Var foo = function foo(arg1, arg2) {}     Var foo = function(arg1, arg2) {}var el...
Scope • In JavaScript, {blocks} do not have                  scope.     • Only functions have scope.• Variables defined in...
Return Statement               return expression;                         or                     return;  • If there is no...
Two Pseudo Parameters     arguments        this        Azri
arguments• When a function is invoked, in addition to its parameters, it also gets a special parameter                  ca...
this    • The this parameter contains a   reference to the object of invocation. • this allows a method to know what      ...
invocation    The ( ) suffix operator surrounding zero or more    comma separated arguments.   The arguments will be bou...
invocation    There are four ways to call a function:• Function form  • functionObject(arguments)• Method form  • thisObje...
globalvar names = [zero, one, two,              three, four, five, six,              seven, eight, nine];var digit_name = ...
slowvar digit_name = function (n) {    var names = [zero, one, two,                 three, four, five,                 six...
closurevar digit_name = (function () {    var names = [zero, one, two,                  three, four, five, six,           ...
closurefunction fade(id) {    var dom = document.getElementById(id),    level = 1;    function step() {        var h = lev...
Referenceshttps://developer.mozilla.org/en/JavaScript      http://msdn.microsoft.com/en-          us/library/hbxc2t98.aspx...
Questions? :)    Azri
Core concepts-javascript
Core concepts-javascript
Upcoming SlideShare
Loading in...5
×

Core concepts-javascript

1,598

Published on

Published in: Technology
2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
1,598
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
137
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

Core concepts-javascript

  1. 1. JavaScript – Core Concepts prajwala@azrisolutions.com Azri
  2. 2. AGENDA Me and my company JavaScript history Misunderstandings about JavaScript Core Concepts Questions ????? Azri
  3. 3. ‘Me’ My village HUZURABADAzri
  4. 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
  5. 5. Once upon a time......there was... Azri
  6. 6. Jim was inspired by the UI of... Azri
  7. 7. So, Jim met Brendan...So in 1995, Brendan Eich built a language called Livescript Azri
  8. 8. Livescript?Java + Scheme + Self Azri
  9. 9. In time... LiveScript became JavaScript becameECMAScript (Standard*) Azri
  10. 10. Misunderstandings... The name “Java” Prefix Lisp in Cs clothing Design errors Poor implementation Insufficient literatureMostly adopted by amateurs Azri
  11. 11. Is JavaScript Object Oriented? Azri
  12. 12. Think about this...JavaScript is all about objects, more object oriented than Java. Azri
  13. 13. Get, Set and Delete get object.name object[expression] set object.name = value;object[expression] = value; delete delete object.name delete object[expression] Azri
  14. 14. Creating New Objects Using Object Initializersvar obj = {property_1: value_1, 2: value_2, "property_n": value_n }; Azri
  15. 15. Creating New Objects Using Constructor Functionfunction 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
  16. 16. Object ReferenceObjects 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 trueonly if both operands are the same object Azri
  17. 17. Predefined Core Objects Array Boolean Date Function Math Number RegExp String Azri
  18. 18. Classes versus Prototype Azri
  19. 19. 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
  20. 20. 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
  21. 21. Function Azri
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. Two Pseudo Parameters arguments this Azri
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. globalvar 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. Referenceshttps://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
  35. 35. Questions? :) Azri
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×