HTML & JS : Interactivité via 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.

Dans la page menu de ce tuto 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

Survolez n'importe quelle des deux images, elles deviennent très nettes.

Cliquez n'importe quelle des deux images, elles sont remplacées par des images plus dénudées.

La page change donc d'aspect alors qu'il n'y a pas de rechargement de celle-ci ; pas de requête HTTP.
C'est simplement un changement dans le DOM initial.

Cliquez sur le bouton de commande légendé "réinitialiser la page" : la page retrouve son aspect initial (lors du chargement).
Mais il n'y a pas rechargement de la page ; pas de requête HTTP. 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 !!!

Le code CSS et HTML

Grâce à une règle de style CSS toutes les images de la page sont à demi transparentes.
Pour chaque image sur survol appel de la fonction fmodif1, sur clic appel de la fonction fmodif2.
Si clic sur le bouton de commande légendé "réinitialiser ..." appel de la fonction freset.
Pour chaque image on utilise donc deux attributs d'événements : onmouseover (sur survol) et onclick (sur clic)
La valeur de l'attribut événementiel est du code JavaScript : une instruction JS ou une fonction JS.

Le script (extrait : sans le conteneur SCRIPT)

var image1 = document.querySelectorAll('img')[0] ; 
var image2 = document.querySelectorAll('img')[1] ; 
function fmodif1()
{
		image1.style.opacity = 1 ; 
		image2.style.opacity = 1 ;
}
function  fmodif2()
{
		image1.src = '../images/jolie_fille.jpg' ; 
		image2.src = '../images/seins_nus.jpg' ;
}
function freset()
{
		image1.style.opacity = 0.5 ; 
		image2.style.opacity = 0.5 ;
		image1.src = '../images/trikini.jpg' ; 
		image2.src = '../images/burkini.jpg' ;
}

Attention un script interne à une page doit être à l'intérieur du conteneur SCRIPT !

Pour manipuler en JavaScript 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 JavaScript 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.

Examinons quelques instructions :
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.

Conclusion

J'espère que cette page de présentation du JavaScript vous donne envie d'en savoir plus sur ce langage du web.
Il existe dans mon site tout un tuto sur ce langage et son framework le plus utilisé : JavaScript & jQuery
Retour menu