Cours de JavaScript - Speaker Deck

Slide 1

Slide 1 text

JavaScript JavaScript Adrian Kosmaczewski Adrian Kosmaczewski

Slide 2

Slide 2 text

Adrian Kosmaczewski Adrian Kosmaczewski  Argentin, Suisse, Polonais Argentin, Suisse, 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]

Slide 3

Slide 3 text

Thales Information Systems Thales Information Systems  Fournisseur Global Fournisseur 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/

Slide 4

Slide 4 text

Objectif de ce cours Objectif de ce cours  Compréhension 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 :)

Slide 5

Slide 5 text

Conditions Conditions  Connaissance préalable d’un langage de Connaissance préalable 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

Slide 6

Slide 6 text

Votre feedback est important! Votre feedback est important!  N’hésitez 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]

Slide 7

Slide 7 text

Ressources Ressources  O’Reilly’s O’Reilly’s « JavaScript, The Definitive Guide » « 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/

Slide 8

Slide 8 text

Ressources (2) Ressources (2)  Cetus Cetus  http://www.objenv.com/cetus/oo_javascript.html http://www.objenv.com/cetus/oo_javascript.html  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

Slide 9

Slide 9 text

Sistema Propano Sistema Propano  Système de gestion de contenus web Système de gestion de contenus web  Interface DHTML = JavaScript + DOM + CSS Interface DHTML = JavaScript + DOM + CSS  Inspirée sur NeXT Inspirée sur NeXT  Testé sur Internet Explorer 6, Gecko (Netscape 7, Mozilla 1.6, Firefox Testé sur Internet Explorer 6, Gecko (Netscape 7, Mozilla 1.6, Firefox 0.9), Safari 1.2, Opera 7 0.9), Safari 1.2, Opera 7  Licence LGPL, © Adrian Kosmaczewski Licence LGPL, © Adrian Kosmaczewski  Utilisation complètement libre Utilisation complètement libre  Encore en phase de développement Encore en phase de développement  Manque une partie importante côté serveur et certaines fonctionnalités Manque une partie importante côté serveur et certaines fonctionnalités client client  Commentaires en Espagnol Commentaires en Espagnol  www.kosmaczewski.net/Propano/ www.kosmaczewski.net/Propano/  Code source: Code source: www.kosmaczewski.net/Propano.zip www.kosmaczewski.net/Propano.zip

Slide 10

Slide 10 text

Structure du cours Structure du cours  Jour 1: Plutôt théorique... Jour 1: Plutôt théorique...  « Core » JavaScript « Core » JavaScript  Histoire, syntaxe, possibilités Histoire, syntaxe, possibilités  JavaScript 1.5 seulement JavaScript 1.5 seulement  Jour 2: Plutôt pratique... Jour 2: Plutôt pratique...  « Client-side » JavaScript « Client-side » JavaScript  Internet Explorer 6 et Mozilla 1.6 / Netscape 7 Internet Explorer 6 et Mozilla 1.6 / Netscape 7  Document Object Model, XML, Standards Document Object Model, XML, Standards  Références à d’autres implémentations Références à d’autres implémentations  Flash MX ActionScript Flash MX ActionScript  JScript.NET JScript.NET  JScript du côté du serveur (ASP « classique ») JScript du côté du serveur (ASP « classique »)

Slide 11

Slide 11 text

Sommaire Jour 1 Sommaire Jour 1  Introduction Introduction  Syntaxe de base Syntaxe de base  JavaScript avancé JavaScript avancé

Slide 12

Slide 12 text

Sommaire Jour 1 Sommaire Jour 1  Introduction Introduction  Syntaxe de base Syntaxe de base  JavaScript avancé JavaScript avancé

Slide 13

Slide 13 text

Définitions Définitions  Javascript est le langage de programmation « 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

Slide 14

Slide 14 text

Définitions (formelles) Définitions (formelles)  JavaScript: JavaScript:  langage à 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

Slide 15

Slide 15 text

Mythes Mythes  JavaScript ≠ « Java plus simple » 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!

Slide 16

Slide 16 text

Histoire Histoire  Inventé par Brendan Eich chez Netscape en 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!

Slide 17

Slide 17 text

Histoire (2) Histoire (2)  Standardisé en Juin 1997 Standardisé 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 »

Slide 18

Slide 18 text

Evolution Evolution Version Version Année Année Nouveautés Nouveautés NS NS 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

Slide 19

Slide 19 text

Mozilla & Internet Explorer Mozilla & Internet Explorer  Sans 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

Slide 20

Slide 20 text

Exemple Exemple Factorials Factorials <script language="JavaScript"> document.write("<h2>Table of Factorials</h2>"); document.write("<h2>Table of Factorials</h2>"); for(i = 1, fact = 1; i < 10; i++, fact *= i) { for(i = 1, fact = 1; i < 10; i++, fact *= i) { document.write(i + "! = " + fact); document.write(i + "! = " + fact); document.write("<br>"); document.write("<br>"); } }

Slide 21

Slide 21 text

Ce que JavaScript PEUT faire Ce que JavaScript PEUT faire  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

Slide 22

Slide 22 text

Ce qu’il NE PEUT PAS faire Ce qu’il NE PEUT 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é!

Slide 23

Slide 23 text

Exploration Exploration  Calcul de crédit Calcul de crédit  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);

Slide 24

Slide 24 text

Sommaire Jour 1 Sommaire Jour 1  Introduction Introduction  Syntaxe de base Syntaxe de base  JavaScript avancé JavaScript avancé

Slide 25

Slide 25 text

Syntaxe de base Syntaxe de base  Structure Lexicale Structure Lexicale  Types de données Types de données  Variables Variables  Opérateurs Opérateurs  Instructions Instructions  Fonctions Fonctions

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Structure Lexicale Structure Lexicale  Jeu de caractères: UNICODE Jeu 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 (!)

Slide 28

Slide 28 text

Structure Lexicale (2) Structure Lexicale (2)  Espaces en blanc: 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... */ */

Slide 29

Slide 29 text

Structure Lexicale (3) Structure Lexicale (3)  Identificateurs Identificateurs  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

Slide 30

Slide 30 text

Syntaxe de base Syntaxe de base  Structure Lexicale Structure Lexicale  Types de données Types de données  Mais n’était-ce un langage non-typé? Mais n’était-ce un langage non-typé?  Variables Variables  Opérateurs Opérateurs  Instructions Instructions  Fonctions Fonctions

Slide 31

Slide 31 text

Types de données Types de données  Même si c’est un langage non-typé, JavaScript Même si c’est un langage non-typé, JavaScript reconnaît: reconnaît:  Types « primitifs » Types « primitifs »  number number  string string  boolean boolean  null & undefined null & undefined  Types « complexes » Types « complexes »  Object (collection dans le désordre) Object (collection dans le désordre)  Array (collection ordonnée) Array (collection ordonnée)  Functions (c’est un objet à part entière) Functions (c’est un objet à part entière)  Number, String, Boolean (!) Number, String, Boolean (!)  Date, RegExp, Error, Math... Date, RegExp, Error, Math...

Slide 32

Slide 32 text

number number  Pas de distinction entre des valeurs entières 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

Slide 33

Slide 33 text

number (2) number (2)  Ecriture « standard » Ecriture « 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

Slide 34

Slide 34 text

number (3) number (3)  Opérations Opérations  + - * / + - * /  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...

Slide 35

Slide 35 text

number (4) number (4)  Valeurs spéciales Valeurs spéciales  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

Slide 36

Slide 36 text

string string  C’est un type primitif! (≠ Java) C’est 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 »

Slide 37

Slide 37 text

string (2) string (2)  Autres séquences d’échappement utiles: Autres séquences d’échappement utiles:  \n (nouvelle ligne) \n (nouvelle ligne)  \r (retour chariot) \r (retour chariot)  \t (tabulation) \t (tabulation)  \" (guillemet) \" (guillemet)  \' (apostrophe) \' (apostrophe)  \\ (backslash) \\ (backslash)  Identiques au langage C Identiques au langage C

Slide 38

Slide 38 text

string (3) string (3)  Concaténation Concaténation  Avec l’opérateur + 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;

Slide 39

Slide 39 text

boolean boolean  Deux valeurs possibles: Deux valeurs possibles:  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

Slide 40

Slide 40 text

null null  Indique que la variable ne référence rien 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

Slide 41

Slide 41 text

undefined undefined  undefined ≠ null undefined ≠ null  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!

Slide 42

Slide 42 text

Object Object  C’est une collection sans ordre de choses 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

Slide 43

Slide 43 text

Object (2) Object (2)  Pour créer un objet, syntaxe 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);

Slide 44

Slide 44 text

Object (3) Object (3)  Les objets JavaScript sont similaires 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

Slide 45

Slide 45 text

Array Array  C’est une collection « avec ordre » 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

Slide 46

Slide 46 text

Array (2) Array (2)  Le premier élément d’un array 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....

Slide 47

Slide 47 text

Array (3) Array (3)  Méthodes: Méthodes:  join() join()  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...

Slide 48

Slide 48 text

Function Function  Code exécutable par JavaScript Code exécutable par 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

Slide 49

Slide 49 text

Autres Objets Importants Autres Objets Importants  Date Date  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

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Variables Variables  Une variable JavaScript peut contenir n’importe quoi 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...

Slide 52

Slide 52 text

Variables (2) Variables (2)  La lecture d’une variable non 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 »

Slide 53

Slide 53 text

Portée des variables Portée des variables  Les variables peuvent ê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!

Slide 54

Slide 54 text

Portée des variables (2) Portée des variables (2) var portee = "global"; var portee = "global"; function test() function test() { { alert(portee); alert(portee); var portee = "local"; var portee = "local"; alert(portee); alert(portee); } } test(); test();

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Opérateurs Opérateurs  La plus grande partie des opérateurs de 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

Slide 57

Slide 57 text

=== ===  C’est l’opérateur d’identité C’est l’opérateur d’identité  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

Slide 58

Slide 58 text

Par valeur ou par référence? Par valeur ou par référence? Type Copié par Passé par Comparé par Number Number Valeur Valeur Valeur Valeur Valeur Valeur Boolean Boolean Valeur Valeur Valeur Valeur Valeur Valeur String String Immutable Immutable Immutable Immutable Valeur Valeur Object Object Référence Référence Référence Référence Référence Référence

Slide 59

Slide 59 text

Copié, Passé, Comparé? Copié, Passé, Comparé? Par Valeur Par 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

Slide 60

Slide 60 text

delete delete  Sert pour effacer un membre d’un 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

Slide 61

Slide 61 text

in in var point = { x:123, y:42 }; var 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

Slide 62

Slide 62 text

instanceof instanceof var d = new Date(); var d = 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

Slide 63

Slide 63 text

typeof typeof  Similaire a instanceof (en quelque sorte) Similaire 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 (!) (!)

Slide 64

Slide 64 text

Tip Tip  typeof retourne un string typeof retourne un 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...

Slide 65

Slide 65 text

Tip (2) Tip (2) function obtenirClasse(objet) { function obtenirClasse(objet) { if(objet) { if(objet) { // ActiveXObjects dans IE n’ont pas de propriete constructor // ActiveXObjects dans IE n’ont pas de propriete constructor if (ActiveXObject && (objet instanceof ActiveXObject)) { if (ActiveXObject && (objet instanceof ActiveXObject)) { return "ActiveXObject"; return "ActiveXObject"; } else { } else { // utiliser une Regular Expression // utiliser une Regular Expression var constructeur = objet.constructor.toString(); var constructeur = objet.constructor.toString(); if (constructeur.match(/function\s*(.*?)\s*\(/)) { if (constructeur.match(/function\s*(.*?)\s*\(/)) { return RegExp.$1; return RegExp.$1; } else { } else { return typeof(objet); return typeof(objet); } } } } } else { } else { return null; return null; } } } }

Slide 66

Slide 66 text

Tip (3) Tip (3)  Usage: Usage: function Test() function Test() { { this.variable = ”value"; this.variable = ”value"; } } var test = new Test(); var test = new Test(); alert(obtenirClasse(test)); alert(obtenirClasse(test));

Slide 67

Slide 67 text

Slide 68

Slide 68 text

Instructions Instructions  Les instructions en JavaScript sont extrêmement Les 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:

Slide 69

Slide 69 text

switch switch  Dans Java, C ou C++, l’instruction switch 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; } }

Slide 70

Slide 70 text

for / in for / in  JavaScript permet de 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); } }

Slide 71

Slide 71 text

Slide 72

Slide 72 text

Fonctions Fonctions  Elles constituent le cœur de JavaScript Elles 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é

Slide 73

Slide 73 text

Fonctions (2) Fonctions (2)  Les fonctions peuvent s’imbriquer: Les 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)); } }

Slide 74

Slide 74 text

Fonctions (3) Fonctions (3)  Les fonctions peuvent être manipulées 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

Slide 75

Slide 75 text

Fonctions (4) Fonctions (4)  JavaScript n’étant pas typé, les 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...

Slide 76

Slide 76 text

Fonctions (5): Arguments Fonctions (5): Arguments function f(x, y, z) { 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; } }

Slide 77

Slide 77 text

Fonctions (6) Fonctions (6) function check(params) function check(params) { { 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"); } } } }

Slide 78

Slide 78 text

Sommaire Jour 1 Sommaire Jour 1  Introduction Introduction  Syntaxe de base Syntaxe de base  JavaScript avancé JavaScript avancé

Slide 79

Slide 79 text

JavaScript avancé JavaScript avancé  Objets Objets  Conversions entre différents types de Conversions entre différents types de données données

Slide 80

Slide 80 text

JavaScript avancé JavaScript avancé  Objets Objets  Conversions entre différents types de Conversions entre différents types de données données

Slide 81

Slide 81 text

Objets Objets  JavaScript JavaScript est est un langage orienté 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

Slide 82

Slide 82 text

Objets (2) Objets (2)  Création d’une classe Création d’une 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);

Slide 83

Slide 83 text

Méthodes d’instance Méthodes d’instance  Une méthode n’est rien d’autre 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; } }

Slide 84

Slide 84 text

Méthodes de classe Méthodes de classe  Une méthode de 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; } }

Slide 85

Slide 85 text

Membres publiques et privées Membres publiques et privées  JavaScript 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!)

Slide 86

Slide 86 text

Membres publiques Membres publiques function Classe() { function Classe() { 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 } }

Slide 87

Slide 87 text

Membres privés Membres privés function Classe() { function Classe() { 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 } } } }

Slide 88

Slide 88 text

Héritage Héritage  Très simple: Très simple: function Base() { 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();

Slide 89

Slide 89 text

Propriétés et méthodes utiles Propriétés et méthodes utiles  constructor 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

Slide 90

Slide 90 text

Exemples Exemples  Classe « Circle » dans l’exemple 8-5 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

Slide 91

Slide 91 text

JavaScript avancé JavaScript avancé  Objets Objets  Conversions entre différents types de Conversions entre différents types de données données

Slide 92

Slide 92 text

Conversions de données Conversions de données  Etant donné que 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:

Slide 93

Slide 93 text

Conversion vers String Conversion vers String undefined undefined « undefined » « undefined » null null « null » « null » 0 (zéro) 0 (zéro) « 0 » « 0 » NaN NaN « NaN » « NaN » Infinity Infinity « Infinity » « Infinity » Negative Infinity Negative Infinity « -Infinity » « -Infinity » Nombre quelconque Nombre quelconque toString() toString() toExponential() toExponential() toPrecision() toPrecision() toFixed() toFixed() true true « true » « true » false false « false » « false » Object Object toString() toString()

Slide 94

Slide 94 text

Conversion vers Number Conversion vers Number undefined undefined NaN NaN null null 0 0 « String » « String » Valeur numérique ou Valeur numérique ou NaN NaN parseInt() ou parseInt() ou parseFloat() parseFloat() « » (string vide) « » (string vide) 0 0 true true 1 1 false false 0 0 Object Object valueOf() valueOf() toString() ou toString() ou NaN NaN

Slide 95

Slide 95 text

Conversion vers Boolean Conversion vers Boolean undefined undefined false false null null false false « String » « String » true true « » (string vide) « » (string vide) false false 0 (zéro) 0 (zéro) false false NaN NaN false false Infinity Infinity true true Negative Infinity Negative Infinity true true Nombre quelconque Nombre quelconque true true Object Object true true

Slide 96

Slide 96 text

Conversion vers Object Conversion vers Object undefined undefined Error Error 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

Slide 97

Slide 97 text

Questions? Questions?

Slide 98

Slide 98 text

Merci! Merci! A demain! A demain!

Slide 99

Slide 99 text

JavaScript JavaScript Adrian Kosmaczewski Adrian Kosmaczewski

Slide 100

Slide 100 text

Des questions Des questions à propos d’hier? à propos d’hier?

Slide 101

Slide 101 text

Sommaire Jour 2 Sommaire Jour 2  L’objet Window L’objet 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

Slide 102

Slide 102 text

Slide 103

Slide 103 text

Window Window  C’est l’objet « global » lorsque l’on 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:

Slide 104

Slide 104 text

Window (2) Window (2)  defaultStatus, status defaultStatus, status  document document  history history  location location  name name  opener opener  self self  alert(), confirm(), alert(), confirm(), prompt() prompt()  moveBy(), moveTo() moveBy(), moveTo()  open() open()  print() print()  setTimeout(), setTimeout(), clearTimeout() clearTimeout()  setInterval(), setInterval(), clearInterval() clearInterval()

Slide 105

Slide 105 text

status, defaultStatus status, defaultStatus  Site map true;">Site map  defaultStatus: texte montré dans la ligne de defaultStatus: texte montré dans la ligne de status par défaut status par défaut

Slide 106

Slide 106 text

setTimeout(), setInterval() setTimeout(), setInterval() function displayTime() function displayTime() { { 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); } }

Slide 107

Slide 107 text

Navigator Navigator  Reçu son nom de Netscape Navigator, mais 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

Slide 108

Slide 108 text

Screen Screen  Donne information sur la taille et les 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

Slide 109

Slide 109 text

Méthodes de Window Méthodes de Window  window.open() window.open()  window.close() window.close()  Normalement, on ferme seulement les fenêtres Normalement, on ferme seulement les fenêtres qu’on a ouvert soi-même qu’on a ouvert soi-même  moveTo(), moveBy() moveTo(), moveBy()  resizeTo(), resizeBy() resizeTo(), resizeBy()  scrollTo(), scrollBy() scrollTo(), scrollBy()  focus(), blur() focus(), blur()

Slide 110

Slide 110 text

Location Location  Diverses propriétes: Diverses propriétes:  href href  protocol protocol  host host  pathname pathname  search search  href = protocol://host/pathname?search href = protocol://host/pathname?search

Slide 111

Slide 111 text

History History  back() back()  forward() forward()  go() 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 »

Slide 112

Slide 112 text

Slide 113

Slide 113 text

Document Document  close() close()  open() open()  write() write()  writeln() writeln()  linkColor linkColor  images[] images[]  forms[] forms[]  bgColor bgColor  lastModified lastModified  title title  referrer referrer

Slide 114

Slide 114 text

DOM Niveau Zéro DOM Niveau Zéro  Les méthodes décrites 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!

Slide 115

Slide 115 text

images[] images[]  Contient des références a toutes les images 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!

Slide 116

Slide 116 text

On peut changer de cette façon, On peut changer de 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...

Slide 117

Slide 117 text

Slide 118

Slide 118 text

Forms Forms  submit() submit()  reset() reset()  Example 15-1 Example 15-1  elements[] elements[]  onsubmit (event) onsubmit (event)

Slide 119

Slide 119 text

elements[] elements[]  Array avec tous les éléments du formulaire 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

Slide 120

Slide 120 text

elements[] (2) elements[] (2)  Quasiment tous les éléments ont les events Quasiment tous les éléments ont les events suivants: suivants:  onclick onclick  onchange onchange  onblur onblur  onfocus onfocus

Slide 121

Slide 121 text

elements[] (3) elements[] (3) Objet HTML type Button Button button button Checkbox Checkbox checkbox checkbox FileUpload FileUpload file file Hidden Hidden hidden hidden Option Option - - Password Password password password

Slide 122

Slide 122 text

elements[] (4) elements[] (4) Objet HTML type Radio Radio radio radio Reset Reset reset reset Select Select select-one select-one Select Select select-multiple select-multiple Submit Submit submit submit Text Text text text Textarea Textarea <textarea> textarea textarea

Slide 123

Slide 123 text

Vérification de formulaire Vérification de formulaire  Voir exemple 15-2 Voir exemple 15-2

Slide 124

Slide 124 text

Slide 125

Slide 125 text

Document Object Model Document Object Model  C’est une Application 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

Slide 126

Slide 126 text

Architecture Architecture  Le DOM représente un arbre Le DOM représente un arbre  Terminologie: Terminologie:  parent parent  child, children child, children  siblings siblings  descendants descendants  ancestors ancestors

Slide 127

Slide 127 text

Architecture (2) Architecture (2)  Le DOM est conçu pour ê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...

Slide 128

Slide 128 text

API API  Le DOM est composé de « Nodes » 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

Slide 129

Slide 129 text

Types de base Types de base  document document  element element  nodeList nodeList  attribute attribute

Slide 130

Slide 130 text

Opérations sur les nodes Opérations sur les nodes  firstChild firstChild  lastChild lastChild  nextSibling nextSibling  previousSibling previousSibling  appendChild() appendChild()  removeChild() removeChild()  replaceChild() replaceChild()  insertBefore() insertBefore()

Slide 131

Slide 131 text

Opérations sur les attributes Opérations sur les attributes  getAttribute() getAttribute()  setAttribute() setAttribute()  removeAttribute() removeAttribute()

Slide 132

Slide 132 text

Niveaux du DOM Niveaux du DOM  On a vu 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

Slide 133

Slide 133 text

Support du DOM Support du DOM  Variable Variable  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 »

Slide 134

Slide 134 text

Le DOM en action Le DOM en action  getElementById() getElementById()  getElementsByTagName() getElementsByTagName()  createElement() createElement()  createTextNode() createTextNode()  setAttribute() setAttribute()  getAttribute() getAttribute()  appendChild() appendChild()  removeChild() removeChild()  element.innerHTML element.innerHTML  element.style element.style  Exemple 17-8 Exemple 17-8

Slide 135

Slide 135 text

Slide 136

Slide 136 text

CSS CSS  « Cascading Style Sheets » « Cascading Style Sheets »  Extrêmement utile Extrêmement utile façon de séparer façon de séparer contenu et présentation contenu et présentation  Recommandé Recommandé  Peut-être manipulé avec JavaScript Peut-être manipulé avec JavaScript  DHTML = CSS + HTML + JavaScript DHTML = CSS + HTML + JavaScript  « Dynamic HTML » « Dynamic HTML »

Slide 137

Slide 137 text

CSS (2) CSS (2)  background-color background-color  border-style border-style  border-width border-width  color color  cursor cursor  display display  font-family font-family  font-size font-size  height height  margin margin  overflow overflow  padding padding  page-break-after page-break-after  text-shadow text-shadow  width width  z-index z-index

Slide 138

Slide 138 text

CSS (3) CSS (3) #id { #id { color: red; color: red; } } select { select { background-color: blue; background-color: blue; } } p.code { p.code { font-family: Courier; font-family: Courier; } } .sample { .sample { display: hidden; display: hidden; } }

Slide 139

Slide 139 text

DHTML DHTML  CSS permet le CSS permet le positionnement 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

Slide 140

Slide 140 text

Slide 141

Slide 141 text

Events Events  Les éléments d’une page web génèrent des 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

Slide 142

Slide 142 text

4 différents modèles d’event 4 différents modèles d’event handling handling  « 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

Slide 143

Slide 143 text

Modèle originel Modèle originel  Déjà vu... Déjà vu...  Attributes en HTML Attributes en HTML  onclick="alert('Merci!')">  Propriétés en JavaScript Propriétés en JavaScript  bouton.onclick = alert('Merci!'); bouton.onclick = alert('Merci!');

Slide 144

Slide 144 text

Modèle W3C Modèle W3C  Modèle plus complexe et complet 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

Slide 145

Slide 145 text

Modele W3C (2) Modele W3C (2)  Event.stopPropagation() permet d’arreter 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()

Slide 146

Slide 146 text

Modele W3C (3) Modele W3C (3)  Event Object Event Object  type type  target target  timeStamp timeStamp  bubbles bubbles  cancelable cancelable  Quatre classes qui héritent de Event: Quatre classes qui héritent de Event:  HTMLEvents HTMLEvents  MouseEvents MouseEvents  UIEvents UIEvents  MutationEvents MutationEvents

Slide 147

Slide 147 text

Modèle Internet Explorer Modèle Internet Explorer  Versions 4, 5, 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

Slide 148

Slide 148 text

Modèle Internet Explorer (2) Modèle Internet Explorer (2)  Il 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()