SlideShare uma empresa Scribd logo
1 de 221
0
0
Table des matières
Module 1 – Brève introduction avant de commencer à coder............................................................... 5
Les moteurs de rendu.......................................................................................................................... 5
Histoire du JavaScript.......................................................................................................................... 7
Activer l'exécution de JavaScript dans le navigateur .......................................................................... 8
Google Chrome................................................................................................................................ 8
Firefox.............................................................................................................................................. 9
Internet Explorer 10 et supérieur.................................................................................................. 10
Microsoft Edge .............................................................................................................................. 11
Tester si JavaScript est activé............................................................................................................ 11
Editeurs de code HTML/XHTML/CSS/JavaScript ............................................................................... 12
Débogage dans le navigateur............................................................................................................ 13
A savoir avant de commencer à coder.............................................................................................. 14
Module 2 - Le langage JavaScript .......................................................................................................... 15
Squelette standard............................................................................................................................ 15
Où insérer le code JavaScript ?.......................................................................................................... 15
Des commentaires dans le code........................................................................................................ 20
Une fonction dans une balise <script>.............................................................................................. 20
Gestion des exceptions ..................................................................................................................... 23
Mise en place d'un gestionnaire d'événements................................................................................ 28
Variables et types de données .......................................................................................................... 31
Conversions de types ........................................................................................................................ 32
Fonction eval()............................................................................................................................... 32
Fonction parseInt()........................................................................................................................ 33
Fonction parseFloat() .................................................................................................................... 33
Module 3 – Tout d'horizon du langage JavaScript ................................................................................ 36
Opérateurs et expressions ................................................................................................................ 36
Opérateurs d’affectation............................................................................................................... 36
Opérateurs arithmétiques............................................................................................................. 37
Opérateurs relationnels et logiques.............................................................................................. 37
Opérateurs dédiés aux chaînes de caractères............................................................................... 38
Opérateurs d’incrémentation........................................................................................................ 39
Opérations intervenant au niveau des bits................................................................................... 41
L'instruction de contrôle if... else [.. else] ......................................................................................... 41
Instructions répétitives...................................................................................................................... 45
1
L'instruction for ............................................................................................................................. 45
Un cas particulier de l'instruction for................................................................................................ 49
L'instruction while............................................................................................................................. 51
Quelques astuces à connaitre sur les boucles................................................................................... 51
Définir une boucle infinie.............................................................................................................. 51
L'instruction continue.................................................................................................................... 51
L'instruction break......................................................................................................................... 56
Définition d'un tableau...................................................................................................................... 56
Module 4 – Programmation objet en JavaScript................................................................................... 63
Les objets par défaut de JavaScript................................................................................................... 63
L'objet Date ....................................................................................................................................... 63
L'objet Math ...................................................................................................................................... 66
Utilisation d'un objet par défaut....................................................................................................... 67
L'objet String...................................................................................................................................... 70
Exemple 1 - Caractères de grande taille et de petite taille : méthodes big() et small()................ 71
Exemple 2 - Attributs gras, italique et barré : méthodes blink(), bold(), italics() et strike(). ........ 71
Exemple 3 - Extraction de caractères : méthode charAt(). ........................................................... 71
Exemple 4 - Caractères non proportionnels : méthode fixed()..................................................... 72
Exemple 5 - Modification de la taille des caractères : méthode fontsize()................................... 72
Exemple 6 - Position d'une sous-chaîne dans une chaîne : méthodes indexOf() et lastIndexOf().
....................................................................................................................................................... 72
Exemple 7 - Définition d'un lien hypertexte : méthode link()....................................................... 72
Exemple 8 - Caractères en indice et en exposant : méthodes sub() et sup()................................ 72
Exemple 9 - Extraction d'une sous-chaîne : méthode substring()................................................. 73
Exemple 10 - Caractères majuscules et minuscules : méthodes toLowerCase() et toUpperCase().
....................................................................................................................................................... 73
Les expressions régulières – l'objet RegExp...................................................................................... 73
Les objets liés au navigateur ............................................................................................................. 77
L'objet history.................................................................................................................................... 80
L'objet location.................................................................................................................................. 82
L'objet navigator................................................................................................................................ 84
Sur Internet Explorer 11................................................................................................................ 85
Sur Microsoft Edge ........................................................................................................................ 86
Sur Google Chrome ....................................................................................................................... 86
Sur Firefox...................................................................................................................................... 86
L'objet document .............................................................................................................................. 87
2
Le tableau elements[]........................................................................................................................ 91
L'objet window.................................................................................................................................. 93
Extension des objets prédéfinis......................................................................................................... 96
Définition d'objets avec la classe Object........................................................................................... 99
Définition d'objets avec la notation JSON....................................................................................... 104
Module 5 - Evénements et données ................................................................................................... 107
Accès aux éléments du DOM........................................................................................................... 107
La fonction document.getElementById() .................................................................................... 107
Exercices sur la fonction getElementById ....................................................................................... 110
Associer dynamiquement un événement à un élément................................................................. 116
Passage de paramètres littéraux dans la fonction événementielle ................................................ 118
Passage du mot-clé this dans une fonction..................................................................................... 121
Passage du mot-clé event dans une fonction ................................................................................. 123
Effet Rollover................................................................................................................................... 128
Version moderne du gestionnaire d'événements........................................................................... 133
Suppression d'un gestionnaire d'événements................................................................................ 135
Redirection en JavaScript ................................................................................................................ 138
Cookies ............................................................................................................................................ 138
Formulaires - Validation en HTML5................................................................................................. 139
Validation de formulaires en JavaScript.......................................................................................... 143
Module 6 - Interaction JavaScript CSS................................................................................................. 148
Accès aux propriétés CSS en JavaScript........................................................................................... 148
Ajouter/supprimer une classe......................................................................................................... 151
L'objet styleSheets........................................................................................................................... 154
Module 7 - AJAX .................................................................................................................................. 159
Le concept d’échanges asynchrones avec HTTP ............................................................................. 159
Vocabulaire jQuery.......................................................................................................................... 159
Installation du serveur WampServer............................................................................................... 161
Réagir au clic sur un bouton en jQuery........................................................................................... 165
Charger un fichier avec AJAX........................................................................................................... 166
Charger une partie d'un fichier ....................................................................................................... 171
- Requête GET.................................................................................................................................. 173
Requête POST.................................................................................................................................. 178
Charger des données JSON.............................................................................................................. 182
La méthode $.ajax()......................................................................................................................... 188
Module 8 – Les API JavaScript............................................................................................................. 192
3
PI File ............................................................................................................................................... 192
Drag and Drop ................................................................................................................................. 195
Géolocalisation................................................................................................................................ 199
Premier épisode : capture des coordonnées et affichage au format texte ................................ 199
Deuxième épisode : Capture de la longitude et de la latitude et affichage sur une carte.......... 201
Troisième épisode : capture d'une position en mouvement et affichage sur une carte ............ 204
Local Storage ................................................................................................................................... 205
Web Workers................................................................................................................................... 209
WebGL............................................................................................................................................. 211
Première étape - Définition de la scène...................................................................................... 211
Deuxième étape - Définition de la caméra.................................................................................. 212
Troisième étape - Définition du renderer ................................................................................... 212
Quatrième étape - Définition des éléments à afficher................................................................ 212
Animation du cube ...................................................................................................................... 215
Utilisation d'une texture.............................................................................................................. 217
Pour terminer...................................................................................................................................... 219
4
Je m'appelle Michel Martin et je suis instructeur JavaScript en entreprise.
Ce livre va vous montrer comment utiliser le langage JavaScript pour dynamiser vos pages Web. Il
s'adresse à un public débutant et intermédiaire. Lorsque vous l'aurez entièrement lu, vous saurez
comment :
 Utiliser les instructions du langage JavaScript. Vous pourrez ainsi écrire toutes sortes de codes
pour répondre à toutes sortes de situation. De la validation locale de formulaires à l'utilisation
d'API en passant par la modification du DOM, et bien d'autres sujets encore.
 Déboguer votre code pour trouver rapidement l'instruction ou les instructions qui bloquent
son exécution ou provoquent des comportements que vous n'avez pas prévus.
 Accéder aux objets par défaut du langage JavaScript et créer vos propres objets. Tout en
améliorant les possibilités du langage, vous pourrez définir des objets qui correspondent
exactement à ce dont vous avez besoin dans vos projets personnels ou ceux développés dans
votre entreprise.
 Créer du code pour réagir aux événements de l'utilisateur et du système. Ce code permettra
par exemple de réagir aux clics souris, aux frappes sur le clavier, au redimensionnement de la
fenêtre du navigateur ou encore à l'horloge système. Lorsqu'un tel événement se produira, le
contenu de la page pourra changer de façon dynamique pour améliorer l'expérience de
l'utilisateur.
 Interagir avec un programme serveur en AJAX. Pour être le plus efficace possible, les échanges
AJAX se feront via la bibliothèque jQuery.
 Utiliser des API pour faciliter vos développements : drag and drop, géolocalisation, local
storage, web workers, 3D avec WebGL.
Il ne s'agit là que de quelques-uns des sujets abordés dans cette formation. Que vous débutiez en
programmation JavaScript ou que vous ayez déjà une certaine expérience, vous y trouverez un
ensemble de techniques qui simplifieront vos futurs projets, raccourciront vos temps de
développement et augmenteront sa pérennité.
Tout au long de l'ouvrage, de nombreux exercices vous sont proposés. Pour bien apprendre à
programmer en JavaScript, vous devez jouer le jeu et vous appliquer à résoudre chacun des exercices
proposés. Rassurez-vous, la difficulté ira croissante. Et vous serez en mesure de résoudre les premiers
exercices même si vous n'avez actuellement aucune connaissance en JavaScript.
Je vous souhaite une bonne lecture et beaucoup de découvertes toutes aussi passionnantes les unes
que les autres !
5
Module 1 – Brève introduction avant de commencer à coder
Avant de vous lancer dans la programmation, je vous propose de prendre un peu de temps pour
comprendre comment fonctionnent les navigateurs Web, pour savoir comment activer et désactiver
l'exécution de JavaScript dans un navigateur, tester si votre code pourra s'exécuter dans un navigateur
quelconque. Vous découvrirez également un éditeur de code très performant et entièrement gratuit.
Nous l'utiliserons tout au long de cette formation. Vous verrez également comment déboguer le code
JavaScript ainsi que quelques détails qu'il est bon d'avoir en mémoire lorsqu'on désire coder en
JavaScript.
Les moteurs de rendu
Avant de commencer votre apprentissage du langage JavaScript, je vais vous montrer pourquoi tous
les navigateurs ne se comportent pas de la même façon lorsqu'ils exécutent un même code composé
d'instructions HTML, CSS et JavaScript.
En plus de leur interface, les navigateurs se distinguent par leur "moteur de rendu". C'est lui qui
détermine comment sont interprétées puis affichées les instructions HTML, CSS et JavaScript. Pour en
savoir plus à ce sujet, consultez les pages Wikipédia relatives aux navigateurs Web classés par moteur
de rendu. Ces pages sont accessibles sur http://goo.gl/octwhx.
Remarque
Une petite remarque sur ce lien. Comme vous l'avez peut-être constaté, ce lien relativement court
s'est transformé en une URL bien plus longue lorsque vous avez cliqué dessus. . Il a été obtenu en allant
sur le site http://goo.gl. Si vous prononcez "goo.gl" à voix haute sans le point, vous aurez compris que
le géant Google est à l'origine de ce site. Goo.gl est un réducteur d'URL. Il permet de compacter les
URL afin qu'elles soient plus faciles à saisir. Je l'utiliserai systématiquement dans cette formation.
Pour raccourcir une URL, il suffit d'aller sur http://www.goo.gl, de la coller dans la zone de texte et de
cliquer sur Shorten URL.
Revenez à la page Wikipédia. Comme vous pouvez le voir, il existe essentiellement cinq moteurs de
rendu : Gecko, KHTML, Presto, Trident et Webkit.
6
Cliquez sur le lien Gecko. Parmi les illustres inconnus qui s'affichent sur la nouvelle page, vous pouvez
voir Firefox. Le navigateur Firefox utilise donc le moteur de rendu Gecko.
Revenez à la page précédente et cliquez sur le lien KHTML. Les navigateurs qui utilisent ce moteur de
recherche ne sont pas couramment utilisés sous Windows.
Revenez à la page précédente et cliquez sur le lien Presto. Comme vous le voyez, le navigateur Opera
utilise le moteur de rendu Presto.
Revenez à la page précédente et cliquez sur le lien Trident. Le navigateur Internet Explorer utilise le
moteur de rendu Trident.
Revenez à la page précédente et cliquez sur le lien Webkit. Le navigateur Google Chrome utilise le
moteur de rendu Webkit. Bien qu'il ne soit pas listé sur cette page, le nouveau navigateur Microsoft
Edge, utilise également le moteur de rendu Webkit. En choisissant d'abandonner le moteur Trident et
en adoptant le moteur Webkit, Microsoft tente une opération de séduction auprès de ses utilisateurs
en laissant derrière lui un navigateur qui avait une mauvaise image auprès de beaucoup d'utilisateurs
et de développeurs Web. Si votre ordinateur est équipé de Windows 10, Microsoft Edge est installé
par défaut. Je ne sais pas ce que vous en pensez, mais pour ma part, je trouve ce nouveau navigateur
digne d'intérêt…
Les trois navigateurs vedettes utilisent donc trois moteurs de rendu différents : Gecko pour Firefox,
Webkit pour Google Chrome et Microsoft Edge et Trident pour Internet Explorer. Etant donné que
7
Microsoft tente de remplacer le vieillissant Internet Explorer par son tout nouveau Microsoft Edge, le
monde du Web sur PC sera donc rendu avec les moteurs Gecko et Webkit.
Nous allons maintenant nous intéresser à la compatibilité de la norme ECMAScript avec les moteurs
de rendu Gecko et Webkit. Pour cela, rendez-vous sur l'URL raccourcie http://goo.gl/CQ6SMi :
Dans ce livre, nous utiliserons la version 5 d'ECMAScript, c'est-à-dire la version actuellement la plus
commune. Comme vous pouvez le constater, cette version est bien compatible avec la plupart des
moteurs de rendu. En ce qui concerne le contenu de ce cours, tout ce qui sera dit fonctionnera à 100%
avec les navigateurs Google Chrome, Firefox et Microsoft Edge.
Histoire du JavaScript
JavaScript est un langage objet interprété dont les instructions sont stockées en clair dans des pages
HTML. Son accès est très simple pour les non-programmeurs. Avec cette formation, vous allez
apprendre à intégrer un code JavaScript dans vos pages Web. Vous pourrez, par exemple, animer
textes et graphiques et réagir aux actions de l'utilisateur telles que clic sur une zone, déplacement de
la souris, etc..
JavaScript a été créé en 1995 par Brendan Eich pour Netscape sous le nom ECMAScript. Il est apparu
en 1996 dans le navigateur Netscape. Les différentes versions du langage JavaScript sont basées sur
ECMAScript :
• ES 1 et ES 2 sont les prémices du langage JavaScript ;
• ES 3 (sorti en décembre 1999), est fonctionnel sur tous les navigateurs, sauf sur les vieilles
versions d'Internet Explorer ;
• ES 4 a été abandonné en raison de modifications peu appréciées des développeurs ;
• ES 5 (sorti en décembre 2009) est la version actuellement la plus utilisée ;
8
• ES 6 (sortie en Juin 2015), apporte des fonctionnalités complémentaires demandées par les
développeurs (classes, modules, boucles for/of, générateurs, etc.) ;
• ES 7 est actuellement en cours de conception.
Cette formation portera sur la version 5 d’ECMAScript.
Activer l'exécution de JavaScript dans le navigateur
Pour que vos scripts JavaScript puissent s’exécuter dans le navigateur, il est nécessaire que l’exécution
de JavaScript soit activée dans le navigateur.
Ce livre va vous montrer comment activer/désactiver JavaScript dans Google Chrome, Firefox et
Internet Explorer, et vous donner un script permettant de tester si JavaScript est activé.
Google Chrome
1. Cliquez sur l'icône Personnaliser et contrôler Google Chrome, dans l'angle supérieur droit de
la fenêtre et choisissez Paramètres dans le menu.
2. Tout en bas de la page, cliquez sur le lien Afficher les paramètres avancés.
3. Sous Confidentialité, cliquez sur le bouton Paramètres de contenu.
4. Une boîte de dialogue s'affiche. Sous JavaScript, choisissez une des deux options pour
autoriser ou interdire l'exécution de JavaScript.
5. Cliquez sur OK pour valider votre choix, fermez le navigateur et rouvrez-le pour prendre en
compte le nouveau réglage.
9
Firefox
1. Dans la barre d’adresse du navigateur, tapez about:config et appuyez sur la touche Entrée du
clavier.
2. Si le message "Attention, danger" s'affiche, cliquez sur Je ferai attention, promis !
3. Dans la zone de texte Rechercher, tapez javascript.enabled pour accéder rapidement à ce
paramètre.
4. Double-cliquez sur la ligne javascript.enabled pour modifier la valeur booléenne qui lui est
attribuée. JavaScript sera activé si la valeur true est affectée à ce paramètre. Il sera désactivé
dans le cas contraire.
5. Fermez le navigateur et rouvrez-le pour prendre en compte le nouveau réglage.
10
Internet Explorer 10 et supérieur
1) Dans le menu du navigateur, cliquez sur l'icône Outils (la roue crantée, en haut et à droite de
la fenêtre) et sélectionnez Options Internet.
2) Dans la boîte de dialogue Options Internet, sélectionnez l'onglet Sécurité.
3) Cliquez sur Internet dans le premier groupe d'options, puis sur Personnaliser le niveau dans
le deuxième.
4) La boîte de dialogue Paramètres de sécurité – Zone Internet s'affiche. Dans la zone de liste
centrale, trouvez l'entrée Script, déplacez-vous un peu plus vers le bas et choisissez Activer,
Demander ou Désactiver sous Scripts ASP en fonction de l'effet recherché.
5) Validez en cliquant sur OK, cliquez sur Oui dans la boîte de dialogue Avertissement, cliquez
sur OK et redémarrez le navigateur pour prendre en compte le nouveau réglage.
11
Microsoft Edge
JavaScript est activé par défaut. Il n'est pas possible de le désactiver depuis l'application.
Tester si JavaScript est activé
Pour détecter si JavaScript est désactivé, vous allez définir un bloc <noscript> </noscript>
entre les balises <body> et </body> d'un document HTML. Ajoutez ces instructions dans un
document HTML5 minimal :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NoScript</title>
</head>
<body>
<noscript>
Pour accéder à toutes les fonctionnalités de cette page, vous
devez activer JavaScript
</noscript>
12
</body>
</html>
Si le texte inséré entre les balises <noscript> et </noscript> s'affiche, cela signifie que
l'exécution de code JavaScript est désactivée dans le navigateur. Vous pouvez alors proposer un lien
qui redirige l'utilisateur vers une page de votre site dans laquelle sont données les instructions
nécessaires pour activer JavaScript dans les navigateurs les plus courants.
Editeurs de code HTML/XHTML/CSS/JavaScript
La saisie du code HTML peut se faire dans un simple éditeur de texte, comme le Bloc-Notes de
Windows. Mais vous lui préfèrerez un éditeur de code à coloration syntaxique.
Plusieurs éditeurs de ce type sont diffusés sous la forme de freewares. Vous utiliserez par exemple :
 NotePad ++, que vous pouvez télécharger en vous rendant sur la page https://notepad-
plus-plus.org/fr/.
Ou encore :
 Sublime Text 2 ou 3, que vous pouvez télécharger en vous rendant sur les pages
http://www.sublimetext.com/2 ou https://www.sublimetext.com/3.
Dans ce livre, nous allons utiliser l'éditeur Sublime Text 2 sous Windows 10. Si votre ordinateur tourne
sous OSX ou Linux, il existe également une version de l'éditeur de code pour ces systèmes.
L'ordinateur utilisé pour rédiger cet ouvrage est équipé de Windows 10 64 bits. Pour télécharger
Sublime Text 2, il suffit de cliquer sur Windows 64 bit, et d'attendre la fin du téléchargement. Le fichier
téléchargé est alors exécuté en cliquant sur Exécuter et en acceptant les options par défaut. Pour
exécuter Sublime Text 2, il suffit maintenant d'appuyer sur la touche Windows du clavier, de taper
sublime et de cliquer sur Sublime Text 2 dans la partie supérieure du menu Démarrer. Voici à quoi
ressemble la fenêtrer de l'éditeur :
13
Débogage dans le navigateur
Tous les navigateurs Web actuels intègrent un débogueur accessible avec la touche de fonction F12.
Ici, par exemple dans Microsoft Edge :
Ou encore dans Google Chrome :
14
Quel que soit le navigateur utilisé, les possibilités sont identiques. La différence se fait au niveau de
l’interface :
• L'onglet Console permet de voir les erreurs de code. Elles sont indiquées par des liens. Il suffit
de cliquer dessus pour visualiser le message d'erreur associé et accéder à la ligne
correspondante dans le navigateur. Notez cependant que le code n'est pas éditable dans le
navigateur.
• L'onglet Sources donne accès au code source de la page Web, permet de définir des points
d'arrêt et de modifier le code CSS de la page.
• Les onglets Elements et Inspecter permettent d'accéder au DOM depuis le code source et
inversement. En les utilisant, il vous suffit de cliquer sur une instruction HTML pour afficher
l'élément correspondant dans le code. Et inversement de cliquer sur un élément dans le DOM
pour afficher le bloc de code correspondant dans le navigateur.
A savoir avant de commencer à coder
Avant d'aborder le côté pratique du langage, vous devez connaître quelques détails très importants :
1. Pour inclure du code JavaScript dans une page HTML, je vous conseille de faire appel à une
bonne documentation. Outre cet ouvrage, vous trouverez de nombreux exemples sur le site
W3Schools, à l'adresse http://www.w3schools.com/js/default.asp.
2. Le langage JavaScript est "case sensitive" : si vous nommez une variable resultat, n'essayez
pas de l'initialiser ou de lire sa valeur en utilisant le nom Resultat ou RESULTAT.
3. JavaScript est un langage objet. Il utilise donc des objets pour communiquer avec le monde
extérieur. Par exemple, l'objet window correspond à la fenêtre affichée dans le navigateur, et
l'objet location à l'URL courant. Certains objets possèdent des propriétés accessibles en
lecture et/ou en écriture. A titre d'exemple, supposons qu'un formulaire comporte une zone
de texte de nom resultat. La propriété value fera référence au contenu de cette zone de
texte. Elle sera accessible en lecture et en écriture par l'expression
form.resultat.value. A chaque objet sont associées des méthodes qui facilitent sa
manipulation.
4. Lorsqu'une expression JavaScript fait référence à une chaîne de caractères qui fait elle-même
référence à une ou plusieurs autres chaînes de caractères, il convient d'alterner les guillemets
et les apostrophes. Remarquez les apostrophes autour des chaînes Texte1, Texte2 et
Texte3 dans l'exemple ci-après :
<input type = "button" value = "Affiche"
onclick = "affiche('Texte1','Texte2','Texte3')">
15
Module 2 - Le langage JavaScript
Ce module fait un tour d'horizon complet du langage JavaScript. Plusieurs pages Web composées de
codes HTML, CSS et JavaScript vont y être développées. Je vous conseille de créer un dossier facilement
accessible. Par exemple sur le bureau de Windows. Toutes les pages Web développées seront
sauvegardées dans ce dossier.
Squelette standard
Tous les exemples de cette formation seront développés à partir d'un squelette HTML5 standard. Je
vous suggère de définir un dossier spécifique à cette formation, sur le bureau de Windows ou de votre
système par exemple. Ouvrez Sublime Text 2 et définissez le fichier squelette.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
</body>
</html>
La première instruction indique au navigateur que le document utilise du code HTML5.
Les balises <html> et </html> délimitent le document HTML5
La balise <head> contient des balises à destination du navigateur. Ici, la balise <meta> définit le jeu
de caractères utilisé : utf-8. Il est universellement utilisé partout dans le monde car il permet d'afficher
les caractères spécifiques à toutes les langues. C'est également entre les balises <head> et </head>
que vous insèrerez vos feuilles de style internes et vos fonctions JavaScript. Nous y reviendrons dans
la suite de la formation.
La balise <title> définit le titre du document. Ce titre sera affiché dans l'onglet actif du navigateur.
Enfin, les balises <body> et </body> correspondent au DOM : les balises qui seront insérées ici
seront rendues dans la fenêtre du navigateur. Dans la plupart des cas, c'est également ici que vous
insèrerez votre code JavaScript.
Sauvegardez ce fichier dans le dossier de la formation. Vous l'utiliserez comme base de tous les codes
développés dans les prochains cours de cette formation.
Où insérer le code JavaScript ?
L'intégration de code JavaScript dans une page HTML peut se faire de deux façons :
 A l'aide d'une balise <script> </script>.
 En mettant en place un gestionnaire d'événements.
16
Dans le premier cas, le code est exécuté pendant le chargement de la page, à moins qu'il ne soit défini
dans une fonction. Dans le deuxième cas, il est en mesure de réagir à des événements utilisateur : clic,
focus ou perte de focus sur un contrôle, appui sur le bouton Submit dans un formulaire, etc., etc..
Pour définir du code JavaScript dans une balise <script></script>, il suffit d'insérer cette balise
entre les balises <body> et </body>. Une ou plusieurs instructions JavaScript peuvent alors être
placées entre les balises <script> et </script>.
<body>
<script>
/* Une ou plusieurs instructions JavaScript */
</script>
</body>
Lors de mes cours JavaScript en entreprise, deux questions reviennent fréquemment. J'ai pensé que
vous aussi, vous vous les poseriez.
Première question : Est-ce qu'il est possible d'avoir plusieurs balises <script></script> dans un
document HTML ?
Oui, tout à fait. Le code s'exécute de haut en bas. Le code JavaScript compris entre les premières balises
<script> et </script> sera donc exécuté avant le code compris entre les deuxièmes balises
<script></script>. Ainsi de suite…
Deuxième question : Vaut-il mieux placer le code JavaScript entre les balises <head> et </head> ou
entre les balises <body> et </body> ?
Eh bien … tout dépend. Le code JavaScript placé entre <head> et </head> est généralement
constitué de fonctions. Ces fonctions ne seront pas exécutées, mais placées en mémoire, prêtes à être
exécutées lorsqu'elles seront appelées. En général, il est judicieux de placer les fonctions JavaScript
entre <head> et </head> pour être sûr qu'elles sont disponibles au moment où on les appelle dans
le corps du document (entre <body> et </body>). Une autre règle générale : ne placez pas des
instructions JavaScript qui provoquent un affichage entre <head> et </head>. Cette section du
document HTML n'a pas pour vocation d'afficher quelque chose dans le navigateur. Par contre, elle
peut très bien héberger des fonctions JavaScript. Nous y reviendrons dans la suite du livre.
Nous allons aller un tout petit peu plus loin en utilisant l'instruction JavaScript document.wite().
Cette instruction écrit un texte alphanumérique dans le DOM. Si vous vous demandez ce qu'est le
DOM, sachez qu'il s'agit de l'abréviation du terme anglais Document Object Model. En d'autres termes,
le document HTML. Ou, pour faire encore plus simple, à la zone d'affichage du navigateur.
Commencez par insérer un texte entre les balises <body> et </body>. Puis, insérez une balise
<script></script> et l'instruction JavaScript document.write() à la suite :
<body>
<p>Ce texte provient de la section BODY du document HTML.</p>
<script>
document.write('Alors que celui-là est écrit par une instruction
JavaScript.);
17
</script>
</body>
D'après vous, quel texte s'affichera en premier ? Celui qui a été défini dans la balise <p> ou celui défini
dans document.write() ?
Comme je l'ai déjà dit, le code s'exécute de haut en bas. Etant donné que la balise <p> est écrite avant
l'instruction document.write(), c'est le texte de la balise <p> qui s'affichera en premier.
Vérifiez-le en ouvrant ce document dans le navigateur par défaut :
Voici le code complet :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Affichage dans le document</title>
</head>
<body>
<p>Ce texte provient de la section BODY du document HTML.</p>
<script>
document.write(Alors que celui-là est écrit par une instruction
JavaScript.');
</script>
</body>
</html>
Pour afficher quelque chose dans le document, vous auriez également pu utiliser la fonction JavaScript
alert(). A titre d'exemple, mettez un double slash (//) devant l'instruction document.write()
pour la mettre en commentaire et insérez un appel à la fonction alert() juste après :
alert('ceci est un message JavaScript');
18
Voici le résultat :
Pour en terminer avec l'affichage en JavaScript, notez que vous pouvez afficher du texte dans la console
du navigateur en utilisant l'instruction console.log().
Insérez un double-slash devant l'instruction alert() pour la mettre en commentaires et ajoutez une
instruction console.log() juste après :
console.log('Texte affiché dans la console');
Pour visualiser le texte dans la console, appuyez sur la touche F12 du clavier et basculez sur l'onglet
Console. Voici ce que vous devez obtenir :
19
Une dernière remarque avant de terminer cette section : si vous le souhaitez, vous pouvez stocker tout
votre code JavaScript dans un fichier externe d'extension .js. Vous ferez référence à ce fichier avec les
instructions HTML suivantes :
<script src="fichier.js"></script>
Copiez les instructions JavaScript sans les balises <script> et </script> dans le fichier 09-
premiers-pas.js et insérez une référence à ce fichier dans la balise <script>.
Voici le code du fichier 09-premiers-pas.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Affichage dans le document</title>
</head>
<body>
<p>Ce texte provient de la section BODY du document HTML.</p>
<script src="09.js"></script>
</body>
20
</html>
Fichier 09.js
document.write('Alors que celui-là est écrit par une instruction
JavaScript.');
alert('ceci est un message JavaScript');
console.log('Texte affiché dans la console');
Bien entendu, le résultat est le même. Ici, comme les commentaires ont été supprimés, un texte
s'affiche dans le document, puis dans une boîte de dialogue et enfin dans la console du navigateur.
Des commentaires dans le code
Quel que soit le langage utilisé, il est toujours intéressant d'insérer des commentaires dans un
programme. Cela facilite sa maintenance et précise les points épineux.
Vous le savez certainement, pour insérer un commentaire en HTML, on utilise une balise qui
commence par <!-- et qui se termine par -->. Cette balise peut s'étaler sur une ou plusieurs lignes
:
<!-- Ceci est un commentaire -->
En JavaScript, si un commentaire tient sur une ligne, il suffit de le faire précédez de deux slash :
// Ceci est un commentaire JavaScript sur une seule ligne
Par contre, s'il doit s'étirer sur plusieurs lignes, commencez-le par un slash suivi d'un astérisque et
terminez-le par un astérisque suivi d'un slash :
/* Ceci est un commentaire
JavaScript sur
plusieurs lignes */
Une fonction dans une balise <script>
Comme la plupart des langages, JavaScript permet de définir des fonctions. Ces fonctions sont
généralement placées entre les balises <head> et </head>. En effet, le code compris entre ces deux
balises étant chargé en premier, cela garantit que les fonctions JavaScript auront été mises en mémoire
avant que qu'elles soient appelées.
La syntaxe permettant de déclarer une fonction est proche de celle utilisée dans le langage C :
function nom([param1, ...paramN]){
// Une ou plusieurs instructions
}
Où :
• nom est le nom de la fonction ;
• param1 à paramN sont les éventuels paramètres passés à la fonction ;
• Instructions représente une ou plusieurs instructions exécutées par la fonction.
21
Lorsqu'une fonction a été définie, elle est appelée par son nom, suivi de parenthèses. Si un ou plusieurs
paramètres ont été définis dans la fonction, ils sont également précisés lors de son appel, séparés
entre eux par des virgules.
<script>
nom([param1, ...paramN]);
</script>
Où :
• nom est le nom de la fonction à appeler ;
• param1 à paramN sont les éventuels paramètres passés à la fonction.
Exercice
Définissez la fonction carre() qui calcule et affiche le carré du nombre qui lui est passé en argument.
Appelez cette fonction pour calculer les carrés de 7 et de 12.
Quelques informations complémentaires pour vous aider à résoudre cet exercice :
• Vous pouvez utiliser le signe + pour concaténer deux éléments. Peu importe leur type. Ainsi,
vous pouvez par exemple concaténer un texte et un nombre.
• JavaScript peut également afficher du code HTML. Par exemple, l'instruction suivante est
équivalente à la balise HTML <br> :
document.write('<br>');
Faites une pause dans la vidéo. Ecrivez le code demandé et reprenez le visionnage de la vidéo pour
vérifier que vous avez bien travaillé.
Solution
Dans un premier temps, dupliquez le squelette pour obtenir le fichier 12-fonction-carre.html.
La fonction carre() est placée dans le head, entre les balises <script> et </script>. Un
paramètre lui est transmis. Nous l'appellerons, par exemple x. Pour afficher le carré du nombre passé
en argument, vous utiliserez une instruction document.write() :
<script>
function carre(x){
document.write('Le carré de ' + x +' est ' + x*x + '.<br>');
}
</script>
Pour terminer, appelez la fonction carre() dans le body. Insérez un peu de texte suivi d'un passage
à la ligne :
Test de la fonction carre :<br>
Puis une balise <script></script>. A l'intérieur de cette balise, appelez la fonction carre()
en lui transmettant la valeur 7, puis la valeur 12 dans le body :
22
<script>
carre(7);
carre(12);
</script>
Voici le résultat :
Ce code se trouve dans le fichier 12-fonction-carre.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calcul du carré</title>
<script>
function carre(x){
document.write('Le carré de ' + x +' est ' + x*x + '.<br>');
}
</script>
</head>
<body>
Test de la fonction carre :<br>
<script>
carre(7);
23
carre(12);
</script>
</body>
</html>
Dans cet exemple, la fonction carre() calcule le carré et affiche le résultat. Il est également possible
de retourner le résultat à l'appelant avec l'instruction return. Dans ce cas, la fonction carré() se
simplifie. L'instruction document.write() est remplacée par un return :
function carre(x){
return x*x;
}
Lorsque la fonction carré() est appelée, elle retourne un nombre. Il est donc possible d'afficher le
résultat avec une instruction document.write() :
document.write('Le carré de 7 est ' + carre(7) + '.<br>');
document.write('Le carré de 12 est ' + carre(12) + '.<br>');
Gestion des exceptions
La gestion des exceptions dans JavaScript est comparable à celle qui a cours dans les autres langages
de programmation :
 Le code qui peut provoquer une exception doit être entouré d'une structure try.
 Une exception peut être déclenchée par l'instruction suivante :
throw "message d'erreur";
 L'instruction catch(erreur) permet de capturer une exception. Si une instruction throw
a été générée, le message peut être récupéré dans erreur.
 Chaque instruction try doit avoir une instruction catch correspondante.
Un exemple va mettre en pratique tout ce qui vient d'être dit. Commencez par dupliquer le squelette
en un fichier que vous appellerez 13-try-catch.html. Dans ce document HTML, définissez la fonction
inverse() qui demande un argument numérique et retourne son inverse. Si le nombre passé est 0,
une exception va être générée. En effet, 1/0 ne retourne pas un entier. Ceci dit, JavaScript règle ce
cas avec doigté, puisque 1/0 vaut infinite pour lui. Nous allons néanmoins générer une exception
pour traiter d'une façon particulière le cas où la valeur passée est 0.
La fonction inverse() admet un argument que nous appellerons nombre :
<script>
function inverse(nombre){
}
</script>
24
Si l'argument vaut 0, une exception est générée avec le message "Division par 0". Remarquez le double
signe "=". Il s'agit d'un test d'égalité et non d'une affectation. Lorsqu'on teste l'égalité, on utilise un
double "=". Par contre, lorsqu'on affecte une valeur à une variable, on utilise un simple "=".
if (nombre == 0)
throw 'division par zéro';
Remarquez qu'il n'est pas nécessaire d'utiliser des accolades après le if ni après le else. Il s'agit d'un
cas particulier. Ici, une seule instruction doit être exécutée si la condition du if est vérifiée. Il en est
de même si la condition du if n'est pas vérifiée. Ceci étant dit, rien ne vous empêche d'ajouter
systématiquement des accolades, qu'il y ait une ou plusieurs instructions à exécuter.
Dans le cas contraire, l'inverse de l'argument est retourné à l'appelant, suivi d'un passage à la ligne.
else
return '1/' + nombre +' = ' + (1/nombre) +'<br>';
Pour calculer l'inverse des nombres 12, 0 et 3, définissez une instruction try dans laquelle vous
appellerez la fonction inverse() à trois reprises. Le résultat est affiché par une simple instruction
document.write().
try {
document.write(inverse(12));
document.write(inverse(0));
document.write(inverse(3));
}
Le bloc try est refermé et le bloc catch ouvert, en récupérant l'erreur en paramètre. Ce bloc est
exécuté lorsqu'une division par 0 est demandée. Dans ce cas, nous allons afficher un message d'erreur
avec une instruction document.write() :
catch(erreur){
document.write('Une exception a été générée : ' + erreur + '<br>');
}
Il est temps d'exécuter ce code. Comme vous pouvez le constater, le premier inverse est calculé, le
deuxième produit l'affichage d'un message d'erreur et le troisième n'est jamais calculé, car, après
l'exception, l'exécution des instructions contenues dans le catch est interrompue :
25
Ce code est disponible dans le fichier 13-try-catch.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gestion des exceptions</title>
</head>
<body>
<script>
function inverse(nombre){
if (nombre == 0)
throw 'division par zéro';
else
return '1/' + nombre +' = ' + (1/nombre) +'<br>';
}
try {
document.write(inverse(12));
document.write(inverse(0));
document.write(inverse(3));
}
catch(erreur){
26
document.write('Une exception a été générée : ' + erreur +
'<br>');
}
</script>
</body>
</html>
Une petite question avant de terminer cette section. Comment feriez-vous pour que la valeur 1/3 soit
également calculée ? Je vous rappelle que le code contenu dans l'instruction try a été bloqué
lorsqu'une exception a été générée. Je vous laisse quelques secondes pour réfléchir. Si vous avez
besoin d'un peu plus de temps, faites une pause dans la vidéo.
Une solution très simple consiste à insérer la seule instruction qui pose un problème dans le try. On
sait que les autres ne provoqueront pas d'exception. En les excluant de la structure try/catch, elles
seront exécutées, même après l'exception provoquée par le calcul de l'inverse de 0.
Dans un premier temps, l'inverse de 12 est calculé et affiché. Dans un deuxième temps, le calcul de
l'inverse de 0 est inséré à l'intérieur d'une structure try/catch. Dans un troisième temps, l'inverse
de 3 est calculé et affiché.
document.write(inverse(12));
try {
document.write(inverse(0));
}
catch(erreur){
document.write('Une exception a été générée : ' + erreur + '<br>');
}
document.write(inverse(3));
Comme vous pouvez le constater, les valeurs 12, 0 et 3 sont maintenant traitées :
27
Le code se trouve dans le fichier 13-try-catchv2.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Gestion des exceptions</title>
</head>
<body>
<script>
function inverse(nombre){
if (nombre == 0)
throw "division par zéro";
else
return "1/" + nombre +" = " + (1/nombre) +"<br>";
}
document.write(inverse(12));
try{
document.write(inverse(0));
}
catch(erreur){
28
document.write("Une exception a été générée : " + erreur +
"<br>");
}
document.write(inverse(3));
</script>
</body>
</html>
Mise en place d'un gestionnaire d'événements
Dans le navigateur, certaines actions effectuées par l'utilisateur donnent lieu à des événements. Si
vous mettez en place un gestionnaire d'événements, il sera automatiquement exécuté lorsque
l'événement correspondant se présentera.
Pour définir un gestionnaire d'événements, vous utiliserez la syntaxe suivante :
<balise nom = "code JavaScript">
Où :
• balise est le nom d'une balise HTML ;
• nom est le nom de l'événement déclenchant ;
• code JavaScript est une instruction JavaScript exécutée lorsque l'événement
NomEvent se produit.
A titre d'exemple, l'instruction ci-après définit un bouton dans un formulaire, affiche Résultat dans le
bouton et met en place un gestionnaire d'événements qui est sollicité lorsque l'utilisateur clique sur
ce bouton.
<input type="button" value="Résultat" onclick="traitement();">
Le code qui suit le déclencheur onclick correspond au nom d'une fonction. Vous pouvez spécifier au
choix une ou plusieurs instructions ou fonctions JavaScript. Cette deuxième possibilité est bien plus
intéressante, car elle donne le contrôle à une fonction qui contient autant d'instructions que vous le
souhaitez.
Exercice
Pour bien comprendre comment utiliser un gestionnaire événementiel, rien de tel qu'un petit exercice.
Je vous propose donc de définir un formulaire qui contient une zone de texte et un bouton. Lorsque
l'utilisateur clique sur le bouton, exécutez la fonction carre() qui lira le nombre tapé dans la zone
de texte et affichera son carré dans cette même zone de texte.
N'ayez pas peur, je ne vais pas vous laisser résoudre cet exercice sans vous donner des indices.
Premier indice
Pour définir un formulaire, vous utiliserez la balise <form> et vous donnerez un nom au formulaire à
travers son attribut name. Par exemple :
<form name="f">
29
</form>
Deuxième indice
Pour permettre à l'utilisateur d'effectuer une saisie dans une zone de texte, vous utiliserez une balise
<input> de type text. Donnez un nom à cette balise pour récupérer son contenu. Par exemple :
<input type="text" name="nombre">
Troisième indice
Dans un formulaire d'attribut name f, une balise <input> de type text et de nom saisie,
JavaScript peut accéder en lecture et en écriture au contenu de cette balise avec l'instruction suivante
:
f.saisie.value
Solution
Dans un premier temps, dupliquez le squelette pour obtenir le fichier 14-formulaire.html.
Mettez en place le formulaire est mis en place dans le <body>, avec la balise <form>. Appelez ce
formulaire f.
<body>
<form name="f">
</form>
</body>
Définissez la zone de texte et donnez-lui le nom nombre.
Enfin, définissez un bouton avec une balise <input> de type button. Le texte affiché sur le bouton
est Carré. Il est défini dans l'attribut value du bouton. Lorsque l'utilisateur clique sur le bouton, la
fonction carre() doit s'exécuter. Le nom de cette fonction est donc affecté à l'attribut onclick du
bouton.
<input type="text" name="nombre">
<input type="button" value="Carré" onclick="carre();">
Tous les éléments HTML sont en place. Il ne reste plus qu'à définir la fonction carre(). Nous allons
mettre le code de la fonction dans le <head>. La fonction carre() n'a besoin d'aucun argument,
puisqu'elle peut accéder directement au contenu de la zone de texte nombre. Une seule ligne de code
suffira : affectez à la zone de texte nombre (f.nombre.value), le contenu de cette zone de texte
multiplié par lui-même, et donc mis au carré :
<script>
function carre(){
f.nombre.value = f.nombre.value * f.nombre.value;
}
</script>
30
Voici le résultat :
Ce code se trouve dans le fichier 14-formulaire.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function carre(){
f.nombre.value = f.nombre.value * f.nombre.value;
}
</script>
</head>
<body>
<form name="f">
Entrez un nombre et cliquez sur le bouton pour afficher son
carré<br>
<input type="text" name="nombre" size="25" >
<input type="button" value="Carré" onclick="carre();">
</form>
</body>
</html>
31
Variables et types de données
JavaScript est en mesure de travailler avec tous les types de données conventionnels.
Il sait manipuler des nombres réels ou entiers.
Les entiers peuvent être exprimés en décimal (base 10), en octal (base 8) ou en hexadécimal (base 16).
Un nombre octal commence toujours par un zéro, et un nombre hexadécimal par 0x ou 0X. Les
éventuelles lettres d'un nombre hexadécimal peuvent indifféremment être exprimées en minuscules
ou en majuscules.
Les nombres réels sont composés d'une partie entière suivie d'un point, d'une partie décimale, de la
lettre e (ou E) et d'un exposant, éventuellement précédé d'un signe + ou -. Voici quelques exemples
de nombres réels :
1.4142135
-32E-7
.5e12
JavaScript peut également travailler avec des chaînes de caractères délimitées par des apostrophes ou
des guillemets. Dans cette formation, nous utiliserons la plupart du temps des apostrophes pour
délimiter les chaînes de caractères.
Les affectations de chaînes ci-après sont correctes :
var x = 'essai';
var y = "essai";
Il est également possible d'insérer des balises HTML dans une chaîne de caractères et d'afficher la
chaîne par la suite. Vous pouvez ainsi construire la page Web de façon dynamique, à l'aide
d'instructions JavaScript. Ici par exemple, nous définissons la variable chaîne texte qui contient du
texte et une balise HTML <font> :
var texte = 'essai <font size="5" color="#FF0000">concluant</font>';
Lorsque cette variable est affichée, avec une instruction document.write(), le texte est mis en
forme en conséquence :
document.write(texte);
JavaScript peut également manipuler :
• des booléens qui prennent la valeur true ou false. Attention, true et false sont en
lettres minuscules. Les valeurs True ou FALSE par exemple n'ont aucune signification en
JavaScript. En effet, JavaScript est sensible à la casse des caractères et particulièrement
susceptible si vous essayez de vous écarter du droit chemin !
• des tableaux monodimensionnels, accessibles par leur indice.
Par exemple, memo[0] désigne le premier élément du tableau memo[] et memo[12] le treizième
élément de ce même tableau.
Pour définir une variable, il n'est pas nécessaire de préciser son type. Utilisez simplement le mot
réservé var, indiquez le nom de la variable et affectez-lui une valeur.
32
Voici quelques exemples :
var petit = 10;
var grand = 100;
var Titre = 'Types de données';
var Choix = true;
Lorsqu'une valeur typée a été affectée à une variable, il n'est pas interdit de lui affecter par la suite
une valeur d'un autre type. Par exemple, le code ci-après est tout à fait correct :
var ma_variable = 'valeur texte';
...
ma_variable = 123.456e12;
...
ma_variable = true;
Le signe + peut être utilisé pour concaténer deux valeurs de type différent. Par exemple, l'instruction
suivante est tout à fait licite :
ma_variable = 500 + 'kilomètres';
Conversions de types
JavaScript est doté de trois fonctions de conversion chaîne/numérique :
• eval() qui évalue une chaîne et la convertit en numérique.
• parseInt() qui convertit une chaîne en utilisant une base de numération donnée.
• parseFloat() qui convertit une chaîne en un nombre réel.
Fonction eval()
Commençons par la fonction eval().
Pour l'utiliser, il suffit de définir une variable et de lui affecter le résultat de la fonction eval() en
passant en argument l'expression texte à évaluer.
var resultat = eval(expression);
Où :
• expression est une chaîne de caractères contenant un nombre ou une formule dont le
résultat est un nombre ;
• et resultat est la valeur numérique retournée par la fonction.
Par exemple, si on définit la variable a et qu'on lui affecte la valeur 5 :
var a = 5;
eval("a*2"); retourne la valeur numérique 10
et eval("123.45"); retourne la valeur numérique 123.45
33
Fonction parseInt()
Voyons maintenant la fonction parseInt().
Pour l'utiliser, il suffit de définir une variable et de lui affecter le résultat de la fonction parseInt()
en lui passant un ou deux arguments :
var resultat = parseInt(chaine[, base]);
Où :
• chaine est la chaîne à convertir ;
• base est la base de numération de la chaîne ;
• resultat est le résultat numérique de la conversion.
Le deuxième argument est facultatif. S'il n'est pas spécifié, la base de numération sera supposée égale
à 10.
Voici quelques exemples :
parseInt("ff",16); retourne la valeur numérique 255
parseInt("12",8); retourne la valeur numérique 10
parseInt("essai",10); retourne la valeur NaN (Not a Number), pour indiquer que l'argument
passé à la fonction parseInt() n'est pas un nombre
Fonction parseFloat()
Enfin, voyons comment utiliser la fonction parseFloat().
Il suffit de définir une variable et de lui affecter le résultat de la fonction parseFloat() à laquelle on
passe la chaîne à convertir en flottant :
resultat = parseFloat(chaine)
• chaine est la chaîne à convertir ;
• resultat est le résultat réel de la conversion.
Exemples :
parseFloat("427.35E-1"); retourne la valeur numérique 42.735
parseFloat("X12"); retourne la valeur NaN Not a Number), pour indiquer
que l'argument passé à la fonction parseFloat() n'est pas un nombre.
Dans la section précédente, vous avez vu qu'une variable JavaScript pouvait recevoir un nombre, puis
une chaîne, puis un booléen, puis un autre nombre, etc. C'est-à-dire qu'elle n'était pas typée. Ce n'est
pas tout à fait exact. En fait, une variable JavaScript est toujours typée à un moment donnée, mais son
type n'est pas forcément constant. Pour connaître le type actuel d’une variable, vous utiliserez la
fonction typeof().
Exercice
Appliquez la fonction typeof() sur les variables suivantes afin de connaître leur type :
var texte='Un simple texte';
34
var nombre = 12.5;
var b = false;
var t = ['un','simple','tableau'];
var o = {prenom: 'Pierre', nom: 'Durand'};
Solution
Vous pouvez afficher le type des variables dans la fenêtre du navigateur avec l'instruction
document.write(), dans des boîtes de dialogue successives avec l'instruction alert() ou dans
la console avec l'instruction console.log().
Dans le code de la solution, nous avons choisi d'afficher le type des variables dans la console.
Pour cela, il suffit d'utiliser l'instruction console.log() en lui passant en argument la function
typeof() de la variable dont on désire connaître le type. Commencez par le type de la variable
texte, puis le type des variables nombre, b, t et o :
console.log(typeof(texte));
console.log(typeof(nombre));
console.log(typeof(b));
console.log(typeof(t));
console.log(typeof(o));
Exécutez ce code. Il n'y a aucun affichage, ce qui est normal puisque l'affichage se fait dans la console.
Appuyez sur la touche F12 pour révéler les résultats.
Comme on pouvait s'y attendre, les trois premières variables sont respectivement de type string,
number et boolean. Par contre, notez qu'un tableau est de type objet et qu'un objet dont les
composantes sont définies entre accolades est également de type object.
La solution se trouve dans le fichier 16-typeof.html.
35
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>typeof()</title>
</head>
<body>
<script>
var texte='Un simple texte';
var nombre = 12.5;
var b = false;
var t = ['un','simple','tableau'];
var o = {prenom: 'Pierre', nom: 'Durand'};
console.log(typeof(texte));
console.log(typeof(nombre));
console.log(typeof(b));
console.log(typeof(t));
console.log(typeof(o));
</script>
</body>
</html>
36
Module 3 – Tout d'horizon du langage JavaScript
Dans ce module, vous allez faire connaissance avec les instructions du langage JavaScript.
Opérateurs et expressions
JavaScript utilise la plupart des opérateurs des autres langages de programmation. Pour faciliter leur
énumération, nous les répartirons en six grands groupes. Ainsi, nous distinguerons les opérateurs :
• D'affectation
• Arithmétiques
• Relationnels et logiques
• Dédiés aux chaînes de caractères
• Dédiés aux opérations binaires (qui agissent au niveau des bits)
Opérateurs d’affectation
Outre l’opérateur d’affectation =, JavaScript dispose de six autres opérateurs qui allègent l’écriture :
Opérateur Fonction Exemple Equivalent à
+ = Addition de l’opérateur de droite à
l’opérateur de gauche et affectation à
l’opérateur de gauche
a + = b a = a + b
- = Soustraction de l’opérateur de droite à
l’opérateur de gauche et affectation à
l’opérateur de gauche
a - = b a = a - b
* = Multiplication de l’opérateur de droite par
l’opérateur de gauche et affectation à
l’opérateur de gauche
a * = b a = a * b
/ = Division de l’opérateur de gauche par
l’opérateur de droite et affectation à
l’opérateur de gauche
a / = b a = a / b
% = Reste de la division entière de l’opérateur
de gauche par l’opérateur de droite et
affectation à l’opérateur de gauche
a % = b a = a % b
? : Affectation conditionnelle a = (c < d) ? e : f if (c < d) then a =
e else a = f
37
Opérateurs arithmétiques
Ces opérateurs effectuent des opérations arithmétiques sur leurs opérandes.
Opérateur Fonction Exemple
= Affectation a = 65
+ Addition c = a + b
- Soustraction d = -a
* Multiplication c = c * a
/ Division c = a / b
% modulo (reste de la division entière) c = a % b
Les opérateurs sont exécutés selon une hiérarchie bien définie ; du plus prioritaire vers le moins
prioritaire :
%
- de changement de signe
/
*
-
+
=
Il est parfois nécessaire d’utiliser des parenthèses pour forcer l’ordre d’exécution ou pour clarifier une
expression de calcul.
A titre d’exemple, l’expression :
z = a + b / c +4;
N’est pas du tout équivalente à l’expression :
z = (a + b) / c + 4;
Opérateurs relationnels et logiques
Ces opérateurs effectuent des comparaisons sur leurs opérandes qui peuvent être numériques,
chaînes ou logiques. Le résultat renvoyé est 0 si la condition n’est pas vérifiée. Il est différent de
0 dans le cas contraire.
38
Opérateur Fonction Exemple
! NON logique !(a == b)
< Inférieur à a < b
> Supérieur à a > b
<= Inférieur ou égal à a <= b
>= Supérieur ou égal à a >= b
! = Différent de a ! = b
== Egal à a == b
&& ET logique (a == b) && (c > d)
|| OU logique (a == b) || (c > d)
Attention
Une des erreurs les plus fréquentes en JavaScript consiste à utiliser l’opérateur = à la place de
l’opérateur == dans une comparaison logique.
Par exemple, l’instruction :
if (couleur = 3)
Ne compare pas le contenu de la variable couleur avec la valeur 3. Elle affecte au contraire la valeur 3
à la variable couleur ! L’instruction permettant d’effectuer la comparaison est :
if (couleur == 3)
Opérateurs dédiés aux chaînes de caractères
En plus des opérateurs de comparaison dont nous venons de parler, vous pouvez utiliser les opérateurs
+ et += pour (respectivement) concaténer deux chaînes et stocker une chaîne à la suite d'une autre.
Voyons quelques exemples :
L'instruction ci-après :
a = "gauche " + "droite";
Stocke la valeur gauche droite dans la variable a.
Supposons maintenant que la variable a contienne la valeur gauche. En utilisant l'instruction
suivante, la variable a contiendra la valeur gauche droite :
a += "droite";
39
Opérateurs d’incrémentation
Les opérateurs d’incrémentation (++) et de décrémentation (--) sont utilisés, respectivement pour
augmenter et pour diminuer de 1 la valeur stockée dans une variable.
Selon la position de l’opérateur, on parle de post incrémentation, de pré incrémentation, de post
décrémentation et de pré décrémentation :
Opérateur Fonction Exemple
++ post incrémentation a++
++ pré incrémentation ++a
-- post décrémentation a--
-- pré décrémentation --a
Dans une expression comportant un opérateur de pré incrémentation ou de pré décrémentation,
l’incrémentation (la décrémentation) se déroule avant l’évaluation de l’expression.
Inversement, dans une expression comportant un opérateur de post incrémentation ou de post
décrémentation, l’incrémentation (la décrémentation) se déroule après l’évaluation de l’expression.
La position (post ou pré) des opérateurs d’incrémentation et de décrémentation n’a aucune
importance dans une expression ne comportant qu’un facteur. Par exemple, les expressions suivantes
sont équivalentes :
a++;
est équivalent à :
++a;
Cependant, examinez ce code :
var e1 = 12;
var e2 = 15;
var e3 = e1 * ++e2;
var e1 = 12;
var e2 = 15;
var e4 = e1 * e2++;
D'après vous, que valent e3 et e4 ? Est-ce que ces variables ont la même valeur ?
Pour le savoir, il suffit de les afficher. Par exemple avec l'instruction document.write(). Voici le
résultat :
40
Ces résultats peuvent sembler étranges. Mais en fait, pas tant que ça lorsqu'on y regarde d'un peu plus
près. En effet, l'expression lorsque l'expression e1 * ++e2 est affectée à la variable e3, on
commence par incrémenter e2 avant d'effectuer la multiplication. C'est donc 12 x 16, soit 192, qui
est affecté à e3.
Par contre, lorsque l'expression e1 * e2++ est affectée à la variable e4, on affecte e1*e2 à la
variable e4. Donc 12 x 15, c'est-à-dire 180. Dans un deuxième temps, on incrémente la variable
e2.
Le code de cet exemple se trouve dans le fichier 17-post-pre-incrementation.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Post et pré incrémentation</title>
</head>
<body>
<script>
var e1 = 12;
var e2 = 15;
var e3 = e1 * ++e2;
var e1 = 12;
var e2 = 15;
41
var e4 = e1 * e2++;
document.write('e3 = ' + e3 + '<br>');
document.write('e4 = ' + e4);
</script>
</body>
</html>
Opérations intervenant au niveau des bits
JavaScript possède plusieurs opérateurs qui effectuent des calculs au niveau binaire, tels que OU
logique ou décalage d’un ou de plusieurs bits. Le tableau ci-après résume ces opérateurs.
Opérateur Fonction Exemple
& ET logique a = 0xfa & 0x35
| OU logique a = 0xfa | 0x12
^ OU EXCLUSIF logique a ^ = 0x32
~ NON logique a = ~b
>> Décalage à droite avec signe a >>= c
>>> Décalage à droite sans signe a >>>= c
<< Décalage à gauche a = b << c
Attention
Les opérateurs &, | et ~ ne doivent pas être confondus avec leurs homologues &&, || et ^. Les
premiers effectuent des opérations binaires sur leurs opérandes, alors que les seconds effectuent des
comparaisons sur leurs opérandes.
L'instruction de contrôle if... else [.. else]
Dans une fonction JavaScript ou entre les balises <script> et </script>, les instructions
s'exécutent séquentiellement. Il peut s'agir d'instructions provenant du langage de programmation lui-
même ou d'appels de fonctions. Dans le second cas, les instructions appelées peuvent comporter une
ou plusieurs instructions simples et/ou appels de fonctions.
Il est souvent nécessaire d'exécuter une portion de code, à la condition qu'une expression logique soit
vérifiée. Pour cela, il faut utiliser l'instruction if else dont voici la syntaxe :
if (condition){
42
instruction 1;
...
instruction N;
}
else {
instruction 1;
...
instruction P;
}
Où :
• condition est une condition logique. Elle sera vérifiée si son évaluation est différente de 0.
Elle ne sera pas vérifiée si son évaluation est égale à 0. Par exemple, la condition if (3) est
toujours vérifiée, et la condition if (0) n'est jamais vérifiée.
• instruction 1 à instruction N sont les instructions exécutées dans le cas où la
condition logique est vérifiée.
• instruction 1 à instruction P sont les instructions exécutées dans le cas contraire.
Exercice
Ecrivez du code HTML/JavaScript pour demander à l'utilisateur de saisir une lettre dans une zone de
texte et d'appuyer sur un bouton pour afficher l'un des trois messages suivants dans la zone de texte.
Saisie Message
Lettre majuscule Vous avez entré une lettre majuscule.
Lettre minuscule Vous avez entré une lettre minuscule.
Autre caractère Le caractère entré n'est pas une lettre
Solution
La première chose à faire consiste à dupliquer le squelette pour obtenir le fichier 18-if-else.html.
Insérez le titre du document entre les balises <title> et </title>.
<title>if else</title>
Insérez quelques mots pour demander à l'utilisateur d'entrer une lettre et de cliquer sur le bouton.
<body>
Entrez une lettre et cliquez sur le bouton<br>
Définissez le formulaire entre les balises <body> et </body> et donnez-lui le nom f. Ce formulaire
contient une zone de texte de nom texte. Modifiez la taille de la zone de texte en affectant 40 à son
attribut size pour pouvoir y afficher du texte sans qu'il soit tronqué.
<form name = "f">
43
<input type="text" name="texte" size="40"><br>
En dessous de la zone de texte, définissez un bouton sur lequel s'affiche le texte Cliquez ici.
Lorsque l'utilisateur clique sur ce bouton, la function casse()doit s'exécuter. Vous devez donc
affecter cette fonction à l'attribut onclick du bouton.
<input type="button" value="Cliquez ici" onclick="casse()">
La prochaine étape consiste à définir la function casse(), entre les balises <head> et </head>, à
l'intérieur de balises <script> et </script>.
<script>
function casse(){
}
</script>
Commencez par récupérer le contenu de la zone de texte en précisant le nom du formulaire suivi d'un
point suivi du nom de la zone de texte suivi d'un point et suivi de la propriété value. Cette valeur est
stockée dans la variable l (comme lettre) :
var l = f.texte.value;
Déclarez la variable resultat. Cette variable sera utilisée pour stocker le texte à afficher dans la
zone de texte :
var resultat;
Si le caractère lu dans la zone de texte est supérieur ou égal à A et inférieur ou égal à Z, il s'agit d'une
lettre majuscule. Dans ce cas, la variable resultat est initialisée avec le texte Vous avez entré
une lettre majuscule. Le test est élémentaire. Remarquez cependant l'utilisation du double &
pour effectuer un et logique entre la première condition l > ='A' et la deuxième l <= 'Z'.
if (l >= 'A' && l <= 'Z')
resultat = 'Vous avez entré une lettre majuscule';
Dans le cas contraire, on teste si le caractère est compris entre la lettre minuscule a et la lettre
minuscule z. Si c'est bien le cas, il s'agit d'une minuscule. La variable resultat est donc initialisée
avec le texte Vous avez entré une lettre minuscule :
else if (l >= 'a' && l <= 'z')
resultat = 'Vous avez entré une lettre minuscule';
S'il ne s'agit ni d'une majuscule ni d'une minuscule, l'utilisateur n'a pas entré une lettre. Dans ce cas,
la variable resultat est initialisée avec le texte Le caractère entré n'est pas une
lettre. Remarquez l'antislash entre la lettre n et e du mot n'est. Il permet d'échapper
l'apostrophe. Sans lui, JavaScript considèrerait que l'apostrophe est une fin de chaîne et génèrerait
une erreur de syntaxe.
else
resultat = 'Le caractère entré n'est pas une lettre';
Pour terminer, il ne reste plus qu'à affecter la variable resultat à la zone de texte en écrivant :
44
f.texte.value = resultat ;
Testons ce code. Le résultat est bien conforme à ce qui était attendu :
Ce code se trouve dans le fichier 18-if-else.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>if else</title>
<script>
function casse(){
var l = f.texte.value;
var resultat;
if (l >= 'A' && l <= 'Z')
resultat = 'Vous avez entré une lettre majuscule';
45
else if (l >= 'a' && l <= 'z')
resultat = 'Vous avez entré une lettre minuscule';
else
resultat = 'Le caractère entré n'est pas une lettre';
f.texte.value = resultat;
}
</script>
</head>
<body>
Entrez une lettre et cliquez sur le bouton<br>
<form name = "f">
<input type="text" name="texte" size="40"><br>
<input type="button" value="Cliquez ici" onclick="casse()">
</form>
</body>
</html>
Instructions répétitives
Dans un programme, il est souvent nécessaire de faire exécuter plusieurs fois un même bloc
d'instructions. Plutôt que de réécrire plusieurs fois ce bloc, il est plus judicieux d'utiliser une instruction
de répétition. JavaScript dispose de deux instructions de ce type : for et while. Nous allons examiner
leur fonctionnement dans les sections suivantes.
L'instruction for
L'instruction for exécute de façon répétitive un bloc d'instructions tant qu'une condition est vérifiée.
Cette condition est basée sur la valeur d'une variable incrémentée par l'instruction. Voici la syntaxe de
l'instruction for :
for (expression 1; expression 2; expression 3){
instruction 1;
...
instruction N;
}
Où :
• expression 1 initialise la variable compteur utilisée dans la boucle ;
• expression 2 définit la condition qui doit être vérifiée pour que la boucle se poursuive ;
• expression 3 indique comment faire varier la variable compteur utilisée dans expression
2 ;
46
• instruction 1 à instruction N sont les instructions ou appels de fonctions exécutés
tant que l'expression 2 est vérifiée.
Exercice
Utilisez une boucle for pour afficher les caractères de code ASCII 32 à 255, comme dans la copie
d'écran ci-dessous :
Pour vous aider à résoudre cet exercice, deux indices.
Premier indice
Pour afficher un caractère de code ASCII 100 par exemple, vous pouvez utiliser une instruction
document.write() et lui passant l'entité &#100;
Deuxième indice
Pour aligner verticalement les caractères, il suffit d'encadrer l'affichage par les balises HTML <pre>
et </pre>. Cette balise permet d'afficher des caractères de largeur fixe, et donc d'aligner
verticalement les caractères affichés sur l'écran.
Solution
Commencez par dupliquer le squelette pour définir le fichier 19-for.html.
Insérez le titre du document entre les balises <title> et </title> :
<title>Boucle for</title>
Le code JavaScript sera placé dans le body, entre les balises <script> et </script> :
<body>
47
<script>
</script>
</body>
La première instruction affiche un texte pour présenter l'affichage qui suit :
document.write("Les caractères de code 32 à 255<br>");
Les balises <pre> et </pre> sont ensuite insérées pour que les caractères s'alignent verticalement :
document.write("<pre>");
…
document.write("</pre>");
Pour afficher les caractères de code ASCII 32 à 255, une simple boucle for suffit. Dans cette boucle,
nous demandons l'affichage des entités dont le code ASCII passe consécutivement de 32 à 255 :
for (var i=32; i<256; i++){
document.write("&#"+i," ");
}
Voyons le résultat.
Comme vous le voyez, on n'est plus très loin de la solution. Ce qu'il faudrait, c'est passer à la ligne
chaque fois que 16 caractères sont affichés.
Pour cela, nous allons regarder si le reste de la division entière de i par 16 est nul. Si c'est le cas, nous
afficherons un passage à la ligne pour passer à la ligne suivante.
Le reste de la division entière aussi appelé modulo est représenté par l'opérateur mathématique % en
JavaScript. Si (i%16) == 0 (le double égal indique qu'il s'agit d'un test et non d'une affectation), il
suffit d'exécuter une instruction document.write() en lui passant la balise <br> en argument :
if ((i % 16) == 0)
document.write('<br>');
Voyons le résultat. C'est exactement ce qui était attendu :
48
Le code source se trouve dans le fichier 19-for.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Boucle for</title>
</head>
<body>
<script>
document.write("Les caractères de code 32 à 255<br>");
document.write("<pre>");
for (var i=32; i<256; i++){
if ((i % 16) == 0)
document.write('<br>');
document.write("&#"+i," ");
}
document.write("</pre>");
</script>
49
</body>
</html>
Un cas particulier de l'instruction for
Il existe une syntaxe un peu particulière mais très intéressante de l'instruction for.
L'instruction for ... in permet d'accéder séquentiellement aux propriétés d'un objet. Et c'est là
le plus intéressant : sans connaitre le nombre de propriétés de cet objet. Sa syntaxe est la suivante :
for (var in objet){
instruction 1;
...
instruction N;
}
Où :
• var est la variable compteur utilisée pour décrire l'objet ;
• objet est un objet quelconque dont on désire connaître les propriétés ;
• instruction 1 à instruction N sont les instructions ou appels de fonctions exécutés
pour chaque propriété de l'objet.
Rappelez-vous, nous avons vu dans une vidéo précédente qu'un tableau était considéré comme un
objet par JavaScript. Nous allons donc pouvoir utiliser une boucle for in pour parcourir les éléments
qui le composent.
Exercice
Définissez le tableau t[] qui contient les capitales Paris, Londres, Amsterdam et Madrid.
Parcourez-le avec une boucle for-in et affichez son contenu dans le navigateur.
Solution
Commencez par dupliquer le squelette pour obtenir le fichier 20-for-in.html.
Insérez le titre du document entre les balises <title> et </title> dans le head :
<title>La boucle for in</title>
Le code JavaScript sera placé dans le body, entre les balises <script> et </script>.
La première instruction définit et initialise le tableau t[] avec les capitales Paris, Londres, Amsterdam
et Madrid :
<script>
var t = ['Paris', 'Londres', 'Amsterdam', 'Madrid'];
</script>
La deuxième instruction parcourt le tableau t[] :
50
for (var i in t)
Et enfin, la troisième instruction affiche chacun des éléments parcourus, en les faisant suivre d'un
passage à la ligne :
document.write(t[i] + '<br>');
Voyons le résultat :
Ce code se trouve dans le fichier 20-for-in.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>La boucle for in</title>
</head>
<body>
<script>
var t = ['Paris', 'Londres', 'Amsterdam', 'Madrid'];
for (var i in t)
document.write(t[i] + '<br>');
</script>
</body>
</html>
51
L'instruction while
L'instruction while exécute de façon répétitive un bloc d'instructions tant qu'une condition est
vérifiée. Le test de la condition est fait avant l'exécution de la boucle. Voici la syntaxe de l'instruction
while :
while (expression){
instruction 1;
...
instruction N;
}
où expression est une condition qui doit être vérifiée pour que les instructions de la boucle
s'exécutent et instruction 1 à instruction N les instructions ou appels de fonctions exécutés
tant que l'expression est vérifiée.
Quelques astuces à connaitre sur les boucles
Définir une boucle infinie
Pour définir une boucle infinie (c'est-à-dire une boucle sans fin), vous utiliserez l'une des deux
instructions suivantes :
for ( ; ; ){
instructions;
}
ou :
while (1){
instructions;
}
L'instruction continue
Il est parfois nécessaire d'interdire l'exécution d'une boucle lorsqu'une condition logique est satisfaite.
Pour cela, vous utiliserez l'instruction continue, en tête du bloc :
Dans une instruction for :
for (expression 1; expression 2; expression 3){
if (condition)
continue;
instruction 1;
...
instruction N;
}
Dans une instruction while :
52
while (expression){
if (condition)
continue;
instruction 1;
...
instruction N;
}
Exercice
Affichez le résultat de la fonction y = 1/(x – 3) pour x compris entre 2 et 4 en utilisant un pas
de progression de 0,1. Pour éviter de calculer la fonction lorsque x vaut 3, vous exécuterez
l'instruction continue pour cette valeur. Sur chaque ligne, affichez la valeur de x avec une décimale
et la valeur de y avec deux décimales. Voici le résultat à obtenir :
Pour réduire le nombre de décimales, vous utiliserez la fonction Math.round(). Si vous voulez une
décimale, passez-lui la valeur multipliée par 10, puis divisez par 10 le résultat. Si vous voulez deux
décimales, passez-lui la valeur multipliée par 100, puis divisez par 100 le résultat.
Solution
53
Commencez par dupliquer le squelette HTML pour obtenir le fichier 22-continue.html.
Définissez le titre du document entre les balises <title> et </title> :
<title>Instruction continue</title>
Insérez un texte de présentation juste après la balise <body> :
<body>
Valeurs de la fonction y = 1/(x - 3) pour x compris entre 2 et 4<br>
Puis les balises <pre> et </pre> pour aligner verticalement les données affichées :
<script>
document.write('<pre>');
...
document.write('/<pre>');
</script>
Il ne reste plus qu'à créer une boucle for pour x compris entre 2 et 4 et progressant par pas de 0,1
:
for (var x = 2; x<= 4; x = x+0.1) {
...
}
Affichez la valeur de x et de y avec une instruction document.write(). Commencez par écrire
x=suivi de la valeur de x arrondie à une décimale. Pour cela, il suffit de passer x*10 à la fonction
Math.round() et de diviser le résultat par 10.
Insérez ensuite une tabulation pour aligner les valeurs de y verticalement puis le texte y=. Il ne reste
plus qu'à afficher le résultat de la fonction y avec deux décimales. Pour cela, passez la formule
multipliée par 100 à Math.round() et divisez par 100 le résultat. Pour terminer, concaténez un
passage à la ligne pour que chaque couple x y s'affiche sur une ligne différente :
document.write('x = ' + Math.round(x*10)/10 + 't y = ' +
Math.round(1/(x-3)*100)/100 + '<br>');
Examinons le résultat. Tout est parfait si ce n'est que y ne doit pas être calculé pour x=3 :
54
Etant donné que la variable x contient des valeurs réelles et non entières, il n'est pas possible de tester
si x vaut 3 avec un simple if (x==3). Vous allez plutôt tester si x est très proche de 3 et non
strictement égal à 3. Pour cela, vous utiliserez deux conditions dans l'instruction if. Si x est supérieur
à 2,99 et inférieur à 3,01, l'instruction continue est exécutée :
if ((x>2.99) && (x<3.01))
continue;
Voyons le résultat. Maintenant, tout est correct :
55
Ce code se trouve dans le fichier 22-continue.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Instruction continue</title>
</head>
<body>
Valeurs de la fonction y = 1/(x - 3) pour x compris entre 2 et 4
<pre>
<script>
for (var x = 2; x<= 4; x = x+0.1) {
if ((x<3.01) && (x>2.99))
continue;
document.write('<br>x = ' + Math.round(x*10)/10 + 't y = '
+ Math.round(1/(x-3)*100)/100);
56
}
</script>
</pre>
</body>
</html>
L'instruction break
Pour terminer, je vais vous parler de l'instruction break. Il est parfois nécessaire d'arrêter l'exécution
de la boucle lorsqu'une condition logique est satisfaite. Pour cela, utilisez l'instruction break en tête
du bloc :
Dans une instruction for :
for (expression 1; expression 2; expression 3){
if (condition)
break;
instruction 1;
...
instruction N;
}
Dans une instruction while :
while (expression){
if (condition)
break;
instruction 1;
...
instruction N;
}
Définition d'un tableau
En programmation, les tableaux peuvent rendre de grands services. Pour définir un tableau, plusieurs
écritures sont possibles.
Définition sans initialisation :
var unTableau = [];
Ou encore :
var unTableau = new Array();
Définition avec initialisation :
var unTableau = ['valeur1','valeur2'];
57
Ou encore :
var unTableau = new Array('valeur1','valeur2');
Pour accéder à un élément d'un tableau, passez par l'indice de cet élément.
Par exemple, pour afficher le troisième élément du tableau unTableau[], vous écrirez :
document.write(unTableau[2];
Exercice
Définissez le code HTML et JavaScript pour calculer les factorielles de 1! à 10!. Stockez-les dans un
tableau et affichez le contenu de ce tableau.
Solution
Commencez par dupliquer le squelette HTML pour créer le fichier 23-tableaux.html.
Définissez le titre du document entre les balises <title> et </title> :
<title>Tableaux</title>
Insérez un peu de texte dans le body pour présenter ce qui va s'afficher :
<body>
<h1>Les factorielles de 1 à 10</h1>
<hr>
...
</body>
Puis insérez les balises <script> et </script> pour pouvoir insérer du code JavaScript dans le
body. Commencez par définir un nouveau tableau que vous appellerez par exemple fact[] :
<script>
fact = new Array();
</script>
Définissez une boucle entre 1 et 10 par pas de 1 pour calculer les factorielles. Les calculs se feront
avec la fonction calcule(). L'argument passé à cette fonction est le nombre dont on désire calculer
la factorielle. La fonction retourne la factorielle qu'il suffit alors de stocker dans la cellule d'indice i du
tableau fact[] :
for (var i=1; i<=10; i++)
fact[i] = calcule(i);
Une deuxième boucle parcourt le tableau et affiche les dix factorielles sur une ligne :
for (i = 1; i<= 10; i++)
document.write(i + '! = ' + fact[i] + '<br>');
58
Il ne reste plus qu'à définir la fonction calcule(). Insérez les balises <script> et </script>
dans le head. La fonction calcule() admet un argument que nous appellerons nombre :
<script>
function calcule(nombre){
...
}
</script>
Le résultat sera calculé dans la variable res. Dans un premier temps, cette variable est initialisée à 1
:
var res = 1;
A l'aide d'une boucle for, les deux lignes suivantes multiplient successivement la variable res par 1,
2, 3, etc. jusqu'à nombre et donc calculent la factorielle du nombre passé en argument. Une fois
calculé, ce nombre est retourné par la fonction grâce à l'instruction return :
for (var j=1; j<=nombre; j++)
res*=j;
return res;
Voici le résultat :
59
Ce code se trouve dans le fichier 23-tableaux.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tableaux</title>
<script>
function calcule(nombre){
var res = 1;
for (var j=1; j<=nombre; j++)
res*=j;
return res;
}
</script>
</head>
60
<body>
<h1>Les factorielles de 1 à 10</h1>
<hr>
<script>
fact = new Array();
for (var i=1; i<=10; i++)
fact[i] = calcule(i);
for (i = 1; i<= 10; i++)
document.write(i + '! = ' + fact[i] + '<br>');
</script>
</body>
</html>
Pour manipuler un tableau, c'est-à-dire pour insérer, supprimer, extraire ou trier les éléments du
tableau, vous utiliserez les méthodes de l'objet Array. Vous trouverez de la documentation sur ces
méthodes en vous rendant sur http://www.w3schools.com/js/js_array_methods.asp
Exercice
Définissez le tableau prenom[] qui contient les prénoms suivants : Jean, Pierre, Laetitia,
David, Jade et Christel.
1) Ajoutez le prénom Anaïs entre Jean et Pierre
2) Supprimez le prénom Christel
3) Ajoutez le prénom Christel au début du tableau
4) Ajoutez le prénom Sandrine à la fin du tableau
5) Triez le tableau par ordre alphabétique
6) Définissez un tableau qui contient les trois premiers éléments du tableau prénom
Solution
Commencez par dupliquer le squelette pour créer le fichier 23-tableauv2.html.
Définissez le titre du document entre les balises <title> et </title> :
<title>Manipulation de tableaux</title>
Insérez les balises <script> et </script> dans le body. Définissez le tableau prenoms[], par
exemple avec une instruction new Array :
<script>
var prenoms = new Array('Jean', 'Pierre', 'Laetitia', 'David',
'Jade', 'Christel');
61
</script>
Pour ajouter le prénom Anaïs entre Jean et Pierre, utilisez la méthode splice() :
prenoms.splice(1,0,'Anaïs'); // 1
Pour supprimer le prénom Christel, utilisez la méthode pop() :
prenoms.pop(); // 2
Pour ajouter le prénom Christel au début du tableau, utilisez la méthode unshift() :
prenoms.unshift('Christel'); // 3
Pour ajouter le prénom Sandrine à la fin du tableau, utilisez la méthode push() :
prenoms.push('Sandrine'); // 4
Pour trier le tableau par ordre alphabétique, utilisez la méthode sort() :
prenoms.sort(); // 5
Enfin, pour définir un tableau qui contient les trois premiers éléments du tableau prénom, utilisez la
fonction slice() :
var premiers = prenoms.slice(0,3);
Pour terminer, nous allons afficher le contenu des tableaux premiers et prenoms à l'aide d'instructions
for in :
for (i in premiers)
document.write(premiers[i] + ' ');
document.write('<br>');
for (i in prenoms)
document.write(prenoms[i] + ' ');
Voici le résultat :
Ce code se trouve dans le fichier 23-tableauv2.html :
<!DOCTYPE html>
<html>
<head>
62
<meta charset="UTF-8">
</head>
<body>
<script>
var prenoms = new Array('Jean', 'Pierre', 'Laetitia', 'David',
'Jade', 'Christel');
prenoms.splice(1,0,'Anaïs'); // 1
prenoms.pop(); // 2
prenoms.unshift('Christel'); // 3
prenoms.push('Sandrine'); // 4
prenoms.sort(); // 5
var premiers = prenoms.slice(0,3);
for (i in premiers)
document.write(premiers[i] + ' ');
document.write('<br>');
for (i in prenoms)
document.write(prenoms[i] + ' ');
</script>
</body>
</html>
63
Module 4 – Programmation objet en JavaScript
JavaScript est un langage objet. Cette section va vous permettre d'aller plus loin en programmation
objet. Dans un premier temps, en utilisant les objets prédéfinis du langage. Et dans un second temps,
en créant vos propres objets.
Les objets par défaut de JavaScript
JavaScript peut manipuler des variables non typées et des objets.
Les objets prédéfinis sont essentiellement issus des classes suivantes : Number, Date, Math,
String et Array.
Chacune de ces classes possède des méthodes dédiées. Pour en savoir plus sur les méthodes
disponibles, connectez-vous sur le site http://www.w3schools.com/js/default.asp et cliquez dans le
volet gauche sur :
• JS Number Methods pour connaitre les méthodes de la classe Number.
• JS Date Methods pour connaitre les méthodes de la classe Date.
• JS Math pour connaitre les méthodes de la classe Math.
• JS String Methods pour connaitre les méthodes de la classe String.
• JS Array Methods pour connaitre les méthodes de la classe Array.
L'objet Date
Les objets de type Date permettent de travailler avec les dates (jours, mois, années) et les heures
(heures, minutes, secondes).
Pour définir un objet Date, vous pouvez utiliser l'une des quatre syntaxes suivantes :
var nom = new Date();
var nom = new Date('mois, jour, annee heures:minutes:secondes');
var nom = new Date(mois, jour, annee);
var nom = new Date(mois, jour, annee, heures, minutes, secondes);
Où nom représente le nom d'un nouvel objet Date, et mois, jour, année, heures, minutes et
secondes les composantes de l'objet Date. Dans la deuxième syntaxe, ils sont exprimés sous une
forme chaîne. Dans la troisième et la quatrième syntaxe, ils sont exprimés sous une forme entière.
De nombreuses méthodes sont attachées aux objets Date :
getDate(), getDay(), getMinutes(), getMonth(), getSeconds(),
getTime(), getTimeZoneoffset(), getYear(), getFullYear(), parse(),
setDate(), setHours(), setMinutes(), setMonth(), setSeconds(),
setTime(), setYear(), toGMTString(), toLocaleString(), UTC().
Exercice
Pour vous entrainer à manipuler les objets Date, affichez la date et l'heure système au format suivant
:
64
Solution
Commencez par dupliquer le squelette pour obtenir le fichier 25-date-systeme.html.
Insérez le nom de la page entre les balises <title> et </title> :
<title>Date et heure système</title>
Les instructions JavaScript seront insérées dans le body, entre les balises <script> et </script>.
La première instruction définit l'objet Date aujourdhui. Etant donné qu'aucun argument n'est
passé, la date retournée correspond à la date courante :
<script>
var aujourdhui = new Date();
Les composantes jour, mois, annee, heures, minutes et secondes sont alors stockées dans
des variables. Le jour est obtenu en appliquant la méthode getDate() à l'objet Date
aujourdhui :
var jour = aujourdhui.getDate();
Le mois est obtenu en appliquant la méthode getMonth() à l'objet Date aujourdhui. Etant
donné que le premier mois est identifié par le nombre 0, nous ajoutons 1 au résultat de la méthode
getMonth() pour obtenir le bon mois. :
var mois = aujourdhui.getMonth()+1;
L'année est obtenue en appliquant la méthode getFullYear() à l'objet Date aujourdhui :
var annee = aujourdhui.getFullYear();
Les heures sont obtenues en appliquant la méthode getHours() à l'objet Date aujourdhui :
var heures = aujourdhui.getHours();
Les minutes sont obtenues en appliquant la méthode getMinutes() à l'objet Date aujourdhui
:
var minutes = aujourdhui.getMinutes();
Les secondes sont obtenues en appliquant la méthode getSeconds() à l'objet Date
aujourdhui :
var secondes = aujourdhui.getSeconds();
65
Maintenant, nous avons toutes les informations nécessaires dans les variables qui viennent d'être
définies. Il suffit de les afficher avec deux instructions document.write() : une pour la date et une
pour l'heure. Nous commençons par afficher la date en précisant le jour slash le mois slash l'année et
en finissant par un <br> pour passer à la ligne :
document.write('Nous sommes le ' + jour + ' / ' + mois + ' / ' + annee
+ '<br>');
Nous terminons par afficher l'heure en précisant les heures, les minutes et les secondes :
document.write ('Il est ' + heures + ' heures ' + minutes + ' minutes
' + secondes + ' secondes');
Voyons le résultat. Il est conforme à ce qui était demandé :
Le code source se trouve dans le fichier 25-date-heure-systeme.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Date et heure système</title>
</head>
<body>
<script>
var aujourdhui = new Date();
var jour = aujourdhui.getDate();
var mois = aujourdhui.getMonth()+1;
var annee = aujourdhui.getFullYear();
var heures = aujourdhui.getHours();
var minutes = aujourdhui.getMinutes();
var secondes = aujourdhui.getSeconds();
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript
Support formation vidéo : Maîtriser JavaScript

Mais conteúdo relacionado

Mais procurados

Administration Base de données Oracle
Administration Base de données OracleAdministration Base de données Oracle
Administration Base de données OracleAndrianaivo Lovatiana
 
Reseaux sans fil dans les pays en developpement
Reseaux sans fil dans les pays en developpementReseaux sans fil dans les pays en developpement
Reseaux sans fil dans les pays en developpementmimanou
 
Développez en java
Développez en javaDéveloppez en java
Développez en javasocrat2
 
Ozw772.250 mise en_service_fr
Ozw772.250 mise en_service_frOzw772.250 mise en_service_fr
Ozw772.250 mise en_service_fre-genieclimatique
 
The Ring programming language version 1.9 book - Part 1 of 210
The Ring programming language version 1.9 book - Part 1 of 210The Ring programming language version 1.9 book - Part 1 of 210
The Ring programming language version 1.9 book - Part 1 of 210Mahmoud Samir Fayed
 
The Ring programming language version 1.4 book - Part 1 of 30
The Ring programming language version 1.4 book - Part 1 of 30The Ring programming language version 1.4 book - Part 1 of 30
The Ring programming language version 1.4 book - Part 1 of 30Mahmoud Samir Fayed
 
Tutoriel Ruby on Rails : apprendre Rails par l'exemple de Michael Hartl
Tutoriel Ruby on Rails : apprendre Rails par l'exemple de Michael HartlTutoriel Ruby on Rails : apprendre Rails par l'exemple de Michael Hartl
Tutoriel Ruby on Rails : apprendre Rails par l'exemple de Michael HartlMarc Maurer
 
Concevez votre-site-web-avec-php-et-mysql
Concevez votre-site-web-avec-php-et-mysqlConcevez votre-site-web-avec-php-et-mysql
Concevez votre-site-web-avec-php-et-mysqlKarima Rakima
 
Manuel du module additionnel RF-LAMINATE pour RFEM
Manuel du module additionnel RF-LAMINATE pour RFEMManuel du module additionnel RF-LAMINATE pour RFEM
Manuel du module additionnel RF-LAMINATE pour RFEMGrégoire Dupont
 
14668 concevez-votre-site-web-avec-php-et-mysql
14668 concevez-votre-site-web-avec-php-et-mysql14668 concevez-votre-site-web-avec-php-et-mysql
14668 concevez-votre-site-web-avec-php-et-mysqlLahcen Amourgh
 
464494 administrez-vos-bases-de-donnees-avec-mysql
464494 administrez-vos-bases-de-donnees-avec-mysql464494 administrez-vos-bases-de-donnees-avec-mysql
464494 administrez-vos-bases-de-donnees-avec-mysqlLahcen Amourgh
 
The Ring programming language version 1.8 book - Part 1 of 202
The Ring programming language version 1.8 book - Part 1 of 202The Ring programming language version 1.8 book - Part 1 of 202
The Ring programming language version 1.8 book - Part 1 of 202Mahmoud Samir Fayed
 
The Ring programming language version 1.3 book - Part 1 of 88
The Ring programming language version 1.3 book - Part 1 of 88The Ring programming language version 1.3 book - Part 1 of 88
The Ring programming language version 1.3 book - Part 1 of 88Mahmoud Samir Fayed
 
The Ring programming language version 1.8 book - Part 3 of 202
The Ring programming language version 1.8 book - Part 3 of 202The Ring programming language version 1.8 book - Part 3 of 202
The Ring programming language version 1.8 book - Part 3 of 202Mahmoud Samir Fayed
 
Chip_Ninja____Rapport_soutenance_finale
Chip_Ninja____Rapport_soutenance_finaleChip_Ninja____Rapport_soutenance_finale
Chip_Ninja____Rapport_soutenance_finaleChady Dimachkie
 
The Ring programming language version 1.9 book - Part 3 of 210
The Ring programming language version 1.9 book - Part 3 of 210The Ring programming language version 1.9 book - Part 3 of 210
The Ring programming language version 1.9 book - Part 3 of 210Mahmoud Samir Fayed
 
The Ring programming language version 1.2 book - Part 1 of 84
The Ring programming language version 1.2 book - Part 1 of 84The Ring programming language version 1.2 book - Part 1 of 84
The Ring programming language version 1.2 book - Part 1 of 84Mahmoud Samir Fayed
 

Mais procurados (18)

Administration Base de données Oracle
Administration Base de données OracleAdministration Base de données Oracle
Administration Base de données Oracle
 
Reseaux sans fil dans les pays en developpement
Reseaux sans fil dans les pays en developpementReseaux sans fil dans les pays en developpement
Reseaux sans fil dans les pays en developpement
 
Développez en java
Développez en javaDéveloppez en java
Développez en java
 
Ozw772.250 mise en_service_fr
Ozw772.250 mise en_service_frOzw772.250 mise en_service_fr
Ozw772.250 mise en_service_fr
 
The Ring programming language version 1.9 book - Part 1 of 210
The Ring programming language version 1.9 book - Part 1 of 210The Ring programming language version 1.9 book - Part 1 of 210
The Ring programming language version 1.9 book - Part 1 of 210
 
The Ring programming language version 1.4 book - Part 1 of 30
The Ring programming language version 1.4 book - Part 1 of 30The Ring programming language version 1.4 book - Part 1 of 30
The Ring programming language version 1.4 book - Part 1 of 30
 
Tutoriel Ruby on Rails : apprendre Rails par l'exemple de Michael Hartl
Tutoriel Ruby on Rails : apprendre Rails par l'exemple de Michael HartlTutoriel Ruby on Rails : apprendre Rails par l'exemple de Michael Hartl
Tutoriel Ruby on Rails : apprendre Rails par l'exemple de Michael Hartl
 
Concevez votre-site-web-avec-php-et-mysql
Concevez votre-site-web-avec-php-et-mysqlConcevez votre-site-web-avec-php-et-mysql
Concevez votre-site-web-avec-php-et-mysql
 
Manuel du module additionnel RF-LAMINATE pour RFEM
Manuel du module additionnel RF-LAMINATE pour RFEMManuel du module additionnel RF-LAMINATE pour RFEM
Manuel du module additionnel RF-LAMINATE pour RFEM
 
14668 concevez-votre-site-web-avec-php-et-mysql
14668 concevez-votre-site-web-avec-php-et-mysql14668 concevez-votre-site-web-avec-php-et-mysql
14668 concevez-votre-site-web-avec-php-et-mysql
 
464494 administrez-vos-bases-de-donnees-avec-mysql
464494 administrez-vos-bases-de-donnees-avec-mysql464494 administrez-vos-bases-de-donnees-avec-mysql
464494 administrez-vos-bases-de-donnees-avec-mysql
 
The Ring programming language version 1.8 book - Part 1 of 202
The Ring programming language version 1.8 book - Part 1 of 202The Ring programming language version 1.8 book - Part 1 of 202
The Ring programming language version 1.8 book - Part 1 of 202
 
Dej 1 30
Dej 1 30Dej 1 30
Dej 1 30
 
The Ring programming language version 1.3 book - Part 1 of 88
The Ring programming language version 1.3 book - Part 1 of 88The Ring programming language version 1.3 book - Part 1 of 88
The Ring programming language version 1.3 book - Part 1 of 88
 
The Ring programming language version 1.8 book - Part 3 of 202
The Ring programming language version 1.8 book - Part 3 of 202The Ring programming language version 1.8 book - Part 3 of 202
The Ring programming language version 1.8 book - Part 3 of 202
 
Chip_Ninja____Rapport_soutenance_finale
Chip_Ninja____Rapport_soutenance_finaleChip_Ninja____Rapport_soutenance_finale
Chip_Ninja____Rapport_soutenance_finale
 
The Ring programming language version 1.9 book - Part 3 of 210
The Ring programming language version 1.9 book - Part 3 of 210The Ring programming language version 1.9 book - Part 3 of 210
The Ring programming language version 1.9 book - Part 3 of 210
 
The Ring programming language version 1.2 book - Part 1 of 84
The Ring programming language version 1.2 book - Part 1 of 84The Ring programming language version 1.2 book - Part 1 of 84
The Ring programming language version 1.2 book - Part 1 of 84
 

Semelhante a Support formation vidéo : Maîtriser JavaScript

Formation Cours-Complet-JavaScript-2020.pdf
Formation Cours-Complet-JavaScript-2020.pdfFormation Cours-Complet-JavaScript-2020.pdf
Formation Cours-Complet-JavaScript-2020.pdfLéon André Ndong
 
dede
dededede
dedezaiim
 
vcbn
vcbnvcbn
vcbnzaiim
 
ututu
ututuututu
ututuzaiim
 
Lavorare con java 6
Lavorare con java 6Lavorare con java 6
Lavorare con java 6Pi Libri
 
Deep Learning : Application à la reconnaissance d’objets de classes multiples...
Deep Learning : Application à la reconnaissance d’objets de classes multiples...Deep Learning : Application à la reconnaissance d’objets de classes multiples...
Deep Learning : Application à la reconnaissance d’objets de classes multiples...Haytam EL YOUSSFI
 
The Ring programming language version 1.5.1 book - Part 1 of 180
The Ring programming language version 1.5.1 book - Part 1 of 180The Ring programming language version 1.5.1 book - Part 1 of 180
The Ring programming language version 1.5.1 book - Part 1 of 180Mahmoud Samir Fayed
 
The Ring programming language version 1.7 book - Part 1 of 196
The Ring programming language version 1.7 book - Part 1 of 196The Ring programming language version 1.7 book - Part 1 of 196
The Ring programming language version 1.7 book - Part 1 of 196Mahmoud Samir Fayed
 
The Ring programming language version 1.5.3 book - Part 1 of 184
The Ring programming language version 1.5.3 book - Part 1 of 184The Ring programming language version 1.5.3 book - Part 1 of 184
The Ring programming language version 1.5.3 book - Part 1 of 184Mahmoud Samir Fayed
 
Introduction á C-sharp
Introduction á C-sharpIntroduction á C-sharp
Introduction á C-sharpmedfa
 
Base-de-données.pdf
Base-de-données.pdfBase-de-données.pdf
Base-de-données.pdfdjallel2
 
The Ring programming language version 1.10 book - Part 1 of 212
The Ring programming language version 1.10 book - Part 1 of 212The Ring programming language version 1.10 book - Part 1 of 212
The Ring programming language version 1.10 book - Part 1 of 212Mahmoud Samir Fayed
 
The Ring programming language version 1.5.4 book - Part 1 of 185
The Ring programming language version 1.5.4 book - Part 1 of 185The Ring programming language version 1.5.4 book - Part 1 of 185
The Ring programming language version 1.5.4 book - Part 1 of 185Mahmoud Samir Fayed
 

Semelhante a Support formation vidéo : Maîtriser JavaScript (20)

Formation Cours-Complet-JavaScript-2020.pdf
Formation Cours-Complet-JavaScript-2020.pdfFormation Cours-Complet-JavaScript-2020.pdf
Formation Cours-Complet-JavaScript-2020.pdf
 
dede
dededede
dede
 
vcbn
vcbnvcbn
vcbn
 
ututu
ututuututu
ututu
 
Twido guide de programmation
Twido guide de programmationTwido guide de programmation
Twido guide de programmation
 
Lavorare con java 6
Lavorare con java 6Lavorare con java 6
Lavorare con java 6
 
C sharp
C sharpC sharp
C sharp
 
Cbdsys 2
Cbdsys 2Cbdsys 2
Cbdsys 2
 
Algo
AlgoAlgo
Algo
 
Deep Learning : Application à la reconnaissance d’objets de classes multiples...
Deep Learning : Application à la reconnaissance d’objets de classes multiples...Deep Learning : Application à la reconnaissance d’objets de classes multiples...
Deep Learning : Application à la reconnaissance d’objets de classes multiples...
 
The Ring programming language version 1.5.1 book - Part 1 of 180
The Ring programming language version 1.5.1 book - Part 1 of 180The Ring programming language version 1.5.1 book - Part 1 of 180
The Ring programming language version 1.5.1 book - Part 1 of 180
 
The Ring programming language version 1.7 book - Part 1 of 196
The Ring programming language version 1.7 book - Part 1 of 196The Ring programming language version 1.7 book - Part 1 of 196
The Ring programming language version 1.7 book - Part 1 of 196
 
The Ring programming language version 1.5.3 book - Part 1 of 184
The Ring programming language version 1.5.3 book - Part 1 of 184The Ring programming language version 1.5.3 book - Part 1 of 184
The Ring programming language version 1.5.3 book - Part 1 of 184
 
Adobe Photoshop CS5
Adobe Photoshop CS5Adobe Photoshop CS5
Adobe Photoshop CS5
 
Introduction á C-sharp
Introduction á C-sharpIntroduction á C-sharp
Introduction á C-sharp
 
Guide nvivo 9
Guide nvivo 9Guide nvivo 9
Guide nvivo 9
 
Base-de-données.pdf
Base-de-données.pdfBase-de-données.pdf
Base-de-données.pdf
 
Modelisation orientee objet
Modelisation orientee objetModelisation orientee objet
Modelisation orientee objet
 
The Ring programming language version 1.10 book - Part 1 of 212
The Ring programming language version 1.10 book - Part 1 of 212The Ring programming language version 1.10 book - Part 1 of 212
The Ring programming language version 1.10 book - Part 1 of 212
 
The Ring programming language version 1.5.4 book - Part 1 of 185
The Ring programming language version 1.5.4 book - Part 1 of 185The Ring programming language version 1.5.4 book - Part 1 of 185
The Ring programming language version 1.5.4 book - Part 1 of 185
 

Mais de SmartnSkilled

Formation : Comment rendre une réunion efficace ?
Formation : Comment rendre une réunion efficace ?Formation : Comment rendre une réunion efficace ?
Formation : Comment rendre une réunion efficace ?SmartnSkilled
 
Support cours : Les Data Sciences avec Python Langage - Partie II
Support cours : Les Data Sciences avec Python Langage - Partie IISupport cours : Les Data Sciences avec Python Langage - Partie II
Support cours : Les Data Sciences avec Python Langage - Partie IISmartnSkilled
 
Support tutoriel : Initiation à SAP ERP
Support tutoriel : Initiation à SAP ERPSupport tutoriel : Initiation à SAP ERP
Support tutoriel : Initiation à SAP ERPSmartnSkilled
 
Support formation : Construire et administrer vos conteneurs avec Docker
Support formation : Construire et administrer vos conteneurs avec DockerSupport formation : Construire et administrer vos conteneurs avec Docker
Support formation : Construire et administrer vos conteneurs avec DockerSmartnSkilled
 
Support formation : Maîtriser la comptabilité des opérations de fin d'exercice
Support formation : Maîtriser la comptabilité des opérations de fin d'exerciceSupport formation : Maîtriser la comptabilité des opérations de fin d'exercice
Support formation : Maîtriser la comptabilité des opérations de fin d'exerciceSmartnSkilled
 
Support cours : Comment rédiger un rapport ?
Support cours : Comment rédiger un rapport ?Support cours : Comment rédiger un rapport ?
Support cours : Comment rédiger un rapport ?SmartnSkilled
 
Support formation : Maîtriser les Data Sciences avec Python Language - Partie I
Support formation : Maîtriser les Data Sciences avec Python Language - Partie ISupport formation : Maîtriser les Data Sciences avec Python Language - Partie I
Support formation : Maîtriser les Data Sciences avec Python Language - Partie ISmartnSkilled
 
Support cours : Rédigez vos emails professionnels
Support cours : Rédigez vos emails professionnelsSupport cours : Rédigez vos emails professionnels
Support cours : Rédigez vos emails professionnelsSmartnSkilled
 
Support cours : Les phares du marketing
Support cours : Les phares du marketingSupport cours : Les phares du marketing
Support cours : Les phares du marketingSmartnSkilled
 
Support formation : La négociation commerciale coté vendeur
Support formation : La négociation commerciale coté vendeurSupport formation : La négociation commerciale coté vendeur
Support formation : La négociation commerciale coté vendeurSmartnSkilled
 
Support cours : Initiation à SAP ERP
Support cours : Initiation à SAP ERPSupport cours : Initiation à SAP ERP
Support cours : Initiation à SAP ERPSmartnSkilled
 
Tutoriel : Online English Expertise
Tutoriel : Online English ExpertiseTutoriel : Online English Expertise
Tutoriel : Online English ExpertiseSmartnSkilled
 
Formation : Mettre en place une stratégie commerciale
Formation : Mettre en place une stratégie commercialeFormation : Mettre en place une stratégie commerciale
Formation : Mettre en place une stratégie commercialeSmartnSkilled
 
Support cours : Cours d'Espagnol Débutant (A1-A2)
Support cours : Cours d'Espagnol Débutant (A1-A2)Support cours : Cours d'Espagnol Débutant (A1-A2)
Support cours : Cours d'Espagnol Débutant (A1-A2)SmartnSkilled
 
Support cours : Vos premiers pas avec le pare feu CISCO ASA
Support cours : Vos premiers pas avec le pare feu CISCO ASASupport cours : Vos premiers pas avec le pare feu CISCO ASA
Support cours : Vos premiers pas avec le pare feu CISCO ASASmartnSkilled
 
Support Tutoriel : Online English Expertise
Support Tutoriel : Online English ExpertiseSupport Tutoriel : Online English Expertise
Support Tutoriel : Online English ExpertiseSmartnSkilled
 
Support formation en ligne : Manager et auditer les risques informatiques
Support formation en ligne : Manager et auditer les risques informatiquesSupport formation en ligne : Manager et auditer les risques informatiques
Support formation en ligne : Manager et auditer les risques informatiquesSmartnSkilled
 
Support Tutoriel : Art oratoire et prise de parole en public
Support Tutoriel : Art oratoire et prise de parole en publicSupport Tutoriel : Art oratoire et prise de parole en public
Support Tutoriel : Art oratoire et prise de parole en publicSmartnSkilled
 
Support formation en ligne: L'estime de soi
Support formation en ligne: L'estime de soiSupport formation en ligne: L'estime de soi
Support formation en ligne: L'estime de soiSmartnSkilled
 
Support formation vidéo : Les phares du marketing
Support formation vidéo : Les phares du marketingSupport formation vidéo : Les phares du marketing
Support formation vidéo : Les phares du marketingSmartnSkilled
 

Mais de SmartnSkilled (20)

Formation : Comment rendre une réunion efficace ?
Formation : Comment rendre une réunion efficace ?Formation : Comment rendre une réunion efficace ?
Formation : Comment rendre une réunion efficace ?
 
Support cours : Les Data Sciences avec Python Langage - Partie II
Support cours : Les Data Sciences avec Python Langage - Partie IISupport cours : Les Data Sciences avec Python Langage - Partie II
Support cours : Les Data Sciences avec Python Langage - Partie II
 
Support tutoriel : Initiation à SAP ERP
Support tutoriel : Initiation à SAP ERPSupport tutoriel : Initiation à SAP ERP
Support tutoriel : Initiation à SAP ERP
 
Support formation : Construire et administrer vos conteneurs avec Docker
Support formation : Construire et administrer vos conteneurs avec DockerSupport formation : Construire et administrer vos conteneurs avec Docker
Support formation : Construire et administrer vos conteneurs avec Docker
 
Support formation : Maîtriser la comptabilité des opérations de fin d'exercice
Support formation : Maîtriser la comptabilité des opérations de fin d'exerciceSupport formation : Maîtriser la comptabilité des opérations de fin d'exercice
Support formation : Maîtriser la comptabilité des opérations de fin d'exercice
 
Support cours : Comment rédiger un rapport ?
Support cours : Comment rédiger un rapport ?Support cours : Comment rédiger un rapport ?
Support cours : Comment rédiger un rapport ?
 
Support formation : Maîtriser les Data Sciences avec Python Language - Partie I
Support formation : Maîtriser les Data Sciences avec Python Language - Partie ISupport formation : Maîtriser les Data Sciences avec Python Language - Partie I
Support formation : Maîtriser les Data Sciences avec Python Language - Partie I
 
Support cours : Rédigez vos emails professionnels
Support cours : Rédigez vos emails professionnelsSupport cours : Rédigez vos emails professionnels
Support cours : Rédigez vos emails professionnels
 
Support cours : Les phares du marketing
Support cours : Les phares du marketingSupport cours : Les phares du marketing
Support cours : Les phares du marketing
 
Support formation : La négociation commerciale coté vendeur
Support formation : La négociation commerciale coté vendeurSupport formation : La négociation commerciale coté vendeur
Support formation : La négociation commerciale coté vendeur
 
Support cours : Initiation à SAP ERP
Support cours : Initiation à SAP ERPSupport cours : Initiation à SAP ERP
Support cours : Initiation à SAP ERP
 
Tutoriel : Online English Expertise
Tutoriel : Online English ExpertiseTutoriel : Online English Expertise
Tutoriel : Online English Expertise
 
Formation : Mettre en place une stratégie commerciale
Formation : Mettre en place une stratégie commercialeFormation : Mettre en place une stratégie commerciale
Formation : Mettre en place une stratégie commerciale
 
Support cours : Cours d'Espagnol Débutant (A1-A2)
Support cours : Cours d'Espagnol Débutant (A1-A2)Support cours : Cours d'Espagnol Débutant (A1-A2)
Support cours : Cours d'Espagnol Débutant (A1-A2)
 
Support cours : Vos premiers pas avec le pare feu CISCO ASA
Support cours : Vos premiers pas avec le pare feu CISCO ASASupport cours : Vos premiers pas avec le pare feu CISCO ASA
Support cours : Vos premiers pas avec le pare feu CISCO ASA
 
Support Tutoriel : Online English Expertise
Support Tutoriel : Online English ExpertiseSupport Tutoriel : Online English Expertise
Support Tutoriel : Online English Expertise
 
Support formation en ligne : Manager et auditer les risques informatiques
Support formation en ligne : Manager et auditer les risques informatiquesSupport formation en ligne : Manager et auditer les risques informatiques
Support formation en ligne : Manager et auditer les risques informatiques
 
Support Tutoriel : Art oratoire et prise de parole en public
Support Tutoriel : Art oratoire et prise de parole en publicSupport Tutoriel : Art oratoire et prise de parole en public
Support Tutoriel : Art oratoire et prise de parole en public
 
Support formation en ligne: L'estime de soi
Support formation en ligne: L'estime de soiSupport formation en ligne: L'estime de soi
Support formation en ligne: L'estime de soi
 
Support formation vidéo : Les phares du marketing
Support formation vidéo : Les phares du marketingSupport formation vidéo : Les phares du marketing
Support formation vidéo : Les phares du marketing
 

Último

La Projection orthogonale en dessin technique
La Projection orthogonale en dessin techniqueLa Projection orthogonale en dessin technique
La Projection orthogonale en dessin techniquessuser4dbdf2
 
Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024frizzole
 
Semaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxSemaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxMartin M Flynn
 
Formation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementFormation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementM2i Formation
 
Rapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFERapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFEAhmam Abderrahmane
 
Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2JeanLucHusson
 
Exercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositionsExercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositionslaetitiachassagne
 

Último (7)

La Projection orthogonale en dessin technique
La Projection orthogonale en dessin techniqueLa Projection orthogonale en dessin technique
La Projection orthogonale en dessin technique
 
Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024
 
Semaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxSemaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptx
 
Formation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementFormation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changement
 
Rapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFERapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFE
 
Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2
 
Exercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositionsExercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositions
 

Support formation vidéo : Maîtriser JavaScript

  • 1. 0
  • 2. 0 Table des matières Module 1 – Brève introduction avant de commencer à coder............................................................... 5 Les moteurs de rendu.......................................................................................................................... 5 Histoire du JavaScript.......................................................................................................................... 7 Activer l'exécution de JavaScript dans le navigateur .......................................................................... 8 Google Chrome................................................................................................................................ 8 Firefox.............................................................................................................................................. 9 Internet Explorer 10 et supérieur.................................................................................................. 10 Microsoft Edge .............................................................................................................................. 11 Tester si JavaScript est activé............................................................................................................ 11 Editeurs de code HTML/XHTML/CSS/JavaScript ............................................................................... 12 Débogage dans le navigateur............................................................................................................ 13 A savoir avant de commencer à coder.............................................................................................. 14 Module 2 - Le langage JavaScript .......................................................................................................... 15 Squelette standard............................................................................................................................ 15 Où insérer le code JavaScript ?.......................................................................................................... 15 Des commentaires dans le code........................................................................................................ 20 Une fonction dans une balise <script>.............................................................................................. 20 Gestion des exceptions ..................................................................................................................... 23 Mise en place d'un gestionnaire d'événements................................................................................ 28 Variables et types de données .......................................................................................................... 31 Conversions de types ........................................................................................................................ 32 Fonction eval()............................................................................................................................... 32 Fonction parseInt()........................................................................................................................ 33 Fonction parseFloat() .................................................................................................................... 33 Module 3 – Tout d'horizon du langage JavaScript ................................................................................ 36 Opérateurs et expressions ................................................................................................................ 36 Opérateurs d’affectation............................................................................................................... 36 Opérateurs arithmétiques............................................................................................................. 37 Opérateurs relationnels et logiques.............................................................................................. 37 Opérateurs dédiés aux chaînes de caractères............................................................................... 38 Opérateurs d’incrémentation........................................................................................................ 39 Opérations intervenant au niveau des bits................................................................................... 41 L'instruction de contrôle if... else [.. else] ......................................................................................... 41 Instructions répétitives...................................................................................................................... 45
  • 3. 1 L'instruction for ............................................................................................................................. 45 Un cas particulier de l'instruction for................................................................................................ 49 L'instruction while............................................................................................................................. 51 Quelques astuces à connaitre sur les boucles................................................................................... 51 Définir une boucle infinie.............................................................................................................. 51 L'instruction continue.................................................................................................................... 51 L'instruction break......................................................................................................................... 56 Définition d'un tableau...................................................................................................................... 56 Module 4 – Programmation objet en JavaScript................................................................................... 63 Les objets par défaut de JavaScript................................................................................................... 63 L'objet Date ....................................................................................................................................... 63 L'objet Math ...................................................................................................................................... 66 Utilisation d'un objet par défaut....................................................................................................... 67 L'objet String...................................................................................................................................... 70 Exemple 1 - Caractères de grande taille et de petite taille : méthodes big() et small()................ 71 Exemple 2 - Attributs gras, italique et barré : méthodes blink(), bold(), italics() et strike(). ........ 71 Exemple 3 - Extraction de caractères : méthode charAt(). ........................................................... 71 Exemple 4 - Caractères non proportionnels : méthode fixed()..................................................... 72 Exemple 5 - Modification de la taille des caractères : méthode fontsize()................................... 72 Exemple 6 - Position d'une sous-chaîne dans une chaîne : méthodes indexOf() et lastIndexOf(). ....................................................................................................................................................... 72 Exemple 7 - Définition d'un lien hypertexte : méthode link()....................................................... 72 Exemple 8 - Caractères en indice et en exposant : méthodes sub() et sup()................................ 72 Exemple 9 - Extraction d'une sous-chaîne : méthode substring()................................................. 73 Exemple 10 - Caractères majuscules et minuscules : méthodes toLowerCase() et toUpperCase(). ....................................................................................................................................................... 73 Les expressions régulières – l'objet RegExp...................................................................................... 73 Les objets liés au navigateur ............................................................................................................. 77 L'objet history.................................................................................................................................... 80 L'objet location.................................................................................................................................. 82 L'objet navigator................................................................................................................................ 84 Sur Internet Explorer 11................................................................................................................ 85 Sur Microsoft Edge ........................................................................................................................ 86 Sur Google Chrome ....................................................................................................................... 86 Sur Firefox...................................................................................................................................... 86 L'objet document .............................................................................................................................. 87
  • 4. 2 Le tableau elements[]........................................................................................................................ 91 L'objet window.................................................................................................................................. 93 Extension des objets prédéfinis......................................................................................................... 96 Définition d'objets avec la classe Object........................................................................................... 99 Définition d'objets avec la notation JSON....................................................................................... 104 Module 5 - Evénements et données ................................................................................................... 107 Accès aux éléments du DOM........................................................................................................... 107 La fonction document.getElementById() .................................................................................... 107 Exercices sur la fonction getElementById ....................................................................................... 110 Associer dynamiquement un événement à un élément................................................................. 116 Passage de paramètres littéraux dans la fonction événementielle ................................................ 118 Passage du mot-clé this dans une fonction..................................................................................... 121 Passage du mot-clé event dans une fonction ................................................................................. 123 Effet Rollover................................................................................................................................... 128 Version moderne du gestionnaire d'événements........................................................................... 133 Suppression d'un gestionnaire d'événements................................................................................ 135 Redirection en JavaScript ................................................................................................................ 138 Cookies ............................................................................................................................................ 138 Formulaires - Validation en HTML5................................................................................................. 139 Validation de formulaires en JavaScript.......................................................................................... 143 Module 6 - Interaction JavaScript CSS................................................................................................. 148 Accès aux propriétés CSS en JavaScript........................................................................................... 148 Ajouter/supprimer une classe......................................................................................................... 151 L'objet styleSheets........................................................................................................................... 154 Module 7 - AJAX .................................................................................................................................. 159 Le concept d’échanges asynchrones avec HTTP ............................................................................. 159 Vocabulaire jQuery.......................................................................................................................... 159 Installation du serveur WampServer............................................................................................... 161 Réagir au clic sur un bouton en jQuery........................................................................................... 165 Charger un fichier avec AJAX........................................................................................................... 166 Charger une partie d'un fichier ....................................................................................................... 171 - Requête GET.................................................................................................................................. 173 Requête POST.................................................................................................................................. 178 Charger des données JSON.............................................................................................................. 182 La méthode $.ajax()......................................................................................................................... 188 Module 8 – Les API JavaScript............................................................................................................. 192
  • 5. 3 PI File ............................................................................................................................................... 192 Drag and Drop ................................................................................................................................. 195 Géolocalisation................................................................................................................................ 199 Premier épisode : capture des coordonnées et affichage au format texte ................................ 199 Deuxième épisode : Capture de la longitude et de la latitude et affichage sur une carte.......... 201 Troisième épisode : capture d'une position en mouvement et affichage sur une carte ............ 204 Local Storage ................................................................................................................................... 205 Web Workers................................................................................................................................... 209 WebGL............................................................................................................................................. 211 Première étape - Définition de la scène...................................................................................... 211 Deuxième étape - Définition de la caméra.................................................................................. 212 Troisième étape - Définition du renderer ................................................................................... 212 Quatrième étape - Définition des éléments à afficher................................................................ 212 Animation du cube ...................................................................................................................... 215 Utilisation d'une texture.............................................................................................................. 217 Pour terminer...................................................................................................................................... 219
  • 6. 4 Je m'appelle Michel Martin et je suis instructeur JavaScript en entreprise. Ce livre va vous montrer comment utiliser le langage JavaScript pour dynamiser vos pages Web. Il s'adresse à un public débutant et intermédiaire. Lorsque vous l'aurez entièrement lu, vous saurez comment :  Utiliser les instructions du langage JavaScript. Vous pourrez ainsi écrire toutes sortes de codes pour répondre à toutes sortes de situation. De la validation locale de formulaires à l'utilisation d'API en passant par la modification du DOM, et bien d'autres sujets encore.  Déboguer votre code pour trouver rapidement l'instruction ou les instructions qui bloquent son exécution ou provoquent des comportements que vous n'avez pas prévus.  Accéder aux objets par défaut du langage JavaScript et créer vos propres objets. Tout en améliorant les possibilités du langage, vous pourrez définir des objets qui correspondent exactement à ce dont vous avez besoin dans vos projets personnels ou ceux développés dans votre entreprise.  Créer du code pour réagir aux événements de l'utilisateur et du système. Ce code permettra par exemple de réagir aux clics souris, aux frappes sur le clavier, au redimensionnement de la fenêtre du navigateur ou encore à l'horloge système. Lorsqu'un tel événement se produira, le contenu de la page pourra changer de façon dynamique pour améliorer l'expérience de l'utilisateur.  Interagir avec un programme serveur en AJAX. Pour être le plus efficace possible, les échanges AJAX se feront via la bibliothèque jQuery.  Utiliser des API pour faciliter vos développements : drag and drop, géolocalisation, local storage, web workers, 3D avec WebGL. Il ne s'agit là que de quelques-uns des sujets abordés dans cette formation. Que vous débutiez en programmation JavaScript ou que vous ayez déjà une certaine expérience, vous y trouverez un ensemble de techniques qui simplifieront vos futurs projets, raccourciront vos temps de développement et augmenteront sa pérennité. Tout au long de l'ouvrage, de nombreux exercices vous sont proposés. Pour bien apprendre à programmer en JavaScript, vous devez jouer le jeu et vous appliquer à résoudre chacun des exercices proposés. Rassurez-vous, la difficulté ira croissante. Et vous serez en mesure de résoudre les premiers exercices même si vous n'avez actuellement aucune connaissance en JavaScript. Je vous souhaite une bonne lecture et beaucoup de découvertes toutes aussi passionnantes les unes que les autres !
  • 7. 5 Module 1 – Brève introduction avant de commencer à coder Avant de vous lancer dans la programmation, je vous propose de prendre un peu de temps pour comprendre comment fonctionnent les navigateurs Web, pour savoir comment activer et désactiver l'exécution de JavaScript dans un navigateur, tester si votre code pourra s'exécuter dans un navigateur quelconque. Vous découvrirez également un éditeur de code très performant et entièrement gratuit. Nous l'utiliserons tout au long de cette formation. Vous verrez également comment déboguer le code JavaScript ainsi que quelques détails qu'il est bon d'avoir en mémoire lorsqu'on désire coder en JavaScript. Les moteurs de rendu Avant de commencer votre apprentissage du langage JavaScript, je vais vous montrer pourquoi tous les navigateurs ne se comportent pas de la même façon lorsqu'ils exécutent un même code composé d'instructions HTML, CSS et JavaScript. En plus de leur interface, les navigateurs se distinguent par leur "moteur de rendu". C'est lui qui détermine comment sont interprétées puis affichées les instructions HTML, CSS et JavaScript. Pour en savoir plus à ce sujet, consultez les pages Wikipédia relatives aux navigateurs Web classés par moteur de rendu. Ces pages sont accessibles sur http://goo.gl/octwhx. Remarque Une petite remarque sur ce lien. Comme vous l'avez peut-être constaté, ce lien relativement court s'est transformé en une URL bien plus longue lorsque vous avez cliqué dessus. . Il a été obtenu en allant sur le site http://goo.gl. Si vous prononcez "goo.gl" à voix haute sans le point, vous aurez compris que le géant Google est à l'origine de ce site. Goo.gl est un réducteur d'URL. Il permet de compacter les URL afin qu'elles soient plus faciles à saisir. Je l'utiliserai systématiquement dans cette formation. Pour raccourcir une URL, il suffit d'aller sur http://www.goo.gl, de la coller dans la zone de texte et de cliquer sur Shorten URL. Revenez à la page Wikipédia. Comme vous pouvez le voir, il existe essentiellement cinq moteurs de rendu : Gecko, KHTML, Presto, Trident et Webkit.
  • 8. 6 Cliquez sur le lien Gecko. Parmi les illustres inconnus qui s'affichent sur la nouvelle page, vous pouvez voir Firefox. Le navigateur Firefox utilise donc le moteur de rendu Gecko. Revenez à la page précédente et cliquez sur le lien KHTML. Les navigateurs qui utilisent ce moteur de recherche ne sont pas couramment utilisés sous Windows. Revenez à la page précédente et cliquez sur le lien Presto. Comme vous le voyez, le navigateur Opera utilise le moteur de rendu Presto. Revenez à la page précédente et cliquez sur le lien Trident. Le navigateur Internet Explorer utilise le moteur de rendu Trident. Revenez à la page précédente et cliquez sur le lien Webkit. Le navigateur Google Chrome utilise le moteur de rendu Webkit. Bien qu'il ne soit pas listé sur cette page, le nouveau navigateur Microsoft Edge, utilise également le moteur de rendu Webkit. En choisissant d'abandonner le moteur Trident et en adoptant le moteur Webkit, Microsoft tente une opération de séduction auprès de ses utilisateurs en laissant derrière lui un navigateur qui avait une mauvaise image auprès de beaucoup d'utilisateurs et de développeurs Web. Si votre ordinateur est équipé de Windows 10, Microsoft Edge est installé par défaut. Je ne sais pas ce que vous en pensez, mais pour ma part, je trouve ce nouveau navigateur digne d'intérêt… Les trois navigateurs vedettes utilisent donc trois moteurs de rendu différents : Gecko pour Firefox, Webkit pour Google Chrome et Microsoft Edge et Trident pour Internet Explorer. Etant donné que
  • 9. 7 Microsoft tente de remplacer le vieillissant Internet Explorer par son tout nouveau Microsoft Edge, le monde du Web sur PC sera donc rendu avec les moteurs Gecko et Webkit. Nous allons maintenant nous intéresser à la compatibilité de la norme ECMAScript avec les moteurs de rendu Gecko et Webkit. Pour cela, rendez-vous sur l'URL raccourcie http://goo.gl/CQ6SMi : Dans ce livre, nous utiliserons la version 5 d'ECMAScript, c'est-à-dire la version actuellement la plus commune. Comme vous pouvez le constater, cette version est bien compatible avec la plupart des moteurs de rendu. En ce qui concerne le contenu de ce cours, tout ce qui sera dit fonctionnera à 100% avec les navigateurs Google Chrome, Firefox et Microsoft Edge. Histoire du JavaScript JavaScript est un langage objet interprété dont les instructions sont stockées en clair dans des pages HTML. Son accès est très simple pour les non-programmeurs. Avec cette formation, vous allez apprendre à intégrer un code JavaScript dans vos pages Web. Vous pourrez, par exemple, animer textes et graphiques et réagir aux actions de l'utilisateur telles que clic sur une zone, déplacement de la souris, etc.. JavaScript a été créé en 1995 par Brendan Eich pour Netscape sous le nom ECMAScript. Il est apparu en 1996 dans le navigateur Netscape. Les différentes versions du langage JavaScript sont basées sur ECMAScript : • ES 1 et ES 2 sont les prémices du langage JavaScript ; • ES 3 (sorti en décembre 1999), est fonctionnel sur tous les navigateurs, sauf sur les vieilles versions d'Internet Explorer ; • ES 4 a été abandonné en raison de modifications peu appréciées des développeurs ; • ES 5 (sorti en décembre 2009) est la version actuellement la plus utilisée ;
  • 10. 8 • ES 6 (sortie en Juin 2015), apporte des fonctionnalités complémentaires demandées par les développeurs (classes, modules, boucles for/of, générateurs, etc.) ; • ES 7 est actuellement en cours de conception. Cette formation portera sur la version 5 d’ECMAScript. Activer l'exécution de JavaScript dans le navigateur Pour que vos scripts JavaScript puissent s’exécuter dans le navigateur, il est nécessaire que l’exécution de JavaScript soit activée dans le navigateur. Ce livre va vous montrer comment activer/désactiver JavaScript dans Google Chrome, Firefox et Internet Explorer, et vous donner un script permettant de tester si JavaScript est activé. Google Chrome 1. Cliquez sur l'icône Personnaliser et contrôler Google Chrome, dans l'angle supérieur droit de la fenêtre et choisissez Paramètres dans le menu. 2. Tout en bas de la page, cliquez sur le lien Afficher les paramètres avancés. 3. Sous Confidentialité, cliquez sur le bouton Paramètres de contenu. 4. Une boîte de dialogue s'affiche. Sous JavaScript, choisissez une des deux options pour autoriser ou interdire l'exécution de JavaScript. 5. Cliquez sur OK pour valider votre choix, fermez le navigateur et rouvrez-le pour prendre en compte le nouveau réglage.
  • 11. 9 Firefox 1. Dans la barre d’adresse du navigateur, tapez about:config et appuyez sur la touche Entrée du clavier. 2. Si le message "Attention, danger" s'affiche, cliquez sur Je ferai attention, promis ! 3. Dans la zone de texte Rechercher, tapez javascript.enabled pour accéder rapidement à ce paramètre. 4. Double-cliquez sur la ligne javascript.enabled pour modifier la valeur booléenne qui lui est attribuée. JavaScript sera activé si la valeur true est affectée à ce paramètre. Il sera désactivé dans le cas contraire. 5. Fermez le navigateur et rouvrez-le pour prendre en compte le nouveau réglage.
  • 12. 10 Internet Explorer 10 et supérieur 1) Dans le menu du navigateur, cliquez sur l'icône Outils (la roue crantée, en haut et à droite de la fenêtre) et sélectionnez Options Internet. 2) Dans la boîte de dialogue Options Internet, sélectionnez l'onglet Sécurité. 3) Cliquez sur Internet dans le premier groupe d'options, puis sur Personnaliser le niveau dans le deuxième. 4) La boîte de dialogue Paramètres de sécurité – Zone Internet s'affiche. Dans la zone de liste centrale, trouvez l'entrée Script, déplacez-vous un peu plus vers le bas et choisissez Activer, Demander ou Désactiver sous Scripts ASP en fonction de l'effet recherché. 5) Validez en cliquant sur OK, cliquez sur Oui dans la boîte de dialogue Avertissement, cliquez sur OK et redémarrez le navigateur pour prendre en compte le nouveau réglage.
  • 13. 11 Microsoft Edge JavaScript est activé par défaut. Il n'est pas possible de le désactiver depuis l'application. Tester si JavaScript est activé Pour détecter si JavaScript est désactivé, vous allez définir un bloc <noscript> </noscript> entre les balises <body> et </body> d'un document HTML. Ajoutez ces instructions dans un document HTML5 minimal : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>NoScript</title> </head> <body> <noscript> Pour accéder à toutes les fonctionnalités de cette page, vous devez activer JavaScript </noscript>
  • 14. 12 </body> </html> Si le texte inséré entre les balises <noscript> et </noscript> s'affiche, cela signifie que l'exécution de code JavaScript est désactivée dans le navigateur. Vous pouvez alors proposer un lien qui redirige l'utilisateur vers une page de votre site dans laquelle sont données les instructions nécessaires pour activer JavaScript dans les navigateurs les plus courants. Editeurs de code HTML/XHTML/CSS/JavaScript La saisie du code HTML peut se faire dans un simple éditeur de texte, comme le Bloc-Notes de Windows. Mais vous lui préfèrerez un éditeur de code à coloration syntaxique. Plusieurs éditeurs de ce type sont diffusés sous la forme de freewares. Vous utiliserez par exemple :  NotePad ++, que vous pouvez télécharger en vous rendant sur la page https://notepad- plus-plus.org/fr/. Ou encore :  Sublime Text 2 ou 3, que vous pouvez télécharger en vous rendant sur les pages http://www.sublimetext.com/2 ou https://www.sublimetext.com/3. Dans ce livre, nous allons utiliser l'éditeur Sublime Text 2 sous Windows 10. Si votre ordinateur tourne sous OSX ou Linux, il existe également une version de l'éditeur de code pour ces systèmes. L'ordinateur utilisé pour rédiger cet ouvrage est équipé de Windows 10 64 bits. Pour télécharger Sublime Text 2, il suffit de cliquer sur Windows 64 bit, et d'attendre la fin du téléchargement. Le fichier téléchargé est alors exécuté en cliquant sur Exécuter et en acceptant les options par défaut. Pour exécuter Sublime Text 2, il suffit maintenant d'appuyer sur la touche Windows du clavier, de taper sublime et de cliquer sur Sublime Text 2 dans la partie supérieure du menu Démarrer. Voici à quoi ressemble la fenêtrer de l'éditeur :
  • 15. 13 Débogage dans le navigateur Tous les navigateurs Web actuels intègrent un débogueur accessible avec la touche de fonction F12. Ici, par exemple dans Microsoft Edge : Ou encore dans Google Chrome :
  • 16. 14 Quel que soit le navigateur utilisé, les possibilités sont identiques. La différence se fait au niveau de l’interface : • L'onglet Console permet de voir les erreurs de code. Elles sont indiquées par des liens. Il suffit de cliquer dessus pour visualiser le message d'erreur associé et accéder à la ligne correspondante dans le navigateur. Notez cependant que le code n'est pas éditable dans le navigateur. • L'onglet Sources donne accès au code source de la page Web, permet de définir des points d'arrêt et de modifier le code CSS de la page. • Les onglets Elements et Inspecter permettent d'accéder au DOM depuis le code source et inversement. En les utilisant, il vous suffit de cliquer sur une instruction HTML pour afficher l'élément correspondant dans le code. Et inversement de cliquer sur un élément dans le DOM pour afficher le bloc de code correspondant dans le navigateur. A savoir avant de commencer à coder Avant d'aborder le côté pratique du langage, vous devez connaître quelques détails très importants : 1. Pour inclure du code JavaScript dans une page HTML, je vous conseille de faire appel à une bonne documentation. Outre cet ouvrage, vous trouverez de nombreux exemples sur le site W3Schools, à l'adresse http://www.w3schools.com/js/default.asp. 2. Le langage JavaScript est "case sensitive" : si vous nommez une variable resultat, n'essayez pas de l'initialiser ou de lire sa valeur en utilisant le nom Resultat ou RESULTAT. 3. JavaScript est un langage objet. Il utilise donc des objets pour communiquer avec le monde extérieur. Par exemple, l'objet window correspond à la fenêtre affichée dans le navigateur, et l'objet location à l'URL courant. Certains objets possèdent des propriétés accessibles en lecture et/ou en écriture. A titre d'exemple, supposons qu'un formulaire comporte une zone de texte de nom resultat. La propriété value fera référence au contenu de cette zone de texte. Elle sera accessible en lecture et en écriture par l'expression form.resultat.value. A chaque objet sont associées des méthodes qui facilitent sa manipulation. 4. Lorsqu'une expression JavaScript fait référence à une chaîne de caractères qui fait elle-même référence à une ou plusieurs autres chaînes de caractères, il convient d'alterner les guillemets et les apostrophes. Remarquez les apostrophes autour des chaînes Texte1, Texte2 et Texte3 dans l'exemple ci-après : <input type = "button" value = "Affiche" onclick = "affiche('Texte1','Texte2','Texte3')">
  • 17. 15 Module 2 - Le langage JavaScript Ce module fait un tour d'horizon complet du langage JavaScript. Plusieurs pages Web composées de codes HTML, CSS et JavaScript vont y être développées. Je vous conseille de créer un dossier facilement accessible. Par exemple sur le bureau de Windows. Toutes les pages Web développées seront sauvegardées dans ce dossier. Squelette standard Tous les exemples de cette formation seront développés à partir d'un squelette HTML5 standard. Je vous suggère de définir un dossier spécifique à cette formation, sur le bureau de Windows ou de votre système par exemple. Ouvrez Sublime Text 2 et définissez le fichier squelette.html : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> </title> </head> <body> </body> </html> La première instruction indique au navigateur que le document utilise du code HTML5. Les balises <html> et </html> délimitent le document HTML5 La balise <head> contient des balises à destination du navigateur. Ici, la balise <meta> définit le jeu de caractères utilisé : utf-8. Il est universellement utilisé partout dans le monde car il permet d'afficher les caractères spécifiques à toutes les langues. C'est également entre les balises <head> et </head> que vous insèrerez vos feuilles de style internes et vos fonctions JavaScript. Nous y reviendrons dans la suite de la formation. La balise <title> définit le titre du document. Ce titre sera affiché dans l'onglet actif du navigateur. Enfin, les balises <body> et </body> correspondent au DOM : les balises qui seront insérées ici seront rendues dans la fenêtre du navigateur. Dans la plupart des cas, c'est également ici que vous insèrerez votre code JavaScript. Sauvegardez ce fichier dans le dossier de la formation. Vous l'utiliserez comme base de tous les codes développés dans les prochains cours de cette formation. Où insérer le code JavaScript ? L'intégration de code JavaScript dans une page HTML peut se faire de deux façons :  A l'aide d'une balise <script> </script>.  En mettant en place un gestionnaire d'événements.
  • 18. 16 Dans le premier cas, le code est exécuté pendant le chargement de la page, à moins qu'il ne soit défini dans une fonction. Dans le deuxième cas, il est en mesure de réagir à des événements utilisateur : clic, focus ou perte de focus sur un contrôle, appui sur le bouton Submit dans un formulaire, etc., etc.. Pour définir du code JavaScript dans une balise <script></script>, il suffit d'insérer cette balise entre les balises <body> et </body>. Une ou plusieurs instructions JavaScript peuvent alors être placées entre les balises <script> et </script>. <body> <script> /* Une ou plusieurs instructions JavaScript */ </script> </body> Lors de mes cours JavaScript en entreprise, deux questions reviennent fréquemment. J'ai pensé que vous aussi, vous vous les poseriez. Première question : Est-ce qu'il est possible d'avoir plusieurs balises <script></script> dans un document HTML ? Oui, tout à fait. Le code s'exécute de haut en bas. Le code JavaScript compris entre les premières balises <script> et </script> sera donc exécuté avant le code compris entre les deuxièmes balises <script></script>. Ainsi de suite… Deuxième question : Vaut-il mieux placer le code JavaScript entre les balises <head> et </head> ou entre les balises <body> et </body> ? Eh bien … tout dépend. Le code JavaScript placé entre <head> et </head> est généralement constitué de fonctions. Ces fonctions ne seront pas exécutées, mais placées en mémoire, prêtes à être exécutées lorsqu'elles seront appelées. En général, il est judicieux de placer les fonctions JavaScript entre <head> et </head> pour être sûr qu'elles sont disponibles au moment où on les appelle dans le corps du document (entre <body> et </body>). Une autre règle générale : ne placez pas des instructions JavaScript qui provoquent un affichage entre <head> et </head>. Cette section du document HTML n'a pas pour vocation d'afficher quelque chose dans le navigateur. Par contre, elle peut très bien héberger des fonctions JavaScript. Nous y reviendrons dans la suite du livre. Nous allons aller un tout petit peu plus loin en utilisant l'instruction JavaScript document.wite(). Cette instruction écrit un texte alphanumérique dans le DOM. Si vous vous demandez ce qu'est le DOM, sachez qu'il s'agit de l'abréviation du terme anglais Document Object Model. En d'autres termes, le document HTML. Ou, pour faire encore plus simple, à la zone d'affichage du navigateur. Commencez par insérer un texte entre les balises <body> et </body>. Puis, insérez une balise <script></script> et l'instruction JavaScript document.write() à la suite : <body> <p>Ce texte provient de la section BODY du document HTML.</p> <script> document.write('Alors que celui-là est écrit par une instruction JavaScript.);
  • 19. 17 </script> </body> D'après vous, quel texte s'affichera en premier ? Celui qui a été défini dans la balise <p> ou celui défini dans document.write() ? Comme je l'ai déjà dit, le code s'exécute de haut en bas. Etant donné que la balise <p> est écrite avant l'instruction document.write(), c'est le texte de la balise <p> qui s'affichera en premier. Vérifiez-le en ouvrant ce document dans le navigateur par défaut : Voici le code complet : <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Affichage dans le document</title> </head> <body> <p>Ce texte provient de la section BODY du document HTML.</p> <script> document.write(Alors que celui-là est écrit par une instruction JavaScript.'); </script> </body> </html> Pour afficher quelque chose dans le document, vous auriez également pu utiliser la fonction JavaScript alert(). A titre d'exemple, mettez un double slash (//) devant l'instruction document.write() pour la mettre en commentaire et insérez un appel à la fonction alert() juste après : alert('ceci est un message JavaScript');
  • 20. 18 Voici le résultat : Pour en terminer avec l'affichage en JavaScript, notez que vous pouvez afficher du texte dans la console du navigateur en utilisant l'instruction console.log(). Insérez un double-slash devant l'instruction alert() pour la mettre en commentaires et ajoutez une instruction console.log() juste après : console.log('Texte affiché dans la console'); Pour visualiser le texte dans la console, appuyez sur la touche F12 du clavier et basculez sur l'onglet Console. Voici ce que vous devez obtenir :
  • 21. 19 Une dernière remarque avant de terminer cette section : si vous le souhaitez, vous pouvez stocker tout votre code JavaScript dans un fichier externe d'extension .js. Vous ferez référence à ce fichier avec les instructions HTML suivantes : <script src="fichier.js"></script> Copiez les instructions JavaScript sans les balises <script> et </script> dans le fichier 09- premiers-pas.js et insérez une référence à ce fichier dans la balise <script>. Voici le code du fichier 09-premiers-pas.html : <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Affichage dans le document</title> </head> <body> <p>Ce texte provient de la section BODY du document HTML.</p> <script src="09.js"></script> </body>
  • 22. 20 </html> Fichier 09.js document.write('Alors que celui-là est écrit par une instruction JavaScript.'); alert('ceci est un message JavaScript'); console.log('Texte affiché dans la console'); Bien entendu, le résultat est le même. Ici, comme les commentaires ont été supprimés, un texte s'affiche dans le document, puis dans une boîte de dialogue et enfin dans la console du navigateur. Des commentaires dans le code Quel que soit le langage utilisé, il est toujours intéressant d'insérer des commentaires dans un programme. Cela facilite sa maintenance et précise les points épineux. Vous le savez certainement, pour insérer un commentaire en HTML, on utilise une balise qui commence par <!-- et qui se termine par -->. Cette balise peut s'étaler sur une ou plusieurs lignes : <!-- Ceci est un commentaire --> En JavaScript, si un commentaire tient sur une ligne, il suffit de le faire précédez de deux slash : // Ceci est un commentaire JavaScript sur une seule ligne Par contre, s'il doit s'étirer sur plusieurs lignes, commencez-le par un slash suivi d'un astérisque et terminez-le par un astérisque suivi d'un slash : /* Ceci est un commentaire JavaScript sur plusieurs lignes */ Une fonction dans une balise <script> Comme la plupart des langages, JavaScript permet de définir des fonctions. Ces fonctions sont généralement placées entre les balises <head> et </head>. En effet, le code compris entre ces deux balises étant chargé en premier, cela garantit que les fonctions JavaScript auront été mises en mémoire avant que qu'elles soient appelées. La syntaxe permettant de déclarer une fonction est proche de celle utilisée dans le langage C : function nom([param1, ...paramN]){ // Une ou plusieurs instructions } Où : • nom est le nom de la fonction ; • param1 à paramN sont les éventuels paramètres passés à la fonction ; • Instructions représente une ou plusieurs instructions exécutées par la fonction.
  • 23. 21 Lorsqu'une fonction a été définie, elle est appelée par son nom, suivi de parenthèses. Si un ou plusieurs paramètres ont été définis dans la fonction, ils sont également précisés lors de son appel, séparés entre eux par des virgules. <script> nom([param1, ...paramN]); </script> Où : • nom est le nom de la fonction à appeler ; • param1 à paramN sont les éventuels paramètres passés à la fonction. Exercice Définissez la fonction carre() qui calcule et affiche le carré du nombre qui lui est passé en argument. Appelez cette fonction pour calculer les carrés de 7 et de 12. Quelques informations complémentaires pour vous aider à résoudre cet exercice : • Vous pouvez utiliser le signe + pour concaténer deux éléments. Peu importe leur type. Ainsi, vous pouvez par exemple concaténer un texte et un nombre. • JavaScript peut également afficher du code HTML. Par exemple, l'instruction suivante est équivalente à la balise HTML <br> : document.write('<br>'); Faites une pause dans la vidéo. Ecrivez le code demandé et reprenez le visionnage de la vidéo pour vérifier que vous avez bien travaillé. Solution Dans un premier temps, dupliquez le squelette pour obtenir le fichier 12-fonction-carre.html. La fonction carre() est placée dans le head, entre les balises <script> et </script>. Un paramètre lui est transmis. Nous l'appellerons, par exemple x. Pour afficher le carré du nombre passé en argument, vous utiliserez une instruction document.write() : <script> function carre(x){ document.write('Le carré de ' + x +' est ' + x*x + '.<br>'); } </script> Pour terminer, appelez la fonction carre() dans le body. Insérez un peu de texte suivi d'un passage à la ligne : Test de la fonction carre :<br> Puis une balise <script></script>. A l'intérieur de cette balise, appelez la fonction carre() en lui transmettant la valeur 7, puis la valeur 12 dans le body :
  • 24. 22 <script> carre(7); carre(12); </script> Voici le résultat : Ce code se trouve dans le fichier 12-fonction-carre.html : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Calcul du carré</title> <script> function carre(x){ document.write('Le carré de ' + x +' est ' + x*x + '.<br>'); } </script> </head> <body> Test de la fonction carre :<br> <script> carre(7);
  • 25. 23 carre(12); </script> </body> </html> Dans cet exemple, la fonction carre() calcule le carré et affiche le résultat. Il est également possible de retourner le résultat à l'appelant avec l'instruction return. Dans ce cas, la fonction carré() se simplifie. L'instruction document.write() est remplacée par un return : function carre(x){ return x*x; } Lorsque la fonction carré() est appelée, elle retourne un nombre. Il est donc possible d'afficher le résultat avec une instruction document.write() : document.write('Le carré de 7 est ' + carre(7) + '.<br>'); document.write('Le carré de 12 est ' + carre(12) + '.<br>'); Gestion des exceptions La gestion des exceptions dans JavaScript est comparable à celle qui a cours dans les autres langages de programmation :  Le code qui peut provoquer une exception doit être entouré d'une structure try.  Une exception peut être déclenchée par l'instruction suivante : throw "message d'erreur";  L'instruction catch(erreur) permet de capturer une exception. Si une instruction throw a été générée, le message peut être récupéré dans erreur.  Chaque instruction try doit avoir une instruction catch correspondante. Un exemple va mettre en pratique tout ce qui vient d'être dit. Commencez par dupliquer le squelette en un fichier que vous appellerez 13-try-catch.html. Dans ce document HTML, définissez la fonction inverse() qui demande un argument numérique et retourne son inverse. Si le nombre passé est 0, une exception va être générée. En effet, 1/0 ne retourne pas un entier. Ceci dit, JavaScript règle ce cas avec doigté, puisque 1/0 vaut infinite pour lui. Nous allons néanmoins générer une exception pour traiter d'une façon particulière le cas où la valeur passée est 0. La fonction inverse() admet un argument que nous appellerons nombre : <script> function inverse(nombre){ } </script>
  • 26. 24 Si l'argument vaut 0, une exception est générée avec le message "Division par 0". Remarquez le double signe "=". Il s'agit d'un test d'égalité et non d'une affectation. Lorsqu'on teste l'égalité, on utilise un double "=". Par contre, lorsqu'on affecte une valeur à une variable, on utilise un simple "=". if (nombre == 0) throw 'division par zéro'; Remarquez qu'il n'est pas nécessaire d'utiliser des accolades après le if ni après le else. Il s'agit d'un cas particulier. Ici, une seule instruction doit être exécutée si la condition du if est vérifiée. Il en est de même si la condition du if n'est pas vérifiée. Ceci étant dit, rien ne vous empêche d'ajouter systématiquement des accolades, qu'il y ait une ou plusieurs instructions à exécuter. Dans le cas contraire, l'inverse de l'argument est retourné à l'appelant, suivi d'un passage à la ligne. else return '1/' + nombre +' = ' + (1/nombre) +'<br>'; Pour calculer l'inverse des nombres 12, 0 et 3, définissez une instruction try dans laquelle vous appellerez la fonction inverse() à trois reprises. Le résultat est affiché par une simple instruction document.write(). try { document.write(inverse(12)); document.write(inverse(0)); document.write(inverse(3)); } Le bloc try est refermé et le bloc catch ouvert, en récupérant l'erreur en paramètre. Ce bloc est exécuté lorsqu'une division par 0 est demandée. Dans ce cas, nous allons afficher un message d'erreur avec une instruction document.write() : catch(erreur){ document.write('Une exception a été générée : ' + erreur + '<br>'); } Il est temps d'exécuter ce code. Comme vous pouvez le constater, le premier inverse est calculé, le deuxième produit l'affichage d'un message d'erreur et le troisième n'est jamais calculé, car, après l'exception, l'exécution des instructions contenues dans le catch est interrompue :
  • 27. 25 Ce code est disponible dans le fichier 13-try-catch.html. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Gestion des exceptions</title> </head> <body> <script> function inverse(nombre){ if (nombre == 0) throw 'division par zéro'; else return '1/' + nombre +' = ' + (1/nombre) +'<br>'; } try { document.write(inverse(12)); document.write(inverse(0)); document.write(inverse(3)); } catch(erreur){
  • 28. 26 document.write('Une exception a été générée : ' + erreur + '<br>'); } </script> </body> </html> Une petite question avant de terminer cette section. Comment feriez-vous pour que la valeur 1/3 soit également calculée ? Je vous rappelle que le code contenu dans l'instruction try a été bloqué lorsqu'une exception a été générée. Je vous laisse quelques secondes pour réfléchir. Si vous avez besoin d'un peu plus de temps, faites une pause dans la vidéo. Une solution très simple consiste à insérer la seule instruction qui pose un problème dans le try. On sait que les autres ne provoqueront pas d'exception. En les excluant de la structure try/catch, elles seront exécutées, même après l'exception provoquée par le calcul de l'inverse de 0. Dans un premier temps, l'inverse de 12 est calculé et affiché. Dans un deuxième temps, le calcul de l'inverse de 0 est inséré à l'intérieur d'une structure try/catch. Dans un troisième temps, l'inverse de 3 est calculé et affiché. document.write(inverse(12)); try { document.write(inverse(0)); } catch(erreur){ document.write('Une exception a été générée : ' + erreur + '<br>'); } document.write(inverse(3)); Comme vous pouvez le constater, les valeurs 12, 0 et 3 sont maintenant traitées :
  • 29. 27 Le code se trouve dans le fichier 13-try-catchv2.html. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Gestion des exceptions</title> </head> <body> <script> function inverse(nombre){ if (nombre == 0) throw "division par zéro"; else return "1/" + nombre +" = " + (1/nombre) +"<br>"; } document.write(inverse(12)); try{ document.write(inverse(0)); } catch(erreur){
  • 30. 28 document.write("Une exception a été générée : " + erreur + "<br>"); } document.write(inverse(3)); </script> </body> </html> Mise en place d'un gestionnaire d'événements Dans le navigateur, certaines actions effectuées par l'utilisateur donnent lieu à des événements. Si vous mettez en place un gestionnaire d'événements, il sera automatiquement exécuté lorsque l'événement correspondant se présentera. Pour définir un gestionnaire d'événements, vous utiliserez la syntaxe suivante : <balise nom = "code JavaScript"> Où : • balise est le nom d'une balise HTML ; • nom est le nom de l'événement déclenchant ; • code JavaScript est une instruction JavaScript exécutée lorsque l'événement NomEvent se produit. A titre d'exemple, l'instruction ci-après définit un bouton dans un formulaire, affiche Résultat dans le bouton et met en place un gestionnaire d'événements qui est sollicité lorsque l'utilisateur clique sur ce bouton. <input type="button" value="Résultat" onclick="traitement();"> Le code qui suit le déclencheur onclick correspond au nom d'une fonction. Vous pouvez spécifier au choix une ou plusieurs instructions ou fonctions JavaScript. Cette deuxième possibilité est bien plus intéressante, car elle donne le contrôle à une fonction qui contient autant d'instructions que vous le souhaitez. Exercice Pour bien comprendre comment utiliser un gestionnaire événementiel, rien de tel qu'un petit exercice. Je vous propose donc de définir un formulaire qui contient une zone de texte et un bouton. Lorsque l'utilisateur clique sur le bouton, exécutez la fonction carre() qui lira le nombre tapé dans la zone de texte et affichera son carré dans cette même zone de texte. N'ayez pas peur, je ne vais pas vous laisser résoudre cet exercice sans vous donner des indices. Premier indice Pour définir un formulaire, vous utiliserez la balise <form> et vous donnerez un nom au formulaire à travers son attribut name. Par exemple : <form name="f">
  • 31. 29 </form> Deuxième indice Pour permettre à l'utilisateur d'effectuer une saisie dans une zone de texte, vous utiliserez une balise <input> de type text. Donnez un nom à cette balise pour récupérer son contenu. Par exemple : <input type="text" name="nombre"> Troisième indice Dans un formulaire d'attribut name f, une balise <input> de type text et de nom saisie, JavaScript peut accéder en lecture et en écriture au contenu de cette balise avec l'instruction suivante : f.saisie.value Solution Dans un premier temps, dupliquez le squelette pour obtenir le fichier 14-formulaire.html. Mettez en place le formulaire est mis en place dans le <body>, avec la balise <form>. Appelez ce formulaire f. <body> <form name="f"> </form> </body> Définissez la zone de texte et donnez-lui le nom nombre. Enfin, définissez un bouton avec une balise <input> de type button. Le texte affiché sur le bouton est Carré. Il est défini dans l'attribut value du bouton. Lorsque l'utilisateur clique sur le bouton, la fonction carre() doit s'exécuter. Le nom de cette fonction est donc affecté à l'attribut onclick du bouton. <input type="text" name="nombre"> <input type="button" value="Carré" onclick="carre();"> Tous les éléments HTML sont en place. Il ne reste plus qu'à définir la fonction carre(). Nous allons mettre le code de la fonction dans le <head>. La fonction carre() n'a besoin d'aucun argument, puisqu'elle peut accéder directement au contenu de la zone de texte nombre. Une seule ligne de code suffira : affectez à la zone de texte nombre (f.nombre.value), le contenu de cette zone de texte multiplié par lui-même, et donc mis au carré : <script> function carre(){ f.nombre.value = f.nombre.value * f.nombre.value; } </script>
  • 32. 30 Voici le résultat : Ce code se trouve dans le fichier 14-formulaire.html. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script> function carre(){ f.nombre.value = f.nombre.value * f.nombre.value; } </script> </head> <body> <form name="f"> Entrez un nombre et cliquez sur le bouton pour afficher son carré<br> <input type="text" name="nombre" size="25" > <input type="button" value="Carré" onclick="carre();"> </form> </body> </html>
  • 33. 31 Variables et types de données JavaScript est en mesure de travailler avec tous les types de données conventionnels. Il sait manipuler des nombres réels ou entiers. Les entiers peuvent être exprimés en décimal (base 10), en octal (base 8) ou en hexadécimal (base 16). Un nombre octal commence toujours par un zéro, et un nombre hexadécimal par 0x ou 0X. Les éventuelles lettres d'un nombre hexadécimal peuvent indifféremment être exprimées en minuscules ou en majuscules. Les nombres réels sont composés d'une partie entière suivie d'un point, d'une partie décimale, de la lettre e (ou E) et d'un exposant, éventuellement précédé d'un signe + ou -. Voici quelques exemples de nombres réels : 1.4142135 -32E-7 .5e12 JavaScript peut également travailler avec des chaînes de caractères délimitées par des apostrophes ou des guillemets. Dans cette formation, nous utiliserons la plupart du temps des apostrophes pour délimiter les chaînes de caractères. Les affectations de chaînes ci-après sont correctes : var x = 'essai'; var y = "essai"; Il est également possible d'insérer des balises HTML dans une chaîne de caractères et d'afficher la chaîne par la suite. Vous pouvez ainsi construire la page Web de façon dynamique, à l'aide d'instructions JavaScript. Ici par exemple, nous définissons la variable chaîne texte qui contient du texte et une balise HTML <font> : var texte = 'essai <font size="5" color="#FF0000">concluant</font>'; Lorsque cette variable est affichée, avec une instruction document.write(), le texte est mis en forme en conséquence : document.write(texte); JavaScript peut également manipuler : • des booléens qui prennent la valeur true ou false. Attention, true et false sont en lettres minuscules. Les valeurs True ou FALSE par exemple n'ont aucune signification en JavaScript. En effet, JavaScript est sensible à la casse des caractères et particulièrement susceptible si vous essayez de vous écarter du droit chemin ! • des tableaux monodimensionnels, accessibles par leur indice. Par exemple, memo[0] désigne le premier élément du tableau memo[] et memo[12] le treizième élément de ce même tableau. Pour définir une variable, il n'est pas nécessaire de préciser son type. Utilisez simplement le mot réservé var, indiquez le nom de la variable et affectez-lui une valeur.
  • 34. 32 Voici quelques exemples : var petit = 10; var grand = 100; var Titre = 'Types de données'; var Choix = true; Lorsqu'une valeur typée a été affectée à une variable, il n'est pas interdit de lui affecter par la suite une valeur d'un autre type. Par exemple, le code ci-après est tout à fait correct : var ma_variable = 'valeur texte'; ... ma_variable = 123.456e12; ... ma_variable = true; Le signe + peut être utilisé pour concaténer deux valeurs de type différent. Par exemple, l'instruction suivante est tout à fait licite : ma_variable = 500 + 'kilomètres'; Conversions de types JavaScript est doté de trois fonctions de conversion chaîne/numérique : • eval() qui évalue une chaîne et la convertit en numérique. • parseInt() qui convertit une chaîne en utilisant une base de numération donnée. • parseFloat() qui convertit une chaîne en un nombre réel. Fonction eval() Commençons par la fonction eval(). Pour l'utiliser, il suffit de définir une variable et de lui affecter le résultat de la fonction eval() en passant en argument l'expression texte à évaluer. var resultat = eval(expression); Où : • expression est une chaîne de caractères contenant un nombre ou une formule dont le résultat est un nombre ; • et resultat est la valeur numérique retournée par la fonction. Par exemple, si on définit la variable a et qu'on lui affecte la valeur 5 : var a = 5; eval("a*2"); retourne la valeur numérique 10 et eval("123.45"); retourne la valeur numérique 123.45
  • 35. 33 Fonction parseInt() Voyons maintenant la fonction parseInt(). Pour l'utiliser, il suffit de définir une variable et de lui affecter le résultat de la fonction parseInt() en lui passant un ou deux arguments : var resultat = parseInt(chaine[, base]); Où : • chaine est la chaîne à convertir ; • base est la base de numération de la chaîne ; • resultat est le résultat numérique de la conversion. Le deuxième argument est facultatif. S'il n'est pas spécifié, la base de numération sera supposée égale à 10. Voici quelques exemples : parseInt("ff",16); retourne la valeur numérique 255 parseInt("12",8); retourne la valeur numérique 10 parseInt("essai",10); retourne la valeur NaN (Not a Number), pour indiquer que l'argument passé à la fonction parseInt() n'est pas un nombre Fonction parseFloat() Enfin, voyons comment utiliser la fonction parseFloat(). Il suffit de définir une variable et de lui affecter le résultat de la fonction parseFloat() à laquelle on passe la chaîne à convertir en flottant : resultat = parseFloat(chaine) • chaine est la chaîne à convertir ; • resultat est le résultat réel de la conversion. Exemples : parseFloat("427.35E-1"); retourne la valeur numérique 42.735 parseFloat("X12"); retourne la valeur NaN Not a Number), pour indiquer que l'argument passé à la fonction parseFloat() n'est pas un nombre. Dans la section précédente, vous avez vu qu'une variable JavaScript pouvait recevoir un nombre, puis une chaîne, puis un booléen, puis un autre nombre, etc. C'est-à-dire qu'elle n'était pas typée. Ce n'est pas tout à fait exact. En fait, une variable JavaScript est toujours typée à un moment donnée, mais son type n'est pas forcément constant. Pour connaître le type actuel d’une variable, vous utiliserez la fonction typeof(). Exercice Appliquez la fonction typeof() sur les variables suivantes afin de connaître leur type : var texte='Un simple texte';
  • 36. 34 var nombre = 12.5; var b = false; var t = ['un','simple','tableau']; var o = {prenom: 'Pierre', nom: 'Durand'}; Solution Vous pouvez afficher le type des variables dans la fenêtre du navigateur avec l'instruction document.write(), dans des boîtes de dialogue successives avec l'instruction alert() ou dans la console avec l'instruction console.log(). Dans le code de la solution, nous avons choisi d'afficher le type des variables dans la console. Pour cela, il suffit d'utiliser l'instruction console.log() en lui passant en argument la function typeof() de la variable dont on désire connaître le type. Commencez par le type de la variable texte, puis le type des variables nombre, b, t et o : console.log(typeof(texte)); console.log(typeof(nombre)); console.log(typeof(b)); console.log(typeof(t)); console.log(typeof(o)); Exécutez ce code. Il n'y a aucun affichage, ce qui est normal puisque l'affichage se fait dans la console. Appuyez sur la touche F12 pour révéler les résultats. Comme on pouvait s'y attendre, les trois premières variables sont respectivement de type string, number et boolean. Par contre, notez qu'un tableau est de type objet et qu'un objet dont les composantes sont définies entre accolades est également de type object. La solution se trouve dans le fichier 16-typeof.html.
  • 37. 35 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>typeof()</title> </head> <body> <script> var texte='Un simple texte'; var nombre = 12.5; var b = false; var t = ['un','simple','tableau']; var o = {prenom: 'Pierre', nom: 'Durand'}; console.log(typeof(texte)); console.log(typeof(nombre)); console.log(typeof(b)); console.log(typeof(t)); console.log(typeof(o)); </script> </body> </html>
  • 38. 36 Module 3 – Tout d'horizon du langage JavaScript Dans ce module, vous allez faire connaissance avec les instructions du langage JavaScript. Opérateurs et expressions JavaScript utilise la plupart des opérateurs des autres langages de programmation. Pour faciliter leur énumération, nous les répartirons en six grands groupes. Ainsi, nous distinguerons les opérateurs : • D'affectation • Arithmétiques • Relationnels et logiques • Dédiés aux chaînes de caractères • Dédiés aux opérations binaires (qui agissent au niveau des bits) Opérateurs d’affectation Outre l’opérateur d’affectation =, JavaScript dispose de six autres opérateurs qui allègent l’écriture : Opérateur Fonction Exemple Equivalent à + = Addition de l’opérateur de droite à l’opérateur de gauche et affectation à l’opérateur de gauche a + = b a = a + b - = Soustraction de l’opérateur de droite à l’opérateur de gauche et affectation à l’opérateur de gauche a - = b a = a - b * = Multiplication de l’opérateur de droite par l’opérateur de gauche et affectation à l’opérateur de gauche a * = b a = a * b / = Division de l’opérateur de gauche par l’opérateur de droite et affectation à l’opérateur de gauche a / = b a = a / b % = Reste de la division entière de l’opérateur de gauche par l’opérateur de droite et affectation à l’opérateur de gauche a % = b a = a % b ? : Affectation conditionnelle a = (c < d) ? e : f if (c < d) then a = e else a = f
  • 39. 37 Opérateurs arithmétiques Ces opérateurs effectuent des opérations arithmétiques sur leurs opérandes. Opérateur Fonction Exemple = Affectation a = 65 + Addition c = a + b - Soustraction d = -a * Multiplication c = c * a / Division c = a / b % modulo (reste de la division entière) c = a % b Les opérateurs sont exécutés selon une hiérarchie bien définie ; du plus prioritaire vers le moins prioritaire : % - de changement de signe / * - + = Il est parfois nécessaire d’utiliser des parenthèses pour forcer l’ordre d’exécution ou pour clarifier une expression de calcul. A titre d’exemple, l’expression : z = a + b / c +4; N’est pas du tout équivalente à l’expression : z = (a + b) / c + 4; Opérateurs relationnels et logiques Ces opérateurs effectuent des comparaisons sur leurs opérandes qui peuvent être numériques, chaînes ou logiques. Le résultat renvoyé est 0 si la condition n’est pas vérifiée. Il est différent de 0 dans le cas contraire.
  • 40. 38 Opérateur Fonction Exemple ! NON logique !(a == b) < Inférieur à a < b > Supérieur à a > b <= Inférieur ou égal à a <= b >= Supérieur ou égal à a >= b ! = Différent de a ! = b == Egal à a == b && ET logique (a == b) && (c > d) || OU logique (a == b) || (c > d) Attention Une des erreurs les plus fréquentes en JavaScript consiste à utiliser l’opérateur = à la place de l’opérateur == dans une comparaison logique. Par exemple, l’instruction : if (couleur = 3) Ne compare pas le contenu de la variable couleur avec la valeur 3. Elle affecte au contraire la valeur 3 à la variable couleur ! L’instruction permettant d’effectuer la comparaison est : if (couleur == 3) Opérateurs dédiés aux chaînes de caractères En plus des opérateurs de comparaison dont nous venons de parler, vous pouvez utiliser les opérateurs + et += pour (respectivement) concaténer deux chaînes et stocker une chaîne à la suite d'une autre. Voyons quelques exemples : L'instruction ci-après : a = "gauche " + "droite"; Stocke la valeur gauche droite dans la variable a. Supposons maintenant que la variable a contienne la valeur gauche. En utilisant l'instruction suivante, la variable a contiendra la valeur gauche droite : a += "droite";
  • 41. 39 Opérateurs d’incrémentation Les opérateurs d’incrémentation (++) et de décrémentation (--) sont utilisés, respectivement pour augmenter et pour diminuer de 1 la valeur stockée dans une variable. Selon la position de l’opérateur, on parle de post incrémentation, de pré incrémentation, de post décrémentation et de pré décrémentation : Opérateur Fonction Exemple ++ post incrémentation a++ ++ pré incrémentation ++a -- post décrémentation a-- -- pré décrémentation --a Dans une expression comportant un opérateur de pré incrémentation ou de pré décrémentation, l’incrémentation (la décrémentation) se déroule avant l’évaluation de l’expression. Inversement, dans une expression comportant un opérateur de post incrémentation ou de post décrémentation, l’incrémentation (la décrémentation) se déroule après l’évaluation de l’expression. La position (post ou pré) des opérateurs d’incrémentation et de décrémentation n’a aucune importance dans une expression ne comportant qu’un facteur. Par exemple, les expressions suivantes sont équivalentes : a++; est équivalent à : ++a; Cependant, examinez ce code : var e1 = 12; var e2 = 15; var e3 = e1 * ++e2; var e1 = 12; var e2 = 15; var e4 = e1 * e2++; D'après vous, que valent e3 et e4 ? Est-ce que ces variables ont la même valeur ? Pour le savoir, il suffit de les afficher. Par exemple avec l'instruction document.write(). Voici le résultat :
  • 42. 40 Ces résultats peuvent sembler étranges. Mais en fait, pas tant que ça lorsqu'on y regarde d'un peu plus près. En effet, l'expression lorsque l'expression e1 * ++e2 est affectée à la variable e3, on commence par incrémenter e2 avant d'effectuer la multiplication. C'est donc 12 x 16, soit 192, qui est affecté à e3. Par contre, lorsque l'expression e1 * e2++ est affectée à la variable e4, on affecte e1*e2 à la variable e4. Donc 12 x 15, c'est-à-dire 180. Dans un deuxième temps, on incrémente la variable e2. Le code de cet exemple se trouve dans le fichier 17-post-pre-incrementation.html. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Post et pré incrémentation</title> </head> <body> <script> var e1 = 12; var e2 = 15; var e3 = e1 * ++e2; var e1 = 12; var e2 = 15;
  • 43. 41 var e4 = e1 * e2++; document.write('e3 = ' + e3 + '<br>'); document.write('e4 = ' + e4); </script> </body> </html> Opérations intervenant au niveau des bits JavaScript possède plusieurs opérateurs qui effectuent des calculs au niveau binaire, tels que OU logique ou décalage d’un ou de plusieurs bits. Le tableau ci-après résume ces opérateurs. Opérateur Fonction Exemple & ET logique a = 0xfa & 0x35 | OU logique a = 0xfa | 0x12 ^ OU EXCLUSIF logique a ^ = 0x32 ~ NON logique a = ~b >> Décalage à droite avec signe a >>= c >>> Décalage à droite sans signe a >>>= c << Décalage à gauche a = b << c Attention Les opérateurs &, | et ~ ne doivent pas être confondus avec leurs homologues &&, || et ^. Les premiers effectuent des opérations binaires sur leurs opérandes, alors que les seconds effectuent des comparaisons sur leurs opérandes. L'instruction de contrôle if... else [.. else] Dans une fonction JavaScript ou entre les balises <script> et </script>, les instructions s'exécutent séquentiellement. Il peut s'agir d'instructions provenant du langage de programmation lui- même ou d'appels de fonctions. Dans le second cas, les instructions appelées peuvent comporter une ou plusieurs instructions simples et/ou appels de fonctions. Il est souvent nécessaire d'exécuter une portion de code, à la condition qu'une expression logique soit vérifiée. Pour cela, il faut utiliser l'instruction if else dont voici la syntaxe : if (condition){
  • 44. 42 instruction 1; ... instruction N; } else { instruction 1; ... instruction P; } Où : • condition est une condition logique. Elle sera vérifiée si son évaluation est différente de 0. Elle ne sera pas vérifiée si son évaluation est égale à 0. Par exemple, la condition if (3) est toujours vérifiée, et la condition if (0) n'est jamais vérifiée. • instruction 1 à instruction N sont les instructions exécutées dans le cas où la condition logique est vérifiée. • instruction 1 à instruction P sont les instructions exécutées dans le cas contraire. Exercice Ecrivez du code HTML/JavaScript pour demander à l'utilisateur de saisir une lettre dans une zone de texte et d'appuyer sur un bouton pour afficher l'un des trois messages suivants dans la zone de texte. Saisie Message Lettre majuscule Vous avez entré une lettre majuscule. Lettre minuscule Vous avez entré une lettre minuscule. Autre caractère Le caractère entré n'est pas une lettre Solution La première chose à faire consiste à dupliquer le squelette pour obtenir le fichier 18-if-else.html. Insérez le titre du document entre les balises <title> et </title>. <title>if else</title> Insérez quelques mots pour demander à l'utilisateur d'entrer une lettre et de cliquer sur le bouton. <body> Entrez une lettre et cliquez sur le bouton<br> Définissez le formulaire entre les balises <body> et </body> et donnez-lui le nom f. Ce formulaire contient une zone de texte de nom texte. Modifiez la taille de la zone de texte en affectant 40 à son attribut size pour pouvoir y afficher du texte sans qu'il soit tronqué. <form name = "f">
  • 45. 43 <input type="text" name="texte" size="40"><br> En dessous de la zone de texte, définissez un bouton sur lequel s'affiche le texte Cliquez ici. Lorsque l'utilisateur clique sur ce bouton, la function casse()doit s'exécuter. Vous devez donc affecter cette fonction à l'attribut onclick du bouton. <input type="button" value="Cliquez ici" onclick="casse()"> La prochaine étape consiste à définir la function casse(), entre les balises <head> et </head>, à l'intérieur de balises <script> et </script>. <script> function casse(){ } </script> Commencez par récupérer le contenu de la zone de texte en précisant le nom du formulaire suivi d'un point suivi du nom de la zone de texte suivi d'un point et suivi de la propriété value. Cette valeur est stockée dans la variable l (comme lettre) : var l = f.texte.value; Déclarez la variable resultat. Cette variable sera utilisée pour stocker le texte à afficher dans la zone de texte : var resultat; Si le caractère lu dans la zone de texte est supérieur ou égal à A et inférieur ou égal à Z, il s'agit d'une lettre majuscule. Dans ce cas, la variable resultat est initialisée avec le texte Vous avez entré une lettre majuscule. Le test est élémentaire. Remarquez cependant l'utilisation du double & pour effectuer un et logique entre la première condition l > ='A' et la deuxième l <= 'Z'. if (l >= 'A' && l <= 'Z') resultat = 'Vous avez entré une lettre majuscule'; Dans le cas contraire, on teste si le caractère est compris entre la lettre minuscule a et la lettre minuscule z. Si c'est bien le cas, il s'agit d'une minuscule. La variable resultat est donc initialisée avec le texte Vous avez entré une lettre minuscule : else if (l >= 'a' && l <= 'z') resultat = 'Vous avez entré une lettre minuscule'; S'il ne s'agit ni d'une majuscule ni d'une minuscule, l'utilisateur n'a pas entré une lettre. Dans ce cas, la variable resultat est initialisée avec le texte Le caractère entré n'est pas une lettre. Remarquez l'antislash entre la lettre n et e du mot n'est. Il permet d'échapper l'apostrophe. Sans lui, JavaScript considèrerait que l'apostrophe est une fin de chaîne et génèrerait une erreur de syntaxe. else resultat = 'Le caractère entré n'est pas une lettre'; Pour terminer, il ne reste plus qu'à affecter la variable resultat à la zone de texte en écrivant :
  • 46. 44 f.texte.value = resultat ; Testons ce code. Le résultat est bien conforme à ce qui était attendu : Ce code se trouve dans le fichier 18-if-else.html. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>if else</title> <script> function casse(){ var l = f.texte.value; var resultat; if (l >= 'A' && l <= 'Z') resultat = 'Vous avez entré une lettre majuscule';
  • 47. 45 else if (l >= 'a' && l <= 'z') resultat = 'Vous avez entré une lettre minuscule'; else resultat = 'Le caractère entré n'est pas une lettre'; f.texte.value = resultat; } </script> </head> <body> Entrez une lettre et cliquez sur le bouton<br> <form name = "f"> <input type="text" name="texte" size="40"><br> <input type="button" value="Cliquez ici" onclick="casse()"> </form> </body> </html> Instructions répétitives Dans un programme, il est souvent nécessaire de faire exécuter plusieurs fois un même bloc d'instructions. Plutôt que de réécrire plusieurs fois ce bloc, il est plus judicieux d'utiliser une instruction de répétition. JavaScript dispose de deux instructions de ce type : for et while. Nous allons examiner leur fonctionnement dans les sections suivantes. L'instruction for L'instruction for exécute de façon répétitive un bloc d'instructions tant qu'une condition est vérifiée. Cette condition est basée sur la valeur d'une variable incrémentée par l'instruction. Voici la syntaxe de l'instruction for : for (expression 1; expression 2; expression 3){ instruction 1; ... instruction N; } Où : • expression 1 initialise la variable compteur utilisée dans la boucle ; • expression 2 définit la condition qui doit être vérifiée pour que la boucle se poursuive ; • expression 3 indique comment faire varier la variable compteur utilisée dans expression 2 ;
  • 48. 46 • instruction 1 à instruction N sont les instructions ou appels de fonctions exécutés tant que l'expression 2 est vérifiée. Exercice Utilisez une boucle for pour afficher les caractères de code ASCII 32 à 255, comme dans la copie d'écran ci-dessous : Pour vous aider à résoudre cet exercice, deux indices. Premier indice Pour afficher un caractère de code ASCII 100 par exemple, vous pouvez utiliser une instruction document.write() et lui passant l'entité &#100; Deuxième indice Pour aligner verticalement les caractères, il suffit d'encadrer l'affichage par les balises HTML <pre> et </pre>. Cette balise permet d'afficher des caractères de largeur fixe, et donc d'aligner verticalement les caractères affichés sur l'écran. Solution Commencez par dupliquer le squelette pour définir le fichier 19-for.html. Insérez le titre du document entre les balises <title> et </title> : <title>Boucle for</title> Le code JavaScript sera placé dans le body, entre les balises <script> et </script> : <body>
  • 49. 47 <script> </script> </body> La première instruction affiche un texte pour présenter l'affichage qui suit : document.write("Les caractères de code 32 à 255<br>"); Les balises <pre> et </pre> sont ensuite insérées pour que les caractères s'alignent verticalement : document.write("<pre>"); … document.write("</pre>"); Pour afficher les caractères de code ASCII 32 à 255, une simple boucle for suffit. Dans cette boucle, nous demandons l'affichage des entités dont le code ASCII passe consécutivement de 32 à 255 : for (var i=32; i<256; i++){ document.write("&#"+i," "); } Voyons le résultat. Comme vous le voyez, on n'est plus très loin de la solution. Ce qu'il faudrait, c'est passer à la ligne chaque fois que 16 caractères sont affichés. Pour cela, nous allons regarder si le reste de la division entière de i par 16 est nul. Si c'est le cas, nous afficherons un passage à la ligne pour passer à la ligne suivante. Le reste de la division entière aussi appelé modulo est représenté par l'opérateur mathématique % en JavaScript. Si (i%16) == 0 (le double égal indique qu'il s'agit d'un test et non d'une affectation), il suffit d'exécuter une instruction document.write() en lui passant la balise <br> en argument : if ((i % 16) == 0) document.write('<br>'); Voyons le résultat. C'est exactement ce qui était attendu :
  • 50. 48 Le code source se trouve dans le fichier 19-for.html. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Boucle for</title> </head> <body> <script> document.write("Les caractères de code 32 à 255<br>"); document.write("<pre>"); for (var i=32; i<256; i++){ if ((i % 16) == 0) document.write('<br>'); document.write("&#"+i," "); } document.write("</pre>"); </script>
  • 51. 49 </body> </html> Un cas particulier de l'instruction for Il existe une syntaxe un peu particulière mais très intéressante de l'instruction for. L'instruction for ... in permet d'accéder séquentiellement aux propriétés d'un objet. Et c'est là le plus intéressant : sans connaitre le nombre de propriétés de cet objet. Sa syntaxe est la suivante : for (var in objet){ instruction 1; ... instruction N; } Où : • var est la variable compteur utilisée pour décrire l'objet ; • objet est un objet quelconque dont on désire connaître les propriétés ; • instruction 1 à instruction N sont les instructions ou appels de fonctions exécutés pour chaque propriété de l'objet. Rappelez-vous, nous avons vu dans une vidéo précédente qu'un tableau était considéré comme un objet par JavaScript. Nous allons donc pouvoir utiliser une boucle for in pour parcourir les éléments qui le composent. Exercice Définissez le tableau t[] qui contient les capitales Paris, Londres, Amsterdam et Madrid. Parcourez-le avec une boucle for-in et affichez son contenu dans le navigateur. Solution Commencez par dupliquer le squelette pour obtenir le fichier 20-for-in.html. Insérez le titre du document entre les balises <title> et </title> dans le head : <title>La boucle for in</title> Le code JavaScript sera placé dans le body, entre les balises <script> et </script>. La première instruction définit et initialise le tableau t[] avec les capitales Paris, Londres, Amsterdam et Madrid : <script> var t = ['Paris', 'Londres', 'Amsterdam', 'Madrid']; </script> La deuxième instruction parcourt le tableau t[] :
  • 52. 50 for (var i in t) Et enfin, la troisième instruction affiche chacun des éléments parcourus, en les faisant suivre d'un passage à la ligne : document.write(t[i] + '<br>'); Voyons le résultat : Ce code se trouve dans le fichier 20-for-in.html : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>La boucle for in</title> </head> <body> <script> var t = ['Paris', 'Londres', 'Amsterdam', 'Madrid']; for (var i in t) document.write(t[i] + '<br>'); </script> </body> </html>
  • 53. 51 L'instruction while L'instruction while exécute de façon répétitive un bloc d'instructions tant qu'une condition est vérifiée. Le test de la condition est fait avant l'exécution de la boucle. Voici la syntaxe de l'instruction while : while (expression){ instruction 1; ... instruction N; } où expression est une condition qui doit être vérifiée pour que les instructions de la boucle s'exécutent et instruction 1 à instruction N les instructions ou appels de fonctions exécutés tant que l'expression est vérifiée. Quelques astuces à connaitre sur les boucles Définir une boucle infinie Pour définir une boucle infinie (c'est-à-dire une boucle sans fin), vous utiliserez l'une des deux instructions suivantes : for ( ; ; ){ instructions; } ou : while (1){ instructions; } L'instruction continue Il est parfois nécessaire d'interdire l'exécution d'une boucle lorsqu'une condition logique est satisfaite. Pour cela, vous utiliserez l'instruction continue, en tête du bloc : Dans une instruction for : for (expression 1; expression 2; expression 3){ if (condition) continue; instruction 1; ... instruction N; } Dans une instruction while :
  • 54. 52 while (expression){ if (condition) continue; instruction 1; ... instruction N; } Exercice Affichez le résultat de la fonction y = 1/(x – 3) pour x compris entre 2 et 4 en utilisant un pas de progression de 0,1. Pour éviter de calculer la fonction lorsque x vaut 3, vous exécuterez l'instruction continue pour cette valeur. Sur chaque ligne, affichez la valeur de x avec une décimale et la valeur de y avec deux décimales. Voici le résultat à obtenir : Pour réduire le nombre de décimales, vous utiliserez la fonction Math.round(). Si vous voulez une décimale, passez-lui la valeur multipliée par 10, puis divisez par 10 le résultat. Si vous voulez deux décimales, passez-lui la valeur multipliée par 100, puis divisez par 100 le résultat. Solution
  • 55. 53 Commencez par dupliquer le squelette HTML pour obtenir le fichier 22-continue.html. Définissez le titre du document entre les balises <title> et </title> : <title>Instruction continue</title> Insérez un texte de présentation juste après la balise <body> : <body> Valeurs de la fonction y = 1/(x - 3) pour x compris entre 2 et 4<br> Puis les balises <pre> et </pre> pour aligner verticalement les données affichées : <script> document.write('<pre>'); ... document.write('/<pre>'); </script> Il ne reste plus qu'à créer une boucle for pour x compris entre 2 et 4 et progressant par pas de 0,1 : for (var x = 2; x<= 4; x = x+0.1) { ... } Affichez la valeur de x et de y avec une instruction document.write(). Commencez par écrire x=suivi de la valeur de x arrondie à une décimale. Pour cela, il suffit de passer x*10 à la fonction Math.round() et de diviser le résultat par 10. Insérez ensuite une tabulation pour aligner les valeurs de y verticalement puis le texte y=. Il ne reste plus qu'à afficher le résultat de la fonction y avec deux décimales. Pour cela, passez la formule multipliée par 100 à Math.round() et divisez par 100 le résultat. Pour terminer, concaténez un passage à la ligne pour que chaque couple x y s'affiche sur une ligne différente : document.write('x = ' + Math.round(x*10)/10 + 't y = ' + Math.round(1/(x-3)*100)/100 + '<br>'); Examinons le résultat. Tout est parfait si ce n'est que y ne doit pas être calculé pour x=3 :
  • 56. 54 Etant donné que la variable x contient des valeurs réelles et non entières, il n'est pas possible de tester si x vaut 3 avec un simple if (x==3). Vous allez plutôt tester si x est très proche de 3 et non strictement égal à 3. Pour cela, vous utiliserez deux conditions dans l'instruction if. Si x est supérieur à 2,99 et inférieur à 3,01, l'instruction continue est exécutée : if ((x>2.99) && (x<3.01)) continue; Voyons le résultat. Maintenant, tout est correct :
  • 57. 55 Ce code se trouve dans le fichier 22-continue.html. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Instruction continue</title> </head> <body> Valeurs de la fonction y = 1/(x - 3) pour x compris entre 2 et 4 <pre> <script> for (var x = 2; x<= 4; x = x+0.1) { if ((x<3.01) && (x>2.99)) continue; document.write('<br>x = ' + Math.round(x*10)/10 + 't y = ' + Math.round(1/(x-3)*100)/100);
  • 58. 56 } </script> </pre> </body> </html> L'instruction break Pour terminer, je vais vous parler de l'instruction break. Il est parfois nécessaire d'arrêter l'exécution de la boucle lorsqu'une condition logique est satisfaite. Pour cela, utilisez l'instruction break en tête du bloc : Dans une instruction for : for (expression 1; expression 2; expression 3){ if (condition) break; instruction 1; ... instruction N; } Dans une instruction while : while (expression){ if (condition) break; instruction 1; ... instruction N; } Définition d'un tableau En programmation, les tableaux peuvent rendre de grands services. Pour définir un tableau, plusieurs écritures sont possibles. Définition sans initialisation : var unTableau = []; Ou encore : var unTableau = new Array(); Définition avec initialisation : var unTableau = ['valeur1','valeur2'];
  • 59. 57 Ou encore : var unTableau = new Array('valeur1','valeur2'); Pour accéder à un élément d'un tableau, passez par l'indice de cet élément. Par exemple, pour afficher le troisième élément du tableau unTableau[], vous écrirez : document.write(unTableau[2]; Exercice Définissez le code HTML et JavaScript pour calculer les factorielles de 1! à 10!. Stockez-les dans un tableau et affichez le contenu de ce tableau. Solution Commencez par dupliquer le squelette HTML pour créer le fichier 23-tableaux.html. Définissez le titre du document entre les balises <title> et </title> : <title>Tableaux</title> Insérez un peu de texte dans le body pour présenter ce qui va s'afficher : <body> <h1>Les factorielles de 1 à 10</h1> <hr> ... </body> Puis insérez les balises <script> et </script> pour pouvoir insérer du code JavaScript dans le body. Commencez par définir un nouveau tableau que vous appellerez par exemple fact[] : <script> fact = new Array(); </script> Définissez une boucle entre 1 et 10 par pas de 1 pour calculer les factorielles. Les calculs se feront avec la fonction calcule(). L'argument passé à cette fonction est le nombre dont on désire calculer la factorielle. La fonction retourne la factorielle qu'il suffit alors de stocker dans la cellule d'indice i du tableau fact[] : for (var i=1; i<=10; i++) fact[i] = calcule(i); Une deuxième boucle parcourt le tableau et affiche les dix factorielles sur une ligne : for (i = 1; i<= 10; i++) document.write(i + '! = ' + fact[i] + '<br>');
  • 60. 58 Il ne reste plus qu'à définir la fonction calcule(). Insérez les balises <script> et </script> dans le head. La fonction calcule() admet un argument que nous appellerons nombre : <script> function calcule(nombre){ ... } </script> Le résultat sera calculé dans la variable res. Dans un premier temps, cette variable est initialisée à 1 : var res = 1; A l'aide d'une boucle for, les deux lignes suivantes multiplient successivement la variable res par 1, 2, 3, etc. jusqu'à nombre et donc calculent la factorielle du nombre passé en argument. Une fois calculé, ce nombre est retourné par la fonction grâce à l'instruction return : for (var j=1; j<=nombre; j++) res*=j; return res; Voici le résultat :
  • 61. 59 Ce code se trouve dans le fichier 23-tableaux.html. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Tableaux</title> <script> function calcule(nombre){ var res = 1; for (var j=1; j<=nombre; j++) res*=j; return res; } </script> </head>
  • 62. 60 <body> <h1>Les factorielles de 1 à 10</h1> <hr> <script> fact = new Array(); for (var i=1; i<=10; i++) fact[i] = calcule(i); for (i = 1; i<= 10; i++) document.write(i + '! = ' + fact[i] + '<br>'); </script> </body> </html> Pour manipuler un tableau, c'est-à-dire pour insérer, supprimer, extraire ou trier les éléments du tableau, vous utiliserez les méthodes de l'objet Array. Vous trouverez de la documentation sur ces méthodes en vous rendant sur http://www.w3schools.com/js/js_array_methods.asp Exercice Définissez le tableau prenom[] qui contient les prénoms suivants : Jean, Pierre, Laetitia, David, Jade et Christel. 1) Ajoutez le prénom Anaïs entre Jean et Pierre 2) Supprimez le prénom Christel 3) Ajoutez le prénom Christel au début du tableau 4) Ajoutez le prénom Sandrine à la fin du tableau 5) Triez le tableau par ordre alphabétique 6) Définissez un tableau qui contient les trois premiers éléments du tableau prénom Solution Commencez par dupliquer le squelette pour créer le fichier 23-tableauv2.html. Définissez le titre du document entre les balises <title> et </title> : <title>Manipulation de tableaux</title> Insérez les balises <script> et </script> dans le body. Définissez le tableau prenoms[], par exemple avec une instruction new Array : <script> var prenoms = new Array('Jean', 'Pierre', 'Laetitia', 'David', 'Jade', 'Christel');
  • 63. 61 </script> Pour ajouter le prénom Anaïs entre Jean et Pierre, utilisez la méthode splice() : prenoms.splice(1,0,'Anaïs'); // 1 Pour supprimer le prénom Christel, utilisez la méthode pop() : prenoms.pop(); // 2 Pour ajouter le prénom Christel au début du tableau, utilisez la méthode unshift() : prenoms.unshift('Christel'); // 3 Pour ajouter le prénom Sandrine à la fin du tableau, utilisez la méthode push() : prenoms.push('Sandrine'); // 4 Pour trier le tableau par ordre alphabétique, utilisez la méthode sort() : prenoms.sort(); // 5 Enfin, pour définir un tableau qui contient les trois premiers éléments du tableau prénom, utilisez la fonction slice() : var premiers = prenoms.slice(0,3); Pour terminer, nous allons afficher le contenu des tableaux premiers et prenoms à l'aide d'instructions for in : for (i in premiers) document.write(premiers[i] + ' '); document.write('<br>'); for (i in prenoms) document.write(prenoms[i] + ' '); Voici le résultat : Ce code se trouve dans le fichier 23-tableauv2.html : <!DOCTYPE html> <html> <head>
  • 64. 62 <meta charset="UTF-8"> </head> <body> <script> var prenoms = new Array('Jean', 'Pierre', 'Laetitia', 'David', 'Jade', 'Christel'); prenoms.splice(1,0,'Anaïs'); // 1 prenoms.pop(); // 2 prenoms.unshift('Christel'); // 3 prenoms.push('Sandrine'); // 4 prenoms.sort(); // 5 var premiers = prenoms.slice(0,3); for (i in premiers) document.write(premiers[i] + ' '); document.write('<br>'); for (i in prenoms) document.write(prenoms[i] + ' '); </script> </body> </html>
  • 65. 63 Module 4 – Programmation objet en JavaScript JavaScript est un langage objet. Cette section va vous permettre d'aller plus loin en programmation objet. Dans un premier temps, en utilisant les objets prédéfinis du langage. Et dans un second temps, en créant vos propres objets. Les objets par défaut de JavaScript JavaScript peut manipuler des variables non typées et des objets. Les objets prédéfinis sont essentiellement issus des classes suivantes : Number, Date, Math, String et Array. Chacune de ces classes possède des méthodes dédiées. Pour en savoir plus sur les méthodes disponibles, connectez-vous sur le site http://www.w3schools.com/js/default.asp et cliquez dans le volet gauche sur : • JS Number Methods pour connaitre les méthodes de la classe Number. • JS Date Methods pour connaitre les méthodes de la classe Date. • JS Math pour connaitre les méthodes de la classe Math. • JS String Methods pour connaitre les méthodes de la classe String. • JS Array Methods pour connaitre les méthodes de la classe Array. L'objet Date Les objets de type Date permettent de travailler avec les dates (jours, mois, années) et les heures (heures, minutes, secondes). Pour définir un objet Date, vous pouvez utiliser l'une des quatre syntaxes suivantes : var nom = new Date(); var nom = new Date('mois, jour, annee heures:minutes:secondes'); var nom = new Date(mois, jour, annee); var nom = new Date(mois, jour, annee, heures, minutes, secondes); Où nom représente le nom d'un nouvel objet Date, et mois, jour, année, heures, minutes et secondes les composantes de l'objet Date. Dans la deuxième syntaxe, ils sont exprimés sous une forme chaîne. Dans la troisième et la quatrième syntaxe, ils sont exprimés sous une forme entière. De nombreuses méthodes sont attachées aux objets Date : getDate(), getDay(), getMinutes(), getMonth(), getSeconds(), getTime(), getTimeZoneoffset(), getYear(), getFullYear(), parse(), setDate(), setHours(), setMinutes(), setMonth(), setSeconds(), setTime(), setYear(), toGMTString(), toLocaleString(), UTC(). Exercice Pour vous entrainer à manipuler les objets Date, affichez la date et l'heure système au format suivant :
  • 66. 64 Solution Commencez par dupliquer le squelette pour obtenir le fichier 25-date-systeme.html. Insérez le nom de la page entre les balises <title> et </title> : <title>Date et heure système</title> Les instructions JavaScript seront insérées dans le body, entre les balises <script> et </script>. La première instruction définit l'objet Date aujourdhui. Etant donné qu'aucun argument n'est passé, la date retournée correspond à la date courante : <script> var aujourdhui = new Date(); Les composantes jour, mois, annee, heures, minutes et secondes sont alors stockées dans des variables. Le jour est obtenu en appliquant la méthode getDate() à l'objet Date aujourdhui : var jour = aujourdhui.getDate(); Le mois est obtenu en appliquant la méthode getMonth() à l'objet Date aujourdhui. Etant donné que le premier mois est identifié par le nombre 0, nous ajoutons 1 au résultat de la méthode getMonth() pour obtenir le bon mois. : var mois = aujourdhui.getMonth()+1; L'année est obtenue en appliquant la méthode getFullYear() à l'objet Date aujourdhui : var annee = aujourdhui.getFullYear(); Les heures sont obtenues en appliquant la méthode getHours() à l'objet Date aujourdhui : var heures = aujourdhui.getHours(); Les minutes sont obtenues en appliquant la méthode getMinutes() à l'objet Date aujourdhui : var minutes = aujourdhui.getMinutes(); Les secondes sont obtenues en appliquant la méthode getSeconds() à l'objet Date aujourdhui : var secondes = aujourdhui.getSeconds();
  • 67. 65 Maintenant, nous avons toutes les informations nécessaires dans les variables qui viennent d'être définies. Il suffit de les afficher avec deux instructions document.write() : une pour la date et une pour l'heure. Nous commençons par afficher la date en précisant le jour slash le mois slash l'année et en finissant par un <br> pour passer à la ligne : document.write('Nous sommes le ' + jour + ' / ' + mois + ' / ' + annee + '<br>'); Nous terminons par afficher l'heure en précisant les heures, les minutes et les secondes : document.write ('Il est ' + heures + ' heures ' + minutes + ' minutes ' + secondes + ' secondes'); Voyons le résultat. Il est conforme à ce qui était demandé : Le code source se trouve dans le fichier 25-date-heure-systeme.html : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Date et heure système</title> </head> <body> <script> var aujourdhui = new Date(); var jour = aujourdhui.getDate(); var mois = aujourdhui.getMonth()+1; var annee = aujourdhui.getFullYear(); var heures = aujourdhui.getHours(); var minutes = aujourdhui.getMinutes(); var secondes = aujourdhui.getSeconds();