TP1 JavaScript

TI 2 Atelier DevpWeb et Multimédias 2
TP1
INTRODUCTION AU JAVASCRIPT
Objectifs
- Ecrire les premiers scripts.

- Intégrer un script dans une page web.
- Manipuler les boîtes de dialogue.
- Manipuler des variables, des opérateurs.
- Première utilisation des structures de contrôle (itératives et conditionnelles).
- Première écriture des fonctions.
Matériels & logiciels utilisés
- Un micro-ordinateur (PC)
- Notepad ++ ou autres éditeurs
- Navigateur web
Exercice 1 :
Ecrire un script qui permet de saisir un caractère puis d'afficher la couleur correspondante
dans une boite alert, sachant que :
R --> Rouge
J --> Jaune
B --> Bleu
Exercice 2 :
1. Ecrire une page HTML faisant apparaitre la table de multiplication pour les entiers compris
entre 0 et 9 et présenter le résultat dans un tableau HTML.
2. Déclarer une fonction table_mult(N), qui doit calculer et afficher la table de multiplication
par N (si possible encadrée dans un tableau HTML). La valeur du paramètre N sera
demandée à l'utilisateur au moyen d'une boite de dialogue PROMPT, puis sera passée en
paramètre dans l'appel de table_mult(N).
3. Supprimer la demande de valeur N, et faire afficher l'ensemble des tables de multiplication

par N = 1, 2, ... 10, par des appels itératifs table_mult(i).
Mme Nesrine BEN HADJ HAMMOUDA 1

Exercice 3 :
1. Créer une page HTML contenant une image de dimension 50x50 pixels.
2. Le click sur cette image permet d’ouvrir une nouvelle fenêtre HTML contenant
l’image dans ses dimesions initiales.
3. La fermeture de la fenêtre popup ouverte se ferme après 10 secondes.
4. Ajouter une confirmation de la part de notre utilisateur avant la fermeture de la
fenêtre.
Exercice 4 :
1. Ecrire une fonction qui permet de tirer au sort un nombre entre 0 et 10.
2. Ecrire un script qui ouvre une fenêtre qui demande à l’utilisateur de donner un
nombre entre 0 et 10 puis essaye de faire deviner ce nombre à l’utilisateur.
 Si l’utilisateur entre le bon nombre, le script affiche « gagnant !!!!»
 Sinon le script affiche trop grand ou trop petit selon le cas.
3. Améliorer la fonction pour que l’utilisateur ne peut pas dépasser les 6 essais dans ce
jeu.
Exercice 5 :
Utiliser javascript pour créer une calculatrice dont l’affichage est le suivant :

**************************************************************************
Annexe des fonctions
***************************************
Ouverture et fermture d’une fenêtre popup
open() (window ou document) : permet de créer une fenêtre popup.
open("URL", "cible", "attributs" ) ;

var Nom_fenetre = open("URL", "cible", "attributs" ) ;
Cette méthode est composée de trois parties :

- la page à ouvrir (url),
- la cible : nom de la fenêtre
- ces attributs :
toolbar= Affichage de la barre d'outils

location= Affichage de champ d'adresse (ou de localisation)
directories= Affichage des boutons d'accès rapide
status=Affichage de la barre d'état
menubar= Affichage de la barre de menus
scrollbars=auto : Affichage des barres de défilement.
resizable=Dimensions de la fenêtre modifiables
width=nombre (x en pixels) Largeur de la fenêtre en pixels
height=nombre (y en pixels) Hauteur de la fenêtre en pixels
fullscreen= popup en plein écran
top= nombre : position verticale en pixels sur l’écran
left= nombre : position horizontale en pixels sur l’écran
NB : On peut utiliser 1(true) ou 0 (false) ou bien yes ou no comme valeur pour chaque attribut.
close() : permet de fermer une fenêtre.
window.close(); ou bien window.Nom_fenetre.close();
confirm() : ouvre une boîte de dialogue avec 2 boutons : OK et Annuler. Elle permet
d’envoyer une information et de recevoir un booléen.
Exemple :
<html>
<head>
<title> La fonction Confirm </title>
</head>
<body>

<script language="javascript">
If (confirm("je vais dire quel bouton vous avez appuyé : " ) )
{
alert("sur OK \n Continuez avec: ") ;
}
else
{
alert("sur Annuler \n Sortez avec OK ! ") ;
}
</script>
</ body>
</html>
Les délais
setTimeout() : définit une action à exécuter et un délai avant son exécution.
var x = setTimeout("instructions", délai en millisecondes) ;
clearTimeout() : interrompt le délai et l'exécution du code associé à ce délai.
clearTimeout(x);
setInterval() : déclenche répétitivement la même action à intervalles réguliers.
var x = setInterval ("instructions", délai en millisecondes) ;
clearInterval() : stoppe l'action de setInterval

clearInterval(x);
Les nombres aléatoires
Math.random() : renvoie un nombre aléatoire entre 0 et 1

var x = Math.random(); //donne x = 0.6489534931546957
Math.floor () : retourne le plus grand entier inférieur ou égal à la valeur donnée en

paramètre..
var x = Math.floor(6.01); //donne x = 6
var x = Math.floor(3.99); //donne x = 3

TP1 JavaScript

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP1 JavaScript

Transféré par

Droits d'auteur :

Formats disponibles

TI 2 Atelier DevpWeb et Multimédias 2

- Ecrire les premiers scripts.

3. Supprimer la demande de valeur N, et faire afficher l'ensemble des tables de multiplication

Mme Nesrine BEN HADJ HAMMOUDA 1

Mme Nesrine BEN HADJ HAMMOUDA 2

Ouverture et fermture d’une fenêtre popup

open() (window ou document) : permet de créer une fenêtre popup.

open("URL", "cible", "attributs" ) ;

Cette méthode est composée de trois parties :

toolbar= Affichage de la barre d'outils

close() : permet de fermer une fenêtre.

window.close(); ou bien window.Nom_fenetre.close();

Mme Nesrine BEN HADJ HAMMOUDA 3

setTimeout() : définit une action à exécuter et un délai avant son exécution.

var x = setTimeout("instructions", délai en millisecondes) ;

clearTimeout() : interrompt le délai et l'exécution du code associé à ce délai.

setInterval() : déclenche répétitivement la même action à intervalles réguliers.

var x = setInterval ("instructions", délai en millisecondes) ;

clearInterval() : stoppe l'action de setInterval

Les nombres aléatoires

Math.random() : renvoie un nombre aléatoire entre 0 et 1

Math.floor () : retourne le plus grand entier inférieur ou égal à la valeur donnée en

var x = Math.floor(6.01); //donne x = 6

var x = Math.floor(3.99); //donne x = 3

Mme Nesrine BEN HADJ HAMMOUDA 4

Vous aimerez peut-être aussi