Cette partie du didacticiel concerne le cœur de JavaScript, le langage lui-même.
Mais nous avons besoin d’un environnement de travail pour exécuter nos scripts et, puisque ce livre est en ligne, le navigateur est un bon choix. Nous réduirons au minimum le nombre de commandes spécifiques au navigateur (comme alert ) afin que vous ne perdiez pas de temps dessus si vous envisagez de vous concentrer sur un autre environnement (comme Node.js). Nous nous concentrerons sur JavaScript dans le navigateur dans la prochaine partie du didacticiel.
Voyons d’abord comment attacher un script à une page Web. Pour les environnements côté serveur (comme Node.js), vous pouvez exécuter le script avec une commande telle que "node my.js" .
Les programmes JavaScript peuvent être insérés presque n'importe où dans un document HTML à l'aide de la balise <script> .
Par exemple:
<!DOCTYPE HTML>
<html>
<corps>
<p>Avant le script...</p>
<script>
alert( 'Bonjour tout le monde !' );
</script>
<p>...Après le script.</p>
</corps>
</html>Vous pouvez exécuter l'exemple en cliquant sur le bouton « Jouer » dans le coin supérieur droit de la boîte ci-dessus.
La balise <script> contient du code JavaScript qui est automatiquement exécuté lorsque le navigateur traite la balise.
La balise <script> possède quelques attributs rarement utilisés de nos jours mais que l'on retrouve encore dans l'ancien code :
L'attribut type : <script type =…>
L'ancien standard HTML, HTML4, exigeait qu'un script ait un type . Habituellement, c'était type="text/javascript" . Ce n'est plus obligatoire. De plus, le standard HTML moderne a totalement modifié la signification de cet attribut. Désormais, il peut être utilisé pour les modules JavaScript. Mais c'est un sujet avancé, nous parlerons des modules dans une autre partie du tutoriel.
L'attribut language : <script language =…>
Cet attribut était destiné à afficher la langue du script. Cet attribut n'a plus de sens car JavaScript est le langage par défaut. Il n'est pas nécessaire de l'utiliser.
Commentaires avant et après les scripts.
Dans les livres et guides très anciens, vous pouvez trouver des commentaires à l’intérieur des balises <script> , comme ceci :
<script type="text/javascript"><!--
...
//--></script> Cette astuce n'est pas utilisée dans le JavaScript moderne. Ces commentaires cachent le code JavaScript des anciens navigateurs qui ne savaient pas comment traiter la balise <script> . Étant donné que les navigateurs publiés au cours des 15 dernières années n'ont pas ce problème, ce type de commentaire peut vous aider à identifier du code très ancien.
Si nous avons beaucoup de code JavaScript, nous pouvons le mettre dans un fichier séparé.
Les fichiers de script sont joints au HTML avec l'attribut src :
<script src="/path/to/script.js"></script>
Ici, /path/to/script.js est un chemin absolu vers le script depuis la racine du site. On peut également fournir un chemin relatif à partir de la page courante. Par exemple, src="script.js" , tout comme src="./script.js" , signifierait un fichier "script.js" dans le dossier actuel.
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 balises :
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script> …
Veuillez noter:
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échargera et le stockera dans son cache.
Les autres pages faisant référence au même script le prendront du cache au lieu de le télécharger, de sorte que le fichier n'est en réalité téléchargé qu'une seule fois.
Cela réduit le trafic et rend les pages plus rapides.
Si src est défini, le contenu du script est ignoré.
Une seule balise <script> ne peut pas contenir à la fois l'attribut src et le code.
Cela ne fonctionnera pas :
<script src="fichier.js"> alerte(1); // le contenu est ignoré car src est défini </script>
Nous devons choisir soit un <script src="…"> externe, soit un <script> normal avec du code.
L'exemple ci-dessus peut être divisé en deux scripts pour fonctionner :
<script src="file.js"></script> <script> alerte(1); </script>
Nous pouvons utiliser une balise <script> pour ajouter du code JavaScript à une page.
Les attributs type et language ne sont pas obligatoires.
Un script dans un fichier externe peut être inséré avec <script src="path/to/script.js"></script> .
Il y a beaucoup plus à apprendre sur les scripts du navigateur et leur interaction avec la page Web. Mais gardons à l'esprit que cette partie du didacticiel est consacrée au langage JavaScript, nous ne devons donc pas nous distraire avec ses implémentations spécifiques au navigateur. Nous utiliserons le navigateur pour exécuter JavaScript, ce qui est très pratique pour la lecture en ligne, mais seulement parmi tant d'autres.
importance : 5
Créez une page qui affiche un message « Je suis JavaScript ! »
Faites-le dans un bac à sable ou sur votre disque dur, peu importe, assurez-vous simplement que cela fonctionne.
Démo dans une nouvelle fenêtre
<!DOCTYPEhtml>
<html>
<corps>
<script>
alert( "Je suis JavaScript !" );
</script>
</corps>
</html>Ouvrez la solution dans un bac à sable.
importance : 5
Reprenez la solution de la tâche précédente Afficher une alerte. Modifiez-le en extrayant le contenu du script dans un fichier externe alert.js , résidant dans le même dossier.
Ouvrez la page, assurez-vous que l'alerte fonctionne.
Le code HTML :
<!DOCTYPEhtml> <html> <corps> <script src="alert.js"></script> </corps> </html>
Pour le fichier alert.js dans le même dossier :
alert("Je suis JavaScript!");