Polonais Supporter de River Plate Supporter de River Plate Développeur Développeur Web depuis 1996 (JavaScript, ActiveX, ASP, PHP, SQL Web depuis 1996 (JavaScript, ActiveX, ASP, PHP, SQL Server, MySQL) Server, MySQL) .NET depuis 2001 (C#, VB.NET, ASP.NET, ADO.NET, .NET depuis 2001 (C#, VB.NET, ASP.NET, ADO.NET, XML) XML) Cocoa (Mac OS X) depuis 2002 (Objective-C) Cocoa (Mac OS X) depuis 2002 (Objective-C) Actuellement développeur .NET, trainer et Actuellement développeur .NET, trainer et consultant chez Thales IS consultant chez Thales IS E-mail: E-mail: [email protected][email protected]
Global Consulting Consulting Intégration de systèmes Intégration de systèmes Outsourcing Outsourcing Domaines d’activités Domaines d’activités Finance Finance Industrie Industrie Secteur Public Secteur Public Services Services 4800 employés autour du monde 4800 employés autour du monde Partie intégrante du Groupe Thales Partie intégrante du Groupe Thales http://www.thalesgroup.com/ http://www.thalesgroup.com/
de la raison d’être de Compréhension de la raison d’être de JavaScript JavaScript Résolution pratique de problèmes Résolution pratique de problèmes classiques de développement web, tant du classiques de développement web, tant du côté serveur que client côté serveur que client Le web reste le domaine de prédilection, mais Le web reste le domaine de prédilection, mais n’est pas le seul! n’est pas le seul! Trouver JavaScript bien plus cool :) Trouver JavaScript bien plus cool :)
d’un langage de programmation programmation Java Java C C C++ C++ Connaissances sur l’esprit et fondement de Connaissances sur l’esprit et fondement de la programmation orientée objets la programmation orientée objets
pas à m’interrompre en tout N’hésitez pas à m’interrompre en tout moment pour des questions ou des moment pour des questions ou des suggestions suggestions SVP remplissez le questionnaire de SVP remplissez le questionnaire de satisfaction à la fin du cours! satisfaction à la fin du cours! Mon e-mail est à votre disposition pour de Mon e-mail est à votre disposition pour de plus amples renseignements plus amples renseignements [email protected][email protected]
» « JavaScript, The Definitive Guide » http://www.oreilly.com/catalog/jscript4/ http://www.oreilly.com/catalog/jscript4/ Les exemples de ce cours sont ceux du livre: Les exemples de ce cours sont ceux du livre: http://examples.oreilly.com/jscript4/ http://examples.oreilly.com/jscript4/ MSDN: Scripting Technologies MSDN: Scripting Technologies http://msdn.microsoft.com/scripting/ http://msdn.microsoft.com/scripting/ Netscape’s DevEdge Netscape’s DevEdge http://devedge.netscape.com/central/javascript/ http://devedge.netscape.com/central/javascript/ QuirksMode QuirksMode http://www.quirksmode.org/ http://www.quirksmode.org/
http://www.objenv.com/cetus/oo_jscript.html http://www.objenv.com/cetus/oo_jscript.html Website de Douglas Crockford Website de Douglas Crockford « « The World's Most Misunderstood Programming Language » The World's Most Misunderstood Programming Language » http://www.crockford.com/javascript/javascript.html http://www.crockford.com/javascript/javascript.html Slides Powerpoint du cours Slides Powerpoint du cours http://www.kosmaczewski.net/JavaScript.zip http://www.kosmaczewski.net/JavaScript.zip Sistema Propano Sistema Propano
Javascript est le langage de programmation « le le moins bien compris du monde » moins bien compris du monde » (D. Crockford) (D. Crockford) Puissant et effectif Puissant et effectif pour les tâches simples pour les tâches simples et pour des tâches complexes aussi (une fois qu’on a et pour des tâches complexes aussi (une fois qu’on a compris le « truc ») compris le « truc ») Attention! Les faiblesses sont importantes! Attention! Les faiblesses sont importantes! Pas adapté pour résoudre Pas adapté pour résoudre tous tous les problèmes les problèmes Pas très efficient dans son usage de ressources Pas très efficient dans son usage de ressources Erreurs majeures de design Erreurs majeures de design Différences importantes parmi les implémentations Différences importantes parmi les implémentations
usage général, interprété, non compilé langage à usage général, interprété, non compilé exception: JScript.NET est compilé! exception: JScript.NET est compilé! orienté objets (mais de façon non conventionnelle!) orienté objets (mais de façon non conventionnelle!) peut être incorporé dans d’autres programmes peut être incorporé dans d’autres programmes comme AppleScript comme AppleScript Syntaxe similaire à C, C++ et Java Syntaxe similaire à C, C++ et Java if, for, while... if, for, while... Non-typé Non-typé arrays associatifs similaires à Perl arrays associatifs similaires à Perl Méchanisme d’héritage semblable à Self Méchanisme d’héritage semblable à Self Polymorphisme et messages à la Smalltalk Polymorphisme et messages à la Smalltalk
JavaScript ≠ « Java plus simple » Le nom originel était LiveScript... Le nom originel était LiveScript... Pas développé chez Sun mais chez Netscape Pas développé chez Sun mais chez Netscape Plus grande ressemblance structurelle avec Plus grande ressemblance structurelle avec Lisp, Smalltalk ou Scheme...! Lisp, Smalltalk ou Scheme...! JavaScript n’est pas simple! JavaScript n’est pas simple! mauvaise réputation auprès des « vrais » mauvaise réputation auprès des « vrais » développeurs (C++, Java, etc...) développeurs (C++, Java, etc...) Objectif: détruire ces mythes! Objectif: détruire ces mythes!
1995 Inventé par Brendan Eich chez Netscape en 1995 Histoire complète: Histoire complète: http://wp.netscape.com/comprod/columns/techvision/innovators_be.html http://wp.netscape.com/comprod/columns/techvision/innovators_be.html Première version en Septembre 1995 Première version en Septembre 1995 « LiveScript » pour une béta de Netscape 2.0 « LiveScript » pour une béta de Netscape 2.0 Renommé « JavaScript » en Décembre 1995 Renommé « JavaScript » en Décembre 1995 Suite à un accord entre Netscape et Sun pour utiliser Suite à un accord entre Netscape et Sun pour utiliser une toute nouvelle technologie connue sous le nom de une toute nouvelle technologie connue sous le nom de « Java »... ça vous dit quelque chose? « Java »... ça vous dit quelque chose? Début de la confusion! Début de la confusion!
en Juin 1997 « ECMAScript », standard ECMA 262 « ECMAScript », standard ECMA 262 Aussi standard ISO 16262 Aussi standard ISO 16262 Séparation entre DOM et JavaScript Séparation entre DOM et JavaScript Standardisation du DOM plus longue... Standardisation du DOM plus longue... « Guerre des Browsers » « Guerre des Browsers » Brendan Eich est aujourd’hui architecte du Brendan Eich est aujourd’hui architecte du moteur Gecko, plus connu comme le cœur moteur Gecko, plus connu comme le cœur du projet open-source « Mozilla » du projet open-source « Mozilla »
IE IE JScript JScript ECMA ECMA 1.0 1.0 1995 1995 Boguée, instable Boguée, instable 2 2 3 3 1.0 1.0 1.1 1.1 1996 1996 Stable, Array Stable, Array 3 3 3 3 2.0 2.0 1.2 1997 switch, RegExp 4 4 3.0 1.3 1998 bug fixes 4.5 1 1.4 1.4 1999 1999 seulement serveur seulement serveur 2 2 1.5 2000 exceptions 6, 7 5, 5.5, 6 5, 5.5 3 En vert: En vert: moment clé de la guerre des browsers moment clé de la guerre des browsers En jaune: En jaune: le moment présent; standardisation, stabilisation le moment présent; standardisation, stabilisation
doute, les browsers les plus importants Sans doute, les browsers les plus importants Les différences sont plus importantes au niveau Les différences sont plus importantes au niveau du DOM que du « Core » du langage JavaScript du DOM que du « Core » du langage JavaScript Standard ECMA plus respecté que le W3C Standard ECMA plus respecté que le W3C Les moteurs JavaScript de Mozilla s’appellent Les moteurs JavaScript de Mozilla s’appellent « SpiderMonkey » (C) et « Rhino » (Java) « SpiderMonkey » (C) et « Rhino » (Java) Open-source Open-source http://www.mozilla.org/js http://www.mozilla.org/js Opera, Safari et Konqueror ont aussi excellent Opera, Safari et Konqueror ont aussi excellent support de JavaScript support de JavaScript
Le vrai pouvoir de JavaScript c’est sa capacité Le vrai pouvoir de JavaScript c’est sa capacité d’intervenir dans la page web: d’intervenir dans la page web: Contrôler contenu et apparence Contrôler contenu et apparence document object document object Contrôler le browser Contrôler le browser window object window object Formulaires Formulaires forms collection, onSubmit event forms collection, onSubmit event Interaction avec l’usager Interaction avec l’usager event handlers event handlers Cookies, images, dates, setTimeout(), screen Cookies, images, dates, setTimeout(), screen
PAS faire Pas de possibilités graphiques poussées Pas de possibilités graphiques poussées Sauf celles permises via CSS et le DOM Sauf celles permises via CSS et le DOM Pas de possibilité d’accéder au disque dur local Pas de possibilité d’accéder au disque dur local Sauf avec IE et son objet COM « Scripting.FileSystemObject » Sauf avec IE et son objet COM « Scripting.FileSystemObject » Dans certaines conditions seulement Dans certaines conditions seulement Pas de possibilité de connexion réseau Pas de possibilité de connexion réseau Sauf en utilisant XmlHttpRequest Sauf en utilisant XmlHttpRequest Mozilla, Safari Mozilla, Safari Ou le composant COM « MSXML.XmlHttpRequest » Ou le composant COM « MSXML.XmlHttpRequest » Internet Explorer seulement Internet Explorer seulement Sécurité! Sécurité!
Exemple 1-3 Exemple 1-3 Suite de Fibonacci Suite de Fibonacci Débogage avec « for / in » et « alert » Débogage avec « for / in » et « alert » Pseudo-protocole « javascript: » Pseudo-protocole « javascript: » javascript:5%2 javascript:5%2 javascript:d = new Date(); typeof d; javascript:d = new Date(); typeof d; javascript:s=""; for (i in document) s+=i+":"+document[i] javascript:s=""; for (i in document) s+=i+":"+document[i] +"\n";alert(s); +"\n";alert(s);
de caractères: UNICODE Attention: pas toutes les implémentations de JavaScript le Attention: pas toutes les implémentations de JavaScript le supportent correctement supportent correctement Pour compatibilité descendante: Pour compatibilité descendante: utiliser seulement des caractères ASCII 7 bit utiliser seulement des caractères ASCII 7 bit http://french.joelonsoftware.com/Articles/Unicode.html http://french.joelonsoftware.com/Articles/Unicode.html « Case-sensitive » « Case-sensitive » while ≠ WHILE ≠ While ≠ wHiLe while ≠ WHILE ≠ While ≠ wHiLe Exception: Internet Explorer 3 (!) Exception: Internet Explorer 3 (!) HTML ne l’est pas! HTML ne l’est pas! onClick en HTML onClick en HTML onclick en JavaScript (!) onclick en JavaScript (!)
comme vous voulez Espaces en blanc: comme vous voulez Point-virgule Point-virgule Hautement recommandé Hautement recommandé mais pas obligatoire mais pas obligatoire Commentaires Commentaires Comme C++ et Java: Comme C++ et Java: // Commentaire... // Commentaire... /* /* Commentaire... Commentaire... */ */
Doivent commencer par Doivent commencer par « _ » (underscore) « _ » (underscore) lettre lettre « $ » « $ » ce dernier est supporté depuis JavaScript 1.1 pour être utilisé par ce dernier est supporté depuis JavaScript 1.1 pour être utilisé par des générateurs de code des générateurs de code pas recommandé pas recommandé Mots réservés Mots réservés Liste exhaustive dans le livre que vous recevrez Liste exhaustive dans le livre que vous recevrez En plus de ceux indiqués, il y a des mots « non En plus de ceux indiqués, il y a des mots « non recommandés » pour être utilisés comme identificateurs recommandés » pour être utilisés comme identificateurs
Pas de distinction entre des valeurs entières ou à virgule flottante ou à virgule flottante Tous les nombres sont représentes avec le Tous les nombres sont représentes avec le standard IEEE 754 (64 bit) standard IEEE 754 (64 bit) Virgule flottante± 1.7976 x 10 Virgule flottante± 1.7976 x 10308 308 ± 5 x 10 ± 5 x 10-324 -324 Valeurs entières Valeurs entières ± 2 ± 253 53
« standard » 234 en base 10 234 en base 10 0x 0xEA pour hexadécimal EA pour hexadécimal 0 0352 pour octal 352 pour octal Attention avec ce dernier: pas supporté par toutes les Attention avec ce dernier: pas supporté par toutes les implémentations implémentations Ne jamais écrire un nombre avec un zéro au début, il pourrait Ne jamais écrire un nombre avec un zéro au début, il pourrait être confondu avec une valeur en octal être confondu avec une valeur en octal Virgule flottante: Virgule flottante: 3.14 3.14 .33333333333 .33333333333 354.53e-24 = 354.53E-24 354.53e-24 = 354.53E-24
* / + - * / Méthodes statiques de la classe Math (calquée sur Méthodes statiques de la classe Math (calquée sur l’homonyme de Java) l’homonyme de Java) var y = Math.sin(x); var y = Math.sin(x); var hypot = Math.sqrt(x * x + y * y); var hypot = Math.sqrt(x * x + y * y); Méthode toString() Méthode toString() var y = (34).toString(); // y = "34" var y = (34).toString(); // y = "34" Possible parce que tous les nombres sont implicitement Possible parce que tous les nombres sont implicitement transformés en instances de la classe Number, qui transformés en instances de la classe Number, qui hérite de Object... hérite de Object...
Infinity Infinity Fonction isFinite() pour tester Fonction isFinite() pour tester NaN NaN « Not a Number » « Not a Number » Fonction isNaN() pour tester Fonction isNaN() pour tester NaN ≠ NaN toujours!!! NaN ≠ NaN toujours!!! Nécessaire puisque les variables n’ont pas de type et Nécessaire puisque les variables n’ont pas de type et peuvent contenir n’importe quoi peuvent contenir n’importe quoi Similaire au « Variant » de Visual Basic Similaire au « Variant » de Visual Basic
un type primitif! (≠ Java) Délimités par " " (guillemets) ou ' ' (apostrophes) Délimités par " " (guillemets) ou ' ' (apostrophes) Les deux peuvent être alternés Les deux peuvent être alternés Selon le standard, toute chaîne de caractères Selon le standard, toute chaîne de caractères Unicode est valable Unicode est valable Dans la pratique, éviter les caractères non-ASCII Dans la pratique, éviter les caractères non-ASCII dans votre code dans votre code Utiliser des séquences d’échappement pour les Utiliser des séquences d’échappement pour les caractères spéciaux: caractères spéciaux: \u03A8 \u03A8 Lettre grecque « psi » Lettre grecque « psi » \u7231 \u7231 Chinois simplifié pour « amour » Chinois simplifié pour « amour »
+ Avec l’opérateur + var s = "première partie" + "deuxième partie"; var s = "première partie" + "deuxième partie"; Méthodes et propriétés de la classe String Méthodes et propriétés de la classe String Toutes les chaînes de caractères sont Toutes les chaînes de caractères sont implicitement transformées en instances de la implicitement transformées en instances de la classe String si besoin classe String si besoin var longueur = "exemple".length; var longueur = "exemple".length;
true true false false Comme dans Java, c’est un type (et une Comme dans Java, c’est un type (et une classe) classe) Ce qui n’est pas le cas en C Ce qui n’est pas le cas en C Comme dans C, true = 1 et false = 0 Comme dans C, true = 1 et false = 0 Ce qui n’est pas le cas en Java Ce qui n’est pas le cas en Java
Indique que la variable ne référence rien Le vide, le néant Le vide, le néant Attention: null ≠ 0 Attention: null ≠ 0 Différent de C et C++ Différent de C et C++ Similaire a Java Similaire a Java
ATTENTION ATTENTION var booleen = (null == undefined); // true! var booleen = (null == undefined); // true! var booleen = (null var booleen = (null === === undefined); // false! undefined); // false! Utilisé pour indiquer Utilisé pour indiquer la valeur d’une variable déclarée mais pas utilisée la valeur d’une variable déclarée mais pas utilisée une propriété qui n’existe pas dans un objet une propriété qui n’existe pas dans un objet N’est pas un mot clé mais une variable globale (?) N’est pas un mot clé mais une variable globale (?) Source de confusions et de bugs! Source de confusions et de bugs!
C’est une collection sans ordre de choses nommées nommées Si les choses sont des variables, alors on dit Si les choses sont des variables, alors on dit qu’il s’agit de propriétés qu’il s’agit de propriétés Si ce sont des functions, on parle de méthodes Si ce sont des functions, on parle de méthodes Contrairement à ce qu’on dit, il peut y avoir des Contrairement à ce qu’on dit, il peut y avoir des méthodes et propriétés privées en JavaScript méthodes et propriétés privées en JavaScript Il peut aussi y avoir des méthodes et des propriétés Il peut aussi y avoir des méthodes et des propriétés de classe de classe
habituelle Java: Pour créer un objet, syntaxe habituelle Java: var nouveau = new Object(); var nouveau = new Object(); var objDate = new Date(); var objDate = new Date(); Pour utiliser les membres d’un objet, Pour utiliser les membres d’un objet, syntaxe habituelle Java, avec le « point » syntaxe habituelle Java, avec le « point » document.write("test"); document.write("test"); var n = Math.sin(24); var n = Math.sin(24);
aux « Arrays Les objets JavaScript sont similaires aux « Arrays Associatifs » de Perl: Associatifs » de Perl: var objet = { var objet = { prop1: "test", prop1: "test", prop2: 24 prop2: 24 } } var test = objet.prop2; // retourne 24 var test = objet.prop2; // retourne 24 Mais attention! Ces deux syntaxes sont absolument Mais attention! Ces deux syntaxes sont absolument équivalentes! équivalentes! objet.prop2 objet.prop2 objet["prop2"]; objet["prop2"]; Les objets peuvent être imbriqués les uns dans les Les objets peuvent être imbriqués les uns dans les autres, sans problème autres, sans problème Puissant pour définir des structures de données complexes Puissant pour définir des structures de données complexes
de choses C’est une collection « avec ordre » de choses var a = new Array(); var a = new Array(); a[0] = 1.2; a[0] = 1.2; a[1] = "JavaScript"; a[1] = "JavaScript"; a[2] = true; a[2] = true; var a = new Array(1.2, "JavaScript", true); var a = new Array(1.2, "JavaScript", true); var a = [1.2, "JavaScript", true]; var a = [1.2, "JavaScript", true]; var a = new Array(10); var a = new Array(10); Ce dernier construit un Array avec une longueur de 10 Ce dernier construit un Array avec une longueur de 10 Nombreuses méthodes très utiles pour trier, Nombreuses méthodes très utiles pour trier, ajouter, enlever des éléments ajouter, enlever des éléments
a toujours Le premier élément d’un array a toujours l’index zéro l’index zéro Les index n’ont pas besoin d’être Les index n’ont pas besoin d’être consécutifs: consécutifs: var a = new Array(); var a = new Array(); a[0] = 0; a[0] = 0; a[10000] = 10000; a[10000] = 10000; Seulement deux éléments sont ajoutés à Seulement deux éléments sont ajoutés à l’Array, en non pas 10000.... l’Array, en non pas 10000....
Transforme tous les éléments en string et les Transforme tous les éléments en string et les assemble (inverse de la méthode split() de la classe assemble (inverse de la méthode split() de la classe String) String) reverse() reverse() sort() sort() push() et pop() push() et pop() Permettent d’utiliser un Array comme une pile (stack) Permettent d’utiliser un Array comme une pile (stack) etc... etc...
JavaScript Chaque fonction est un objet à part entière Chaque fonction est un objet à part entière Peut-être passée en paramètre Peut-être passée en paramètre Imbriquée Imbriquée Créée dynamiquement Créée dynamiquement Trois manières identiques de créer des functions: Trois manières identiques de créer des functions: function carre(x) function carre(x) { { return x * x; return x * x; } } var carre = function(x) { return x * x } var carre = function(x) { return x * x } var carre = new Function("x", "return x * x"); var carre = new Function("x", "return x * x"); Cette dernière syntaxe n’est pas recommandée Cette dernière syntaxe n’est pas recommandée
Similaire à celui de Java Similaire à celui de Java RegExp RegExp Donne à JavaScript support natif pour Regular Donne à JavaScript support natif pour Regular Expressions compatibles Perl 5 Expressions compatibles Perl 5 Error Error Utilisé pour lever des Exceptions Utilisé pour lever des Exceptions Objets « wrapper » sur types primitifs Objets « wrapper » sur types primitifs Comme Java Comme Java String, Boolean, Number String, Boolean, Number
Une variable JavaScript peut contenir n’importe quoi Comme un « Variant » en Visual Basic 6.0 Comme un « Variant » en Visual Basic 6.0 Ce code est correct en JavaScript: Ce code est correct en JavaScript: var test; var test; test = 234; test = 234; test = "test"; test = "test"; test = false; test = false; test = new Object(); test = new Object(); Pour de long scripts, adopter une convention pour les noms Pour de long scripts, adopter une convention pour les noms de variables: de variables: var var n nNombre = 234; Nombre = 234; var var s sChaine = "test"; Chaine = "test"; var var b bBooleen = false; Booleen = false; var var o oObjet = new Object(); Objet = new Object(); Pour éviter des erreurs... Pour éviter des erreurs...
déclarée génère une La lecture d’une variable non déclarée génère une erreur erreur // var s; // var s; alert(s); // erreur, pas de déclaration de s alert(s); // erreur, pas de déclaration de s Une assignation à une variable non déclarée force Une assignation à une variable non déclarée force une déclaration implicite d’une variable globale par une déclaration implicite d’une variable globale par JavaScript JavaScript // var n; // var n; n = 24; // n est maintenant une variable globale n = 24; // n est maintenant une variable globale Il est recommandé de Il est recommandé de toujours toujours utiliser « var » utiliser « var »
être locales (niveau Les variables peuvent être locales (niveau d’une fonction) ou globales (par exemple, de d’une fonction) ou globales (par exemple, de toute la page web) toute la page web) Une variable non déclarée est globale par Une variable non déclarée est globale par défaut défaut Il n’y a pas de portée de « bloc » Il n’y a pas de portée de « bloc » Différence majeure avec C, C++ et Java Différence majeure avec C, C++ et Java Attention! Attention!
La plus grande partie des opérateurs de JavaScript sont les mêmes que dans C, C+ JavaScript sont les mêmes que dans C, C+ + et Java + et Java Les règles de priorité sont exactement les Les règles de priorité sont exactement les mêmes mêmes Je vous laisse les voir dans le livre Je vous laisse les voir dans le livre On ne traitera ici que des opérateurs On ne traitera ici que des opérateurs uniques de JavaScript uniques de JavaScript
Ne pas confondre avec == qui est celui d’égalité Ne pas confondre avec == qui est celui d’égalité === est plus stricte que == === est plus stricte que == var egalite = ("1" == true); // true! var egalite = ("1" == true); // true! var identite = ("1" === true); // false! var identite = ("1" === true); // false! Les types primitifs sont comparés par Les types primitifs sont comparés par valeur valeur Les types complexes son comparés par Les types complexes son comparés par référence référence
Copie Copie Deux copies de la valeur Deux copies de la valeur d’origine d’origine Une modification dans la Une modification dans la valeur d’origine répercute valeur d’origine répercute dans la copie dans la copie Passage Passage La fonction reçoit une La fonction reçoit une copie de la valeur copie de la valeur d’origine d’origine Les modifications à Les modifications à l’intérieur de la fonction l’intérieur de la fonction répercutent à l’extérieur répercutent à l’extérieur Comparaison Comparaison Comparaison bit par bit Comparaison bit par bit pour savoir si elles sont pour savoir si elles sont identiques identiques Comparaison pour savoir si Comparaison pour savoir si les références pointent au les références pointent au même objet même objet
que Sert pour effacer un membre d’un objet, que ce soit une propriété ou une méthode ce soit une propriété ou une méthode Rien à voir avec le mot-clé delete de C++ Rien à voir avec le mot-clé delete de C++ JavaScript utilise un ramasse-miettes (garbage JavaScript utilise un ramasse-miettes (garbage collector) pour nettoyer la mémoire collector) pour nettoyer la mémoire
point = { x:123, y:42 }; var contient_x = "x" in point; // true var contient_x = "x" in point; // true var contient_z = "z" in point; // false var contient_z = "z" in point; // false var ts = "toString" in point; var ts = "toString" in point; // true, héritée d’Object // true, héritée d’Object
new Date(); var b1 = d instanceof Date; // true var b1 = d instanceof Date; // true var b2 = d instanceof Object; // true var b2 = d instanceof Object; // true var b3 = d instanceof Number; // false var b3 = d instanceof Number; // false
a instanceof (en quelque sorte) var variable1 = 134; var variable1 = 134; var type = typeof variable1; // type = "number" var type = typeof variable1; // type = "number" Retourne un string avec le nom du type primitif de la Retourne un string avec le nom du type primitif de la variable interrogée: variable interrogée: « string » « string » « number » « number » « boolean » « boolean » « function » « function » « undefined » pour undefined (!) « undefined » pour undefined (!) « object » « object » pour Object, Date, RegExp, et aussi pour pour Object, Date, RegExp, et aussi pour null null (!) (!)
string instanceof retourne un booléen instanceof retourne un booléen comment faire pour connaître le nom de la comment faire pour connaître le nom de la classe d’un objet? classe d’un objet? JavaScript ne possède pas de fonction qui JavaScript ne possède pas de fonction qui retourne le nom de la classe d’un objet retourne le nom de la classe d’un objet Solution faite maison, diapositive suivante! Solution faite maison, diapositive suivante! Seulement pour Internet Explorer 5.5 et 6... Seulement pour Internet Explorer 5.5 et 6...
Test() { { this.variable = ”value"; this.variable = ”value"; } } var test = new Test(); var test = new Test(); alert(obtenirClasse(test)); alert(obtenirClasse(test));
instructions en JavaScript sont extrêmement similaires à celles de Java, C ou C++ similaires à celles de Java, C ou C++ if / else if / else switch switch while / do while while / do while for / break / continue for / break / continue return return try / catch / finally try / catch / finally Quelques exceptions néanmoins: Quelques exceptions néanmoins:
utilise des Dans Java, C ou C++, l’instruction switch utilise des étiquettes « case » fixes qui doivent pouvoir être étiquettes « case » fixes qui doivent pouvoir être évaluées à des entiers au moment de la compilation évaluées à des entiers au moment de la compilation En JavaScript, elles n’ont aucune contrainte: En JavaScript, elles n’ont aucune contrainte: switch (variable) switch (variable) { { case 60*60*24: case 60*60*24: break; break; case 'string': case 'string': break; break; case false: case false: break; break; default: default: break; break; } }
parcourir un Array ou JavaScript permet de parcourir un Array ou un Object avec une énumération un Object avec une énumération var obj = { prop1: 24, prop2: true }; var obj = { prop1: 24, prop2: true }; var s = ""; var s = ""; for (var index in obj) for (var index in obj) { { s = index + " : " + obj[index]; s = index + " : " + obj[index]; alert(s); alert(s); } }
constituent le cœur de JavaScript Souvent le sujet le moins bien compris Souvent le sujet le moins bien compris Trois manières de les créer: Trois manières de les créer: function carre(x) function carre(x) { { return x * x; return x * x; } } var carre = function(x) { return x * x } var carre = function(x) { return x * x } var carre = new Function("x", "return x * x"); var carre = new Function("x", "return x * x"); Les fonctions peuvent faire usage de Les fonctions peuvent faire usage de récursivité récursivité
fonctions peuvent s’imbriquer: function hypothenuse(a, b) function hypothenuse(a, b) { { function carre(x) function carre(x) { { return x * x; return x * x; } } return Math.sqrt(carre(a) + carre(b)); return Math.sqrt(carre(a) + carre(b)); } }
Les fonctions peuvent être manipulées comme des variables normales: comme des variables normales: var a = new Array(3); var a = new Array(3); a[0] = function(x) { return x * x; } a[0] = function(x) { return x * x; } a[1] = 20; a[1] = 20; a[2] = a[0](a[1]); // a[2] = 400 a[2] = a[0](a[1]); // a[2] = 400 Exemple 7-2 Exemple 7-2
fonctions ne JavaScript n’étant pas typé, les fonctions ne se soucient ni du nombre ni du type des se soucient ni du nombre ni du type des arguments, ni du type de la valeur de retour arguments, ni du type de la valeur de retour Une fonction sans valeur de retour (« void ») Une fonction sans valeur de retour (« void ») retourne « undefined » retourne « undefined » Une fonction accepte un nombre indéterminé de Une fonction accepte un nombre indéterminé de paramètres, de n’importe quel type paramètres, de n’importe quel type Il existe un objet spécial « arguments » pour Il existe un objet spécial « arguments » pour prendre soin de cet aspect particulier... prendre soin de cet aspect particulier...
{ function f(x, y, z) { if (arguments.length != 3) { if (arguments.length != 3) { throw new Error("La fonction attend 3 arguments"); throw new Error("La fonction attend 3 arguments"); } } } } function max() { function max() { var m = Number.NEGATIVE_INFINITY; var m = Number.NEGATIVE_INFINITY; for (var i = 0; i < arguments.length; i++) { for (var i = 0; i < arguments.length; i++) { if (arguments[i] > m) { if (arguments[i] > m) { m = arguments[i]; m = arguments[i]; } } } } return m; return m; } }
var nbParametres = params.length; var nbParametres = params.length; var nbAttendu = params.callee.length; var nbAttendu = params.callee.length; if (nbParametres != nbAttendu) if (nbParametres != nbAttendu) { { throw new Error("La fonction attend un nombre different throw new Error("La fonction attend un nombre different d'arguments"); d'arguments"); } } } }
objets un langage orienté objets Malgré l’opinion des puritains Malgré l’opinion des puritains Néanmoins, fonctionnement singulier Néanmoins, fonctionnement singulier « prototypes » « prototypes » Il n’existe pas de « classe »: on définit un objet Il n’existe pas de « classe »: on définit un objet « prototype » qui sera copié dans la mémoire chaque « prototype » qui sera copié dans la mémoire chaque fois qu’on appellera « new » fois qu’on appellera « new » Aussi Lua, NewtonScript et Self utilisent ce moyen, Aussi Lua, NewtonScript et Self utilisent ce moyen, entre autres langages entre autres langages http://www.dekorte.com/Proto/Chart.html http://www.dekorte.com/Proto/Chart.html
classe function Rectangle(large, haut) { function Rectangle(large, haut) { this.largeur = large; this.largeur = large; this.hauteur = haut; this.hauteur = haut; } } ainsi définies, largeur et hauteur sont des ainsi définies, largeur et hauteur sont des propriétés publiques (voir plus loin pour des propriétés publiques (voir plus loin pour des propriétés privées) propriétés privées) Instanciation Instanciation var oRectangle1 = new Rectangle(13, 32); var oRectangle1 = new Rectangle(13, 32);
qu’une Une méthode n’est rien d’autre qu’une variable de type function attachée a un objet variable de type function attachée a un objet via son « prototype » via son « prototype » Le mot-clé « this » permet de faire référence Le mot-clé « this » permet de faire référence à l’objet courant: à l’objet courant: Rectangle.prototype.methode = function() { Rectangle.prototype.methode = function() { var a = 24; var a = 24; return a * this.largeur; return a * this.largeur; } }
classe ressemble à une Une méthode de classe ressemble à une méthode globale, mais elle est rattachée à méthode globale, mais elle est rattachée à une classe: une classe: function Rectangle() { function Rectangle() { // corps de la "classe" // corps de la "classe" } } Rectangle.methodeClasse = function() { Rectangle.methodeClasse = function() { return false; return false; } }
n’a pas des mots-clés JavaScript n’a pas des mots-clés « private », « protected » ou « public »; mais « private », « protected » ou « public »; mais il offre la possibilité de cacher certains il offre la possibilité de cacher certains membres d’une classe avec des syntaxes membres d’une classe avec des syntaxes particulières! particulières! Ceci n’est pas connu du grand public! (Merci Ceci n’est pas connu du grand public! (Merci Douglas Crockford!) Douglas Crockford!)
this.variablePublique1 = false; this.variablePublique1 = false; this.variablePublique2 = 24; this.variablePublique2 = 24; this.methodePublique1 = function() { this.methodePublique1 = function() { // corps de la méthode publique 1 // corps de la méthode publique 1 } } } } Classe.prototype.methodePublique2 = function() { Classe.prototype.methodePublique2 = function() { // corps de la méthode publique 2 // corps de la méthode publique 2 } } Classe.prototype.publique3 = Classe_publique3; Classe.prototype.publique3 = Classe_publique3; function Classe_publique3() { function Classe_publique3() { // corps de la méthode publique 3 // corps de la méthode publique 3 } }
var variablePrivee1 = false; var variablePrivee1 = false; var variablePrivee2 = 24; var variablePrivee2 = 24; function methodePrivee1 { function methodePrivee1 { // corps de la méthode privee 1 // corps de la méthode privee 1 } } } }
function Base() { // Définition des membres de la fonction // Définition des membres de la fonction } } function Classe() { function Classe() { this.variablePublique1 = false; this.variablePublique1 = false; this.methodePublique = function() { this.methodePublique = function() { // corps de la méthode publique // corps de la méthode publique } } } } Classe.prototype = new Base(); Classe.prototype = new Base();
constructor Est un pointer vers la function d’origine (pas Est un pointer vers la function d’origine (pas confondre avec prototype) confondre avec prototype) toString() toString() Retourne une description de l’objet Retourne une description de l’objet Peut être surchargée et « overridden » Peut être surchargée et « overridden » valueOf() valueOf() Retourne une valeur primitive de l’objet Retourne une valeur primitive de l’objet Généralement un string ou un number Généralement un string ou un number
Classe « Circle » dans l’exemple 8-5 Classe pour nombres complexes dans Classe pour nombres complexes dans l’exemple 8-6 l’exemple 8-6 Partie cliente du système Propano Partie cliente du système Propano
JavaScript est un langage Etant donné que JavaScript est un langage non-typé, des problèmes se posent quand non-typé, des problèmes se posent quand on a besoin d’une quelconque valeur dans on a besoin d’une quelconque valeur dans un autre type un autre type Certaines conversions sont automatiques Certaines conversions sont automatiques Par exemple, vers un String Par exemple, vers un String Différents cas possibles: Différents cas possibles:
null null Error Error « String » « String » String String « » (string vide) « » (string vide) String String 0 (zéro) 0 (zéro) Number Number NaN NaN Number Number Infinity Infinity Number Number Negative Infinity Negative Infinity Number Number Nombre quelconque Nombre quelconque Number Number true true Boolean Boolean false false Boolean Boolean
Window L’objet Document L’objet Document Formulaires Formulaires Le DOM (Document Object Model) Le DOM (Document Object Model) CSS et DHTML CSS et DHTML Events Events
Window L’objet Document L’objet Document Formulaires Formulaires Le DOM (Document Object Model) Le DOM (Document Object Model) CSS et DHTML CSS et DHTML Events Events
execute C’est l’objet « global » lorsque l’on execute JavaScript dans un browser JavaScript dans un browser Racine de la hiérarchie d’objets Racine de la hiérarchie d’objets Enorme quantité de méthodes et propriétés Enorme quantité de méthodes et propriétés fondamentales: fondamentales:
au site map'; return onmouseover="status='Aller au site map'; return true;">Site map</a> true;">Site map</a> defaultStatus: texte montré dans la ligne de defaultStatus: texte montré dans la ligne de status par défaut status par défaut
var d = new Date(); var d = new Date(); var h = d.getHours(); var h = d.getHours(); var m = d.getMinutes(); var m = d.getMinutes(); var t = h + ":" + m; var t = h + ":" + m; defaultStatus = t; defaultStatus = t; setTimeout("displayTime()", 60000); setTimeout("displayTime()", 60000); } }
Reçu son nom de Netscape Navigator, mais est implémenté par tous les browsers est implémenté par tous les browsers Plusieurs propriétés intéressantes: Plusieurs propriétés intéressantes: appName appName appVersion appVersion userAgent userAgent
Donne information sur la taille et les couleurs supportées par l’écran couleurs supportées par l’écran width width height height availWidth availWidth availHeight availHeight colorDepth colorDepth
go() length length Pour des raisons de sécurité, il n’est pas Pour des raisons de sécurité, il n’est pas possible de lire le contenu de l’Array possible de lire le contenu de l’Array « History » « History »
Window L’objet Document L’objet Document Formulaires Formulaires Le DOM (Document Object Model) Le DOM (Document Object Model) CSS et DHTML CSS et DHTML Events Events
dans cette section Les méthodes décrites dans cette section sont les plus basiques: elles forment un sont les plus basiques: elles forment un standard de facto appelé habituellement standard de facto appelé habituellement DOM de niveau zéro. DOM de niveau zéro. Première implémentation en Netscape 2 Première implémentation en Netscape 2 Pour l’utiliser, les objets ont un attribut Pour l’utiliser, les objets ont un attribut « name » « name » Exemple 14-1 pour un exemple important! Exemple 14-1 pour un exemple important!
Contient des références a toutes les images contenues dans le document contenues dans le document La propriete « src » peut être lue et écrite! La propriete « src » peut être lue et écrite!
cette façon, dynamiquement, des images dynamiquement, des images Exemple 14-3 pour préchargement des Exemple 14-3 pour préchargement des images... images...
Window L’objet Document L’objet Document Formulaires Formulaires Le DOM (Document Object Model) Le DOM (Document Object Model) CSS et DHTML CSS et DHTML Events Events
Array avec tous les éléments du formulaire Tous les élements ont les propriétés Tous les élements ont les propriétés suivantes (au moins) suivantes (au moins) type type name name form form value value
Window L’objet Document L’objet Document Formulaires Formulaires Le DOM (Document Object Model) Le DOM (Document Object Model) CSS et DHTML CSS et DHTML Events Events
Programming Interface (API) C’est une Application Programming Interface (API) pour représenter un document pour représenter un document Par exemple, mais pas seulement, un document HTML Par exemple, mais pas seulement, un document HTML XML aussi! XML aussi! Défini par le W3C Défini par le W3C N’est pas N’est pas complètement complètement implémenté dans aucun implémenté dans aucun browser browser Les derniers browsers le font presque: Les derniers browsers le font presque: Mozilla 1.6 Mozilla 1.6 Internet Explorer 6 Internet Explorer 6
être indépendant du Le DOM est conçu pour être indépendant du langage langage JavaScript JavaScript VBScript VBScript Python Python Tcl Tcl etc... etc...
» Le DOM est composé de « Nodes » Le Node de la racine est le « Document » Le Node de la racine est le « Document » Types de nodes: Types de nodes: Node.ELEMENT_NODE = 1 Node.ELEMENT_NODE = 1 Node.TEXT_NODE = 3 Node.TEXT_NODE = 3 Node.DOCUMENT_NODE = 9 Node.DOCUMENT_NODE = 9 Node.COMMENT_NODE = 8 Node.COMMENT_NODE = 8 Node.DOCUMENT_FRAGMENT_NODE = 11 Node.DOCUMENT_FRAGMENT_NODE = 11 Node.ATTRIBUTE_NODE = 2 Node.ATTRIBUTE_NODE = 2
le « DOM Niveau Zéro » On a vu le « DOM Niveau Zéro » Le W3C a défini deux niveaux: Le W3C a défini deux niveaux: « Level 1 », défini en Octobre 1998 « Level 1 », défini en Octobre 1998 « Level 2 », Novembre 2001 « Level 2 », Novembre 2001 « Level 3 » est encore en cours de réalisation « Level 3 » est encore en cours de réalisation Chaque niveau (version) apporte extensions Chaque niveau (version) apporte extensions à l’API avec compatibilité descendante à l’API avec compatibilité descendante
Mozilla a le meilleur, toutes catégories Mozilla a le meilleur, toutes catégories confondues confondues Internet Explorer 6 le fait bien Internet Explorer 6 le fait bien Le modèle d’events, par contre, est Le modèle d’events, par contre, est complètement différent complètement différent « document.implementation.hasFeature » « document.implementation.hasFeature »
Window L’objet Document L’objet Document Formulaires Formulaires Le DOM (Document Object Model) Le DOM (Document Object Model) CSS et DHTML CSS et DHTML Events Events
absolu positionnement absolu des des objets sur la page objets sur la page position position top, left, bottom, right top, left, bottom, right width, height width, height z-index z-index display, visibility display, visibility overflow overflow
Window L’objet Document L’objet Document Formulaires Formulaires Le DOM (Document Object Model) Le DOM (Document Object Model) CSS et DHTML CSS et DHTML Events Events
Les éléments d’une page web génèrent des events pour signaler que quelque chose events pour signaler que quelque chose d’important est arrivé d’important est arrivé Les « event handlers » permettent de les Les « event handlers » permettent de les intercepter et ainsi executer du code intercepter et ainsi executer du code arbitrairement arbitrairement
« L’originel » qui fait partie du DOM Niveau « L’originel » qui fait partie du DOM Niveau Zéro Zéro « Le standard » W3C « Le standard » W3C Mozilla et Netscape seulement Mozilla et Netscape seulement « Internet Explorer » « Internet Explorer » Incroyable mais vrai Incroyable mais vrai « Netscape 4 » « Netscape 4 » Heureusement plus un problème Heureusement plus un problème
Attributes en HTML Attributes en HTML <input type="button" name="bouton" <input type="button" name="bouton" onclick="alert('Merci!')"> onclick="alert('Merci!')"> Propriétés en JavaScript Propriétés en JavaScript bouton.onclick = alert('Merci!'); bouton.onclick = alert('Merci!');
Modèle plus complexe et complet « Propagation » des events: trois phases « Propagation » des events: trois phases Capture: Les ancestors du « target » node Capture: Les ancestors du « target » node (celui qui reçoit l’event), s’ils ont un event (celui qui reçoit l’event), s’ils ont un event handler correspondant, réagissent handler correspondant, réagissent Le target node réagit (comme dans le DOM Le target node réagit (comme dans le DOM Level 0) Level 0) « Bubbling » (pas tous les events): l’event est « Bubbling » (pas tous les events): l’event est renvoyé au Document de nouveau renvoyé au Document de nouveau
la Event.stopPropagation() permet d’arreter la propagation d’un event propagation d’un event Modèle semble compliqué... mais permet de Modèle semble compliqué... mais permet de centraliser le management des events centraliser le management des events On peut régistrer plus d’un handler par On peut régistrer plus d’un handler par event (différence avec le DOM Level 0) event (différence avec le DOM Level 0) addEventListener() addEventListener()
5.5 et 6 Versions 4, 5, 5.5 et 6 Classe « Event »: Classe « Event »: type type srcElement srcElement button button clientX, clientY (par rapport à la fenêtre) clientX, clientY (par rapport à la fenêtre) offsetX, offsetY (par rapport à l’objet) offsetX, offsetY (par rapport à l’objet) altKey, ctrlKey, shiftKey altKey, ctrlKey, shiftKey keyCode keyCode ... ... « window.event » est un objet global de type Event « window.event » est un objet global de type Event
n’y a pas de « capturing » mais il y a Il n’y a pas de « capturing » mais il y a « bubbling » (similaire au modèle W3C) « bubbling » (similaire au modèle W3C) attachEvent() attachEvent() detachEvent() detachEvent()
akosma
cyberagentdevelopers
akexorcist
nikinusu
yuki_ink
shujisado
kazzpapa3
4su_para
trishagee
tenshoku_draft
shift_evolve
tsumita
tadaken3
addyosmani
danielanewman
kevinliebholz
garrettdimon
mraible
mongodb
rasmusluckow
brettharned
tammyeverts
tenderlove
rocio
![images[] images[] Contient des références a toutes les images](https://files.speakerdeck.com/presentations/23854be5e9c14a949faf552eaf2498e0/slide_114.jpg){kind=link}
![elements[] elements[] Array avec tous les éléments du formulaire](https://files.speakerdeck.com/presentations/23854be5e9c14a949faf552eaf2498e0/slide_118.jpg){kind=link}
![elements[] (2) elements[] (2) Quasiment tous les éléments ont](https://files.speakerdeck.com/presentations/23854be5e9c14a949faf552eaf2498e0/slide_119.jpg){kind=link}
![elements[] (3) elements[] (3) Objet HTML type Button Button <input](https://files.speakerdeck.com/presentations/23854be5e9c14a949faf552eaf2498e0/slide_120.jpg){kind=link}
![elements[] (4) elements[] (4) Objet HTML type Radio Radio <input](https://files.speakerdeck.com/presentations/23854be5e9c14a949faf552eaf2498e0/slide_121.jpg){kind=link}
