Évènement Petites fonction déjà toute faites Exemple : Construction onLoad (au chargement) = "ce qui doit se passer" onLoad s’exécute toujours dans le.

Présentation au sujet: "Évènement Petites fonction déjà toute faites Exemple : Construction onLoad (au chargement) = "ce qui doit se passer" onLoad s’exécute toujours dans le."— Transcription de la présentation:

1

2 Évènement Petites fonction déjà toute faites Exemple : Construction onLoad (au chargement) = "ce qui doit se passer" onLoad s’exécute toujours dans le « BODY »

3 Evénements onChange Champs texte, zones texte, listes de sélection S'exécute quand on change un élément de formulaire onClick Boutons, boutons radio, boutons submit et reset, liens S'exécute quand on clique dans ou sur un élément onDragDrop Fenêtres S'exécute quand on pose un élément à l'intérieur de la fenêtre du navigateur à l'aide la souris onKeyDown Documents, images, liens, zones texte S'exécute quand on appuie sur une touche du clavier onKeyPress Documents, images, liens, zones texte S'exécute quand on appuie et maintient une touche du clavier onKeyUp Documents, images, liens, zones texte S'exécute quand on relâche une touche du clavier

4 Evénements onLoad Documents S'exécute quand le document se charge onMouseDown Documents, boutons, liens S'exécute quand on clique avec le bouton de la souris onMouseMove rien par défaut S'exécute quand on bouge la souris onMouseOut Cartes, liens S'exécute quand le pointeur de la souris sort d'une zone de sélection graphique ou un lien onMouseOver Liens S'exécute quand le pointeur de la souris passe sur un lien onMouseUp Documents, boutons, liens S'exécute quand on relâche le bouton de la souris

5 Evénements onMove Fenêtres S'exécute quand l'utilisateur ou un script bouge une fenêtre onReset Formulaires S'exécute quand on "resete" un formulaire onResize Fenêtres S'exécute quand l'utilisateur ou un script change la taille d'une fenêtre onSelect Champs ou zones texte S'exécute quand on sélectionne une zone ou un champ texte (clavier ou souris) onSubmit Formulaire S'exécute au moment de l'envoi d'un formulaire onUnLoad Documents S'exécute quand on quitte le document

6 Evénements, exemple Insertion d’un image pour un bouton :

7 Evénements : bouton <a href = "pageX.html " onmouseOver="document.images['bouton1'].src='pic1.actif.gif';" onmouseOut="document.images['bouton1'].src='pic1.gif';">

8 Construction d’un script Petit programme Contenant une ou plusieurs fonctions Peut s’exécuter plusieurs fois par page

9 Déclaration d’un script vos scripts Javascript ici

10 Déclaration d’un script <!-- ; (astuce anti-affichage de script) vos scripts Javascript ici // --> (astuce anti-affichage de script)

11 Construction d’une fonction Function NomDeLaFonction() { //programme de la fonction };

12 Fonction exemple <!-- ; function actif(){ document.images["bouton1"].src="pic1.actif.gif"}; function passif(){ document.images["bouton1"].src="pic1.gif"}; // --> <a href="PageX.html" onmouseOver="actif();" onmouseOut="passif();">

13 Faciliter le chargement lors du clic <!-- ; function initialisation(){ img=new Array(); img[0]=new Image(); img[0].src="pic1.gif"; img[1]=new Image(); img[1].src="pic1.actif.gif" } //-->;

14 Faciliter le chargement lors du clic (suite) <!--; function actif(){document.images["bouton1"].src=img[1].src}; function passif(){document.images["bouton1"].src=img[0].src} //-->; <a href="PageX.html" onmouseOver="actif();" onmouseOut="passif();">

15 Passer un paramètre à une fonction <!-- ; var bouton=""; // (déclare la variable de nom "bouton" en mode texte); var fichier=""; // (déclare la variable de nom "fichier" en mode texte); function actif(bouton,fichier){ document.images[bouton].src=fichier}; function passif(bouton,fichier){ document.images[bouton].src=fichier}; // --> <a href="PageX.html" onmouseOver="actif('bouton1','pic1.actif.gif');" onmouseOut="passif('bouton1','pic1.gif');">

16 Utilité : deux boutons <!-- ; var bouton=""; // (déclare la variable de nom "bouton" en mode texte); var fichier=""; // (déclare la variable de nom "fichier" en mode texte); function actif(bouton,fichier){document.images[bouton].src=fichier}; function passif(bouton,fichier){document.images[bouton].src=fichier}; // --> <a href="PageX.html" onmouseOver="actif('bouton1','pic1.actif.gif');" onmouseOut="passif('bouton1','pic1.gif');"> <a href="PageZ.html" onmouseOver="actif('bouton3','zorro.gif');" onmouseOut="passif('bouton3','estArrive.gif');">

17 Exercice 1 Vérifier que le nom entré dans un cas est valide. Le code allume un led rouge si le nom est vide.

18 Exercice 2 Vérifier que le nom entré dans un cas est valide. Le code allume un led rouge si le nom est vide et mémorise que le nom n’est pas bon, il affiche une led verte si le nom est bon et il mémorise s’il est bon dans la variable de mémorisation

19 Exercices 3 Vérifier que l’âge est valide et mémoriser s’il est bon ou non

20 Exercice 4 Vérifier l’âge et le nom et afficher une led vert si tout est bon

21 Exercice 5 Faite la même chose, mais avec une fonction Ajouter le fait que la led devienne rouge si tous les champs ne sont pas remplis

22 Exercice 6 Ajouter un cadre pour ajouter une adresse e-mail et un bouton envoi pour envoyer les réponses du formulaire si celles-ci sont valides (y compris l’adresse e-mail)