1NSI_Interagir sur une page web

Interaction avec l’utilisateur dans une page Web grâce à JavaScript

D'après G. Becker et S.Points

Qu’est-ce que JavaScript ?

Premiers pas en JavaScript

Des défis pour se préparer.

Vous cliquez dans capytale sur le lien "les défis pour se préparer" Faites les défis qui se situent en bas de page.

Premiers pas en JavaScript

Comme indiqué précédemment, le JavaScript est un langage essentiellement utilisé avec le HTML, vous allez donc apprendre dans ce chapitre comment intégrer ce langage à vos pages Web pour les rendre dynamiques. Il y a deux façons d’écrire le code JS d’une page Web : • soit directement dans le HTML (obsolète, mais encore présente dans beaucoup de pages Web anciennes) • soit dans un fichier séparé au format .js (pratique recommandée notamment car le code est plus facilement maintenable et que l’on peut alors l’appliquer à plusieurs documents HTML) On détaille ci-après les deux méthodes pour afficher le traditionnel texte « Hello World ! » (= « Bonjour le monde ! » en français) à l'utilisateur.

1ère méthode (à éviter) mais comme elle existe je vous la présente.

Chaque instruction JavaScript doit se terminer par un point-virgule.

2ème méthode (recommandée) : séparer le JavaScript du HTML

C'est le même principe que pour faire référence au fichier CSS!

Comment tester du code javascript?

Pour écrire et tester du code JS on peut : ◦ Utiliser un éditeur de texte pour écrire le JS et le HTML (exemples : Visual studio Code etc.) et un navigateur pour tester ; ON VA CONTINUER A TRAVAILLER AINSI! ◦ Utiliser un bac à sable en ligne comme JSFiddle (https://jsfiddle.net/) qui permettent de tester des codes directement en ligne sans enregistrer de fichiers sur votre ordinateur ; ◦ On peut également utiliser la console JavaScript d’un navigateur. Dans Firefox, on peut ouvrir la console Web par le raccourci Ctrl + Maj + K (ou dans Menu puis Développement web puis Console web). Il suffit alors d’écrire le code JS dans cette console puis l’exécuter. En phase de tests et de débogage il peut être intéressant d’utiliser la console du navigateur.

Interaction avec l’utilisateur dans une page Web

Dans ce qui suit, on s’attache à écrire un code JavaScript simple et qui fonctionne dans la majorité des cas afin de ne pas entrer dans des considérations trop techniques du langage. En particulier, on utilise var pour déclarer toutes les variables, quelles que soient leur nature ; on utilise querySelector pour sélectionner un élément HTML, quel qu’il soit, etc.

A. LES EVENEMENTS

B. DEFINIR LES GESTIONNAIRES D'ELEMENTS

Pour écouter et répondre à un événement, on définit ce qu’on appelle des gestionnaires d’événements chargés à la fois d’écouter le déclenchement d’un événement et d’exécuter le code associé dès que l’événement se produit. Aujourd’hui, en JavaScript, il existe trois grandes façons de définir un gestionnaire d’événements : • On peut utiliser des attributs HTML de type événement (obsolète → à ne plus utiliser) ; • On peut utiliser des propriétés JavaScript liées aux événements ; • On peut utiliser la méthode addEventListener() (recommandé ). On va détailler les trois méthodes permettant d’afficher le message « Hello World ! » dès lors que l’on clique sur un certain bouton de la page Web.

B. DEFINIR LES GESTIONNAIRES D'ELEMENTS

1 ère méthode : Utiliser un attribut HTML de type événement (obsolète mais vous pouvez la rencontrer dans des sujets de bac récent et sur d'anciennes pages web)

Un attribut onclick est ajouté au bouton et sa valeur est la fonction JavaScript contenant le code à exécuter dès que l’événement survient. Souvent, les attributs possèdent le nom de l’événement qu’ils doivent écouter et gérer précédé par « on » (par exemple : onclick, onmouseover, onmouseout, etc.). En pratique, on ne procède plus ainsi.

B. DEFINIR LES GESTIONNAIRES D'ELEMENTS

2ème méthode : Utiliser les propriétés JavaScript liées aux événements

On crée une variable bouton en allant chercher l'id du bouton dans le html. On crée un fonction afficheMsg(). Et on dit que quand on clique sur le bouton, on exécute la fonction.

B. DEFINIR LES GESTIONNAIRES D'ELEMENTS

3ème Méthode : Utiliser la méthode addEventListener() (recommandée)

C’est le mécanisme d’événement le plus récent, le plus flexible et le plus performant (on ne rentrera pas dans les détails ici). C’est celui qui a été présenté dans les vidéos de l’activité et celui à privilégier aujourd’hui. Il fournit aux navigateurs une nouvelle fonction appelée addEventListener() qui fonctionne de la même manière que les propriétés du gestionnaire d’événement, mais la syntaxe est légèrement différente.

Dans la fonction addEventListener, il faut spécifier deux paramètres : le nom de l’événement (ici click mais on peut remplacer par mouseover ou un autre) et le nom de la fonction à exécuter en réponse à cet événement.

B. DEFINIR LES GESTIONNAIRES D'ELEMENTS

3ème Méthode : Utiliser la méthode addEventListener() (recommandée)

Le code JS précédent de la méthode 2 peut s’écrire de manière équivalente de plusieurs façons, par exemple :

ou

C. MODIFIER LES ELEMENTS DE LA PAGE

Soit la page html ci-dessous et son aperçu. On utilisera cet exemple pour tout ce qui suit.

Voici quelques exemples de fonctions permettant de modifier les propriétés des éléments de la page Web. On suppose que ces fonctions sont appelées lors du clic sur le bouton de la page comme on l’a vu dans le paragraphe précédent.

C. MODIFIER LES ELEMENTS DE LA PAGE

C. MODIFIER LES ELEMENTS DE LA PAGE

C. MODIFIER LES ELEMENTS DE LA PAGE

BILAN

• Lors de la navigation sur le Web, les internautes interagissent avec leur machine par le biais des pages Web. • L’Interface Homme-Machine (IHM) repose sur la gestion d’événements associés à des éléments graphiques munis de méthodes algorithmiques. • Un événement est une action qui se produit, comme un clic sur un bouton (click), le survol d’un lément avec la souris (mouseover), etc. • On peut « écouter » un événement pour détecter lorsqu’il se produit et on peut lui « répondre » en lui associant un code qui va s’exécuter dès qu’il se produit. • Le langage JavaScript, associé au HTML, permet d’implémenter la gestion de ces événements en utilisant ce qu’on appelle un gestionnaire d’événement. • Aujourd’hui, on recommande d’utiliser la méthode addEventListener pour gérer les événements.

Des défis pour mettre en oeuvre

• Vous cliquez maintenant le lien sur Moodle qui vous renvoie vers Capytale
• Il y a un début de code html et css qu'il faudra adapter selon les défis.
• La partie js est vide, c'est normal! Ce sont les défis qui vont le garnir.
• Vous faites tous les défis sur ce même lien capytale.

Des DEFIS POUR METTRE EN OEUVRE

Modifier les styles d’une balise

Défi 1 : Créez une page avec 3 boutons qui permettent de choisir la couleur de fond de la page parmi 3 couleurs. Défi 2 : Rajoutez un paragraphe dont la couleur du texte est modifiée à son survol. Bonus : le paragraphe doit revenir à son état initial à la fin du survol.

Des DEFIS POUR METTRE EN OEUVRE

Changer le texte d'une balise

Défi 3 : Rajoutez 2 boutons qui permettent d’afficher deux textes différents dans un paragraphe (le 1er bouton affiche un texte et le 2ème bouton en affiche un autre). Défi 4 : Rajoutez 1 bouton permettant d’effacer le contenu de deux paragraphes.

Des DEFIS POUR METTRE EN OEUVRE

Utiliser des variables simples

Défi 5 : Créez un "Compteur de clic", c'est à dire 1 bouton et une zone d'affichage dont la valeur initiale est 0 et qui augmente de 1 à chaque clic. Défi 6 : Ajoutez ensuite un deuxième bouton de remise à zéro.

Des DEFIS POUR METTRE EN OEUVRE

Utiliser les données d'un champ de saisie

Défi 7 : Rajoutez un champ de saisie et un bouton. L’utilisateur entre son année de naissance et le bouton permet d’afficher son âge dans une zone d’affichage (un paragraphe par exemple). Défi 8 : Rajoutez un bouton et deux champs de saisie. Au clic sur le bouton, la somme des deux entiers entrés par l’utilisateur doit s’afficher dans une zone d’affichage (un paragraphe par exemple). Défi 9 : Rajoutez un bouton et trois champs de saisie. Au clic sur le bouton, la couleur de fond de la page doit prendre la couleur RVB dont les composantes R, V et B ont été entrées par l’utilisateur. Exemple : si l’utilisateur entre 5, 121 et 143 dans les 3 zones de saisie, alors le fond de la page doit prendre la couleur rgb(5,121,143).