Introduction au JavaScript

Par Serge P.

Date de publication : 27 novembre 2006

Dernire mise jour : 28 avril 2013

Cet article est une introduction au langage JavaScript. Il est destin ceux et celles qui
souhaitent dcouvrir ce langage qui permet de dynamiser les pages Web. Nanmoins, de
bonnes bases en HTML et CSS sont ncessaires pour aborder sereinement le JavaScript.

Introduction au JavaScript par Serge P.

I - Prsentation du langage JavaScript et des navigateurs........................................................................................ 3

I-A - JavaScript.......................................................................................................................................................3
I-B - Navigateurs.................................................................................................................................................... 3
I-C - Limites du JavaScript.....................................................................................................................................4
II - Syntaxe...................................................................................................................................................................4
II-A - Instructions - Conditions - Boucles............................................................................................................... 4
II-B - Scripts dans l'en-tte du fichier HTML......................................................................................................... 5
II-C - Scripts externes............................................................................................................................................ 6
II-D - Commentaires............................................................................................................................................... 6
II-E - Objets internes.............................................................................................................................................. 6
II-F - Accolades...................................................................................................................................................... 7
II-G - Variables....................................................................................................................................................... 8
III - Evnements...........................................................................................................................................................8
IV - Utiliser les objets du navigateur......................................................................................................................... 11
IV-A - L'objet window........................................................................................................................................... 11
IV-B - L'objet window.navigator............................................................................................................................11
IV-C - L'objet window.document...........................................................................................................................11
V - Manipuler la page - Les grandes lignes du DOM............................................................................................... 12
V-A - Reprsentation de la page......................................................................................................................... 12
V-A-1 - Proprits des nuds........................................................................................................................12
V-A-1-a - Proprits...................................................................................................................................12
V-A-1-b - Remarques sur innerHTML et nodeValue................................................................................. 13
V-A-2 - Exemples d'arbres DOM sous divers navigateurs.............................................................................13
V-A-2-a - Arborescence selon Firefox.......................................................................................................14
V-A-2-b - Arborescence selon Firefox v2..................................................................................................14
V-A-2-c - Arborescence selon Internet Explorer v5.................................................................................. 15
V-B - Cration, insertion, suppression d'un nud...............................................................................................15
V-B-1 - Mthodes JavaScript pour la gestion des nuds............................................................................. 15
V-B-2 - Exemple..............................................................................................................................................16
V-B-2-a - Arborescence du document...................................................................................................... 16
V-B-2-b - Cration des lments.............................................................................................................. 16
V-B-2-c - Insertion des objets dans le document..................................................................................... 18
V-C - Ajax............................................................................................................................................................. 19
VI - Conclusion - Liens divers - Remerciements...................................................................................................... 19
VI-A - Conclusion................................................................................................................................................. 19
VI-B - Liens...........................................................................................................................................................19
VI-C - Remerciements..........................................................................................................................................19

-2Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/

Introduction au JavaScript par Serge P.

I - Prsentation du langage JavaScript et des navigateurs

Pour aborder JavaScript, il faut dj connatre le langage HTML ainsi que les feuilles de
styles (CSS).

I-A - JavaScript
JavaScript est un langage interprt par le navigateur. Le JavaScript est un langage client , c'est--dire excut
chez l'utilisateur lorsque la page Web est charge. Il a pour but de dynamiser les sites Internet.
JavaScript est ne pas confondre avec Java !

Qu'est-ce que le Javascript ?

A quoi sert le Javascript ?
JAVA ou Javascript ?
Le JavaScript est un langage sensible la casse ( case sensitive ).
JavaScript est un langage objet : chaque objet possde des mthodes (ou fonctions), des proprits et . des objets.
Dans une page Web, l'objet le plus lev dans la hirarchie est la fentre du navigateur : window. Cet objet window
contient entre autres l'objet document qui lui mme contient tous les objets contenus dans la page Web (paragraphes,
formulaires, etc). En plus de ces objets, il existe des objets crs par l'utilisateur.
Les mthodes sont des fonctions qui permettent d'agir sur certaines proprits de l'objet, les proprits contiennent
les paramtres d'un objet.
Exemple d'un objet voiture : nous allons lui attribuer

des proprits : la couleur, la marque, le numro d'immatriculation ;

des mthodes : tourner(), avancer(), reculer(), changer la couleur() ;
des objets : les phares, les pneus.

Pour rsumer une mthode engendre une action, un verbe qualifie cette action, une proprit est gnralement
qualifie par un nom.
Dans l'exemple de la voiture une mthode permet de changer la couleur de la voiture, par contre aucune mthode
ne nous autorise changer la marque de cette voiture (ce qui entranerait une modification des autres proprits et
ventuellement l'apparition ou la disparition de mthodes).
Il en sera ainsi galement avec nos objets JavaScript : nous pourrons accder voire modifier les proprits (couleur
du texte, style de la fonte) des objets grce aux mthodes.

I-B - Navigateurs
Voici une liste non exhaustive des navigateurs :
Linux / UNIX
Firefox, Netscape, Mozilla,
Konqueror, Lynx, Opra

Windows
Internet Explorer, Firefox,
Netscape, Opra, Chrome

MacOS
Internet Explorer, Konqueror,
Opra, Safari

Lynx est un navigateur qui n'interprte pas le JavaScript.

-3Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/

Introduction au JavaScript par Serge P.

Tout irait pour le mieux si ces navigateurs utilisaient pour un mme objet, les mmes proprits et les mmes
mthodes pour les dfinir. Ce qui est loin d'tre le cas. Par ailleurs, Internet Explorer interprte galement le JScript,
un JavaScript cr par Microsoft (ActiveX). Nous n'aborderons pas ce langage spcifique IE.

I-C - Limites du JavaScript

Le JavaScript est difficilement compatible entre les diffrents navigateurs. Il faut toujours se dcider jusqu' quel
point a doit tre compatible.
Tout le monde n'a pas JavaScript : Il faut toujours que la page contienne l'ensemble de l'information, accessible mme
sans JavaScript. JavaScript est l pour apporter un plus (ergonomie, dynamisme), mais on doit pouvoir s'en passer.
JavaScript n'est pas scuris. Les programmes JS sont excuts sur le client, on n'est jamais sr de leurs rsultats,
il ne faut donc jamais faire confiance une donne provenant du client.

II - Syntaxe
II-A - Instructions - Conditions - Boucles
Il est fortement recommand de terminer l'ensemble des instructions JavaScript par un point virgule (mme si, en
effet, ce n'est pas toujours ncessaire).
Les instructions ci-dessous ne se terminent pas par un point virgule :
Les dfinitions de fonctions
function maFonction()
{
...............
}

Les conditions
if (var1==var2)
{
...............
}
else
{
...............
}

Syntaxe des conditions :

galit : == (cette syntaxe est galement utilise pour comparer deux chanes de caractres)
diffrent de : != (mme remarque que ci-dessus)
infrieur ou gal : =<
suprieur ou gal : >=
infrieur : <
suprieur : >
et logique : &&
ou logique : ||
identique : ===
non identique : !==
et bit bit : &
ou bit bit : |

-4Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/

Introduction au JavaScript par Serge P.

Les boucles for

for (i=0; i<5; i++)
{
...............
}

Les boucles while

while (a<b)
{
...............
}
do
{

...............
}while (a<b)

II-B - Scripts dans l'en-tte du fichier HTML

Tout script est encadr des balises <script> </script>, on prcise galement le type MIME grce l'attribut type :
Script dans l'en-tte du fichier HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titre</title>
<script type="text/javascript">
<!-//-->
</script>
</head>
<body>
</body>
</html>

Les commentaires restent prsents pour une raison historique : les premiers navigateurs n'interprtant pas le
JavaScript et pour viter un affichage du texte dans la page web, les scripts taient encadrs de commentaires.
De plus, omettre les commentaires amnent les validateurs tenter d'interprter le code JavaScript comme du HTML,
ce qui implique des erreurs de validation non justifies.
Ne pas confondre les commentaires HTML et les commentaires JavaScript.

Commentaire HTML
<!--

Ceci est un commentaire HTML -->

Commentaire JavaScript
// Ceci est un commentaire JavaVascript sur une ligne
/* Ceci est un commentaire JavaScript
sur plusieurs lignes */

-5Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/

Introduction au JavaScript par Serge P.

Ces balises script sont gnralement insres dans le head de la page, ou entre les balises body. Dans ce dernier
cas les scripts sont excuts au fur et mesure du chargement de la page.
Il est possible d'insrer du code JavaScript dans les balises HTML. Cependant, il faut que le code insr soif bref
pour des questions de lisibilit (dans le cas des vnements).

II-C - Scripts externes

On peut enregistrer le script dans un fichier indpendant de la page Web. Dans ce cas, on prcise dans le head le
lien vers ce fichier. L'avantage est que l'on peut ainsi rutiliser le script pour une autre page.
Lien vers un script externe
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
</title>
<script type="text/javascript" src="MonFichier.js"></script>
</head>
<body>
</body>
</html>

II-D - Commentaires
Il existe les commentaires multilignes : ils commencent par /* et se terminent par */
Commentaire JavaScript
/* un commentaire
sur plusieurs lignes */

et des commentaires sur une ligne : ils dbutent par //

Commentaire Javascript
// un commentaire une ligne

Il semblerait que la prsence des accents et des apostrophes dans ces commentaires
contribuerait une mauvaise interprtation des scripts. Cette source d'erreurs peut-tre
leve en prcisant le charset du fichier JavaScript.
Les DOCTYPE en HTML
De plus, l'utilisation de commentaires multilignes peut perturber l'interprtation dans le
cas d'utilisation d'expressions rgulires du fait de la prsence possible des caractres /
* ou */ dans celles-ci.

II-E - Objets internes

Les objets internes JavaScript commencent par une majuscule : String, Math, Array, Boolean, Date, Number, Function
( ne pas confondre avec le mot-clef function), RegExp, etc
Les mthodes ainsi que les proprits d'un objet commencent par une minuscule. Toutes les mthodes internes
JavaScript sont sensibles la casse ( case sensitive ).

exemple de mthodes : toLowerCase() ; getElementById() ; charAt() ; fromCharCode() ; etc.

exemple de proprits : id ; type ; innerHTML ; tagName ; style ; etc.

-6Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/

Introduction au JavaScript par Serge P.

L'accs une mthode ou une proprit d'un objet se fait en plaant un point entre le nom de l'objet et la proprit
ou la mthode.
var monObjet = document.getElementById("idObjet");
monObjet.style.display = "none";

ou
document.getElementById("idObjet").style.display = "none";

Le langage JavaScript est un langage case sensitive : les variables, les

mthodes, les attributs, les mots-clefs, etc. ont une syntaxe trs prcise. Le nonrespect de cette rgle peu conduire une mauvaise excution des scripts.

II-F - Accolades
Plusieurs coles : les accolades ouvrantes sont places sur la mme ligne que la condition ou la boucle ; ou un retour
la ligne est effectu pour l'accolade ouvrante.
Accolades ouvrantes en fin de ligne
function maFonction() {
if (test1) {
.................
.................
}
else{
.................
.................
}

for (i=0; i<n; i++){

.................
.................
}

Accolades ouvrantes aprs un retour la ligne

function maFonction()
{
if (test1)
{
.................
.................
}
else
{
.................
.................
}

for (i=0; i<n; i++)

{
.................
.................
}

On prconisera la seconde syntaxe la premire dans la mesure o elle offre une meilleure lisibilit dans le code.

-7Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/

Introduction au JavaScript par Serge P.

II-G - Variables
En JavaScript les variables ne sont pas types. Il faut nanmoins les dclarer grce au mot clef var. Une variable
peut, au cours du programme, tre tour tour un entier, une chane de caractres, ou un boolen. Mme si cette
possibilit de programmation est offerte, il ne faut surtout pas s'y laisser tenter. Une variable doit garder le mme
type du dbut la fin. Et donc ne pas hsiter crer autant de variables que ncessaire.
A ne pas faire
var
i =
i =
i =

i;
//dclaration
2;
//entier
"bonjour";
//chane de caractres
true;
//boolen

Ce qu'il faut faire

var i, chaine, bool;
i = 2;
chaine = "bonjour";
bool = true;

//Dclaration de 3 variables

Bannir des noms de variables :

du genre : truc, machin, toto, bidule ;

kilomtriques : ceciEstLeNomDeMaJolieVariable ;
avec des accents : maChaneDeCaractres.

Les variables ne doivent pas tre des mots-clefs JavaScript : var, form, int, document, etc..

III - Evnements
Tous les vnements commencent par on : onclick, onload, onmouseout, onmouseover. Ils peuvent tre insrs
dans les balises HTML du document. Il est vivement conseill de les crire en minuscules.
Syntaxe des vnements
<body onload="maFonction()">
<input type="button" onclick="maFonction()">

PseudoURL :
Les pseudos-URL sont insres dans les balises de lien avec la syntaxe suivante :
Pseudo-URL
<a href="javascript:alert('Coucou !!')">Mon Lien</a>

et ce pour faire la distinction avec un lien vers une autre page :

URL
<a href="maPage.htm">Mon Lien</a>

Voir ce sujet
Exemples d'vnements :
Testez sur srie d'vnements sur des objets de votre navigateur

-8Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/

Introduction au JavaScript par Serge P.

Evnement
onload
onunload
onbeforeunload
onclick
ondblclick
onmousedown
onmouseup
onmousemove
onkeydown
onkeyup
onkeypressed
onblur

onfocus

onchange
onsubmit
onreset
onselect

Survient
Commentaires
aprs le chargement de la
page
lors de la fermeture de la
page
juste avant la fermeture de la
fentre
lors d'un clic
l'vnement survient lors d'un
clic sur le bouton gauche
lors d'un double-clic
double-clic sur le bouton
gauche
quand on enfonce le bouton cet vnement survient sur
de la souris
un clic gauche ou un clic droit
quand on relche le bouton cet vnement survient sur
de la souris
un clic gauche ou un clic droit
lorsque la souris se dplace
dans un objet du document
quand on enfonce une
touche du clavier
quand on relche la touche
quand on enfonce une
Firefox et IE5 sous
touche du clavier
Windows : quivalent
onkeydown()
quand l'lment perd le focus IE5 sous Windows :
l'vnement survient lorsque
l'lment perd le focus.
Firefox sous Windows :
l'vnement survient juste
avant que l'lment ne perde
le focus.
quand l'lment a le focus
Cas de l'input de type file
<input type="file" />.
IE5 sous Windows :
l'vnement se produit lors
du clic dans la bote de texte
ou aprs avoir cliqu sur
Ok ou Annuler de la
bote de dialogue Choisir
fichier . Pas d'vnement
lors du clic sur le bouton
Parcourir .
Firefox sous Windows :
l'vnement se produit
uniquement lors du clic sur le
bouton Parcourir .
quand l'lment perd le focus
et que son contenu a chang
juste avant l'envoi d'un
formulaire
lors de la rinitialisation du
formulaire
quand le contenu d'un
Firefox sous Windows :
lment est slectionn
onselect n'est valide que pour
les input de type texte (text,
password, file et textarea).

-9Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/

Introduction au JavaScript par Serge P.

Le nombre d'appels cet

vnement va dpendre de
la manire dont est faite la
slection (clavier, doubleclic) et du navigateur.
On ne peut pas donc se
fier cette indication pour
dterminer le nombre de
caractres ou de mots
slectionns.
lors de l'utilisation de la barre Firefox sous Windows :
de dfilement
l'vnement onscroll ne
fonctionne pas sur les balises
textarea.
avant l'impression (aprs le Cet vnement ne fonctionne
clic sur le bouton Ok de la
que sous Internet Explorer.
fentre d'impression)
aprs l'impression
Cet vnement ne fonctionne
que sous Internet Explorer.
lors du copier vers le presse- Cet vnement survient
papier
lors d'un "CTRL+C" ou
d'un copier via le menu
contextuel.
lors du coller depuis le
Cet vnement survient lors
presse-papier
d'un "CTRL+V" ou d'un coller
via le menu contextuel.

onscroll

onbeforeprint
onafterprint
oncopy

onpaste

Il arrive souvent que l'un des arguments de la fonction appele lors d'un vnement soit l'objet event (gestionnaire
des vnements). Le cas le plus classique est lorsque l'on veut connatre la position de la souris.
Avec Internet Explorer, l'objet event est contenu dans l'objet window : window.event. Avec Firefox ou Netscape, l'objet
event est gnr lors d'un vnement (onclick par exemple) la seule condition que celui-ci soit inclus dans la balise
HTML. Par consquent, pour rcuprer l'vnement produit, il faut que l'objet event soit un paramtre de la fonction.
Rcupration de l'vnement produit dans la page Web
<html>
<head>
<title></title>
<script type="text/javascript">
<!-function position(ev)
{
var Xfen, Xdoc, Yfen, Ydoc, el;
Xfen = ev.clientX;
Xdoc = Xfen + document.body.scrollLeft;
Yfen = ev.clientY;
Ydoc = Yfen + document.body.scrollTop;

el = document.getElementById("idMouse");
el.innerHTML = " Xdoc= "+Xdoc+" px ; Ydoc= "+Ydoc+" px<br>";
el.innerHTML+= " Xfen= "+Xfen+" px ; Yfen= "+Yfen+" px";

//-->
</script>
</head>
<body onmousemove="position(event)">
<div id="idMouse">
</div>
- 10 Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/

Introduction au JavaScript par Serge P.

Rcupration de l'vnement produit dans la page Web

</body>
</html>

Cependant, (et c'est un gros avantage) ce code fonctionne galement sous Internet Explorer. Il n'est donc
pas ncessaire d'ajouter des tests pour savoir s'il faut utiliser le paramtre ev de la fonction ou le gestionnaire
d'vnements window.event que seul IE comprend.

IV - Utiliser les objets du navigateur

Script d'affichage des proprits des objets du document
Ce script affiche les proprits (et la valeur de ces proprits) d'un lment choisi dans une liste. Il permet, entre
autres, pour un mme lment de mettre en vidence les diffrentes proprits utilises par les navigateurs (pour
cela il doit tre excut sur diffrents navigateurs).

IV-A - L'objet window

Cet objet reprsente le navigateur contenant l'objet document. Il est cr lors de l'ouverture du navigateur et contient
toutes les proprits et les mthodes de gestion de la fentre. Ses proprits et ses mthodes peuvent tre appeles
sans devoir prciser l'objet window.
Une mthode de l'objet window
window.alert ("Coucou");

L'objet window est sous-entendu

alert("Coucou");

IV-B - L'objet window.navigator

Cet objet contient les proprits du navigateur (nom, version, langue, etc). On utilise de moins en moins souvent
cet objet pour identifier la navigateur de l'utilisateur car certaines proprits peuvent tre modifies (cas d'Opera).
On utilisera plutt certaines proprits de l'objet document pour raliser ces tests.

IV-C - L'objet window.document

L'objet document regroupe toutes les mthodes de gestion de la page Web. Ses fonctions permettent de cibler un
objet (un paragraphe par exemple) pour modifier ses attributs.
Pour modifier les attributs d'un lment (paragraphe, lien, etc), celui-ci doit tre au pralable identifi par un
identifiant unique (attribut id). L'objet est ensuite cibl grce la mthode getElementById() contenue dans l'objet
document. Si l'lment possdant cet id n'existe pas la mthode renvoie null.
Utilisation des objets contenu dans le document
//objet contient toutes les proprits de idElement
var monElement = document.getElementById("idElement") ;
//pour modifier la taille de la police
monElement.style.fontSize = "12px";
//pour modifier la police
monElement.style.fontFamily = "Arial";

- 11 Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/

Introduction au JavaScript par Serge P.

Utilisation des objets contenu dans le document

//pour modifier le contenu du paragraphe (balises div, span, p et body uniquement).

monElement.innerHTML = "Salut tout le monde !!";

Les attributs dfinis dans les feuilles de styles (CSS) peuvent tre modifis par l'objet style
de l'lment. Cependant, cela ne modifie pas la valeur de la feuille de style qui reste la
valeur par dfaut.

V - Manipuler la page - Les grandes lignes du DOM

V-A - Reprsentation de la page
Quelques liens :
Utilisation du DOM
Document du W3C
Manipulation des nuds du document (selfhtml.org)

V-A-1 - Proprits des nuds

V-A-1-a - Proprits
Le DOM (Document Object Model) est un modle standardis par le W3C (World Wide Web Consortium). Ce modle
propose de reprsenter un document sous la forme d'un arbre. Toutes les balises HTML sont donc des nuds de
l'arbre et les feuilles sont soit des balises sans contenu, soit le texte de la page HTML.
Poprits
childNodes
firstChild
lastChild
nextSibling

Commentaires
nuds enfants
premier nud enfant
dernier nud enfant
prochain nud d'un type (nud de mme
niveau)
nud parent
nud prcdent d'un type (nud de mme
niveau)
nom du nud
valeur / contenu du nud
type du nud (cf. ci-dessous)

parentNode
previousSibling
nodeName
nodeValue
nodeType
Types de nuds :
1 - Nud lment
2 - Nud attribut
3 - Nud texte
4 - Nud pour CDATA
5 - Nud pour rfrence d'entit
6 - Nud pour entit

7 - Nud pour instruction de traitement

8 - Nud pour commentaire
9 - Nud document
10 - Nud type de document
11 - Nud de fragment de document
12 - Nud pour notation

Document W3C sur les nuds

Plus d'informations sur le type des nuds (selfhtml.org)

- 12 Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/

Introduction au JavaScript par Serge P.

V-A-1-b - Remarques sur innerHTML et nodeValue

innerHTML est une instruction qui permet de modifier le contenu d'une balise ou d'insrer un objet dans la page.
Insertion d'une image en utilisant innerHTML
//Ciblage du paragraphe
var MonParagraphe = document.getElementById("idPg");
//Modification de son contenu
MonParagraphe.innerHTML = "<img src='imageInseree.gif' /> Mon nouveau texte";

Une image sera insre dans le paragraphe. Nanmoins, cette mthode prsente quelques inconvnients lorsqu'il
s'agit de modifier le contenu d'un formulaire (balise form). Lors de l'envoi du formulaire, les valeurs des objets crs
via innerHTML ne sont pas toujours transmises au serveur. C'est pour cette raison qu'il est prfrable d'utiliser les
mthodes grant les nuds.
Insertion d'une image en utilisant nodeValue
//Ciblage du paragraphe
var e = document.getElementById("idPg");
//Cration de l'image
var i = document.createElement("img");
//Source de l'image
i.src = "imageInseree.gif";
//Modifiaction du texte (noeud #text)
e.firstChild.nodeValue ="mon nouveau texte";
//Ajout de l'image avant le texte
e.insertBefore(i,e.firstChild);

V-A-2 - Exemples d'arbres DOM sous divers navigateurs

Soit une page Web dfinie par le code ci-dessous.
Reprsentation de la page Web
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>DOM</title>
</head>
<body>
<div id="idP1" style="border:1px solid #AAAAAA">
<h4>DIV 1</h4>
bla bla bla bla bla bla bla bla bla bla bla
<span>bla bla bla bla bla bla bla</span>
bla bla bla bla bla bla bla bla bla
<a href="">bla bla bla bla bla bla bla bla bla</a>
</div>
<div id="idP2">
<h4>DIV 2</h4>
bla bla bla bla bla bla bla bla bla
</div>
</body>
</html>

- 13 Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/

Introduction au JavaScript par Serge P.

V-A-2-a - Arborescence selon Firefox

La page ci-dessus est reprsente sous Firefox selon ce schma :
Arbre DOM de Firefox v1
|-- HTML
|-- HEAD
|-- TITLE
|-- #text
|-- #text (0)
|-- BODY
|-- #text (1)
|-- DIV id = "idP1"
|-- H4
|-- #text
|-- #text (2)
|-- SPAN
|-- #text
|-- A
|-- #text (3)
|-- #text (4)
|-- DIV id = "idP2"
|-- H4
|-- #text
|-- #text (5)
|-- #text (6)

Donc d'aprs cet arbre DOM, nous avons :

childNodes
firstChild
lastChild
nextSibling
parentNode
previousSibling

BODY
#text (1) ; DIV ; #text (4) ;
DIV ; #text (6)
#text (1)
#text (6)
inexistant
HTML
#text (0)

DIV (idP1)
H4 ; #text (2) ;
SPAN ; #text ; A ;
#text (3)
H4
#text (3)
#text (4)
BODY
#text (1)

DIV (idP2)
H4 ; #text (5)
H4
#text (5)
#text (6)
BODY
#text (4)

V-A-2-b - Arborescence selon Firefox v2

Arbre DOM de Firefox v2
|-- HTML
|-- HEAD
|-- TITLE
|-- #text (0)
|-- BODY
|-- #text (1)
|-- DIV id = "idP1"
|-- #text (2)
|-- H4
|-- #text
|-- #text (3)
|-- SPAN
|-- #text
|-- #text (4)
|-- A
|-- #text
|-- #text (5)
|-- #text (6)
|-- DIV id = "idP2"
|-- #text (7)
- 14 Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/

Introduction au JavaScript par Serge P.

Arbre DOM de Firefox v2

|-- H4
|-- #text
|-- #text (8)
|-- #text (9)

D'aprs cet arbre :

BODY
childNodes
#text (1) ; DIV (idP1) ;
#text (6) ; DIV (idP2) ;
#text (9)
firstChild
#text (1)
lastChild
#text (9)
nextSibling
inexistant
parentNode
HTML
previousSibling HEAD

DIV (idP1)
#text (2) ; H4 ; #text (3) ;
SPAN ; #text (4) ; A ;
#text (5)
#text (2)
#text (5)
#text (6)
BODY
#text (1)

DIV (idP2)
#text (7) ; H4 ;
#text (8)
#text (7)
#text (8)
#text (9)
BODY
#text (6)

V-A-2-c - Arborescence selon Internet Explorer v5

Internet Explorer supprime les nuds vides au moment de la cration de la page.
Arbre DOM d'Internet Explorer
|-- HTML
|-- HEAD
|-- TITLE
|-- BODY
|-- DIV id =
|-- H4
|-- #text
|-- SPAN
|-- #text
|-- A
|-- #text
|-- DIV id =
|-- H4
|-- #text

"idP1"
(1)
(2)
(3)
"idP2"
(4)

Donc d'aprs cet arbre, nous avons :

childNodes
firstChild
lastChild
nextSibling
parentNode
previousSibling

BODY
DIV ; DIV
DIV (idP1)
DIV (idP2)
inexistant
HTML
HEAD

DIV (idP1)
H4 ; #text (1) ; SPAN ;
#text (2) ; A ; #text (3)
H4
#text (3)
DIV (idP2)
BODY
inexistant

DIV (idP2)
H4 ; #text (4)
H4
#text (4)
inexistant
BODY
DIV (idP1)

V-B - Cration, insertion, suppression d'un nud

V-B-1 - Mthodes JavaScript pour la gestion des nuds
Quelques fonctions permettant de grer les nuds du document.

- 15 Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/

Introduction au JavaScript par Serge P.

Mthodes
createElement()

Commentaires
Mthode pour crer un nouvel lment HTML dans le document (div, p,
span, a, form, input, etc).
createTextNode() Mthode pour crer un nud texte.
appendChild()
Pour ajouter l'lment cr dans le document. L'lment sera ajout
comme tant le dernier nud enfant d'un lment parent.
insertBefore()
Pour ajouter l'lment cr avant un autre nud.
removeChild()
Pour supprimer un nud.

V-B-2 - Exemple
Lien vers le script complet
Soit un formulaire dans lequel on trouve un groupe d'lments :

trois textes : Votre texte ; Vos options ; La suite

deux botes de textes ;
une liste d'options.

ET un bouton qui permet d'ajouter ce formulaire un nouveau groupe d'lments identique au prcdent. Ce nouveau
groupe sera insr avant le bouton.
Aspect final du formulaire :

Aspect final du formulaire

V-B-2-a - Arborescence du document

Arborescence du document HTML
|-- BODY
|-- FORM
id = "idFormulaire"
|-- #text :
Votre texte :
|-- INPUT
value = ""
type = "text"
|-- #text :
Vos options :
|-- SELECT
size = "1"
|-- OPTION
value = ""
text="Votre choix"
|-- OPTION
value = "valeur1"
text="Option 1"
|-- OPTION
value = "valeur2"
text="Option 2"
|-- OPTION
value = "valeur3"
text="Option 3"
|-- OPTION
value = "valeur4"
text="Option 4"
|-- #text :
La suite :
|-- INPUT
value = ""
type = "text"
|-- BR
|-- BR
|-- INPUT
value = "Ajouter un lment"
type = "button"
onclick ="addLigne()"
|-- BR

id = "idBouton"

V-B-2-b - Cration des lments

Dans un premier temps nous allons crer tous les lments qui seront dans la page :

- 16 Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/

Introduction au JavaScript par Serge P.

Cration de deux input de type texte.

Nous utilisons la fonction createElement().
Syntaxe de la mthode createElement()
document.createElement("element HTML crer");

Cration des input de type text

var elInput = new Array();
for (i=0;i<2;i++)
{
elInput[i] = document.createElement("input");
elInput[i].type = "text";
}

Cration des trois textNode Votre texte ; Vos options ; La suite : nous utilisons la fonction
createTextNode().
Syntaxe de la mthode createTextNode()
document.createTextNode("Texte du nud");

Cration des textNode

// Tableau dans lequel seront stocks les lments
var elTxt = new Array();
//Textes des lments
var tabTxt = new Array("Votre texte : ","Vos options : ","La suite : ");
for (i=0; i<tabTxt.length; i++)
{
elTxt[i] = document.createTextNode(tabTxt[i]);
}

Cration de la liste droulante : le code ci-dessous ne permet de crer que la balise select. Nous verrons plus loin
comment crer et ajouter les options la liste.
Cration de la liste droulante
//cration de l'lment select
var elSelect = document.createElement("select");
//nombre d'lments visibles
elSelect.size = "1";

Cration des options de la liste droulante.

Les options sont des objets de la liste. Pour les crer nous n'utilisons pas la mthode createElement(). Nous allons
crer ces objets en utilisant la syntaxe suivante :
Crer une option
new Option("Text","Value", "defaultSelected true / false", "selected true / false");

Les objets sont crs mais ne sont pas ajouts la liste pour autant.

Cration des options d'une liste

//Tableau contenant les options de la liste
var elOption = new Array(
- 17 Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/

Introduction au JavaScript par Serge P.

Cration des options d'une liste

new
new
new
new
new

Option("Votre choix", "", false, false),

Option("Option 1", "valeur1", false, false),
Option("Option 2", "valeur2", false, false),
Option("Option 3", "valeur3", false, false),
Option("Option 4", "valeur4", false, false)
);

Cration d'une ligne pour sparer chaque groupe. Une feuille de style s'appliquera sur cette ligne.
Cration d'une ligne
var ligne = document.createElement("hr");
ligne.className= "styleLigne";

V-B-2-c - Insertion des objets dans le document

Maintenant nous allons ajouter ces lments au document. Ces lments seront ajouts dans le formulaire juste audessus du bouton "Ajouter un lment". Nous allons avoir besoin de l'objet formulaire (lment parent) et de l'objet
bouton (rfrence).
La fonction utilise est insertBefore(e1, e2) avec :

e1 : le nouvel lment enfant insrer ;

e2 : un lment enfant avant lequel le nouvel lment enfant doit tre insr.
Ajout des lments dans le document
//Appel des objets formulaire et bouton
var elForm = document.getElementById("idFormulaire");
var objBouton = document.getElementById("idBouton");
//Ajout de la ligne de sparation
elForm.insertBefore(ligne, objBouton);
elForm.insertBefore(elTxt[0], objBouton);
elForm.insertBefore(elInput[0], objBouton);

//1er texte
//1er INPUT

elForm.insertBefore(elTxt[1], objBouton);

//2me texte

elForm.insertBefore(elSelect, objBouton);

//Ajout du select

//Ajout dans le select des options (1)

for (i=0;i<elOption.length;i++)
{
elSelect.options.add(elOption[i]);
}
elForm.insertBefore(elTxt[2], objBouton);
elForm.insertBefore(elInput[1], objBouton);

//3me texte
//2me INPUT

//Saut de ligne 1
elForm.insertBefore(document.createElement("br"), objBouton);
//Saut de ligne 2
elForm.insertBefore(document.createElement("br"), objBouton);

(1) Internet Explorer : il faut insrer le select dans le document avant d'ajouter les options.

- 18 Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/

Introduction au JavaScript par Serge P.

V-C - Ajax
AJAX est une mthode de programmation des pages Web qui s'appuie sur des scripts JavaScript en utilisant l'objet
xmlHttpRequest (aussi appel XHR). Celui-ci permet de raliser des requtes vers le serveur de manire asynchrone
et ainsi de mettre jour tout ou partie du contenu d'une page Web.
Qu'est-ce qu'Ajax ?
La rubrique Ajax
Les ressources Ajax sur developpez.com

VI - Conclusion - Liens divers - Remerciements

VI-A - Conclusion
Le JavaScript facilite la navigation au sein d'un site Web. Au fil du temps, des amliorations et des fonctionnalits
sont apportes (Ajax, par exemple). Cependant, compte-tenu des diffrences d'interprtation d'un navigateur un
autre, il est conseill de tester chaque script sur diffrents navigateurs voire sous diffrents sytmes d'exploitation
pour assurer une portabilit du code.

VI-B - Liens
Les liens developpez.com

La section JavaScript de www.developpez.com

Les codes sources JavaScript
La FAQ JavaScript

Autres liens

Le site de l'ECMA
Le site du World Web Consortium (W3C)

VI-C - Remerciements
Merci DenisC et Yogui pour la relecture et leurs contributions dans la rdaction de cet article.
Merci Bisnrs pour sa relecture.

- 19 Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les
droits d'auteur. Copyright 2013 Auteur. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation
expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.

http://sergep.developpez.com/tutoriels/javascript/introduction/