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.
Copiez le code suivant dans un fichier .html, puis ouvrez-le dans un navigateur :
Vous avez appris :
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 native | Version JQuery |
|---|---|
| ou : |
ou :
| Version native | Version 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 :
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 :
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 :
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 :
- 
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>
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>
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.
Testez ceci. À quoi correspond la propriété innerHTML ?
| Version native | Version JQuery |
|---|---|
Pourquoi cette version ne marche pas ?
| Version native | Version JQuery |
|---|---|
Sans la tester, êtes-vous capable de dire si cette version va fonctionner et pourquoi ?
| Version native |
|---|
| Version JQuery |
Testez ceci. Est-ce que la propriété innerHTML est en lecture seule, ou en lecture-écriture ?
| Version native |
|---|
| Version JQuery |
À 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>
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 :
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.
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") ?
Pourquoi un "s" à getElementsByTagName("img") ?
Pourquoi pas de "s" du pluriel à getElementById('test') ?
Dans l'exemple ci-dessus, à quoi sert la boucle for ?
À 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';
Vous devrez utiliser :
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.
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 :
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).