Séance nº5/6/7/8: Découverte de JavaScript/AJAX/Gears
- Transparents du cours sur JavaScript
- Transparents du cours sur AJAX
- L'objet XMLHttpRequest (AJAX)
- Fiches de synthèse des technologies Web
Exercice 1: JavaScript
- Constuire une page HTML minimale dans l'éditeur de votre choix.
- Ajouter un bloc d'instructions JavaScript qui produit un affichage quelconque. Vérifier le résultat avec vote navigateur.
- Ajouter un calcul dans cet affichage pour faire apparaître la valeur en euros de 2001 francs.
- Définir une fonction JavaScript qui pour une valeur donnée en francs fournit la valeur en euros.
- Utiliser cette fonction pour convertir toutes les sommes comprises entre 0 et mille francs avec un pas de 50 francs, et présenter le résultat dans un tableau.
- Réaliser le même travail pour la conversion inverse et fournir les résultats pour toutes les sommes comprises entre 1 et 200 euros avec un pas de 10 euros.
Exercice 2: JavaScript
Écrire une page HTML faisant apparaître la table de multiplication pour les entiers compris entre 0 et 9. Utiliser les possibilités de JavaScript pour faciliter ce travail. Observer le code HTML produit par l'exécution du code JavaScript.Exercice 3: JavaScript
Écrire le squelette d'une page HTML avec la définition du titre dans l'en-tête, et la définition des couleurs dans la balise BODY. Ajouter le code JavaScript permettant de visualiser sous forme de tableau HTML toutes les propriétés du document : ses couleurs, le titre, la date de dernière modification, son adresse et l'adresse de provenance du visiteur (pour tester cette dernière propriété, faire un lien sur cette page depuis une autre de vos pages).Exercice 4: JavaScript
Définir une page HTML ne contenant qu'un formulaire, lui-même ne contenant qu'une entrée de type button. Pour une telle entrée, nous devons fournir un nom, une valeur (le texte qui apparaît sur le bouton) et associer une action JavaScript à l'événement onClick. Faire en sorte que cliquer sur ce bouton provoque le changement de la couleur de fond de page.Exercice 5: JavaScript
Reprendre une page contenant des ancres et utiliser JavaScript pour afficher le tableau des ancres de cette page.Exercice 6: JavaScript
Écrire le code JavaScript qui, lorsque la souris passe sur un lien, fait apparaître la destination de ce lien dans le statut de la fenêtre.Exercice 7: JavaScript
Reprendre la page HTML contenant votre questionnaire. Ajouter le code JavaScript permettant d'alerter l'utilisateur lorsqu'un champ obligatoire n'est pas renseigné.Exercice 8: JavaScript
Nous nous proposons dans cet exercice de réaliser une convertisseur francs-euros.Créer une nouvelle page contenant un formulaire : deux cases de texte destinées à recevoir les sommes d'argent, et un bouton de soumission.
Écrire le code JavaScript qui effectue la conversion et place le résultat dans la zone de texte adéquate.
Exercice 9: JavaScript
Dans un document HTML quelconque, ajouter le code JavaScript nécessaire pour qu'un message apparaisse à l'arrivée d'un utilisateur sur la page et au moment de son départ.Exercice 10: JavaScript
Dans un document HTML, ajouter des boutons qui, lorsque l'on clique dessus, change la couleur de fond du document.Exercice 11: JavaScript
Dans un document HTML, ajouter deux boutons : le premier qui permet de revenir au document précédent, le second d'aller au document suivant.Exercice 12: JavaScript
Dans un document HTML, insérer le code JavaScript qui permet un roll-over entre deux images lors du passage de la souris.Exercice 13: JavaScript
Construire un formulaire contenant des boutons et des listes, puis associer à chaque question une zone de texte qui prendra la valeur de la réponse choisie.Exercice 14: JavaScript
Dans un formulaire, associer aux entrées de type texte un code JavaScript qui signale à l'utilisateur chaque changement dans la réponse.Exercice 15: JavaScript
Écrire une fonction JavaScript qui vérifie qu'aucune réponse fournie dans un formulaire n'est vide. Si c'est le cas, le signaler à l'utilisateur et replacer le curseur dans la zone à renseigner.Exercice 16: JavaScript
Dans un formulaire HTML, ajouter le code JavaScript qui permet- de vérifier la syntaxe d'une adresse mail ;
- de limiter la longueur d'un texte saisi ;
- de contrôler qu'un nombre a été fourni.
Exercice 17: JavaScript
Vous allez réaliser un petit jeu en associant du code JavaScript à un formulaire. Le principe est le suivant: l'ordinateur choisit un nombre caché entre 0 et 1000 ; le joueur doit trouver ce nombre en un minimum de coups.1/ Réaliser l'interface de ce jeu en utilisant un formulaire composé de 2 boutons ("Nouvelle partie" et "Voir la solution"), une zone de saisie de type text et une zone d'affichage de type textarea en lecture seule (attribut readonly).
2/ Réalisez maintenant le jeu en lui-même à l'aide d'un script JavaScript. Vous mettrez en œuvre les spécifications suivantes:
Quand la page du jeu se charge, une boîte de dialogue demande au joueur de confirmer le fait qu'il souhaite commencer une partie ; s'il clique sur Annuler, le joueur doit cliquer sur Nouvelle partie pour commencer un nouveau jeu, sinon la zone d'affichage s'efface et le curseur est placé dans la zone de saisie du nombre;
Quand l'utilisateur saisit un nombre, le script doit vérifier s'il s'agit bien d'un nombre compris entre 0 et 1000. Si tel n'est pas le cas, un message d'alerte doit s'afficher;
Si le nombre saisi correspond au nombre recherché, un message d'alerte félicite le joueur et affiche son nombre de coups. Sinon le script affiche dans la zone textarea si le nombre saisi est trop petit ou trop grand ; le texte doit s'insérer dans la zone au dessus des messages précédents;
Si le joueur a gagné, le script doit lui proposer une nouvelle partie après qu'il ait cliqué sur OK pour fermer la boîte de dialogue le félicitant.
Exercice 18: Cookie
Dans un document HTML, insérer le code JavaScript qui vous demande de saisir votre prénom (via un formulaire) lors du premier affichage de la page. Les fois suivantes votre prénom est affiché automatiquement. Ajouter ensuite un bouton "reset" permettant de supprimer le prénom en mémoire et de revenir au formulaire.Exercice 19: DHTML
Dans un document HTML, insérer le formulaire qui saisit les coordonnées d'un contact (Nom, prénom, téléphone) et les insère dans un tableau affiché en dessous du formulaire.Exercice 20: Google Maps
Dans un document HTML, insérer une carte Google Map en récupérant une clé sur le site Google (utiliser "http://localhost" comme URL).Exercice 21: Google Maps
Ajouter un formulaire pour saisir une adresse et un commentaire qui devront être intégrés à la carte Google Map créée dans l'exercice précédent (utiliser le geocoder pour obtenir les coordonnées GPS de l'adresse). La carte doit être centrée sur la dernière adresse saisie.Exercice 22: AJAX
Dans un document HTML, afficher le nom et le prénom de l'utilisateur en utilisant AJAX pour récupérer les informations dans un document XML stocké sur le même domaine.Exercice 23: AJAX & PHP
Nous prendrons une table :CREATE TABLE `temp` (
`text` VARCHAR( 250 ) NOT NULL
) TYPE = MYISAM ;
INSERT INTO `temp` ( `text` ) VALUES ('Bonjour'), ('Monde');
Ainsi qu'un fichier reponse.php qui va simplement lire dans la base de donnée et transformer le résultat en XML sur le même modèle que notre fichier XML de l'exemple précédent :
reponse.php
header('Content-Type: text/xml');
echo "\n";
echo "\n";
//on se connecte a la BDD
$dbhost="localhost";
$dbuser="login";
$dbpass="motdepasse ";
$dblink=mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db("gael",$dblink);
//on lance la requete
$query = "SELECT * FROM temp";
$result = mysql_query($query,$dblink) or die (mysql_error($dblink));
//On boucle sur le resultat
while ($row = mysql_fetch_array($result, MYSQL_NUM))
{
echo "" . $row[0] . "\n";
}
echo "\n";
?>
Notez la ligne header('Content-Type: text/xml'); très importante c'est ce qui permet à PHP de dire au navigateur le format du fichier retourné.
Écrire le document HTML et le script AJAX qui récupère les informations stockées dans la base de données via le fichier response.php.
Exercice 24: AJAX, PHP & MySQL
Comme nous l'avons vu précédemment, le mode asynchrone permet de ne pas bloquer le navigateur client pendant le chargement de la page. Nous allons voir ici comment afficher un message d'attente pendant le traitement Javascript. Cela va se faire en deux temps : d'une part afficher un message quelconque lors de l'appel initial, puis le retirer lorsque notre onreadystatechange passe à 4. Le seul intérêt est d'avertir l'utilisateur qu'une mise à jour des données est en cours.Voici donc notre fichier reponse.php modifié avec une pause forcée pour bien voir le message d'attente :
header('Content-Type: text/xml');
echo "\n";
echo "\n";
//on connecte
$dbhost="localhost";
$dbuser="login";
$dbpass="motdepasse";
$dblink=mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db("gael",$dblink);
//on lance la requete
$query = "SELECT * FROM temp";
$result = mysql_query($query,$dblink) or die (mysql_error($dblink));
sleep(5); // on attend avant de répondre
//On boucle sur le résultat
while ($row = mysql_fetch_array($result, MYSQL_NUM))
{
echo "" ; $row[0] ; "\n";
}
echo "\n";
?>
On note donc le sleep(5) qui oblige PHP à stopper...
On ajoute un fichier CSS qui permettra de gérer le style masqué/affiché du message d'attente :
.tumevoispas
{
visibility: hidden;
}
.tumevois
{
visibility: visible;
font-size: 200%;
background-color: #DAEDFC;
width: 300px;
height: 40px;
}
Écrire le document HTML et le script AJAX qui récupère les informations stockées dans la base de données via le fichier response.php. et affiche le message "Veuillez patienter" tant que les informations n'ont pas été retournées par le script.
Exercice 25: Google Maps & Gears
Modifier l'exercice 21 pour :- stocker le fichier CSS (à créer si ce n'est pas déjà fait) et les fichiers JavaScript annexes de la page sur le poste du client,
- stocker localement la liste des adresses saisies par l'utilisateur et mémorisées sur la carte Google Maps.