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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
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