TD 6 - JAVASCRIPT- Introduction

HTML/CSS
2004-2005
IMAC 1

Abstract

Ce TP est une introduction à Javascript, on vous y présente

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 :

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)