SlideShare une entreprise Scribd logo
1  sur  37
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

Advanced javascript
Advanced javascriptAdvanced javascript
Advanced javascriptDoeun KOCH
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScriptDonald Sipe
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScriptJulie Iskander
 
Powerful JavaScript Tips and Best Practices
Powerful JavaScript Tips and Best PracticesPowerful JavaScript Tips and Best Practices
Powerful JavaScript Tips and Best PracticesDragos Ionita
 
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 JuneDeepu S Nath
 
JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing UpDavid Padbury
 
Swift で JavaScript 始めませんか? #iOSDC
Swift で JavaScript 始めませんか? #iOSDCSwift で JavaScript 始めませんか? #iOSDC
Swift で JavaScript 始めませんか? #iOSDCTomohiro Kumagai
 
JavaScript Functions
JavaScript FunctionsJavaScript Functions
JavaScript FunctionsColin DeCarlo
 
Javascript Prototype Visualized
Javascript Prototype VisualizedJavascript Prototype Visualized
Javascript Prototype Visualized军 沈
 
Basic Javascript
Basic JavascriptBasic Javascript
Basic JavascriptBunlong Van
 
Awesomeness of JavaScript…almost
Awesomeness of JavaScript…almostAwesomeness of JavaScript…almost
Awesomeness of JavaScript…almostQuinton Sheppard
 
Javascript foundations: Introducing OO
Javascript foundations: Introducing OOJavascript foundations: Introducing OO
Javascript foundations: Introducing OOJohn Hunter
 
classes & objects in cpp overview
classes & objects in cpp overviewclasses & objects in cpp overview
classes & objects in cpp overviewgourav kottawar
 

Tendances (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
 

Similaire à 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 coreWeb 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: FunctionsAdam Crabtree
 
11. session 11 functions and objects
11. session 11   functions and objects11. session 11   functions and objects
11. session 11 functions and objectsPhúc Đỗ
 
CoffeeScript - A Rubyist's Love Affair
CoffeeScript - A Rubyist's Love AffairCoffeeScript - A Rubyist's Love Affair
CoffeeScript - A Rubyist's Love AffairMark
 
JavaScript For CSharp Developer
JavaScript For CSharp DeveloperJavaScript For CSharp Developer
JavaScript For CSharp DeveloperSarvesh Kushwaha
 
Chapter iii(advance function)
Chapter iii(advance function)Chapter iii(advance function)
Chapter iii(advance function)Chhom Karath
 
JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)Eduard Tomàs
 
JavaScript in 2016
JavaScript in 2016JavaScript in 2016
JavaScript in 2016Codemotion
 
Taxonomy of Scala
Taxonomy of ScalaTaxonomy of Scala
Taxonomy of Scalashinolajla
 
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-CAlexis Gallagher
 
Scala for Java Programmers
Scala for Java ProgrammersScala for Java Programmers
Scala for Java ProgrammersEric Pederson
 

Similaire à 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 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)
 
JavaScript in 2016
JavaScript in 2016JavaScript in 2016
JavaScript in 2016
 
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
 

Dernier

So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 

Dernier (20)

So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 

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