Boîtes de dialogue natives

JavaScript propose trois méthodes intégrées pour interagir directement avec l'utilisateur via des fenêtres modales :

// 1. Alerte simple pour afficher un message
window.alert("Opération terminée avec succès.");

// 2. Demande de confirmation (retourne un booléen)
const userConsent = window.confirm("Acceptez-vous les conditions d'utilisation ?");

// 3. Invite de saisie (retourne une chaîne ou null)
const userName = window.prompt("Veuillez entrer votre identifiant :", "Invité");

Mots-clés et mots réservés

Le langage repose sur un ensemble de mots-clés stricts qui ne peuvent pas être utilisés comme identifiants (variables, fonctions, classes, etc.).

Mots-clés principaux

break, case, catch, continue, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with.

Mots réservés

Ces termes sont réservés pour des extensions futures du langage ou pour maintenir la compatibilité sémantique avec d'autres langages orientés objet :

abstract, boolean, byte, char, class, const, debugger, double, enum, export, extends, final, float, goto, implements, import, int, interface, long, native, package, private, protected, public, short, static, super, synchronized, throws, transient, volatile.

Séquences d'échappement

Les caractères d'échappement permettent d'insérer des caractères spéciaux ou de formatage dans les chaînes de caractères.

Fonctions globales natives

L'environnement d'exécution fournit plusieurs fonctions utilitaires pour la manipulation des types, l'évaluation et le parsing :

• eval(codeString) : Exécute une chaîne de caractères comme du code JavaScript. Retourne le résultat de l'évaluation ou undefined.
• escape(text) : Encode une chaîne en convertissant les caractères spéciaux en séquences hexadécimales (fonction obsolète, remplacée par encodeURI).
• unescape(encodedText) : Décode une chaîne précédemment encodée (obsolète, remplacée par decodeURI).
• parseFloat(text) : Analyse une chaîne et retourne un nombre à virgule flottante.
• parseInt(text, radix) : Convertit une chaîne en entier selon la base spécifiée. Par défaut base 10, base 16 si la chaîne est préfixée par "0x", ou base 8 si préfixée par "0" (dans les anciennes spécifications).
• isNaN(value) : Évalue si la valeur fournie n'est pas un nombre valide (Not a Number).

Manipulation basique du DOM

L'interaction dynamique avec les éléments HTML se fait via l'API du Document Object Model (DOM) :

const titleElement = document.querySelector('#main-title');
titleElement.style.fontSize = `${computedSize}px`;

const dashboardPanel = document.querySelector('.panel-container');
dashboardPanel.style.backgroundColor = currentThemeColor;

Architecture et gestion des événements

Le modèle événementiel permet de rendre les interfaces interactives en réagissant aux actions de l'utilisateur, du clavier ou du navigateur.

Composants d'un événement

• Source de l'événement : L'objet qui déclenche l'action (ex: l'objet window, un formulaire, un nœud DOM spécifique).
• Type d'événement : La nature de l'action (clic, chargement de page, mutation du DOM, frappe clavier).
• Gestionnaire (Handler) : La fonction ou le bloc de code exécuté en réponse au déclenchement.

Attribution des gestionnaires

Il existe plusieurs approches pour lier un gestionnaire à un événement spécifique :

1. Attribution statique (Inline HTML)

<button onclick="handleButtonClick()">Valider</button>

2. Attribution dynamique (DOM Level 2)

const submitBtn = document.querySelector('#submit-form');
submitBtn.addEventListener('click', function(event) {
  // Logique de traitement de l'événement
  console.log("Formulaire en cours de soumission");
});

3. Ciblage d'objets spécifiques

Bien que d'anciennes implémnetations propriétaires utilisaient des attributs spécifiques pour lier des scripts à des objets, la norme moderne repose sur l'écouteur d'événements standardisé :

<script type="text/javascript">
  const targetElement = document.getElementById('myObject');
  targetElement.addEventListener('customEvent', function() {
    // Traitement de l'événement personnalisé
  });
</script>

Retour de valeur et annulation

Pour annuler un comportement par défaut (comme la soumission d'un formulaire ou la navigation d'un lien), le gestionnaire inline doit retourner false, ou le gestionnaire dynamique doit appeler event.preventDefault().

<form onsubmit="return validateFormData();">
  <!-- Champs du formulaire -->
</form>

Référentiel des gestionnaires d'événements courants

Événements de fenêtre et de formulaire

Événements de souris

Événements de clavier