SlideShare uma empresa Scribd logo
1 de 37
Baixar para ler offline
JavaScript – Core Concepts

  prajwala@azrisolutions.com




            Azri
AGENDA

  Me and my company

  JavaScript history

  Misunderstandings about JavaScript

  Core Concepts

  Questions ?????




                 Azri
‘Me’




       My village
       HUZURABAD

Azri
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
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
       became
ECMAScript (Standard*)

         Azri
Misunderstandings...

  The name “Java” Prefix
    Lisp in C's clothing
       Design errors
   Poor implementation
   Insufficient literature
Mostly adopted by amateurs

          Azri
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] = value;
           delete
    delete object.name
 delete object[expression]
           Azri
Creating New Objects



   Using Object Initializers
var obj = {property_1: value_1,
                    2: value_2,
         "property_n": value_n };



              Azri
Creating New Objects

                 Using Constructor Function
function 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
Object Reference
Objects 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 true
only if both operands are the same object
                 Azri
Predefined Core Objects

        Array
       Boolean
         Date
       Function
         Math
       Number
       RegExp
        String
         Azri
Classes versus Prototype




         Azri
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
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
Function




 Azri
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
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
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
Two Pseudo Parameters



     'arguments'

        'this'




        Azri
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
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
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
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
global
var 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
slow
var 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
closure
var 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
closure
function 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
References
https://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
Questions? :)




    Azri

Mais conteúdo relacionado

Mais procurados

JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing Up
David Padbury
 

Mais procurados (20)

Advanced javascript
Advanced javascriptAdvanced javascript
Advanced javascript
 
Oojs 1.1
Oojs 1.1Oojs 1.1
Oojs 1.1
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScript
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScript
 
Prototype
PrototypePrototype
Prototype
 
Powerful JavaScript Tips and Best Practices
Powerful JavaScript Tips and Best PracticesPowerful JavaScript Tips and Best Practices
Powerful JavaScript Tips and Best Practices
 
Understanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG JuneUnderstanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG June
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
 
JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing Up
 
Anonymous functions in JavaScript
Anonymous functions in JavaScriptAnonymous functions in JavaScript
Anonymous functions in JavaScript
 
Swift で JavaScript 始めませんか? #iOSDC
Swift で JavaScript 始めませんか? #iOSDCSwift で JavaScript 始めませんか? #iOSDC
Swift で JavaScript 始めませんか? #iOSDC
 
Iphone course 1
Iphone course 1Iphone course 1
Iphone course 1
 
JavaScript Functions
JavaScript FunctionsJavaScript Functions
JavaScript Functions
 
Javascript Prototype Visualized
Javascript Prototype VisualizedJavascript Prototype Visualized
Javascript Prototype Visualized
 
Basic Javascript
Basic JavascriptBasic Javascript
Basic Javascript
 
Javascript tid-bits
Javascript tid-bitsJavascript tid-bits
Javascript tid-bits
 
Awesomeness of JavaScript…almost
Awesomeness of JavaScript…almostAwesomeness of JavaScript…almost
Awesomeness of JavaScript…almost
 
Ajaxworld
AjaxworldAjaxworld
Ajaxworld
 
Javascript foundations: Introducing OO
Javascript foundations: Introducing OOJavascript foundations: Introducing OO
Javascript foundations: Introducing OO
 
classes & objects in cpp overview
classes & objects in cpp overviewclasses & objects in cpp overview
classes & objects in cpp overview
 

Semelhante a Core concepts-javascript

Front end fundamentals session 1: javascript core
Front end fundamentals session 1: javascript coreFront end fundamentals session 1: javascript core
Front end fundamentals session 1: javascript core
Web Zhao
 
JavaScript (without DOM)
JavaScript (without DOM)JavaScript (without DOM)
JavaScript (without DOM)
Piyush Katariya
 
LinkedIn TBC JavaScript 100: Functions
 LinkedIn TBC JavaScript 100: Functions LinkedIn TBC JavaScript 100: Functions
LinkedIn TBC JavaScript 100: Functions
Adam Crabtree
 
11. session 11 functions and objects
11. session 11   functions and objects11. session 11   functions and objects
11. session 11 functions and objects
Phúc Đỗ
 
Taxonomy of Scala
Taxonomy of ScalaTaxonomy of Scala
Taxonomy of Scala
shinolajla
 

Semelhante a Core concepts-javascript (20)

25-functions.ppt
25-functions.ppt25-functions.ppt
25-functions.ppt
 
Front end fundamentals session 1: javascript core
Front end fundamentals session 1: javascript coreFront end fundamentals session 1: javascript core
Front end fundamentals session 1: javascript core
 
JavaScript (without DOM)
JavaScript (without DOM)JavaScript (without DOM)
JavaScript (without DOM)
 
The JavaScript Programming Language
The JavaScript Programming LanguageThe JavaScript Programming Language
The JavaScript Programming Language
 
JS OO and Closures
JS OO and ClosuresJS OO and Closures
JS OO and Closures
 
LinkedIn TBC JavaScript 100: Functions
 LinkedIn TBC JavaScript 100: Functions LinkedIn TBC JavaScript 100: Functions
LinkedIn TBC JavaScript 100: Functions
 
11. session 11 functions and objects
11. session 11   functions and objects11. session 11   functions and objects
11. session 11 functions and objects
 
Say It With Javascript
Say It With JavascriptSay It With Javascript
Say It With Javascript
 
CoffeeScript - A Rubyist's Love Affair
CoffeeScript - A Rubyist's Love AffairCoffeeScript - A Rubyist's Love Affair
CoffeeScript - A Rubyist's Love Affair
 
JavaScript For CSharp Developer
JavaScript For CSharp DeveloperJavaScript For CSharp Developer
JavaScript For CSharp Developer
 
Chapter iii(advance function)
Chapter iii(advance function)Chapter iii(advance function)
Chapter iii(advance function)
 
JavaScript in 2016
JavaScript in 2016JavaScript in 2016
JavaScript in 2016
 
JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)
 
Taxonomy of Scala
Taxonomy of ScalaTaxonomy of Scala
Taxonomy of Scala
 
Dlr
DlrDlr
Dlr
 
Advance JS and oop
Advance JS and oopAdvance JS and oop
Advance JS and oop
 
Swift, functional programming, and the future of Objective-C
Swift, functional programming, and the future of Objective-CSwift, functional programming, and the future of Objective-C
Swift, functional programming, and the future of Objective-C
 
Scala for Java Programmers
Scala for Java ProgrammersScala for Java Programmers
Scala for Java Programmers
 
Typescript barcelona
Typescript barcelonaTypescript barcelona
Typescript barcelona
 
Metaprogramming in ES6
Metaprogramming in ES6Metaprogramming in ES6
Metaprogramming in ES6
 

Último

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Último (20)

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 

Core concepts-javascript

  • 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 HUZURABAD Azri
  • 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.
  • 6. Once upon a time... ...there was... Azri
  • 7.
  • 8. Jim was inspired by the UI of... Azri
  • 9. So, Jim met Brendan... So in 1995, Brendan Eich built a language called Livescript Azri
  • 11. In time... LiveScript became JavaScript became ECMAScript (Standard*) Azri
  • 12. Misunderstandings... The name “Java” Prefix Lisp in C's clothing Design errors Poor implementation Insufficient literature Mostly adopted by amateurs Azri
  • 13. Is JavaScript Object Oriented? Azri
  • 14. Think about this... JavaScript is all about objects, more object oriented than Java. Azri
  • 15. Get, Set and Delete get object.name object[expression] set object.name = value; object[expression] = value; delete delete object.name delete object[expression] Azri
  • 16. Creating New Objects Using Object Initializers var obj = {property_1: value_1, 2: value_2, "property_n": value_n }; Azri
  • 17. Creating New Objects Using Constructor Function function 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
  • 18. Object Reference Objects 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 true only if both operands are the same object Azri
  • 19. Predefined Core Objects Array Boolean Date Function Math Number RegExp String Azri
  • 21. 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
  • 22. 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
  • 24. 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
  • 25. 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
  • 26. 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
  • 27. Two Pseudo Parameters 'arguments' 'this' Azri
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. 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
  • 32. global var 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
  • 33. slow var 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
  • 34. closure var 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
  • 35. closure function 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
  • 36. References https://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