13 avril 2021

Hello, world!

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. Habiutellement c’était type="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 la langue 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 courrant.

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>
…
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é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.

Si 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 type et de langue ne 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.

Exercices

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

<!DOCTYPE html>
<html>

<body>

  <script>
    alert( "I'm JavaScript!" );
  </script>

</body>

</html>

Ouvrez la solution dans une sandbox.

importance: 5

Prendre la solution de l’exercice précédent 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.

The HTML code:

<!DOCTYPE html>
<html>

<body>

  <script src="alert.js"></script>

</body>

</html>

pour le fichier alert.js dans le même dossier :

alert("I'm JavaScript!");
Carte du tutoriel

Commentaires

lire ceci avant de commenter…
  • Si vous avez des améliorations à suggérer, merci de soumettre une issue GitHub ou une pull request au lieu de commenter.
  • Si vous ne comprenez pas quelque chose dans l'article, merci de préciser.
  • Pour insérer quelques bouts de code, utilisez la balise <code>, pour plusieurs lignes -- enveloppez-les avec la balise <pre>, pour plus de 10 lignes - utilisez une sandbox (plnkr, jsbin, codepen…)