Préparer le travail

Deux logiciels sont nécessaires :

- le navigateur afin de visualiser la page web

- l'éditeur de code NotePad++ qui sert à modifier le code.

- Télécharger le dossier "comprendre_evenement_html_js.zip".

- Déplacer ce dossier dans votre dossier personnel "Informatique".

- Décompresser le au même endroit (clic droit -> Extraire tout) et ouvrir le dossier décompressé.

- Observer l'organisation des dossiers et fichiers.

- Ouvrir dans le navigateur Chrome le fichier "page1.html" (clic droit - Ouvrir avec) :

- Ouvrir le fichier dans l’éditeur Notepad++ (clic droit sur le fichier) :

- page1.html

- style2.css

- script1.js

Événement sur une liste de sélection :

Analyse

a- Dans Chrome, tester la liste de sélection et expliquer à quoi correspond le n° devant le nom du fruit dans le message qui s'affiche.

b- Dans le fichier page1.html, quelles sont les balises à utiliser pour définir une liste de sélection ?

c- Dans le fichier page1.html, quel est l'événement qui permet de lancer la fonction choixFruit() ?

d- Est-ce que des paramètres sont passés lors de l'appel de cette fonction ?

e- Sachant qu'en JavaScript, alert(message) permet d'ouvrir une fenêtre avec un message, dans le fichier script1.js, quelle est l'instruction qui permet d'afficher le n° vu à la question a- ?

f- Dans le fichier page1.html quelle instruction permet de donner ce n° ?

g- Dans le fichier script1.js, trouver le nom de l'instruction qui permet d'afficher un message.

Vous remarquerez entre python et JavaScript la similitude de concaténation de chaînes de caractères : le signe + est utilisé.

Modification

h- En examinant la structure de la liste select, ajouter à la liste, le fruit kiwi en y adjoignant le n° qui convient : tester votre modification.

Événement sur clic avec message

Afin de comparer JavaScript avec python examinons le fichier script1.js  :

b- En python, l'organisation des instructions en blocs (les boucles, les fonctions, les tests) se fait par l'indentation ; en JavaScript, comment sont délimités les blocs ?

c- En python, comment est déclarée une fonction ?  De même en JavaScript ?

d- Dans page1.html, quel est l'événement qui est utilisé pour afficher Un et Deux ?

e- Dans page1.html, quel est le nom de la fonction appelée ? Est-ce qu'il y a des paramètres passés ?

Modification

f- En examinant la structure de la liste, ajouter à la liste ordonnée une troisième ligne qui affiche "Trois" : tester votre modification.

d- Dans script1.js, modifier le texte qui doit s'afficher lorsqu'il y a un clic.

d- Dans le fichier page1.html, modifier le texte de l'attribut value : tester dans chrome les changements. En déduire l'utilité de l'attribut value.

e- Dans page1.html, quel est l'événement qui est utilisé pour savoir si quelqu'un a appuyé sur le bouton ?

f- Dans page1.html, quel est le nom de la fonction appelée ? Est-ce qu'il y a des paramètres passés ?

g- Dans script1.js, quelle est l'instruction qui permet d'afficher des informations dans la console ?

h- Dans script1.js, comparer la structure du test if...else... avec le langage python, notamment le test sur la couleur. Est-ce différent ?

i- Dans script1.js, qu'est-ce que messInfo ?

j- Dans le fichier page1.html, où se trouve la balise dont l'identifiant id est info ?

k- En examinant le fichier style2.css, essayer de comprendre pourquoi le message ne s'affiche pas au même endroit que la souris.

Modification

l- Dans script1.js, modifier la fonction changeCouleur() pour avoir un message "Trop top la couleur" lorsque celle-ci est orange et vérifier le résultat dans chrome.

m- Dans le fichier style2.css, modifier l'un après l'autre chaque propriété et vérifier le changement dans chrome au fur et à mesure :

- le % de left et top (on peut mettre aussi des valeurs en pixels ex: left: 200px;)

- min-width,

- border-radius (des petites valeurs),

- padding (inférieur à 50).

Événement sur bouton - vérifier le contenu d'un champ de saisie

Analyse

a- Dans chrome, saisir votre nom et appuyer sur valider.

Souvent les informations d'un formulaire sont traitées ou vérifiées avant d'être envoyées au serveur web. C'est l'intérêt de cette fonction sur ce bouton.

b- Dans page1.html, comparer la balise pour le champ de saisie avec la balise du bouton. Quel est l'attribut à l'intérieur de cette balise qui permet au navigateur de faire la différence entre les deux ?

c- Dans page1.html, quel est le nom de la fonction appelée ? Est-ce qu'il y a des paramètres passés ?

Modification

d- Modifier cette fonction afin d'utiliser la fonction messInfo pour afficher "Ton nom est" suivi du nom saisi.