index

TD02 (3h) Un peu d'algorythmie, aujourd'hui, on apprend à créer de petits scripts inutiles.

JavaScript

JavaScript et HTML

Il est de convention répandue d'intégrer les scripts en JavaScript dans la partie <head> de la page HTML, car celle-ci est réservée aux éléments qui ne s'affichent pas dans le corps de la page (le <body>).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//FR"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title>exemple de page</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<script type="text/javascript" charset="utf-8">
		alert("bonjour");
	</script>
</head>
<body>
<p>Cette page contient du JavaScript</p>
</body>
</html>

On peut aussi placer le JavaScript dans un fichier séparé et l'inclure dans la page html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//FR"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title>exemple de page</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<script src="myscript.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p>Cette page contient du JavaScript</p>
</body>
</html>
/*this file is myscript.js*/
alert('hello');

Pour des raisons de simplicité, dans les exercices ci-dessous, merci d'inclure le JavaScript directement dans votre fichier .html

Premiers pas

bug

Créez un fichier nommé 00bug.html et collez-y le contenu de ce code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//FR"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title>00 bug</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<script type="text/javascript" charset="utf-8">
		alert("bonjour");
		je_suis_un_bug();
	</script>
</head>
<body>
<p>Cette page contient du JavaScript</p>
</body>
</html>

Manifestement, cette page contient un bug, identifiez-le et erradiquez-le (aidez-vous de Firebug pour le débusquer).

variable

Créez un fichier nommé 01variable.html contenant ce code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//FR"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title>exemple 1 : variable</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<script type="text/javascript">
	texte = "bonjour";
	alert(texte);
	</script>
</head>
<body>
	Cette page contient du javascript, si rien ne s'est passé alors c'est qu'il y a un bug.
</body>
</html>

Changez le texte qui s'affichera dans la fenêtre d'alerte.

prompt

L'utilisation d'une variable permet par exemple d'executer un script qui sera chaque fois différent (ça dépend de ce que l'utilisateur saisira comme texte).

Reproduisez cet exemple dans le fichier 02prompt.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//FR"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title>exemple 2 : prompt</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<script type="text/javascript">
	nom = window.prompt("quel est ton nom ?");
	alert("bonjour "+nom);
	</script>
</head>
<body>
	Cette page contient du javascript, si rien ne s'est passé alors c'est qu'il y a un bug.
</body>
</html>

concaténation

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//FR"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title>exemple 3 : concaténation</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<script type="text/javascript">
		var outil = window.prompt("un outil");
		var couleur = window.prompt("une couleur");
 
		//la plupart des gens vont penser a "marteau rouge"
		alert("J'ai un joli "+outil+" "+couleur);
	</script>
</head>
<body>
	Cette page contient du javascript, si rien ne s'est passé alors c'est qu'il y a un bug.
</body>
</html>

Testez ce script, et modifiez-le pour qu'au lieu d'afficher “J'ai un joli marteau rouge” on puisse afficher “Jack a un joli marteau rouge” où “Jack”, “marteau” et “rouge” sont 3 variables saisies par l'utilisateur.

calcul

Nous allons calculer le triple du nombre saisi, testez ceci dans 04calcul.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//FR"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title>exemple 4 : calcul</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<script type="text/javascript">
		var chiffre = window.prompt("Note un chiffre");
		triple = chiffre * 3;
		alert(" le triple de "+chiffre+" ca fait "+triple);
	</script>
</head>
<body>
	Cette page contient du javascript, si rien ne s'est passé alors c'est qu'il y a un bug.
</body>
</html>

Que se passe-t-il quand on entre “bonjour” à la place d'un nombre, pourquoi ?

Modifiez le script pour qu'il ajoute 5 au nombre saisi. Vous risquez d'avoir besoin de la fonction parseInt(), elle transforme les variables qui contiennent du textes en nombres, elle s'utilise ainsi :

 nombrepluscinq = parseInt(nombre)+5;

Boucles

while et for

while et for servent à executer une portion de code plusieurs fois, dans ce cas, on affiche 4 fois “bonjour” et 4 fois “au revoir”.

var i = 0;
while(i<4){
	alert("bonjour");
	i = i+1;
	// on aurait aussi pu ecrire i++
}
 
for(i=0; i<4; i++){
	alert("au revoir");
}

Créez un fichier 05boucle_simple.html qui contient ce code JavaScript en plus du HTML de rigueur.

Affichez 5 fois chaque message.

Créez une variable nommé nb définie une seule fois et qui permet de définir le nombre de fois que les messages seront affichés.

prompt while

Créez un fichier 06hop.html qui propose de saisir un nombre et en fonction, ça affiche un certain nombrre de fois le message hop.

si par exemple je saisis le chiffre 5, la page fera apparaître les fenetres hop 1, puis hop 2, puis ainsi de suite jusque hop 5.

prompt while

Créez un fichier 07hop.html qui propose de saisir un nombre et en fonction, ça affiche un certain nombrre de fois “hop” dans un seul message d'alerte.

un sur deux

Créez un fichier 08unsurdeux.html qui affiche dans une alerte tous les chiffres pairs (2,4,6,8,10, etc.) jusqu'à 24.

kiwibanane

Créez un fichier 09kiwibanane.html qui affiche plusieurs alertes dans cet ordre

kiwi
banane
banane
kiwi
banane
banane
kiwi
banane
banane

jeu du chiffre

(optionnel) Faites un jeu du chiffre :

  • le programme tire aléatoirement un chiffre entre 1 et 10
  • l'utilisateur propose un chiffre,
  • si c'est plus grand ou plus petit, le programme le signale et redemande un chiffre
  • si c'est le bon chiffre le programme affiche “bravo” et quitte

Pour faire un tirage aléatoire :

var max = 10;
var alea=Math.ceil(Math.random()*(max));
ressources/web/td02.txt · Last modified: 2013/06/16 22:51 (external edit)
 
 
Creative Commons License Powered by PHP Valid XHTML 1.0 April