Your SlideShare is downloading. ×
Core concepts-javascript
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Core concepts-javascript


Published on

Published in: Technology

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. JavaScript – Core Concepts Azri
  • 2. AGENDA Me and my company JavaScript history Misunderstandings about JavaScript Core Concepts Questions ????? Azri
  • 3. ‘Me’ My village HUZURABADAzri
  • 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. Once upon a time......there was... Azri
  • 6. Jim was inspired by the UI of... Azri
  • 7. So, Jim met Brendan...So in 1995, Brendan Eich built a language called Livescript Azri
  • 8. Livescript?Java + Scheme + Self Azri
  • 9. In time... LiveScript became JavaScript becameECMAScript (Standard*) Azri
  • 10. Misunderstandings... The name “Java” Prefix Lisp in Cs clothing Design errors Poor implementation Insufficient literatureMostly adopted by amateurs Azri
  • 11. Is JavaScript Object Oriented? Azri
  • 12. Think about this...JavaScript is all about objects, more object oriented than Java. Azri
  • 13. Get, Set and Delete get object[expression] set = value;object[expression] = value; delete delete delete object[expression] Azri
  • 14. Creating New Objects Using Object Initializersvar obj = {property_1: value_1, 2: value_2, "property_n": value_n }; Azri
  • 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. 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. Predefined Core Objects Array Boolean Date Function Math Number RegExp String Azri
  • 18. Classes versus Prototype Azri
  • 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. Inheritance function Manager(id, name) {function Employee(id) { = id; = id; = name;} }Employee.prototype.toString = Manager.prototype = new function () { Employee(); return "Employee Id " + Manager.prototype.test =; function (name) {}; return === name; }; Var mark = new Manager(1, Foo); Mark.toString(); mark.test(foo); Azri
  • 21. Function Azri
  • 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. 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. 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. Two Pseudo Parameters arguments this Azri
  • 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. 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. 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. 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. 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. 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. 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. closurefunction fade(id) { var dom = document.getElementById(id), level = 1; function step() { var h = level.toString(16); = #FFFF + h + h; if (level < 15) { level += 1; setTimeout(step, 100); } } setTimeout(step, 100);} Azri
  • 34. References us/library/hbxc2t98.aspx 596101996/wrrrldwideweb Azri
  • 35. Questions? :) Azri