1) Une fonction est déclarée dans le head (parfois dans le body)
et encadrée par les balises
<script language="javascript">
</script>
Exemple :
| function reponse(valeur){ if (valeur=="2" || valeur=="3") alert("Oui !") else alert("Non ! ") } |
Une déclaration commence par le mot function ("u" : en anglais),
suivi de son nom et obligatoirement de deux parenthèses ( ), à
l'intérieur peut se trouver un ou plusieurs mots séparés
d'une virgule, qui seront ensuite utilisés dans la fonction.
Les lignes de la fonction commencent par une accolade "{" et finissent
par une autre fermée "}".
L'intérieur de la fonction peut inclure :
- un test : if (valeur =="2") il faut toujours deux parenthèses,
et deux fois le signe = après le nom de la variable à tester
|| veut dire "ou" (touches Alt Gr et 6 en haut du clavier alphanumérique
appuyées en même temps)
&& ceut dire "et"
à la suite de if(valeur=="2") se trouve la commande à
exécuter : ici l'ouverture d'une boîte d'alerte indiquant "oui
!"
La commande qui suit "else" s'exécutera si le test est faux.
Si plusieurs commandes sont à exécuter il faut les mettre entre
accolades séparées par des points virgules { première commande;
deuxième commande;...}
- directement une commande ou plusieurs commandes.
2) la fonction doit être appelée
lors d'un clic ou lors du passage de la souris sur un élément
de la page.
Exemples :
- dans un bouton : appel de la fonction reponse
| <input type="button" name="b1" value="bouton qui sert à tester les variables" onclick="javascript:test(1)"> |
- en cliquant sur le texte d'un calque : l'appel se fait dans la balise <a
href
(note : Netscape ne reconnaît pas le clic sur le calque)
Le code serait le même pour le clic sur une image
| <div id="idee1" style="position:absolute; width:169px;
height:18px; z-index:2; left: 423px; top: 74px"> <a href="javascript:suivi(1)"> <font size="2">salarié agricole</font> </a> </div> |
- à l'ouverture de la page : dans la balise <body onload="ma_fonction()">
| <body onload="init()"> |
- en permanence : l'appel de la fonction sera alors placé dans les parties
de javascript du head ou du body.
- créez un bouton dans le body (ou tout autre objet) dans lequel vous inscrirez les variables, qui appelle la fonction (ici test(num))
| <FORM NAME="f1"> <input type="button" name="b1" value="bouton qui sert à tester les variables" onclick="javascript:test(1)"> </FORM> |
- dans votre fonction, pour tester une variable, faites inscrire dans votre bouton la valeur de la variable (ici num)
pour Netscape 4.5 ou 4.7 : document.f1.b1.value = "num=" + num
pour Internet Explorer : document.all.b1.value = "num=" + num
donc pour les deux navigateurs :
| <script language="javascript"> var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4) function test(num) { if(isNS = true){ document.f1.b1.value = "num=" + num } else { document.all.b1.value = "num=" + num } } </script> |
"num=" est juste une indication pour que vous vous rappeliez de la
variable testée
num est la valeur de cette variable.
Si l'ordinateur vous renvoie 'undefined' ou une valeur différente de
celle que vous attendez , vous avez fait une erreur dans votre fonction.
Ce sont des programmes qui permettent de dire à quelle ligne le programme
"plante". Ils ne donnent que des indications rares sur l'origine et
parfois fausses ... mais c'est mieux que rien.
Pour Netscape 7 : le debugger est inclus dans le programme Outils / développement
web / console javascript, le debugger de Netscape 4.X n'est plus disponbile
sur le site.
Pour Internet Explorer, le debugger est inclus à partir de la version
5.5, sinon vous pouvez le télécharger sur :
http://msdn.microsoft.com/ , rubrique
: Script Debugger puis téléchargement
Quand votre page est au point, pensez à supprimer les lignes du bouton.