  Premiers pas
Tuto écrit par LionZion, revu par Molokai et Raf en août 2004
Un script Javascript se place (si possible) dans l'en-tête <head></head> de votre page, malgré tout il est
aussi possible de le placer ailleurs dans le corps de la page. Notre
premier script est un simple affichage de la fameuse phrase :
"hello world !", placez-le où vous voulez :
|
Code Javascript - Exemple
1 |
<script language="JavaScript">
<!--
document.write('Bonjour le monde');
//-->
</SCRIPT> |
Le balisage d'une portion de code JAVASCRIPT
commence toujours par : <script language="JavaScript">
et se termine toujours par : </SCRIPT>,
les deux opérateurs <!--
et
//--> servent
à faire ignorer le code par les "vieux" browsers, vous
n'êtes pas obligé de les mettre car de nos jours tout le monde
utilise (enfin je l'espère :) un navigateur récent supportant le
JavaScript. 2 . Passons à
notre second exemple qui intègre une variable, dans Javascript les
variables doivent être déclarées en tant que telles.
|
Code Javascript - Exemple 2 |
<script language="JavaScript">
<!--
var prenom="Fabrice";
document.write('Bonjour '+ prenom);
//-->
</SCRIPT> |
Comme c'est simple :) ... Nous avons
déclaré une variable prenom est lui
avons affecté la valeur Fabrice,
regardez bien la concaténation qui s'effectue avec le signe +.
Attention en JS vous devez refermer la chaîne de caractères avec
la quote (') avant de
concaténer votre autre chaîne de caractères, ce n'est pas le cas
en PHP. Et bien sûr l'éternel point-virgule
termine la syntaxe, là par contre ca ne change pas. 3
. Allez,
ça n'est pas le tout ! :
|
Code Javascript - Exemple 3 |
<script language="JavaScript">
<!--
var animal="mouton";
if(animal=='vache'){
document.write(animal +' = bovin');
}
else if(animal=='mouton'){
document.write(animal +' = ovin');
}
//-->
</SCRIPT>
|
Ci-dessous nous avons une déclaration de variable (animal) et
nous testons si celle-ci est égale à vache ou bovin, on affiche le
résulat correspondant.
4 . Voyons la même vérification, mais cette fois la variable n'est
pas déclarée, elle provient de la liste déroulante d'un
formulaire :
|
Code Javascript - Exemple 4 |
<script language="JavaScript">
<!--
function AnimalChoice()
{
if(document.ListeAnimaux.animal.value=='vache')
{
alert('La vache est bovin');
}
else if(document.ListeAnimaux.animal.value=='mouton')
{
alert('Le mouton est un ovin');
}
else
{
alert('L\'écureuil aime les noisettes :)');
}
}
//-->
</SCRIPT>
|
|
|
Le code HTML |
Tester le script |
<body>
<form name="ListeAnimaux">
<select size="3" name="animal">
<option value="vache" selected>Vache
<option value="mouton">Mouton
<option value="oiseau">Ecureuil
</select>
<input type="button"
value="OK"
onClick="AnimalChoice();">
</form>
</body> |
|
|
Ici nous avons utilisé une fonction (function) est là
encore, le principe est le même qu'en PHP. Ensuite nous passons
les conditions en revue, notez comment l'appel au champ
s'effectue : document.nom_du_formulaire.nom_du_champ.value=='valeur'.
Ensuite regardez dans la balise <form> du formulaire,
n'y figure qu'un name="",
puis jettez un oeil sur le bouton de validation qui n'est pas de
type Submit mais Button
(c'est très important !) de plus c'est la fonction onClick=""
qui va déclencher l'appel de la fonction Javascript (AnimalChoice();).
Voilà, finalement pour une première initiation
nous avons déjà bien déblayé le terrain, entraînez-vous à
utiliser tout ceci et le reste ne sera que plus simple à
comprendre.
|
