Fiche de révision : Pages interactives

Intégration de JavaScript dans une page web

• L’intégration de JavaScript dans une page HTML s’effectue par le biais d’une balise HTML dédiée, qui est la balise SCRIPT.
• La balise SCRIPT contient soit le code JavaScript, soit l’emplacement de celui-ci.
• L’extension d’un fichier contenant du code JavaScript est .js.
• Les scripts stockés dans des fichiers externes permettent d’être appelés par plusieurs pages distinctes sans répétition du code.
• L’endroit où l’on insère la balise SCRIPT, cela a une incidence sur la vitesse d’affichage : on placera de préférence les scripts JavaScript à la fin de l’élément BODY.
• Cela permet d’éviter que l’interprétation des scripts ne ralentisse l’affichage des éléments visibles de la page.

Manipulation du DOM par JavaScript

• Le DOM ou modèle objet de document est une interface qui permet à un langage de programmation de manipuler le contenu, la structure et le style d’une page web.
• L’interface que constitue le DOM est accessible à JavaScript et plusieurs méthodes d’accès sont prévues :
• on peut accéder à un élément par son identifiant, avec la méthode getElementById() ;
• on peut accéder à une classe d’éléments, avec la méthode getElementByClassName() ;
• on peut accéder aux éléments par le biais de leurs sélecteurs CSS, deux méthodes sont proposées : querySelector() et querySelectorAll().
• JavaScript nous offre un large éventail de possibilités de manipulation du DOM de notre document :
• création d’un bouton, capable de modifier son propre contenu html lorsqu’on clique dessus ;
• un événement déclencheur sur un élément donné, peut également servir à modifier un élément tiers ;
• modification peuvent aussi bien porter sur les propriétés d’un l’élément (attributs HTML) que sur son style (propriétés CSS) ;
• ajouter des éléments nouveaux à ceux déjà créés dans le code html.
• Cette flexibilité offerte par l’accès au DOM avec JavaScript prend tout son sens dans un contexte interactif où la page HTML va pouvoir être modifiée en fonction d’événements et d’interactions avec l’utilisateur.

Gestion des événements avec JavaScript

• Les événements sont des actions détectées par JavaScript à partir desquelles il sera possible d’exécuter un script, elles peuvent être interactifs ou non-interactives.
• Événements non interactifs :
• déclenchement d’une action lorsque la page a fini de charger l’ensemble des contenus.
• Événements interactifs :
• le cas d’usage le plus courant est le clic sur un bouton, détecté avec onclick ;
• gérer les clics de la souris ou le survol d’un élément par la souris ;
• gérer des interactions en provenance du clavier de l’utilisateur, à l’aide des méthodes dédiées keypress, keydown et keyup.
• Gestion personnalisée d’événements avec les écouteurs :
• avec la méthode addEventListener() et ainsi programmer le déclenchement d’actions spécifiques en fonction de la survenue de différents événements ;
• il est possible d’ajouter plusieurs écouteurs à un même élément, y compris plusieurs écouteurs sur la même méthode ;
• l’emploi d’écouteurs permet aussi de bien dissocier le code JavaScript du code HTML.