exemple de page
Cette page contient du JavaScript
On peut aussi placer le JavaScript dans un fichier séparé et l'inclure dans la page html.
exemple de page
Cette page contient du JavaScript
/*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.
00 bug
Cette page contient du JavaScript
Manifestement, cette page contient un bug, identifiez-le et erradiquez-le (aidez-vous de Firebug pour le débusquer).
{{:ressources:web:js_00bug.png|}}
==== variable ====
Créez un fichier nommé 01variable.html contenant ce code.
exemple 1 : variable
Cette page contient du javascript, si rien ne s'est passé alors c'est qu'il y a un bug.
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
exemple 2 : prompt
Cette page contient du javascript, si rien ne s'est passé alors c'est qu'il y a un bug.
==== concaténation ====
exemple 3 : concaténation
Cette page contient du javascript, si rien ne s'est passé alors c'est qu'il y a un bug.
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
exemple 4 : calcul
Cette page contient du javascript, si rien ne s'est passé alors c'est qu'il y a un bug.
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.
{{:ressources:web:js_hop.png|}}
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.
{{:ressources:web:js_hop5.png|}}
==== 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.
{{:ressources:web:js_hopconcat.png|}}
==== 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));