034.1 Leçon 1
Certification : |
Web Development Essentials |
---|---|
Version : |
1.0 |
Thème : |
034 Programmation JavaScript |
Objectif : |
034.1 Exécution et syntaxe JavaScript |
Leçon : |
1 sur 1 |
Introduction
Les pages web sont développées à l’aide de trois technologies standard : HTML, CSS et JavaScript. JavaScript est un langage de programmation qui permet au navigateur de mettre à jour dynamiquement le contenu du site web. Le JavaScript est généralement exécuté par le même navigateur que celui utilisé pour afficher une page web. Cela signifie que, comme pour CSS et HTML, le comportement exact du code que vous écrivez peut varier d’un navigateur à l’autre. Mais les navigateurs les plus courants adhèrent à la norme ECMAScript. Il s’agit d’une norme qui unifie l’utilisation de JavaScript sur le web, et qui servira de base à la leçon, avec la spécification HTML5, qui spécifie comment JavaScript doit être placé dans une page Web pour qu’un navigateur l’exécute.
Exécution de JavaScript dans le navigateur
Pour exécuter JavaScript, le navigateur doit obtenir le code soit directement, comme une partie du code HTML qui compose la page web, soit sous la forme d’une URL qui indique l’emplacement d’un script à exécuter.
L’exemple suivant montre comment inclure du code directement dans le fichier HTML :
<html>
<head>
</head>
<body>
<h1>Website Headline</h1>
<p>Content</p>
<script>
console.log('test');
</script>
</body>
</html>
Le code est enveloppé entre les balises <script>
et </script>
. Tout ce qui est inclus dans ces balises sera exécuté par le navigateur directement lors du chargement de la page.
La position de l’élément <script>
dans la page détermine le moment où il sera exécuté. Un document HTML est analysé de haut en bas, le navigateur décidant quand afficher les éléments à l’écran. Dans l’exemple qui vient d’être montré, les balises <h1>
et <p>
du site web sont analysées, et probablement affichées, avant l’exécution du script. Si le code JavaScript contenu dans la balise <script>
prenait beaucoup de temps à s’exécuter, la page s’afficherait quand même sans problème. En revanche, si le script avait été placé au-dessus des autres balises, le visiteur de la page web devrait attendre la fin de l’exécution du script pour voir la page. Pour cette raison, les balises <script>
sont généralement placées à l’un des deux endroits suivants :
-
À la toute fin du corps du HTML, de sorte que le script soit la dernière chose à être exécutée. Faites-le lorsque le code ajoute quelque chose à la page qui ne serait pas utile sans le contenu. Un exemple serait d’ajouter une fonctionnalité à un bouton, car le bouton doit exister pour que la fonctionnalité ait un sens.
-
A l’intérieur de l’élément
<head>
du HTML. Cela garantit que le script sera exécuté avant que le corps du HTML ne soit analysé. Si vous voulez modifier le comportement de chargement de la page, ou si vous avez quelque chose qui doit être exécuté alors que la page n’est pas encore complètement chargée, vous pouvez placer le script ici. De même, si vous avez plusieurs scripts qui dépendent d’un script particulier, vous pouvez placer ce script partagé dans l’en-tête pour vous assurer qu’il est exécuté avant les autres scripts.
Pour diverses raisons, notamment la facilité de gestion, il est utile de placer votre code JavaScript dans des fichiers distincts qui existent en dehors de votre code HTML. Les fichiers JavaScript externes sont inclus en utilisant une balise <script>
avec un attribut src
, comme suit :
<html>
<head>
<script src="/button-interaction.js"></script>
</head>
<body>
</body>
</html>
La balise src
indique au navigateur l’emplacement de la source, c’est-à-dire le fichier contenant le code JavaScript. L’emplacement peut être un fichier sur le même serveur, comme dans l’exemple ci-dessus, ou toute URL accessible sur le Web, comme https://www.lpi.org/example.js
. La valeur de l’attribut src
suit la même convention que l’importation de fichiers CSS ou d’images, en ce sens qu’elle peut être relative ou absolue. Lorsqu’il rencontre une balise de script avec l’attribut src
, le navigateur tente alors d’obtenir le fichier source en utilisant une requête HTTP GET
, les fichiers externes doivent donc être accessibles.
Lorsque vous utilisez l’attribut src
, tout code ou texte placé entre les balises <script>…</script>
est ignoré, conformément à la spécification HTML.
<html>
<head>
<script src="/button-interaction.js">
console.log("test"); // <-- This is ignored
</script>
</head>
<body>
</body>
</html>
Il existe d’autres attributs que vous pouvez ajouter à la balise script
pour spécifier davantage comment le navigateur doit obtenir les fichiers, et comment il doit les traiter ensuite. La liste suivante détaille les attributs les plus importants :
async
-
Peut être utilisé sur les balises
script
et donne l’instruction au navigateur d’aller chercher le script en arrière-plan, afin de ne pas bloquer le processus de chargement de la page. Le chargement de la page sera toujours interrompu après que le navigateur ait obtenu le script, parce que le navigateur doit l’analyser, ce qui est fait immédiatement après que le script ait été récupéré complètement. Cet attribut est booléen, donc il suffit d’écrire la balise comme<script async src="/script.js"></script>
et aucune valeur ne doit être fournie. defer
-
Comme
async
, cet attribut indique au navigateur de ne pas bloquer le processus de chargement de la page pendant la récupération du script. Au contraire, le navigateur va différer l’analyse du script. Le navigateur attendra que l’ensemble du document HTML ait été analysé et ce n’est qu’alors qu’il analysera le script, avant d’annoncer que le document a été complètement chargé. Commeasync
,defer
est un attribut booléen et s’utilise de la même manière. Commedefer
impliqueasync
, il n’est pas utile de spécifier les deux balises ensemble.NoteLorsqu’une page est complètement analysée, le navigateur indique qu’elle est prête à être affichée en déclenchant un événement
DOMContentLoaded
, lorsque le visiteur pourra voir le document. Ainsi, le JavaScript inclus dans un événement<head>
a toujours une chance d’agir sur la page avant son affichage, même si vous incluez l’attributdefer
. type
-
Indique le type de script que le navigateur doit attendre dans la balise. La valeur par défaut est JavaScript (
type="application/javascript"
). Cet attribut n’est donc pas nécessaire lorsque vous incluez du code JavaScript ou que vous pointez vers une ressource JavaScript avec la balisesrc
. En général, tous les types MIME peuvent être spécifiés, mais seuls les scripts désignés comme JavaScript seront exécutés par le navigateur. Il existe deux cas d’utilisation réalistes pour cet attribut : indiquer au navigateur de ne pas exécuter le script en définissanttype
à une valeur arbitraire commetemplate
ouother
, ou indiquer au navigateur que le script est un module ES6. Nous ne couvrirons pas les modules ES6 dans cette leçon.
Warning
|
Lorsque plusieurs scripts ont l’attribut |
Console du navigateur
Bien qu’il soit généralement exécuté dans le cadre d’un site web, il existe un autre moyen d’exécuter JavaScript : via la console du navigateur. Tous les navigateurs de bureau modernes proposent un menu permettant d’exécuter du code JavaScript dans leur moteur. Cette opération sert généralement à tester un nouveau code ou à déboguer des sites web existants.
Il existe plusieurs façons d’accéder à la console du navigateur, en fonction du navigateur. La méthode la plus simple consiste à utiliser les raccourcis clavier. Vous trouverez ci-dessous les raccourcis clavier pour certains des navigateurs actuellement utilisés :
- Chrome
-
Ctrl+Shift+J (Cmd+Option+J sur Mac)
- Firefox
-
Ctrl+Shift+K (Cmd+Option+K sur Mac)
- Safari
-
Ctrl+Shift+? (Cmd+Option+? sur Mac)
Vous pouvez également cliquer avec le bouton droit de la souris sur une page web et sélectionner l’option “Inspecter” ou “Inspecter l’élément” pour ouvrir l’inspecteur, qui est un autre outil du navigateur. Lorsque l’inspecteur s’ouvre, un nouveau panneau apparaît. Dans ce panneau, vous pouvez sélectionner l’onglet “Console”, qui fera apparaître la console du navigateur.
Une fois la console affichée, vous pouvez exécuter du JavaScript sur la page en le saisissant directement dans le champ de saisie. Le résultat de tout code exécuté s’affichera sur une ligne distincte.
Instructions JavaScript
Maintenant que nous savons comment lancer l’exécution d’un script, nous allons aborder les bases de l’exécution d’un script. Un script JavaScript est un ensemble d’instructions et de blocs. Un exemple d’instruction est console.log('test')
. Cette instruction demande au navigateur d’afficher le mot test
dans la console du navigateur.
Chaque instruction en JavaScript se termine par un point-virgule (;
). Cela indique au navigateur que cette instruction est terminée et qu’une nouvelle peut être lancée. Considérons le script suivant :
var message = "test"; console.log(message);
Nous avons écrit deux instructions. Chaque instruction est terminée soit par un point-virgule, soit par la fin du script. Pour des raisons de lisibilité, nous pouvons placer les instructions sur des lignes séparées. De cette façon, le script pourrait aussi être écrit comme suit :
var message = "test";
console.log(message);
Cela est possible parce que tous les caractères blancs entre les instructions, tels qu’un espace, une nouvelle ligne ou une tabulation, sont ignorés. Les caractères blancs peuvent aussi souvent être placés entre les mots-clés individuels dans les instructions, mais cela sera expliqué plus en détail dans une prochaine leçon. Les instructions peuvent également être vides, ou composées uniquement d’espaces.
Si une instruction est invalide parce qu’elle n’a pas été terminée par un point-virgule, ECMAScript tente d’insérer automatiquement les points-virgules appropriés, en se basant sur un ensemble complexe de règles. La règle la plus importante est la suivante : Si une instruction invalide est composée de deux instructions valides séparées par une nouvelle ligne, insérez un point-virgule à la nouvelle ligne. Par exemple, le code suivant ne forme pas une déclaration valide :
console.log("hello")
console.log("world")
Mais un navigateur moderne l’exécutera automatiquement comme s’il avait été écrit avec les points-virgules appropriés :
console.log("hello");
console.log("world");
Il est donc possible d’omettre les points-virgules dans certains cas. Toutefois, comme les règles d’insertion automatique des points-virgules sont complexes, nous vous conseillons de toujours terminer correctement vos instructions pour éviter les erreurs indésirables.
Commentaires JavaScript
Les scripts volumineux peuvent devenir assez complexes. Vous voudrez peut-être commenter ce que vous écrivez, afin de rendre le script plus facile à lire pour d’autres personnes, ou pour vous-même à l’avenir. Vous pouvez également inclure des méta-informations dans le script, telles que des informations sur les droits d’auteur ou sur la date et la raison de la rédaction du script.
Pour permettre d’inclure de telles méta-informations, JavaScript prend en charge les commentaires. Un développeur peut inclure des caractères spéciaux dans un script afin de désigner certaines parties de celui-ci comme des commentaires, qui seront ignorés lors de l’exécution. Le texte suivant est une version fortement commentée du script que nous avons vu précédemment.
/*
This script was written by the author of this lesson in May, 2020.
It has exactly the same effect as the previous script, but includes comments.
*/
// First, we define a message.
var message = "test";
console.log(message); // Then, we output the message to the console.
Les commentaires ne sont pas des instructions et n’ont pas besoin d’être terminés par un point-virgule. Au lieu de cela, ils suivent leurs propres règles de fin, en fonction de la manière dont le commentaire est écrit. Il existe deux façons d’écrire des commentaires en JavaScript :
- Commentaire sur plusieurs lignes
-
Utilisez
/*
et*/
pour signaler le début et la fin d’un commentaire sur plusieurs lignes. Tout ce qui suit/*
, jusqu’à la première occurrence de*/
est ignoré. Ce type de commentaire est généralement utilisé pour couvrir plusieurs lignes, mais il peut aussi être utilisé pour des lignes simples, ou même à l’intérieur d’une ligne, comme ceci :console.log(/* what we want to log: */ "hello world")
Comme le but des commentaires est généralement d’augmenter la lisibilité d’un script, vous devriez éviter d’utiliser ce style de commentaire à l’intérieur d’une ligne.
- Commentaire sur une seule ligne
-
Utilisez
//
(deux barres obliques) pour commenter une ligne. Tout ce qui suit la double barre oblique sur la même ligne est ignoré. Dans l’exemple montré précédemment, ce motif est d’abord utilisé pour commenter une ligne entière. Après l’instructionconsole.log(message);
, il est utilisé pour écrire un commentaire sur le reste de la ligne.
En général, les commentaires d’une seule ligne doivent être utilisés pour les lignes simples, et les commentaires de plusieurs lignes pour les lignes multiples, même s’il est possible de les utiliser d’une autre manière. Les commentaires à l’intérieur d’une instruction doivent être évités.
Les commentaires peuvent également être utilisés pour supprimer temporairement des lignes de code existantes, comme suit :
// We temporarily want to use a different message
// var message = "test";
var message = "something else";
Exercices guidés
-
Créez une variable appelée
ColorName
et affectez la valeurRED
à celle-ci. -
Lesquels des scripts suivants sont valides ?
console.log("hello") console.log("world");
console.log("hello"); console.log("world");`
// console.log("hello") console.log("world");
console.log("hello"); console.log("world") //;
console.log("hello"); /* console.log("world") */
Exercices d’exploration
-
Combien d’instructions JavaScript peuvent être écrites sur une seule ligne sans utiliser de point-virgule ?
-
Créez deux variables nommées
x
ety
, puis affichez leur somme sur la console.
Résumé
Dans cette leçon, nous avons appris différentes manières d’exécuter JavaScript, et comment modifier le comportement de chargement des scripts. Nous avons également appris les concepts de base de la composition et du commentaire de scripts, et avons appris à utiliser la commande console.log()
.
HTML utilisé dans cette leçon :
- <script>
-
La balise
script
peut être utilisée pour inclure JavaScript directement ou en spécifiant un fichier avec l’attributsrc
. Modifiez la façon dont le script est chargé avec les attributsasync
etdefer
.
Les concepts JavaScript présentés dans cette leçon :
;
-
Le point-virgule est utilisé pour séparer les instructions. Les points-virgules peuvent parfois — mais ne doivent pas — être omis.
//
,/*…*/
-
Les commentaires peuvent être utilisés pour ajouter des explications ou des méta-informations à un fichier de script, ou pour empêcher l’exécution d’instructions.
console.log("text")
-
L’instruction
console.log()
peut être utilisée pour afficher du texte dans la console du navigateur.
Réponses aux exercices guidés
-
Créez une variable appelée
ColorName
et affectez la valeurRED
à celle-ci.var ColorName = "RED";
-
Lesquels des scripts suivants sont valides ?
console.log("hello") console.log("world");
Invalide : La première instruction
console.log()
n’est pas correctement terminée, et la ligne dans son ensemble ne forme pas une instruction valide.console.log("hello"); console.log("world");
Valide : Chaque instruction est correctement terminée.
// console.log("hello") console.log("world");
Valide : Le code entier est ignoré car il s’agit d’un commentaire.
console.log("hello"); console.log("world") //;
Invalide : Il manque un point-virgule dans la dernière instruction. Le point-virgule à la toute fin est ignoré car il est commenté.
console.log("hello"); /* console.log("world") */
Valide : Une instruction valide est suivie d’un code commenté, qui est ignoré.
Réponses aux exercices d’exploration
-
Combien d’instructions JavaScript peuvent être écrites sur une seule ligne sans utiliser de point-virgule ?
Si nous sommes à la fin d’un script, nous pouvons écrire une instruction et elle sera terminée par la fin du fichier. Sinon, vous ne pouvez pas écrire une instruction sans point-virgule avec la syntaxe que vous avez apprise jusqu’à présent.
-
Créez deux variables nommées
x
ety
, puis affichez leur somme sur la console.var x = 5; var y = 10; console.log(x+y);