JavaScript : qu'est-ce que c'est et comment ça fonctionne ? Guide complet

JavaScript est un pilier du développement web moderne. Ce langage puissant et polyvalent est indispensable pour tout développeur web souhaitant créer des expériences interactives.

Avec des fonctionnalités uniques qui le distinguent des langages compilés traditionnels, JavaScript s'exécute directement dans les navigateurs. Explorons son essence, son fonctionnement et ses applications pratiques.

Qu'est-ce que JavaScript ?

JavaScript est un langage de script interprété conçu pour le web. Contrairement à C ou C++, il ne nécessite pas de compilation : son code s'exécute directement dans le navigateur.

La norme actuelle est ECMAScript 2023 (ES2023), avec des mises à jour annuelles pour plus de modernité et de performances.

Il s'intègre parfaitement à HTML et CSS pour bâtir des sites et applications web dynamiques. Supporté par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge, Opera) et mobiles (Android, iOS).

JavaScript gère les éléments interactifs des pages, fonctionne côté client et serveur (via Node.js), et exploite les API pour des fonctionnalités avancées.

Pour bien appréhender JavaScript, comprendre les bases de la programmation web est clé.

Les blocs de construction des applications web

Trois technologies fondamentales : HTML (structure), CSS (style) et JavaScript (interactivité).

• HTML : langue de balisage formant le squelette (paragraphes, images, titres).
• CSS : gère l'apparence (couleurs, polices, mises en page).
• JavaScript : anime le site (clics, formulaires, médias).

Ces trois piliers collaborent pour des applications robustes. Maîtrisez HTML et CSS pour exceller en JavaScript.

Comment fonctionne JavaScript ?

Deux concepts clés : le moteur du navigateur et le DOM (Document Object Model).

Le navigateur parse le HTML pour générer le DOM, une représentation dynamique de la page accessible à JavaScript.

Il charge ensuite CSS et images. HTML + CSS forment la page statique, puis JavaScript s'exécute une fois le chargement terminé, modifiant le DOM en temps réel.

Cet ordre garantit que JavaScript interagit avec des éléments existants.

Que peut-on faire avec JavaScript ?

Langage complet, JavaScript rivalise avec Python pour :

• Déclarer des variables.
• Stocker/récupérer des valeurs.
• Définir/appeler des fonctions (y compris fléchées).
• Créer objets et classes.
• Importer des modules.
• Gérer les événements (clics...).
• Développer côté serveur.
• Bien plus !

Avertissement : Sa puissance permet aussi des malwares (vol de données, virus). Utilisez-le responsablement.

Utiliser JavaScript

Exemples pratiques pour débutants.

Déclarer des variables

Typage dynamique : pas besoin de spécifier les types.

let num = 5;
let myString = "Bonjour";
var tauxInteret = 0.25;

Opérateurs

Addition :

12 + 5
// 17

Soustraction :

20 - 8
// 12

Multiplication :

5 * 2
// 10

Division :

50 / 2
// 25

Modulo :

45 % 4
// 1

Tableaux

let myArray = [1, 2, 4, 5];
let stringArray = ["bonjour", "monde"];

Fonctions

Fonction simple d'addition :

function addNumbers(num1, num2) {
  return num1 + num2;
}
addNumbers(10, 5);
// 15

Boucles

Boucles for et while :

for (let i = 0; i < 3; i++) {
  console.log("echo!");
}
// echo! (x3)

let i = 0;
while (i < 3) {
  console.log("echo!");
  i++;
}
// echo! (x3)

Commentaires

// Commentaire sur une ligne

/*
Commentaire
multiligne
pour plus de clarté
*/

Dans une page web

Via la balise <script> :

• Fichier externe :

  <script src="/path/to/script.js"></script>
  

• CDN :

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  

• Inline :

  <script>
  alert("Page chargée!");
  </script>
  

Techniques avancées existent pour le chargement dynamique (modules, frameworks).

Exemples de code JavaScript

Interactions DOM :

• Colorer le premier <b> en rouge :

  var elems = document.getElementsByTagName('b');
  elems[0].style.color = 'red';
  

• Changer une image :

  <img id="myImg" src="prev-image.png">
  <button onclick="document.getElementById('myImg').src='new-image.png'">Changer</button>
  

• Mettre à jour un paragraphe :

  <p id="first-para">Hello World</p>
  <button onclick="document.getElementById('first-para').innerHTML='Bienvenue en JavaScript!'">Cliquez</button>
  

Testez en console (F12) !

Vous maîtrisez les bases de JavaScript

Cette introduction vous prépare au développement web. Consultez notre aide-mémoire JavaScript, explorez le DOM ou TypeScript pour aller plus loin.