Scripts Web : programmation coté client

Scripts Web : programmation coté client TP1 Préambule Cette séance de travaux pratiques est destinée aux premiers pas dans l'apprentissage du langage JavaScript. Après avoir installé votre environnement de travail, vous produirez vos premiers scripts. Ce document présente le contexte dans lequel évolue JavaScript puis introduit les premiers éléments pour la production de code : création de scripts, types de données, variables, objets et tableaux. Le document est à lire entièrement avant la séance. Le quizz accessible sur l'espage pédagogique doit aussi être effectué. 1. Introduction Les technologies XHTML/CSS sont au cœur des documents hypertextes publiés via HTTP sur le web. La séparation forme/contenu peut être stricte et l'usage tend à généraliser l'accessibilité par le respect des spécifications XHTML 1.1 et CSS 2 issues du W3C. La conception de documents interactifs doit aussi intégrer une couche de programmation absente des technologies précédentes. Le langage JavaScript offre cette possibilité. Le JavaScript est souvent utilisé comme un langage de script côté client. Cela signifie que le code JavaScript est écrit dans une page XHTML. Quand un navigateur fait une requête sur une page XHTML avec du JavaScript, le script est envoyé au navigateur qui interprète le code à la différence d'un code PHP, par ex, qui est interprété par le serveur. Le script se situant dans une page XHTML signifie qu'il peut être vu et copié par celui qui consulte la page. Ceci est peut être un soucis du point de vue de la sécurité mais permet de comprendre le code d'autrui et de le réutiliser. Attention cependant, de mauvaises pratiques peuvent ainsi vivre longtemps sur la toile... Le JavaScript peut être employé dans d'autres contextes que celui du navigateur web. Netscape a crée le JavaScript coté serveur comme le langage CGI qui peut faire les même choses que Perl et l'asp. Il n'y a donc rien qui empêche de créer des programmes complexes. Cependant, ce module traite exclusivement de l'emploi du JavaScript dans des navigateurs. 1.1.JavaScript et Java JavaScript n'est pas Java... JavaScript n'est pas Java... JavaScript n'est pas Java... Bien que les noms soient très semblables, le Javascript est principalement un langage de script à utiliser dans des pages XHTML, alors que Java est un vrai langage de programmation qui fait des choses tout à fait différentes de JavaScript. Il a été développé par Sun pour l'usage de programmes nécessitant une certaine puissance de calcul. Le JavaScript a été développé par Netscape pour le côté client (dans le navigateur) et pour les scripts côté serveur. À l'origine le langage s' appelait Live Script, mais alors qu' il était sur le point de devenir connu Java était devenu immensément populaire. Au dernier moment Netscape a changé le nom de son langage de Script en "JavaScript". Ceci a été fait purement pour des raisons commerciales. JavaScript comme Java descendent du C et du C++. Tous les deux sont orientés objet (bien que ce soit moins important pour le JavaScript que pour beaucoup d'autres langages) et ils partagent une syntaxe similaire. 1.2.Sécurité Le JavaScript côté client a été expressément développé pour l'usage dans un navigateur web en association avec des pages XHTML. Ceci a certaines conséquences pour la sécurité et des limitations ont été adoptés : JavaScript ne peut pas lire des fichiers ou écrire dans le système de fichiers de l'ordinateur. R. C. 1/14

JavaScript ne peut exécuter aucun autre programme. D'autre part, JavaScript impose des restrictions sur certaines caractéristiques qu il prend en compte. Par exemple : JavaScript côté client peut utiliser le protocole HTTP dans les scripts pour échanger des données avec le serveur web et même télécharger des données depuis des serveurs FTP ou autres. Mais, il ne fournit aucune primitive réseau et ne peut ouvrir un socket ou accepter une connexion depuis une autre machine. Un programme JavaScript peut ouvrir de nouvelles fenêtres du navigateur, mais afin d éviter l invasion de fenêtres publicitaires, de nombreux navigateurs limitent cette caractéristique. Elle est seulement autorisée lorsqu un événement est déclenché par l utilisateur ( comme un clic de souris). Un programme JavaScript ne peut fermer une fenêtre de navigateur sans la confirmation de l utilisateur, sauf s il a ouvert lui-même cette fenêtre. Ceci empêche que des scripts malveillants appellent self.close() pour fermer la fenêtre de consultation de l utilisateur, causant l arrêt du programme. Un programme JavaScript ne peut masquer la destination d un lien en modifiant le texte de la ligne d état lorsque la souris survole le lien. Par le passé, des informations supplémentaires sur le lien étaient souvent fournies sur la ligne d état. Les escroqueries par hameçonnage (phishing scams) ont conduit de nombreux fournisseurs de navigateurs à désactiver cette possibilité. Un script ne peut ouvrir une fenêtre de taille trop petite (en général inférieure à 100 pixels sur un côté) ou redimensionner une fenêtre dans une taille trop petite. De même, un script ne peut déplacer une fenêtre hors de l écran ou créer une fenêtre plus grande que l écran. Cela empêche les scripts d ouvrir des fenêtres que l utilisateur ne pourrait voir ou qu il pourrait manquer ; de telles fenêtres pourraient contenir des scripts qui continueraient de tourner alors que l utilisateur pense qu ils sont arrêtés. Par ailleurs, un script ne peut créer une fenêtre de navigateur sans barre de titre ou sans barre de statut, parce qu une telle fenêtre pourrait masquer une boîte de dialogue du système d exploitation et inciter, par exemple, l utilisateur à entrer un mot de passe sensible. La propriété value de l objet FileUpload ne peut être définie. Si cette propriété pouvait être définie, un script pourrait la définir à n importe quel nom de fichier et entraîner le chargement par le formulaire du contenu de n importe quel fichier spécifié (tel qu un fichier de mots de passe) sur le serveur. Un script ne peut lire le contenu des documents chargés depuis des serveurs autres que celui ayant fourni le document qui contient le script. De même, un script ne peut enregistrer des écouteurs d événements sur des documents provenant de différents serveurs. Cela empêche les scripts d examiner ce que l utilisateur saisit dans d autres pages (comme les séquences de touches qui constituent un mot de passe). JavaScript ne peut donc pas faire de choses dangereuses, à priori. Malheureusement Microsoft a vu qu'il pouvait rajouter quelques commandes de fichier système, en combinaison avec sa technologie ActiveX. Ceci signifie que l'explorerateur Windows est structurellement moins sûr que n'importe quel autre navigateur. Il dispose de quelques protections mais des failles sont régulièrement trouvées. 1.3.Normalisation Comme toute nouvelle technologie JavaScript a évolué rapidement avec parfois des banches de développement rendant incompatibles les implémentations (voir l'antagonisme Netscape/Mozilla et Microsoft...) Heureusement le langage s'est stabilisé et a été normalisé par L'ECMA (European Computer Manufacturer's Association) sous le nom ECMAScript ou ECMA-262 version 3. Les implémentations de cette norme incluent l interpréteur JavaScript 1.5 de Netscape et de la fondation Mozilla, ainsi que l interpréteur JScript 5.5 de Microsoft. Tout navigateur web plus récent que Netscape 4.5 ou Internet Explorer 4 prend en charge la dernière version du langage. Après une longue période de stabilité de JavaScript, de nouveaux signes d évolution apparaissent maintenant. Le navigateur web Firefox 1.5 de la fondation Mozilla inclut un nouvel interpréteur JavaScript (version 1.6). Cette version inclut de nouvelles méthodes (non standardisées) de manipulation de tableaux par exemple. Outre la spécification ECMA-262 qui normalise le noyau du langage JavaScript, l ECMA a publié un autre standard relatif à JavaScript. L ECMA-357 normalise une extension de JavaScript appelée E4X ou ECMAScript pour XML. Cette extension ajoute un type de données XML au langage ainsi que des opérateurs et des instructions permettant de manipuler les valeurs XML. R. C. 2/14

Des propositions d une quatrième édition de la spécification ECMA-262, qui normalise JavaScript 2.0, existent depuis plusieurs années. Elles décrivent un remaniement complet du langage incluant le typage fort et un véritable héritage des classes. Jusqu à présent, peu de progrès ont été accomplis vers la normalisation de JavaScript 2.0. Néanmoins, il existe des implémentations s appuyant sur les brouillons de propositions, dont le langage JScript.NET de Microsoft et les langages ActionScript 2.0 et Action-Script 3.0 utilisés par le lecteur Flash d Adobe (précédemment Macromedia). 1.4.Outils Un ensemble d'outils utiles pour ces travaux pratiques seront installés sur les machines. Ils sont disponibles sur le serveur ftp://ftp.gtrgrenoble.fr/tpprogweb. On y trouve : Firefox 3 : navigateur web qui servira pour l'environnement de développement. 7zip: utilitaire de compression libre. FoxitReader : un lecteur de document pdf. Notepad++ : un éditeur de texte simple comme notepad et infiniment plus complet. PSPad : un autre éditeur doté de fonctions pour l'aide au développement web. Le navigateur sera Mozilla Firefox doté des add-on «Firebug» et «Web Developer» (double click sur le fichier *.xpi) a)firebug Firebug propose la visualisation des parties HTML, CSS, Script ou DOM d'une page. Firebug est activé en cliquant sur le petit insecte présent en bas à droite d'une fenêtre Firefox. Les onglets en haut à gauche correspondent aux technologies sus-citées. Une fois le script activé dans l'onglet console, celui-ci peut-être analysé avec la possibilité de : déclarer des point d'arrêt dans l'exécution du script (click sur la colonne de gauche grisée) ; contrôler l'exécution du script (boutons en haut à droite) ; visualiser l'état de la mémoire (volet de droite) avec les onglets «espion» et «pile». volée. Le code HTML est présenté conformément à l'interprétation du navigateur et peut aussi être édité à la b)web Developer Une barre de menu spécifique est disponible avec accès par ses boutons aux fonctions : Disable : pour désactiver le cache, la machine virtuelle java, l'interpréteur javascript ou divers fonctions de gestion des pages Cookies : pour manipuler les cookies Css : pour voir et manipuler les feuilles de style d'une page Forms : pour observer et modifier le comportement des formulaires Images : pour regarder ou non les images d'une page... Informations : pour trouver les informations utiles au développeur à partir d'une page affichée Miscellaneous : pour accéder à diverses fonctions (grille, loupe, rendu petit écran..) Outline : pour gérer les mises en évidence dans la page affichée Resize : pour gérer la taille de la fenêtre en vue de l'évaluation du rendu final R. C. 3/14

Tools : avec outils de validation, l'inspecteur DOM et la console d'erreur Javascript View Source : pour lire le code source avec un appel lié aux éditeur sus-cités Options : pour gérer la barre «Web Developer». On prêtera ici une attention particulière à la console d'erreur qui peut être ouverte automatiquement en fonction des réglages disponibles dans Options>Options>Miscellaneous. 2.Généralités 2.1.Approche objet Javascript est un langage objet : chaque objet possède des méthodes (ou des fonctions), des propriétés et... des objets. Par exemple, lorsqu'une balise <img> est utilisée dans un arbre XHTML, on spécifie l'url de l'image à afficher (src=), la taille (width=,heigth=), un texte de remplacement pour les personnes désireuses de ne pas charger l'images (alt=), etc. Ces éléments forment les propriétés de l'objet img. JavaScript peut manipuler les propriétés d'un objet contenu dans la fenêtre du navigateur. heigth width src name alt Image 100 200 pict/pict1.png ''my_pict1'' ''The pict1 is...''... Les méthodes sont des fonctions qui permettent d'agir sur certaines propriétés de l'objet. Une méthode engendre une action, un verbe qualifie cette action. Une propriété est généralement qualifiée par un nom. On utilise l'opérateur «.» pour accéder à une propriété. Par exemple, si une propriété prop associé à l'objet truc, on accède à prop par : truc.prop. Par exemple, window.location.href renvoie une chaîne de caractère contenant l'url du document courant. L'appel d'une méthode associée à un objet est réalisée en précisant l'objet suivi de la méthode invoquée puis des parenthèses contenant des paramètres le cas échéant. L'objet et la méthode sont rattachés par l'opérateur «.». Ainsi si une méthode faire appartient à l'objet machin, on applique la méthode par : machin.faire( ). Par exemple : window.alert(''texte'') ouvre, à partir de la fenêtre, un pop-up contant le texte «texte». Dans une page web, l'objet le plus élevé dans la hiérarchie est la fenêtre du navigateur «window». Cet objet contient entre autres l'objet document qui contient lui même tous les objets contenus dans la page web (paragraphes, formulaires, etc...) En plus de ces objets, il existe des objets créés par l'utilisateur. La figure suivante montre une vue de l'organisation classique des objets dans une fenêtre de navigateur. Cette interface de programmation est nommée Document Object Model. Cette API a évoluée avec les implémentations de client et l'activité du W3C. (voir TP3) R. C. 4/14

self, self, window parent, top top divers objets Window L'objet Window courant navigator objet Navigator frames[ ]] tableau d'objets Window location objet Location history objet History forms[ ]] tableau d'objets Form anchors[ ]] tableau d'objets Anchor links[ ]] tableau d'objets Link elements[ ]] tableau d'objets élement du du formulaire :: Input select Textarea options[ ]] tableau d'objets Option document objet Document images[ ]] tableau d'objets Image screen objet Screen anchors[ ] ] tableau d'applets Le DOM niveau 0 définit uniquement la classe Document. C'est l'api standard de facto qui est prise en charge par chaque navigateur compatible JavaScript. Elle désigne un mélange (sans spécification formelle) de fonctionnalités des documents HTML offertes à partir des anciens navigateurs Navigator 3.0 de Netscape et Internet Explorer 3.0 de Microsoft. Le première norme DOM du W3C, publiée 1998 est le DOM niveau 1 qui défini une manière précise de représenter un document sous la forme d'un arbre. Est également définie une série de fonctions permettant de se déplacer dans cet arbre, d'y ajouter, modifier ou supprimer des éléments. Le DOM Level 1 a été disponible dans sa plus grande partie dès les premières versions d'internet Explorer 5 et de Netscape 6. La seconde étape est le DOM Level 2 (publié en 2000), beaucoup plus détaillée et constituée de six parties : en plus de Core et HTML, on trouve Events, Style, View et Traversal and Range. Dans les évolutions de la brique de base (Core), on notera la possibilité d'identifier plus rapidement un nœud ou un groupe de nœuds au sein du document. Par exemple, pour obtenir un élément particulier on ne le recherchera plus dans un tableau comme dans les DOM propriétaires précédents, mais on appellera la fonction getelementbyid(). On trouvera des détails et explications très fournies (en français!) à propos du DOM sur http://fr.selfhtml.org/javascript/objets/index.htm. 2.2.Insertion du JavaScript dans XHTML Le code JavaScript côté client est inséré dans les documents HTML selon plusieurs modes : entre les balises <script> et </script> ; depuis un fichier externe spécifié par l attribut «src» de la balise <script> ; dans un gestionnaire d événements, spécifié comme valeur d un attribut HTML tel que «onclick» ou «onmouseover» ; dans une URL utilisant le protocole spécial «javascript:». R. C. 5/14

a)balise <script> Classiquement la balise <script> est associée à l'attribut «type="text/javascript"» ce qui permet d'insérer du JavaScript dans HMTL comme suit : <script type="text/javascript"> // ici se trouve le code JavaScript </script> Le code peut-être situé n'importe où dans le flux HTML avec une forte préférence pour la section <head>. L'attribut «language» peut aussi être appliqué à la balise <script> permettant ainsi de préciser la version du langage qui doit être interprétée. L'insertion du code depuis un fichier externe est effectuée de la même façon en ajoutant à la balise <script> l'attribut «src» qui prendra comme valeur le chemin et le nom du fichier. JavaScript occupe un quasi monopole comme langage de script coté client mais des alternatives existent (VBScript par ex) où pourront exister. Pour lever toute ambiguïté sur le langage de script à interpréter on précise le langage de script par défaut, à l'aide de la balise meta (dans la section <head>) comme suit : Remarques: <meta http-equiv="content-script-type" content="text/javascript"> le type MIME «text/javascript» bien que le plus répandu n'est pas normalisé. Selon la RFC 4329 on devrait utiliser le type «application/javascript» (pas toujours très bien reconnu...) Pour les (très) vieux navigateurs qui ne supporte pas JavaScript on dissimule le script comme suit: <SCRIPT type="text/javascript"> <!-- pour cacher le script à de vieux navigateurs Du JavaScript // fin de cachotterie --> </SCRIPT> L'interpréteur JavaScript permet la présence de la chaîne "<!--" au début de la balise <script> et ignore le reste de la ligne. De plus JavaScript interprète "//" comme le début d'un commentaire ce qui est nécessaire pour cacher "-->", fin du commentaire HTML. b)gestionnaire d'événements Le code JavaScript d un script est exécuté une fois, lorsque le fichier HTML qui le contient est lu dans le navigateur web. Un programme n utilisant que ce type de script statique ne peut répondre dynamiquement à l utilisateur. Des programmes plus dynamiques définissent des gestionnaires d événements qui sont automatiquement invoqués par le navigateur web lorsque surviennent certains événements. Comme les événements JavaScript côté client ont pour origine des objets HTML (comme les boutons), les gestionnaires d événements sont définis comme attributs de ces objets. Par exemple, pour définir un gestionnaire d événements invoqué lorsque l utilisateur clique dans une case à cocher d un formulaire, on spécifie le code du gestionnaire comme attribut de la balise HTML qui définit la case à cocher : <input type="checkbox" name="options" value="papier_cadeau" onclick="papier_cadeau = this.checked;"> On s' intéresse ici à l'attribut onclick. La valeur de la chaîne de l attribut onclick peut contenir une ou plusieurs instructions JavaScript. Lorsque l événement spécifié, dans ce cas un clic, survient dans la case à cocher, le code JavaScript contenu dans la chaîne est exécuté. Bien qu il soit possible d inclure un nombre quelconque d instructions JavaScript dans une définition de gestionnaire d événements, une technique répandue consiste à utiliser les attributs de gestionnaire d événements pour invoquer des fonctions définies ailleurs dans des balises <script> (voir suite...) Voici une liste non-exhaustive de gestionnaire d'événements parmi les plus répandus : R. C. 6/14

onclick : ce gestionnaire est pris en charge par tous les éléments de formulaire de type bouton, de même que par les balises <a> et <area>. Il est déclenché lorsque l utilisateur clique sur l élément. Si un gestionnaire onclick retourne false, le navigateur n effectue pas d action par défaut associée au bouton ou lien ; par exemple, il ne suit pas un lien hypertexte (pour une balise <a>) ou il ne soumet pas de formulaire (pour un bouton d envoi). onmousedown, onmouseup : ces deux gestionnaires d événements ressemblent à onclick, mais ils sont déclenchés séparément lorsque l utilisateur presse et relâche le bouton de la souris. La plupart des éléments de document acceptent ces gestionnaires. onmouseover, onmouseout : ces deux gestionnaires d événements sont déclenchés lorsque le pointeur de la souris se déplace au-dessus d un élément de document ou le quitte. onchange :ce gestionnaire d événements est associé aux éléments <input>, <select> et <textarea>. Il est déclenché lorsque l utilisateur modifie la valeur affichée par l élément et déplace le focus en dehors de l élément. onload : ce gestionnaire d événements peut apparaître dans la balise <body> et est déclenché lorsque le document et son contenu externe (comme les images) sont totalement chargés. Le gestionnaire onload est souvent employé pour invoquer du code qui manipule le contenu du document car il indique que le document se trouve dans un état stable et que sa modification peut se faire sans problème. On trouvera plus d'informations sur http://fr.selfhtml.org/javascript/langage/gestevenements.htm... c)protocole JavaScript On peut aussi insérer du code JavaScript du côté du client à l aide d une URL accolée derrière le pseudoprotocole «javascript:». Ce type de protocole particulier spécifie que le corps de l URL est du code JavaScript à exécuter par l interpréteur JavaScript. Comme il est traité en une seule ligne de code, on ne peut utiliser que les commentaires /* */. Une telle URL pourrait ressembler à ceci : javascript:var maintenant = new Date(); "<h1>nous sommes le :</h1>" + maintenant; Lorsque le navigateur charge l une de ces URL JavaScript, il exécute le code JavaScript contenu dans l URL et utilise la valeur de chaîne de la dernière instruction JavaScript comme contenu du nouveau document à afficher. Cette valeur peut contenir des balises HTML et être formatée et affichée comme tout autre document chargé dans le navigateur. Les URL JavaScript peuvent aussi contenir des instructions JavaScript effectuant des actions sans retourner de valeur. Par exemple : javascript:alert("bonjour tout le monde!") Lorsque cette sorte d URL est chargée, le navigateur exécute le code JavaScript, mais parce qu il n y a pas de valeur à afficher comme nouveau document, il ne modifie pas le document actuellement affiché. Il arrive souvent que l on veuille utiliser une URL JavaScript pour exécuter du code sans modifier ou altérer le document alors affiché. Pour ce faire, on doit être sûr que la dernière instruction dans l URL n a pas de valeur en retour. Un moyen de s en assurer est d utiliser l opérateur void pour spécifier explicitement une valeur de retour indéfinie. Il suffit d utiliser l instruction void 0; à la fin de l URL JavaScript. Par exemple, voici une URL qui ouvre une nouvelle fenêtre vide dans le navigateur sans modifier le contenu de la fenêtre courante : javascript:window.open("about:blank"); void 0; Sans l opérateur void dans cette URL, la valeur retournée par l appel à la méthode Window. open() serait convertie en une chaîne et affichée, et le document courant serait remplacé par un document dont l apparence serait quelque chose comme : [object Window] On peut utiliser une URL JavaScript partout où on utiliserait une URL classique. Par exemple, dans le champ adresse de votre navigateur ou avec des attributs XHTML dont la valeur doit être une URL. Dans le cas de l attribut href, l URL JavaScript remplace en réalité le gestionnaire d événements onclick. De manière similaire, une URL JavaScript peut être employée comme valeur de l attribut action d une balise <form> afin que le code JavaScript présent dans l URL soit exécuté lorsque l utilisateur soumet le formulaire. R. C. 7/14

2.3.Éléments de syntaxe Le Javascript est case sensitive (en français sensible à la casse), c'est-à-dire qu'il fait une différence entre un nom de variable contenant ou non des majuscules. Ainsi la fonction bonjour(); n'est pas la même fonction que Bonjour();. Les caractères accentués (JavaScript utilise l'unicode) sont supportés, du moins tant que le jeu caractère est correctement reconnu. Comme en langage C, chaque instruction se termine par un point-virgule «;». Ceci peut être omis et on s'expose alors à des possibles confusions du fait de l'insertion automatique de point-virgule par l'interpréteur JavaScript. Par exemple : return true; sera interprété en «return; true;» alors que l'on pourrait penser à «return true;» Les commentaires sont délimités par «/*» au début et «*/» à la fin. Ils peuvent porter sur plusieurs lignes. Des commentaires sur une seule ligne peuvent débuter par «//» et finissent automatiquement à la fin de la ligne. 2.4.Type de données et valeurs JavaScript prend en charge 3 types de données primaires : les nombres, les chaînes de caractères et les booléens. De plus on dispose de deux autres types de données triviaux : null et undefined prenant chacun une valeur unique. En JavaScript les formes littérales suivantes sont valides : 12 // Le nombre 12. 1.2 // Le nombre un point deux. "bonjour" // Une chaîne de texte. 'Salut' // Une autre chaîne. true // Une valeur booléenne. false // Une autre valeur booléenne. /javascript/gi // Forme littérale d une expression régulière null // Absence d objet. Des propriétés et méthodes globales existent pour travailler avec les différents types de données. Noter que ces éléments ne sont pas inclus dans une classe et sont donc accessible sous leur propre nom. Voir pour cela http://fr.selfhtml.org/javascript/objets/independant.htm. a)nombres JavaScript s'appuie sur le format IEEE 734 (format double du C ou de Java) pour la représentation des nombre. Il n'y a pas de distinction entre nombre entiers et flottants. La syntaxe pour les chiffres est la suivante : [+ -][chiffres][.chiffres][(e e)[(+ -)]chiffres] Les entiers en base hexadécimale sont notés avec le préfixe «0x». Le préfixe «0» suivi de chiffres permet d'utiliser une notation en octal. Une valeur particulière «NaN» (Not a Number) permet de décrire le non typage en nombre. L'objet Number fourni des propriétés et des méthodes pour travailler avec les nombres (débordement, précision, conversion) et l'objet Math fourni des propriétés et des méthodes pour travailler avec les valeurs. Voir pour cela http://fr.selfhtml.org/javascript/objets/number.htm et http://fr.selfhtml.org/javascript/objets/math.htm. b)chaîne de caractères Les chaînes de caractères sont délimitées par les guillemets simples ou des apostrophes. Les caractères guillemets simples peuvent être contenus dans des chaînes délimités par des apostrophes et vice versa. Une chaîne de caractère littérale ne peut être écrite sur plusieurs lignes dans un script. R. C. 8/14

Le tableau suivant liste les séquences d échappement JavaScript et les caractères qu elles représentent. Notez que les séquences d échappement Unicode sont imposées par la norme ECMAScript v1, mais elles ne sont pas implémentées dans les versions antérieures à JavaScript 1.3. Séquence Caractère représenté \0 Caractère NUL (\u0000) \b Retour arrière (\u0008) \t Tabulation horizontale (\u0009) \n Retour à la ligne (\u000a) \v Tabulation verticale (\u000b) \f Alimentation de page (\u000c) \r Retour chariot (\u000d) \" Guillemet double (\u0022) \' Apostrophe ou guillemet simple (\u0027) \\ Barre oblique inverse (\u005c) \xxx Caractère du jeu Latin-1 spécifié par les deux chiffres hexadécimaux XX \uxxxx Caractère Unicode spécifié par les quatre chiffres hexadécimaux XXXX \XXX Caractère du jeu Latin-1 spécifié par les chiffres octaux XXX, de 1 à 377 Non pris en charge par ECMAScript v3 ; ne pas utiliser La concaténation des chaînes est très simple : il suffit d'utiliser l'addition à l'aide su signe «+». Les nombres sont convertis automatiquement en chaînes lorsque c est nécessaire. Une conversion de nombre en chaîne plus explicite peut être faite par le constructeur String(nombre) ou par la methode tostring() de l'objet Number qui admet un paramètre optionnel précisant la base de conversion. Lorsqu une chaîne est utilisée dans un contexte numérique, elle est convertie automatiquement en un nombre. Par exemple : l'expression "21" * "2" prend la valeur 42. Une conversion plus explicite de chaîne en nombre peut être réalisée par l'appel du constructeur Number(valeur_chaine) qui ne fonctionne qu'en base 10. Des conversion plus souple peuvent être réalisées à l'aide de parsefloat() et parseint(). Par exemple : parseint("3 souris vertes"); // Retourne 3. parsefloat("3.14 mètres"); // Retourne 3.14. parseint("12.34"); // Retourne 12. parseint("0xff"); // Retourne 255. parseint("11", 2); // Retourne 3 (1*2 + 1). parseint("ff", 16); // Retourne 255 (15*16 + 15). parseint("zz", 36); // Retourne 1295 (35*36 + 35). parseint("077", 8); // Retourne 63 (7*8 + 7). parseint("077", 10); // Retourne 77 (7*10 + 7). parseint("onze"); // Retourne NaN. parsefloat("$72.47"); // Retourne NaN. L'objet String fourni des propriétés et des méthodes pour travailler avec les chaînes. Voir pour cela http://fr.selfhtml.org/javascript/objets/string.htm. c)valeur booléennes Les deux valeurs booléennes valides sont représentées par les expressions true (vrai) et false (faux). Les valeurs booléennes peuvent facilement être converties en d autres types, ou vice versa, et cela se produit souvent automatiquement5. Si une valeur booléenne est utilisée dans un contexte numérique, true devient le nombre 1 et false le nombre 0. Si une valeur booléenne est utilisée dans un contexte de chaîne, true est converti en «true» et false en «false». Si un nombre est utilisé là où une valeur booléenne est attendue, il est converti à true, sauf s il vaut 0 ou NaN, auquel cas il devient false. Si une chaîne est utilisée là où une valeur booléenne est attendue, elle est convertie à true, excepté s il s agit de la chaîne vide, qui est convertie à false. null et la valeur undefined deviennent false et tout objet différent de null, tout tableau ou toute fonction est converti à true. Une conversion explicite peut-être opérée via le constructeur Boolean(). R. C. 9/14

d)fonctions Une fonction est un bloc de code exécutable qui est défini dans un programme JavaScript ou prédéfini par l implémentation JavaScript. Bien qu une fonction soit définie seulement une fois, un programme JavaScript peut l exécuter ou l invoquer un nombre quelconque de fois. On peut passer des arguments, ou paramètres, à une fonction, spécifiant la ou les valeurs sur lesquelles doivent porter ses calculs. Une fonction peut également retourner une valeur qui représente les résultats de ce calcul par l'instruction return. On peut définir une fonction avec un code qui ressemble à ceci : function carre(x) // La fonction est appelée carre. Elle attend un argument, x. { // Le corps de la fonction débute ici. return x*x; // La fonction calcule le carré de son argument et retourne cette valeur. } // La fonction se termine ici. Lorsqu une fonction est définie, on peut l invoquer en faisant suivre son nom d une liste facultative d arguments, séparés par des virgules, entre parenthèses. Par exemple : y = Math.sin(x); y = carre(x); d = calculer_distance(x1, y1, z1, x2, y2, z2); deplacer(); Une caractéristique importante de JavaScript est définie par le fait que les fonctions sont des valeurs qui peuvent être manipulées par du code JavaScript. Dans de nombreux langages, y compris Java, les fonctions ne sont qu une caractéristique syntaxique du langage : elles peuvent être définies et invoquées, mais ce ne sont pas des types de données. Le fait que les fonctions sont de vraies valeurs en JavaScript offre beaucoup de souplesse au langage. Autrement dit, les fonctions peuvent être stockées dans des variables, des tableaux et des objets, et elles peuvent être passées comme arguments à d autres fonctions. Puisque les fonctions sont des valeurs tout comme les nombres et les chaînes, elles peuvent être affectées à des propriétés d objet comme n importe quelles autres valeurs. Lorsqu une fonction est affectée à la propriété d un objet (le type de données d un objet et de ses propriétés seront décrits à la section Objets, page suivante), elle est souvent désignée comme une méthode de cet objet. 2.5.Variables Une variable est un identifiant associé à une valeur. JavaScript n'a pas besoin de déclaration préalable à l'utilisation d'une valeur, celle-ci étant réalisée implicitement à la première apparition de la variable. Une valeur peut changer de type au fur et à mesure de sont utilisation. Si souhaité une déclaration peut être faite à l'aide du mot clé var. Une affectation peut lui être associée. Tant que la variable n'a pas été affectée, sa valeur initiale est undefined. Le code suivant est valide : i = 1; var somme = i + 1; i = 'un'; somme =!somme; Il est possible de déclarer plusieurs fois une variable. Ceci sera considéré comme une affectation. Si on tente de lire la valeur d'une variable non-déclarée, JavaScript génère une erreur. Les variables déclarées implicitement sont toujours crées comme des variables globales. Pour qu'une variable limite sa portée à la fonction dans laquelle elle est utilisée, il faut réaliser une déclaration explicite à l'aide du mot clé var. À l intérieur du corps d une fonction, une variable locale prédomine sur une variable globale portant le même nom. Si une variable locale, ou un paramètre de fonction, est déclarée avec le même nom qu une variable globale, cette dernière est de ce fait cachée. Attention : du fait de la portée locale occultant les variables globales en cas de conflit, il est toujours préférable de déclarer les variables locales en début de fonction pour éviter les confusions. R. C. 10/14

2.6.Objets Un objet est une collection de valeurs nommées désignées sous le nom de propriétés de l objet. Les propriétés d objets peuvent être assimilées à des variables JavaScript ; elles peuvent contenir tout type de données, y compris des tableaux, des fonctions et d autres objets. Par exemple : image.width image.height document.write("juste un test"); Les objets dans JavaScript ont la faculté de servir de tableaux associatifs ; en effet, ils peuvent associer des données arbitraires à des chaînes arbitraires. Lorsqu un objet est utilisé de cette manière, une syntaxe différente est généralement requise pour accéder aux propriétés de l objet : une chaîne contenant le nom de la propriété désirée, placée entre des crochets. L utilisation de cette syntaxe permet d accéder aux propriétés de l objet image, mentionné plus haut, à l aide du code suivant : image["width"] image["height"] Les objets sont créés en invoquant des fonctions constructeur spéciales. Par exemple, les lignes suivantes créent toutes un nouvel objet : var o = new Object(); var maintenant = new Date(); var motif = new RegExp("\\sjava\\s", "i"); Une fois qu'un objet est créé, on peut définir et utiliser ses propriétés : var point = new Object(); point.x = 2.3; point.y = -1.2; JavaScript définit une syntaxe d objet littéral qui permet de créer un objet et de spécifier ses propriétés. Un objet littéral (appelé aussi initialiseur d objet) comporte une liste de paires propriété/valeur, séparées par des virgules, le tout étant placé entre accolades. Ainsi, l objet point, défini précédemment, peut aussi être créé et initialisé à l aide de la ligne de code suivante : var point = { x:2.3, y:-1.2 }; Les objets littéraux peuvent aussi être imbriqués. Par exemple : var rectangle = { superieurgauche: { x: 2, y: 2 }, inferieurdroit: { x: 4, y: 4} }; Lorsqu un objet non-null est utilisé dans un contexte booléen, il est converti à la valeur true. Lorsqu un objet est utilisé dans un contexte de chaîne, JavaScript invoque la méthode tostring() de l objet et utilise la chaîne qu elle retourne. Lorsqu un objet est utilisé dans un contexte numérique, JavaScript commence par appeler la méthode valueof() de l objet. Si elle retourne une valeur primaire, celle-ci est utilisée. Cependant, dans la plupart des cas, la méthode valueof() retourne l objet lui-même. Dans ce cas, JavaScript convertit tout d abord l objet en une chaîne à l aide de la méthode tostring() et tente ensuite de convertir la chaîne en nombre. 2.7.Tableaux Un tableau est une collection de valeurs, tout comme un objet. Tandis que chaque valeur contenue dans un objet a un nom, chaque valeur contenue dans un tableau a un indice. En JavaScript, on récupère une valeur de tableau en plaçant un indice entre crochets à la suite du nom de l objet. Par exemple, si un tableau est appelé a et si i est un entier non négatif, a[i] est un élément du tableau. Les indices de tableaux débutent à zéro. Ainsi, a[2] se réfère au troisième élément du tableau a. Les tableaux peuvent contenir tout type de données JavaScript, y compris des références à d autres tableaux, objets ou fonctions. Par exemple : document.images[1].width R. C. 11/14

Ce code fait référence à la propriété width d un objet stocké dans le second élément d un tableau stocké dans la propriété images de l objet document. Les tableaux décrits ici diffèrent des tableaux associatifs décrits avant. Les tableaux classiques que nous décrivons ici sont indexés à l aide d entiers positifs. Les tableaux associatifs sont indexés à l aide de chaînes. Attention, JavaScript ne prend pas en charge les tableaux multidimensionnels, à l exception des tableaux de tableaux. Ceux-ci peuvent être manipulés à l'aide de la syntaxe tab[i][j] où tab désigne le nom du tableau i le rang du tableau imbriqué et j le rang de l'élément du tableau imbriqué. Finalement, comme JavaScript est un langage non typé, les éléments d un tableau n ont pas besoin d être du même type, alors que c est obligatoire dans les langages typés comme Java. Les tableaux peuvent être créés à l aide du constructeur Array(). Une fois le tableau créé, on peut lui affecter un nombre quelconque d éléments indexés : var a = new Array(); a[0] = 1.2; a[1] = "JavaScript"; a[2] = true; a[3] = { x:1, y:3 }; Les tableaux peuvent également être initialisés par passage d éléments au constructeur Array(). Ainsi, le code précédent, créant un tableau et initialisant les éléments, peut également s écrire comme ceci : var a = new Array(1.2, "JavaScript", true, { x:1, y:3 }); Si ne passe qu un seul nombre au constructeur Array(), celui-ci spécifie la longueur du tableau. Ainsi var a = new Array(10); crée un nouveau tableau comportant 10 éléments quelconques. JavaScript définit une syntaxe littérale pour la création et l initialisation de tableaux. Un tableau littéral (ou initialiseur de tableau) est une liste de valeurs séparées par des virgules, placées entre crochets. Les valeurs entre crochets sont affectées séquentiellement à l aide d un indice débutant à zéro. Par exemple, le code de création et d initialisation de la section précédente peut être écrit de la manière suivante : var a = [1.2, "JavaScript", true, { x:1, y:3 }]; Comme les objets littéraux, les tableaux littéraux peuvent être imbriqués : var matrice = [[1,2,3], [4,5,6], [7,8,9]]; Comme pour les objets littéraux, les éléments des tableaux littéraux peuvent être des expressions quelconques et ils ne sont pas réduits à des constantes : var base = 1024; var table = [base, base+1, base+2, base+3]; Des éléments indéfinis peuvent être insérés dans un tableau littéral par simple omission d une valeur entre des virgules. Par exemple, le tableau suivant contient cinq éléments, dont trois éléments indéfinis : var tableauepars = [1,,,,5]; On trouvera une description détailée des propriétés et méthodes associées aux tableaux sur http://fr.selfhtml.org/javascript/objets/array.htm. 5 3.Exercices Avant toutes choses, clonez sur votre machine XP SP3 à partir des DVD fournis. Brassez le câblage et déclarez votre configuration IP : 172.16.6.160 + x ou x est le numéro de la machine. La passerelle par défaut est 172.16.6.254 et le serveur DNS est 172.16.6.200. Testez votre connectivité (ping free.fr par ex). L'accès https nécessite l'utilisation d'un proxy. Au besoin utiliser l'adresse de configuration automatique suivante : http://proxy.ujf-grenoble.fr/auto-proxy.pac Téléchargez et installez les outils de développement proposés sur ftp.gtrgrenoble.fr/tpprogweb. Ajoutez à Firefox l'add-on «HTML Validator» par le menu Outils> Modules complémentaires > Catalogue R. C. 12/14

3.1.Exercice 1 Réaliser une page XHTML dotée d'un script JavaScript qui affiche un message «Hello world!» trois fois sur trois lignes dans le document. Faire de même avec un script externe. Créer une page XHTML dotée d'un lien qui affiche un message «Hello world!» dans une fenêtre d'alerte lorsqu'on l'active, à l'aide d'un protocole «javascript:». Créer une page XHTML dotée d'un script JavaScript qui, au déchargement de la page, affiche un message d'adieu sur deux lignes dans une fenêtre d'alerte. Créer une page Html dotée d'un script JavaScript qui, sans utiliser de variable, affiche : la valeur 15 ; la valeur 1,5 ; la valeur de e (constante d'euler) avec 4 chiffres après la virgule et la valeur de 12345 en notation exponentielle dotée de 3 chiffres après la virgule; le texte «π =» suivi de la valeur de pi ; le texte «Je vous l'accorde, "Cabine 13" est une contrepèterie» une chaîne de caractère en majuscule (tout en étant saisie en minuscule dans le script) le texte «Pour le texte "ceci est une chaîne de caractère", je remarque qu'il y a xxx caractères, que le premier est x, que le r apparaît pour la première fois au x-ième caractère et que dernier est x.» en se servant des méthodes de l'objet string (s'aider ici d'une variable). 3.2.Exercice 2 Créer une page dotée de l'image landscape1.jpg qui est changée en landscape2.jpg par roll-over simple comme cela pourrait être fait en CSS. Faire de même avec un appel de fonction Faire de en sorte que l'image ne change qu'à l'occasion d'un clic sur l'image (voir structure conditionnelle if...) 3.3.Exercice 3 Exécuter le script exo3.js disponible sur le site du TP. Déterminer le type et/ou la valeur des variables affichées par les méthodes document.write(). Il faut être capable d'expliquer à chaque fois. 3.4.Exercice 4 Créer une page XHTLM qui affiche la factorielle des entiers 0 à 3 à l'aide d'une fonction récursive, c'est-àdire une fonction s'appelant elle même. Pour éviter un enchaînement infini d'appel de la fonction sur elle même il faut impérativement prévoir le cas où la fonction ne se rappelle pas mais renvoie une valeur. On s'aidera pour cela de la structure conditionnelle if. Rappel : x! est le produit de x par tous les entiers positifs qui lui sont inférieurs. Par définition, 0!=1. on montre facilement que x!=x*(x-1)! On pourra tracer l'exécution récursive à l'aide d'un point d'arrêt dans la fonction et en observant l'évolution de la pile dans Firebug. 3.5.Exercie 5 : Créer une page XHTLM comportant les déclarations suivantes : var a = new Array(); b = [1, 2, 3, "abc", [1, 2, 3, 4]]; R. C. 13/14

var c = ["ceci", "est", "un", "tableau"]; var d = "elu par cette crapule"; Le script affiche ensuite : La longueur de a ; la longueur de b ; la longueur du 3eme élément de b; la longueur du 4eme élément de b ; la longueur du 5eme élément de b ; la valeur du 4eme élément de b ; la valeur du premier élément imbriqué dans le 5eme élément de b ; la suite de valeurs contenues dans l'élément c, séparées par une virgule puis ces mêmes valeurs séparées par une virgule dans l'ordre inverse ; la valeur de d puis son reflet (permutation de caractères) afin de vérifier s'il s'agît d'un palindrome. (pour cela on transformera la chaine en tableau) R. C. 14/14