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 :

Remarque : tous les scripts utilisant la librairie JQuery doivent contenir la ligne :
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
Version nativeVersion JQuery
ou :

ou :
Version nativeVersion JQuery

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 ?

Version nativeVersion JQuery
Votre réponse n°7

Pourquoi cette version ne marche pas ?

Version nativeVersion JQuery
Votre réponse n°8

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

Version native
Version JQuery
Votre réponse n°9

Testez ceci. Est-ce que la propriété innerHTML est en lecture seule, ou en lecture-écriture ?

Version native
Version JQuery
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

Nd2018 : pour cet exercice, la fonction setInterval est mieux adaptée puisqu'elle n'a pas besoin de s'auto-planifier.

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.

Nd2018 : apparemment, maintenant, document.getElementById('valeur-de-l-id') peut être remplacé par valeur-de-l-id.

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
Astuce : aidez-vous de JQuery, sinon utiliser la fonction Javascript querySelectorAll pour parcrourir en une fois tous les h1 et h2 : querySelectorAll('h1,h2')

Défis Javascript

Refaire un htmlinstant

Vous devrez utiliser :

Merci de poster une réponse au format HTML, c'est à dire que les scripts Javascript sont entre les balises <script> et </script>
Votre réponse n°18

Retarder un événement d'une seconde

Dans une zone de saisi de texte, faire un événement qui s'exécute 1 seconde après qu'on arrête de frapper au clavier.

C'est ce qui est mis en œuvre dans mon htmlinstant : pour économiser le processeur, l'iframe se met à jour non pas à chaque frappe d'une touche, mais une seconde après la frappe de la dernière touche. Tant que vous tappez rapidement plusieurs caractères d'affilé, rien n'est mis à jour.

Vous devrez utiliser :

La fonction planifiée pourra par exemple, à titre de test, afficher un alert.

Le principe est le suivant : quand on frappe une touche, on annule la planification éventuellement en cours, puis on replanifie dans une seconde.

D'autres méthodes sont possible, sans le clearTimeout : on quitte la fonction si la dernière touche a été pressée il y a moins d'une seconde.

Merci de poster une réponse au format HTML, c'est à dire que les scripts Javascript sont entre les balises <script> et </script>
Votre réponse n°19

Vérification en temps réel de la longueur du login

Dans un formulaire avec un champ 'login', à chaque fois qu'on frappe une touche, Javascript affiche 'login trop court' ou 'login ok' selon si le login fait au moins 4 caractères ou pas.

Vous devrez utiliser :

Merci de poster une réponse au format HTML, c'est à dire que les scripts Javascript sont entre les balises <script> et </script>
Votre réponse n°20

Faire un sommaire automatique avec 2 niveaux de titres

Refaites un sommaire automatique comme dans ce TP, qui ne prend pas en compte seulement les <h1> mais également les <h2> (comme dans mes cours).

Merci de poster une réponse au format HTML, c'est à dire que les scripts Javascript sont entre les balises <script> et </script>
Votre réponse n°21