Register now to access 7 million high quality study materials (What's Course Hero?) Course Hero is the premier provider of high quality online educational resources. With millions of study documents, online tutors, digital flashcards and free courseware, Course Hero is helping students learn more efficiently and effectively. Whether you're interested in exploring new subjects or mastering key topics for your next exam, Course Hero has the tools you need to achieve your goals.

122 Pages

11_JavaScript

Course: CSI ITI1520, Spring 2010
School: University of Ottawa
Rating:

Word Count: 4646

Document Preview

Unformatted Document Excerpt

Coursehero >> Canada >> University of Ottawa >> CSI ITI1520

Course Hero has millions of student submitted documents similar to the one
below including study guides, practice problems, reference materials, practice exams, textbook help and tutor support.

Course Hero has millions of student submitted documents similar to the one below including study guides, practice problems, reference materials, practice exams, textbook help and tutor support.

3540 Structures, CSI techniques et normes du Web Friday, February 26, 2010 Le langage JavaScript (ECMAScript) Objectif: crire des programmes JavaScript Introduction lenvironnement dxcution Lectures: Web Technologies (2007) 4 Friday, February 26, 2010 Plan 1. Motivation 2. Bref historique 3. Prsentaton dtaille 1. Grammaire 2. Objets 3. Hritage par prototype 4. Fermetures Friday, February 26, 2010 Mythe ou ralit JavaScript est 1. un langage de script dont la syntaxe est drive de Java 2. une version interprte de Java (sans code intermdiaire, code-octet) 3. un langage de programmation orient prototype (sans classe) Friday, February 26, 2010 Quen pensez-vous? Quelles sont vos connaissances de JavaScript? Novice, intermdiaire, avanc? ou mauvais language? Ou peut-tre, vous tes sans opinion. Quen pensez-vous? Cest un excellent Friday, February 26, 2010 Ralit JavaScript est un langage de assises et quelques mauvais concepts Victime de son adoption rapide programmation avec dexcellentes Avec un peu de discipline, on se limite aux excellents concepts offerts Trop souvent, le programmeur ne se donne pas la peine dapprendre le langage Friday, February 26, 2010 Ralit Paradigmes JavaScript importants Objet, objet littral Fonctions, programmation fonctionnelle pour la programmation dapplications Web Fermeture Friday, February 26, 2010 Motivation Calcul ct client Par exemple, valider le format dun numro de tlphone, de carte de crdit, etc. serveur Rduire la charge du rseau et/ou du Construire les pages ct client Friday, February 26, 2010 Motivation Le modle objet de document (DOM HTML) fournit un accs programmatique la page courante de lagent utilisateur programmation frquemment utilis pour manipuler le DOM les objets ! JavaScript est un langage de Concept important : paradigme pour Friday, February 26, 2010 <!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Strict/ /EN" "http:/ /www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> <html xmlns="http:/ /www.w3.org/1999/xhtml " lang="fr-CA"> <head> <title>Mon premier programme JavaScript</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" type="text/css" href="default.css" media="all" /> <script type="text/javascript" src="HelloWorld.js"> </script> </head> <body> </body> </html> Friday, February 26, 2010 a lert( "C'e st bon des Pop-Tarts! \u2122" ); Friday, February 26, 2010 <!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Strict/ /EN" "http:/ /www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> <html xmlns="http:/ /www.w3.org/1999/xhtml " lang="fr-CA"> <head> <title>Mon premier programme JavaScript</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="default.css" media="all" /> <script type="text/javascript"> alert( "C'e st bon des Pop-Tarts! " ); </script> </head> <body> </body> </html> Friday, February 26, 2010 Environnement de dveloppement Support par virtuellement tous les fureteurs, cest donc lun des langages de programmation les plus utiliss www.mozilla.org/rhino ] 2007 Rhino JavaScript for Java [ http:// $ java -jar js.jar Rhino 1.7 release 2 2009 03 22 js> Friday, February 26, 2010 La ptite histoire de JavaScript N LiveScript (nom de code Mocha) en 1995. Cr par Brendan Eich pour Netscape 2.0 Microsoft cre JScript en juillet 1996 1997, un standard est propos par European Computer Manufacturers Association (ECMA). ECMAScript ECMA-262 1999, ECMA-262 3ime dition 5ime dition adopte en dcembre 2009 Friday, February 26, 2010 Hum? Contrairement ce que le nom suggre, JavaScript nest pas un descandant de Java! dECMAScript 8-( En fait, on devrait plutt parler Friday, February 26, 2010 Langages de scripts Langages de programmation gnralement interprts, typage dynamique, et qui servent lextension de systmes (accs programmatique aux structures internes dun systme) Bash et C-Shell, sont une extension du systme dexploitation logiciel an de le rendre extensible Les langages de commandes, tels que Le langage TCL peut tre intgr tout Friday, February 26, 2010 JavaScript Rends les clients et serveurs extensibles en donnant un accs programmatique aux structures internes Interprt Typage dynamique Syntaxe semblable celle de Java et C++ Friday, February 26, 2010 Machine virtuelle + r untime Cette prsentation ne couvre que Scripting engine JavaScript Comprend 2 parties : Machine vituelle (scripting engine) : Environnement hte (hosting interprte et fonctions essentielles dECMAScript (prsente aujourdhui) environment) : spcique au client (Mozilla, IE, etc.), au server (IIs, etc.)... Friday, February 26, 2010 dition Friday, February 26, 2010 Rhino: JavaScript for Java Implmentation code source libre en Java $ java -jar js.jar Rhino 1.7 release 2 2009 03 22 js> 1 + 1 2 www.mozilla.org/rhino/ Comprends lAPI, un shell, un dbogueur, un compilateur, une documentation, etc. Friday, February 26, 2010 Mise au point Friday, February 26, 2010 IE6 (...) I suggest selecting Tools|Internet Options... from the IE6 menu and click on the Advanced tab in the pop-up window that appears. Then check the Display a notication about every script error checkbox. [ Jackson (2007) page 197 ] Friday, February 26, 2010 Mise au point Venkman est le dbogueur de Mozilla, qui tourne entre autres sous Firefox Friday, February 26, 2010 Excution > defaults write com.apple.Safari IncludeDebugMenu 1 Friday, February 26, 2010 Le monde dECMAScript SpiderMonkey est limplmentation code source libre crite en C de Mozilla (embarque dans Firefox) Tamarin est un engin (une machine virtuelle) JavaScript, haute performance, code source libre, crit en C++ (Projet Mozilla, embarqu dans Adobe Flash Player) Friday, February 26, 2010 Friday, February 26, 2010 JavaScript Le langage de programmation Friday, February 26, 2010 Similitudes avec Java Friday, February 26, 2010 Grammaire La syntaxe du language (affectations, oprateurs, blocs et structures de contrles) ressemble celle de Java Les tableaux sont des objets Sensible la casse (case sensitive) Commentaires : // et /* */ Friday, February 26, 2010 Dissimilitudes par rapport Java Friday, February 26, 2010 Types de donnes Les types sont associs aux valeurs et non pas aux variables! Ces types sont : Number String Boolean null undened Object Friday, February 26, 2010 Types de donnes <script type="text/javascript"> var v, m1, m2, m3, m4, m5; m1 = typeof v; m2 = typeof w; v = null; m3 = typeof v; v = 99; m4 = typeof v; v = m2; m5 = typeof v; v = true; m6 = typeof v; alert( m1 + "," + m2 + "," + m3 + "," + m4 + "," + m5 + "," + m6 ); </script> La variable v reoit des valeurs de divers t ypes. Loprateur typeof Notez la diffrence e ntre undefined et n ull Friday, February 26, 2010 Types de donnes Number, String et Boolean sont p.e. informatique.toUpperCase() Les tableaux et les fonctions sont des objets immuables et possde des mthodes Friday, February 26, 2010 Types de donnes: Number Aucune distinction entre les nombres rels et les nombres entiers (IEEE 754) Reprsention 64 bits point ottant NaN et isNaN( v ), +Innity, -Innity Friday, February 26, 2010 Conversions Plusieurs conversions de type automatiques Friday, February 26, 2010 Conversion : B oolean Originale undened null 0 NaN (Not a Number) Innity, -Innity Toute autre valeur Friday, February 26, 2010 Boolenne false false false false false false true Originale undened null true, false NaN Innity, -Innity Petits nombres Grands nombres Objet Friday, February 26, 2010 String undened null true, false NaN Innity, -Innity Notation dcimale Notation scientique Appel toString() Conversion : Number Originale undened null, false, true Chane reprsentant un nombre Autres chanes Objet Friday, February 26, 2010 Number NaN 0 1 Valeur du nombre NaN Appel valueOf() Conversion automatique des types de valeurs v ar v = 10; while ( v ) { v = v - 1; } alert( "La valeur de v est " + v ); Lexemple dmontre aussi linitialisation dune variable d ans le contexte de s a dclaration Friday, February 26, 2010 Syntaxe Variables : prcdes par le mot cl var et nont aucune dclaration de type var id; lettre ou un soulignement et soulignements Les identicateurs dbutent par une Le reste est constitu de lettres, chiffres Ne sont pas des mots rservs Friday, February 26, 2010 Syntaxe Une variable sera automatiquement cre lors dune affectation si ncessaire $ js Rhino 1.6 release 7 2007 08 19 js> var x = 1; js> y = 2; 2 js> x + y 3 js> x + z js: "<stdin>", line 5: uncaught JavaScript runtime exception: ReferenceError: "z" is not defined. Friday, February 26, 2010 Porte Environnement global (variables globales) Variables locales sont dclares laide de v ar, mais un bloc dnoncs ne cre pas un nouvel environnement lexical Friday, February 26, 2010 Syntaxe Lnonc t hrow : t hrow( Sans objet ;-) ) Le bloc c atch : try { ... } catch ( e ) { window.alert( Jattrappe tout : + e ); } Friday, February 26, 2010 Syntaxe throw( { name : FormatException, message : 2EC3 is not a valid number } ) Friday, February 26, 2010 Autres Pas de main( String[] args ); Friday, February 26, 2010 Fonctions Premire partie Friday, February 26, 2010 Fonctions Mot cl function introduit la dclaration dune fonction formels nont pas de dclaration de type nappartiennent pas un objet ou une classe valeur ; comme les appels de mthodes de Java function maximum( a, b ) { if ( a > b ) { return a; } else { return b; } } function minimum( a, b ) { if ( a < b ) { return a; } else { return b; } } var x = 5, y = 10, z = maximum( x, y ); Les paramtres Ces fonctions Appels de fonction par Friday, February 26, 2010 Fonctions Attention, si le dernier nonc excut nest pas un nonc de retour (return) alors la valeur de retour est u ndefined Friday, February 26, 2010 Valeur de type fonction function affiche( f, a, b ) { alert( "La valeur est " + f( a, b ) ); } affiche( minimum, x, y ); fun = function factice( a, b ) { return 99; }; affiche( fun, 5, 10 ); affiche( factice, 5, 10 ); Friday, February 26, 2010 Fonctions anonymes function affiche( f, a, b ) { alert( "La valeur est " + f( a, b ) ); } affiche( function( a, b ) { return a + b }, 6, 7 ); Friday, February 26, 2010 Fonctions prdnies eval isFinite, isNaN, p arseInt, parseFloat encodeURI, decodeURI, encodeURIComponent, et decodeURIComponent Friday, February 26, 2010 Trs permissif Conversions de type automatiques Plusieurs ; optionnels Paramtres surnumraires ignors lors des appels de fonction Affectation de la valeur undened aux paramtres manquants lors des appels de fonction pas dimportance : lexcution se fait en 2 passes Lordre des dclarations de fonctions na Friday, February 26, 2010 a rguments v ar somme = function() { var i, somme = 0; for ( i=0; i<arguments .length; i += 1 ) { somme += arguments[ i ] ; } return somme; }; somme( 1, 2, 3 ); Friday, February 26, 2010 Variables locales, globales et appels par valeur var a = 5, b = 10, c = 15; function test( d ) { var a; a = 96; b = 97; c = 98; d = 99; } alert( a + "," + b + "," + c + "," + d ); alert( a + "," + b + "," + c ); test( c ); alert( a + "," + b + "," + c ); Friday, February 26, 2010 Objets sans classe(s) Programmation oriente prototype Friday, February 26, 2010 Dnitions Lobjet en JavaScript est constitu dun ensemble de proprits unique et dune valeur Une proprit est compose dun nom Aucune restriction quant aux noms des proprits, la chane vide est un nom de proprit admissible Friday, February 26, 2010 Remarques Tout comme les variables, les proprits nont pas de type, elles ont des valeurs, et ces dernires ont un type Il sagit des 6 types vus prcdemment: Number, String, Boolean, null, Object et undened Friday, February 26, 2010 Remarques (suite) Les proprits sont ajoutes ou mme retranches lors de lexcution des programmes Il ny a pas de dclarations statiques des objets, les objets sont crs dynamiquement, et les proprits sont ajoutes dynamiquement Pas de classes Friday, February 26, 2010 v ar o; o = new Object(); o.prop = true; window.alert( (typeof o) + "," + (typeof o.prop) ); o.prop = "a pas de classe c't'affaire l"; window.alert( (typeof o) + "," + (typeof o.prop) ); o.prop = 1; window.alert( (typeof o) + "," + (typeof o.prop) ); o.prop = function( x ) { return x + 1 }; window.alert( (typeof o) + "," + (typeof o.prop) ); Friday, February 26, 2010 delete o.prop; window.alert( (typeof o) + "," + (typeof o.prop) ); o = "Alpha"; window.alert( (typeof o) + "," + (typeof o.prop) ); Cest un seul et mme exemple Friday, February 26, 2010 Sous Rhino js> var o; js> o = new Object(); [object Object] js> o.prop = "a pas de classe c't'affaire l" a pas de classe c't'affaire l js> typeof o object js> typeof o.prop string js> o.prop = 1; 1 js> typeof o.prop number js> o = "alpha" alpha js> typeof o string js> typeof o.prop undefined Friday, February 26, 2010 Raccourci : object initializers var personne = { prenom:Gdon, nas:12345, association:null }; var personne = { prenom:window.prompt( Entrez le prnom ), nas:window.prompt( Entrez le NAS ), association:null }; var obj = { }; Friday, February 26, 2010 Proprits de lobjet Utilise des si le nom na pas le format dun identiant ou encore est un mot rserv var stat = { var: 2, cart type: 1.41 , valeur-associe: null }; var vol = { compagnie: Air Canada, numro: 342 , depart: { ville: YOW, heure: 16:12 } }; Friday, February 26, 2010 Rection Mot cl in : for ( var propr in personne ) { window.alert( propr ); } Cette boucle afchera les (noms des) proprits de lobjet dsign par la variable personne, soit prnom, nas et association (lordre nest cependant pas dni) Friday, February 26, 2010 Sous Rhino js> var personne = { prenom: "Gdon", nas:12345, association:null }; js> personne [object Object] js> for ( var propr in personne ) { print( propr ) }; association nas prenom Friday, February 26, 2010 Proprits dun objet La variable propr contient le nom dune des proprits de lobjet personne, propr est nom, par exemple la valeur de la variable comment accder la valeur dune proprit dont le nom est la valeur associe une variable ? Friday, February 26, 2010 Proprits dun objet La notation personne.propr fait rfrence une proprit dont le nom est propr le nom est sauvegard dans la variable propr personne[ propr ] Nous accder voulons la proprit dont Il faut utiliser la notation suivante : Friday, February 26, 2010 Proprits dun objet Les deux appels la mthode alert produiront le mme rsultat : var propr = "prnom"; var personne = { prnom:"Gdon", nas:12345, association:null }; window.alert( personne.prnom ); window.alert( personne[ propr ] ); La notation personne[ propr ] est semblable aux tableaux associatifs et tables de hashage Friday, February 26, 2010 Rfrences js> var o1 = new Object(); js> o1.data = "Programmation"; Programmation js> var o2 = o1; js> o2.data += " Web"; Programmation Web js> o1.data; Programmation Web Friday, February 26, 2010 Mthodes Les mthodes sont tout simplement des fonctions assignes aux proprits produiront le mme rsultat : Les deux appels la mthode alert var personne = { prnom:"Gdon", getPrnom:function() { return this.prnom } }; window.alert( personne.prnom ); window.alert( personne.getPrnom() ); Friday, February 26, 2010 Conversion de types (suite) js> o = { v : 10, valueOf : function() { return this.v } } [object Object] js> o.valueOf() 10 js> o + 1 11 Friday, February 26, 2010 Mthodes (suite) De mme, les deux dclarations de mthodes suivantes sont () quivalentes : var personne = { prnom:"Gdon", getPrnom:function() { return this.prnom } }; var f = function() { return this.prnom } var personne = { prnom:"Gdon", getPrnom:f }; La dclaration du bas cre aussi une variable globale (quon ne peut utiliser directement, dailleurs) Friday, February 26, 2010 Constructeur function Tuple( first, second ) { this.first = first; this.second = second; this.getFirst = function() { return this.first; }; this.getSecond = function() { return this.second; }; } var p1 = new Tuple( "tree", "green" ); var p2 = new Tuple( "sky", "blue" ); window.alert( p1.getFirst() ); window.alert( p2.getSecond() ); Sans new Object() Sans valeur de retour Toute fonction est aussi un constructeur! true js> Tuple instanceof Object new Tuple( ... ); p1 instanceof Tuple Object est un constructeur prdni Friday, February 26, 2010 f unction Tuple( first, second ) { this.first = first; this.second = second; this.getFirst = function() { return this.first; }; this.getSecond = function() { return this.second; }; var p1 = new Tuple( "tree", "green" ); p1.isOrdered(); / retourne false / p1.swap(); p1.isOrdered(); / retourne true / lutilisation de this est toujours ncessaire, sinon le nom fait this.isOrdered = function() { return this.getFirst() < this.getSecond(); rfrence une variable }; ou une fonction this.swap = function() { var tmp = this.first; this.first = this.second; this.second = tmp; }; En JavaScript, Notez la dclaration dune variable locale dans la mthode swap } Friday, February 26, 2010 f unction makeTuple( first, second ) { var t = new Object(); t.first = first; t.second = second; t.getFirst = function() { return this.first; }; t.getSecond = function() { return this.second; }; return t; } var t1 = makeTuple( "rouge", 1 ); print( t1.getFirst() ); function Tuple( first, second ) { this.first = first; this.second = second; this.getFirst = function() { return this.first; }; this.getSecond = function() { return this.second; }; } var t2 = new Tuple( "bleu", 2 ); print( t2.getFirst() ); Friday, February 26, 2010 __deneGetter__ function Time( h, m ) { this.totalMinutes = 60 * h + m; this.before = function( other ) { return this.totalMinutes < other.totalMinutes; } this.__defineGetter__( "hours", function() { return toInteger( this.totalMinutes / 60 ); } ); this.__defineGetter__( "minutes", function() { return this.totalMinutes % 60; } ); } var t1 = new Time( 14, 30 ); var t2 = new Time( 15, 50 ); print( t1.before( t2 ) ); print( t1.hours ); print( t2.hours ); print( t1.minutes ); print( t2.minutes ); Similairement __deneSetter__ existe Friday, February 26, 2010 Proprits de lobjet toString(), valueOf() Friday, February 26, 2010 Hritage laide de prototypes Friday, February 26, 2010 Langages orient protype Borning, A. H. The Programming Language Aspects of ThingLab, A Constraint-Oriented Simulation Laboratory. In ACM Transactions on Programming Languages and Systems, 3, 4 (1981) 353-387. Mais aussi Self, Lisaac, Lua, Io, ABCL... Friday, February 26, 2010 Prototype Un objet sert de protype pour la cration dautres objets Un prototype est un objet Un objet est le clone dun autre objet (prototype) Friday, February 26, 2010 f unction Point() { this.x = 0; this.y = 0; this.getX = function() { return this.x }; this.getY = function() { return this.y }; }; Object.create = function( obj ) { var Constructor = function() {}; Constructor.prototype = obj; return new Constructor(); }; var p1 = new Point(); var p2 = Object.create( p1 ); p1.x = 3; p2.x = 15; print( p1.getX() ); print( p2.getX() ); Afche 3 et 15 Friday, February 26, 2010 Hritage (de prototype) function Shape( x, y ) { this.x = x; this.y = y; this.getX = function() { return this.x }; this.getY = function() { return this.y }; } function Circle( x, y, r ) { this.x = x; this.y = y; this.r = r; this.getR = function() { return this.r }; } Circle.prototype = new Shape(); En Java, on aurait crit class Circle extends Shape multiple? Hritage simple ou Hritage simple, un seul prototype associ Friday, February 26, 2010 f unction ColoredCircle( x, y, r, c ) { this.x = x; this.y = y; this.radius = r; this.color = c; this.getColor = function() { return this.color }; } ColoredCircle.prototype = new Circle(); var c1 = new ColoredCircle( 50, 100, 15, "bleu" ); js> for ( var p in c1 ) { print( c1[ p ] ); } y getColor color x radius getRadius getX getY Friday, February 26, 2010 f unction EmptyStackException() { this.message = "Stack is empty"; } EmptyStackException.prototype = new Error( "IllegalState" ); function Stack() { / ... / this.pop= function() { if ( this.isEmpty() ) { throw new EmptyStackException(); } / .... / try { } s.pop(); } } catch ( e ) { if ( e instanceof EmptyStackException ) { print( "exception caught: " + e ); } } Friday, February 26, 2010 Hritage (de prototype) Lhritage est donc dynamique Un objet peut changer de parent dynamiquement... Comment dterminer si la proprit appartient lobjet ou est hrite? for (propr in obj) { if ( obj.hasOwnPerperty( propr ) ) { ... } } Friday, February 26, 2010 Tableaux Friday, February 26, 2010 Tableaux var tbl1= new Array(); var tbl2 = new Array( 99, Okay, true ); tbl2[ 0 ]; / retourne la valeur 99 / tbl2.length; / retourne 3 / tbl2.couleur = Bleu; tbl2.couleur; / retourne Bleu / tbl2.length; / retourne 3! / var tbl3 = [ 99, Okay, true ]; var mat = [ [ 1, 0 ], [ 0, 1 ] ]; mat[ 0 ][ 0 ]; / retourne 1 / mat[ 0 ][ 1 ]; / retourne 0 / tbl2[ 3 ] = -1.0; tbl2.length; / retourne 4 / tbl2.length = 2; var tbl4 = new Array( 10 ); tbl4.length; / retourne 10 !!!! / typeof tbl4[ 0 ]; / retourne undefined !!!! / Friday, February 26, 2010 Tableaux var tbl = new Array( 5 ); tbl[ 0 ] = new Tuple( "Shabana", 1 ); tbl[ 1 ] = new Tuple( "Ashour", 2 ); tbl[ 2 ] = new Tuple( "Palmer", 3 ); tbl[ 3 ] = new Tuple( "Gaultier", 4 ); tbl[ 4 ] = new Tuple( "Lincou", 5 ); tbl.sort( function( a, b ) { if ( a.getFirst() < b.getFirst() ) return -1; else if ( a.getFirst() == b.getFirst() ) return 0; else return 1; } ); toString(), splice( ... ), push( x ), pop(), shift() Friday, February 26, 2010 Objets prdnis Friday, February 26, 2010 Objet global (window) var env = "["; for ( var propr in window ) { env = env + " " + propr; } env = env + " ]"; window.alert( env ); Friday, February 26, 2010 Quelques autres objets prdnis Lenvironnement global est un objet Les variables globales ne sont que des proprits de lobjet global prdnis Lenvironnement contient des objets Number, String et Boolean Date, Math et RegExp Friday, February 26, 2010 Quelques autres objets prdnis Dans un navigateur, lobjet global sappelle window scripts Il fournit un accs programmatique aux Entre autres, la proprit window.document reprsente le document HTML correspondant la page courante Cest le DOM et le sujet du prochain cours! Friday, February 26, 2010 Aspects ngatifs Quil faut connatre, quon devrait viter Friday, February 26, 2010 Variables globales Variables globales!!!! Solution? Crer un objet global et y sauvegarder les variables de lapplication var blogApp = {}; blogApp.background = blue; ... Friday, February 26, 2010 Aspects ngatifs du langage Variables globales!!!! Solution? Utiliser les fermetures Friday, February 26, 2010 Oprateurs de comparaison Abstract equality s1 == s2 si les types ne sont pas les mmes, JavaScript fait une conversion, dont le rsultat pourrait ne pas tre le rsultat souhait Strict equality v1 === v2, v1 !== v2 fait la comparaison strict (compare les rfrences, identit) Friday, February 26, 2010 Mais aussi Absence denvironnement lexical associ aux blocs dnoncs Correction derreurs? automatique return { status: true }; return { status: true }; Friday, February 26, 2010 Mais encore typeof null retourne object Duplication de fonctionalits (fonction, new...) Friday, February 26, 2010 Fermetures Closures Friday, February 26, 2010 Fermeture une fermeture capture des variables de son environnement lexical, ces dernires ne sont pas des variables globales function makeAdder( op ) { return function( value ) { return op + value; }; } js> var add1 = makeAdder( 1 ); js> var add5 = makeAdder( 5 ); js> add1( 1 ); 2 js> add5( 1 ); 6 Friday, February 26, 2010 Fermeture une fermeture capture des variables de son environnement lexical, ces dernires ne sont pas des variables globales function makeFunc() { var name = "bar"; function getName() { return name; } return getName(); } js> name = autre chose; js> var myFunc = makeFunc(); js> myFunc(); bar Friday, February 26, 2010 f unction makePair( f, s ) { var first = f; var second = s; var that = {}; that.getFirst = function() { return first; } that.setFirst = function( f ) { first = f; } that.getSecond = function() { return second; } that.setSecond = function( s ) { second = s; } return that; } js> a = newPair( "Marcel", "Turcotte" ); [object Object] js> b = newPair( "size", 800 ); [object Object] js> a.getFirst(); Marcel js> b.getFirst(); size js> b.setFirst( "width" ); js> b.getFirst(); width js> for ( propr in b ) { print( propr ) } getFirst setFirst getSecond setSecond Friday, February 26, 2010 Dans lexemple de la page prcdente, lobjet ne possde que des proprits dont les valeurs sont des fonctions makePair ont t captures (la fermeture) et sont maintenant partages par les mthodes g etFirst, s etFirst, getSecond et s etSecond de lobjet et ne sont accessibles qu getFirst (et autres mthodes de lobjet) Les variables locales de la fonction Ces variables ne sont pas des proprits Friday, February 26, 2010 La capture de la fermeture de la mthode m akePair ralise les objectifs de lencapsulation de donnes les attributs sont vraiment immuables mcanismes de srialisation (introspection) On peut soi-mme crer des objets dont Cette implmentation court-circuite les Friday, February 26, 2010 Fonctions Deuxime partie Friday, February 26, 2010 Appels de fonction expr () o expression retourne une fonction (un objet dont le prototype est Function.prototype) Friday, February 26, 2010 Function.prototype Une fonction est un objet dont le prototype est Function.prototype (qui est lui-mme li Object.prototype) Friday, February 26, 2010 Appels de fonction Prends quatre formes : appel de mthode appel de de fonction appel de constructeur appel laide de apply this et a rguments seront initialises diffremment Friday, February 26, 2010 Appel de fonction var add = function( x, y ) { return x + y }; var sum = add( 3, 4 ); Lors de linvocation dune fonction t his est li lobjet global Friday, February 26, 2010 Appel dun constructeur function Point() { this.x = 0; this.y = 0; this.getX = function() { return this.x }; this.getY = function() { return this.y }; }; var p1 = new Point(); Lors dun appel un constructeur Un nouvel objet est cr ayant un lien implicite (cach) la proprit p rototype du constructeur (c.-d. une fonction) nouvellement cr this est li lobjet Friday, February 26, 2010 Appel de mthode function Point() { this.x = 0; this.y = 0; this.getX = function() { return this.x }; this.getY = function() { return this.y }; }; var p1 = new Point(); ... x = p1.getX(); Lors de linvocation dune mthode t his est li lobjet Friday, February 26, 2010 Appel laide de apply v ar somme = function() { var i, somme = 0; for ( i=0; i<arguments .length; i += 1 ) { somme += arguments[ i ] ; } return somme; }; var ys = [ 1, 2, 3, 4, 5 ]; somme.apply( null, ys ); / retourne 15 / La mthode apply possde deux paramtre, le premier permet la liaison de t his Friday, February 26, 2010 Appel laide de apply La mthode apply function getName() { return this.name; } possde deux paramtre, le premier permet la liaison de t his var person = { name: "Marcel", height: 178 }; var domain = { name: "uottawa.ca", mask: 255, owner: "U. of Ottawa" }; getName.apply( person ); getName.apply( domain ); Friday, February 26, 2010 Mais encore... Friday, February 26, 2010 Ce qui nas t prsent Expressions rgulires JSON Friday, February 26, 2010 pilogue Friday, February 26, 2010 Revue des concepts Les valeurs ont des types et non les variables Les objets ont des proprits (qui ont des valeurs, qui elles ont des types) dobjets Objets littrals facilite la cration Appels de fonctions par valeur Friday, February 26, 2010 Revue des concepts Programmation oriente prototype Le mcanisme de fermeture permet lencapsulation de donnes en JavaScript (quivalent de variables prives) et objet, sans classes JavaScript est un langage fonctionnel Friday, February 26, 2010 Ressources Standard ECMA-262 ECMAScript Language Specication 3rd edition (December 1999) [ http:// www.ecma-international.org/ publications/standards/Ecma-262.htm ] 2007 developer.mozilla.org/en/docs/ Core_JavaScript_1.5_Reference ] 2007 Core JavaScript 1.5 Reference [ http:// Friday, February 26, 2010 ECMAScript [ http://www.ecmascript-lang.org/ ] 2007 Ressources (suite) Rhino JavaScript for Java [ http:// www.mozilla.org/rhino ] 2007 Venkman JavaScript Debugger project page [http://www.mozilla.org/projects/venkman/ ] 2007 en/docs/JavaScript ] visit le 26-janvier-2008 JavaScript MDC [ http://developer.mozilla.org/ Friday, February 26, 2010 Ressources (suite) Closure Compiler de Google est un outil pour loptimisation, mais surtout la compression de code JavaScript http://code.google.com/closure/compiler Friday, February 26, 2010 Ressources (suite) Doublas Crockford (2008) JavaScript: The Good Parts. OReilly. Friday, February 26, 2010

Find millions of documents on Course Hero - Study Guides, Lecture Notes, Reference Materials, Practice Exams and more. Course Hero has millions of course specific materials providing students with the best way to expand their education.

Below is a small sample set of documents:

12_DOM_Partie_1