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

Like this? Share it with your network

Share

Core concepts-javascript

on

  • 1,774 views

 

Statistics

Views

Total Views
1,774
Views on SlideShare
1,655
Embed Views
119

Actions

Likes
0
Downloads
130
Comments
2

4 Embeds 119

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Core concepts-javascript Presentation 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