Interactions et automatisations dans un site avec JavaScript

I. Notions de base pour commencer avec JavaScript
A. Pour débuter avec JavaScript... B. Manipulation de contenu dans une page C. Utilisation de fonctions D. Utilisation des méthodes du DOM pour accéder aux éléments de contenu ou de style

A. Pour débuter avec JavaScript...



L'exemple 1 contient des exemples de scripts illustrant le fonctionnement de base de JavaScript.
Pour mieux les comprendre, il est conseillé de la consulter en parallèle avec le code source des différents exercices. Pour chaque exemple vous trouverez un lien vers une page contenant le code étudié.
Il est conseillé de télécharger cette page (clic droit > "Enregistrer sous..." dans un dossier de travail sur votre poste puis de l'éditer avec un éditeur HTML ou texte (HAPedit par ex.).

Cette premiere série d'exemples utilise des balises SCRIPT intégrées à différents endroits du fichier HTML et qui contiennent du code JavaScript.
Le lancement de ce code peut se faire de différents manières: les exemples ci-dessous illustrent les possibilités existantes.

Exemple 1: lancement direct par intégration d'une balise SCRIPT dans la page (BODY)

Lancement direct: ce texte est créé par le script placé dans la balise P juste avant l'alerte. La fonction write() utilisée intègre le texte exactement au point d'ouverture de la balise SCRIPT qui la contient.Lancement direct: ce texte est créé par le script placé dans la balise P juste avant l'alerte. La fonction write() utilisée intègre le texte exactement au point d'ouverture de la balise SCRIPT qui la contient.

code de la balise SCRIPT intégré dans la page:
<script language="JavaScript">
document.write("Lancement direct: ce texte est créé par le script placé dans la balise P juste avant l'alerte. La fonction write() utilisée intègre le texte exactement au point d'ouverture de la balise SCRIPT qui la contient.");
</script>

Réalisez un script qui lance une fenètre d'avertissement avec le texte suivant : "Bonjour tout le monde"
Vous utiliserez la fonction alert() de façon similaire à write().

Exemple 2: lancement anticipé par une balise SCRIPT dans la balise HEAD de la page

L'énervante boite de dialogue que vous subissez au chargement de la page de l'exemple 2 est générée par une fonction alert() lancée par un script situé dans la balise HEAD de cette page.
Code de ce script:
<script language="JavaScript">
alert("Je suis créé par un script intégré dans la balise HEAD de cette page.\n Tant que vous ne cliquerez pas, la suite de cette page (BODY) attendra son affichage !");
</script>

Exemple 3: lancement par un évènement du navigateur

L'exemple 3 illustre l'utilisation du gestionnaire d'évènement onLoad appliqué à la balise BODY: il permet de déclencher un script lorsque le chargement de l'élément auquel il est appliqué (BODY dans cet exemple) est terminé.
D'un façon plus générale, les gestionnaires d'évènements sont des attributs de balise HTML qui prennent comme valeur du code JavaScript.
Si vous consultez le pied de la page vous trouverez le résultat d'un appel JavaScript qui modifie la propriété innerHTML pour ajouter à la page du code HTML (dans cet exemple le code est ajouté à la fin de la balise BODY, ce qui le fait apparaître en bas de page).
Code HTML de cet exemple:
<body onLoad="document.body.innerHTML += '<p class=\'genereJS\'>Je suis ajouté au code HTML de la page par <b>BODY onload= ...cettePage.innerHTML += ...</b> je suis donc placé en bas de page...<br><a href=\'#ex3\'>Retour exemple 3</a></p>';">

Réalisez un script qui lance une fenètre d'avertissement avec le texte suivant : "Au revoir tout le monde" lorsque l'on quitte la page.
Vous utiliserez la fonction alert() et le gestionnaire d'évènement onUnload().

Exemple 4: lancement par un évènement utilisateur

L'exemple 4 montre différentes méthodes pour lancer un script: Cliquez ici pour l'alerte: 1ère méthode pour lancer par un lien une fonction javascript (alert() dans cet exemple)
code HTML de ce lien:
<a href="JavaScript:alert('Vous avez cliqué ici !');">Cliquez ici pour l'alerte</a>

Cliquez maintenant ici: autre méthode pour lancer une fonction javascript à partir d'un lien
code HTML de ce lien:
<a href="#" onClick="alert('Vous cliquez vraiment n\'importe où !');">Cliquez maintenant ici: </a>
onClick est un autre exemple de gestionnaire d'évènement: le code JavaScript qu'il contient est lancé lorsque l'utilisateur clique sur le lien.
Parmi les autres gestionnaires d'évènements couramment utilisés: onMouseover (déclenché lorsque la souris survole l'élément), onMouseout (la souris quitte l'élément), onSelect lorsqu'un élément de formulaire est sélectionné. Pour plus de détails sur les gestionnaires d'évènements, consultez cette page (site SELFHTML).

Réalisez un script avec la fonction saisie2alerte() qui lance une fenètre demandant la saisie d'un texte par l'utilisateur puis affiche la saisie dans une boite d'avertissement. Vous utiliserez la fonction JavaScript prompt("texte de la boite de saisie").
La valeur saisie est récupérée en attribuant une valeur à l'appel de prompt : var_txt = prompt("texte...");
La valeur récupérée sera affichée par une boite d'averissement (fonction alert() ). avec le texte suivant : "Au revoir tout le monde" lorsque l'on quitte la page.
Vous utiliserez un lien avec une URL du type href="JavaScript: saisie2alerte();" pour lancer la fonction

explorer le contenu B. Manipulation de contenu dans une page

explorer le contenu C. Utilisation de fonctions

explorer le contenu D. Utilisation des méthodes du DOM pour accéder aux éléments de contenu ou de style

II. Exemples d'utilisations combinant les techniques de base
E. Afficher / masquer, modifier le style des contenus F. Modifier les contenus d'une page HTML affichée G. Créer un menu de navigation dynamiquement (utilisation de tableaux):