Scribd
Importer
92 vues5 pages

TD Javascript

Transféré par

mrdreama57
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
92 vues5 pages

TD Javascript

Transféré par

mrdreama57
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 5

- E.

Nauer

Javascript / JQuery / AJAX

Pour vous faire gagner du temps, des codes HTML/Javascript partiels sont fournis sur arche. La mention
d’un astérisque (*) dans les énoncés des exercices qui suivent indique que du code est fourni pour
l’exercice.
À partir de l’exercice 5 vous pouvez utiliser JQuery (et requêtes HTTP depuis JQuery si nécessaire).

Exercice 1 Déclenchement d’un affichage

Le fichier TriangleAvecBoutons.html (*) qui contient du code


HTML et javascript. Le code javascript contient le code d’une
fonction codeTriangle qui prend en paramètre un nombre N et qui
retourne le code HTML correspondant au dessin d’un triangle de
taille N. Le code HTML contient la description de 4 boutons.
Compléter le code HTML/javascript pour qu’un clic sur l’un des
boutons provoque l’affichage d’un triangle en-dessous des boutons
(cf. copie d’écran ci-contre correspondant au résultat d’un clic sur le
bouton « 5 »).

Exercice 2 Popup

Ecrire le code javascript (Popup.html) qui demande à l’utilisateur de saisir son prénom dans une
fenêtre de saisie (utiliser la fonction prompt()), puis qui lui demande de confirmer celui-ci (utiliser la
fonction confirm()), puis qui lui affiche « Salut prénom ! » (utiliser la fonction alert()).
Un exemple correct d’enchaînement est donné ci-dessous.
Exercice 3 Recherche des propriétés d’objets

Le fichier RechercheProprietes.html (*) contient le code HTML/javascript suivant :

<!DOCTYPE html>
<html>
<head>
<title>Recherche de propriétés</title>
<meta charset="utf-8" />
</head>

<body bgcolor="white">
<form name="MonFormulaire">
<span id="id1" style="background-color : red">Zone de saisie : </span>
<input type="text" name="saisie" value="vide">
<input type="button" name="submit" onClick="Afficher()" value="Afficher">
</form>

<p>Un paragraphe.</p>
<script language="javascript">
function Afficher()
{ //recherche des objets et de leurs propriétés
var object=document;
for(i in object) { document.write(i+" = "+object[i]+"<BR>\n"); }
}
Afficher();
</script>
</body>
</html>

Le code de la fonction Afficher() permet de parcourir et d’afficher les propriétés de l’objet


document.

1. À l’aide de ce début de code (en parcourant les objets), rechercher les propriétés suivantes :
- le titre de la page
- la couleur de fond de page
- le nombre de formulaire contenu dans la page
- le contenu de la zone de saisie
- la couleur de fond de la zone « Zone de saisie : »
- le longueur du texte (i.e nombre de caractères) du paragraphe

2. Afficher les valeurs des propriétés suivantes et dire ce qu’elles contiennent :


- document.all.saisie.tagName
- document.forms['MonFormulaire'].submit.onclick
- document.MonFormulaire.submit.outerHTML
- document.forms['MonFormulaire'].elements['submit'].type
- document.getElementById('id1').style

Remarques : le résultat n’est pas le même dans Internet Explorer et dans Chrome (à tester)

Exercice 4 Modification dynamique de propriétés / formulaire

Le fichier CouleursDynamiques.html (*) contient le code HTML de l’interface présentée ci-


dessous. Complétez ce code pour permettre de modifier les couleurs de différents objets en fonction de
différents événements.
Exercice 5 Roll-over et jeu du morpion

Le « Roll-over » consiste à modifier un élément lorsque l’utilisateur passe dessus avec la souris.

1. Le fichier Rollover.html (*) contient le code HTML qui définit


un tableau de 3 x 3, dont chaque cellule contient initialement une image
vide (blanche) nommée Blanc.gif de 20 pixels x 20 pixels.
L’objectif de l’exercice est de suivre le déplacement de la souris de
l’utilisateur, en cochant en temps réel, la cellule sur laquelle elle se
trouve. Pour cela, il faut charger, au passage de la souris (événement
détecté : onMouseOver) une autre image (contenant une croix) de
même taille, nommée Croix.gif, tout en remettant à vide la cellule
précédente.

2. Étendre l’application pour réaliser le jeu du morpion : rajouter 1 bouton « Effacer » qui permet de
remettre en blanc toutes les cellules ; chaque click dans une case vide produira l’affichage alternatif
d’une croix ou d’un rond ; si 3 signes identiques sont alignés (horizontalement, verticalement ou en
diagonale) afficher « Gagné ! » dans une fenêtre de type alert.

Les images nécessaires à l’exercice (Blanc.gif, Croix.gif et Rond.gif) sont également


fournies dans le le .zip disponible sous arche.

Exercice 6 Listes déroulantes adaptatives / javascript + PHP

1. On souhaite produire une interface comprenant 2 listes déroulantes :


- la 1ère liste déroulante contient des régions de France (y mettre au moins 2 régions) ; aucune
région n’est sélectionnée par défaut (i.e. la liste contient une valeur « chaîne vide » en premier élément).
- la 2nde liste contient des départements : au départ, cette liste contient tous les départements et,
lorsqu’une région est sélectionnée dans la 1ère liste, alors la 2nde liste doit contenir la liste des
départements correspondant à cette région.

Le fichier ListesDeroulantesAdaptatives.html (*) contient le code HTML qui définit ces


deux listes. Complétez le avec du code javascript afin que lorsque l’utilisateur sélectionne une région,
la seconde liste se mette à jour avec les départements appartenant à la région sélectionnée.
Exercice 7 Vérification de formulaire / jQuery + PHP

Le fichier VerifFormulaire.html (*)


contient le code HTML de l’interface présentée ci-
contre, qui permet de saisir une date. L’objectif de
ce programme est de vérifier le format d’un champ
de formulaire par un appel à un programme sur le
serveur qui vérifie le format. Ecrire le programme checkDate.php qui utilise une fonction PHP pour
vérifier que le paramètre date, reçu par la méthode GET est une date valide. Si la date est valide,
checkDate.php retourne la valeur 1 et le message « Date correcte » doit être affiché dans l’interface,
en dessous de la zone de saisie dans la div réservée à cet effet. En cas de date invalide,
checkDate.php retourne la valeur 0 et le message « Date incorrecte » doit être affiché.

Exercice 8 Interface web de dialogue (chat)

Mettre en place une application permettant à plusieurs utilisateurs de dialoguer (vous pouvez lancer 2
fenêtres de navigateur pour tester), comme illustré dans la copie d’écran ci-dessous.

3 fichiers sont fournis dans le dossier Chat :

1. chatData.txt est un fichier de données, initialement vide, qui va se remplir au fur et à


mesure avec les messages envoyés ; il est composé d’un ensemble de lignes de la forme
‘pseudo > message’, correspondant aux différents messages.

2. un programme PHP insertChatLine.php se charge de stocker dans chatData.txt un


nouveau message envoyé par un utilisateur.

3. chat.html contient le code HTML de l’interface ci-dessus. Vous devez le compléter pour
obtenir le comportement suivant : à la 1ère saisie, l’utilisateur tape son pseudo et un message.
Lorsqu’il clique sur Envoyer la page HTML va appeler le programme
insertChatLine.php en lui passant les données pseudo et message par la méthode
POST. La zone de saisie relative au message doit être alors vidée. La fenêtre de chat doit être
mise à jour tous les 10ème de seconde en affichant le contenu courant du fichier
chatData.txt. Ajouter le code JQuery qui permet également d’envoyer le message lorsque
l’utilisateur presse la toucher « Entrée ».
Exercices subsidiaires

Exercice 10 Décocher un bouton radio

En HTML, un bouton radio permet de sélectionner un choix parmi


un ensemble de choix. La copie d’écran illustre cela : un seul des
boutons « Monsieur » ou « Madame » peut être coché.

Cependant, une fois une des valeurs sélectionnée, il est impossible de décocher ce choix et un des choix
reste nécessairement coché. Compléter le code du fichier DecocherBoutonRadio.html (*) pour
qu’un bouton coché ne soit plus coché si on clique dessus.

Exercice 11 Liste déroulantes adaptatives / Javascript + PHP

Les 2 questions de cet exercice sont en lien avec l’exercice 6 sous deux aspects différent.

1. Interaction avec une base de données. Le fichier InstallBddRegions.php fourni dans le


dossier zip permet de créer une base de données MySQL qui stocke les informations sur les régions et
les départements associés. Utiliser ce fichier pour créer votre base de données en local. Écrire le
programme PHP nommé ListesDeroulantesAdaptatives.php qui génère dynamiquement le
code javascript ou un code équivalent à celui de l’exercice 6 en fonction du contenu de la base de
données (nécessite d’utiliser des requêtes SQL et une bibliothèque PHP qui serve à l’accès de la base de
données.

2. Interaction HTTP. Reprendre l’exercice sur les listes déroulantes adaptatives de la façon suivante :
- la première liste déroulante doit être remplie directement dans le code HTML/Javascript
- la seconde liste déroulante doit toujours se mettre à jour par rapport à la région sélectionnée dans la
première liste mais, cette fois, à travers une interrogation AJAX d’un programme PHP qui interroge
renvoie la liste des départements correspondant (à partir d’une interaction avec la base de données
ou pas).
-
Écrire :
- le programme javascript + page HTML ListesDeroulantesAdaptativesAjax.html ;
- le programme PHP GetRegions.php qui renvoie la liste des départements correspondant à une
région.

Vous aimerez peut-être aussi