Les événements en JAVASCRIPT ============================ Une page WEB s’affiche sur le navigateur d’une machine cliente. On rappelle que l’affichage de cette page WEB fait suite à une requêtre HTTP de la machine cliente vers le serveur qui dispose de la page WEB. Le serveur répond à la requête HTTP en renvoyant la page WEB demandée au format HTML et avec un code d’état égal à 200 et un statut OK. La page WEB est au format HTML, contient des propriétés CSS pour l’affichage et aussi (éventuellement) des scripts en langage ``JAVASCRIPT``. .. figure:: ../img/requete_http.png :alt: image :align: center Un script ``JAVASCRIPT`` chargé avec la page web est un programme exécuté par le navigateur du client qui permet d’agir sur la page WEB affichée. Un script JAVASCRIPT peut: - modifier le contenu de la page et ses balises HTML. - modifier l'affichage en ajoutant ou en modifiant les propriétés CSS, - interagir avec l'utilisateur avec les **événements** JAVASCRIPT. Lorsqu'un script est chargé dans une fenêtre ou un onglet du navigateur, celui-ci s'exécute dans la fenêtre ou l'onglet qui l'a chargé. Introduction au JAVASCRIPT -------------------------- Un script JAVASCRIPT peut être placé n'importe où dans la page HTML. Néanmoins, il est préférable de l'ajouter : - soit dans l'entête du document HTML entre les balises ```` et ````, - soit à la fin du document juste avant la balise ```` ou la balise ````. Un script ``JAVASCRIPT`` est toujours placé entre les balises ````. La structure du document HTML devient: .. code:: html :caption: Script javascript dans un document HTML ... ... Gestion des événements en JAVASCRIPT ------------------------------------ Le langage JAVASCRIPT permet la gestion des événements. Il est à l'écoute des interactions de la personne avec la page WEB. Voici quelques événements en ``JAVASCRIPT``: - Le clic de la souris : ``onClick``, - le survol par la souris d'une partie de l'écran, d'un mot, d'une image, etc : ``onMouseover``, - le chargement complet de la page : ``onload``, La gestion d'un événement en ``JAVASCRIPT`` se déroule en 2 étapes: #. On crée un script ou une fonction en javascript qui agit sur la page WEB affichée, #. On ajoute un déclencheur de cette action en plaçant dans une balise HTML l'événement JAVASCRIPT. Par exemple, une page WEB permet de changer la couleur du titre principal lorsqu'on clique dessus. On écrit une fonction ``colore`` qui change la couleur du titre puis dans dans la balise ``h1`` on ajoute le déclencheur de l'événement ``onClick="colore()"``. On obtient le code suivant: .. code:: html :caption: Événement en javascript ...

Changer la couleur du titre

La gestion d'un événement javascript...

.. raw:: html :class: demo

Changer la couleur du titre

La gestion d'un événement javascript...

Agir sur le contenu du document ------------------------------- Le langage javascript permet de modifier le contenu d'une page web. Pour cela, il faut utiliser des identifiants pour les balises HTML. Chaque identifiant est unique dans le document WEB. Cela permet aux scripts ``JAVASCRIPT`` d'agir sur le document sans risque de conflit. On peut agir sur un document de différentes manières. Par exemple, - En modifiant son apparence (comme vu précédemment), - En modifiant le contenu du document, - En ajoutant du contenu à un document. Prenons l'exemple d'un document qui ajoute la date du jour et l'heure. En voici le code: .. code:: html :caption: Afficher la date et l'heure en javascript Afficher la Date et l'Heure

La date et l'heure du jour

.. note:: #. Le document HTML contient une balise ``div`` qui crée un emplacement dans le document. On remarque que cette balise n'a pas de contenu. #. La balise a un identifiant ``datetime`` qui est utilisé par la script javascript. #. Le script javascript crée la date et l'heure en l'actualisant toutes les secondes. .. raw:: html :class: demo Afficher la Date et l'Heure