Le Javascript
Réponse AJAX

Présentation

Le Javascript est un langage de programmation utilisé dans les pages Web coté client, ce qui signifie que c'est le navigateur qui le connait et l'exécute. Les serveurs Internet (Apache, IIS) en sont incapables.

Il permet donc d'ajouter un peu d'interactivité à la page Web :

Sa syntaxe est très proche de celle du C, C++, C#, PHP, Java.

Hello World ! La fonction window.alert

Copiez le code suivant dans un fichier .html, puis ouvrez-le dans un navigateur :

Vous avez appris :

L'événement window.onload

Très souvent, on veut que les traitements Javascript s'exécutent dès que la page a terminé de se charger complètement.

C'est le cas de la construction du sommaire dans ce TP. Je ne peux pas l'exécuter trop tôt, les balises h1 et h2 ne sont pas toutes chargées et le sommaire sera incomplet. Je peux exécuter la construction à la fin de la page :

Mais ce n'est pas très élégant et on préfère placer les codes JavaScript dans le head. J'utilise l'événement window.onload qui se déclenche dès que la page est chargée :

ou :

Testez ceci en affichant une boite de dialogue (window.alert) dès que la page est chargée. Collez l'ensemble du code ici :

Votre réponse n°1

Utilisation du débogueur

Vous pouvez faire afficher vos éventuelles erreurs Javascript, comme d'habitude cela vous permet de détecter beaucoup plus rapidement les erreurs dans votre code.

Pour afficher la console dans Chrome ou Firefox vous pouvez utiliser le raccourci clavier Ctrl-Shift-j.

Par exemple, si vous avez tapé windows.onload au lieu de window.onload :

Les événements rattachés aux balises HTML

Un événement peut être lié à une balise HTML. Par exemple :

Testez ceci en affichant une boite de dialogue avec un message approprié (par exemple : "la page a fini de se charger") pour chacun des cas listés ci-dessus. Testez puis collez l'ensemble du code ici :

Votre réponse n°2

Faites une image survolée en utilisant les deux images ci-dessous. L'événement consiste à changer l'attribut src de l'image avec l'action JavaScript : "this.src='nouvelle image.jpg';". Testez puis collez le code ici :
-

Votre réponse n°3

Valider / annuler le clic sur un lien hypertexte

Cette méthode est systématiquement utilisée lorsque le clic sur un lien a pour conséquence d'effacer une donnée (par exemple, les liens supprimer cette petite annonce dans ce site).

L'événement onclick (pour un lien hypertexte) ou onsubmit (pour un formulaire) doit effectuer l'action : return booleen :

Testez ceci. Est-ce que le lien est suivi ?
<a href=http://www.google.fr onclick='return false;'>On va sur Google ?</a>

Votre réponse n°4

Testez ceci. Est-ce que le lien est suivi ?
<a href=http://www.google.fr onclick='return true;'>Et là, on va sur Google ?</a>

Votre réponse n°5

La fonction Javascript window.confirm('voulez-vous vraiment y aller ?'); renvoie vrai ou faux selon le choix de l'utilisateur. Grâce à cette fonction, lorsqu'on clique, demandez à l'utilisateur s'il veut vraiment y aller, suivez (ou pas) le lien selon sa réponse. Testez puis collez le code ici.

Votre réponse n°6

Lire et modifier le contenu d'une balise HTML à partir de Javascript

Testez ceci. À quoi correspond la propriété innerHTML ?

Votre réponse n°7

Pourquoi cette version ne marche pas ?

Votre réponse n°8

Sans la tester, êtes-vous capable de dire si cette version va fonctionner ?

Votre réponse n°9

Testez ceci. Qu'en déduisez-vous à propos du comportement de la propriété innerHTML ?

Votre réponse n°10

À ce stade, vous savez lire et modifier le contenu d'une balise HTML. On va le mettre en pratique en affichant la date système. La date système peut être affichée par exemple ainsi :

Faites en sorte que lorsque la page a fini de se charger, la date s'affiche dans la balise :
<div id=date></div>

Votre réponse n°11

La fonction setTimeout : répéter un événement à intervalle régulier

setTimeout permet d'appeler une fonction dans quelques instants. Cela fonctionne ainsi :

Lorsqu'on a une fonction qui s'appelle elle-même, on obtient une fonction qui s'exécute à intervalle régulier. Par exemple :

Reprenez l'exercice précédent et faites en sorte que la date soit actualisée chaque seconde. Testez puis collez le code ici :

Votre réponse n°12

Accéder aux balises

Accéder à une balise à partir de son ID

On l'a déjà vu au dessus : on peut accéder à une balise HTML par son ID. Par exemple :

Toutefois cette technique ne permet d'accéder à qu'une seule balise car l'ID est censé être unique dans la page. Par exemple ceci est incorrect :

En pratique, dans ce TP, il existe une balise <div id=sommaire></div>, vers le début de la page, qui sera automatiquement remplacée par le vrai sommaire grâce à un traitement JavaScript.

Accéder à des balises à partir de leur nom de balise

Cette technique permettra de parcourir par exemple "tous les h1" ou "toutes les img". Testez le code suivant :

Quelle est la nature du résultat renvoyé par getElementsByTagName("img") ?

Votre réponse n°13

Pourquoi un "s" à getElementsByTagName("img") ?

Votre réponse n°14

Pourquoi pas de "s" du pluriel à getElementById('test') ?

Votre réponse n°15

Dans l'exemple ci-dessus, à quoi sert la boucle for ?

Votre réponse n°16

Créer un sommaire automatique, (presque) comme dans ce TP

À partir du code HTML et Javascript suivant :

Ecrivez le code de la fonction Javascript creerSommaire qui, (presque) comme dans ce TP, crée automatiquement le sommaire à partir des balises h1 existantes dans la page. Vous aurez besoin de :
balise.innerHTML = balise.innerHTML + 'Titre supplémentaire dans le sommaire';

Votre réponse n°17