JavaScript - Ce que vous devez savoir

JavaScript - Ce que vous devez savoir

-

Livres

Description

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 chaque exercice sera corrigé.

Je vous souhaite une bonne lecture et beaucoup de découvertes toutes aussi passionnantes les unes que les autres !


Sujets

Informations

Publié par
Ajouté le 25 juillet 2016
Nombre de lectures 28
EAN13 9782373270228
Licence : Tous droits réservés
Langue Français
Signaler un problème

JavaScript

 

 

 

 

 

Michel Martin

Editions Mediaforma

 

 

 

Copyright © 2016

MediaForma est une marque déposée

Tous droits réservés

 

 

 

 

 


Bonjour cher lecteur.

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 !


 

Avant de commencer

Tous les codes sources ainsi que la version PDF de ce livre sont disponibles. Il vous suffit d'en faire la demande en envoyant un mail à admin@mediaforma.com accompagné de la facture de votre eBook. Vous recevrez en retour un fichier ZIP par mail. Il vous suffira de le déziper pour accéder aux codes sources.

Ce cours est également disponible au format vidéo. Habituellement proposé à 49,90€, les lecteurs de ce livre y ont accès pour seulement 24,90€. Pour obtenir le pack vidéo, connectez-vous sur la page http://www.mediaforma.com/pack-javascript50/ et réglez avec votre carte bancaire. Ce pack fonctionne sur tout PC ou Mac. Il vous suffit d’utiliser un navigateur Web pour accéder aux vidéos.

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

image2.png

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.

image3.png

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 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 :

image4.png

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 ;

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 Personnaliseret 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.

image5.png

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.

image6.png

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.

image7.png

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>

</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 :

image8.png

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 :

image9.png

Ou encore dans Google Chrome :

image10.png

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')">


 

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.

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.);

</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 :

image11.png

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');

Voici le résultat :

image12.png

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 :

image13.png

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>

</html>

Fichier 09.js

document.write('Alors que celui-là est écrit par une instruction JavaScript.');