Ce tutorial a pour buts de vous apprendre comment s'utilise le JavaScript :
où placer les codes
l'utilisation des caractères "bizarres" (tels que {[|]} etc ...)
comment appeler une fonction
etc ...
Info : pour réaliser des essais (ce qui est fortement conseillé), utiliser alert('Votre message sans apostrophes ici');, ce qui aura pour effet ceci. Important : en JavaScript, contrairement au HTML, les minuscules / majuscules sont prises en compte. Ainsi, bonjour Bonjour BONJOUR sont trois mots différents.
1. Les fonctions
Une fonction est une suite d'actions (comme des alertes) qui peut etre appelée a tout moment.
Ces fonctions se place entre les balises <HEAD> et </HEAD>.
Je vais donner un exemple et le commenter.
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- /* le <!--
sert a cacher ce qui suit pour les navigateurs incompatibles : il prendront
tout ceci pour du commentaire html */
/*Ceci est un commentaire
qui peut se faire sur plusieurs lignes*/
// --> /* fin du
commentaire pour les vieux navigateurs, précédé de //, commentaire JavaScript*/
</SCRIPT>
Vous avez compris, une fonction se déclare avec
function nom(){ actions
}
Les parenthèses après le nom sont OBLIGATOIRES, elle servent a mettre des
paramètres (chaque chose en son temps ;-)
2. Appeler une fonction
C'est bien de définir une fonction ... mais c'est mieux quand on l'utilise !
Créons maintenant un lien qui utilise cette fonction : un lien ordinaire avec
une destination spéciale : <A HREF="javascript:test()">Votre texte</A>
ce qui appellera la fonction test() sans oublier les parenthèses.
Voyons maintenant les différentes possibilités : un lien qui mène vers un site quelconque mais qui exécute plein de fonction.
<A HREF="adresse" onClick="alert('clic')" onMouseover="alert('passage de la souris')" onMouseout="alert('la souris part')"> Cliquez ici </A>
Cliquez ici
-> ici on ne met plus javascript:fonction() mais fonction() avec onXxxx. On peut mettre alert().
Voici une liste des principaux évenements appelant une fontion :
onClick : lors du clic sur un lien, une image, un bouton, une zone de texte, etc...
onMouseover et onMouseout : quand la souris passe par dessus ou sort du lien, de l'image, d'une zone de texte, ...
onLoad et onUnload : avec <BODY> : quand la page s'ouvre ou se ferme
onFocus et onBlur : lorsque on sélectionne ou déselectionne (une zone de texte par exemple).
3. Les conditions (à l'intérieur d'une fonction)
var a;
var b;
var nombre;
var c=15;
a = 5;
b = 7.5;
/* voici des variables : une zone de mémoire. On
la déclare avec var nom; puis on lui donne éventuellement une valeur. Une chaine
de caractères se place entre guillemets ou apostrophes. */
if(a == b){ alert('a=b');
}
if(a <= b){ alert('a
est inférieur ou égal a b')
}
nombre=a-b;
if(c != nombre){ alert('c
est différent de nombre');
}else{ alert('c
== nombre');
}
Vous avez compris, un test fonctionne comme ceci :
if(condition){ action;
}else{ action
}
La partie else{action}
n'est pas obligatoire.
Les conditions : il existe 6 opérateurs == à ne pas confondre avec = qui attribut une valeur mais qui ne compare
pas != différent de. Le ! veut dire non. Vous le retrouverez
par la suite. < je vous laisse deviner ... >= inférieur ou égal à (pas trop dur de le retenir) > à votre avis ? >= sans commentaire ...
4. Les boucles
Une boucle est une séries d'ations qui s'exécute tant qu'une condition est vraie.
Voici les 2 syntaxes les plus courantes :
while(condition){ actions
}
for(i=0;condition;i++){ actions
}
Dans la première, il ne faut pas oublier de mettre un compteur qui donnera
un jour une condition fausse sinon vous pouvez toujours attendre la fin ...
La deuxième a un compteur intégré gratuit et sans obligation d'achat :-) i=0 est la valeur de départ i++ l'action réalisée à chaque exécution de
la boucle. i++ incrémente i, celà est strictement
pareil que i=i+1.
Il existe aussi i-- je vous laisse deviner
la suite. Vous pouvez mettre aussi par exemple i=i*2
ou tout ce que vous voullez.
Celà vous semble peut-être un peu confus, mais je vous ai fait un petit script avec des commentaires pour vous donner des exemples concrets - téléchargez le fichier ressource.
Bonne chance, bon courage et si vous ne comprenez pas ou qu'il y a un problème au tutorial : commentaire ou forum.
alert('Voici
votre premiere fonction');
