Labo 05

Mercredi 9 octobre

Solution : https://github.com/jpcaissy/INF4375-2013A/tree/master/labo-05/solution

Objectifs

• Initiation à Javascript dans un navigateur Internet
• Faire des requêtes HTTP synchrones

Exercice 1 - Javascript

Copier le contenu du fichier html disponible ici : https://github.com/jpcaissy/INF4375-2013A/blob/master/labo-05/exercice-01.html. Créeez un fichier exercice-01.js dans le même dossier que le fichier html et complétez le avec les fonctionnalités suivantes :

1. Au chargement de le page, avec getElementById, modifier le texte de la balise <div> dont l'id id_1.
2. Au chargement de la page, avec getElementById, modifier le style de la balise <div> dont l'id est id_1 pour que la couleur du texte soit gras (bold) et rouge.
3. Au chargement de la page, avec getElementsByTagName, modifier le texte de la boite #2 et #3.

N.B.: Pour éxécuter du code au chargement de la page, celle-ci doit être chargée au complet. Il est possible de faire exécuter du code après le chargement de la page avec le onload() sur la balise .

Exercice 2 - Requêtes HTTP synchrone

1. Lorsque le bouton Soumettre est appuyé, afficher un message d'alerte avec alert() si le champ Nom est vide.
2. Au lieu de faire un alert(), rajouter du texte dans la balise <p id="form_error"> avec innerHTML et mettez la couleur du texte en rouge et afficher le (display = block)
3. Si le formulaire est valide, faites une requêtes AJAX (méthode GET) vers http://labo5.piji.ca avec le paramètre nom, come par exemple : http://labo5.piji.ca/?nom=Jean-Philippe et remplacer le contenu de la balise <div id="resultat"> par la réponse HTML de la requête AJAX.
4. Même chose que le #3, mais faites la requête vers http://labo5.piji.ca/json. Les données de retour sont au format JSON. Parsez-les et afficher le nom et la date dans la balise <div id="resultat">.