Cette partie du tutoriel est à propos du coeur de JavaScript, le langage lui même.
Mais nous avons besoin d’un environnement de travail pour exécuter nos scripts et, étant donné que ce guide est en ligne, le navigateur est un bon choix. Nous allons nous efforcer d’utiliser les commandes spécifiques au navigateur (comme alert) au minimum afin de ne pas y consacrer du temps si vous prévoyez de vous concentrer sur un autre environnement tel que Node.JS. Par ailleurs, les détails du navigateur sont expliqués dans la partie suivante du didacticiel.
Alors, voyons d’abord comment intégrer un script à une page Web. Pour les environnements côté serveur, vous pouvez simplement l’exécuter avec une commande comme "node mon.js" pour Node.JS.
La balise “script”
Les programmes JavaScript peuvent être insérés dans n’importe quelle partie d’un document HTML à l’aide de la balise <script>.
Par exemple :
<!DOCTYPE HTML>
<html>
<body>
<p>Before the script...</p>
<script>
alert( 'Hello, world!' );
</script>
<p>...After the script.</p>
</body>
</html>Vous pouvez exécuter l’exemple en cliquant sur le bouton “Play” dans son coin supérieur droit.
La balise <script> contient du code JavaScript qui est automatiquement exécuté lorsque le navigateur rencontre la balise.
Le balisage moderne
La balise <script> a quelques attributs qui sont rarement utilisés de nos jours, mais nous pouvons les trouver dans l’ancien code :
- L’attribut
type:<script type=…> -
L’ancien standard HTML4, nécessitait pour chaque script d’avoir un
type. Habituellement c’étaittype="text/javascript". Dorénavant ce n’est plus nécessaire. De plus, le standard HTML moderne a totalement changé la signification de cet attribut. Maintenant, il peut être utilisé pour les modules JavaScript. Mais c’est un sujet avancé, nous parlerons de modules dans une autre partie du tutoriel. - L’attribut
language:<script language=…> -
Cet attribut était destiné à afficher le langage du script. Pour l’instant, cet attribut n’a aucun sens, le langage est le JavaScript par défaut. Pas besoin de l’utiliser.
- Commentaires avant et après les scripts.
-
Dans des livres et des guides vraiment anciens, on peut trouver des commentaires dans
<script>, comme ceci :<script type="text/javascript"><!-- ... //--></script>Cette astuce n’est pas utilisée dans le JavaScript moderne. Ces commentaires ont été utilisés pour masquer le code JavaScript des anciens navigateurs qui ne savaient pas comment traiter une balise
<script>. Comme les navigateurs nés au cours des 15 dernières années n’ont pas ce problème, ce type de commentaire peut vous aider à identifier un code très ancien.
Scripts externes
Si nous avons beaucoup de code JavaScript, nous pouvons le placer dans un fichier séparé.
Le fichier de script est attaché à HTML avec l’attribut src :
<script src="/chemin/vers/script.js"></script>Ici, /chemin/vers/script.js est un chemin absolu du script depuis la racine du site. On peut également fournir un chemin relatif à partir de la page en cours. Par exemple src="script.js" signifierait un fichier "script.js" dans le dossier courant.
Nous pouvons également donner une URL complète, par exemple :
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>Pour joindre plusieurs scripts, utilisez plusieurs tags :
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…En règle générale, seuls les scripts les plus simples sont mis en HTML. Les plus complexes résident dans des fichiers séparés.
L’avantage d’un fichier séparé est que le navigateur le télécharge puis le stocke dans son cache.
Après cela, les autres pages qui veulent le même script le récupéreront à partir du cache au lieu de le télécharger à nouveau. Le fichier n’est donc téléchargé qu’une seule fois.
Cela économise du trafic et rend les pages plus rapides.
src est défini, le contenu de la balise script est ignoré.Une seule balise <script> ne peut pas avoir à la fois l’attribut src et le code à l’intérieur.
Ceci ne fonctionnera pas :
<script src="file.js">
alert(1); // le contenu est ignoré, parce que src est défini
</script>Nous devons choisir : soit un script <script src = "…"> externe, soit un <script> régulier avec du code.
L’exemple ci-dessus peut être divisé en deux scripts pour fonctionner :
<script src="file.js"></script>
<script>
alert(1);
</script>Résumé
- Nous pouvons utiliser une balise
<script>pour ajouter du code JavaScript à la page. - Les attributs de
typeet delanguene sont pas requis. - Un script dans un fichier externe peut être inséré avec
<script src = "chemin / vers / script.js"> </ script>.
Il y a beaucoup plus à apprendre sur les scripts de navigateur et leur interaction avec la page Web. Mais gardons à l’esprit que cette partie du tutoriel est consacrée au langage JavaScript, nous ne devons donc pas nous en distraire. Nous utiliserons un navigateur comme moyen pour exécuter JavaScript, ce qui est très pratique pour la lecture en ligne, mais il en existe beaucoup d’autres.
Commentaires
<code>, pour plusieurs lignes – enveloppez-les avec la balise<pre>, pour plus de 10 lignes - utilisez une sandbox (plnkr, jsbin, codepen…)