wpRock
JS : Intégrer du code dans une page HTML
Julien MA Jacob - Développeur WordPress

Dans ce chapitre, nous voyons comment ajouter du code JavaScript directement dans une page HTML ou y intégrer du code situé dans un fichier script séparé.

Pour ce faire, nous verrons l'utilisation des balises <script> et </script> qui permettent d'exécuter du code directement sur la page HTML ainsi que la balise <script type="text/javascript" src="script.js"></script> qui permet de charger du code JavaScript depuis un fichier ayant l'extension ".js".

JS : Intégrer directement du code

Dans le fichier HTML ci-dessous, nous exécutons 2 commandes JavaScript à 2 endroits différents.

Premièrement, nous exécutons le code console.log("JS in HEAD"); dans l'entête de la page. Ce code fait apparaît une boîte de dialogue (pop-up) avec le message "JS in HEAD" et un bouton "OK" qui permet de fermer la boite. Un code situé dans l'entête de la page, c'est-à-dire entre la balise <head> et </head>, s'exécute avant que la page ne s'affiche. Dans cet exemple, la page restera blanche dans le navigateur tant que la première boîte de dialogue n'aura pas été validée par l'utilisateur.

Le second code JavaScript qui s'exécute sur cette page HTML est situé dans le corps (body) de celle -ci, c'est-à-dire entre les balises <body> et </body>. Il est possible de placer du code JavaScript où l'on le souhaite dans le corps. Ici, le code est placé avant la balise </body>, il s'exécute donc une fois que la page est entièrement affichée dans le navigateur.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>wpRock Example</title>

		<script type="text/javascript">
			console.log("JS in HEAD");
		</script>

	</head>
	<body>

		<h1>Hello wpRock !</h1>

		<script type="text/javascript">
			console.log("JS in BODY");
		</script>
	</body>
</html>

JS : Intégrer du code depuis un fichier

La balise HTML <script> peut prendre un attribut "src" auquel on peut fournir l'adresse d'un fichier à charger. L'adresse peut être un chemin vers un fichier local (situé sur la même machine que le fichier HTML) ou une URL vers un fichier distant. Cet attribut s'utilise comme ci-dessous :

<script type="text/javascript" src="script.js"></script>

Voici un exemple de l'utilisation de balises <script> avec l'attribut "src" dans un fichier HTML complet :

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>wpRock Example</title>

		<script type="text/javascript" src="script-in-head.js"></script>

	</head>
	<body>

		<h1>Hello wpRock !</h1>

		<script type="text/javascript" src="script-in-body.js"></script>
	</body>
</html>
  La newsletter wpRock : Du contenu sur le développement et la création web
Julien .MA Jacob
Développeur WordPress
Julien MA Jacob - Développeur WordPress
🧙‍♂️ Passionné par le web et la programmation avec toujours plein de projets en tête 👨‍💻
  Chapitres // JavaScript / JS 🔥 Guide du développeur galactique
wpRock - Guide WordPress Galactique (6)
JS : Les commentaires

Voyons comment les commentaires permettent d'annoter le code JS avec les syntaxes // ... et /* ... */

wpRock - Guide WordPress Galactique (27)
JS : Les opérateurs

Les opérateurs arithmétiques, d'incrémentation / décrémentation, de comparaisons, logiques et d'affectations en JS

wpRock - Guide WordPress Galactique (25)
JS : Conditions SWITCH

La condition SWITCH permet d'exécuter certains codes en fonction de la valeur d'une variable passée en paramètre

wpRock - Guide WordPress Galactique (15)
JS : Conditions ternaires

Les ternaires en JS sont des conditions qui suivent le schéma SI ... SINON SI ... SINON, avec une syntaxe bien plus courte qu'une condition IF ... ELSE IF ... ELSE mais aussi plus limitée

wpRock - Guide WordPress Galactique (14)
JS : Boucle FOR

La boucle FOR permet d'exécuter un code une ou plusieurs fois en fonction de la condition qui lui est passée en paramètre