Évènement petites fonction déjà toute faites exemple : construction onload (au chargement) =...
TRANSCRIPT
![Page 1: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/1.jpg)
Les événements et scripts
![Page 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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/2.jpg)
ÉvènementPetites fonction déjà toute faitesExemple :
<body onload="alert('Bonjour')">Construction
onLoad (au chargement) = "ce qui doit se passer"
onLoad s’exécute toujours dans le « BODY »
![Page 3: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/3.jpg)
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
![Page 4: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/4.jpg)
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
![Page 5: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/5.jpg)
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
![Page 6: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/6.jpg)
Evénements, exemple
Insertion d’un image pour un bouton :
<a href="PageX.html"> <img src = " pic1.gif" name = "bouton1">
</a>
![Page 7: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/7.jpg)
Evénements : bouton<a href = "pageX.html "
onmouseOver="document.images['bouton1'].src='pic1.actif.gif';"
onmouseOut="document.images['bouton1'].src='pic1.gif';">
<img src="pic1.gif" name="bouton1"> </a>
![Page 8: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/8.jpg)
Construction d’un scriptPetit programme
Contenant une ou plusieurs fonctionsPeut s’exécuter plusieurs fois par page
![Page 9: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/9.jpg)
Déclaration d’un script
<head> <script language="Javascript">
vos scripts Javascript ici </script>
</head>
![Page 10: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/10.jpg)
Déclaration d’un script
<head> <script language="Javascript">
<!-- ; (astuce anti-affichage de script) vos scripts Javascript ici
// --> (astuce anti-affichage de script) </script> </head>
![Page 11: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/11.jpg)
Construction d’une fonction
Function NomDeLaFonction() {//programme de la fonction
};
![Page 12: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/12.jpg)
Fonction exemple<script language="Javascript"> <!-- ; function actif(){ document.images["bouton1"].src="pic1.actif.gif"}; function passif(){ document.images["bouton1"].src="pic1.gif"}; // --></script>
<a href="PageX.html" onmouseOver="actif();" onmouseOut="passif();"> <img src="pic1.gif" name="bouton1"></a>
![Page 13: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/13.jpg)
Faciliter le chargement lors du clic
<script language="Javascript"> <!-- ; function initialisation(){
img=new Array(); img[0]=new Image(); img[0].src="pic1.gif"; img[1]=new Image(); img[1].src="pic1.actif.gif"
} //-->;
</script>
<body onLoad="initialisation();">
![Page 14: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/14.jpg)
Faciliter le chargement lors du clic (suite)
<script language="Javascript"><!--;function actif(){document.images["bouton1"].src=img[1].src};function passif(){document.images["bouton1"].src=img[0].src}//-->;
</script>
<a href="PageX.html" onmouseOver="actif();" onmouseOut="passif();"> <img src="pic1.gif" name="bouton1"></a>
![Page 15: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/15.jpg)
Passer un paramètre à une fonction<script language="Javascript"> <!-- ; 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}; // --> </script>
<a href="PageX.html" onmouseOver="actif('bouton1','pic1.actif.gif');" onmouseOut="passif('bouton1','pic1.gif');"> <img src="pic1.gif" name="bouton1"></a>
![Page 16: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/16.jpg)
Utilité : deux boutons<script language="Javascript"> <!-- ; 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}; // --> </scirpt>
<a href="PageX.html" onmouseOver="actif('bouton1','pic1.actif.gif');" onmouseOut="passif('bouton1','pic1.gif');"> <img src="pic1.gif" name="bouton1"></a><a href="PageZ.html" onmouseOver="actif('bouton3','zorro.gif');" onmouseOut="passif('bouton3','estArrive.gif');"> <img src="zorro.gif" name="bouton3"></a>
![Page 17: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/17.jpg)
Exercice 1Vérifier que le nom entré dans un cas est
valide. Le code allume un led rouge si le nom est vide.
![Page 18: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/18.jpg)
Exercice 2Vé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
![Page 19: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/19.jpg)
Exercices 3Vérifier que l’âge est valide et mémoriser s’il
est bon ou non
![Page 20: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/20.jpg)
Exercice 4Vérifier l’âge et le nom et afficher une led
vert si tout est bon
![Page 21: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/21.jpg)
Exercice 5Faite la même chose, mais avec une fonctionAjouter le fait que la led devienne rouge si
tous les champs ne sont pas remplis
![Page 22: É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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dc8497959293b8e3b92/html5/thumbnails/22.jpg)
Exercice 6Ajouter 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)