JavaScript (JS en abrégé) est un langage de script orienté objet, principalement connu comme le langage de script des pages web. Mais il est aussi utilisé dans de nombreux environnements extérieurs aux navigateurs Web tels que Node.js.

Introduction

Le code JavaScript est interprété ou compilé à la volée (JIT) et exécuté par le navigateur. C'est un langage de programmation qui ajoute de l'interactivité aux pages web :

• Gestion des évènements utilisateurs (clics sur les boutons)
• Modification du code HTML/CSS affiché dans le navigateur (DOM)
• Requêtes réseau (AJAX)

Schéma du fonctionnement de Javascript.

Comment ajouter du code JavaScript ?

Afin d'utiliser au mieux le JavaScript et organiser ainsi son projet Web, il est vivement conseillé d'écrire le code JavaScript dans un fichier externe portant l'extension .js

Projet JavaScript

Le fichier .js doit être créé dans le répertoire qui contient le fichier html, il peut être placé dans un sous-dossier particulier pour améliorer la structure du projet.

Il est ensuite appelé depuis la page Web au moyen de la balise <script> en ajoutant la ligne suivante dans le fichier html juste avant la balise fermante </head> :

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

Stratégie de chargement du script

Par défaut le chargement du script est bloquant, il faut donc éviter que le reste de la page (code html) soit bloqué tant que le script n'est pas chargé.

• Première solution : placer la balise <script> en fin de code html juste avant la balise fermante </body>
• Deuxième solution : utiliser un attribut spécifique avec la balise <script>. L'attribut defer permet notamment d'indiquer au navigateur que le code JavaScript ne doit être exécuté qu'une fois que le code HTML a fini d'être analysé.
• L'attribut defer permet également d'exécuter les scripts dans l'ordre donné dès la fin du chargement de la page.

La console Web

À l'heure actuelle, tous les navigateurs sont équipés d'une console de développement Web permettant notamment de tester du code JavaScript, grâce à cette console, on peut effectuer de nombreuses tâches comme :

• Afficher des messages ;
• Entrer et tester des instructions à la volée (avec auto-complétions) ;
• Tester des fonctions en ligne ;
• Visualiser les erreurs et les avertissements détectés lors de l'exécution du script ;
• Visualiser les valeurs des variables ;
• Interagir avec la page web en question.

Pour rappel, afin d'accéder à la console de développement dans un navigateur tel que Google Chrome ou Microsoft Edge, effectuez i, clique-droit, "Inspecter l'élément" ou taper le raccourci F12, puis sélection l'onglet "Console".

La console développeur

La fonction console.log()

La fonction console.log() est une fonction JavaScript qui permet d'afficher un message dans la console du navigateur.

console.log(obj);

Le terme obj est de manière générale un objet JavaScript, mais on peut utiliser cette fonction sur tout type de variable comme une simple chaîne de caractères :

console.log("Hello World");

Comme dans la plupart des langages de programmation, toute instruction codée en JavaScript se termine par un point-virgule.

Les commentaires en JavaScript

Il est possible d'intégrer des commentaires dans du code JavaScript, de la même manière que dans les CSS :

/* 
   Voici un commentaire 
   écrit sur plusieurs lignes !
*/

Si votre commentaire tient sur une ligne, vous pouvez utiliser également deux barres obliques :

// Ceci est un commentaire sur une ligne

Activité

Projet Hello World

Dans votre EDI préféré comme Visual Studio Code par exemple, créez le dossier racine de votre projet (par exemple : HelloWorld_JS et un sous-dossier js ou scripts).

• Ajoutez dans ce dossier un fichier index.html et générer la structure en html5 de cette page
• Ajoutez un fichier Javascript helloworld.js dans le sous-dossier js.
• Ajoutez dans le fichier index.html le lien vers le fichier js.
• Coder l'instruction qui permet d'afficher le message "Bienvenue en JavaScript" dans la console du navigateur.
• Charger la page web dans le navigateur en utilisant la commande "Open with Live Server" afin d'ouvrir un serveur en direct avec l'IDE Visual Studio Code.
• Vérifier que le message est bien affiché dans la console du navigateur comme dans l'aperçu ci-dessous :

Vous pouvez bien évidemment travailler en local avec XAMPP ou Laragon !