SlideShare una empresa de Scribd logo
1 de 52
Descargar para leer sin conexión
JavaScript



WebDU 2009 · Dmitry Baranovskiy
Java Script Workshop
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

Más contenido relacionado

La actualidad más candente

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
 

La actualidad más candente (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
 

Destacado

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
 

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

Similar a 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
 
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
 
Oop2010 Scala Presentation Stal
Oop2010 Scala Presentation StalOop2010 Scala Presentation Stal
Oop2010 Scala Presentation StalMichael Stal
 

Similar a 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
 
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
 
Oop2010 Scala Presentation Stal
Oop2010 Scala Presentation StalOop2010 Scala Presentation Stal
Oop2010 Scala Presentation Stal
 

Más 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
 

Último

How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17Celine George
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptxraviapr7
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesCeline George
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?TechSoup
 
How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17Celine George
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 
Department of Health Compounder Question ‍Solution 2022.pdf
Department of Health Compounder Question ‍Solution 2022.pdfDepartment of Health Compounder Question ‍Solution 2022.pdf
Department of Health Compounder Question ‍Solution 2022.pdfMohonDas
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICESayali Powar
 
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...M56BOOKSTORE PRODUCT/SERVICE
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptxSandy Millin
 
How to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeHow to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeCeline George
 
A gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceA gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceApostolos Syropoulos
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfMohonDas
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapitolTechU
 
Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....Riddhi Kevadiya
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxheathfieldcps1
 
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptxSOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptxSyedNadeemGillANi
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.EnglishCEIPdeSigeiro
 

Último (20)

How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 Sales
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?
 
How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 
Department of Health Compounder Question ‍Solution 2022.pdf
Department of Health Compounder Question ‍Solution 2022.pdfDepartment of Health Compounder Question ‍Solution 2022.pdf
Department of Health Compounder Question ‍Solution 2022.pdf
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICE
 
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
 
How to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeHow to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using Code
 
A gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceA gentle introduction to Artificial Intelligence
A gentle introduction to Artificial Intelligence
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdf
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptx
 
Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptx
 
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptxSOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
SOLIDE WASTE in Cameroon,,,,,,,,,,,,,,,,,,,,,,,,,,,.pptx
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
Finals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quizFinals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quiz
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.
 

Java Script Workshop

  • 1. JavaScript WebDU 2009 · Dmitry Baranovskiy
  • 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