Utiliser JavaScript: notions de base

Sommaire:
I. Différentes manières d'intégrer les scripts dans une page
II. Manipulation de contenu dans une page
III. Utilisation de fonctions
IV. Utilisation des méthodes du DOM pour accéder aux éléments de contenu ou de style

Cette page 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 son code source.

I. Différentes manières d'intégrer les scripts dans une page

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)

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>

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 cette page 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

Cet exemple 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 cette 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>';">

Exemple 4: lancement par un évènement utilisateur

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).

II. Manipulation de contenu dans une page

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.

Exemple 5: utilisation d'une fonction pour ajouter du code HTML

Utilisation d'une fonction utilisateur ajouter_html("html à ajouter" , "ID_balise_cible") permettant d'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> .

III. Utilisation de fonctions

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 suivant 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.

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

Cette balise DIV est le noeud ou sera placé le tableau (ID= "noeud_cible")

Dans cette partie, 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...).