matrice d'objectifs d'examen...javascript. html et css, par exemple, sont en grande partie...

189

Malted Milk Media dispose d'une application mobile fonctionnelle qui donne de bons résultats. Mais elle n'est pas pratique. En effet, les utilisateurs doivent appuyer sur plus de touches et attendre plus longtemps que ce qui est généralement acceptable. L'équipe de développement a décidé que JavaScript contribuera grandement à rendre l'application plus réactive et sans problème.

jQuery

logiciel

méthodes

rappel

sous-routines

validation

variable

T E R M E S C L É S

application dynamique

bibliothèque

bibliothèque JavaScript

événements

fonction

gestionnaire d’événements

identificateurs

interactivité

M A T R I C E D ' O B J E C T I F S D ' E X A M E N

Compétences/Concepts Objectifdel'examenMTA Numérodel'objectifdel'examenMTA

Gestion et maintenance du langage JavaScript Gérer et assurer la mise à jour de JavaScript 4.1

Mise à jour de l'interface utilisateur avec JavaScript Mettre à jour l'interface utilisateur avec JavaScript 4.2

Présentation des principes de base de JavaScript et du codage

8L E Ç O N

■ Gestion et maintenance du langage JavaScript

HTML5 et CSS3 offrent une excellente base à votre site Web ou application mobile. Toutefois, effectuer des opérations plus structurées que la présentation du contenu, par exemple répondre avec des données individualisées sur un utilisateur final spécifique, effectuer une transaction de commerce en ligne ou dériver des résultats sur la base des données déjà saisies, demande une véritable programmation. JavaScript est un langage de programmation capable avec grande capacité d'exprimer les interactions que vous voulez que vos utilisateurs finaux aient avec votre application.

L'ESSENTIEL

190 | leçon 8

Prenons l'exemple d'une application mobile liée à un service qui affiche l'heure de la prochaine visite de service à un client. Elle propose un lien hypertexte pour appeler un répartiteur s'il est nécessaire de reprogrammer. Mais ce n'est pas très intelligent de proposer ce lien en dehors des heures ouvrables quand personne n'est là pour répondre. Comment faire en sorte que le lien hypertexte change selon l'heure de la journée ?Tous les travaux de ce type, qui pour un travailleur humain exigent une décision, un calcul ou une recherche, sont du domaine de la programmation. Pour nous, un logiciel est une recette que l'ordinateur exécute avec comme résultat une action ou un affichage particulier. Même si de nombreuses pages Web sont conçues pour être statiques en ceci qu'elles ont la même apparence pour tous les lecteurs, en toutes circonstances, la programmation JavaScript rend les applications dynamiques et interactives. Elles s'ajustent et répondent aux actions d'utilisateurs finaux particuliers. L’interactivité permet à un utilisateur d'effectuer une action dans une application, généralement en cliquant sur un bouton ou en appuyant sur une touche. Une application dynamique s'adapte et répond à des utilisateurs ou à leurs actions particulières. JavaScript augmente également les possibilités d'animer des affichages, autrement dit, de faire en sorte que des parties de l'affichage bougent et soient mises à jour sous les yeux d'un utilisateur final.Dans les programmes JavaScript, plusieurs éléments différents doivent être associés pour obtenir le résultat que vous recherchez. JavaScript diffère de CSS et HTML sur quelques aspects essentiels et vous apprendrez de nouveaux concepts pour tirer le meilleur parti de JavaScript. HTML et CSS, par exemple, sont en grande partie axés sur le fait de donner un aspect particulier à des éléments. JavaScript accorde plus d'attention à la façon dont les éléments agissent. Pour tester un programme JavaScript, vous avez souvent besoin de regarder l'écran à plusieurs moments dans le temps et peut-être d'interagir avec lui.Encore plus qu'avec HTML et CSS, votre travail dans JavaScript dépend d'un environnement de développement que vous comprenez et dans lequel vous êtes à l'aise. Un environnement de développement utile peut être aussi simple qu'une copie du Bloc-notes et Internet Explorer, ou aussi complexe qu'un environnement de développement intégré (IDE) doté d'un éditeur, d'un débogueur et d'un générateur d'application intégrés, et ainsi de suite. Les exercices de cette leçon utilisent les outils les plus simples possibles, ils sont faciles à adapter à des outils plus sophistiqués.

PRÊT POUR LA CERTIFICATIONComment JavaScript rend-il une application interactive et dynamique ?4.1

Les termes programme et script sont presque synonymes. Certaines personnes disent « script » pour souligner le fait que la source est petite ou pas en C ou Java ou pour des raisons plus vagues. Ne vous préoccupez pas des différences. Dans cette leçon, les termes programme, script, fichier source et code ont presque le même sens.

REMARQUE*

Cette leçon porte sur la création de programmes JavaScript et l'utilisation des fonctions. Vous apprendrez à créer des programmes simples à partir de zéro et à utiliser le code des bibliothèques JavaScript, jQuery et autres bibliothèques tierces. Vous apprendrez également à localiser et accéder aux éléments, écouter et répondre aux événements, afficher et masquer des éléments, mettre à jour le contenu des éléments et ajouter des éléments à la volée.

CRÉATION D'UN PROGRAMME JAVASCRIPT SIMPLE

PRÉPAREZ-VOUS. Pour créer un programme JavaScript simple, procédez comme suit : 1. À l'aide d'un outil d'édition ou de développement d'applications, créez un fichier avec

le contenu suivant :

<!doctype html> <html> <head> <title>Mon premier programme JavaScript</title> </head> <body> <h1>Mon premier programme JavaScript</h1> <p>Il s’agit de texte. <button type = 'button' onclick = "alert('Vous avez cliqué sur le bouton');">Je suis un bouton ; cliquez sur moi</button> </body> </html>

2. Enregistrez le fichier sous le nom L8-js1.html.

Présentation des principes de base de JavaScript et du codage | 191

3. Pour exécuter le programme JavaScript, ouvrez L8-js1.htmldans un navigateur Web. Les résultats doivent ressembler à ceux de la figure 8-1.

Figure 8-1

Votre premier programme JavaScript

Si le programme JavaScript ne s'affiche pas, vous devez activer JavaScript dans les préférences de votre navigateur Web. Dans Internet Explorer 9, par exemple, sélectionnez Outils > options Internet. Dans la boîte de dialogue Options Internet, cliquez sur l'onglet Sécurité . Cliquez sur le bouton Personnaliser le niveau ou Niveau par défaut, selon celui qui est disponible. Dans la boîte de dialogue Paramètres de sécurité, faites défiler vers le bas pour accéder à la section Script (voir la figure 8-2). Cliquez sur la case d'option Activer sous Active scripting, puis cliquez deux fois sur OK pour fermer les boîtes de dialogue. Essayez d'ouvrir à nouveau L8-js1.html dans votre navigateur Web afin d'exécuter le programme JavaScript.

Figure 8-2

Vérification des paramètres JavaScript dans Internet Explorer

192 | leçon 8

4. Cliquez sur le bouton que vous avez créé en JavaScript qui s'affiche sur l'écran. Un message d'alerte s'affiche, comme illustré dans la figure 8-3. Cela indique que votre programme JavaScript fonctionne correctement.

XREF

Dans les leçons précédentes, vous avez appris les bases de l'édition de balisage HTML et de code CSS et l'affichage du résultat. Utilisez les mêmes compétences pour travailler avec JavaScript.

Figure 8-3

Un message d'alerte est un moyen pratique pour tester le fonctionnement d'un programme JavaScript

5. Cliquez sur OK pour fermer le message d'alerte.

6. Laissez le fichier HTML, l'outil d'édition et le navigateur Web ouverts si vous envisagez d'effectuer l'exercice suivant au cours de cette session.

Il s'agit de votre premier programme JavaScript. Non seulement il a une apparence particulière sur l'écran, mais cette apparence change. C’est typique avec les programmes : ils répondent aux actions de l’utilisateur.

Toutefois, c'est un programme inhabituel, en ceci que sa partie JavaScript est presque invisible. Vous voyez le programme JavaScript ? C'est le seul fragment entre guillemets, comme suit :

alert('Vous avez cliqué sur le bouton');

L'alerte alert() elle-même est trop intrusive pour apparaître dans le code de production fourni pour une utilisation par les consommateurs. Elle n'apparaît donc presque jamais dans la documentation de référence. En même temps, c'est le moyen le plus simple de commencer à utiliser JavaScript et il peut être extrêmement utile lors du développement ou du débogage.

Un programme JavaScript ordinaire se compose d'une séquence d'instructions. Les instructions sont séparées par des points-virgules, comme vous le verrez dans le prochain exercice.

CRÉATION D'UN PROGRAMME JAVASCRIPT À INSTRUCTIONS MULTIPLES

PRÉPAREZ-VOUS. Pour créer un programme JavaScript à instructions multiples, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, mettez à jour L8-js1.html

en remplaçant alert() par le texte suivant :

alert('Ceci est la première alerte'); alert('Ceci est la seconde alerte');

2. Enregistrez le fichier.


3. Exécutez le programme JavaScript mis à jour en ouvrant le fichier HTML dans un navigateur Web.

4. Lorsque le premier message d'alerte s'affiche, fermez-le en cliquant sur OK. Le programme JavaScript passe à son instruction suivante, c'est-à-dire le second message d'alerte. Le second message d'alerte est illustré dans la figure 8-4.

5. Fermez le second message d'alerte en cliquant sur OK.

6. Fermez le fichier HTML, mais laissez l'outil d'édition et le navigateur Web ouverts si vous envisagez d'effectuer l'exercice suivant au cours de cette session.

Figure 8-4

Le second message d'alerte devient visible seulement après le rejet du premier

✚ PLUS D’INFORMATIONS

Pour plus d'informations sur JavaScript, visitez la page Web W3schools.com sur JavaScript à l'adresse http://www.w3schools.com/js/default.asp. Pour plus d'informations sur Microsoft et JavaScript, recherchez msdn javascript à l'aide de votre moteur de recherche favori.

Une fonction correspond à un segment d'un programme défini et exécuté indépendamment des autres parties. L'action d'une fonction est la séquence des actions des instructions qu'elle contient.

Création et utilisation des fonctions

En principe, un programme JavaScript entier pourrait être écrit avec une instruction après l'autre dans l'ordre exact dans lequel elles doivent s'exécuter. Cependant, les programmeurs ont constaté qu'il est utile d'introduire des symboles ou des noms pour des parties spéciales d'un programme.

La première partie est une fonction. En programmation, une fonction est un segment d'un programme défini et interprété indépendamment des autres parties. Prenons l'exemple d'une recette de cuisine. Il est inutile d'expliquer dans chaque recette écrite toutes les étapes qu'implique l'extraction du blanc d'un œuf. Une recette classique indique simplement, « ajouter un blanc d'œuf » et suppose que le lecteur sait qu'il doit chercher ailleurs pour obtenir des détails ou des indications sur la meilleure façon de choisir un œuf, de le casser, de séparer ses parties, etc. Dans la cuisine, un assistant peut même être

PRÊT POUR LA CERTIFICATIONQu'est-ce qu'une fonction de programmation ?4.1

194 | leçon 8

chargé de préparer les blancs d'œufs sans participation directe de la personne qui suit la recette. La programmation fonctionne de façon analogue : il est courant d'utiliser les fonctions écrites par d'autres personnes, parfois sans inspection minutieuse de la façon exacte dont elles fonctionnent.

L'écriture d'une fonction de programmation a deux objectifs principaux :

• Une tâche effectuée dans différentes situations peut être définie une seule fois et utilisée dans plusieurs cas avec la certitude que son comportement sera identique. Ce genre d'« abréviation » est plus concis et moins sujet aux erreurs que la répétition d'une séquence entière d'étapes dans chaque contexte où la séquence peut être nécessaire.

• Pour faciliter le travail de la personne qui écrit, gère ou lit le programme, il est utile et instructif d'identifier les segments importants du fonctionnement avec les noms de fonction. Tout comme les livres comportent des chapitres, avec des noms qui signalent les actions ou les thèmes, les programmes informatiques sont dotés de fonctions.

Il est important de comprendre que l'action d'une fonction correspond à la séquence des actions des instructions qu'elle inclut. Lorsque vous exécutez un programme qui contient une fonction, le programme exécute simplement les instructions au sein de la fonction.

Il est également important de distinguer la définition et l'exécution d'une fonction. L'expression d'une fonction, la section « function example1() {. . .} », n'exécute pas de code au sein de la fonction. Ce que vous pouvez observer dans le code est uniquement la définition d'une fonction. Une action utile se produit uniquement lorsque la fonction est appelée, exécutée ou lancée, ce sont des synonymes pour les besoins de ce document.

UTILISATION D'UNE FONCTION JAVASCRIPT

PRÉPAREZ-VOUS. Pour apprendre à utiliser une fonction JavaScript, procédez comme suit :

1. Dans un outil d'édition ou de développement d'applications, créez L8-js2.htmlavec le contenu suivant :

<!doctype html> <html> <head> <title>Première utilisation d'une fonction</title> <script type = "text/javascript"> function example1() { alert("Ceci est la première alerte."); alert("Ceci est la seconde alerte."); } </script> </head> <body> <h1>Première utilisation d'une fonction</h1> <p>Il s'agit de texte. <button type = 'button' onclick = "example1();">Je suis un bouton ; cliquez sur moi</button> </p> </body> </html>

2. Ouvrez L8-js2.htmldans un navigateur. Le programme s'affiche, comme illustré dans la figure 8-5. Observez le texte et le bouton. À ce stade, il n'y a aucun signe de JavaScript.


3. Cliquez sur le bouton. Comparez l'action de cette page avec le comportement du fichier L8-js1.html qui contient deux alertes. Voyez-vous comment ils agissent de la même façon même s'ils sont rédigés un peu différemment ? Le message d'alerte a la même apparence qu'il soit appelé à partir d'une définition de fonction ou non.


Cet exemple présente au moins deux autres nouveaux concepts, en plus de l'utilisation d'une fonction. Tout d'abord, il présente le code JavaScript intégré dans des balises <script> en HTML. Il y a plusieurs façons de « connecter » un programme JavaScript au balisage HTML auquel il s'applique. Cette utilisation de <script> dans <head> est courante, en particulier pour les projets JavaScript de taille moyenne.En outre, le nom « example1 » de la fonction mérite attention. Nous pouvons contrôler ce nom. Quand nous écrivons « href » dans le cadre d'un lien hypertexte, ou alert() pour afficher une alerte, nous nous appuyons sur des mots clés définis dans les normes pour HTML et JavaScript, respectivement. Le nom de fonction example1, cependant, ne respecte pas ces normes. C'est notre choix. Nous devons simplement être cohérents. Si nous écrivons "mon_exemple" au lieu de « example1 » dans la définition de la fonction, alors nous devons aussi utiliser "mon_exemple".Même si l’attribution du nom de la fonction est assez libre, il existe quelques limitations sur le choix du nom : le nom doit contenir des lettres, des chiffres, des tirets et le symbole dollar, mais doit impérativement commencer par une lettre, un tiret ou le symbole dollar. "example$1" est un nom de fonction JavaScript possible, mais pas "not.with.periods", "1wrong"et "first name/last name".Les programmes JavaScript ont une autre forme d'abréviation symbolique, ou nom, ce qui est courant. Cet élément s'appelle une variable. Alors qu'une fonction désigne une séquence d'actions, une variable représente un élément de données. Utilisez la syntaxe var pour définir une nouvelle variable dans JavaScript.

Figure 8-5

Ce programme ressemble à L8-js1.html

En fait, les règles pour les identificateurs—JavaScript, en gros les noms de variables et fonctions, sont un peu plus compliquées qu'indiqué ci-dessus. Les identificateurs ne peuvent pas être identiques aux mots déjà utilisés dans le langage. Par exemple, « if » recouvre une signification spéciale dans les instructions JavaScript et n'est pas disponible comme nom de variable. Toutefois, dans certaines circonstances, les caractères autorisés dans un nom peuvent provenir d'alphabets autres que l'anglais. Une définition complète des règles d'affectation des noms de JavaScript dépasse le cadre de cette leçon.

REMARQUE*

196 | leçon 8

UTILISATION D'UNE VARIABLE DANS UN PROGRAMME JAVASCRIPT

PRÉPAREZ-VOUS. Pour utiliser une variable dans un programme JavaScript, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez L8-js3.htmlavec le

contenu suivant :

<!doctype html> <html> <head> <title>Première utilisation d'une variable</title> <script type = "text/javascript"> function example1() { var version_name = "numéro de série X358-AA-3T601-22" alert("Ceci est la première alerte de " + version_name); alert("Ceci est la seconde alerte de " + version_name); } </script> </head> <body> <h1>Première utilisation d'une variable</h1> <p>Il s'agit de texte. <button type = 'button' onclick = "example1();">Je suis un bouton ; cliquez sur moi</button> </body> </html>

2. Ouvrez L8-js3.html dans un navigateur et cliquez sur le bouton. La première alerte s'affiche à l'écran, comme illustré dans la figure 8-6.

Figure 8-6

La valeur d'une variable s'affiche dans un message d'alerte

3. Cliquez sur OK afin de rejeter la première alerte et passer à la seconde. Vous voyez en quoi une variable peut être utile ? Un numéro de série ou autre quantité importante peut figurer dans plusieurs endroits différents dans un programme. Il n'est pas nécessaire de copier la valeur dans chaque emplacement. Au lieu de cela, JavaScript vous permet d'utiliser le nom de la variable qui contient la valeur.

4. Cliquez sur OK pour fermer le second message d'alerte.



Les programmeurs les plus efficaces savent faire bon usage de ce qu'écrivent les autres. Une bibliothèque de programmation contient des extraits de code, sous-routines, classes et autres ressources que vous pouvez ré-utiliser pour créer des logiciels. Il existe de nombreuses bibliothèques JavaScript et jQuery est l'une des plus populaires.

Utilisation de jQuery et d'autres bibliothèques tierces

D'autres programmeurs ont déjà pensé à bon nombre des tâches auxquelles vous serez confronté, que votre travail implique la confirmation que les numéros de carte de crédit ne sont pas valides, l'affichage d'images médicales ou la création d'une infrastructure de discussion pour une équipe répartie sur quatre continents. Vous pouvez réutiliser le code écrit par d'autres en utilisant les bibliothèques JavaScript. Une bibliothèque est un ensemble de ressources, comme le code de fonction et les sous-routines préexistants, que les développeurs utilisent pour créer des programmes. (Pour les développeurs JavaScript, les fonctions qui ne retournent aucune valeur sont parfois considérées comme des sous-routines.) Une bibliothèque JavaScript désigne le code JavaScript préexistant. Dans la plupart des entreprises, des politiques ont été adoptées avant votre arrivée au sujet des bibliothèques à utiliser et de la façon de les appeler. Le Web regorge de conseils sur les bibliothèques et leur applicabilité et prend en charge un riche marché de celles qui sont disponibles. Beaucoup, mais pas toutes, sont disponibles gratuitement. Certaines ont des politiques de « prise en charge » plus ou moins formelles, c'est-à-dire un engagement à répondre lorsque des défauts sont signalés. Certaines de ces bibliothèques sont destinées à seulement un petit nombre de programmeurs, par exemple une bibliothèque qui facilite le développement d'applications qui contrôlent des boulangeries industrielles, alors que d'autres s'adressent à tous ceux qui développent des applications en JavaScript.jQuery est la principale bibliothèque JavaScript de ce genre. Plus de la moitié des 10 000 sites Web les plus visités dans le monde utilisent jQuery. Cette bibliothèque est disponible gratuitement et sans restriction excessive. Vous devrez consulter un avocat, bien sûr, pour savoir comment ses licences s'appliquent à votre situation. Notez aussi que Microsoft et d'autres acteurs importants du secteur mettent la bibliothèque jQuery à la disposition de tout le monde en téléchargement.

UTILISATION DE JQUERY

PRÉPAREZ-VOUS. Pour utiliser jQuery, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez L8-js4.htmlavec le

contenu suivant :

<!doctype html> <html> <head> <title>Première utilisation de jQuery</title> <script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js"></script> <script type = "text/javascript"> // Une fois le document HTML chargé, exécutez // a fonction dans ready(). $(document).ready(function() { // Chaque paragraphe reçoit une action « clic » : . $("p").click(function() { $(this).hide(); }); });

</script> </head>

PRÊT POUR LA CERTIFICATIONQu'est-ce que jQuery ?4.1

198 | leçon 8

<body> <p>Il s'agit du premier paragraphe. Cliquez sur moi pour me faire disparaître. <p>Il s'agit du deuxième paragraphe. <p>Il s'agit du troisième paragraphe. </body> </html>

2. Ouvrez L8-js4.htmldans un navigateur. La page s'affiche, comme illustré dans la figure 8-7. Notez que trois phrases s'affichent.

3. Cliquez n'importe où dans le premier paragraphe. Le paragraphe disparaît, comme illustré dans la figure 8-8.

Figure 8-7

Un simple affichage HTML, avant l'exécution de JavaScript

Figure 8-8

JavaScript a agi pour masquer un paragraphe

4. Cliquez n'importe où dans le second paragraphe pour le faire disparaître.


Vous voyez en quoi c'est un modèle de comportement utile dans votre application Web, mobile ou de console de jeu ? Supposons que vous voulez que les informations qui s'affichent pour les utilisateurs finaux changent selon les circonstances. Bien qu'il soit possible d'écrire en JavaScript « pur », sans jQuery, qui se comporte comme L8-js4.html, il faut beaucoup plus de codage. jQuery rend de nombreuses opérations courantes plus courtes, plus compréhensibles et plus faciles à exprimer correctement.

Vous pourriez être invité à utiliser plusieurs bibliothèques tierces autres que jQuery. Le plus souvent, vous recevrez des instructions explicites sur quelle bibliothèque utiliser. Lorsque vous avez le choix entre plusieurs bibliothèques, vous pouvez trouver de nombreuses informations sur le World Wide Web en recherchant le nom de la bibliothèque. En dehors de jQuery, les

PRÊT POUR LA CERTIFICATIONQuels sont les exemples de bibliothèques tierces autres que jQuery ?4.1


autres bibliothèques répandues incluent Dojo, MooTools et YUI. Lorsque vous utilisez une bibliothèque tierce, vous devez généralement inclure un élément tel que le suivant :

<script type = "text/javascript" src = "adresse Web ou locale de la source de la bibliothèque JavaScript"></script>

Pourquoi est-il nécessaire d'inclure cette balise ? Lorsque vous voulez utiliser wonderful_function() à partir d'une bibliothèque tierce dans l'une des pages que vous écrivez, la seule façon pour le navigateur de savoir ce que vous entendez par wonderful_function() est d'utiliser une référence à son apparition dans la bibliothèque. Le <script ...> fournit cette référence.

Vous devez également lire la documentation de la bibliothèque que vous voulez utiliser et peut-être acquérir une licence.

■ Mise à jour de l'interface utilisateur avec JavaScript

JavaScript est indispensable pour presque tous les effets d'applications HTML modernes et réactives.L'ESSENTIEL

Vous connaissez les concepts de base de HTML : navigation à l’aide de liens hypertexte et du bouton Précédent, données récupérées dans des formulaires soumis et tout le style visuel du balisage HTML traditionnel. Trusty Lawn Care veut une application qui en fait plus. Elle doit afficher les mises à jour en temps réel des horaires du personnel, réagir rapidement et en détail aux informations de compte, personnaliser les conseils en fonction des personnes, de la météo et bien plus encore. Seul JavaScript permet ce dynamisme et cette interactivité.Pour obtenir un exemple de ce que JavaScript rend possible, créez une petite calculatrice intégrée au navigateur.

CRÉATION D'UNE CALCULATRICE INTÉGRÉE AU NAVIGATEUR À L'AIDE DE JAVASCRIPT

PRÉPAREZ-VOUS. Pour créer une calculatrice intégrée au navigateur à l'aide de JavaScript, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez L8-js5.htmlavec le

contenu suivant :

<!doctype html> <html> <head> <title>Calculatrice intégrée au navigateur</title> </head> </body>

<h1>In-browser calculator</h1> <form name="calculator"> <table border=4> <tr> <td> <input type="text" name="Input" Size="20"> <br> </td> </tr> <tr> <td> <input type="button" name="one" value=" 1 " OnClick="calculator.Input.value

PRÊT POUR LA CERTIFICATIONComment utiliser JavaScript pour mettre à jour l'interface utilisateur ?4.2

200 | leçon 8

+= '1'"> <input type="button" name="two" value=" 2 " OnCLick="calculator.Input.value += '2'"> <input type="button" name="three" value=" 3 " OnClick="calculator.Input.value += '3'"> <input type="button" name="plus" value=" + " OnClick="calculator.Input.value += ' + '"> <br> <input type="button" name="four" value=" 4 " OnClick="calculator.Input.value += '4'"> <input type="button" name="five" value=" 5 " OnCLick="calculator.Input.value += '5'"> <input type="button" name="six" value=" 6 " OnClick="calculator.Input.value += '6'"> <input type="button" name="minus" value=" - " OnClick="calculator.Input.value += ' - '"> <br> <input type="button" name="seven" value=" 7 " OnClick="calculator.Input.value += '7'"> <input type="button" name="eight" value=" 8 " OnCLick="calculator.Input.value += '8'"> <input type="button" name="nine" value=" 9 " OnClick="calculator.Input.value += '9'"> <input type="button" name="times" value=" x " OnClick="calculator.Input.value += ' * '"> <br> <input type="button" name="clear" value=" c " OnClick="calculator.Input.value = ''"> <input type="button" name="zero" value=" 0 " OnClick="calculator.Input.value += '0'"> <input type="button" name="DoIt" value=" = " OnClick="calculator.Input.value = eval(calculator.Input.value)"> <input type="button" name="div" value=" / " OnClick="calculator.Input.value += ' / '"> </td> </tr> </table> </form>

</body> </html>


2. Ouvrez L8-js5.htmldans un navigateur. La calculatrice s'affiche, comme illustré dans la figure 8-9.

Figure 8-9

Une calculatrice créée à l'aide de JavaScript

Figure 8-10

Lorsque vous cliquez ou tapez le signe égal dans votre calculatrice JavaScript, elle calcule immédiatement un résultat, comme une calculatrice de poche classique

3. Essayez votre calculatrice. Cliquez sur les boutons 7 × 14 + 2 = et observez le résultat. La calculatrice a-t-elle affiché 100, comme illustré dans la figure 8-10 ?


Ce petit exemple montre que pour l'essentiel, un programme JavaScript peut faire dans le navigateur tout ce que n'importe quelle autre application fait, et parfois en seulement quelques lignes de code source. Les fonctionnalités JavaScript incluent la saisie de données, la réponse à des frappes de touches et des mouvements de souris, l'affichage des résultats, des calculs complexes et plus encore, comme l'illustrent les exercices suivants. Les applications mobiles, construites sur une base de HTML5 offrent toutes les mêmes fonctionnalités.

Tout ce que vous voyez dans votre navigateur, JavaScript peut « y accéder » et le contrôler par programmation. Vous pouvez utiliser la méthode getElementById() pour accéder aux éléments d'affichage.

Localisation et accès aux éléments

202 | leçon 8

Au cours de votre carrière de programmeur, vous serez souvent en mesure de donner une description de ce que vous voulez, quelque chose comme, « alors nous devons vérifier que ce que l'utilisateur a entré est », mais vous ne saurez pas comment traduire l'idée en JavaScript. Le défi consiste souvent à identifier et isoler ce qui se passe avec un élément particulier que vous voyez à l'écran. Ici, « élément » peut désigner un bouton, un champ de saisie, une figure, du texte, etc.

L'un des principaux moyens pour accéder aux éléments d'affichage est la méthode getElementById(). Cette méthode retourne une référence au premier objet associé à l'attribut id ou NAME spécifié.

PRÊT POUR LA CERTIFICATIONQuelle méthode JavaScript retourne une référence au premier élément avec un attribut ID ou NAME spécifique ?4.2

Un « objet » désigne une « chose » ou un « élément » en jargon informatique. Il s'agit de la catégorie la plus générale des éléments étudiés. Techniquement, le JavaScript est un langage « basé sur les objets », c'est-à-dire, qu'il met l'accent sur le fait que ces instances de programmation en tant que « premier paragraphe » ont des propriétés et des méthodes qui fournissent des informations sur le paragraphe et des possibilités d'agir sur celui-ci.

REMARQUE*

UTILISATIONDELAMÉTHODEGETELEMENTBYID()POURL'ENTRÉEUTILISATEUR

PRÉPAREZ-VOUS. Pour apprendre à utiliser la méthode getElementByID() afin de recueillir des entrées utilisateur, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez L8-js6.htmlavec le

contenu suivant :

<!doctype html> <html> <head> <title>Validation d'une entrée utilisateur</title>

<script type = "text/javascript"> function validate() { var value = document.getElementById("input1").value; if (isNaN(value)) { modifier = "non "; } else { modifier = ""; } var report = "Vous avez saisi '" + value + "'; il s'agit " + modifier + "d'un nombre valide."; alert(report); } </script> </head> <body>

<h1>Validation d'une entrée utilisateur</h1> <form name="calculator"> <input type = "text" id = "input1"></input> <button type = "button" onclick = "validate();">Cliquez sur moi pour voir ce que je pense de votre entrée</button> </form>

</body> </html>

2. Ouvrez L8-js6.htmldans un navigateur.

3. Tapez un mot court dans la zone de saisie, puis cliquez sur le bouton. Les résultats sont présentés dans la figure 8-11. Cliquez sur OK pour apporter vos modifications et fermer la boîte de dialogue.


4. Tapez un nombre dans la zone de saisie et cliquez sur le bouton. Comment un message contextuel a-t-il été modifié par rapport à l'étape précédente ? Cliquez sur OK pour apporter vos modifications et fermer la boîte de dialogue.


La validation est une responsabilité importante pour JavaScript : l’utilisateur a-t-il saisi un chiffre qui respecte une contrainte budgétaire ? Est-ce un numéro de carte de crédit légal ? Une adresse e-mail est-elle autorisée et n’est pas en conflit avec une adresse existante ? Le fichier L8-js6.html est un petit modèle pour le thème général de la validation. Nous avons souvent besoin de confirmer qu'une entrée d'utilisateur est, en fait, numérique, dans le sens où 0 et 3,141 sont des nombres appropriés, mais abc et 3,141. ne le sont pas. Alors qu'il serait judicieux pour JavaScript d'avoir une fonction is_a_number(), pour des raisons historiques, il utilise seulement isNaN.Pourquoi getElementById est-il appelé une « méthode » ? JavaScript ne crée-t-il pas une bibliothèque de fonctions pour effectuer des tâches utiles ?Oui et non. Même si JavaScript crée une bibliothèque de fonctions utiles pour nombreuses opérations courantes, certaines fonctionnalités JavaScript sont fortement liées à des objets particuliers que HTML définit. Ces fonctionnalités sont appelées méthodes. Les méthodes se distinguent des fonctions uniquement par le fait qu'elles sont toujours associées et utilisées avec un objet particulier. isNaN() est un exemple d'une fonction JavaScript qui permet de tester la condition « n'est pas un nombre ». Si isNaN() retourne la valeur 0 (false), la valeur est un nombre. document.getElementById() est un exemple de méthode JavaScript. Vous ne pouvez utiliser efficacement getElementById qu'avec l'objet de document spécial.

Figure 8-11

Un modèle pour la validation d'entrée utilisateur par JavaScript

Un « événement » est un concept crucial en programmation interactive. Une grande partie de la programmation JavaScript concerne les réponses à un événement. L'événement Load est utilisé couramment et il se déclenche lorsque son propriétaire a terminé son action.

Écoute et réponse aux événements

Beaucoup de conditions requises par les applications impliquent des événements qui sont des actions qui déclenchent d'autres actions. Les descriptions en termes de « quand » ou « si » sont généralement codées en JavaScript en termes d'événements. Cela peut surprendre les programmeurs habitués à utiliser d'autres langages dans lesquels l'accent est mis sur la séquence :

1. Effectuez la première opération.2. Ensuite, effectuez la deuxième opération.

204 | leçon 8

3. Ensuite, effectuez la troisième opération.4. Terminez la séquence.

La programmation basée sur les événements, en revanche, ressemble plus à un dialogue : un utilisateur effectue une action, puis le programme JavaScript répond, et ainsi de suite.

Tous les programmes d'exemple JavaScript présentés jusqu'à présent impliquaient des événements. Le fait d’affecter une valeur au gestionnaire d’événements onClick pour l’événement Click a l’effet suivant : « lorsque l'utilisateur final clique sur l'élément en question, exécutez le script donné par la valeur onClick. » Dans ce cas l'action de clic est l'événement et le script est la réponse ou le rappel.

Les références JavaScript compilent tous les événements reconnus. Les événements qui sont souvent programmés, au-delà d'un clic sur un élément, sont les suivants :

• soumission d'un formulaire • frappes de touches • autres manipulations de souris, dont les doubles-clics et les déplacements de la souris • sélection d'un élément d'une zone de liste • heure de fin de chargement d'une image

Le gestionnaire d'événements de onLoad est plus important que de nombreux débutants ne le reconnaissent. OnLoad « appartient » aux éléments HTML ; il se déclenche lorsque son propriétaire a terminé son action. L'événement onLoad pour une image <img> se produit lorsque l'image est entièrement restituée et visible. L'événement onLoad pour une table <table> se déclenche une fois que toutes les cellules de cette table ont été tracées.

UTILISATION DU GESTIONNAIRE D'ÉVÉNEMENTS DE ONLOAD

PRÉPAREZ-VOUS. Pour utiliser le gestionnaire d'événements de OnLoad, procédez comme suit : 1. Dans un éditeur de texte ou un outil de développement d'applications, créez L8-js7.

html avec le contenu suivant :

<!doctype html> <html> <head> <title>Validation d’une entrée utilisateur</title>

<script type = “text/javascript”> function validate() { var value = document.getElementById(“input1”).value; if (isNaN(value)) { modifier = “non “; } else { modifier = “”; } var report = “Vous avez saisi ‘” + value + “’; il s’agit “ + modifier + “d’un nombre valide.”; alert(report); } </script> </head> <body>

PRÊT POUR LA CERTIFICATIONQuelle est l'action du gestionnaire d'événements de onLoad ?4.2


<h1>Validation d’une entrée utilisateur</h1> <form name=”calculator”> <input type = “text” id = “input1”></input> <button type = “button” onclick = “validate();”>Cliquez sur moi pour voir ce que je pense de votre entrée</button> </form>

</body> </html>

2. Ouvrez L8-js7.htmldans un navigateur. Un formulaire s'affiche, comme illustré dans la figure 8-12. L'alerte qui s'affiche indique que le chargement de <body> est terminé. C'est le sens de onload = "init();".

Figure 8-12

Une fois que tout le code HTML est complètement chargé, l'événement OnLoad est déclenché

3. Cliquez sur OK pour fermer la boîte de dialogue.

4. Entrez une valeur dans le champ de saisie et cliquez sur le bouton. Observez comment ce programme interprète cette valeur, dont un exemple est illustré dans la figure 8-13.

Figure 8-13

Le code JavaScript de cet exemple réagit à la valeur entrée

206 | leçon 8

5. Faites des expériences avec d'autres valeurs.


Un symptôme typique des programmes JavaScript erronés est qu'ils sont irréguliers : ils donnent des résultats différents à des moments différents. Dans certains cas, cela est dû au fait que le programme est écrit de telle manière qu'il dépend de l'existence d'un élément d'écran particulier, mais ne garantit pas que cet élément existe. Le lancement du programme à des moments différents peut modifier légèrement l'ordre de chargement et les résultats peuvent donc sembler imprévisibles. Une méthode pour résoudre de tels problèmes consiste à commencer les calculs seulement après le « déclenchement » de l'événement onLoad , comme dans in L8-js7.html.

Vous pouvez afficher ou masquer des éléments à l'aide de l'attribut HTML display pour rendre vos affichages « intelligents » et montrer à l'utilisateur des informations pertinentes et les masquer lorsqu'elles ne sont plus utiles.

Affichage et masquage des éléments

Un affichage particulier peut montrer différents types d’informations selon les circonstances : un numéro de téléphone en dehors des heures de bureau et en dehors des jours ouvrables, un avertissement sur l'utilisation affiché seulement les mois où le trafic est excessif, ou des avis sur l'activité des autres utilisateurs affichés seulement quand ceux-ci sont connectés. Une méthode pratique permettant d'organiser ces variations consiste à disposer tous les messages possibles dans l'écran, puis à n'afficher que les plus pertinents. Les éléments HTML ont un attribut display utile pour cette approche.

L'exercice suivant consiste à créer une petite application qui affiche et masque un paragraphe selon la valeur entrée par un utilisateur final. Le programme affiche un message si l'utilisateur entre la valeur 80 ou plus.

MASQUAGE DE PARTIES DE L'AFFICHAGE EN FONCTION DE L'ACTION DE L'UTILISATEUR

PRÉPAREZ-VOUS. Pour créer une application qui affiche et masque un paragraphe en fonction de la valeur entrée par un utilisateur final, procédez comme suit :

1. Dans un éditeur de texte ou un outil de développement d'applications, créez L8-js8.htmlavec le contenu suivant :

<!doctype html> <html> <head> <title>Afficher/masquer en réponse</title>

<script type = "text/javascript"> function check_range() { var value = document.getElementById("price1").value; var paragraph_list = document.getElementsByTagName("p"); var first_paragraph = paragraph_list[0]; if (value >= 80) { display = "block"; } else { display = "none"; } first_paragraph.style.display = display; } </script> </head> <body>

PRÊT POUR LA CERTIFICATIONQuel attribut HTML pouvez-vous utiliser pour afficher des éléments à l'aide de JavaScript ?4.2


<h1>Le prix total, taxes comprises</h1> <form> Est: <input type = "number" id = "price1" min = "1" max = "100" oninput = "check_range();" ></input> </form> <p style = "display:none;">INDETERMINÉ Avertissement :</p>

</body> </html>

2. Ouvrez L8-js8.htmldans un navigateur. Les résultats sont présentés dans la figure 8-14.

3. En utilisant le clavier, entrez chacun de ces « prix » en appuyant sur la touche Entrée après chacun d'eux : 1, 50, 79, 80, 90, et 60. Un avertissement s'affiche lorsque vous entrez 80 et 90, comme illustré dans la figure 8-15.

Figure 8-14

L'interface du programme

Figure 8-15

Votre programme JavaScript vous avertit lorsque la valeur que vous entrez s'approche d'une plage particulière


Les débutants font souvent l'erreur d'oublier « show » et « hide ». L8-js8.html commence par le paragraphe d'avertissement masqué, puis utilise JavaScript pour l'afficher dans certaines circonstances. Souvenez-vous lorsque vous testez la fonctionnalité afficher/masquer que

208 | leçon 8

JavaScript masque à nouveau un élément, au moyen de l'attribut display affecté, une fois que les conditions pour « show » ne sont plus remplies. Dans le cas contraire, une fois qu'un élément s'affiche, il n'est plus masqué.

Est-ce qu'une partie d'un affichage dépend d'une autre partie ? Utilisez JavaScript et la propriété innerHTML pour synchroniser instantanément les deux parties.

Mise à jour du contenu des éléments

Le dernier exercice a réagi à l'entrée d'un prix en affichant ou en masquant un paragraphe d'avertissement. JavaScript peut faire des calculs beaucoup plus complexes que juste un afficher/masquer. Il peut calculer une distance, une recommandation ou, comme le montre L8-js9.html, un prix total.

JavaScript utilise la propriété innerHTML pour modifier le contenu actuel des éléments HTML (appelé également « contenu interne ») ou pour insérer un nouveau contenu.

MISE À JOUR DU CONTENU VISIBLE SUR L'ÉCRAN

PRÉPAREZ-VOUS. Pour créer une application qui met à jour le contenu visible sur l'écran, procédez comme suit :

1. Dans un outil d'édition ou de développement d'applications, créez L8-js9.html avec le contenu suivant :

<!doctype html> <html> <head> <title>Calcul d'un élément</title>

<script type = "text/javascript"> //check_range affecte le style d'affichage // du premier paragraphe en tant que fonction du // prix affiché, s'il est de 80 et // plus ou 79 et moins. function check_range() { var value = document.getElementById("price1").value; var paragraph_list = document.getElementsByTagName("p"); var first_paragraph = paragraph_list[0]; if (value >= 80) { display = "block"; } else { display = "none"; } first_paragraph.style.display = display; } // compute_total() est chargé de // mettre à jour avec le total du // prix et des taxes. function compute_total() { var value = document.getElementById("price1").value; if (isNaN(value)) { total = "INDETERMINÉ"; } else { // Prenons l'exemple d'une taxe de 8 %. total = 1.08 * value; total = total.toFixed(2); }

PRÊT POUR LA CERTIFICATIONQuelle propriété JavaScript utilise-t-il pour mettre à jour le contenu des éléments HTML ?4.2


var total_slot = document.getElementById("total"); total_slot.innerHTML = total; } </script> </head> <body><h1>Compute element</h1> <form> Calcul d'un élément: <input type = "number" id = "price1" min = "1" max = "100" oninput = "check_range(); compute_total();" ></input> Entrez un prix : is <span id = "total">INDETERMINATE</span>. </form> <p style = "display:none;">Warning: you are within 20% of your limit.</p> </body> </html>

2. Ouvrez L8-js9.html dans un navigateur Web.

3. À l'aide du clavier, tapez le nombre 1 dans la zone de texte. Un message s'affiche, comme illustré dans la figure 8-16. Il indique le prix majoré de la taxe de 8 % sur un élément de 1 $. Remarquez comme l'affichage est mis à jour rapidement et sans problème.

Figure 8-16

JavaScript peut calculer immédiatement un total qui inclut la taxe de vente sur la base d'une entrée utilisateur

4. Appuyez sur Entrée.

5. Tapez 50 dans la zone de texte et observez comment le message affiché change.

6. Répétez les étapes 3 et 4 en utilisant les valeurs 79, 80, 90, et 60 chaque fois.


Vous pouvez utiliser la commande createElement et la méthode appendChild avec JavaScript pour ajouter des éléments après le chargement du code HTML.

Ajout d'éléments

JavaScript permet des modifications encore plus radicales d'un affichage. Lorsque cela est nécessaire, il est possible de créer de nouveaux éléments et de les inclure dans un affichage existant. La commande createElement et la méthode appendChild permettent de le faire.

PRÊT POUR LA CERTIFICATIONQuelle est l'action de la commande createElement ?4.2

210 | leçon 8

AJOUT D'UN ÉLÉMENT À L'AFFICHAGE

PRÉPAREZ-VOUS. Pour créer une application qui ajoute des éléments à l'affichage, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez L8-js10.html avec

le contenu suivant :<!doctype html> <html> <head> <title>Créer un élément</title>

<script type = "text/javascript"> function add_paragraph() { var original = document.getElementById("original"); var new_paragraph = document.createElement("p"); var current_time = new Date() var this_text = "Ce nouveau paragraphe est apparu à " + current_time + "."; // Même une fois que le navigateur a rendu // tout le HTML, il est possible d'ajouter de *nouveaux* // éléments HTML. createTextNode()- // appendChild()-insertBefore() est un // modèle typique pour ajouter un nouveau contenu // textuel. var new_content = document.createTextNode(this_text); new_paragraph.appendChild(new_content); document.body.insertBefore(new_paragraph, original); } </script> </head> <body>

<h1>Créer un élément</h1> <p id = "original">C'est le texte qui s'affiche lors du premier chargement de l'affichage.</p> <button type = "button" onclick = "add_paragraph();">Cliquez sur moi pour ajouter un nouveau contenu</button> <p style = "display:none;">Avertissement :</p>

</body> </html>

2. Ouvrez L8-js10.html dans un navigateur Web. Le programme s'affiche, comme illustré dans la figure 8-17.

Figure 8-17

L'interface de programmation initiale


3. Cliquez sur le bouton. L'écran change, comme illustré dans la figure 8-18.

Figure 8-18

Un écran constitué d'éléments HTML simples ainsi que d'autres créés par JavaScript en réponse à l'action de l'utilisateur

4. Cliquez sur le bouton encore plusieurs fois pour voir les résultats. 5. Fermez le fichier HTML, mais laissez l'outil d'édition et le navigateur Web ouverts si

vous envisagez d'effectuer l'exercice suivant au cours de cette session.

La création d'un élément est une opération un peu plus délicate que la mise à jour d'un élément existant. Vous devez utiliser JavaScript pour créer des relations que HTML établit automatiquement pour votre compte.

RÉSUMÉ DES COMPÉTENCES

Danscetteleçon,vousavezappriscequisuit:

• HTML5 et CSS3 offrent une excellente base à votre site Web ou application mobile. Toutefois, effectuer des opérations plus structurées que la présentation du contenu, par exemple répondre avec des données individualisées sur un utilisateur final spécifique, effectuer une transaction de commerce en ligne ou dériver des résultats sur la base des données déjà saisies, demande une véritable programmation. JavaScript est un langage de programmation capable avec grande capacité d'exprimer les interactions que vous voulez que vos utilisateurs finaux aient avec votre application.

• Une fonction représente un segment d'un programme défini et exécuté indépendamment des autres parties. L'action d'une fonction est la séquence des actions des instructions qu'elle contient.

• Les programmeurs les plus efficaces savent faire bon usage de ce qu'écrivent les autres. Une bibliothèque de programmation contient des extraits de code, sous-routines, classes et autres ressources que vous pouvez ré-utiliser pour créer des logiciels. Il existe de nombreuses bibliothèques JavaScript et jQuery est l'une des plus populaires.

• JavaScript est indispensable pour presque tous les effets d'applications HTML modernes et réactives.

• JavaScript peut « accéder » à tout ce que vous voyez dans votre navigateur et le contrôler par programmation. Vous pouvez utiliser la méthode getElementById() pour accéder aux éléments d'affichage.

• Un « événement » est un concept crucial en programmation interactive. Une grande partie de la programmation JavaScript concerne les réponses à un événement. L'événement onLoad est utilisé couramment et il se déclenche lorsque son propriétaire a terminé son action.

• Vous pouvez afficher ou masquer des éléments à l'aide de l'attribut HTML display pour rendre vos affichages « intelligents » et montrer à l'utilisateur des informations pertinentes et les masquer lorsqu'elles ne sont plus utiles.

• Vous pouvez utiliser la commande createElement et la méthode appendChild avec JavaScript pour ajouter des éléments après que le chargement du code HTML.

212 | leçon 8

Compléter l’espace videComplétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces prévus à cet effet. 1. Un est une recette que l'ordinateur exécute avec comme résultat une

action ou un affichage particulier. 2. Utilisez la syntaxe var pour définir une nouvelle dans JavaScript. 3. Beaucoup de conditions requises par les applications impliquent des ,

qui représentent des actions, par exemple le clic d'une souris, qui déclenchent d'autres actions.

4. Vous remarquez qu'une partie de votre programme JavaScript représente une séquence d'actions dont la logique est distincte des autres parties du programme. Il serait probablement utile de définir une pour exécuter cette séquence spécifique.

5. L'événement associé à <body> constitue une garantie que tout le HTML a été affiché.

6. Un modèle de codage courant consiste à associer un ID à un élément HTML spécifique, puis à accéder à cet élément via JavaScript avec .

7. Les JavaScript sont les noms de variables et de fonctions. 8. Une est un ensemble de ressources, comme le code des fonctions et

les sous-routines préexistants, que les développeurs utilisent pour créer des programmes. 9. Une se compose de code JavaScript pré-écrit. 10. Plus de la moitié des principaux sites Web utilisent la bibliothèque JavaScript

.

Questions à choix multiplesEntourez la lettre correspondant à la meilleure réponse. 1. Parmi les types d'applications suivantes, lequel est créé par la programmation

JavaScript ? (Choisissez toutes les réponses applicables.)a. statiqueb. dynamiquec. syntaxiquement corrected. interactive

2. Parmi les bibliothèques suivantes, lesquelles sont des bibliothèques JavaScript ? (Choisissez toutes les réponses applicables.)a. Dojob. MooToolsc. YUId. jQuery

3. Parmi les variables suivantes, laquelle est une variable JavaScript valide ?a. my.variableb. 1st-variablec. ord['a']d. [TBC]var1_$

4. Dans quel cas JavaScript ne peut-il pas être utilisé ?a. Avec HTML 4.01 et versions antérieuresb. Lorsque l'utilisateur a désactivé JavaScript dans les préférences du navigateurc. Lorsque l'utilisateur n'a pas installé JavaScript sur son bureaud. Aucune des réponses ci-dessus

■ Évaluation des connaissances


5. Parmi les propriétés suivantes, laquelle JavaScript utilise-t-il pour modifier le contenu actuel d'éléments HTML ?a. changeHTMLb. modInnerHTMLc. innerHTMLd. HTMLinner

6. Une page Web particulière a un seul <form>. Comment JavaScript accède-t-il à cet élément ?a. document. getElementsByTagName("form")[0]b. document. getElementsByTagName("form")[1]c. document. getElementsByTagName("form")d. [document. getElementsByTagName("form")]

7. L'utilisateur a coché une case dans un formulaire précisant qu'il n'a pas voyagé récemment dans un pays présentant un accroissement des cas d'hépatite. Comment pourriez-vous utiliser JavaScript pour masquer un paragraphe de mise en garde ?a. warning.style.display = "aucun" b. warning.style.display = 0c. hide(warning)d. warning.style.hide()

8. Une instruction individuelle en JavaScript se termine par un(e) ___.a. marque de hachageb. parenthèse fermantec. pointd. point-virgule

9. Parmi les propriétés suivantes, laquelle JavaScript utilise-t-il pour ajouter de nouveaux éléments à l'affichage d'un programme ? (Choisissez toutes les réponses applicables.)a. createElementb. appendChildc. getElementd. addChild

10. Parmi les propositions suivantes, laquelle peut être utilisée pour afficher et masquer des éléments dans un programme JavaScript ?a. display attributeb. show-hide attributec. show commandd. innerHTML

Vrai/FauxEntourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.V F 1. Les noms des fonctions sont répertoriés dans la norme JavaScript.V F 2. Dans la source HTML, le code JavaScript apparaît généralement dans un élément

<script> .V F 3. Il est possible d'écrire du code JavaScript qui sera exécuté avant le chargement

de toutes les images.V F 4. Si la fonction f2() utilise la fonction f1(), et que les définitions des deux fonctions

figurent dans le même élément <script>, alors la définition de f1() doit figurer en premier.

V F 5. La méthode getElementByElement() retourne une référence au premier objet associé à l'attribut id ou NAME spécifié.

214 | leçon 8

■ Évaluation des compétences

Scénario8-1:Validationdesentrées

Il vous a été demandé de coder une fonction JavaScript pour valider ou non le format d'une entrée utilisateur dans un champ réservé au numéro de sécurité sociale. Comment procédez-vous ? Que devez-vous fournir à votre équipe ?

Scénario8-2:Présentationdesnomsdefonctions

Raymond crée un programme qui comporte plusieurs fonctions. Il a répertorié les noms des fonctions et leurs descriptions dans un tableau pour s'y référer facilement pendant le développement de son application. Certaines applications ne fonctionnent pas et il vous demande des conseils. Vous remarquez que les fonctions en question commencent par des marques de hachage ou des barres obliques. Que dites-vous à Raymond sur l'affectation de noms aux fonctions ?

■ Évaluation de la maîtrise des concepts

Scénario8-3:Sélectiond'unebibliothèqueJavaScript

CiCi voudrait commencer à utiliser les bibliothèques JavaScript pour réduire le temps de création de ses programmes, mais elle ne sait pas par où commencer. Le nombre de bibliothèques disponibles est tellement élevé qu'il est difficile de faire un choix. Que pouvez-vous lui dire ?

Scénario8-4:Distinctionentrelesfonctionsetlesméthodes

André découvre la programmation JavaScript et a du mal à comprendre la différence entre les méthodes et les fonctions. Que pouvez-vous lui dire ?

215

Création d'animations, utilisation de graphiques et accès aux données

215


analyse

animation

API XMLHttpRequest

AppCache

cookies

élément canvas

encapsuler

JSON

LocalStorage

récursivité

type de données



Codage des animations avec Coder les animations avec 4.3 JavaScript JavaScript

Utilisation d'images, de formes et Coder les animations avec 4.3 d'autres graphiques JavaScript

Envoi et réception de données Accéder aux données avec 4.4 JavaScript

Chargement et enregistrement Accéder aux données avec 4.4 de fichiers JavaScript

Utilisation de JavaScript pour valider Accéder aux données avec 4.4 les entrées d'utilisateur dans les JavaScript formulaires

Présentation et utilisation de Accéder aux données avec 4.4 cookies JavaScript

Présentation et utilisation de la Accéder aux données avec 4.4 fonction Local Storage JavaScript

L'équipe de développement de Malted Milk Media a deux nouveaux projets à terminer cette semaine. Attaboy Pet Services veut que son logo s'anime quand les utilisateurs ouvrent la page d'accueil de la société, et Attaboy veut que son logo soit créé par l'élément canvas. Pour le projet d'application mobile Trusty Lawn Care, il est nécessaire que du code soit ajouté pour échanger des données avec un serveur. L'équipe de développement veut que vous essayez d'en savoir plus sur ces aspects de l'utilisation de JavaScript.

9L E Ç O N

216 | leçon 9

■ Codage des animations avec JavaScript

HTML et CSS offrent plusieurs façons d'appliquer des animations rapides aux effets courants. Toutefois, JavaScript est beaucoup plus souple et peut produire des résultats remarquables.L'ESSENTIEL

Une animation représente l'affichage d'une séquence d'images statiques à un rythme assez rapide pour créer l'illusion d'un mouvement. Concernant l'interface utilisateur, une animation modifie l'affichage pour le rendre dynamique, pas seulement une modification ponctuelle, mais un changement transparent. JavaScript est suffisamment souple pour produire des effets d'animation spectaculaires, adaptés au public.La récursivité est un élément clé d'une animation. La récursivité est une technique de programmation dans laquelle une fonction s'appelle. Une technique courante dans l'animation JavaScript consiste à utiliser setTimeout de manière récursive, c'est-à-dire appeler une nouvelle exécution de la même fonction qui a appelé setTimeout() . Il s'agit généralement du moyen le plus efficace d'introduire un « élément de minutage » dans JavaScript.

PRÊT POUR LA CERTIFICATIONQu'est-ce qu'une animation ?4.3

En dehors de la programmation, le comportement de la récursivité n'est pas toujours bien considéré. Si vous écrivez un dictionnaire ou un lexique, par exemple, il est conseillé de définir un terme sans utiliser les mots qui apparaissent dans l'expression. Supposons que vous définissiez le mot « politique ». Une définition telle que « le domaine de la politique » pourrait être désapprouvée par de nombreux éditeurs en raison de l'utilisation du terme « politique ». En l'informatique, la récursivité s'avère être non seulement autorisée, mais surtout puissante.

REMARQUE*

Création d'animations

N'oubliez pas que le JavaScript est un langage de programmation généraliste puissant. Si vous pouvez imaginer une animation particulière, il y a probablement une façon de le créer en JavaScript.

Une animation (comme les autres effets JavaScript) est sous contrôle informatique. Cela signifie que via un codage suffisamment intelligent, vous pouvez choisir ce que peut faire animation.

La fonction move_paragraph() dans le code source de l'exercice suivant est considérée comme récursive car la fonction move_paragraph apparaît dans la dernière instruction qui définit la fonction. Cet exercice permet de créer une animation constamment mise à jour, dans le style d'un « téléscripteur ».

CRÉER UNE ANIMATION SIMPLE

PRÉPAREZ-VOUS. Pour créer une application simple, effectuez les opérations suivantes : 1. Créez le fichier L9-js1.html avec le contenu suivant :

<!doctype html> <html><head><title>Animer avec JavaScript</title>

<script type = "text/javascript"> // Créer un effet « bande de téléscripteur » en faisant glisser // le paragraphe du texte d'un pixel // vers la droite, encore et encore, jusqu'à ce que la limite // de 300 pixels soit atteinte. Puis // redémarrer l'animation dans le // sens inverse vers la gauche.

PRÊT POUR LA CERTIFICATIONQuelle fonction JavaScript pouvez-vous utiliser pour créer une animation ? 4.3

Création d'animations, utilisation de graphiques et accès aux données | 217

function move_paragraph() { next = current + "px"; current += 1; if (current > 300) { current = 0; } paragraph.style.left = next; // Pause de 18 millisecondes avant // la prochaine étape. var rate = 18; setTimeout(move_paragraph, rate);}function init() { paragraph = document.getElementById("original"); paragraph.style.position = "absolu"; current = 0; move_paragraph();}</script></head><body onload = "init();">

<h1>Animer avec JavaScript</h1><p id = "original">Vous me voyez faire défiler 'écran ?</p>

</body></html>

2. Ouvrez le fichier L9-js1.html dans votre navigateur Web. Le paragraphe se déplace-t-il à travers l'écran, comme illustré dans la figure 9-1 ?

3. Fermez le fichier, mais laissez l'outil d'édition et le navigateur Web ouverts.

Figure 9-1

Deux instantanés d'un affichage de « téléscripteur » pris à différents moments

Quelques secondes plus tard, le texte est à cet emplacement dans le navigateur

218 | leçon 9

CRÉERUNEANIMATIONINTERACTIVE

PRÉPAREZ-VOUS. Pour créer une animation sensible à l'action d'un utilisateur, effectuez les opérations suivantes : 1. Créez le fichier L9-js2.html avec le contenu suivant :

<!doctype html> <html><head><title>Animer avec JavaScript</title>

<script type = "text/javascript"> // Cette page a pratiquement le même effet que le fichier L9-js1.html // sauf que la fréquence // de déplacement du paragraphe dépend de la valeur // numérique que l'utilisateur final a entré dans le // champ de saisie.function move_paragraph() { next = current + "px"; current += 1; if (current > 300) { current = 0; } paragraph.style.left = next; var rate = document.getElementById("rate").value; setTimeout(move_paragraph, rate);}function init() { paragraph = document.getElementById("original"); paragraph.style.position = "absolu"; current = 0; move_paragraph();}</script></head><body onload = "init();">

<h1>Animer avec JavaScript</h1> <form><input id = "rate" type = "number" value = "18" min = "5" max = "100"></input></form><p id = "original">Vous me voyez faire défiler l'écran ?</p>

</body></html>

2. Ouvrez le fichier L9-js2.html dans un navigateur Web. L'interface s'affiche, comme illustré dans la figure 9-2.


3. Remplacez la valeur du taux (qui est initialement de 18) par un nombre supérieur ou inférieur et notez l'effet sur l'animation. Est-ce que la vitesse de l'animation augmente ou diminue lorsque vous modifiez l'entrée ?

4. Fermez le fichier, mais laissez l'outil d'édition et le navigateur Web ouverts si vous passez à l'exercice suivant au cours de cette session.

PLUS D’INFORMATIONSPour obtenir des informations de base et connaître les bonnes pratiques en matière de conception d'animation pour l'interface utilisateur, visitez la page Web de Microsoft « Animations et Transitions » à l'adresse http://bit.ly/ziqs0G. La bibliothèque d'animations qui se trouve à l'adresse http://msdn.microsoft.com/en-us/library/windows/desktop/dn742481.aspx fournit une suite d'animations développée par Microsoft qui peut être utilisée pour créer des applications Windows Store.

Figure 9-2

Presque tout le contenu de l'écran est sous le contrôle de JavaScript, notamment la vitesse d'animation

Vous pouvez utiliser JavaScript pour afficher une image lorsque l'utilisateur clique sur un bouton ou qu'un autre événement se produit. La méthode createElement convient bien à cette utilisation.

L'ESSENTIEL

JavaScript peut afficher plusieurs types de graphiques, des fichiers JPG et PNG, mais aussi des formes comme des boîtes et des cercles. Une méthode consiste à utiliser la méthode createElement(). Cette méthode crée une fonction réutilisable pour afficher une image :

function show_image(src, width, height, alt) { var img = document.createElement("img"); img.src = src; img.width = width; img.height = height; img.alt = alt;

// Ajoute à la balise <body> document.body.appendChild(img);}

Pour afficher l'image, incluez ce code :

<button onclick="show_image ('chemin/nom_fichier', 276,110, 'Logo');"> Afficher le logo</button>

L'affichage d'une image lorsque l'on clique sur un bouton est une tâche relativement simple. Le fait de créer des graphiques à la volée requiert l'élément canvas ou SVG. Cette leçon couvre la création de graphiques à l'aide de l'élément canvas.

PRÊT POUR LA CERTIFICATIONComment pouvez-vous afficher un fichier image à l'aide de JavaScript ?4.3

■ Utilisation d'images, de formes et d'autres graphiques

✚

220 | leçon 9

Avec HTML5, JavaScript peut facilement contrôler non seulement les textes, les formes et les images statiques, mais aussi tracer des graphiques complexes.

L'élément canvas en HTLM5 désigne une zone de dessin contrôlée par programmation. Les seuls éléments graphiques communs aux versions HTML antérieures sont les éléments statiques, comme PNG ou JPG. Les effets dynamiques et les effets interactifs en particulier étaient complexes. L'élément canvas permet de changer tout cela.Comme vous l'avez appris dans la leçon 2, l'élément canvas crée un conteneur pour les graphiques et utilise JavaScript pour tracer les graphiques dynamiquement. Avec JavaScript, vous pouvez également animer des objets en les faisant se déplacer, changer d'échelle et ainsi de suite.Pour dessiner un objet à l'aide de l'élément canvas, les constructions principales que vous devez utiliser sont la fonction getElementById() pour rechercher l'élément canvas et la fonction canvas.getContext (parfois abrégée c.getContext) pour créer l'objet canvas. Vous pouvez ensuite utiliser une multitude de méthodes pour tracer des formes, ajouter des images, etc.Des applications entières (y compris des jeux et des simulateurs impressionnants) ont été construites avec l'élément canvas HTML5.

UTILISER L'ÉLÉMENT CANVAS POUR CRÉER UN CADRAN D'HORLOGE AVEC DES AIGUILLES QUI BOUGENT

PRÉPAREZ-VOUS. Pour illustrer l'utilisation de l'élément HTML5 canvas, effectuez les opérations suivantes : 1. Créez le fichier L9-js3.html avec le contenu suivant :

<!doctype html> <html><head><title>Cadran d'horloge analogique illustrant le contrôle de l'élément canvas en JavaScript</title>

<script type = "text/javascript">function draw_leg(fraction) { dctx.lineTo(center_x + length * Math.sin(2 * Math.PI * fraction), center_y - length * Math.cos(2 * Math.PI * fraction));}

function init() { var canvas = document.getElementById("clockface"); // Les variables suivantes sont créées en tant qu' // éléments globaux, d'autres fonctions // peuvent donc facilement y accéder. dctx = canvas.getContext('2d'); dctx.fillStyle = "noir"; center_x = 100; center_y = 100; length = 100; show_hands();}

// Une aiguille est dessinée comme un triangle isocèle // à partir du centre du cadran de l'horloge jusqu'au bord de celui-ci.

PRÊT POUR LA CERTIFICATIONComment devez-vous utiliser JavaScript pour manipuler des éléments canvas ?4.3

Manipulation de l'élément canvas avec JavaScript


function show_hand(fraction, width) { dctx.beginPath(); dctx.moveTo(center_x, center_y); draw_leg(fraction - width); draw_leg(fraction + width); dctx.fill();}

function show_hands() { // Effacer tout ce qui est déjà présent dans la zone // qui représente le cadran de l'horloge. dctx.clearRect(0, 0, 200, 200); // Quelle heure est-il *maintenant* ? var now = new Date(); seconds = now.getSeconds(); minutes = now.getMinutes() + seconds / 60; hours = now.getHours() + minutes / 60; // La deuxième aiguille est la plus « petite » des trois. show_hand(seconds / 60, 0.002); show_hand(minutes / 60, 0.005); // L'aiguille des heures est deux fois plus large que celle des // hand. show_hand(hours / 12, 0.01); var rate = 1000; setTimeout(show_hands, rate);}</script></head><body onload = "init();">

<h1>Cadran d'horloge analogique illustrant le contrôle de l'élément canvas en JavaScript</h1><canvas id = "clockface" width = "200" height = "200"></canvas>

</body></html>

2. Ouvrez le fichier L9-js3.html dans un navigateur Web. L'écran s'affiche, comme illustré dans la figure 9-3.

Figure 9-3

Instantané des aiguilles de l'horloge codée en JavaScript indiquant 11:47:28

222 | leçon 9

3. Fermez le fichier et le navigateur Web, mais laissez l'outil d'édition ouvert si vous effectuez l'exercice suivant au cours de cette session.

Dans un autre exemple, l'exercice suivant crée un dessin abstrait réalisé en plaçant des blocs sur un élément canvas HTML5. L'exercice illustre qu'il faut relativement peu de lignes en JavaScript pour produire des effets assez compliqués.

CRÉER DES BOÎTES ANIMÉES À L'AIDE DE L'ÉLÉMENT CANVAS

PRÉPAREZ-VOUS. Pour créer des formes animées à l'aide de l'élément canvas, effectuez les opérations suivantes : 1. Créez le fichier L9-js4.html avec le contenu suivant :

<!doctype html><html><head><title>Blocs</title>

<script type = "text/javascript">// Cette page est juste un essai, l'opération consiste à placer des blocs de// couleur sur l'écran de façon aléatoire ,// pour obtenir des effets visuels intéressants.// La récursivité est utilisée de deux façons distinctes// ci-dessous : place_blcks() calls draw_spiral() et// draw_spiral() appelle soit place_blocks() ou // draw_spiral(), en fonction de la partie de la spirale// qui a été dessinée récemment.function init() { var canvas = document.getElementById("drawing_area"); dctx = canvas.getContext('2d'); place_blocks();}

function draw_spiral() { // Une fois qu'un bloc est déplacé à l'extérieur du dessin // la spirale actuelle est arrêtée et une nouvelle // est créée. if (x > 500 || y > 500 || x < 0 || y < 0) { place_blocks(); } ratio = 1.6; newx = x; newy = y; dx = size; dy = size; // Chaque bloc est pivoté de 90 degrés // à partir du dernier. switch (direction) { case "up": dy = -size; newy += dy; direction = "left"; break;


case "left": dx = -size; dy = -size; newx += dx; direction = "down"; break; case "down": dx = -size; newy += dy; direction = "right"; break; case "right": newx += dx; direction = "up"; break; } dctx.fillRect(x, y, dx, dy); // Chaque bloc dessiné successivement est plus grand // que le précédent. size *= ratio; x = newx; y = newy; setTimeout(draw_spiral, delay);}

function place_blocks() { <?ACE 7?>dctx.fillStyle = '#'+Math.floor(Math.random()*16777215).toString(16 ); x = 100 + 300 * Math.random(); y = 100 + 300 * Math.random(); delay = 100 + 2000 * Math.random(); size = 3 + 7 * Math.random(); direction = "up"; draw_spiral();}</script></head><body onload = "init();">

<h1>Blocs</h1><canvas id = "drawing_area" width = "500" height = "500"></canvas

</body></html>

2. Ouvrez le fichier L9-js4.html dans un navigateur Web. L'écran se remplit de blocs de couleur, comme illustré dans la figure 9-4.


224 | leçon 9

Figure 9-4

Instantané d'un dessin abstrait réalisé en plaçant des blocs sur un élément canvas HTML5.

■ Envoi et réception de données

Si une application accessible depuis l'ordinateur expose des données à l'utilisateur final, il y a probablement un moyen pour que JavaScript puisse atteindre ces données. L'un des rôles les plus importants de JavaScript est de communiquer en temps réel avec les sources de données distantes.

L'ESSENTIEL

Une partie de la puissance des applications informatiques modernes réside dans leur capacité à coordonner les informations provenant de plusieurs sources en un affichage utile : JavaScript peut rassembler les bases de données côté serveur de l'historique du client, la mémoire locale de l'ordinateur de bureau ou de l'ordinateur de poche avec des sélections d'achat actuelles, le contenu de la page en cours, et les mises à jour à distance des tarifs ou des conditions météorologiques à des fins de comparaison et de calcul.Il est difficile de créer des programmes JavaScript qui envoient et reçoivent des données, non pas parce que les concepts sont difficiles, mais parce que l'application JavaScript possède une structure différente de toutes les autres. Presque tous les exemples de JavaScript de la leçon 8 ont été construits comme de petites pages HTML autonomes. Chaque page individuelle peut être chargée et pleinement utilisée dans un navigateur.Toutefois, un programme JavaScript qui envoie et reçoit des données doit avoir plus d'informations : il doit y avoir un récepteur ou un expéditeur quelque part avec qui votre programme JavaScript peut échanger des données. Le plus souvent, des pages HTML ou des applications mobiles communiquent avec un serveur en réseau dans une application centrale quelconque.


Des transactions de données JavaScript sont souvent présentées comme difficiles conceptuellement et accessibles seulement aux personnes qui maîtrisent AJAX, XML, JSON et un mélange compliqué d'autres acronymes. Ce n'est pas vrai. Vous comprenez déjà les fonctions : il s'agit de petites boîtes spéciales auxquelles vous fournissez zéro ou plusieurs arguments, puis une boîte fait une opération et vous retourne éventuellement un résultat. La communication réseau JavaScript est semblable : elle transmet zéro ou plusieurs éléments de données et reçoit un résultat en retour. La grande difficulté réside dans la mise en place initiale votre propre « laboratoire » avec les pièces nécessaires pour que ce dialogue fonctionne. Une fois que le premier élément fonctionne correctement, vous verrez que vous apprendrez rapidement la sécurité, le flux de contrôle et les règles de codage propres à la communication de données JavaScript. L'une des techniques de transfert de données les plus importantes implique l'API XMLHttpRequest (parfois abrégée sous la forme XHR). XMLHttpRequest permet d'utiliser JavaScript pour transmettre des données sous la forme de chaînes de texte entre un client et un serveur. La syntaxe générale pourrait ressembler à ce qui suit :

function load(url, data, callback) { var xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.onload = function() { callback(xhr.responseText); } xhr.send(data);}

L'objet XMLHttpRequest crée un appel vers le serveur. La méthode open spécifie la méthode HTTP pour contacter le serveur et fournit l'adresse Web du serveur. La fonction callback permet d'obtenir une réponse du serveur. Enfin, xhr.send(data) envoie les données.Pour quelques exercices ultérieurs, comme vous le verrez bientôt, il faut un serveur Web, le cache de l'application, par exemple, n'existe que pour des sites accessible via une connexion réseau. Avec la bonne approche, cependant, presque n'importe quel serveur Web peut faire l'affaire. Votre instructeur mettra en place un accès à un serveur Web afin que vous puissiez essayer le cache d'application sans trop de difficulté. Pour envoyer et recevoir des données explicitement en JavaScript c'est différent. Pour que cela fonctionne, il faut un serveur Web dynamique et une programmation côté serveur. Veillez à ce que ces distinctions soient claires :• La plupart des fonctionnalités de JavaScript : peuvent être illustrées avec un

navigateur à partir du système de fichiers du bureau local.• La cache d'application et quelques autres équipements HTML5 en JavaScript :

nécessitent un serveur Web. N'importe quel serveur Web peut convenir.• XmlHttpRequest et les installations de transmission de données JavaScript comparables,

y compris certains introduites par HTML5 : nécessitent un serveur Web dynamiqueEn l'absence de serveur Web dynamique, l'exercice suivant montre un exemple très simple d'accès aux données. Lorsque vous choisissez de travailler avec des serveurs Web, vous avez plusieurs solutions alternatives qui sont relativement faciles pour un novice en service Web. wamp pour Windows, mamp pour Mac, et lamp pour Linux sont parmi les plus simples pour débuter.

ACCÈS AUX DONNÉES

PRÉPAREZ-VOUS. Procédez comme suit pour obtenir un exemple de la capacité de JavaScript à accéder aux données : 1. Créez le fichier L9-js5.html avec le contenu suivant :

<!doctype html><html><head><title>JavaScript accède aux données</title>

PRÊT POUR LA CERTIFICATIONQuelle API vous permet d'échanger des chaînes de données entre un client et un serveur ?4.4

226 | leçon 9

<script type = "text/javascript">

function init() { var paragraph_object = document.getElementById('paragraph'); message = "Notez que le titre de cette page est '" + document.title + "'."; paragraph_object.innerHTML = message;}

</script></head><body onload = "init();">

<h1>JavaScript accède aux données</h1><p id = "paragraph"></p>

</body></html>


PRÊT POUR LA CERTIFICATIONComment la fonction getElementById() permet-elle d'accéder aux données ?4.4

3. Notez que JavaScript peut accéder au contenu HTML.


Quel est l'intérêt de cet exemple ? Si un programmeur a besoin du titre d'une page Web, pourquoi ne pourrait-il pas simplement copier et coller du code HTML ?

Voici une réponse fréquente : le JavaScript de ce genre est destiné à une bibliothèque à l'échelle du site. Il pourrait y avoir une stratégie ou un style censé s'appliquer à toutes les pages. Dans ce cas, il est beaucoup plus pratique et plus simple d'encapsuler la stratégie dans une bibliothèque JavaScript qui sait comment récupérer le titre, plutôt que de copier et coller le titre de toutes les pages pour l'ensemble du site. Chaque page comprend ensuite une copie identique de la bibliothèque JavaScript.

REMARQUE*

Une « stratégie » est un terme utilisé par les programmeurs qui signifie, en gros, un « style d'action ». Un style visuel peut être quelque chose que nous, les humains, définissons comme « chaque page doit apparaître avec cette image subtile d'arrière particulière ». Une stratégie peut, par exemple, être « chaque page devrait rendre son texte visible presque instantanément, et doit toujours être lisible même si elle est redimensionnée horizontalement ». Les fonctions d'assistance de JavaScript et les normes à l'échelle du site pour le codage peuvent aider à réaliser des stratégies de ce type.

Figure 9-5

Page HTML simple avec un paragraphe calculée par JavaScript


REMARQUE*

Le terme « encapsuler » c'est un peu du jargon, souvent employé par les programmeurs. Dans l'application JavaScript qui a tracé un cadran d'horloge analogique sur un élément canvas, la fonction show_hand() encapsule toute la trigonométrie impliquée dans l'élaboration d'une seule aiguille, que ce soit pour les heures, les minutes ou les secondes. Le programmeur utilise le code show_hand() sans se soucier des détails de ce qui est dedans (la capsule). Pour la plupart des gens, il est beaucoup plus facile de « tracer une boîte » ou d'encapsuler une partie de la fonctionnalité, de donner un nom à la capsule et de la considérer dans son ensemble, plutôt que de rechercher toutes ses parties chaque fois qu'elle est utilisée.

JavaScript est un langage de programmation généraliste et peut donc communiquer des informations structurées beaucoup plus riches que les simples valeurs utilisées dans la majeure partie de cette leçon.

Transmission d'objets complexes et analyse

Concrètement, JavaScript peut gérer des opérations très complexes en programmation. Il est, par exemple, possible de recevoir un rapport sur le prix de l'essence dans plusieurs points de vente et d'être en mesure d'isoler un seul de ces chiffres. L'analyse est un terme utilisé pour décrire la vérification d'informations complexes en éléments constitutifs.

ANALYSER DES DONNÉES COMPLEXES

PRÉPAREZ-VOUS. Pour démontrer la capacité de JavaScript à analyser des données complexes, effectuez les opérations suivantes : 1. Créez le fichier L9-js6.html avec le contenu suivant :

<!doctype html> <html><head><title>Analyse de données complexes</title>


// L'instruction suivante doit apparaître // sur une seule ligne.sample_data = "Mobil-17: 3.49; Kroger-03: 3.36; Exxon-01: 3.59; Kroger-04: 3.49;

Valero-A: 3.41; Chevron-01: 3.52"; of_interest = "Kroger-04";

// sample_data est un exemple d'un morceau typique de// une chaîne avec des parties séparées// par des points-virgules, où chacune des parties a deux// sous-parties séparées par le signe deux-points. Beaucoup d'autres formats// sont possibles. Pour analyser ce format particulier,// init() se sépare sur deux séparateurs distincts.function init() { var paragraph_object = document.getElementById("paragraph"); var data_list = sample_data.split(';'); for (j = 0; j < data_list.length; j++) { parts = data_list[j].split(':'); var site = parts[0].trim() if (site == of_interest) {

PRÊT POUR LA CERTIFICATIONQu'est-ce que l'analyse ?4.4

228 | leçon 9

var message = "Compte tenu des données de l'échantillon '" + sample_data + "', ce programme a analysé le prix $"+ parts[1].trim() +" pour le "+ site + " site."; paragraph_object.innerHTML = message; } }}


<h1>Analyse de données complexes</h1><p id = "paragraph">Bienvenue.</p>

</body></html>

2. Ouvrez le fichier L9-js6.html dans un navigateur Web. L'affichage devrait être semblable à la figure 9-6.


JavaScript et les bibliothèques JavaScript librement disponibles fournissent de nombreux équipements d'analyse. L'extraction de données à partir d'une page Web externe lisible par l'homme est juste un exemple parmi tant d'autres de la façon dont JavaScript peut analyser les données.

Par exemple, vous pouvez également utiliser un sous-ensemble de JavaScript appelé JSON (JavaScript Object Notation) pour échanger des objets JavaScript avec un serveur. Si vous utilisez les API JSON.parse et JSON.stringify, le code pourrait ressembler à ce qui suit :

function loadJSON(url, data, callback) { var xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.onload = function() { callback( JSON.parse(xhr.responseText) ); } xhr.send( JSON.stringify(data) );}

loadJSON("my.json", { id : 1 }, function(response) { setTitle(response.title); });

Figure 9-6

JavaScript peut extraire des données intégrées dans un format complexe


Ce code est presque identique à l'exemple de code XMLHttpRequest indiqué précédemment dans la leçon. L'objet XMLHttpRequest crée un appel vers le serveur, et la méthode open spécifie la méthode HTTP pour communiquer avec le serveur et fournit l'adresse du serveur Web. La méthode callback utilise l'analyse JSON pour obtenir une réponse du serveur. Lorsque le serveur répond, l'API JSON.parse est appelée, ce qui crée l'objet JavaScript. L'objet est renvoyé au serveur. Toutefois, les données sont « enchaînées » d'abord.

JavaScript peut accéder aux fichiers sur votre ordinateur local et, avec HTML5, il est possible de valider le type de fichier avant de le charger. JavaScript fait du chargement de fichiers un processus sans erreur plus interactif.

L'ESSENTIEL

Beaucoup d'applications mobiles ou Web disposent d'une fonction pour télécharger un fichier. Le fait qu'il n'y ait aucun moyen efficace de spécifier, par exemple, « d'autoriser seulement le téléchargement d'images et non de documents, et uniquement si les images occupent moins de 1,1 Mo » a longtemps été un point faible du HTML. Sans cette fonctionnalité, il arrive trop souvent que les utilisateurs tentent accidentellement de télécharger des documents non souhaités ou non pris en charge par l'application et les délais réseau rendent la correction de l'erreur très long.

Le HTML5 pouvant accéder aux fichiers locaux, cela signifie qu'une image destinée au téléchargement peut être présentée comme une miniature et validée avant le chargement. Les actions immédiates du JavaScript permettent de faire du téléchargement un processus interactif et sans erreur.

ACCÉDER À UN FICHIER LOCAL

PRÉPAREZ-VOUS. Pour montrer la capacité de JavaScript à accéder à un fichier local, procédez comme suit : 1. Créez le fichier L9-js7.html avec le contenu suivant :

<!doctype html> <html><head><title>JavaScript accède à des fichiers locaux</title>

<script type = "text/javascript">function acknowledge(file_handle) { var size = file_handle.size; var fname = file_handle.name; var message = "Vous avez sélectionné le fichier '" + fname + "'. Il semble être reconnaissable image, total " + size + " taille en octets."; alert(message);

}

function complain(fname) { var message = "Le fichier nommé '" + fname + "' ne semble pas avoir une extension acceptable."; alert(message);

}

PRÊT POUR LA CERTIFICATIONComment est-ce que je peux limiter le type de fichier à charger ?4.4

■ Chargement et enregistrement de fichiers

230 | leçon 9

function handle_file_selection(item) { var f = item.files[0]; var fname = f.name; var last_index = fname.lastIndexOf('.'); if (last_index == -1) { complain(fname); return; } var ext = fname.substr(last_index + 1); if (ext.toLowerCase() in {'gif': '', 'jpg' : '', 'png': '', 'tif': '' }) { acknowledge(f); } else { complain(fname); }}

</script></head><body>

<h1>JavaScript accède à des fichiers locaux</h1><input type = 'file' onchange = 'handle_file_selection(this);' />

</body></html>

2. Ouvrez le fichier L9-js7.html dans un navigateur Web.

3. Cliquez sur Parcourir, puis recherchez et sélectionnez un fichier sur votre ordinateur local qui n'est pas une image. Cliquez sur Ouvrir. L'affichage devrait être semblable à la figure 9-7. La boîte de message vous informe que vous avez sélectionné le type de fichier incorrect. Cliquez sur OK pour fermer la boîte de message.

Figure 9-7

JavaScript peut analyser des fichiers avant de les charger et rejeter ceux qui ne sont pas conformes aux restrictions


4. Répétez l'étape 3 et cette fois ouvrez un fichier image. La boîte de message qui en résulte doit ressembler à la figure 9-8 et vous informer que vous avez sélectionné un type de fichier acceptable. Cliquez sur OK pour fermer la boîte de message.

Figure 9-8

Ce fichier répond aux exigences de chargement de fichier


Notez qu'en fait ce programme ne télécharge pas le fichier sélectionné. Le but de cet exercice est de montrer comment JavaScript peut accéder au fichier et en gérer le contenu, même avant le téléchargement.

Utilisation du cache de l'application (AppCache)

Les utilisateurs veulent être en mesure de parcourir votre site, même en mode hors connexion. L'API Cache de l'application (AppCache) rend cela possible. AppCache diffère du cache d'un navigateur. En effet, le cache d'un navigateur contient toutes les pages Web visitées, tandis qu' AppCache enregistre uniquement les fichiers répertoriés dans le manifeste de cache.

AppCache permet d'enregistrer une copie des fichiers de votre site Web en local sous une forme structurée. Les fichiers comprennent le HTML, CSS et JavaScript, ainsi que d'autres ressources, que le site doit exécuter. Après une première visite, lors des visites suivantes les ressources sont rapidement chargées à partir de la copie locale au lieu d'avoir à attendre sur une connexion réseau.

Comme indiqué dans la leçon 1, AppCache utilise un fichier texte appelé manifeste de cache pour spécifier que les fichiers d'un navigateur Web doivent se mettre en cache en mode hors connexion. Même si un utilisateur actualise le navigateur en mode hors connexion, la page se charge et fonctionne correctement.

AppCache diffère d'un cache de navigateur. Alors que le cache d'un navigateur enregistre toutes les pages Web visitées, AppCache enregistre uniquement les fichiers répertoriés dans le manifeste de cache. Vous pouvez appliquer AppCache à une seule page Web ou à un site entier.

PRÊT POUR LA CERTIFICATIONQuel est le but de AppCache?4.4

Le navigateur Mozilla Firefox a été utilisé pour cet exercice.

Remarque*

232 | leçon 9

Pour qu' AppCache fonctionne, le serveur Web doit être configuré avec le type MIME approprié (à savoir : text/cache-manifest). En outre, l'extension de fichier préférée pour les fichiers manifeste est .appcache.

UTILISER APPCACHEPRÉPAREZ-VOUS. Pour illustrer AppCache, procédez comme suit : 1. Vous devez obtenir les privilèges d'utilisation d'un serveur Web de la part de votre

instructeur. Le serveur doit avoir le type MIME défini sur text/cache-manifest. AppCache n'est efficace que pour les accès réseau. Il ne peut pas agir lorsqu'une ressource Web est locale.

2. Créez le fichier L9-appcache.html avec le contenu suivant :

<!doctype html><html manifest = "test.appcache"><head><title>Exemple AppCache minimum</title>

</head><body><h1>Exemple AppCache minimum</h1><p> Cette page doit se recharger après avoir été déconnectée d'

Internet et avoir été actualisée.</body></html>

3. Fermez le fichier L9-appcache.html et téléchargez le fichier sur le serveur Web. L'instructeur vous donnera l'adresse Web du fichier.

4. Dans un navigateur Web, accédez à l'adresse Web. Le fichier L9-appcache.html s'ouvre. 5. Observez l'affichage, comme illustré dans la figure 9-9. Est-ce que la page se recharge

comme prévu ?

Figure 9-9

Page Web extraite de AppCache

✚ PLUS D’INFORMATIONS

Pour obtenir un bon tutoriel sur AppCache, visitez la page Web « Guide à l'intention des débutants sur l'utilisation du cache de l'application » (en anglais) à l'adresse http://www.html5rocks.com/en/tutorials/appcache/beginner/.

6. Déconnectez votre ordinateur local d'Internet. 7. Confirmez que vous ne pouvez pas accéder aux pages Web (la page d'accueil MSDN,

par exemple). 8. Actualisez l'image du fichier L9-appcache.html dans votre navigateur. 9. Notez qu'elle s'affiche rapidement, même si le fichier L9-appcache.html n'est pas

disponible actuellement. 10. Fermez le fichier HTML, mais laissez l'outil d'édition et le navigateur Web ouverts si

vous passez à l'exercice suivant au cours de cette session.


Présentation et utilisation des types de données

En JavaScript, les données se présentent de différentes façons. Les plus courantes sont les chaînes et les nombres. Parmi les autres types de données on trouve : un tableau, une valeur booléenne, une valeur Null, un objet et une valeur indéfinie.

Les valeurs en JavaScript prennent un aspect spécial et sont appelées types de données. Il s'agit le plus souvent de chaînes et de nombres. « ABCD » et « 1234 » sont deux exemples de chaînes. Le deuxième exemple inclut uniquement des chiffres. Le chiffre « 3 » est un nombre, mais « 3 dollars » est une chaîne.D'autres types de données sont plus spécialisés, par exemple : un tableau, une valeur booléenne, une valeur Null, un objet et une valeur indéfinie. Leur utilisation est relativement rare et n'est pas abordée dans ce cours.La signification fondamentale des types de données à ce niveau, c'est que leur définition nous réserve quelques surprises. En JavaScript, l'exemple suivant a la valeur 123 :

"'1' + 2 + 3"

Mais l'exemple suivant a la valeur 6 ou 33, selon l'interpréteur JavaScript utilisé :

"1 + 2 + '3'"

Il existe des règles qui définissent entièrement ce comportement, et chacun des types de données a son utilité. Dans cette leçon, vous devez faire la distinction entre un nombre et les caractères qu'il représente. Si vous avez par erreur exécuté un calcul et que JavaScript gère les types de données de façon surprenante, consultez les documents de référence MSDN sur les types de données. En attendant, programmez JavaScript simplement et avec soin.

PRÊT POUR LA CERTIFICATIONQuels types de données sont disponibles en JavaScript ?4.4

■ Utilisation de JavaScript pour valider les entrées d'utilisateur dans les formulaires

Au fur et à mesure que les utilisateurs renseignent un formulaire, JavaScript valide instantanément les entrées et propose d'autres solutions.L'ESSENTIEL

Dans la leçon 3, vous avez appris la saisie et la validation d'un formulaire HTML. Avec JavaScript, vous et vos utilisateurs finaux pouvez exploiter encore plus les formulaires.

Supposons, par exemple, qu'un utilisateur final ait besoin d'entrer un numéro de série sous la forme XXX-XXX-XX-X, où chaque X est un chiffre. Au tout début de l'application Web, les utilisateurs finaux devaient taper cela comme ils le pouvaient, puis « soumettre » un formulaire complet. Le serveur recherchait les éventuelles erreurs et les signalait comme il pouvait.

Avec JavaScript, la validation d'entrée côté client sous la forme de rétroaction et de correction est instantanée.

GÉRERUNFORMULAIREAVECJAVASCRIPT

PRÉPAREZ-VOUS. Pour démontrer la capacité de JavaScript pour gérer un formulaire, procédez comme suit : 1. Créez le fichier L9-js8.html avec le contenu suivant :

<!doctype html> <html><head><title>Gestion de formulaire</title>

PRÊT POUR LA CERTIFICATIONComment JavaScript est-il utilisé pour effectuer la validation d'entrée côté client ?4.4

234 | leçon 9


// L'action de la fonction correcte() consiste à // tester les caractères que l'utilisateur a entrés // par rapport au modèle "XXX-XXX-XX - X'. Si l'entrée // de l'utilisateur ne correspond pas à ce pattern, // supprimez le dernier caractère. Cela donne à // l'utilisateur l'impression qu'il peut seulement // entrer des caractères valides.function correct() { var input_object = document.getElementById("serial"); var value = input_object.value; var current_length = value.length; if (current_length) { var last_character = value.substring(current_length - 1); switch (current_length) { case 4: case 8: case 11: if (last_character != '-') { value = value.substring(0, current_length - 1); } break; default: if (!/\d/.test(last_character)) { value = value.substring(0, current_length - 1); } } if (current_length > 12) { value = value.substring(0, current_length - 1); } current_length = value.length; switch (current_length) { case 3: case 7: case 10: value += "-"; } input_object.value = value; }}

</script></head><body>


<h1>Gestion de formulaire</h1><form>Entrez ici un numéro de série dans le modèle XXX-XXX-XX - X, où chaque X est un chiffre : <input id = "serial" type = 'text' size = '12' onkeyup = "correct();">.</form>

</body></html>


Figure 9-10

La validation d'entrée côté client est une bonne responsabilité pour JavaScript

3. Commencez à taper les caractères. Notez que le champ d'entrée accepte uniquement des caractères qui correspondent au modèle XXX-XXX-XX-X et ignore ceux qui ne correspondent pas.


Pour une véritable application, il faudrait plus de validation : il ne suffit pas qu'une entrée ait l'air d'un numéro de série, l'application doit aussi confirmer qu'il s'agit bien d'un numéro de série. Même si un utilisateur final peut toujours entrer une valeur de façon incorrecte, une simple validation du formulaire par JavaScript facilite énormément la garantie de la réussite. En outre, même avec cette validation, un utilisateur final suffisamment déterminé peut utiliser la souris pour entrer des valeurs qui ne correspondent pas au modèle du numéro de série. Un validateur plus sophistiqué risquerait de coincer les suppressions et les mouvements de la souris.

■ Présentation et utilisation des cookies

Les cookies contiennent traditionnellement des informations à des fins de personnalisation et à des fins pratiques. JavaScript peut créer et récupérer des cookies.L'ESSENTIEL

Les cookies représentent des petits fichiers texte que les sites Web enregistrent sur le disque dur d'un ordinateur et qui contiennent des informations sur l'utilisateur et ses préférences de navigation. Le contenu des cookies change lorsque l'utilisateur se rend de nouveau sur le site et sélectionne différents articles ou modifie ses préférences. Pour JavaScript, un cookie est une variable. Vous devez utiliser JavaScript pour créer et récupérer des cookies.Supposons que vous êtes responsable d'un jeu vidéo codé en HTML et en JavaScript. Il fonctionne assez bien, mais nécessite que l'utilisateur choisisse un « niveau » chaque fois qu'il commence une nouvelle partie. Ne serait-il pas préférable que le jeu devine que l'utilisateur souhaite commencer à un niveau supérieur à celui de son dernier match, avec une option pour régler cela ? Non seulement c'est mieux, mais les capacités de JavaScript en matière de cookie rendent cela facile à programmer.

PRÊT POUR LA CERTIFICATIONQu'est-ce qu'un cookie ?4.4

236 | leçon 9

UTILISER DES COOKIES

PRÉPAREZ-VOUS. Pour démontrer la capacité de JavaScript à conserver des informations sur l'ordinateur de bureau même avec le navigateur fermé, effectuez les opérations suivantes : 1. Créez le fichier L9-js9.html avec le contenu suivant :

<!doctype html> <html><head><title>Utilisation des cookies</title>


function getCookie(c_name) { var i,x,y,ARRcookies=document.cookie.split(";"); for (i=0;i<ARRcookies.length;i++) { x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); x=x.replace(/^\s+|\s+$/g,""); if (x==c_name) { return unescape(y); } }}

function init() { var message; level_object = document.getElementById("level"); var welcome = document.getElementById("welcome"); var level = getCookie("level"); if (level == null || level == '') { message = "C'est visiblement la première fois que vous jouez. Vous commencerez au niveau 1."; level = 1; } else { message = ""La dernière fois que vous avez joué, vous avez atteint le niveau " + level +". Vous allez commencer là maintenant."; } welcome.innerHTML = message; level_object.value = level;}

function save_level() { setCookie("level", level_object.value, 10);}

function setCookie(c_name,value,exdays) { var exdate=new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value;}



<h1>Utilisation des cookies</h1><p id = "welcome">Bienvenue.</p><form>Vous pouvez mettre à jour votre niveau à tout moment. Il est actuellement défini sur<input id = "level" type = "number" min = "1" max = "100" oninput = "save_level();" />.</form>

</body></html>

2. Vous devez obtenir les privilèges d'utilisation d'un serveur Web de la part de votre instructeur. Les cookies ne peuvent être activés que pour les pages Web visitées en réseau, pas en local.

3. Téléchargez le fichier L9-js9.html sur le serveur Web à l'aide d'un programme de transfert de fichier, tel que décrit par votre instructeur. Votre instructeur doit aussi vous donner l'adresse Web du fichier.

4. Dans un navigateur Web, utilisez l'adresse Web pour accéder au fichier L9-js9.html.

5. Notez le niveau auquel vous commencez, comme illustré dans la figure 9-11.

Figure 9-11

Les cookies ont souvent été utilisés pour conserver les petits morceaux de données sur l'ordinateur client

6. Faites comme si vous aviez joué pendant un certain temps et atteint un niveau différent. Entrez ce niveau dans la zone d'entrée.

7. Fermez la fenêtre de l'application. 8. Ouvrez à nouveau le fichier L9-js9.html. Voyez-vous comment l'application se

« souvient » de votre position d'une session de navigateur à l'autre ? 9. À l'aide des paramètres de préférences de votre navigateur, supprimez le cookie créé

dans cet exercice ou, si c'est plus pratique, supprimez tous les cookies. 10. Ouvrez à nouveau le fichier L9-js9.html. Notez que votre niveau est revenu à la valeur

par défaut de 1. 11. Fermez le fichier, mais laissez l'outil d'édition et le navigateur Web ouverts si vous

passez à l'exercice suivant au cours de cette session.

■ Présentation et utilisation de la fonction de stockage local

La quantité d'informations pouvant être stockée dans les cookies est limitée et par conséquent les effets de programmation qui peuvent être atteints sont également limités. Les cookies présentent aussi une menace pour la confidentialité des données. HTML5 propose la fonction de stockage local pour personnaliser la programmation plus facilement et la rendre plus performante.

L'ESSENTIEL

238 | leçon 9

Les cookies ont des limites. Ils ont parfois la mauvaise réputation de contribuer à la propagation d'informations personnelles sans votre autorisation, et ils sont peu appropriés pour le stockage des données même les plus simples. La fonction LocalStorage de HTML5 offre une meilleure sécurité et rend la programmation plus facile qu'avec les cookies.

ENREGISTRER DANS LE STOCKAGE LOCAL

PRÉPAREZ-VOUS. Pour démontrer la capacité de JavaScript à enregistrer des informations sans cookies, procédez comme suit : 1. Créez le fichier L9-js10.html avec le contenu suivant :

<!doctype html><html><head><title>Utiliser un système de stockage local</title>

<script type = "text/javascript">/// Cette page montre un modèle simple pour/// enregistrer le « niveau » d'un joueur dans le stockage local.function init() { var message; level_object = document.getElementById("level"); var welcome = document.getElementById("welcome"); // " localStorage " est un mot clé pour un navigateur prenant en charge // HTML5. " localStorage.level " est // un nom de variable choisi pour être utilisé par // cette page spécifique. var level = localStorage.level; if (level == null || level == '') { message = "C'est visiblement la première fois que vous jouez. Vous commencerez au niveau 1."; level = 1; } else { message = "La dernière fois que vous avez joué, vous avez atteint le niveau " + level +". Vous allez commencer là maintenant."; } welcome.innerHTML = message; level_object.value = level;}

function save_level() { localStorage.level = level_object.value;}


<h1>Utiliser un système de stockage local</h1><p id = "welcome">Bienvenue.</p><form>Vous pouvez mettre à jour votre niveau à tout moment. Il est actuellement défini sur<input id = "level" type = "number" min = "1" max = "100" oninput = "save_level();" />.</form>

</body></html>

PRÊT POUR LA CERTIFICATIONQu'est-ce que le stockage local ?4.4


2. Vous devez obtenir les privilèges d'utilisation d'un serveur Web de la part de votre instructeur. Le stockage local ne peut être activé que pour les pages Web accessibles via le réseau, pas localement.

3. Téléchargez le fichier L9-js10.html sur le serveur Web à l'aide d'un programme de transfert de fichier, tel que décrit par votre instructeur. Votre instructeur doit aussi vous donner l'adresse Web du fichier.

4. Dans un navigateur Web, utilisez l'adresse Web pour accéder au fichier L9-js10.html.

5. Notez le niveau auquel vous commencez, comme illustré dans la figure 9-12.

Figure 9-12

L'interface initiale du programme

6. Faites comme si vous aviez joué pendant un certain temps et atteint un niveau différent. Entrez ce niveau dans la zone d'entrée.

7. Fermez la fenêtre de l'application. 8. Ouvrez à nouveau le fichier L9-js10.html. Voyez-vous comment l'application se

« souvient » de votre position d'une session de navigateur à l'autre ? 9. Fermez le fichier et tous les programmes ouverts ou toutes les fenêtres ouvertes.

Remarquez que la programmation du stockage local est bien plus succincte que les opérations correspondantes avec les cookies.

R É S U M É D E S C O M P É T E N C E S


• HTML et CSS offrent plusieurs façons d'appliquer des animations rapides aux effets courants. Toutefois, JavaScript est beaucoup plus souple et peut produire des résultats remarquables.

• JavaScript est un langage de programmation puissant polyvalent. Si vous pouvez imaginer une animation particulière, il y a probablement une façon de le créer en JavaScript.

• Vous pouvez utiliser JavaScript pour afficher une image lorsque l'utilisateur clique sur un bouton ou qu'un autre événement se produit. La méthode createElement convient bien à cette utilisation.

• Si une application accessible depuis l'ordinateur expose des données à l'utilisateur final, il y a probablement un moyen pour que JavaScript puisse atteindre ces données. L'un des rôles les plus importants de JavaScript est de communiquer en temps réel avec les sources de données distantes.

• JavaScript est un langage de programmation généraliste et peut donc communiquer des informations structurées beaucoup plus riches que les simples valeurs utilisées dans la majeure partie de cette leçon.

• JavaScript peut accéder aux fichiers sur votre ordinateur local et, avec HTML5, il est possible de valider le type de fichier avant de le charger. JavaScript fait du chargement de fichiers un processus sans erreur plus interactif.

(suite)

240 | leçon 9

• Les utilisateurs veulent être en mesure de parcourir votre site, même en mode hors connexion. L'API Cache de l'application (AppCache) rend cela possible. AppCache diffère du cache d'un navigateur. En effet, le cache d'un navigateur contient toutes les pages Web visitées, tandis qu'AppCache enregistre uniquement les fichiers répertoriés dans le manifeste de cache.

• En JavaScript, les données se présentent de différentes façons. Les plus courantes sont les chaînes et les nombres. Parmi les autres types de données on trouve : un tableau, une valeur booléenne, une valeur Null, un objet et une valeur indéfinie.

• Au fur et à mesure que les utilisateurs renseignent un formulaire, JavaScript valide instantanément les entrées et propose d'autres solutions.

• Les cookies contiennent traditionnellement des informations à des fins de personnalisation et pour des raisons pratiques. JavaScript peut créer et récupérer des cookies.

• La quantité d'informations pouvant être stockées dans les cookies est limitée et par conséquent les effets de programmation qui peuvent être atteints sont également limités. Les cookies présentent aussi une menace pour la confidentialité des données. HTML5 propose la fonction de stockage local pour personnaliser la programmation plus facilement et la rendre plus performante.

Compléter l’espace videComplétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces prévus à cet effet. 1. Une représente l'affichage d'une séquence d'images statiques à un

rythme assez rapide pour créer l'illusion d'un mouvement. 2. Vous devez tracer un diagramme complexe dans le cadre d'un affichage en HTML5.

L'élément est l'une de ces méthodes. 3. Avant HTML5, le moyen le plus courant de conserver des informations d'une

application Web côté client, c'est-à-dire sur l'ordinateur de l'utilisateur, passait par l'utilisation de .

4. permet d'utiliser JavaScript pour transmettre des données sous forme de chaînes de texte, mais pas d'objets, entre un client et un serveur.

5. La est une technique de programmation dans laquelle une fonction s'appelle.

6. L' est le terme généralement utilisé pour décrire la vérification d'informations complexes en éléments constitutifs.

7. L'API permet d'enregistrer une copie des fichiers de votre site Web en local sous une forme structurée.

8. Les valeurs JavaScript prennent un aspect différent, appelé , représentant le plus souvent des chaînes et des nombres.

9. est un sous-ensemble de JavaScript qui permet d'échanger des objets JavaScript avec un serveur.

10. est l'alternative aux cookies.

Questions à choix multiplesEntourez la lettre correspondant à la meilleure réponse. 1. Parmi les propositions suivantes, laquelle est la plus couramment utilisée pour coder

en JavaScript un effet différé ?a. sleep()b. delay()c. wait()d. setTimeout()



2. JavaScript peut afficher plusieurs types de graphiques, des fichiers JPG et PNG, mais aussi des formes comme des boîtes et des cercles. La méthode que vous pouvez utiliser pour afficher des graphiques avec JavaScript est :a. createElementb. move_paragraphc. JSONd. display

3. Quelles sont les deux constructions principales utilisées pour tracer un objet à l'aide de l'élément canvas ?a. getElementById()b. getCanvasContextc. getElementByCanvas()d. canvas.getContext

4. L'envoi et la réception de données dans JavaScript nécessitent un serveur Web dynamique et :a. une validation côté clientb. une programmation côté serveur c. CSSd. Aucune des réponses ci-dessus

5. Dans quel ensemble de méthodes l'élément canvas est-il généré ?a. drawRect(), outlineRect(), eraseRect()b. fillRect(), strokeRect(), clearRect()c. beginPath(), fillPath(), endPath()d. beginPath(), fillPath(), closePath()

6. Quelle API JSON permet de convertir un objet JavaScript en chaînes de données pour un échange avec un serveur ?a. JSON.parsifyb. XMLHttpRequestc. JSON.stringifyd. getObjectString

7. Quelle est la différence entre AppCache et le cache d'un navigateur ?a. AppCache enregistre des copies de pages Web.b. Vous devez d'abord visiter une page Web pour qu'elle soit ajoutée dans le cache.c. AppCache n'enregistre que les fichiers répertoriés dans le manifeste du cache.d. AppCache et le cache du navigateur sont la même chose.

8. Parmi les propositions suivantes, laquelle n'est pas un type de données utilisé par JavaScript ?a. compositeb. chaîne c. nombred. booléen

9. Parmi les propositions suivantes, laquelle présente un risque lié à la confidentialité des données ?a. AppCacheb. LocalStoragec. cookiesd. animation

10. Quelle API permet d'utiliser des fichiers distants en mode déconnecté ?a. XMLHttpRequest b. AppCachec. JSON.parsed. JSON.stringify

242 | leçon 9

Vrai/FauxEntourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.V F 1. JavaScript ne prend pas en charge la récursivité.V F 2. Vous devez utiliser XMLHttpRequest pour créer des animations.V F 3. Il est possible d'écrire du code JavaScript qui sera exécuté avant le chargement

de toutes les images.V F 4. Vous pouvez utiliser LocalStorage pour stocker les données personnelles d'un

utilisateur.V F 5. Une technique courante dans l'animation JavaScript consiste à utiliser setTimeout

de manière récursive.


Scénario9-1:Présentationdesnotionsdebasesurl'animation

Roan est assistant administratif pour un organisme à but non lucratif qui publie une encyclopédie sur les plantes sauvages. La personne chargée du programme des bénévoles a demandé à Roan s'il pouvait créer une animation graphique sur la page d'accueil pour montrer en 5 ou 6 secondes la croissance d'une graine jusqu'à ce qu'elle devienne une longue herbe des prairies. Roan ne connaît rien à l'animation et vous demande un résumé succinct.

Scénario9-2:Créationd'uneapplicationpourdessinerunpland'étaged'entrepôt

Trudy est responsable d'entrepôt. Elle voudrait créer une application Web qui permet de dessiner le croquis du plan d'étage de l'intérieur d'un entrepôt. Elle doit rapidement soumettre une demande à l'équipe de développement, mais elle ne sait pas quelle technologie appropriée inclure dans sa description. Trudy vous demande votre avis. Que pouvez-vous lui dire ?


Scénario9-3:Améliorationdel'applicationdedessindel'entrepôt

Trudy a décidé de modifier sa demande pour l'équipe de développement et souhaite maintenant inclure un formulaire qui accepte les codes SKU des produits. Le serveur de l'entrepôt comporte des photographies de marchandises, référencées par code SKU, mais aussi des informations sur l'emplacement dans l'entrepôt où se trouvent actuellement ces articles. Trudy voudrait que le programme place une photo de l'article sur l'allée et l'étagère où il se trouve actuellement. Brièvement, comment le réaliser ? Elle a besoin d'ajouter la description à sa demande.

Scénario9-4:Révisiondesdocumentsenmodedéconnecté

Une application en ligne existante recueille et note les commentaires des évaluateurs sur différents postes budgétaires dans un processus extrêmement structuré : chaque poste renvoie vers les détails de la proposition, le personnel responsable, etc. L'application est une réussite. Les évaluateurs se plaignent, cependant, du fait qu'elle ne peut être utilisée qu'en ligne. Ils ne peuvent pas, par exemple, remplir les fiches d'évaluation dans un avion et sans connexion Internet. Ils proposent la possibilité de pouvoir télécharger tous les documents liés et remplir les feuilles de calcul avec leurs observations. Quelle est votre réponse ?

Codage JavaScript pour l'interface tactile, les ressources des périphériques et du système d'exploitation, etc.

L E Ç O N

243


accéléromètre

API de fichier

API de géolocalisation

API Web Worker

API WebSocket

blob

données civiques

données géodésiques

écran tactile capacitif

écran tactile résistif

événement de mouvement

événement tactile

indépendant de la plateforme

indépendant du périphérique

interrogation

liste tactile

objet tactile

stockage de session

stockage local

Web Hypertext Application Technology Working Group (WHATWG)



Réponse à l'interface tactile Répondre à l'interface tactile 4.5

Codage des API HTML5 supplémentaires Coder des API HTML5 supplémentaires 4.6

Accès aux ressources des périphériques Accéder aux ressources des périphériques 4.7 et du système d'exploitation et du système d'exploitation

10

L'équipe de développement de Malted Milk Media vous a demandé de l'aider à réaliser le projet d'application mobile Trusty Lawn Care. L'application doit inclure une interface tactile, donc votre responsabilité consiste à apprendre comment capturer les mouvements et y répondre. Vous devez également acquérir de solides notions en matière de géolocalisation et de capacités matérielles telles que le GPS et l'accéléromètre.

244 | Leçon 10

Les écrans tactiles sont devenus la forme la plus populaire d'interface de smartphone et les ordinateurs de bureau dotés d'écrans tactiles sont assez fréquents. Un appareil tactile dispose d'un écran spécialement développé qui détecte les données d'interaction tactile (appelées points), qui commencent sous la forme de pression ou de signaux électriques. Il existe deux principaux types d'écrans tactiles : • Un écran tactile résistif est composé de plusieurs couches ; la couche supérieure fléchit

lorsque vous appuyez dessus et touche la couche située dessous. Des capteurs détectent la pression, ce qui permet d'identifier la partie de l'écran sur laquelle l'utilisateur a appuyé. Les écrans tactiles utilisés dans les hôpitaux et les restaurants sont souvent de type résistif.

• Lesécrans tactiles capacitifs utilisent des électrodes pour détecter les objets qui touchent l'écran. Comme l'objet doit posséder des propriétés conductrices, un doigt fonctionne, mais pas un objet comme le stylet. La plupart des smartphones à écran tactile et moniteurs d'ordinateurs sont de type capacitif.

Un processeur d'écran tactile rassemble les données d'interaction tactile et les interprète comme des mouvements. Selon le matériel impliqué, les données sont envoyées à partir du processeur directement à l'application de l'utilisateur ou du processeur du système d'exploitation à l'application, où l'application utilise les données pour effectuer des tâches.

Un mouvement est une technique qui utilise un ou plusieurs doigts ou un dispositif de pointage comme un stylet au-dessus d'un contrôle ou d'un objet à l'écran pour fournir des données à une application tactile. Un appui permet de sélectionner un objet ou d'appuyer sur un bouton. Un balayage du doigt permet de faire défiler une série de photos ou une liste de contacts à l'écran. Une action pinchopen permet d'augmenter la taille de l'affichage à l'écran (effectuer un zoom avant). Microsoft définit les mouvements comme indiqué dans le Tableau 10-1.

■ Réponse à l'interface tactile

Un dispositif tactile interprète les mouvements des doigts sur un écran tactile, appelés « mouvements » et les convertit en instructions pour une application. De nombreux mouvements ont des équivalents souris.

L'ESSENTIEL

PRÊT POUR LA CERTIFICATIONComment les écrans tactiles répondent-ils à l'entrée utilisateur ?4.5

PRÊT POUR LA CERTIFICATIONQuels mouvements fournissent des données sur les écrans tactiles ?4.5

Tableau 10-1

Présentation des mouvements tactiles

Mouvement Équivalentsouris Description

Appuyer Clic gauche Appuyer sur l'écran avec un doigt

Appuyer deux fois Double-clic avec le bouton Appuyer rapidement deux fois sur l'écran avec un

gauche doigt

Toucher effectué à N/A Appuyer avec deux doigts sur l'écran simultanément

l'aide de deux doigts

Appuyer et toucher Clic droit Maintenir un doigt appuyé et taper avec un autre

Appuyer et maintenir Clic droit Maintenir un doigt appuyé sur l'écran, puis relâcher

Sélection/faire glisser Faire glisser la souris (sélection) Faire glisser un doigt vers la gauche ou vers la droite

Panoramique inertiel Défilement Maintenir un doigt appuyé sur l'écran, puis faire glisser

le doigt

Faire glisser Déplacer vers l'arrière ou vers Appuyer sur l'écran avec un doigt, le déplacer dans

l'avant, faire défiler vers le une direction quelconque, puis soulever le doigt pour

haut ou vers le bas laisser défiler

Rotation N/A Placer deux doigts sur un objet à l'écran et les

déplacer dans un mouvement circulaire

Zoom CTRL + molette de la souris Pincer un objet vers l'intérieur ou l'extérieur

vers l'avant ou vers l'arrière

Codage JavaScript pour l'interface tactile, les ressources des périphériques et du système d'exploitation, etc. | 245

Vous utilisez la méthode addEventListener pour attacher un gestionnaire d'événements à un élément HTML, qui peut être un div, un lien ou tout ce que vous voulez. L'utilisation de la méthode addEventListener vous permet de faire quelque chose d'utile quand un événement est déclenché. Voici la syntaxe générale de la méthode addEventListener :

object.addEventListener(event, eventListenerFunction);

Par exemple, dans le code suivant pour un programme de zone de dessin, la fonction startup est appelée lors du chargement de la page Web. Le programme écoute un utilisateur qui touche l'écran (l'événement touchstart), déplace un doigt (touchmove), et ainsi de suite :

function startup() { var el = document.getElementsByTagName("cdraw")[0]; el.addEventListener("touchstart", handleStart, false); el.addEventListener("touchmove", handleMove, false); el.addEventListener("touchend", handleEnd, false); el.addEventListener("touchcancel", handleCancel, false); }

Examinons de plus près la fonction handleStart. Elle est déclarée dans le code suivant, comme les autres fonctions sont déclarées en JavaScript, à ceci près que la fonction listener doit avoir un argument pour représenter l'événement. Vous pouvez utiliser n'importe quel identificateur comme argument d'événement, mais les développeurs utilisent souvent la lettre « e » ou un identificateur commençant par la lettre « e ».

function handleStart(evt) { evt.preventDefault(); var el = document.getElementsByTagName("cdraw")[0]; var context = el.getContext("2d"); var touches = evt.changedTouches; for (var i=0; i<touches.length; i++) { ongoingTouches.push(touches[i]); var color = colorForTouch(touches[i]); context.fillStyle = color; context.fillRect(touches[i].pageX, touches[i].pageY, 4, 4); } }

La méthode evt.preventDefault empêche le navigateur de continuer à traiter l'événement tactile, ce qui l'empêche de défiler dans cet exemple. Une fois le contexte obtenu (e1.getContext), la liste des points de contact modifiés est extraite de la propriété changedTouches de l'événement. Ensuite, le programme traite les éléments de la liste tactile. PageX et pageY fournissent les coordonnées X et Y du doigt.Les événements de mouvement sont déclenchés pour des mouvements à plusieurs doigts. Les événements de mouvement principaux sont :• gesturestart : tout nouveau mouvement avec deux doigts déclenche l'événement gesturestart.• gesturechange : lorsque deux doigts se déplacent sur l'écran, un événement gesturechange

se produit.• gestureend : lorsque vous soulevez les deux doigts de l'écran, l'événement gestureend

est déclenché.Les événements de mouvement sont des types d'événements tactiles, ils reçoivent donc des objets d'événement qui contiennent des propriétés tactiles. En outre, les événements de mouvement peuvent inclure les propriétés suivantes :• scale : indique le degré de zoom d'un pincement à deux doigts qui s'est produit. La valeur

décimale de la propriété commence à 1,0 ; elle est inférieure à 1,0 lorsque les doigts se rapprochent l'un de l'autre et elle est supérieure à 1,0 quand les doigts s'écartent.

246 | Leçon 10

Maintenant que vous comprenez les différents types d'entrées tactiles, nous allons voir comment elles sont capturées et utilisées dans des applications.

Les principaux événements tactiles sont touchstart, touchmove, touchend et touchcancel. Les principaux événements de mouvements sont gesturestart, gesturechange et gesturechange.

Capture et réponse aux mouvements

L'action d'une application en réponse à un mouvement s'appelle un événement tactile. Vous pouvez utiliser JavaScript pour créer des événements tactiles dans les applications tactiles. Les développeurs peuvent avoir recours à un grand nombre d'interfaces de programmation d'application (API) qui utilisent des données d'écran tactile.

Les principaux événements tactiles JavaScript sont :• touchstart : chaque fois qu'un doigt touche l'écran, un événement touchstart est déclenché.• touchmove : lorsqu'un doigt se déplace sur la surface de l'écran, un événement touchmove

est déclenché pour suivre le mouvement des doigts.• touchend : lorsque vous soulevez le doigt de l'écran, l'événement touchend est déclenché.• touchcancel : l'événement touchcancel est déclenché lorsque le périphérique lance une

autre application.

L'événement touchcancel permet au navigateur d'assurer le suivi des objets tactiles actifs dans la liste tactile. Il peut également réinitialiser les variables utilisées au cours des événements touchstart et touchmove. Toutefois, les développeurs utilisent rarement l'événement touchcancel. Vous ne le rencontrerez pas très souvent dans les scripts.

REMARQUE*

En JavaScript, l'objet tactile détecte les entrées sur des périphériques à interaction tactile. Les objets tactiles sont référencés dans la liste tactile, qui inclut tous les points de contact sur un écran tactile. Un appui simple correspond à une entrée dans la liste tactile, alors qu'un mouvement à trois doigts correspond à un total de trois entrées. Les objets tactiles sont en lecture seule et ont les propriétés suivantes :• identifier : un identificateur unique pour l'interaction tactile• target : l'élément HTML affecté par l'interaction tactile• clientx : position horizontale, par rapport à la fenêtre du navigateur• clienty : position verticale, par rapport à la fenêtre du navigateur• pagex : position horizontale, par rapport au document HTML• pagey : position verticale, par rapport au document HTML• screenx : position horizontale, par rapport à l'écran• screeny : position verticale, par rapport à l'écran

Chaque interaction tactile comprend trois listes tactiles différentes :• touches : liste de tous les points de contact actuellement activés sur l'écran• targetTouches : liste des points de contact actuellement activés à l'écran et dont

l'événement touchstart a été déclenché sur le même nœud (à l'intérieur du même élément cible comme élément cible actuel)

• changedTouches : liste des points de contact qui ont déclenché l'événement actuel ; par exemple, dans un événement touchend, le doigt a été retiré

PRÊT POUR LA CERTIFICATIONQuels sont les quatre principaux événements tactiles JavaScript ?4.5


• rotation : indique le degré de rotation avec deux doigts qui s'est produit. La valeur de la rotation est mesurée en degrés ; les valeurs positives suivent le sens des aiguilles d'une montre et les valeurs négatives suivent le sens inverse des aiguilles d'une montre.

Vous pouvez combiner des événements de mouvement avec les effets visuels CSS pour permettre la mise à l'échelle et la rotation. Par exemple, le code suivant implémente le gestionnaire d'événements gesturechange avec la mise à l'échelle et la rotation :

document.addEventListener('gesturechange',

function(event) {

event.preventDefault();

console.log("Scale: " + event.scale + ",

Rotation: " + event.rotation);

}, false);

Une fonction listener implicite est créée dans cet exemple. Le gestionnaire d'événements passe l'objet d'événement comme argument implicite appelé « événement » pour obtenir des informations spécifiques sur l'événement.

Les écrans qui peuvent afficher en mode portrait ou paysage déclenchent un événement orientationchanged lorsque l'utilisateur modifie l'orientation de l'écran. Vous pouvez utiliser orientationchanged pour tester la rotation de l'appareil. Chaque événement possède une valeur numérique qui représente les valeurs d'échelle et de rotation.

DÉTECTION DE LA FONCTIONNALITÉ D'ÉCRAN TACTILE

PRÉPAREZ-VOUS. Pour vérifier si l'appareil de l'utilisateur est tactile, procédez comme suit :

1. Dans un outil d'édition ou de développement d'applications, créez un fichier nommé L10-touch.html avec le contenu suivant :

<!doctype html>

<html>

<head>

<title>Détecter l'écran tactile</title>

<meta charset="utf-8" />

<style type="text/css">

#canvas{background-color: dodgerblue;}

</style>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", init, false);

function init() {

var canvas = document.getElementById("canvas");

if ("ontouchstart" in document.documentElement) {

canvas.addEventListener("touchstart", detect, false);

}

248 | Leçon 10

else { canvas.addEventListener("mousedown", detect, false); } } function detect() { if ("ontouchstart" in document.documentElement) { alert("Appareil à écran tactile détecté !"); } else { alert("Aucun appareil à écran tactile détecté !"); } }

</script>

</head>

<body> <canvas id="canvas" width="100" height="100"></canvas> <br /> <p>Cliquez sur la zone pour commencer la détection d'écran tactile.</p> </body></html>

Le code suivant dessine une zone de toile sur l'écran, suivie d'une ligne de texte indiquant de cliquer sur la zone pour commencer la détection d'écran tactile. La fonction initial affecte l'élément canvas, puis le détecteur d'événements écoute un événement tactile ou un clic de souris. Si l'utilisateur dispose d'un écran tactile et touche la case, le programme affiche un message qui indique qu' indique q'un appareil tactile a été détecté. Si un clic de souris est détecté, un message indiquant qu'aucun écran tactile n'a été détecté s'affiche.

2. Ouvrez L10-touch.html dans un navigateur Web. L'affichage devrait être semblable à l'illustration de la figure 10-1.

3. Cliquez sur la boîte bleue. Si vous travaillez sur un ordinateur avec un écran ordinaire, le message d'alerte illustré dans la figure 10-2 s'affiche. Dans le cas contraire, un message d'alerte indique qu'un appareil à écran tactile a été détecté.

Figure 10-1

L'interface du programme de détection d'écran tactile


4. Cliquez sur OK pour fermer le message d'alerte.

5. Fermez le fichier et le navigateur Web, mais laissez l'outil d'édition ouvert si vous envisagez d'effectuer l'exercice suivant au cours de cette session.

✚ PLUS D’INFORMATIONSLe spécifications du W3C sur la version 2 des événements tactiles sont disponibles sur la page Version 1 des événements tactiles à l'adresse http://www.w3.org/TR/touch-events/.

■ Codage des API HTML5 supplémentaires

La collaboration WHATWG (Web Hypertext Application Technology Working Group) gère une spécification HTML en cours de développement intégrant les API qui ne faisaient pas partie à l'origine de la spécification HTML5. Il s'agit notamment des API de géolocalisation, Web Worker, WebSockets et de fichier.

L'ESSENTIEL

Comme vous avez appris tout au long de ce manuel, de nombreuses API HTML5 sont disponibles et fournissent des fonctionnalités nouvelles et améliorées tout en facilitant le développement de documents HTML. Ce qui n'a pas été spécifiquement souligné est qu'il existe en fait deux versions de la spécification HTML5 : une publiée par le W3C et l'autre par le WHATWG.La collaboration WHATWG (Web Hypertext Application Technology Working Group) a été formée par Apple, Mozilla Foundation et Opera Software pour définir et documenter la spécification HTML5. Le site Web du WHATWG à l'adresse http://developers.whatwg.org/ est une bonne ressource pour en savoir plus sur les nouveaux éléments de HTML5 et comment les utiliser.La spécification HTML en cours de développement gérée par la collaboration WHATWG contient des API supplémentaires différentes de celles décrites dans la spécification HTML5 du W3C originale. Les API applicables abordées dans les sections suivantes sont les API de géolocalisation, de fichier, de traitements Web et WebSockets.

PRÊT POUR LA CERTIFICATIONQu'est-ce que WHATWG ?4.6

Figure 10-2

Le message d'alerte indique qu'aucun écran tactile n'est présent

L'API de géolocalisation obtient les coordonnées géographiques de l'utilisateur (latitude et longitude). Elle peut également afficher une carte avec un marqueur indiquant l'emplacement de l'utilisateur selon ses coordonnées.

Codage pour capturer la localisation

250 | Leçon 10

PRÊT POUR LA CERTIFICATIONQuelle fonction JavaScript obtient la position géographique actuelle d'un appareil ?4.6

L'API de géolocalisation définit une interface qui fournit la localisation d'un périphérique, généralement à l'aide des coordonnées de latitude et de longitude. L'API soumet la latitude et la longitude à JavaScript dans une page Web à l'aide de l'objet de géolocalisation.

Les deux fonctions principales de géolocalisation sont les suivantes :

• getCurrentPosition : obtient la position géographique actuelle de l'appareil en utilisant la méthode getCurrentPosition.

• watchPosition : observe les modifications de la position de l'appareil dans le temps en utilisant la méthode watchPosition et génère un événement si un changement se produit. L'appel de clearWatch arrête la surveillance.

Voici un exemple simple d'un appel de getCurrentPosition. La fonction de rappel showmap reçoit les coordonnées de latitude et de longitude :

navigator.geolocation.getCurrentPosition(showmap);function showmap(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // Code pour afficher une carte}

Vous pouvez présenter aux utilisateurs les données d'emplacement de deux manières : géodésique et civile. Les données géodésiques fournissent des données d'emplacement brutes, telles que la longitude et latitude ou en mètres. Les données civiles représentent les données d'emplacement qui sont plus intelligibles pour l'homme, comme une carte ou une adresse, par exemple 637 Park Street.

L'API de géolocalisation retourne des données géodésiques à partir des fonctions, que vous pouvez présenter dans sa forme brute ou combiner avec un service de cartographie en ligne, comme Bing Maps pour afficher une carte avec un pointeur indiquant les coordonnées de l'utilisateur.

Sachez que la confidentialité est une préoccupation majeure pour de nombreux utilisateurs. Par conséquent, l'API de géolocalisation permet aux utilisateurs de masquer leur emplacement et de nombreuses implémentations demandent à l'utilisateur la permission de retourner ses coordonnées d'emplacement.

La géolocalisation est conçue principalement pour les smartphones et autres appareils mobiles et ne fonctionne pas toujours pour les ordinateurs de bureau. Lorsqu'un appareil n'a aucun moyen de se localiser, l'API génère une erreur de position non disponible.

CRÉATION D'UNE APPLICATION DE GÉOLOCALISATION

PRÉPAREZ-VOUS. Pour créer une application de géolocalisation qui affiche la latitude et la longitude actuelles de l'utilisateur, procédez comme suit :

1. Dans un outil d'édition ou de développement d'applications, créez un fichier nommé L10-geolocation.html avec le contenu suivant :

<!doctype html> <html> <head> <title>Exemple de géolocalisation</title> <meta charset="utf-8" /> <script> var messageDiv = document.getElementById('message'); function initLocation() {

252 | Leçon 10

3. Vos coordonnées s'affichent, comme illustré dans la figure 10-4.


✚ PLUS D’INFORMATIONSLa page Web de Microsoft « Géolocalisation » à l'adresse http://msdn.microsoft.com/fr-fr/library/gg589499(v=vs.85).aspx fournit des liens sur la création d'une page Web prenant en charge la localisation et des didacticiels Internet Explorer. Vous devriez également consulter l'article « 12 idées de géolocalisation HTML5 » dans MSDN Magazine à l'adresse http://msdn.microsoft.com/en-us/magazine/hh563893.aspx.

Les traitements Web sont des scripts qui s'exécutent en arrière-plan, qui effectuent des calculs ou d'autres actions rendant l'interface utilisateur plus réactive.

Présentation des traitements Web

PRÊT POUR LA CERTIFICATIONQuels types d'applications utilisent des traitements Web ?4.6

Figure 10-3

Le navigateur vous demande la permission de suivre votre emplacement physique

Figure 10-4

L'affichage des coordonnées à l'aide de l'application de géolocalisation

Les traitements Web désignent une API qui permet d'exécuter des scripts en arrière-plan comme threads parallèles. Ces threads d'arrière-plan peuvent se connecter à plusieurs pages Web, récupérer des données en temps réel, comme les mises à jour d'actions boursières, effectuer des demandes de réseau ou accéder à l'espace de stockage local,


pendant que le document HTML principal répond à la demande de l'utilisateur matérialisée par un appui, un défilement et une saisie. Les traitements Web aident à maintenir la réactivité de l'interface utilisateur.

Les objets Web Workers sont exécutés dans un seul et même thread. Ils n'agissent pas directement sur le document HTML principal ou le modèle DOM. Cela signifie que vous n'utilisez pas le document ou getElementById dans votre script. (Vous pouvez utiliser setTimeout, setIntervalet XMLHttpRequest.) En revanche, les traitements Web transmettent les informations au moyen de messages, en exécutant le code d'un fichier JavaScript distinct du document HTML principal.

Pour utiliser un traitement Web, vous devez d'abord créer un objet Worker dans votre document HTML principal, comme suit :

var worker = new Worker('worker.js');

Lorsque le navigateur interprète cette ligne, il crée un thread de travail, puis il commence par la méthode suivante :

worker.postMessage();

La méthode postMessage() accepte une chaîne ou un objet JSON comme argument. Tous les navigateurs prennent en charge la transmission de messages de type chaîne, mais seules les dernières versions des principaux navigateurs prennent en charge la transmission d'objets JSON.

En guise de simple exemple de transmission de message par un traitement Web, voici un script dans le document HTML principal :

var worker = new Worker("doWork.js"); // Consultez les messages du traitement worker.onmessage = function(e){ // Le message du traitement e.data }; worker.postMessage("start");

Le code suivant peut apparaître dans le fichier doWork.js :

onmessage = function(e){ if ( e.data === "start" ) { // Effectuer une action ou un calcul done() } }; function done(){ // Envoyer les résultats au document principal postMessage(« Bonjour, j'ai fini »); }

Au lieu d'utiliser le gestionnaire d'événements onmessage, vous pouvez utiliser addEventListener() dans le document HTML principal, comme ceci :

worker.addEventListener('message', function(e) {

254 | Leçon 10

CRÉER ET EXÉCUTER UN TRAITEMENT WEB

PRÉPAREZ-VOUS. Pour créer et exécuter un traitement Web, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez un fichier nommé

L10-worker.html avec le contenu suivant :

<!doctype html> <html lang="fr"><head><script>var worker = new Worker('doWork.js');

// Envoyer un message pour commencer le travail et lui transmettre une variablevar info = 'Web Workers';worker.postMessage(info);

// Recevoir un message du traitementworker.onmessage = function (event) { // Effectuer une action alert(event.data);};</script><title>Exemples de traitements Web</title></head><body></body></html>

2. Créez un fichier JavaScript nommé doWork.js dans le même dossier que worker.html, avec le contenu suivant :

onmessage = function(event) { var info = event.data; var result = 'Hello ' + info + ' everywhere'; postMessage(result);};

3. Ouvrez L10-worker.html dans un navigateur Web. Le message d'alerte doit afficher, comme illustré dans la figure 10-5.

Figure 10-5

Le résultat de l'exécution d'un traitement Web


4. Cliquez sur OK pour accepter les paramètres et fermer le message d'alerte. 5. Fermez les fichiers et le navigateur Web, mais laissez l'outil d'édition ouvert si vous

envisagez d'effectuer l'exercice suivant au cours de cette session.

L'API WebSocket vous permet d'ouvrir une connexion permanente entre un client et un serveur Web et d'échanger du texte et des fichiers binaires. Les WebSockets permettent de réduire le volume de traitement nécessaire pour les communications en temps réel.

Présentation des WebSockets

WebSocket est une API qui offre un mode de communication en duplex intégral (communication simultanée dans les deux sens), à l'aide d'un seul socket sur Internet. Les développeurs utilisent les WebSockets principalement pour des applications Web en temps réel, comme la messagerie instantanée, les jeux en ligne multijoueur et les cotations boursières.Pour comprendre la puissance des WebSockets, vous avez besoin d'un petit historique de ce qui les a précédés. À l'origine, lorsqu'un utilisateur entrait une URL dans un navigateur Web ou cliquait sur un lien sur une page Web, le navigateur contactait le serveur Web approprié pour la page. Chaque fois que l'utilisateur souhaitait mettre à jour ou actualiser quelque chose sur la page, le navigateur récupérait une toute nouvelle page du serveur Web. Vous pourriez voir encore cela lorsque vous cliquez dans une galerie de photos. Chaque fois que vous cliquez sur pour une nouvelle photo, la page s'actualise et vous devez parfois revenir à la galerie.Des technologies telles qu'AJAX ont permis d'actualiser seulement une partie d'une page Web. Comet et d'autres technologies apparentées de type « push » ont adopté l'interrogation, processus dans lequel un navigateur contacte un serveur Web régulièrement (parfois en permanence) pour vérifier si de nouvelles informations sont disponibles pour être présentées à l'utilisateur. Le problème de l'interrogation est que beaucoup de demandes sont soumises au serveur pour récupérer les nouvelles données, ce qui peut avoir un impact négatif sur les performances.La technologie WebSocket crée une connexion permanente entre un client et un serveur Web, de sorte que l'un ou l'autre peut envoyer des données à l'autre à tout moment. La connexion permanente réduit considérablement le volume de traitement nécessaire pour le canal de communication.Pour établir une connexion WebSocket, le client et le serveur remplacent le protocole HTTP par le protocole WebSocket (WS) au cours de leur connexion initiale. Une fois qu'une connexion a été établie, le client et le serveur peuvent échanger des fichiers texte et binaires en mode duplex intégral.Voici les trois événements principaux associés aux communications WebSocket :

• onopen: quand un socket s'ouvre• onmessage: quand un message est reçu du serveur Web• onclose: quand un socket ferme

Vous verrez chacun de ces événements dans les extraits de code dans cette section. Tout d'abord, étudions le code JavaScript qui ouvre une connexion WebSocket :

var host = 'ws://example.com';

Notez l'utilisation de ws au lieu de http dans l'URL. Vous pouvez également utiliser wss pour les connexions WebSocket sécurisées, comme https pour les connexions HTTP sécurisées.Une fois la connexion Internet initialisée, vous devez la tester afin de vous assurer qu'elle a réussi. Pour ce faire, vous pouvez utiliser le gestionnaire d'événements onopen afin de savoir quand la connexion est ouverte. Voici un exemple qui affiche un message d'alerte lorsque le socket s'ouvre :

socket.onopen = function(){ alert("Socket ouver"); }

PRÊT POUR LA CERTIFICATIONComment les WebSockets réduisent-ils les problèmes de performances associés aux applications en temps réel ?4.6

256 | Leçon 10

Voici un autre exemple de onopen qui affiche un message :socket.onopen = function (openEvent) { document.getElementById("serverStatus").innerHTML = 'Socket ouver'; };

Maintenant, vous êtes prêt à envoyer et recevoir des données. Pour envoyer des messages textuels au serveur, utilisez la méthode send ('message') sur l'objet de connexion. Code pour envoyer un message textuel :

socket.send('message');

Un moyen simple d'envoyer des données binaires est d'utiliser un objet Blob (binary large object). Un blob est tout simplement un type de données qui peut stocker des données binaires, comme les images ou les fichiers multimédias. Pour envoyer un fichier comme un objet Blob, vous pouvez utiliser ce code :

var file = document.querySelector('input[type="file"]').files[0]; socket.send(file);

Pour recevoir des messages du serveur, vous pouvez utiliser le rappel onmessage :socket.onmessage = function(msg){ alert(msg); //Reçu !}

Enfin, pour fermer une connexion, utilisez le gestionnaire d'événements onclose , comme ceci :socket.onclose = function() { alert("Connexion fermée."); };

La spécification de l'API WebSockets est toujours à l'état d'ébauche au moment de la rédaction de ce document et WebSockets n'est pas pris en charge par tous les navigateurs Web. Pour avoir une idée de l'utilisation de WebSockets, effectuez l'exercice suivant.

CRÉATION D'UN WEBSOCKET POUR TESTER LA COMPATIBILITÉ DU NAVIGATEUR

PRÉPAREZ-VOUS. Pour créer un WebSocket qui vérifie si votre navigateur prend en charge les WebSockets, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez un fichier nommé

L10-WebSocket.html avec le contenu suivant :

<!doctype html> <html><head><script type="text/javascript"> fonction WebSocketTest() { if ("WebSocket" dans la fenêtre) { alert("Votre navigateur prend en charge WebSockets."); // Ouvrir un WebSocket var socket = new WebSocket("ws://localhost:9998/echo"); socket.onopen = function () { // Connecté, envoyer des données socket.send("Connecté"); alert("Connecté."); };


socket.onmessage = function (e) { var received_msg = e.data; alert("Message reçu.");

}; socket.onclose = function () { // WebSocket fermé alert("Connexion fermée."); }; } else { // Navigateur ne prend pas en charge les WebSockets alert("Votre navigateur ne supporte pas les WebSockets."); } }</script></head><body><div> <a href="javascript:WebSocketTest()">Cliquez pour exécuter la démo WebSocket</a></div></body></html>

2. Ouvrez L10-WebSocket.html dans un navigateur Web.

3. Suivez les invites affichées par le programme. Si votre navigateur prend en charge les WebSockets, le premier message d'alerte qui s'affiche est illustré dans la figure 10-6.

4. Cliquez sur OK pour accepter les paramètres et fermer la boîte.

5. Un second message d'alerte devrait apparaître, indiquant que la connexion est fermée, comme illustré dans la figure 10-7. Cliquez sur OK.

Figure 10-6

Un message d'alerte confirme que votre navigateur exécute WebSockets

258 | Leçon 10


PLUS D’INFORMATIONSPour en savoir plus sur les WebSockets, visitez la page Web « WebSockets » de Microsoft à l'adresse http://msdn.microsoft.com/fr-fr/library/ie/hh673567(v=vs.85).aspx.

Vous pouvez utiliser l'API de fichier pour télécharger un ou plusieurs fichiers à partir d'un disque local ou du stockage local d'un appareil vers un serveur distant. Vous avez également la possibilité d'afficher des fichiers image téléchargés dans une application Web.

Utilisation de l'API de fichier pour les téléchargements de fichiers

L'API de fichier permet à un navigateur ou à une application de télécharger des fichiers dans l'espace de stockage local vers un serveur distant sans l'aide d'un plug-in. Par exemple, à l'aide de l'API de fichier, vous pouvez faire en sorte qu'une boîte de dialogue Ouvrir s'affiche et permette à l'utilisateur de sélectionner un fichier image. Lorsque l'utilisateur clique sur OK, une miniature du fichier image s'affiche dans l'application Web. Les développeurs emploient l'API de fichier dans les jeux et les applications qui utilisent des fichiers de multimédias, dans les clients de messagerie électronique hors ligne, éditeurs de photos et lecteurs vidéo.

L'API de fichier utilise plusieurs interfaces pour accéder à des fichiers de stockage local. Ces interfaces incluent notamment :

• File: inclut des attributs d'informations en lecture seule au sujet d'un fichier individuel, par exemple son nom et type de support, et l'associe au fichier comme une URL

• FileList: une séquence d'objets File de type tableau ; comprend le glisser-déposer d'un dossier de fichiers depuis l'espace de stockage local

• Blob: fournit un accès aux données binaires brutes• FileReader: fournit des méthodes pour lire et afficher un fichier

Un moyen facile de charger un fichier consiste à utiliser l'élément d'entrée type="file" . L'utilisation de l'élément d'entrée type="file" retourne la liste des objets File sélectionnés en tant que FileList. Le code pourrait ressembler à ceci :

<input type="file" id="input" onchange="handleFiles(this.files)">

PRÊT POUR LA CERTIFICATIONQuel élément utilisez-vous pour charger un fichier à l'aide de l'API de fichier ?4.6

Figure 10-7

Un message d'alerte confirme que la connexion est fermée

✚


Pour permettre à l'utilisateur de charger plusieurs fichiers en même temps, ajoutez « multiple » avant onchange, comme suit :

<input type="file" id="input" multiple onchange="handleFiles(this.files)">

VÉRIFICATIONDELACOMPATIBILITÉDESNAVIGATEURSAVECL'APIDEFICHIER

PRÉPAREZ-VOUS. Pour vérifier si les principaux navigateurs sont compatibles avec l'API de fichier, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez un fichier HTML

avec le contenu suivant :

<!doctype html> <html><head> <meta charset="utf-8" /> <title>Vérification de la prise en charge de l'API de fichier par le navigateur</title><script>if (window.File && window.FileReader && window.FileList && window.Blob) { alert('Hourra ! Ce navigateur prend en charge les API de fichier.');} else { alert('Ce navigateur ne prend pas entièrement en charge les API de fichier.');}</script></head>

<body></body></html>

L'instruction « if » vérifie si les API de fichier, FileReader, FileList et Blob sont prises en charge. Si les API sont prises en charge, le message « Hourra » s'affiche. Sinon le second message s'affiche.

2. Enregistrer les fichiers sous L10-FileAPI-checkBrowser.html et ouvrez-les dans chacun des principaux navigateurs Web. L'écran illustré dans la figure 10-8 s'affiche lorsque les API de fichier ne sont pas prises en charge.

Figure 10-8

Message indiquant que les API de fichier ne sont pas prises en charge

3. Fermez le fichier et les navigateurs Web, mais laissez l'outil d'édition ouvert si vous envisagez d'effectuer l'exercice suivant au cours de cette session.

260 | Leçon 10

Comme vous l'avez appris dans la leçon 1, Windows Runtime (WinRT) est l'environnement de système d'exploitation responsable de l'accès aux périphériques, multimédia, réseau, stockage local et distant et à d'autres éléments. Il s'agit de l'environnement dans lequel les développeurs testent leurs applications et où les utilisateurs exécutent celles-ci. Un développeur peut utiliser des API et l'environnement d'exécution pour demander l'accès aux périphériques utilisateur et à la mémoire dans une application.

Les sections suivantes vous guident dans l'accès aux ressources en mémoire et l'accès à l'appareil et au système d'exploitation, qui sont des fonctions de WinRT.

PRÊT POUR LA CERTIFICATIONQuel environnement de système d'exploitation est responsable de l'accès aux périphériques, stockage local, etc. ?4.7

✚ PLUS D’INFORMATIONSUne liste de bibliothèques Windows Runtime et Windows pour les API JavaScript est disponible à l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/br211377.aspx.

L'API Web Storage inclut le stockage local (pour les données persistantes) et le stockage de session (pour les données temporaires).

Accès aux ressources en mémoire

■ Accès aux ressources des périphériques et du système d'exploitation

L'environnement d'exécution de Windows permet aux développeurs d'accéder aux ressources en mémoire, mais aussi au matériel à l'aide des API.L'ESSENTIEL

Cette API offre une méthode côté client permettant d'enregistrer les données de session en local dans le navigateur ou dans la mémoire du périphérique. La méthode localStorage permet aux utilisateurs d'enregistrer des volumes de données plus importants entre deux sessions (données persistantes), tandis que la méthode sessionStorage conserve les données d'une seule session uniquement (jusqu'à la fermeture du navigateur). Les données sont stockées sous forme de paires clé/valeur pour les deux types de stockage Web.

Le stockage local concerne les données persistantes et s'avère utile pour les listes de tâches en ligne, les listes de contacts, les calendriers et les articles de panier enregistrés. Il est important que ces informations soient disponibles pour l'utilisateur après la fermeture du navigateur et ultérieurement lorsqu'il ouvrira de nouveau le navigateur. Les informations sont conservées dans une mémoire persistante des applications Web et des périphériques mobiles. Le stockage de session concerne les données temporaires qui sont conservées pour une seule session, jusqu'à la fermeture du navigateur. Toutes les données d'une session sont enregistrées dans le stockage de session, puis effacées lorsque vous fermez l'onglet ou la fenêtre du navigateur. Un programme de recherche des codes postaux illustre parfaitement l'utilisation du stockage de session.

En JavaScript, vous utilisez les objets localStorage et sessionStorage avec les méthodes suivantes pour gérer les paires clé/valeur :• setItem(key,value): ajoute une paire clé/valeur à l'objet de stockage• getItem(key): récupère la valeur d'une clé spécifique• removeItem(key): supprime la paire clé/valeur de l'objet de stockage• clear(): supprime toutes les paires clé/valeur de l'objet de stockage

Voici le code générique permettant d'ajouter une paire clé/valeur à un objet sessionStorage :

sessionStorage.setItem('key', 'value'); var myVar = sessionStorage.getItem('key');


Voici le code générique pour le stockage local :

localStorage.setItem('key', 'value'); var myVar = localStorage.getItem('key');

Les méthodes getItem() et removeItem() utilisent la même syntaxe. L'utilisation de sessionStorage.clear() permet de tout supprimer de la liste.

UTILISATION DE L'OBJET LOCALSTORAGE

PRÉPAREZ-VOUS. Pour enregistrer une valeur dans le stockage local, procédez comme suit : 1. Dans un outil d'édition ou de développement d'applications, créez un fichier nommé

L10-localStorage.html avec le contenu suivant :

<!doctype> <html><head><title>Exemple de localStorage</title> <script type="text/javascript"> function load() { var value = localStorage.getItem("myKey");

if (!value) { alert("Élément introuvable, ajout à localStorage"); localStorage.setItem("myKey", "myValue"); } else { alert(value + " trouvée!"); } }</script></head><body onload="load()"></body></html>

2. Ouvrez L10-localStorage.html dans un navigateur Web. Parce que la valeur "myValue" vient d'être transmise et que la session est en cours, vous devriez recevoir un message d'alerte semblable dans la figure 10-9. Cliquez sur OK pour accepter les paramètres et fermer le message d'alerte.

PRÊT POUR LA CERTIFICATIONQuelle méthode JavaScript utilisez-vous pour ajouter une paire clé/valeur à un objet sessionStorage ou localStorage object?4.7

Figure 10-9

Le premier message d'alerte indique que la valeur est ajoutée à localStorage

262 | Leçon 10

4. Fermez le navigateur Web. 5. Dans le document HTML, remplacez chaque instance de localStorage par sessionStorage. 6. Enregistrez le fichier sous L10-sessionStorage.html et ouvrez-le dans un navigateur

Web. Notez ce qui s'affiche dans le message d'alerte. 7. Fermez le navigateur Web, puis rouvrez L10-sessionStorage.html. 8. Le message d'alerte devrait être identique et indiquer que la valeur n'a pas été

trouvée. C'est parce que vous avez fermé le navigateur Web, ce qui a supprimé la valeur de la mémoire de session.

9. Appuyez sur Ctrl+R ou cliquez sur le bouton Actualiser de votre navigateur. Un message d'alerte s'affiche, confirmant que la valeur a été trouvée.


3. Fermez le navigateur Web, puis rouvrez L10-localStorage.html. Maintenant vous devriez voir le message d'alerte illustré dans la figure 10-10. La valeur a été enregistrée dans le stockage local et a persisté entre les sessions du navigateur.

✚ PLUS D’INFORMATIONSLa page Web de Microsoft « Web Storage HTML5 » à l'adresse http://bit.ly/JeXlJU fournit l'API pour le stockage persistant des données de la paire clé/valeur.

Figure 10-10

Le deuxième message d'alerte confirme que la valeur a été enregistrée

Les applications indépendantes de la plate-forme s'exécutent sur différents systèmes d'exploitation de bureau et mobiles et les applications indépendantes du périphérique sont indépendantes de l'appareil. JavaScript vous permet d'accéder aux API Windows Runtime pour les périphériques matériels.

Accès aux capacités matérielles

HTML5 est considéré comme indépendant de la plateforme. Cela signifie que la famille de technologies HTML5 vous permet de créer des pages Web et des applications qui s'exécutent sur différents systèmes d'exploitation de périphériques mobiles et de bureau, tels que Microsoft Windows, Internet Explorer et Windows Phone. Vous pouvez également les exécuter sous Mac OS X, Android, iOS et Blackberry OS. Parce que HTML5 est construit sur un standard ouvert, les utilisateurs d'applications HTML5 n'ont pas à télécharger un plug-in ou utiliser des dispositifs dotés de la prise en charge des plug-in. Au lieu de cela,


vous pouvez utiliser n'importe quel navigateur Web, que ce soit sur votre PC ou votre appareil mobile et obtenir la même expérience Web riche.En outre, un programme ou une interface qui exécute un logiciel produisant des résultats semblables sur différents périphériques est indépendant du périphérique. Avec HTML5, CSS et JavaScript, vous pouvez facilement créer des applications indépendantes du périphérique. Les applications indépendantes du périphérique vous permettent d'accéder à des capacités matérielles telles que le GPS, l'accéléromètre et l'appareil photo.En résumé, JavaScript vous permet d'accéder aux API Windows Runtime pour les périphériques matériels.

PRÉSENTATION DU GPS (GLOBAL POSITIONING SYSTEM)Le matériel de GPS (Global positioning system), généralement une puce ou une carte de circuit imprimé, de réception qui communique avec les satellites pour fournir l'emplacement précis d'un périphérique à partir des coordonnées de longitude et de latitude. Les téléphones les plus modernes sont maintenant dotés de GPS, tout comme les ordinateurs portables disposent du WiFi et/ou d'une connexion cellulaire à haut débit.L'API de géolocalisation que vous avez découverte précédemment dans la leçon utilise la puce GPS pour recueillir des données de géolocalisation brutes.

PRÉSENTATION DE L'ACCÉLÉROMÈTREDe nombreux appareils mobiles incluent des capteurs d'orientation et de mouvement, qui détectent l'orientation et le mouvement de l'appareil et utilisent ces informations comme des entrées. Par exemple, lorsqu'un utilisateur tient l'appareil et balance son bras en arrière et au-dessus de sa tête, puis balance le bras en avant, comme pour jouer au tennis, l'appareil reconnaît et enregistre le mouvement.Un accéléromètre est un périphérique qui mesure l'accélération, qui désigne un changement de vitesse ou de direction au cours d'une période. Le capteur de l'accéléromètre détecte les forces exercées sur le périphérique, par exemple un mouvement (haut, bas, latéral) et la gravité. Dans les systèmes liés à Windows, des API spécifiques récupèrent les données de mouvement brutes à partir des capteurs de l'accéléromètre, puis l'API Motion combine les données de ces capteurs et effectue des calculs pour générer des valeurs intelligibles.L'événement devicemotion fournit l'accélération du périphérique, en coordonnées cartésiennes, et la vitesse de rotation. Voici un extrait de code JavaScript qui reçoit des événements devicemotion :

window.addEventListener("devicemotion", function(event) { // Processus event.acceleration, event.accelerationIncludingGravity, // event.rotationRate et event.interval }, true);

PRÊT POUR LA CERTIFICATIONQue signifie indépendant du périphérique ?4.7

Deux capteurs liés sont la boussole et le gyroscope. Le capteur de boussole détermine l'orientation du périphérique par rapport au pôle nord magnétique de la terre. Vous pou-vez utiliser le capteur de boussole avec les API appropriées pour créer des applications comme le géocaching et la navigation par exemple. Le capteur de gyroscope utilise le mouvement (forces de rotation) pour détecter la vitesse de rotation du périphérique selon les trois axes principaux.

REMARQUE*

ACCÈS À UNE CAMÉRALa spécification « HTML Media Capture » du groupe W3C utilise un attribut de capture avec l'élément input pour capturer les données des appareils photo, caméscopes, webcams, microphones, etc. Par exemple, le code générique suivant télécharge une image de l'appareil photo du périphérique :

<input type="file" accept="image/*" capture="camera">

264 | Leçon 10

Cependant, cette construction offre une prise en charge limitée et ne fonctionne qu'avec certains navigateurs mobiles. La tendance est au passage à la méthode getUserMedia() et à l'objet de navigateur comme autre solution, qui accède au flux de données de la caméra et du microphone d'un appareil. getUserMedia fonctionne bien avec les nouveaux éléments audio et vidéo de HTML5. Voici un extrait de code qui fournit un accès au matériel d'un appareil :

navigator.GetUserMedia('audio, video', function(localMediaStream) { var video = document.querySelector('video'); video.src = window.createObjectURL(localMediaStream);}, onFailSoHard);

Les spécifications sont dans le flux, donc vous devriez vous attendre à des changements au fur et à mesure que les spécifications sont modifiées et que les fournisseurs de navigateur adoptent la technologie.

EXPLORATION DES CAPACITÉS MATÉRIELLES

PRÉPAREZ-VOUS. Pour explorer les capacités matérielles, procédez comme suit : 1. Visitez a page Web MSDN « Démarrage rapide : détection d'emplacement

d’emplacement avec HTML5 (HTML) » à l'adresse http://msdn.microsoft.com/fr-fr/library/windows/apps/hh452746.aspx.

2. Copiez et collez l'exemple de code JavaScript dans un outil d'édition ou de développement d'applications et enregistrez-le sous L10-geo-ms.html.

3. Ouvrez L10-geo-ms.html dans un navigateur Web et testez l'application. 4. Comparez les coordonnées de longitude et de latitude avec L10-geolocation.html, que

vous avez créé dans une leçon antérieure. 5. Réponse à un mouvement de l’utilisateur avec l’accéléromètre (HTML) » à l'adresse

http://bit.ly/J7OA58. 6. Lisez l'exemple de code JavaScript et l'exemple de balisage HTML. 7. Répondez aux questions suivantes, en recherchant des parties du code et du balisage

si nécessaire :a. Quelle fonction établit une connexion avec l'accéléromètre par défaut ? b. Quelle fonction capture les données du nouvel accéléromètre ?c. Quels éléments écrivent les nouvelles valeurs à l'écran ?

8. Fermez tous les programmes et fichiers ouverts.

✚ PLUS D’INFORMATIONSPour en savoir plus sur les API liées à une caméra, consultez la page Web MSDN à l'adresse suivante : http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465152.aspx. Pour explorer les composants Windows Runtime, accédez à cette page Web MSDN : http://msdn.microsoft.com/fr-fr/library/windows/apps/hh441572.aspx.

R É S U M É D E S C O M P É T E N C E S


• Un dispositif tactile interprète les mouvements des doigts sur un écran tactile, appelés « mouvements » et les convertit en instructions pour une application. De nombreux mouvements ont des équivalents souris.

• Les principaux événements tactiles sont touchstart, touchmove, touchend et touchcancel. Les principaux événements de mouvements sont gesturestart, gesturechange et gestureend.


• La collaboration WHATWG (Web Hypertext Application Technology Working Group) gère une spécification HTML en cours de développement intégrant les API qui ne faisaient pas partie à l'origine de la spécification HTML5. Il s'agit notamment des API de géolocalisation, Web Worker, WebSockets et de fichier.

• L'API de géolocalisation obtient les coordonnées géographiques de l'utilisateur (latitude et longitude). Elle peut également afficher une carte avec un marqueur indiquant l'emplacement de l'utilisateur selon ses coordonnées.

• Les traitements Web sont des scripts qui s'exécutent en arrière-plan, qui effectuent des calculs ou d'autres actions rendant l'interface utilisateur plus réactive.

• L'API WebSocket vous permet d'ouvrir une connexion permanente entre un client et un serveur Web et d'échanger du texte et des fichiers binaires. Les WebSockets permettent de réduire le volume de traitement nécessaire pour les communications en temps réel.

• Vous pouvez utiliser l'API de fichier pour télécharger un ou plusieurs fichiers à partir d'un disque local ou du stockage local d'un appareil vers un serveur distant. Vous avez également la possibilité d'afficher des fichiers image téléchargés dans une application Web.

• L'environnement d'exécution de Windows permet aux développeurs d'accéder aux ressources en mémoire, mais aussi au matériel à l'aide des API.

• Web Storage HTML5 inclut le stockage local (pour les données persistantes) et le stockage de session (pour les données temporaires).

• Les applications indépendantes de la plate-forme s'exécutent sur différents systèmes d'exploitation de bureau et mobiles et les applications indépendantes du périphérique sont indépendantes de l'appareil. JavaScript vous permet d'accéder aux API Windows Runtime pour les périphériques matériels.

Compléter l’espace videComplétez les phrases suivantes en écrivant le ou les mots corrects dans les espaces prévus à cet effet. 1. L'action d'une application en réponse à un mouvement s'appelle un événement

__________. 2. Les données __________ fournissent des données d'emplacement brutes, telles que la

longitude et la latitude ou les mètres. 3. Les __________ désignent une API qui permet d'exécuter des scripts en arrière-plan

comme threads parallèles. 4. L'API __________ offre une communication en duplex intégral (dans les deux sens)

via un seul socket sur Internet. 5. L'API _______permet à un navigateur ou à une application de télécharger des fichiers

dans l'espace de stockage local vers un serveur distant sans l'aide d'un plug-in. 6. Un programme ou une interface qui exécute un logiciel produisant des résultats

semblables sur différents périphériques est aussi appelé ____________________. 7. Un __________ est un périphérique qui mesure l'accélération, désignant un

changement de vitesse au cours d'une période. 8. Un écran tactile de type __________ est composé de plusieurs couches ; la couche

supérieure fléchit lorsque vous appuyez dessus et touche la couche située dessous. Des capteurs détectent la pression, ce qui permet d'identifier la partie de l'écran sur laquelle l'utilisateur a appuyé.

9. Un _______ est un type de données qui peut stocker des données binaires, comme les images ou les fichiers multimédias.

10. Comet et d'autres technologies apparentées de type « push » ont adopté __________, processus dans lequel un navigateur contacte un serveur Web régulièrement (parfois en permanence) pour vérifier si de nouvelles informations sont disponibles pour être présentées à l'utilisateur.


266 | Leçon 10

Questions à choix multiples

Entourez la lettre correspondant à la meilleure réponse.

1. Quel type d'écran tactile nécessite des propriétés conductrices ?a. Capacitifb. Résistifc. Électroniqued. Aucune des réponses ci-dessus

2. En JavaScript, parmi les propositions suivantes, laquelle contient une référence à tous les points de contact avec un écran tactile ?a. Objet tactileb. Identificateurc. TactileListed. Manifeste

3. Quelle API définit une interface qui fournit la localisation d'un périphérique, généralement à l'aide des coordonnées de latitude et de longitude ?a. WebSocketb. Géolocalisationc. Traitements Webd. File

4. Parmi les propriétés suivantes, laquelle n'est pas utilisée par les traitements Web ?a. setTimeoutb. setIntervalc. XMLHttpRequestd. getElementById

5. Parmi les propositions suivantes, lesquelles illustrent bien les applications Web qui profitent des WebSockets ? (Choisissez toutes les réponses applicables.)a. Conversation instantanéeb. Carnet d'adressesc. Jeu en ligne multijoueurd. Cotations boursières

6. Quelle API permet de télécharger des images et d'afficher immédiatement les vignettes dans les documents HTML ?a. WebSocketb. Géolocalisationc. Traitements Webd. File

7. Quelle API utilise ws au lieu de http pour référencer les URL ?a. WebSocketb. Géolocalisationc. Traitements Webd. File

8. Quelle méthode permet aux utilisateurs de conserver des volumes de données relativement importants entre deux sessions du navigateur ?a. localStorageb. sessionStoragec. postMessaged. addEventListener


9. Quelle méthode permet d'accéder au flux de données de la caméra et du microphone du périphérique ?a. getUserMediab. sessionStoragec. addEventListenerd. getCameraSound

10. Quel capteur d'un périphérique mobile permet de détecter la force de gravité et d'autres forces résultant du mouvement de l'appareil ?a. GPSb. Boussolec. Accéléromètred. Gyroscope

Vrai/FauxEntourez la lettre V si l'affirmation est vraie ou la lettre F si elle est fausse.V F 1. Le groupe W3C a été fondé par Apple, Mozilla Foundation et Opera Software

pour définir et documenter la spécification HTML5.V F 2. En JavaScript, l'objet tactile détecte les entrées sur des périphériques à interaction

tactile. V F 3. Les données civiles représentent les données d'emplacement qui sont plus intelligibles

pour l'homme, comme une carte ou une adresse, par exemple 637 Park Street.V F 4. Les développeurs testent leurs applications et les utilisateurs exécutent les

applications dans l'environnement WinRT.

V F 5. Le mouvement d'appui simple ou prolongé est l'équivalent d'un clic gauche de la souris.


Scénario 10-1 : Présentation des mouvementsJérôme est un collègue de travail et développeur en herbe qui « bidouille » une application à interaction tactile. Il voudrait connaître le mouvement qui simule un clic de souris. Que pouvez-vous lui dire ?

Scénario 10-2 : Collecte des données d'emplacement des clientsLa société Austin Energy and Light voudrait que ses clients se connectent sur leur site Web et utilisent une application qui indique avec précision le lieu où ils se trouvent. L'application doit être très réactive à l'interaction avec l'utilisateur et doit laisser aux utilisateurs le soin de continuer à remplir le formulaire. Les données d'emplacement seront envoyées aux périphériques de poche qui seront utilisés par des techniciens sur le terrain pour repérer rapidement le domicile et le lieu de travail des clients. Quelles technologies proposez-vous à la société ?


Scénario 10-3 : Présentation du mouvement périphériqueVong est développeur pour un grand fabricant de smartphones. Elle a récemment été affectée à un projet sur le mouvement des périphériques au sein d'une équipe de développement. Elle voudrait comprendre rapidement la différence entre les capteurs de l'accéléromètre, de la boussole et du gyroscope. Que pouvez-vous lui dire ?

Scenario 10-4 : Exploration de l'API Web StorageVong revient avec une nouvelle question sur le stockage Web. Elle pense que le stockage Web désigne l'enregistrement des fichiers avec un service de cloud sur le Web, mais elle ne voit pas très bien le lien avec son projet smartphone. Comment pouvez-vous lui expliquer clairement le concept de stockage Web ?

268

Annexe A

Examen 98-375 Notions fondamentales sur le développement d'applications HTML5

Objectif de l'examen Numéro de la compétence Numéro de la leçon

Gestion du cycle de vie d'une application

Connaissance des principes fondamentaux de la plateforme 1.1 1

Gestion de l'état d'une application 1.2 1

Débogage et test d'une application HTML5 à interactions tactiles 1.3 1

Publication d'une application dans un magasin en ligne 1.4 1

Création d'une interface utilisateur avec HTML5

Choisir et configurer les balises HTML5 pour afficher le texte 2.1 2

Choisir et configurer les balises HTML5 pour afficher les graphiques 2.2 2

Choisir et configurer les balises HTML5 pour lire les fichiers multimédias 2.3 2

Choisir et configurer les balises HTML5 pour organiser le contenu et les 2.4 3 formulaires

Choisir et configurer les balises HTML5 pour les entrées et la validation 2.5 3

Mise en forme de l'interface utilisateur à l'aide de CSS

Comprendre les principes de base des feuilles de style CSS 3.1 4

Organiser le contenu d’une interface utilisateur avec CSS 3.2 5

Gérer l’enchaînement du texte avec CSS 3.3 6

Gérer l'interface graphique avec CSS 3.4 7

Coder à l'aide de JavaScript

Gérer et assurer la mise à jour de JavaScript 4.1 8

Mettre à jour l'interface utilisateur avec JavaScript 4.2 8

Coder les animations avec JavaScript 4.3 9

Accéder aux données avec JavaScript 4.4 9

Répondre à l'interface tactile 4.5 10

Coder des API HTML5 supplémentaires 4.6 10

Accéder aux ressources des périphériques et du système d'exploitation 4.7 10

Index

269

AÀ espacement fixe, 94–95Accéléromètre, 263Accès aux données, 225–227Adapté au Web, 166Affichage

ajouter un élément à, 210masquer des parties de, en fonction de l’action de

l’utilisateur, 206–208Affichage, 22Ajout d’éléments, 209–211

pour afficher, 210Analyse, 227–229Angles arrondis, création, 160–161

boîte avec, création, 162–163Animation interactive, 218–219Animations, 173–179, Voir aussi Zone de dessin

3D, 173–179à l’aide de CSS, 178–179codage à l’aide de JavaScript, 216–219création, 216–219

animation interactive, 218–219animations simple, 216–219

API de fichier pour les téléchargements de fichiers, 258–259interfaces pour accéder à, 258

API Web Worker, 252–255création, 254–255exécution, 254–255

API WebSockets, 255–258événements principaux associés à, 255interrogation, 255test de compatibilité de navigateur, 256–258

API XMLHttpRequest, 225Application dynamique, 190Applications de tablette tactile/tablette, compétences et contenus

HTML5 pour, 13Attribut autofocus, 79Attribut email, 78Attribut pattern, 78Attribut required, 78Attributs d’entrée, 77–81

attribut autofocus, 79attribut email, 78attribut pattern, 78attribut required, 78texte de l’espace réservé, 78

Attributs globaux, 24, 54Attributs, 23–24, 33, Voir aussi Attributs d’entrée

attributs globaux, 24Autorisations d’identité, 10

BBalisage de base, HTML, 22–29Balisage sémantique, 54Balises audio, 4, 47–49

élément audio, 47utilisation, 48–49

Balises pour afficher des graphiques, 34–44, Voir aussi Support : balises HTML5 pour la lecture

Balises HTML5 pour afficher, choisir et configurer, 34–44éléments figcaption, 35–38éléments figure, 35–38image de remplacement pour les navigateurs plus anciens, 41–42image raster, 35image vectorielle, 35page Web, affichage des images dans, 37SVG, création de graphiques à l’aide de, 42–44utilisation, 215–242zone de dessin, création de graphiques avec, 38–42

Balises vidéo, 4, 45–47attributs disponibles, 45compression vidéo, 46compression, 46élément vidéo, utilisation, 46–47

Balises vides, 22Balises, 22

utiliser pour ajouter une structure au document HTML, 55–64Bibliothèque, 197–199Blob, 256Boîte flexible/Modèle de boîte Boîte flexible, 113

boîte flexible avec élément flexbox, création, 119direction des éléments enfants dans une boîte flexible,

modification, 122–126éléments flexbox, 114, 116–128

avec la fonction flex, création, 120–122mise à l’échelle proportionnelle dans, 116–122ordre de boîte flexible, inversion, 124–126pour l’alignement, la direction et l’orientation du

contenu, 114–128pour les dispositions simples, 112–114propriété flex-order, 127utilisation, 116–128

Bordure, 112

CCache d’application (AppCache), 231–232

pour les fichiers hors connexion, 11–12Cache, 231, Voir aussi Cache de l’application (AppCache)

manifeste de cache, 11Cadran d’horloge avec aiguilles qui bougent, création, 220–222

270 | Index

Cadre englobant, 102Calculatrice dans le navigateur en utilisant JavaScript, 199–201Caméra, 263–264Capacités matérielles, 264

accès, 262–264indépendant de la plateforme, 262indépendant du périphérique, 263

Classe, 93Codec, 45–46Colonnes

création, 146–150column-count, 146column-gap, 146column-rule, 146disposition multicolonne, 146, 149trois colonnes, 148

pour optimiser la lisibilité du texte, 145–152<Command> élément dans HTML5, 31Compatibilité avec les navigateurs, WebSocket pour tester, 256–258Compatibilité de l’API de fichier, 259Compression vidéo, 46Compression, 46Conteneur d’applications, 8Conteneurs, enchaînement du contenu via, 140–145Contenu, 112

balises HTML5 pour organiser, 54–72conteneurs, 140débordement, gestion, 102–105des éléments, 208–209

contenu visible à l’écran, 208–209mise à jour, 208–209

et style, séparation, 91–92flux, gestion, 96–98

débordement de contenu, gestion, 102–105débordement masqué, 104–105débordement visible, 104–105flux de bloc, 96flux inclus, 96

source, 140Cookies, 11, 235–237Coupure de mots automatique, 152Coupure de mots, 150–152

coupure de mots automatique, 152pour optimiser la lisibilité du texte, 145–152

ms-hyphenate-limit-chars, 150ms-hyphenate-limit-lines, 151ms-hyphenate-limit-zone, 150

Création de formes, à l’aide de la zone de dessin, 39–40contour d’une forme, 40–41

Création de formulaire, 77–81formulaire Web simple, 79–81

Création d’éléments animés à l’aide de la zone de dessin, 222–224Cycle de vie de l’application, gestion, 1–20, Voir aussi HTML5

AppCache pour les fichiers hors connexion, 11–12états de l’application, présentation et gestion, 10–12

état de l’application, 11état de session, 11informations d’état persistantes, 11localStorage, 10

sessionStorage, 10stockage des données d’état à l’aide du stockage local et de

session, 11–12interfaces tactiles et mouvements, 12–13Place de marché Windows Store, 16–17Principes fondamentaux de la plateforme, 2–10

autorisations d’identité, 10conteneur d’applications, 8empaquetage, exploration, 7–10environnement d’exécution, exploration, 7–10exemples d’applications, exploration, 8–10informations d’identification, 10interface de programmation d’application (API), 7interface utilisateur Windows, 3jeux d’autorisations, 10package d’application, 8processus hôte, 7–8Windows Runtime (WinRT), 7

Publication d’une application dans un magasin en ligne, 16–17

DDébogage, 13–16Débordement de défilement, 102–104Débordement masqué, 104–105Débordement visible, 104–105Déclarations, 92–94Dégradé linéaire, 164Dégradé radial, 165Dégradés d’arrière-plan, 164–166Dégradés, 164–166

dégradé linéaire, 164 dégradé radial, 165dégradés d’arrière-plan, 164–166

application à un cadre, 165–166Désapprobation, éléments HTML5, 32–33

<acronym>, 33<applet>, 33<basefont>, 33<big>, 33<center>, 33<dir>, 33<font>, 33<frame>, 33<frameset>, 33<noframes>, 33<strike>, 33<tt>, 33effets des éléments désapprouvés, 34

Direction des éléments enfants dans une boîte flexible, modification, 122–126

Disposition en grille simple, 130Disposition multicolonne, 146Dispositions en grille, 114, 128–133

création, à l’aide de propriétés CSS pour les lignes et colonnes, 130–132

disposition en grille simple, 130–131modèles de grille, 132–133pour l’alignement, la direction et l’orientation du contenu, 128–133

Index | 271

cellules de la grille, 129éléments de la grille, 129lignes de la grille, 129suivis de la grille, 129

Doctype, 25–26Document Object Model (DOM), 7, 141Données civiques, 250Données géodésiques, 250Données, 224–229

accès, 215–242analyse, transmission, 227–229envoi et réception, 224–229objets complexes, transmission, 227–229types, 233

EÉcran tactile résistif, 244Écrans tactiles capacitifs, 244Effet de flou gaussien, 180–182Élément article, 61Élément aside, 61–64

ajout au document HTML, 63–64Élément audio, 47Élément block-level, 113Élément datalist, 79Élément flottant positionné, 152Élément footer, création de documents HTML avec, 56Élément footer, création de documents HTML avec, 6Élément menu, 72Élément nav, 59–61

ajout au document HTML, 60–61Élément section, document HTML création avec, 57–59Élément vidéo, 45Éléments figcaption, 35–38Éléments figure, 35–38Éléments individuels, positionnement, 99–102Éléments inline, 113Éléments, 23, Voir aussi Contenu : des éléments

accès, 201–203affichage, 206–208ajout d’éléments, 209–211audio, 47localisation, 201–203masquer, 206-208mise à jour du contenu de, 208–209vidéo, 45

Encapsulation, 226Entités, 24–25Entrée de formulaire, 73Entrée, balises HTML5 pour, 72–83Environnement de développement intégré (IDE), 88, 190Environnement d’exécution (RTE), 7Espace de noms, 8État de l’application, 11État de session, 11Événement devicemotion, 263Événement tactile, 245–249Événements, écoute et réponse à, 203–206

Exemples d’applications, exploration, 8–10Extensible Markup Language (XML), 42

FFamille de polices sans serif, 94–95Feuilles de style en cascade (CSS), 2, 32, 87–109, 137–158,

Voir aussi Notions essentielles sur les feuilles de style en cascade CSS ; Gestion de l’interface graphique

contenu et style, séparation, 91–92création de page Web de base, 90–91CSS3, 88déclarations, 92–94flux de contenu, 87–109

gestion, 96–98outils appropriés, 88–89polices et familles de polices, 94–96

Feuilles de style en cascade (suite)débordement de défilement, 102–104gestion du flux de texte à l’aide de, 137–158

dynamiquement via des conteneurs, 140–145entre plusieurs sections, à l’aide de régions dans, 139–155flux autour d’un objet flottant, exclusions CSS dans, 152–155optimisation de la lisibilité du texte, colonnes et coupure de

mots dans, 145–152, Voir aussi Colonnes ; coupure de motsRégions CSS, implémentation Microsoft, 142–145texte qui déborde, 142

HTML et, lien entre, 89–91utilisation simple de CSS avec HTML, 89–90

positionnement, 87–109positionnement absolu, application, 100–102positionnement d’éléments individuels, 99–102positionnement flottant, application, 99–100

sélecteurs, 92–94style, 87–109

Fichier local, accès à, 229–231Fichiers, 229–233

chargement et enregistrement, 229–233fichier local, accès à, 229–231

Flux de contenu bloc, 96–98Flux de contenu inclus, 96–98Flux de contenu non contigu entre les régions, 139Flux nommé, 140Fonctionnalité matérielle indépendante du périphérique, 263Fonctions, 193

création et utilisation, 193–196fonction JavaScript, 194–195

Formes, 219–224Formulaire Web simple, création, 79–81

à l’aide de balises <p>, 81Formulaire Web, 72

création, 79–81à l’aide de balises <p>, 81ajout de champs de validation à, 83

Formulaires, 73–81balises HTML5 pour organiser, 54–72entrée de formulaire, 73

272 | Index

GGéolocalisation, codage pour capturer, 249–252

API de géolocalisation, 250Gestion de l’interface graphique à l’aide de CSS, 159–188

angles arrondis, création, 160–161propriété border-radius, 160

dégradés, 164–166effets de filtre SVG, application, 179–182

effet de flou gaussien, 180effets graphiques, création, 160–166

ombres, 161–163inclinaison 2D, 172–173inclinaison 3D 172–173mise à l’échelle 2D, 169–170rotation 2D, 171–172rotation 3D 171–172traduction 2D, 168–172transformation 2D, 167–169transformation 3D 167–169zone de dessin pour améliorer l’interface utilisateur, 182–185

Gestionnaire d’événements, 204Gestionnaire d’événements de OnLoad, 204–206Global positioning system (GPS), 263Grille pour les dispositions complexes, 112–114

HHTML sémantique, 54–55HTML5, 2–10

API, codage, 249–259pour capturer la géolocalisation, 249–252

applications de tablette tactile/tablette, compétences et contenus pour, 13

applications, 5–7conception d’interface utilisateur, 5débogage, 6, 13–16déployer, 6développement d’application, 6écriture de code, 6empaquetage, 6manifeste d’application, mise à jour, 5planification de projet, 5ressources du développeur, 4, 6–7test, 6, 13–16validation, 6

création d’interface utilisateur par, 21–52, Voir aussi Support : balises HTML5 pour la lecture

balises pour afficher des graphiques, 34–44, Voir aussi Graphiques

balises pour afficher le contenu du texte, 29–34, Voir aussi Texte

page Web simple, balisage de, 26–29valide, 26

indépendant de la plateforme, 3norme HTML5, exploration, 4nouveautés, 3–5nouvelles fonctionnalités, 4

balises audio et vidéo, 4géolocalisation, 4

Interfaces de programmation d’application (API), 4Modernizr, 4requêtes multimédias, 4zone de dessin, 4

validation du code HTML5, 14validation d’un package, 14–16

Hypertext Markup Language (HTML), 2, 22, Voir aussi HTML5affichage, 22attributs, 23–24balisage de base, 22–29balises vides, 22balises, 22–23doctype, 25–26élément, 23entités, 24–25imbrication d’éléments, 24notions essentielles de, 22–29structure de page, 22–29

Hypertext Transport Protocol (HTTP), 11

IIcône de lancement, 5Identificateurs, 195Iframes, 142Image raster, 35Image vectorielle, 35Images clés, 177Images, 219–224Imbrication d’éléments, 24Implémentation Microsoft des régions CSS, 142–145Inclinaison 2D, 172–175Inclinaison 3D 172–173Inclinaison, 172–173

2D, 172–1753D, 172–173

Indépendant de la plateforme, 3, 262Informations d’état persistantes, 11Informations d’identification, 10Interactivité, 190Interface de programmation d’application (API), 4, 7Interface utilisateur Windows, 3Interface utilisateur graphique (GUI)

zone de dessin pour améliorer, 182–185Interface utilisateur, 3

création, à l’aide de HTML5, 53–86, Voir aussi Formulaires ; Validation

à l’aide de balises, 55–64attributs d’entrée, 77–81contenu, 54-72création de formulaire, 77–81élément article, 61élément aside, 61–64élément footer, 6élément header, 56élément menu, 72élément nav, 59–61élément section, 57–59entrée, 53–86

Index | 273

formulaire Web simple, création, 79–81formulaires, 54–72HTML sémantique, 54–55listes, création à l’aide de balises, 64–72organisation, 53–86tables, création à l’aide de balises, 64–72valeurs, 77–81validation, 53–86

mise à jour en utilisant JavaScript, 199–211calculatrice intégrée au navigateur, 199–201contenu des éléments, 208–209éléments, affichage et masquage, 206–208éléments, localisation et accès, 201–203événements, écoute et réponse à, 203–206gestionnaire d’événements de OnLoad, 204–206masquage de parties de l’affichage, en fonction de l’action de

l’utilisateur, 206–208méthode getelementbyid() pour l’entrée utilisateur, 202–203

organisation du contenu à l’aide de CSS, 111–114, Voir aussi Notions essentielles sur les feuilles de style en cascade CSS

Interfaces tactiles, 12–13codage JavaScript, 243–267détection de la fonctionnalité d’écran tactile, 247–249écran tactile résistif, 244écrans tactiles capacitifs, 244réponse à, 244–249

événements de mouvement, 245liste tactile, 246objet tactile, 246principaux événements tactiles JavaScript, 246

simulateur ou émulateur d’écran tactile, 13Interrogation, 255Inversion de l’ordre des boîtes flexibles, 124–126

JJavaScript Object Notation (JSON), 228JavaScript, 189–214, 216–219

codage d’animations à l’aide de, 216–219codage, 243–267, Voir aussi Interfaces tactiles

accéléromètre, 263caméra, 263–264données civiques, 250données géodésiques, 250global positioning system (GPS), 263interrogation, 255ressources en mémoire, accès, 260–262

gestion d’un formulaire avec, 233–235jQuery, 197–199manipulation de zone de dessin avec, 220–224, Voir aussi Zone

de dessinmise à jour de l’interface utilisateur en utilisant, 199–211, Voir

aussi Interface utilisateurprogramme JavaScript à instructions multiples, 192–193programme JavaScript simple, création, 190–192utilisation dans la validation d’entrées de formulaire utilisateur,

233–235utilisation de variables dans, 196

Jeux d’autorisations, 10

autorisations d’identité, 10jQuery, 197–199

KKit de développement logiciel (SDK), 14

LLangage de balisage, 2Langage de script, 2Liste de définitions, 71Liste non triée, 69–70Liste tactile, 245–246Liste triée, 69–70

création, 72Listes

création de listes, 69–72balises dans, 64–72

élément datalist, 79liste de définitions, 71liste non triée, 69–70liste triée, 69–70

Logiciel, 190

MMarge, 112<Mark> élément dans HTML5, 31Méthode getelementbyid() pour l’entrée utilisateur, 202–203Méthodes, 189–214Mise à l’échelle proportionnelle dans une boîte flexible, 116–122Mise à l’échelle 2D, 169–170Modèles de grille, 132–133Mouvements, 12–13, 245

capture, 246-249réponse à, 246–249

Multicolonne dans CSS3, 146–147

N.NET framework, 10Notions essentielles du codage, 189–214Notions essentielles sur les feuilles de style en cascade CSS,

110–136contenu, tri et réorganisation, 126–128organisation du contenu de l’interface utilisateur, 111–114

boîte flexible pour les dispositions simples, 112–114bordure, 112contenu, 112élément block-level, 113éléments inline, 113grille pour les dispositions complexes, 112–114marge, 112modèle de boîte Boîte flexible, 113, Voir aussi entrée

individuellemodèle de disposition en grille, 114, Voir aussi Dispositions

en grille

274 | Index

préfixe du fournisseur, 111relation parent/enfant, 113remplissage, 112

OObjet flottant, création de flux de texte autour, CSS dans, 152–155

élément flottant positionné, 152exclusions CSS, 152–154

Objet tactile, 245–246Objets complexes, transmission, 227–229Ombre portée, 161Ombres, création, 161–163

boîte avec, création, 162–163h-shadow, 162ombre portée, 161v-shadow, 162

Opacité, 163–164

PPackage d’application, 8Page Web simple, 26–29

balisage de, 26–29création, 26–29

Page Web valide, 26Page Web, affichage des images dans, 37Perspective, 173–179

3D, 173–179Place de marché Windows Store, 16–17Polices et familles de polices, 94–96

famille de polices à espacement fixe, 94–95famille de polices sans serif, 95

Positionnement absolu, 100–102avec plusieurs colonnes, 101

Positionnement flottant, 99–100avec plusieurs colonnes, 99–100

Préfixe du fournisseur, 111Processus hôte, 7–8Processus, 8Programme JavaScript à instructions multiples, 192–193Propriété border-radius, 160Propriété flex-order, 127–128

RRappel, 204Récursivité, 216Régions CSS, Voir Régions, CSSRégions, CSS, 139

création, 143–145implémentation de Microsoft, 142–145

Règles, 89Relation parent/enfant, 113Remplissage, 112Ressources de périphérique et de système d’exploitation, codage

en JavaScript pour, 243–267Ressources du périphérique, accès à, 260–264Ressources du système d’exploitation, 260–264

Ressources en mémoire, accès, 260–262Rotation 2D, 171–172Rotation 3D 171–172Rotation, 171–172

rotation 2D, 171–172rotation 3D 171–172

SScalable vector graphics (SVG), 34, 42

création de graphiques à l’aide de, 42–44Image vectorielle SVG, 43–44

effets de filtre, application, 179–182flou gaussien, 181–182décalage, 181–182

utilisation de la zone de dessin au lieu de SVG, 44Sélecteurs, 92–94Séparation du contenu et du style, 91–92Service de validation du balisage, W3C, 15Sous-routines, 197Stockage de session, 10, 260

stockage des données d’état à l’aide de, 11–12Stockage des données d’état à l’aide du stockage local et de

session, 11–12Stockage local, 10, 237–239, 260–262

enregistrer dans, 238stockage des données d’état à l’aide de, 11–12

Structure de page, HTML, 22–29Support, 21–52

balises HTML5 pour la lecture, 45–49, Voir aussi Balises audio ; balises vidéo requêtes, 4, 127

TTables

création de tables, 64–69balises dans, 64–72

Test des applications HTML5, 13–16Texte de l’espace réservé, 78Texte qui déborde, 142Texte, 21–52

balises HTML5 pour afficher, choisir et configurer, 29–34<b>, 30<em>, 30<i>, 30<small>, 30<strong>, 30balises de texte d’une page Web, modification, 30–31éléments textuels HTML 4 avec un nouveau sens ou une

nouvelle fonctionnalité, 29–31texte de remplacement pour les navigateurs plus anciens,

41–42éléments de texte non utilisés en HTML5, 32–34, Voir aussi

désapprobation, éléments HTML5gestion des flux à l’aide de CSS, 137–158, Voir aussi Feuilles de

style en cascade (CSS)nouveaux éléments de texte dans HTML5, 31–32

<command>, 31<mark>, 31

Index | 275

<time>, 31utilisation de l’élément mark, 32

<Time> élément dans HTML5, 31Traduction, 168–172

2D, 168–169Transformation 2D, 167–169Transformation 3D 167–169Transformations, 167–169

2D, 167–1693D, 167–169

Transitions, 173–1793D, 173–179création à l’aide de CSS, 176–178

Transparence, 163–164Typographie, 166–167

UUniform resource locator (URL), 47

VValeurs, 77–81Validation automatique, 82Validation côté client, 82Validation côté serveur, 82Validation d’entrées de formulaire utilisateur, utilisation de

JavaScript dans, 233–235Validation du code HTML5, 14Validation d’un package, 14–16Validation, 81–83, 203

ajout de champs au formulaire Web, 83

balises HTML5 pour, 72–83validation automatique, 82validation côté client, 82validation côté serveur, 82

Variable, 195dans le programme JavaScript, 196

WWeb Hypertext Application Technology Working Group

(WHATWG), 249Web Open Font Format (WOFF), 166–167Windows Runtime (WinRT), 7, 260World Wide Web Consortium (W3C), 2

service de validation du balisage, 15service de validation du CSS, 15–16

WWAHost.exe, 8

ZZone de dessin

au lieu de SVG, 44création de graphiques avec, 38–42

contour d’une forme, 40–41création de formes, 39–40notions de base de la zone de dessin, 39–40

manipulation avec JavaScript, 220–224création de cadran d’horloge, 220–222création d’éléments animés, 222–224élément canvas, 220

objet de zone de dessin, amélioration, 184–185

matrice d'objectifs d'examen...javascript. html et css, par exemple, sont en grande partie...

Documents