TD 6 - JAVASCRIPT- Introduction
HTML/CSS
2004-2005
IMAC 1
Abstract
Ce TP est une introduction à Javascript, on vous y présente
- comment l'encapsuler dans un document HTML
- comment réaliser des fonctions
- comment réaliser un formulaire
1. Faisons les présentations :
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 :
- que le mot clé var
devant la déclaration est facultatif,
mais est fortement recommandé
-
que le nom d'une variable peut commencer soit par une lettre soit par
_.
-
que l'affectation, ou initialisation se fait avec l'opérateur
= (à
ne pas confondre avec l'opérateur de comparaison
==).
- que Javascript comme le C ou Java, différentie les minuscules des majuscules.
- que Javascript utilise un typage faible pour ses variables. De plus il détermine
automatique
en fonction de l'initialisation le type de ses variables : chaine de caractères,
nombre
ou indéterminé ("undefined").
Exercice 1 :
Réalisez les pages ci-dessus.
2. Du déjà vu
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.
Exercice 2 :
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.
3. Ecriture directe
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>
Exercice 3 :
Affichez dans une table HTML dix valeurs aléatoires entre 0 et 1 (obtenue grâce
à la fonction
Math.random())
en utilisant
document.write.
4. Portée des variables
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.
Exercice 4 :
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.
4. Les tableaux
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>
Exercice 5 :
Faites un tableau (HTML) représentant les différentes combinaisons de
couleurs en R,V,B avec les valeurs 00, 33, 66, 99, CC et FF.
5. Récuperer facillement une valeur
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>
Exercice 6 :
Affichez la table de multiplication d'un entier compris entre
0 et 12 rentré par l'utilisateur via un prompt.
6. Application : Jeu de dés (421)
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 ou demandez à votre
chargé de TD)