Download
1 / 22
220 likes | 316 Views
Les événements et scripts. Évènement. Petites fonction déjà toute faites Exemple : <body onload =" alert ('Bonjour')"> Construction onLoad (au chargement) = " ce qui doit se passer " onLoad s’exécute toujours dans le « BODY ». Evénements. onChange
E N D
Évènement • Petites fonction déjà toute faites • Exemple : <body onload="alert('Bonjour')"> • Construction • onLoad (au chargement) • = "ce qui doit se passer" onLoad s’exécute toujours dans le « BODY »
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
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
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
Evénements, exemple Insertion d’un image pour un bouton : <a href="PageX.html"> <imgsrc = " pic1.gif" name = "bouton1"> </a>
Evénements : bouton <a href = "pageX.html " onmouseOver="document.images['bouton1'].src='pic1.actif.gif';" onmouseOut="document.images['bouton1'].src='pic1.gif';"> <imgsrc="pic1.gif" name="bouton1"> </a>
Construction d’un script • Petit programme • Contenant une ou plusieurs fonctions • Peut s’exécuter plusieurs fois par page
Déclaration d’un script <head> <script language="Javascript"> vos scripts Javascript ici </script> </head>
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>
Construction d’une fonction FunctionNomDeLaFonction() { //programme de la fonction };
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();"> <imgsrc="pic1.gif" name="bouton1"> </a>
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();">
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();"> • <imgsrc="pic1.gif" name="bouton1"> • </a>
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');"> <imgsrc="pic1.gif" name="bouton1"> </a>
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');"> <imgsrc="pic1.gif" name="bouton1"> </a> <a href="PageZ.html" onmouseOver="actif('bouton3','zorro.gif');" onmouseOut="passif('bouton3','estArrive.gif');"> <imgsrc="zorro.gif" name="bouton3"> </a>
Exercice 1 • Vérifier que le nom entré dans un cas est valide. Le code allume un led rouge si le nom est vide.
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
Exercices 3 • Vérifier que l’âge est valide et mémoriser s’il est bon ou non
Exercice 4 • Vérifier l’âge et le nom et afficher une led vert si tout est bon
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
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)
