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
Les exemples de la partie I. permettent également d'illustrer les différentes
méthodes permettant d'ajouter ou de modifier le contenu d'une page HTML
à l'aide de JavaScript.
Ajout par modification du contenu d'une balise (identifiée par un
attribut ID) en utilisant la propriété innerHTML
: Exemple 3
Exemple 5: utilisation d'une fonction pour ajouter du code
HTML
Dans l'exemple 5 montre l'utilisation d'une fonction créée pour ajouter_html("html
à ajouter" , "ID_balise_cible")
ajouter n'importe quel portion de code HTML ("html
à ajouter") à n'importe quelle balise de la
page ayant un identifiant ID= "ID_balise_cible".
Cette fonction est stockée dans la balise HEAD de la page: étant
ainsi lue par le navigateur avant d'afficher le BODY, elle peut donc être
appelée depuis n'importe où dans la page.
Appel de la fonction ecrire_html() avec les paramètres
'<br><p>Je suis le code à écrire</p>'
et 'cible_exemple5':
Balise P avec ID="cible_exemple5"
=> le contenu HTML envoyé par le script de cet exemple vient se mettre
ici.
Code HTML de l'appel de la fonction avec ses paramètres pour le onClick="..."
du bouton ci-dessus: onClick="ecrire_html('<br><p>Je suis le code à
écrire</p>' , 'cible_exemple5')"
Code JavaScript de la fonction ecrire_html() : function ecrire_html(code_html , id_balise) {
document.getElementById(id_balise).innerHTML += code_html;
}
=> cette fonction modifie la propriété innerHTML
de la balise cible (balise ayant un ID = cible_exemple5) en
lui ajoutant ( += ) le code HTML <br><p>Je
suis le code à écrire</p> .
Réalisez un script avec la fonction saisie2txt()
qui lance une fenètre demandant la saisie d'un texte par l'utilisateur
puis affiche la saisie dans un cadre à fond gris flottant à droite de
la page. Ce cadre aura comme id affichage
Pour éviter de réécrire du code, vous réutiliserez la fonction saisie2alerte() que vous combinerez avec votre fonction ecrire_html() pour obtenir la fonction finale saisie2txt()
Vous utiliserez un lien avec une URL du type href="saisie2txt();" pour lancer la fonction.
L'utilisation de JavaScript dans une page web sera facilitée par l'usage
de fonctions définies par l'auteur. L'idée est
de structurer le code pour limiter au maximum la répétition des
portions de code ayant une fonctionnalité identique
Code JavaScript pour la déclaration d'une fonction: function nom_de_la_fonction () {
instruction 1 ;
instruction 2 ;
= ensemble d'instructions délimité par des accolades
}
Exemple de code HTML permettant d'appeler cette fonction à partir d'un
évènement onLoad ou onClick: <body onload="nom_de_la_fonction()"><button onclick="nom_de_la_fonction()">
On peut ensuite faire appel à ces différentes fonctions
dans le reste de la page ce qui permet d'utiliser plusieurs fois le même
code.
Dans la même optique on essayera (lorsque cela n'alourdi pas trop le temps
de développement du code...) de faire des fonctions "modulables"
en utilisant des paramètres. L'exemple 5 montre un cas simple d'utilisation d'une fonction
avec 2 paramètres.
Exemple 6: utilisation de paramètres avec une fonction
Les boutons de l'exemple 6 lancent la même fonction que celle de l'exemple 5,
ecrire_html() mais avec des paramètres différents:
ici la balise P avec l'id cible2
paramètre 1: code à écrire = '<p style=\'font-size:200%;
font-weight:bolder\'>Je suis gros et gras !</p>'
paramètre 2: ID de la balise cible = 'cible2'
(cad le paragraphe au-dessus).
paramètre 1: code à écrire = '<p style=\'font-size:75%;
color:red\'>Je suis petit et rouge !</p>'
paramètre 2: ID de la balise cible = 'cible3'
(cad ce paragraphe).
ici la balise P avec l'id cible3
La fonction ecrire_html() utilise les 2 paramètres
de la manière suivante: paramètre 1 est envoyé
comme code HTML à ajouter ( ...innerHTML += ...) à
celui de la balise ayant comme ID paramètre
2
Code JavaScript de la fonction ecrire_html (
paramètre 1 , paramètre
2 ) : function ecrire_html(code_html , id_balise)
{
document.getElementById(id_balise).innerHTML +=
code_html;
}
On peut constater que les 2 paramètres sont désignés par
des variables (dans cet exemple il s'agit de code_html
et id_balise) dans les instructions
de la fonction.
Lors du lancement de la fonction, les valeurs passées
en paramètres à la fonction prendront la place
de ces variables.
Dans l'exemple 7, on utilise des fonctions définies dans le fichier
externe externe.js (stocké
dans le même dossier que cette page): l'intégration
de ce script externe se fait dans la balise HEAD
de cette page par la ligne de code suivante: <script language="JavaScript" src="externe.js"></script>
appel de la fonction bouge_node() code JavaScript de la fonction: function bouge_node() {
a_bouger = document.getElementById("noeud_a_bouger");
div_place = document.getElementById("noeud_cible");
div_place.appendChild(a_bouger);
}
Tableau à bouger: balise TABLE id="noeud_a_bouger"
Les zones:
Vie scolaire
Administration
CDI
Allemand
SVT
Foyer
Productions des élèves
Techno
Lettres
Aides
Appel de la fonction augmente_margetop().
Code JavaScript de la fonction: function augmente_margetop(val) {
document.getElementById("titreIV").style.backgroundColor = '#DEDEDE';
document.getElementById("titreIV").style.paddingTop = val + 'px';
}
Appel de la fonction margetop_interactif(). Code JavaScript de la fonction: function margetop_interactif() {
user_hteur = prompt('Saisissez la valeur en pixels de l\'espacement supérieur)',
0);
augmente_margetop(user_hteur);
}
On peut remarquer ici l'appel de la fonction précédente (augmente_margetop())
comme exemple de réutilisation d'une fonction: le paramètre passé
à cette fonction est la saisie de l'utilisateur.
(cette fonction présente une lacune importante: elle n'envisage pas le
cas ou la saisie de l'utilisateur ne serait pas un nombre...).
Dans l'exemple affiche masque on utilise 2 boutons pour faire afficher / masquer un cadre grisé en utilisant la fonction affiche_masque() .
Cette fonction nécessite 2 paramètres:
1er paramètre = l'id de lélément à afficher/masquer
2eme paramètre = 0 pour masquer ou 1 pour afficher
On utilise alors cette fonction pour faire une 2eme fonction affiche_masque_totale() qui permet en plus de faire apparaitre et disparaitre les boutons "afficher" et "masquer" alternativement (pour qu'il n'y en qu'un seul visible à la fois).
Cette fonction utilise la fonction affiche_masque() définie + haut, elle utilise 4 paramètres:
id du cadre à masquer/afficher
id du bouton afficher
id du bouton masquer
visibilité du cadre (0 ou 1)
On peut aussi utiliser le passage de la souris sur un lien
comme déclencheur d'une fonction: ici la fonction chge_couleur()
qui fait passer en rouge le fond du cadre lorsque la souris passe sur le lien (onmouseover) puis le remet en gris lorsqu'elle quite le lien (onmouseout).
Pour le détail du fonctionnement de ce script : ouvrez
affiche_masque.js
L'exemple change contenu illustre une méthode pour
changer le texte contenu dans la page : exemple type de modification dynamique d'un élément d'une page
Dans cet exemple on demande d'abord à l'utilisateur de saisir le texte à afficher dans un élément de formulaire
Lorsqu'il clique sur son bouton valider, la fonction chge_txt() remplace le texte existant par celui saisi par l'utilisateur
Pour être plus sûre il faut ajouter une fonction qui vérifie que la
zone de texte n'est pas vide avant de faire la modif du texte
si elle est vide il faut envoyer un avertissement à l'utilisateur lui demandant de le remplir et empêcher la modification
=> fonction verif_saisie()
Pour être plus élégante, il faut également que le curseur soit
positionné dans la zone de saisie après l'avertissement à l'utilisateur
Si on veut être au top, cette fonction devra également vider la zone de
texte du formulaire après avoir fait la modif dans le cadre
et que le curseur y soit repositionné pour que l'on puisse recommencer immédiatement...
=> fonction the_top() qui utilise des appels à teste_saisie() et chge_txt().
(on ne va quand même pas faire des copier/coller, ça risquerait de
faire des corrections multiples si on souhaite faire des modifs dans
ces 2 fonctions !!!)
Pour le détail du fonctionnement de ce script : ouvrez
change_contenu.js
Dans l'exemple acces rapide la fonction
cree_liste_rapide() est lancée 2 fois avec 2 paramètres différents
ce qui permet de fabriquer 2 menu déroulants différents.
A chaque fois cette fonction fabrique le menu (balise SELECT) à partir du tableau (boucle FOR)
puis l'affiche dans la page (fonction javascript write())
Les éléments du tableau sont eux même des tableaux à 2 éléments de la forme: [ 'nom de l'item de la liste' , 'URL du lien' ]
Chaque élément de la liste fabriquée est une balise OPTION avec comme
contenu le 1er élément et comme attribut VALUE le 2eme élément
La balise SELECT (le menu déroulant) à comme gestionnaire d'événement onchange() l'appel de la fonction self.location.href()
qui permet d'envoyer le navigateur à l'URL de l'élément choisit.
Il faudra donc que cette fonction self... soit capable de récupérer le
VALUE de l'élément sélectionné par l'utilisateur => révisez le
tutoriel sur les formulaires si nécessaire !
L'idée est, bien sûr, de pouvoir créer contextuellement
(en fonction de la position dans le site) des menus adaptés
aux besoins des utilisateurs.
1er menu déroulant: tableau passé en paramètre tab_recherche[ ] => permet d'accéder à différents moteurs de recherche
2eme menu déroulant: tableau passé en paramètre tab_iufm[ ] => permet d'accéder à différentes pages de Wikipédia
Pour le détail du fonctionnement de ce script : ouvrez
acces_rapide.js => le code est commenté.
I. Notions de base pour commencer avec JavaScript
A. Pour débuter avec JavaScript...
A. Pour débuter avec JavaScript...
B. Manipulation de contenu dans une page
II. Exemples d'utilisations combinant les techniques de base