Post on 04-Apr-2015
Les événements et scripts
É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 »
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"> <img src = " 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';">
<img src="pic1.gif" name="bouton1"> </a>
Construction d’un scriptPetit programme
Contenant une ou plusieurs fonctionsPeut 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
Function NomDeLaFonction() {//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();"> <img src="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();"> <img src="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');"> <img src="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');"> <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>
Exercice 1Vérifier que le nom entré dans un cas est
valide. Le code allume un led rouge si le nom est vide.
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
Exercices 3Vérifier que l’âge est valide et mémoriser s’il
est bon ou non
Exercice 4Vérifier l’âge et le nom et afficher une led
vert si tout est bon
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
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)