Core concepts-javascript
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
1,845
On Slideshare
1,719
From Embeds
126
Number of Embeds
4

Actions

Shares
Downloads
130
Comments
2
Likes
0

Embeds 126

http://pflame.co.in 120
http://www.linkedin.com 4
http://www.pflame.co.in 1
https://www.linkedin.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 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.name object[expression] set object.name = value;object[expression] = value; delete delete object.name 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) { 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. 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); dom.style.backgroundColor = #FFFF + h + h; if (level < 15) { level += 1; setTimeout(step, 100); } } setTimeout(step, 100);} Azri
  • 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. Questions? :) Azri