SlideShare une entreprise Scribd logo
1  sur  52
Télécharger pour lire hors ligne
JavaScript



WebDU 2009 · Dmitry Baranovskiy
E very object (including host       objects) must implement the
           e)) and ((Class)) propertie      s and the ((Get)), ((Put)),
((Prototyp
           t)), ((HasProperty)), ((Dele      te)), and ((DefaultValue))
((CanPu
           . (Note, however, that the ((D       efaultValue)) method may,
methods                                                  exception.) The value
 for some objects    , simply throw a TypeError
            Prototype)) property must be      either an object or null, and
 of the ((
            Prototype)) chain must have       finite length (that is, starting
 every ((
             y object, recursively access     ing the ((Prototype)) property
  from an
            entually lead to a null val         ue). Whether or not a native
  must ev
            an have a host object as its       ((Prototype)) depends on the
  object c
  implementation.
       The value      of the ((Class)) property
   is defined by        this specification for every
   kind of built-i   n object. The value of the
    ((Class)) prop    erty of a host object may
    be any value     , even a value used by
E very object (including host       objects) must implement the
           e)) and ((Class)) propertie      s and the ((Get)), ((Put)),
((Prototyp
           t)), ((HasProperty)), ((Dele      te)), and ((DefaultValue))
((CanPu
           . (Note, however, that the ((D       efaultValue)) method may,
methods                                                  exception.) The value
 for some objects    , simply throw a TypeError
            Prototype)) property must be      either an object or null, and
 of the ((
            Prototype)) chain must have       finite length (that is, starting
 every ((
  from an
  must ev
           It is a bit “cryptic”
             y object, recursively access
            entually lead to a null val
                                              ing the ((Prototype)) property
                                                ue). Whether or not a native
            an have a host object as its       ((Prototype)) depends on the
  object c
  implementation.
       The value      of the ((Class)) property
   is defined by        this specification for every
   kind of built-i   n object. The value of the
    ((Class)) prop    erty of a host object may
    be any value     , even a value used by
“ECMAScript does not contain proper
 classes such as those in C++, Smalltalk, or
 Java, but rather, supports constructors
 which create objects by executing code
 that allocates storage for the objects and
 initialises all or part of them by assigning
 initial values to their properties.”

                            ECMAScript Specification
Basic Types
Undefined    Null    Boolean


Number     String   Object
typeof
typeof

Undefined quot;undefinedquot;

    Null quot;objectquot;

 Number quot;numberquot;

 Boolean quot;booleanquot;

   String quot;stringquot;

  Object quot;objectquot;
to Number

Undefined NaN

    Null 0

 Number —

 Boolean false ! 0, true ! 1

   String parsing

  Object .valueOf()
to Boolean

Undefined !quot;#$%

     Null !quot;#$%

 Number &'())(*+*,(-(.+/01(2(3451

 Boolean 6

   String 77(-(.+/01(2(3451

  Object 89:%
to String

Undefined quot;undefinedquot;

    Null quot;nullquot;

 Number quot;5quot;

 Boolean quot;falsequot; || quot;truequot;

   String —

  Object .toString()
to Object

Undefined exception!

    Null exception!

 Number new Number(v)

 Boolean new Boolean(v)

   String new String(v)

  Object Object
On the fly
5 + 4 + quot;pxquot;
quot;$quot; + 1 + 2
quot;4quot; / quot;2quot;
quot;$quot; + 1 - 2
quot;webduquot;.length
typeof 5
typeof quot;5quot;
typeof {property: value}
typeof null
typeof undefined
typeof [1, 2, 3]
typeof (4 - quot;pxquot;)
5 + 4 + quot;pxquot;               quot;9pxquot;
quot;$quot; + 1 + 2                quot;$12quot;
quot;4quot; / quot;2quot;                  2
quot;$quot; + 1 - 2                NaN
quot;webduquot;.length             5
typeof 5                   quot;numberquot;
typeof quot;5quot;                 quot;stringquot;
typeof {property: value}   quot;objectquot;
typeof null                quot;objectquot;
typeof undefined           quot;undefinedquot;
typeof [1, 2, 3]           quot;objectquot;
typeof (4 - quot;pxquot;)          quot;numberquot;
Object Properties
ReadOnly     DontEnum


DontDelete    Internal
for in
var a = {
    x: 12,
    y: 23,
    r: 10,
    draw: function () {/*...*/}
};


for (var property in a) {
    alert(quot;a.quot; + property + quot; = quot; + a[property]);
}
var a = {
    x: 12,
    y: 23,
    r: 10,
    draw: function () {/*...*/}
};


for (var property in a) {
    alert(quot;a.quot; + property + quot; = quot; + a[property]);
}
Function
 Array
  Date
RegExp
Function
var y = 1;
function x() {
    var y = 2;
    return ++y;
}

var z = function () {
    return ++y;
};
function x() {
    var y = 2;
    return function () {
        return ++y;
    };
}

var a = x();
a();
a();
arguments
function add(a, b) {
    return a + b;
}

add(4, 5); // = 9
add(4, 5, 6, 7, 8, 9) // = 39

function add() {
    var sum = 0;
    for (var i = 0, ii = arguments.length; i < ii; i++) {
        sum +=+ arguments[i];
    }
    return sum;
}
Scope & “this”
function is(it) {
    alert(this + quot; is quot; + it);
}

is(quot;globalquot;);

is.call(5, quot;numberquot;);

is.apply(quot;Aquot;, [quot;stringquot;]);

alert.is = is;

alert.is(quot;functionquot;);
Variable declaration
alert(b);
1   b = 1;

    alert(a);
2   var a = 1;

    (function () {
3       var x = 1;
    })();
    alert(x);

    (function () {
4       y = 1;
    })();
    alert(y);
Function declaration
function x(a) {
1       return a && x(--a);
    }

    var x = function (a) {
2       return a && x(--a);
    };

    setTimeout(function (a) {
3       return a && arguments.callee(--a);
    }, 1000);

    var x = function y(a) {
4       return a && y(--a);
    };

    setTimeout(function y(a) {
5       return a && y(--a);
    }, 1000);
Arrays declaration
var a = new Array();

var a = new Array(3);

var a = [];

var a = [undefined, undefined, undefined];

var a = [1, 2, 3, 4];
Object declaration
     (JSON)
var a = new Object();

var a = {};

var a = {x: 10, y: 15};

var a = {
    x: 10,
    name: quot;objectquot;,
    quot;font-stylequot;: quot;italicquot;,
    getHeight: function () {/*...*/},
    points: [1, 2, 3],
    child: {x: 10, y: 15}
};
OOP
“Object Owns Prototype”
var mouse = {
1       name: quot;Mikequot;,
        voice: function () { alert(quot;Squik!quot;); }
    };

    var o = new Object();
2   o.name = quot;Mikequot;;
    o.voice = function () { alert(quot;Squik!quot;); };

    var O = function () {
3       this.name = quot;Mikequot;;
        this.voice = function () { alert(quot;Squik!quot;); };
    };
    var o = new O();

    var O = function () {};
4   O.prototype.name = quot;Mikequot;;
    O.prototype.voice = function () { alert(quot;Squik!quot;); };
    var o = new O();
Inheritance
Inheritance
Delegation
Classic Model


              Class




                         Object
              Class




Object       Object      Object
Prototypal Model




                    Object




Object     Object   Object
Object   Object
// Sharing
function Parent(value) {
    this.value = value;
}
Parent.prototype.getValue = function () {
    return this.value;
};
function A(value) {
    this.value = value + 1;
}
A.prototype = new Parent();

function B(value) {
    this.value = value * 2;
}
B.prototype = new Parent();

alert((new A(5)).getValue()); // 6
alert((new B(5)).getValue()); // 10
// Sharing
function A(value) {
    this.value = value + 1;
}

function B(value) {
    this.value = value * 2;
}
A.prototype.getValue = B.prototype.getValue = function ()
{
    return this.value;
};

alert((new A(5)).getValue()); // 6
alert((new B(5)).getValue()); // 10
Array
Date
RegExp
Thank You

Contenu connexe

Tendances

Javascript engine performance
Javascript engine performanceJavascript engine performance
Javascript engine performanceDuoyi Wu
 
Fun with Lambdas: C++14 Style (part 2)
Fun with Lambdas: C++14 Style (part 2)Fun with Lambdas: C++14 Style (part 2)
Fun with Lambdas: C++14 Style (part 2)Sumant Tambe
 
Lo Mejor Del Pdc2008 El Futrode C#
Lo Mejor Del Pdc2008 El Futrode C#Lo Mejor Del Pdc2008 El Futrode C#
Lo Mejor Del Pdc2008 El Futrode C#Juan Pablo
 
Memory Management with Java and C++
Memory Management with Java and C++Memory Management with Java and C++
Memory Management with Java and C++Mohammad Shaker
 
Let's go Developer 2011 sendai Let's go Java Developer (Programming Language ...
Let's go Developer 2011 sendai Let's go Java Developer (Programming Language ...Let's go Developer 2011 sendai Let's go Java Developer (Programming Language ...
Let's go Developer 2011 sendai Let's go Java Developer (Programming Language ...Uehara Junji
 
Scala is java8.next()
Scala is java8.next()Scala is java8.next()
Scala is java8.next()daewon jeong
 
constructors and destructors in c++
constructors and destructors in c++constructors and destructors in c++
constructors and destructors in c++HalaiHansaika
 
Functional Programming Patterns for the Pragmatic Programmer
Functional Programming Patterns for the Pragmatic ProgrammerFunctional Programming Patterns for the Pragmatic Programmer
Functional Programming Patterns for the Pragmatic ProgrammerRaúl Raja Martínez
 
科特林λ學
科特林λ學科特林λ學
科特林λ學彥彬 洪
 
What\'s New in C# 4.0
What\'s New in C# 4.0What\'s New in C# 4.0
What\'s New in C# 4.0Eyal Vardi
 
Easy Going Groovy 2nd season on DevLOVE
Easy Going Groovy 2nd season on DevLOVEEasy Going Groovy 2nd season on DevLOVE
Easy Going Groovy 2nd season on DevLOVEUehara Junji
 
Java Simple Programs
Java Simple ProgramsJava Simple Programs
Java Simple ProgramsUpender Upr
 

Tendances (20)

Java Generics
Java GenericsJava Generics
Java Generics
 
C++11
C++11C++11
C++11
 
Javascript engine performance
Javascript engine performanceJavascript engine performance
Javascript engine performance
 
Fun with Lambdas: C++14 Style (part 2)
Fun with Lambdas: C++14 Style (part 2)Fun with Lambdas: C++14 Style (part 2)
Fun with Lambdas: C++14 Style (part 2)
 
Lo Mejor Del Pdc2008 El Futrode C#
Lo Mejor Del Pdc2008 El Futrode C#Lo Mejor Del Pdc2008 El Futrode C#
Lo Mejor Del Pdc2008 El Futrode C#
 
Operator overloading
Operator overloadingOperator overloading
Operator overloading
 
Memory Management with Java and C++
Memory Management with Java and C++Memory Management with Java and C++
Memory Management with Java and C++
 
Java Generics
Java GenericsJava Generics
Java Generics
 
Let's go Developer 2011 sendai Let's go Java Developer (Programming Language ...
Let's go Developer 2011 sendai Let's go Java Developer (Programming Language ...Let's go Developer 2011 sendai Let's go Java Developer (Programming Language ...
Let's go Developer 2011 sendai Let's go Java Developer (Programming Language ...
 
Java 5 Features
Java 5 FeaturesJava 5 Features
Java 5 Features
 
Scala is java8.next()
Scala is java8.next()Scala is java8.next()
Scala is java8.next()
 
constructors and destructors in c++
constructors and destructors in c++constructors and destructors in c++
constructors and destructors in c++
 
Functional Programming Patterns for the Pragmatic Programmer
Functional Programming Patterns for the Pragmatic ProgrammerFunctional Programming Patterns for the Pragmatic Programmer
Functional Programming Patterns for the Pragmatic Programmer
 
科特林λ學
科特林λ學科特林λ學
科特林λ學
 
What\'s New in C# 4.0
What\'s New in C# 4.0What\'s New in C# 4.0
What\'s New in C# 4.0
 
Day 1
Day 1Day 1
Day 1
 
Easy Going Groovy 2nd season on DevLOVE
Easy Going Groovy 2nd season on DevLOVEEasy Going Groovy 2nd season on DevLOVE
Easy Going Groovy 2nd season on DevLOVE
 
Memory management in c++
Memory management in c++Memory management in c++
Memory management in c++
 
Java generics final
Java generics finalJava generics final
Java generics final
 
Java Simple Programs
Java Simple ProgramsJava Simple Programs
Java Simple Programs
 

En vedette

Inside view crack-the-code-of-sales-and-marketing-alignment-report
Inside view crack-the-code-of-sales-and-marketing-alignment-reportInside view crack-the-code-of-sales-and-marketing-alignment-report
Inside view crack-the-code-of-sales-and-marketing-alignment-reportInsideView
 
D:\Documents And Settings\Administrador\Mis Documentos\Como Cuidar El Medio A...
D:\Documents And Settings\Administrador\Mis Documentos\Como Cuidar El Medio A...D:\Documents And Settings\Administrador\Mis Documentos\Como Cuidar El Medio A...
D:\Documents And Settings\Administrador\Mis Documentos\Como Cuidar El Medio A...Esc. 54
 
Semin. De Postgrado Inform
Semin. De Postgrado InformSemin. De Postgrado Inform
Semin. De Postgrado InformPucca69
 
Actividades de educación_psicomotriz
Actividades de educación_psicomotriz Actividades de educación_psicomotriz
Actividades de educación_psicomotriz Marta Montoro
 
Antioquia oculto
Antioquia ocultoAntioquia oculto
Antioquia ocultopapayita2
 
Fd inv.conocimiento e_interes_jürgen_habermas
Fd inv.conocimiento e_interes_jürgen_habermasFd inv.conocimiento e_interes_jürgen_habermas
Fd inv.conocimiento e_interes_jürgen_habermasNirza Chacón Vargas
 
Condiciones Y Politicas
Condiciones Y PoliticasCondiciones Y Politicas
Condiciones Y Politicassubhan1063
 
Impacto de la nueva ley sobre teletrabajo en el Perú
Impacto de la nueva ley sobre teletrabajo en el Perú Impacto de la nueva ley sobre teletrabajo en el Perú
Impacto de la nueva ley sobre teletrabajo en el Perú mel2011040738
 
Sistema operativo computacion
Sistema operativo computacionSistema operativo computacion
Sistema operativo computacionjuliocesar05
 
La primera guerra mundial eve[1]
La primera guerra mundial eve[1]La primera guerra mundial eve[1]
La primera guerra mundial eve[1]evelingballesteros
 
Sistema operativo computacion
Sistema operativo computacionSistema operativo computacion
Sistema operativo computacionjuliocesar05
 
Ik.2012.5.téma és jelentés oroszlán
Ik.2012.5.téma és jelentés oroszlánIk.2012.5.téma és jelentés oroszlán
Ik.2012.5.téma és jelentés oroszláneorsianna
 
Thuật ngữ Digital marketing
Thuật ngữ Digital marketingThuật ngữ Digital marketing
Thuật ngữ Digital marketingVũ Văn Hiển
 
Educacion especial y adultos grupo 5
Educacion especial y adultos grupo 5Educacion especial y adultos grupo 5
Educacion especial y adultos grupo 5LUZ55GOMEZ
 
Descripcion Proyecto ELIT Investigando en la Sala de Clases
Descripcion Proyecto ELIT Investigando en la Sala de ClasesDescripcion Proyecto ELIT Investigando en la Sala de Clases
Descripcion Proyecto ELIT Investigando en la Sala de ClasesHiram Baez Andino
 

En vedette (20)

Inside view crack-the-code-of-sales-and-marketing-alignment-report
Inside view crack-the-code-of-sales-and-marketing-alignment-reportInside view crack-the-code-of-sales-and-marketing-alignment-report
Inside view crack-the-code-of-sales-and-marketing-alignment-report
 
D:\Documents And Settings\Administrador\Mis Documentos\Como Cuidar El Medio A...
D:\Documents And Settings\Administrador\Mis Documentos\Como Cuidar El Medio A...D:\Documents And Settings\Administrador\Mis Documentos\Como Cuidar El Medio A...
D:\Documents And Settings\Administrador\Mis Documentos\Como Cuidar El Medio A...
 
Semin. De Postgrado Inform
Semin. De Postgrado InformSemin. De Postgrado Inform
Semin. De Postgrado Inform
 
Actividades de educación_psicomotriz
Actividades de educación_psicomotriz Actividades de educación_psicomotriz
Actividades de educación_psicomotriz
 
Antioquia oculto
Antioquia ocultoAntioquia oculto
Antioquia oculto
 
Fd inv.conocimiento e_interes_jürgen_habermas
Fd inv.conocimiento e_interes_jürgen_habermasFd inv.conocimiento e_interes_jürgen_habermas
Fd inv.conocimiento e_interes_jürgen_habermas
 
Condiciones Y Politicas
Condiciones Y PoliticasCondiciones Y Politicas
Condiciones Y Politicas
 
Subir...
Subir...Subir...
Subir...
 
Impacto de la nueva ley sobre teletrabajo en el Perú
Impacto de la nueva ley sobre teletrabajo en el Perú Impacto de la nueva ley sobre teletrabajo en el Perú
Impacto de la nueva ley sobre teletrabajo en el Perú
 
Sistema operativo computacion
Sistema operativo computacionSistema operativo computacion
Sistema operativo computacion
 
Mis diez (10) mandamientos del e mail
Mis diez (10) mandamientos del e mailMis diez (10) mandamientos del e mail
Mis diez (10) mandamientos del e mail
 
Atendi turismo
Atendi turismoAtendi turismo
Atendi turismo
 
La primera guerra mundial eve[1]
La primera guerra mundial eve[1]La primera guerra mundial eve[1]
La primera guerra mundial eve[1]
 
Redes sociales
Redes socialesRedes sociales
Redes sociales
 
Sistema operativo computacion
Sistema operativo computacionSistema operativo computacion
Sistema operativo computacion
 
Ik.2012.5.téma és jelentés oroszlán
Ik.2012.5.téma és jelentés oroszlánIk.2012.5.téma és jelentés oroszlán
Ik.2012.5.téma és jelentés oroszlán
 
Thuật ngữ Digital marketing
Thuật ngữ Digital marketingThuật ngữ Digital marketing
Thuật ngữ Digital marketing
 
Educacion especial y adultos grupo 5
Educacion especial y adultos grupo 5Educacion especial y adultos grupo 5
Educacion especial y adultos grupo 5
 
Descripcion Proyecto ELIT Investigando en la Sala de Clases
Descripcion Proyecto ELIT Investigando en la Sala de ClasesDescripcion Proyecto ELIT Investigando en la Sala de Clases
Descripcion Proyecto ELIT Investigando en la Sala de Clases
 
9 c2e~1
9 c2e~19 c2e~1
9 c2e~1
 

Similaire à Java Script Workshop

JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developersStoyan Stefanov
 
JavaScript and the AST
JavaScript and the ASTJavaScript and the AST
JavaScript and the ASTJarrod Overson
 
OO JS for AS3 Devs
OO JS for AS3 DevsOO JS for AS3 Devs
OO JS for AS3 DevsJason Hanson
 
Paradigmas de Linguagens de Programacao - Aula #4
Paradigmas de Linguagens de Programacao - Aula #4Paradigmas de Linguagens de Programacao - Aula #4
Paradigmas de Linguagens de Programacao - Aula #4Ismar Silveira
 
JavaScript: The Language
JavaScript: The LanguageJavaScript: The Language
JavaScript: The LanguageEngage Software
 
JSConf: All You Can Leet
JSConf: All You Can LeetJSConf: All You Can Leet
JSConf: All You Can Leetjohndaviddalton
 
Introduction to web programming for java and c# programmers by @drpicox
Introduction to web programming for java and c# programmers by @drpicoxIntroduction to web programming for java and c# programmers by @drpicox
Introduction to web programming for java and c# programmers by @drpicoxDavid Rodenas
 
Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Seri Moth
 
JAVA OOP project; desperately need help asap im begging.Been stuck.pdf
JAVA OOP project; desperately need help asap im begging.Been stuck.pdfJAVA OOP project; desperately need help asap im begging.Been stuck.pdf
JAVA OOP project; desperately need help asap im begging.Been stuck.pdffantasiatheoutofthef
 
Using Reflections and Automatic Code Generation
Using Reflections and Automatic Code GenerationUsing Reflections and Automatic Code Generation
Using Reflections and Automatic Code GenerationIvan Dolgushin
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScriptJulie Iskander
 
Ast transformations
Ast transformationsAst transformations
Ast transformationsHamletDRC
 
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)Anders Jönsson
 
OBJECTS IN Object Oriented Programming .ppt
OBJECTS IN Object Oriented Programming .pptOBJECTS IN Object Oriented Programming .ppt
OBJECTS IN Object Oriented Programming .pptSaadAsim11
 
Scala in practice
Scala in practiceScala in practice
Scala in practicepatforna
 

Similaire à Java Script Workshop (20)

JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
 
JavaScript and the AST
JavaScript and the ASTJavaScript and the AST
JavaScript and the AST
 
OO JS for AS3 Devs
OO JS for AS3 DevsOO JS for AS3 Devs
OO JS for AS3 Devs
 
Scala in practice
Scala in practiceScala in practice
Scala in practice
 
SDC - Einführung in Scala
SDC - Einführung in ScalaSDC - Einführung in Scala
SDC - Einführung in Scala
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
Paradigmas de Linguagens de Programacao - Aula #4
Paradigmas de Linguagens de Programacao - Aula #4Paradigmas de Linguagens de Programacao - Aula #4
Paradigmas de Linguagens de Programacao - Aula #4
 
JavaScript: The Language
JavaScript: The LanguageJavaScript: The Language
JavaScript: The Language
 
JSConf: All You Can Leet
JSConf: All You Can LeetJSConf: All You Can Leet
JSConf: All You Can Leet
 
Introduction to web programming for java and c# programmers by @drpicox
Introduction to web programming for java and c# programmers by @drpicoxIntroduction to web programming for java and c# programmers by @drpicox
Introduction to web programming for java and c# programmers by @drpicox
 
Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02
 
JAVA OOP project; desperately need help asap im begging.Been stuck.pdf
JAVA OOP project; desperately need help asap im begging.Been stuck.pdfJAVA OOP project; desperately need help asap im begging.Been stuck.pdf
JAVA OOP project; desperately need help asap im begging.Been stuck.pdf
 
Using Reflections and Automatic Code Generation
Using Reflections and Automatic Code GenerationUsing Reflections and Automatic Code Generation
Using Reflections and Automatic Code Generation
 
Say It With Javascript
Say It With JavascriptSay It With Javascript
Say It With Javascript
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScript
 
ECMA 入门
ECMA 入门ECMA 入门
ECMA 入门
 
Ast transformations
Ast transformationsAst transformations
Ast transformations
 
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
 
OBJECTS IN Object Oriented Programming .ppt
OBJECTS IN Object Oriented Programming .pptOBJECTS IN Object Oriented Programming .ppt
OBJECTS IN Object Oriented Programming .ppt
 
Scala in practice
Scala in practiceScala in practice
Scala in practice
 

Plus de Dmitry Baranovskiy (15)

JavaScript: enter the dragon
JavaScript: enter the dragonJavaScript: enter the dragon
JavaScript: enter the dragon
 
The Origins of Magic
The Origins of MagicThe Origins of Magic
The Origins of Magic
 
Demystifying Prototypes
Demystifying PrototypesDemystifying Prototypes
Demystifying Prototypes
 
Raphaël
RaphaëlRaphaël
Raphaël
 
Type Recognition
Type RecognitionType Recognition
Type Recognition
 
Raphaël JS Conf
Raphaël JS ConfRaphaël JS Conf
Raphaël JS Conf
 
Obvious Secrets of JavaScript
Obvious Secrets of JavaScriptObvious Secrets of JavaScript
Obvious Secrets of JavaScript
 
Your JavaScript Library
Your JavaScript LibraryYour JavaScript Library
Your JavaScript Library
 
Canvas
CanvasCanvas
Canvas
 
SVG
SVGSVG
SVG
 
Raphael
RaphaelRaphael
Raphael
 
Web Vector Graphics
Web Vector GraphicsWeb Vector Graphics
Web Vector Graphics
 
Typography on the Web
Typography on the WebTypography on the Web
Typography on the Web
 
Microformats—the hidden treasure
Microformats—the hidden treasureMicroformats—the hidden treasure
Microformats—the hidden treasure
 
Advanced JavaScript Techniques
Advanced JavaScript TechniquesAdvanced JavaScript Techniques
Advanced JavaScript Techniques
 

Dernier

An Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdfAn Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdfSanaAli374401
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17Celine George
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.christianmathematics
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Shubhangi Sonawane
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfAyushMahapatra5
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxnegromaestrong
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin ClassesCeline George
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docxPoojaSen20
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...christianmathematics
 
Making and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfMaking and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfChris Hunter
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxVishalSingh1417
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxDenish Jangid
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.pptRamjanShidvankar
 

Dernier (20)

An Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdfAn Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdf
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docx
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Making and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfMaking and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdf
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 

Java Script Workshop

  • 1. JavaScript WebDU 2009 · Dmitry Baranovskiy
  • 2.
  • 3. E very object (including host objects) must implement the e)) and ((Class)) propertie s and the ((Get)), ((Put)), ((Prototyp t)), ((HasProperty)), ((Dele te)), and ((DefaultValue)) ((CanPu . (Note, however, that the ((D efaultValue)) method may, methods exception.) The value for some objects , simply throw a TypeError Prototype)) property must be either an object or null, and of the (( Prototype)) chain must have finite length (that is, starting every (( y object, recursively access ing the ((Prototype)) property from an entually lead to a null val ue). Whether or not a native must ev an have a host object as its ((Prototype)) depends on the object c implementation. The value of the ((Class)) property is defined by this specification for every kind of built-i n object. The value of the ((Class)) prop erty of a host object may be any value , even a value used by
  • 4. E very object (including host objects) must implement the e)) and ((Class)) propertie s and the ((Get)), ((Put)), ((Prototyp t)), ((HasProperty)), ((Dele te)), and ((DefaultValue)) ((CanPu . (Note, however, that the ((D efaultValue)) method may, methods exception.) The value for some objects , simply throw a TypeError Prototype)) property must be either an object or null, and of the (( Prototype)) chain must have finite length (that is, starting every (( from an must ev It is a bit “cryptic” y object, recursively access entually lead to a null val ing the ((Prototype)) property ue). Whether or not a native an have a host object as its ((Prototype)) depends on the object c implementation. The value of the ((Class)) property is defined by this specification for every kind of built-i n object. The value of the ((Class)) prop erty of a host object may be any value , even a value used by
  • 5. “ECMAScript does not contain proper classes such as those in C++, Smalltalk, or Java, but rather, supports constructors which create objects by executing code that allocates storage for the objects and initialises all or part of them by assigning initial values to their properties.” ECMAScript Specification
  • 7. Undefined Null Boolean Number String Object
  • 9. typeof Undefined quot;undefinedquot; Null quot;objectquot; Number quot;numberquot; Boolean quot;booleanquot; String quot;stringquot; Object quot;objectquot;
  • 10. to Number Undefined NaN Null 0 Number — Boolean false ! 0, true ! 1 String parsing Object .valueOf()
  • 11. to Boolean Undefined !quot;#$% Null !quot;#$% Number &'())(*+*,(-(.+/01(2(3451 Boolean 6 String 77(-(.+/01(2(3451 Object 89:%
  • 12. to String Undefined quot;undefinedquot; Null quot;nullquot; Number quot;5quot; Boolean quot;falsequot; || quot;truequot; String — Object .toString()
  • 13. to Object Undefined exception! Null exception! Number new Number(v) Boolean new Boolean(v) String new String(v) Object Object
  • 15. 5 + 4 + quot;pxquot; quot;$quot; + 1 + 2 quot;4quot; / quot;2quot; quot;$quot; + 1 - 2 quot;webduquot;.length typeof 5 typeof quot;5quot; typeof {property: value} typeof null typeof undefined typeof [1, 2, 3] typeof (4 - quot;pxquot;)
  • 16. 5 + 4 + quot;pxquot; quot;9pxquot; quot;$quot; + 1 + 2 quot;$12quot; quot;4quot; / quot;2quot; 2 quot;$quot; + 1 - 2 NaN quot;webduquot;.length 5 typeof 5 quot;numberquot; typeof quot;5quot; quot;stringquot; typeof {property: value} quot;objectquot; typeof null quot;objectquot; typeof undefined quot;undefinedquot; typeof [1, 2, 3] quot;objectquot; typeof (4 - quot;pxquot;) quot;numberquot;
  • 18. ReadOnly DontEnum DontDelete Internal
  • 20. var a = { x: 12, y: 23, r: 10, draw: function () {/*...*/} }; for (var property in a) { alert(quot;a.quot; + property + quot; = quot; + a[property]); }
  • 21. var a = { x: 12, y: 23, r: 10, draw: function () {/*...*/} }; for (var property in a) { alert(quot;a.quot; + property + quot; = quot; + a[property]); }
  • 22. Function Array Date RegExp
  • 24. var y = 1; function x() { var y = 2; return ++y; } var z = function () { return ++y; };
  • 25. function x() { var y = 2; return function () { return ++y; }; } var a = x(); a(); a();
  • 27. function add(a, b) { return a + b; } add(4, 5); // = 9 add(4, 5, 6, 7, 8, 9) // = 39 function add() { var sum = 0; for (var i = 0, ii = arguments.length; i < ii; i++) { sum +=+ arguments[i]; } return sum; }
  • 29. function is(it) { alert(this + quot; is quot; + it); } is(quot;globalquot;); is.call(5, quot;numberquot;); is.apply(quot;Aquot;, [quot;stringquot;]); alert.is = is; alert.is(quot;functionquot;);
  • 31. alert(b); 1 b = 1; alert(a); 2 var a = 1; (function () { 3 var x = 1; })(); alert(x); (function () { 4 y = 1; })(); alert(y);
  • 33. function x(a) { 1 return a && x(--a); } var x = function (a) { 2 return a && x(--a); }; setTimeout(function (a) { 3 return a && arguments.callee(--a); }, 1000); var x = function y(a) { 4 return a && y(--a); }; setTimeout(function y(a) { 5 return a && y(--a); }, 1000);
  • 35. var a = new Array(); var a = new Array(3); var a = []; var a = [undefined, undefined, undefined]; var a = [1, 2, 3, 4];
  • 37. var a = new Object(); var a = {}; var a = {x: 10, y: 15}; var a = { x: 10, name: quot;objectquot;, quot;font-stylequot;: quot;italicquot;, getHeight: function () {/*...*/}, points: [1, 2, 3], child: {x: 10, y: 15} };
  • 38. OOP
  • 40. var mouse = { 1 name: quot;Mikequot;, voice: function () { alert(quot;Squik!quot;); } }; var o = new Object(); 2 o.name = quot;Mikequot;; o.voice = function () { alert(quot;Squik!quot;); }; var O = function () { 3 this.name = quot;Mikequot;; this.voice = function () { alert(quot;Squik!quot;); }; }; var o = new O(); var O = function () {}; 4 O.prototype.name = quot;Mikequot;; O.prototype.voice = function () { alert(quot;Squik!quot;); }; var o = new O();
  • 44. Classic Model Class Object Class Object Object Object
  • 45. Prototypal Model Object Object Object Object
  • 46. Object Object
  • 47. // Sharing function Parent(value) { this.value = value; } Parent.prototype.getValue = function () { return this.value; }; function A(value) { this.value = value + 1; } A.prototype = new Parent(); function B(value) { this.value = value * 2; } B.prototype = new Parent(); alert((new A(5)).getValue()); // 6 alert((new B(5)).getValue()); // 10
  • 48. // Sharing function A(value) { this.value = value + 1; } function B(value) { this.value = value * 2; } A.prototype.getValue = B.prototype.getValue = function () { return this.value; }; alert((new A(5)).getValue()); // 6 alert((new B(5)).getValue()); // 10
  • 49. Array
  • 50. Date