Dans le vieil étang
Une grenouille saute
Un ploc dans l'eau !
Basho
Pour me contacter : igrimeau(at)univ-mlv.fr
Ce TP est une introduction à Javascript, on vous y présente
Pour qu'un navigateur puisse differentier le code en Javascript du reste du document HTML, on l'encapsule dans une balise spécifique :
<script language="Javascript"> ..... </script>
Voici un premier exemple de code écrit en Javascript :
<html> <head> <title> Voici une page contenant du Javascript</title> </head> <body> <script language="Javascript"> alert("Voici un message d alerte!"); </script> </body> </html>
Dans cet exemple on appelle la méthode alert dans le corps du programme. Modifions l'exemple, pour qu'elle soit appelée dans une fonction :
<html> <head> <title> Voici une page contenant du Javascript</title> <script type="text/javascript"> function myalert() { alert("OK, ca marche") alert("un deuxieme pour la route") } </script> </head> <body> <script language="Javascript"> myalert(); </script> </body> </html>
On peut donc constater que du code Javascript peut s'insérer dans l'entête (en général il s'agit des initialisations des variables et des définitions des fonctions) autant que dans le corps de la page (où il s'agira la plupart du temps d'écriture directe sur la page et d'appel de fonctions) Enfin, comme dans la plupart des langages de programmation, nous pouvons utiliser des variables, et passer des arguments aux fonctions. En exemple, notre code encore une fois modifié.
<html> <head> <title> Voici une page contenant du Javascript</title> <script type="text/javascript"> function myalert(text) { alert(text) alert("OK...") } </script> </head> <body> <script language="Javascript"> mytext = "c'est mon texte"; myalert(mytext); </script> </body> </html>
Il faut retenir :
La syntaxe de Javascript ressemble à s'y méprendre à celle du langage C. Ainsi tout ce qui est test et boucle est identique à ce langage.
En vous aidant de vos connaissances en C, réalisez une page qui affiche 10 boites d'alerte pour les 10 premiers entiers (1,2 ...) dans lequel on affiche si l'entier est pair ou impair.
On a la possibilité d'écrire directement du code HTML dans la page en utilisant la fonction (prédéfinie) document.write, fonction prenant une chaîne de caractère en argument. Par exemple :
<html> <body> <script> document.write("Salut les<br/>IMAC 1 !!!"); </script> </body> </html>
Affichez dans une table HTML dix valeurs aléatoires entre 0 et 1 (obtenue grâce à la fonction Math.random()) en utilisant document.write.
Nous avons vu précédement qu'une variable pouvait être déclarée avec ou sans le mot clé var. Suivant le type de déclaration on parlera de déclaration implicite ou de déclaration explicite.
Si vous déclarez une variable dans une fonction, elle n'est utilisable que dans cette fonction, cependant, si vous déclarez une variable à l'extérieure, celle-ci est définie et utilisable dans toutes les parties Javascript de votre document.
Pour vous en convaincre, déclarer une variable mon_message, et initialiser la à votre convenance, dans une première partie javascript (dans l'en-tete de votre document par exemple), puis afficher son contenue dans le corps du programme.
On peut utiliser les tableaux en Javascript comme en C. La déclaration et l'utilisation sont les même :
<html> <body> <script> value = Array; value[0] = "1"; value[1] = "1"; value[2] = "2"; value[3] = "3"; value[4] = "5"; value[5] = "8"; value[6] = "13"; </script> </body> </html>
La fonction prompt permet de récupérer une valeur entrée par l'utilisateur. Cette fonction s'utilise comme suit
<html> <body> <script> valeur = prompt("Entrez une valeur :"); alert(valeur); </script> </body> </html>
Affichez la table de multiplication d'un entier compris entre 0 et 12 rentré par l'utilisateur via un prompt.
A l'aide de tout ce que vous avez vu précédemment, réalisez une page HTML qui affiche le résultat du lancer de deux dés. Ce résultat sera affiché sous la forme d'images des deux dés. Pour ce faire vous pouvez utiliser les images ci-jointes :
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Enfin, ajoutez à la fin de votre page, un lien vers cette même page ce qui permet un nouveau jet de dés. Enfin réalisez une application de lancer de 421 qui calcule le nombre de points faits par un lancer de dé (pour connaitre les combinaisons et leur équivalent en point, regardez sur Internet).