Interactivité avec JavaScript

Attention il ne s'agit pas d'un tutoriel JavaScript mais simplement d'une petite démonstration par l'exemple de l'utilité de ce langage de programmation.
Il existe dans mon site tout un tuto sur ce langage : JavaScript & jQuery

Dans la page précédente je vous ai montré que l'on peut modifier l'aspect d'une page avec CSS lorsque survient un événement : survol voire clic sur une image par exemple.
Mais les possibilités sont limitées : on ne peut modifier que les propriétés de style pour l'élément courant (et pas un autre).

Dans cette page l'interactivité est beaucoup plus poussée grâce à l'emploi du JavaScript.
JavaScript est un langage de programmation très utilisé par les développeur Web.
Le code est interprété par le navigateur. On dit qu'il est exécuté côté client (alors que PHP est exécuté côté serveur).

Interactivité de cette page

Dès que cette page est chargée une boite de dialogue apparait avec un message : "bonjour".
Cliquez sur le bouton "OK" pour fermer cette boite de dialogue et poursuivre l'affichage de la page.
Cliquez sur n'importe quelle des deux images : lesdites images sont remplacées par d'autres plus dénudées ... Ces nouvelles images sont bien nettes alors que les précédentes étaient à demi transparentes.
Cliquez sur le bouton de commande légendé "réinitialiser la page" : la page retrouve son aspect initial (lors du chargement). interactivité page grâce à JS interactivité page grâce à JS

Le code de la page (extraits)

La page peut changer d'apparence (sans rechargement) grâce à JavaScript !!!

Examinons maintenant certains extraits du code de la page.

<style> img {width : 30%; opacity : 0.5 ; } </style> ... <body onLoad ="alert('bonjour')" > ... <img src ='../images/trikini.jpg' onclick ="fmodif()"> <img src ='../images/burkini.jpg' onclick ="fmodif()" > <button onClick ="freset()"> Réinitialiser la page</button> ... <script> var image1 = document.querySelectorAll('img')[0] ; var image2 = document.querySelectorAll('img')[1] ; function fmodif() { image1.style.opacity = 1 ; image2.style.opacity = 1 ; image1.src = '../images/jolie_fille.jpg' ; image2.src = '../images/seins_nus.jpg' ; } function freset() { image1.style.opacity = .5 ; image2.style.opacity = .5 ; image1.src = '../images/trikini.jpg' ; image2.src = '../images/burkini.jpg' ; } </script> ...

Analyse de tout ce code

Une règle de style

Grâce à une règle de style CSS toutes les images de la page sont à demi transparentes.

Une instruction JS en guise de valeur d'attribut

Le JavaScript c'est de la programmation événementielle. C'est à dire qu'une routine se déclenche lorsqu'un événement survient sur un élément de la page.
body onLoad ="alert('bonjour')" : à la balise BODY j'ai ajouté l'attribut "onLoad" (sur chargement de la page). La valeur de cet attribut est une instruction JavaScript. Cette instruction est basée sur une fonction native JS : alert(). Cette fonction affiche une boite de dialogue avec comme message l'argument de la fonction (ici "bonjour") et un bouton OK. Pour fermer cette boite il faut cliquer sur OK.

Il existe d'autres attributs de type événement : onClick, onBlur, onFocus, onChange, etc.

Gestionnaire d'événement appelant une fonction nommée

Le plus souvent la valeur de l'attribut d'événement est le nom d'une fonction JS que vous avez créée.
<img src ='../images/trikini.jpg' onclick ="fmodif()" > : si clic sur la première image appel de la fonction "fmodif()".
<img src ='../images/burkini.jpg' onclick ="fmodif()" > : si clic sur la deuxième image appel de la fonction "fmodif()".
<button onClick ="freset()"> Réinitialiser la page > : si clic sur le bouton de commande appel de la fonction "freset()"

Le code JS dans le conteneur SCRIPT

Le code JavaScript de la page doit être contenu dans le conteneur SCRIPT (sauf celui qui est passé en valeur d'attribut).

Pour manipuler en JS un élément HTML il faut d'abord le référencer avec une variable objet.
La variable objet image1 cible la première image de la page. La variable objet image2 cible la deuxième image.
Comme ces deux variables sont déclarées en dehors de toutes fonctions elles sont globales et peuvent donc être utilisées dans toutes les fonctions.
Les techniques pour sélectionner en JS les éléments de la page sont nombreuses. Ici j'utilise la méthode document.querySelectorAll(). Mais il y en d'autres ...

Examinons maintenant les fonctions.
Via ces fonctions on modifie les valeurs d'attributs ou de propriétés d'éléments de la page.

La fonction "fmodif()" :

Examinons deux instructions parmi les quatre !
image1.style.opacity = 1 : avec cette instruction la première image de la page devient totalement opaque.
image1.src = '../images/jolie_fille.jpg' : avec cette instruction la première image de la page change de source.
Notez bien les syntaxes : élément.attribut pour modifier la valeur d'un attribut OU élément.style.propriété pour modifier la valeur d'une propriété de style.

Je ne commente pas la fonction "freset()" puisqu'elle utilise les mêmes syntaxes que "fmodif()".
Retour menu