Histoire de JavaScript

En 1992, Nombas a développé un langage de script embarqué appelé C-minus-minus (C--), intégré dans le logiciel CEnvi. Ce langage a ensuite été renommmé ScriptEase et exécuté côté client. Inspiré par cette idée, Netscape a créé Livescript pour Netscape Navigator 2.0, sous la direction de Brendan Eich. En collaboration avec Sun, il a été rebaptisé JavaScript. Microsoft a ensuite introduit Jscript dans Internet Explorer 3.0, une imitation de JavaScript. Pour standardiser ces implémentations, l'ECMA a défini la spécification ECMA-262, adoptée par l'ISO/IEC sous le nom ISO/IEC-16262. Ainsi, les navigateurs web ont commencé à implémenter ECMAScript comme base de JavaScript.

ECMAScript et ses composants

Une implémentation complète de JavaScript se compose de trois parties principales : le noyau ECMAScript, le modèle d'objet de document (DOM) qui intègre JavaScript, CSS et HTML, et le modèle d'objet de navigateur (BOM) qui intègre JavaScript avec le navigateur. JavaScript est principalement un langage basé sur les objets, utilisant des concepts d'encapsulation, d'héritage et de polymorphisme. ECMAScript décrit la syntaxe, les types, les instructions, les mots-clés, les mots réservés, les opérateurs et les objets.

Intégration de JavaScript dans les pages web

JavaScript peut être intégré directement dans le code HTML ou via des fichiers externes. Par exemple :

<script>
  alert('Bonjour, monde!');
</script>

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

Variables et types de données

Les variables en JavaScript sont faiblement typées, déclarées avec le mot-clé var. Elles peuvent contenir différents types, comme les nombres, les chaînes de caractères, les booléens, null et undefined. Par exemple :

let valeur1 = 10;
let valeur2 = "texte";
let somme = valeur1 + valeur2; // Conversion automatique en chaîne

Les types de données incluent Number, String, Boolean, Null et Undefined. La conversion de type peut être effectuée avec des fonctions comme parseInt, parseFloat ou typeof.

Opérateurs et structures de contrôle

JavaScript fournit des opérateurs arithmétiques, logiques et de comparaison. Les structures de contrôle comme if-else, switch, for et while permettent de gérer le flux d'exécution. Par exemple, une boucle for peut être écrite comme suit :

for (let compteur = 0; compteur < 5; compteur++) {
  console.log(compteur);
}

La gestion des erreurs se fait avec try-catch-finally, et les exceptions peuvent être lancées avec throw.

Objets intégrés et modèles

JavaScript inclut des objets intégrés tels que Array, String, Date, Math et RegExp. Par exemple, pour créer un tableau :

let tableau = [1, 2, 3];
tableau.push(4);

Les fonctions sont des objets de première classe, avec des propriétés comme length et des méthodes comme toString. Les closures et les chaînes de portée sont des concepts clés pour la gestion des variables.

BOM et DOM

Le modèle d'objet de navigateur (BOM) permet d'interagir avec le navigateur, via des objets comme window, history et location. Le modèle d'objet de document (DOM) représente la structure HTML, avec des nœuds pour les éléments, les attributs et le texte. On peut manipuler le DOM avec des méthodes comme getElementById ou createElement.

Événements et manipulation du DOM

Les événements comme onclick ou onload déclenchent des actions. Par exemple :

<button onclick="alert('Cliqué!')">Bouton</button>

<script>
  document.getElementById('monElement').addEventListener('click', function() {
    console.log('Événement capturé');
  });
</script>

La modification du DOM inclut le changement de contenu avec innerHTML, de styles avec style, et d'attributs avec setAttribute. Les opérations CRUD (création, lecture, mise à jour, suppression) sont essentielles pour la manipulation dynamique.

Exemple pratique : validation de formulaire

Un exemple courant est la validation de formulaire avec JavaScript :

<input type="text" id="champNom" value="Entrez votre nom">

<script>
  function validerChamp() {
    let champ = document.getElementById('champNom');
    if (champ.value.trim() === '') {
      champ.value = 'Entrez votre nom';
    }
  }
  document.getElementById('champNom').onblur = validerChamp;
</script>