Support JS LPTI119

JavaScript/DOM
LPTI 1
SOMMAIRE
I. Notions de base du langage JavaScript
II. Les objets JavaScript
III. La programmation événementielle
IV. Le DOM
JavaScript/DOM
I. Notions de base du langage

JavaScript
Notions de base du langage JavaScript
● Qu’est ce que JavaScript?
● Moteurs de rendu et de script
● Comment intégrer JavaScript?
● Entrée et sortie de données
● Les variables
● Les opérateurs
● Structures conditionnelles
● Structures itératives
● Les fonctions
Qu'est-ce que JavaScript?
● Javascript permet de rendre dynamique des pages
web et de développer de véritables applications
fonctionnant exclusivement dans le navigateur Web.
● JavaScript, d'origine Netscape (LiveScript) est un
langage de programmation orienté prototype.
● Il a été créé en 1995 par l'américain Brendan Eich,
développeur chez Netscape.
● Il a été standardisé en novembre 1996 par l'ECMA et
porte depuis juin 1997 le nom ECMAScript
Qu'est-ce que JavaScript?
● Ce langage ne s'utilise que incorporé à un document
HTML.
● L'exécution du script (code) s'efectue sur le poste
client.
● JavaScript est un langage de script côté client.
● Bien entendu, le serveur comme le poste client doit
posséder un module JavaScript pour que la
communication et la compréhension soient
possibles.
Moteurs de rendu et de script
● Moteur de rendu du navigateur Web
● composant logiciel responsable de l'afchage des éléments
HTML d 'une page Web
● Moteur de script (Javascript)
● programme logiciel qui interprète et exécute du code en
langage JavaScript.
● Les moteurs JavaScript sont généralement intégrés aux
navigateurs Web.
Moteurs de rendu et de script
Comment intégrer JavaScript?
● il existe trois façons d'introduire du code JavaScript dans

HTML
● Par bloc à l’aide de la balise <script>
<script type="text/javascript">
code javascript…
</script>
● Directement dans une balise HTML (techniques DHTML)
● En faisant appel à un fichier externe (.js)
<script type="text/javascript" src="monfichier.js"></script>
Par bloc à l’aide de la balise <script>
<script type=”text/javascript”>
code JavaScript…
</script>
<HTML>
<HEAD>
<TITLE>Exemple 1</TITLE>
</HEAD>
<BODY>
Voici un premier exemple JavaScript
<P>
<SCRIPT type="text/javascript">
document.write(“<h2 style=‘text-align:center;color:blue’>Bonjour! </h2>");
</SCRIPT>
</P>
</BODY>
</HTML>
Dans une balise HTML (techniques DHTML)‫‏‬
<body bgcolor="#00FF00">
<form>
<p align=“center”>
<input type="button" value="cliquez ici" onclick="alert('coucou');">
</p>
</form>
</body>
Un javascript peut être testé en ligne sur : http://jsfiddle.net/

En faisant appel à un fichier externe (.js)‫‏‬
<SCRIPT LANGUAGE="javascript" SRC="monfichier.js"></SCRIPT>
<html>
<head>
<title>Méthode 3</title>
<script type=”text/javascript” src="code1.js"></script>
</head>
<body bgcolor="#00FF00">
<p align="center"><font face="Comic Sans MS" size="4"><strong>Exemple
3</strong></font></p>
<p><font face="Comic Sans MS">Voici ce que fait le code JavaScript :</font></p>
<p><font color="#FF0000" size="6"> <script src=“codes/code2.js"></script> </font></p>
</body>
Entrée et sortie de données
● 3 types de boites de messages peuvent être afchées en utilisant
Javascript : Alerte, Confirmation et Invite
● Méthode alert()
– sert à afcher à l’utilisateur des informations simples de type texte.
Une fois que ce dernier a lu le message, il doit cliquer sur OK pour
faire disparaître la boîte
● Méthode confirm()
– permet à l’utilisateur de choisir entre les boutons OK et Annuler.
● Méthode prompt()
– La méthode prompt() permet à l’utilisateur de taper son propre
message en réponse à la question posée
● La méthode document.write() permet d ’écrire du code HTML dans la
page WEB
Entrée et sortie de données
<html>
<head>
<title> une page simple </title>
</head>
<body>
<script language='javascript'>
document.write(“Bonjour!”);
alert(‘Salut!');
prompt('quel est votre nom ?','Indiquer votre nom ici');
confirm('quel bouton allez-vous choisir ?');
</script>
</body>
</html>
Les variables
● Un programme JavaScript est composé des éléments
suivants :
● déclaration de variables (optionnelle)
● fonctions
● blocs d'instructions
● Chaque instruction se termine par un ";"
● Javascript fait la distinction entre les majuscule et les
minuscule. On dit qu’il respecte la casse
● Les commentaires
● // pour un commentaire sur une ligne
● /* pour un commentaire sur plusieurs lignes */
Les variables
● Il existe plusieurs types de variables:
● Entiers
● Flottants (nombres à virgule)
● Chaînes de caractères
● Booléens (true ou false)
● JavaScript inclut aussi deux types de données spéciaux :
● Null : possède une seule valeur, null, qui signifie l’absence de
données dans une variable
● Undefined : possède une seule valeur, undifined. Une variable dont
le contenu n’est pas clair car elle n’a jamais stocké de valeur, pas
même null est dite non définie (undifined).
Les variables
● Un nom de variable doit commencer par une lettre

(alphabet ASCII) ou le signe_
● Et se composer de lettres, de chifres et des
caractères _ et $ (à l'exclusion de l'espace).
● La déclaration d’une variable peut se faire
(fortement recommander) avec le mot clé var ou let
● Les constantes sont généralement écrite en lettres
capitales et déclarées avec le mot clé var ou const
Les variables
● Exemple:
var texte = "Mon chiffre préféré est le ";
var variable = 7;
document.write(texte + variable);
var DEVISE=655.957
alert("Un euro vaut "+DEVISE+" FCFA") ;
Les variables
Caractères spéciaux
● \n : nouvelle ligne
● \f : saut de page
● \r : retour chariot
● \t : tabulation horizontale
● \b : retour arrière
Les variables
● Les tableaux
● Une variable tableau est une variable pouvant contenir
plusieurs valeurs
● La déclaration d’un tableau se fait comme suit:
var montableau=new Array(nb);

//où nb=nbre d’éléménts du tableau.
Les variables
● Exemples:
var ville=new Array(3)
{
ville[0]="Dakar";
ville[1]="Thiès";
ville[2]="Ziguinchor";
}
var jour=new Array("Lundi", " Mardi", " Mercredi",

" Jeudi", " Vendredi", "Samedi", "Dimanche");
Les opérateurs
● opérateur d'afectation ( = )
● opérateurs arithmétiques
– + - * / les 4 opérations
– % modulo (reste de la division)‫‏‬
– ++ incrémentation
– -- décrémentation
● opérateur de concaténation ( + ).
Les opérateurs
● Exemples
opérateurs Exemple Résultat
= x=6; 6
+ x=x+2; 8
++ x++; 9
-- x--; 8
% y=x%3; 2
+ S="Bonjour "+"Pierre"; Bonjour Pierre
Les opérateurs
● opérateurs logiques
● && et
● || ou
● ! négation
● opérateurs de comparaison
● == égal à
● < inférieur à
● <= inférieur ou égal à
● > supérieur à
● >= supérieur ou égal à
● != diférent de
Structures conditionnelles
● Structure conditionnelle simple:
if (condition) {
[traitement si Vrai]
}
● Structure conditionnelle équilibrée:
if (condition) {
}
else {
[traitement si Faux]
} if(a>b)
{ document.write(a+" est plus grand que "+b) ;}
else
{ document.write(b+" est plus grand que "+a); }
●Switch
switch(variable)
{
case valeur1: instruction1; break;
case valeur2: instruction2; break;
…
default: instructionN;
};
● Switch (exemple)
reponse=prompt("Javascript est un langage : A.non typé\n
B.Faiblement typé\n C.Typé", "Saisissez ici la lettre
correspondant à votre réponse");
switch (reponse){
case "A":
alert("Pas tout -à-fait, ré-essayez");break;
case "B":
alert("Bravo ! C’est exact"); break;
case "C":
alert("Pas tout-à-fait, ré-essayez"); break;
default:
alert("Votre réponse ne correspond pas aux propositions");
break;
}
Structures itératives
● Boucle définie for(…) :
for([initial];[condition d'itération];[incrémente]){
[traitement]
}
for(i=1;i<=10;i++)
{
j=i*i;
document.write(j+”<br>”);
}
● Boucle indéfinie while(…)

while (condition) {
}
var i=1;
while (i<=10)
{
j=i*i;
document.write(j+”<br>”);
i++;
}
● L’instruction break permet de sortir

immédiatement d'une boucle
● L’instruction continue permet de passer
immédiatement à l'itération suivante
Les fonctions
● Fonctions prédéfinies
parseInt() conversion en entier : parseInt("400 coups") donne 400
parseFloat() conversion en décimal: parseFloat("3.14 est la valeur de pi") donne 3.14
eval() évalue toute expression et eval("20+7+6") donne la valeur numérique 33

restitue une réponse valide eval("Alfred a 5 ans") donne la chaîne "Alfred a 5
ans“
Les fonctions
● Exemple:
...
<SCRIPT LANGUAGE="JavaScript">
function evaluation() {
document.formulaire.calcul.value=eval(document.formulaire.saisie.value); }
</SCRIPT>
...
<FORM NAME="formulaire">
Saisissez une expression mathématique :
<INPUT TYPE="text" NAME=saisie MAXLENGTH=40 SIZE=40>
<INPUT TYPE="button" VALUE="evaluation." onClick="evaluation()">
<INPUT TYPE="text" NAME=calcul MAXLENGTH=40 SIZE=40>
</FORM>...
Remarque : L'utilisation de la fonction eval est déconseillée

car source de beaucoup de bugs et de vulnérabilités des
applications
Les fonctions
● Autres fonctions prédéfinies
● isFinite
– Détermine si le parametre est un nombre fini. Renvoie false si ce
n'est pas un nombre ou l'infini positif ou infini négatif.
isFinite(240) //retourne true
isFinite("Un nombre") //retourne false
● isNaN
– détermine si le parametre n’est pas un nombre (NaN : Not a
Number).
isNaN("un nombre") //retourne true
isNaN(20) //retourne false
Les fonctions
● Les fonctions définies par le programmeur:
● On les déclare avec le mot clé function.
● Dans la pratique, les fonctions définies par le programmeur
sont placées dans la section <HEAD>...</HEAD> du
document HTML.
function ma_fonction(liste des paramètres)

{
instructions
…..
}
Les fonctions
● Exemples:
<html>
<head>
<title>Somme</title>
<script language="javascript">
function Somme(a,b) {
var resultat=a+b ;
return resultat ;}
</script>
</head>
<body>
<script language="javascript">
document.write("<h2 align=\"center\">5+7 donne: ",Somme(5,7),"</h2>");
</script>
</body>
</html>
Les fonctions
● Pour renvoyer un résultat, il suft d'écrire le mot clé return

suivi de l'expression à renvoyer.
● Dans une fonction les variables locales sont déclarées avec
le mot clé var ou let.
● Dans ce cas elles ont une portée limitée à cette seule
fonction, contrairement aux variables globales qui sont
déclarées à l'extérieur des fonctions.
JavaScript/DOM
II. Les objets JavaScript

Les objets JavaScript
● Objets, attributs et méthodes
● Objet window
● Objet document
● Autres objets javascript
Objets, attributs et méthodes
● Dans JavaScript, un objet désigne un type d'entité qui peut
posséder des caractéristiques appelées propriétés et des
fonctions appelées méthodes.
● Par définition un objet est une représentation abstraite
d'une entité du monde réel.
● JavaScript est un langage à objets orienté prototype,
diférents des langages de programmation orientée objet
comme Java
● Les méthodes efectuent des opérations sur les propriétés

et sont susceptibles de fournir certains résultats.
● Les objets sont important pour séparer les concepts
diférents dans un programme.
● Les objets sont créés grâce aux délimiteurs { } ou créés à
partir de leur prototype (ou constructeur) grâce à l'
instruction « new ».
● On accède ensuite aux propriétés et méthodes d'un objet
grâce à l'opérateur point.
● Exemple 1
● Création d'un objet rectA
var rectA={
nom:"A",
longueur:20,
largeur:15,
posX:30,
posY:25
}
alert("Le rectangle "+rectA.nom+" a pour surface
"+rectA.longueur*rectA.largeur)
● Exemple 1 (suite)
● Ajouter des méthodes à l'objet
– Si lors de la création de l'objet des méthodes n'ont pas été déclarées
cela peut se faire dynamiquement. Le mot clé « this » fait référence à
l'objet en cours.
rectA.surface=function (){
return this.longueur*this.largeur ;
}
rectA.perimetre=function (){
return 2*(this.longueur+this.largeur) ;
}
alert("Le rectangle "+rectA.nom+" a pour surface
"+rectA.surface()) ;
● Exemple 2
● Création du prototype (constructeur) Rectangle
function Rectangle(nom,long,largeur,pX,pY){
this.nom=nom;
this.longueur = long ;
this.largeur = largeur ;
this.posX = pX ;
this.posY = pY ;
this.surface= function (){
return this.longueur*this.largeur ;
}
}
● Création d'un objet rectB à partir du prototype Rectangle
var rectB=new Rectangle("B",30,20,50,45)
● Les noms de méthodes sont toujours suivis de
parenthèses, il peut y avoir des paramètres
entre les parenthèses.
● Lorsqu'une méthode fournit un résultat, celui-
ci doit être recueilli dans une nouvelle variable.
● Nous avons déjà fait appel à l'objet document
et sa méthode write() à chaque fois que nous
avons utilisé l'instruction document.write().
Objet window
Propriété Description exemple

defaultStatus Contenu standard de la barre d’état window.defaultStatus="Bienvenue";
closed Renvoie l’état d’une fenêtre if(window.closed)

(false=ouvert, true=fermé)‫‏‬ {…}
name Nom de la fenêtre alert(window.name);
Méthode Description exemple

alert()‫‏‬ Boite de dialogue avec texte et alert(" Bonjour");
bouton OK
prompt()‫‏‬ Boite de dialogue avec zone de val=prompt(‘Entrez une valeur’,’’);
saisie
close()‫‏‬ Ferme la fenêtre window.close()‫‏‬
open()‫‏‬ Ouvre la fenêtre f1=window.open(" accueil.html","accueil");
Objet document
Propriété Description exemple

bgColor Couleur de fond du document document.bgColor=blue;
fgColor Couleur de texte du document document.fgColor=black;
URL URL complète du document en cours alert(document.URL);
Méthode Description exemple

write()‫‏‬ Écrit une chaîne de caractères dans le document.write(" Hello!");
document en cours
writeln()‫‏‬ Écrit une chaîne de caractères suivie d’un document.writeln(" Hello!");
retour à la ligne dans le document en cours document.writeln(" Bonjour!");
Autres objets Javascript
● Objet String
● Propriété :
– length : retourne la longueur de la chaîne de caractères;
● Méthodes :
– b( ) : formate la chaîne avec la balise <b>;
– charAt( ) : renvoie le caractère se trouvant à une certaine position;
– charCodeAt( ) : renvoie le code du caractère se trouvant à une
certaine position;
– concat( ) : permet de concaténer 2 chaînes de caractères;
– fromCharCode( ) : renvoie le caractère associé au code;
– indexOf( ) : permet de trouver l'indice d'occurrence d'un caractère
dans une chaîne;
● Objet String
● Méthodes :
– italics( ) : formate la chaîne avec la balise <i>;
– lastIndexOf( ) : permet de trouver le dernier indice d'occurrence d'un
caractère;
– link( ) : formate la chaîne avec la balise <a> pour permettre de faire
un lien;
– slice( ) : retourne une portion de la chaîne;
– substr( ) : retourne une portion de la chaîne;
– substring( ) : retourne une portion de la chaîne;
– toLowerCase( ) : permet de passer toute la chaîne en minuscule;
– toUpperCase( ) : permet de passer toute la chaîne en majuscules;
● Objet Array
● Propriété :
– length : retourne le nombre d'éléments du tableau;
● Méthodes :
– concat( ) : permet de concaténer 2 tableaux;
– join( ) : converti un tableau en chaîne de caractères;
– reverse( ) : inverse le classement des éléménts du tableau;
– slice( ) : retourne une section du tableau;
– sort( ) : permet le classement des éléments du tableau;
● Objet Date
Méthode Description
getDate() renvoie le numéro du jour dans le mois, donc un nombre entier entre 1 et 31.
getMonth() renvoie le numéro du mois dans l'année, mais attention ce numéro est un entier entre
0 (pour janvier) et 11 (pour décembre);
getFullYear() renvoie le numéro de l'année en 4 chiffres.
getHours() elle renvoie le numéro de l'heure.
getMinutes() renvoie le numéro des minutes
getSeconds() renvoie le numéro des secondes.

● Objet Date
● Exemple:
<html>
<head>
<title>Heure – objet date</title>
</head>
<body>
<script language=javascript>
var temps = new Date();
document.write( "<p>il est ", temps.getHours(),
" heures",temps.getMinutes(), " minutes sur le
poste client</p>");
</script>
</body>
</html>
● Objet Math
● Propriétés :
– E : renvoie la valeur de la constante d'Euler (~2.718);
– LN2 : renvoie le logarithme népérien de 2 (~0.693);
– LN10 : renvoie le logarithme népérien de 10 (~2.302);
– LOG2E : renvoie le logarithme en base 2 de e (~1.442);
– LOG10E : renvoie le logarithme en base 10 de e (~0.434);
– PI : renvoie la valeur du nombre pi (~3.14159);
– SQRT1_2 : renvoie 1 sur racine carrée de 2 (~0.707);
– SQRT2 : renvoie la racine carrée de 2 (~1.414);
● Objet Math
● Méthodes :
– abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ), atan( ),
max( ), min( ), sqrt( ) sont les opérations mathématiques
habituelles;
– atan2( ) : retourne la valeur radian de l'angle entre l'axe des
abscisses et un point;
– ceil( ) : retourne le plus petit entier supérieur à un nombre;
– floor( ) : retourne le plus grand entier inférieur à un nombre;
– pow( ) : retourne le résultat d'un nombre mis à une certaine
puissance;
– random( ) : retourne un nombre aléatoire entre 0 et 1;
– round( ) : arrondi un nombre à l'entier le plus proche.
JavaScript/DOM
III. La programmation événementielle

La programmation événementielle
● Notion d'événement
● Gestionnaire d’événements
● Exercices d’application
Notion d'événement
● Un clic souris, une saisie de données, un

chargement de page, le passage de la souris
sur une zone,... constituent des événements.
● Ces événements peuvent provoquer des
actions à l'aide de scripts JavaScript.
Gestionnaires d’événements
● Pour créer un gestionnaire d'événement, il
suft d'utiliser une balise et d'ajouter le mot
clé de l'événement avec un code JavaScript
indiquant l'action à entreprendre si
l'événement se produit
<BALISE onQuelquechose="code javascript">

● Evénement onLoad
● Se produit lorsque une page web est chargée dans la fenêtre
du navigateur
● Toute la page (y compris les images qu’elle contient si leur
chargement est prévu) doit avoir été chargée pour qu’il ait
lieu
● Cet événement peut être associé à une image seulement ;
auquel cas, il se produit une fois son chargement terminé
<HTML><BODY onLoad="alert('page chargée');">

Exemple de l'événement onLoad
</BODY></HTML>
● Evénement onClick
● Se produit lorsque l’utilisateur clique sur un élément
spécifique dans une page, comme un lien hypertexte, une
image, un bouton, du texte, etc.
● Ces éléments sont capables de répondre séparément à cet
événement
● Il peut également être déclenché lorsque l’utilisateur clique
n’importe où sur la page s’il a été associé non pas à un
élément spécifique, mais à l’élément body tout entier
<HTML><BODY>
<INPUT TYPE="Button" Value="cliquer ici” onClick="alert('Clic')">
</BODY></HTML>
Gestionnaires d’événement
● Événement onMouseover
● Analogue à onClick sauf qu’il suft que l’utilisateur place le
pointeur de sa souris sur l’un des éléments précités (lien
hypertexte, image, bouton, texte, etc.) pour qu’il ait lieu
● Événement onMouseout
● A l’inverse de onMouseover, cet événement se produit lorsque
le pointeur de la souris quitte la zone de sélection d’un
élément.
<HTML><BODY>
<IMG SRC="image.gif" onMouseOver="src='image2.gif';"
onMouseOut="src='image.gif';">
</BODY></HTML>
Exercices
Exercice 1 :
Changement de la couleur de l’arrière plan
● Écrire un formulaire du type menu déroulant permettant
de choisir la couleur de l'arrière plan à volonté.
Exercices
Solution
● Code :
<FORM>
<SELECT
onChange="document.bgColor=this.options[this.selectedIndex].value">
<OPTION VALUE="40E0D0"> Turquoise
<OPTION VALUE="2E8B57"> Vert comme la mer
<OPTION VALUE="87CEEB"> Bleu comme le ciel
<OPTION VALUE="F4A460"> Brun comme le sable
<OPTION VALUE="FFF0F5"> Bleu lavande
<OPTION VALUE="FF1493"> Rose
<OPTION VALUE="FFFFFF" SELECTED> Blanc
</SELECT>
</FORM>
Exercices
Notes :
● la balise SELECT indique que l'on utilise un menu déroulant ;
les balises OPTION indiquent les options possibles.
● L'événement onChange permet de changer la sélection.
● document.bgColor est la couleur de fond de l'objet document
● value est la valeur de l'option (ici c'est une couleur codée).
● options[this.selectedIndex] est l'option sélectionnée par
l'utilisateur
● On notera qu'au départ c'est l'option "Blanc" qui est
sélectionnée par défaut.
Exercices
Exercice 2 :
Horloge digitale
●
Réaliser une horloge digitale donnant le jour et
l'heure
Exercices
Solution
<TABLE BORDER=4 BGCOLOR="cyan">
<TR><TD>
<FORM id="clock_form">
<INPUT TYPE=TEXT NAME="cadran" id="cadran" SIZE=26>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
function TicTac(){
Date_courante = new Date();
document.getElementById("cadran").value = " "+Date_courante;
document.getElementById("cadran").blur();
setTimeout("TicTac()", 1000);
}
TicTac();//appel de la fonction TicTac
// fin de l'horloge -->
</SCRIPT>
</TD></TR>
</TABLE>
Exercices
Notes :
• On utilise ici un formulaire qui présente une zone d'affichage de
texte, dont le nom est "cadran".
• Dans le script, la fonction TicTac() est définie. Elle crée un objet
de type Date : Date_courante.
• document.clock_form.cadran.value est la valeur affichée dans la
zone cadran du formulaire clock_form du document web. La zone
cadran est ensuite désactivée avec la fonction blur().
• SetTimeOut est un minuteur qui déclanche la fonction TicTac()
au bout de 1000 ms. On notera la récursivité puisque la fonction
TicTac() s'appelle elle-même.
Exercices
Exercice 3 : Dessin animé

●
On veut simuler à partir d'images un ouvrier en train de courir.
●
Implémentez les fonctions suivantes:
●
imageSuivante() : qui à chaque appel affiche l'image suivante
●
courir() : qui appelle l'image suivante toutes les 10 ième de
secondes
●
stop() : qui permet de stopper le processus
Javascript/DOM
IV. Le DOM
Le DOM
● Présentation
● Concept de noeud (node)
● Hiérarchisation des noeuds
● Propriétés de l'objet node
● Accès aux nœud Element
● Propriétés des nœuds Element
● Méthodes des nœuds Element
● Exercice
Présentation
● DOM (Réf : https://developer.mozilla.org/fr/docs/Web/API/Référence_du_DOM_Gecko)
● Document Object Model (Modèle Objet du Document) définit
un mode standardisé pour accéder et mettre à jour tous les
éléments d'un document HTML, XHTML ou XML
● Le DOM est une interface de programmation (API)
● Le DOM n'est pas en soi un langage de balise ou de
programmation mais simplement une manière de percevoir,
de parcourir et de manipuler un document HTML ou XML, en
utilisant des méthodes et des propriétés spécifiques.
Concept de noeud (node)
● Node (Réf : https://developer.mozilla.org/fr/docs/Web/API/Node )

● Selon le DOM, tout composant ou élément d'un document HTML,
XHTML ou XML constitue un noeud (node)
● Il est possible de représenter un document selon une structure
arborescente.
● On peut concevoir:
– Le document entier comme un noeud, appelé noeud document (document
node),
– Chaque balise comme un noeud élément (element node),
– Le texte contenu entre les balises comme un noeud texte (text node),
– Chaque attribut d'une balise est un noeud attribut (attribut node),
– Les commentaires comme des noeuds de commentaire (comment node),
– Etc ...
Hiérarchisation des noeuds
● Relation parent/enfant
● Les noeuds ont une relation hiérarchique entre eux.
● Dans l'exemple suivant:
– <p> Texte du paragraphe</p>
● La balise <p> joue le rôle de parent (parent) et texte
compris en les balises celui d'enfant (child).
Texte du paragraphe
Hiérarchisation des noeuds
document
html
head body
● Chaque noeud excepté le noeud document, a un title h1 p

noeud parent.
● Certains noeuds ont un ou plusieurs noeuds
enfant.
●Certains noeuds sont frères et soeurs (siblings) Le DOM Titre de Texte du
car ils partagent le même parent niveau 1 paragraphe
Propriétés de l'objet Node
● Objet Node
● le DOM traite le document HTML, XHTML ou XML par analogie avec la
programmation orientée objet c'est-à-dire que le DOM fait appel à des propriétés
et à des méthodes pour manipuler le document et ses composants représentés
par des objets Node.
● Les propriétés de relation

● parentNode, renvoie le noeud parent d'un noeud.
● firstChild, renvoie le premier enfant d'un noeud.
● lastChild, renvoie le dernier enfant d'un noeud.
● childNodes, stocke une liste de tous les noeuds enfant disponibles à partir d'un noeud.
● previousSibling renvoie le noeud frère/soeurs précédent d'un noeud.
● nextSibling, renvoie le noeud frère/soeurs suivant d'un noeud.
● Les propriétés d'état
● Ces propriétés permettent de s'informer sur l'état d'un
noeud.
– nodeName, indique le nom du noeud sélectionné. Le nom de la
balise est toujours retourné en majuscules.
– nodeType, indique le type de noeud rencontré. Par exemple:
● 1 si le noeud est un élément
● 2 si la sélection porte sur un attribut.
● 3 s'il s'agit du noeud de texte.
– nodeValue, permet d'obtenir ou de changer la valeur d'un noeud

de type texte.
● Les méthodes
● Elles permettent de créer un document, ou de le modifier.
– appendChild(Node), ajoute un noeud à la liste des noeuds enfants.
– cloneNode(Boolean), crée une copie du noeud, avec ses attributs.
● Les noeuds contenus sont copiés aussi si l'argument est true, sinon
seul le noeud est copié.
● Ce nouveau noeud est détaché de l'arborescence. Il n'a pas de parent.
Si l'argument est true, cela équivaut à détacher une branche de
l'arborescence.
– hasAttributes(), retourne true ou false, selon qu'il a des attributs ou
non.
– hasChildNodes(), retourne true ou false selon qu'il contient d'autres
noeuds ou non.
– insertBefore(inséré, ici), insère le premier noeud en
argument avant le second.
● Éventuellement le nouveau noeud prend la place dans
firstChild. En retour, retourne le noeud inséré (ses attributs de
noeuds tels que parentNode, etc. ont changé).
– removeChild(Node), supprimer un noeud ou une branche.
Retourne l'élément supprimé.
– replaceChild(nouveau, ancien), remplace le second
argument par le premier. Retourne le Node remplacé mais des
attributs tel que parentNode sont changés.
● Cela peut être une branche. Si le noeud remplaçant existait
dans l'arborescence, il y est supprimé.
Accéder aux nœuds Element
● Par la méthode getElementById
● La méthode javascript getElementById de l'objet
Document, parcourt le document HTML à la recherche d'un
noeud unique qui a été spécifié par l'attribut id.
● Cet identifiant id doit être unique dans le document.
● Exemple:
– Au clic sur un titre de niveau 1, retourner dans une boîte d'alerte le
nom du noeud (nodeName)
● Par la méthode getElementsByName
● Cette méthode permet de sélectionner les éléments
portant un nom donné, spécifié par l'attribut name. Les
éléments portant le même nom sont stockés dans une liste
de noeuds.
● Cette liste gére un tableau Array.
● Exemple
– Accédons à la valeur de la troisième ligne de texte par la méthode
getElementsByName
● Par la méthode getElementsBytagName
● Cette méthode parcourt le document à la recherche de
toutes les balises d'un type spécifique, signalé en argument.
● Ces balises sont contenues dans une liste (nodeList) qui
gère comme les tableaux de type Array.
● Exemple:
– Accédons à la valeur de la 3ème ligne de texte par
getElementsByTagName.
Propriétés des nœud Element
Attributs Description Type
attributes Tous les attributs associés à un élément. NamedNodeMap
childNodes Tous les nœuds enfants d'un élément. NodeList
className Définit ou obtient la classe de l'élément. String
Le premier nœud enfant direct d'un élément, ou

firstChild Node
null si l'élément n'a pas de nœuds enfants.
id Définit ou obtient l'identifiant (id) de l'élément courant. String
Renvoie ou définit l'ensemble du balisage et du texte

innerHTML String
contenu au sein d'un élément donné.
Méthodes des nœuds Element
Nom et description Type de retour
addEventListener( type, listener, useCapture )
-
Enregistre un gestionnaire pour un type d'évènement particulier sur l'élément.
appendChild( appendedNode )
Node
Insère un nœud comme dernier nœud enfant de l'élément.
getAttribute( name )
Object
Renvoie la valeur de l'attribut spécifié pour le nœud courant.
removeAttribute( name )
-
Retire l'attribut spécifié du nœud courant.
setAttribute( name, value )
-
Définit la valeur de l'attribut spécifié pour le nœud courant.
querySelector( String )
Retourne le premier Node correspondant à la chaîne du sélecteur spécifiée Node
par rapport à l'élément
querySelectorAll( String)
Retourne une NodeList des noeuds qui orrespondent à la chaîne du NodeList
sélecteur spécifiée par rapport à l'élément
Exercice (console Javascript)
● Exécuter une page HTML contenant le code suivant.
<div id="wrapper">
<h1>Hello World!</h1>
<p>JavaScript®, souvent abrégé en JS, est le langage de script développé
par Netscape utilisé dans des millions de pages web et d'applications
serveur dans le monde entier. Il est orienté prototype, multi-paradigme
étant dynamique, impératif et fonctionnel à la fois.
<a href="http://www.developer.mozilla.org" title="MDN" id="link">JS</a>
</p>
<ul>
<li>JavaScript</li>
<li>TypeScript</li>
<li>V8</li>
</ul>
</div>
Exercice (console Javascript)
● Utiliser l'objet document :

● pour mettre en couleur le paragraphe ;
● Pour afcher sur la console le premier texte de la liste à
puces.
● pour que la page afche une popup contenant la valeur de
l’attribut href du lien contenu dans le paragraphe ;
Gestion des événements
● addEventListener
● permet l'assignation de gestionnaires d'évènements sur
un élément cible.
● element.addEventListener(type, nomFonction);
<input id="test" type="button" value="Clic">
<script type="text/javascript">
function bonjour(){
alert("Bonjour");
}
var b=document.getElementById("test");
b.addEventListener("click",bonjour);
</script>
querySelector
● querySelector(String)
● Retourne le premier élément dans le document qui correspond au
groupe de sélecteurs passés en paramètre.
● querySelectorAll(String)
● retourne une liste de tous les noeuds éléments inclus dans le
document qui correspondent au groupe de sélecteurs passés en
paramètre..
Création de noeuds
● createElement(DOMString)
● Crée un élément, une balise, dont le nom est donné, et retourne un
objet Element.
– On peut donner à cette balise des attributs avec la méthode
createAttribute de l'objet Element.
● createTextNode(DOMString)
● Permet d'insérer du texte dans le document. Retourne un objet Text.
Exercice
Réalisez une page similaire à la suivante (todo list)

Support JS LPTI119

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Support JS LPTI119

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript/DOM

I. Notions de base du langage

● il existe trois façons d'introduire du code JavaScript dans

Dans une balise HTML (techniques DHTML)‫‏‬

Un javascript peut être testé en ligne sur : http://jsfiddle.net/

<SCRIPT LANGUAGE="javascript" SRC="monfichier.js"></SCRIPT>

● Un nom de variable doit commencer par une lettre

var montableau=new Array(nb);

var jour=new Array("Lundi", " Mardi", " Mercredi",

● Boucle indéfinie while(…)

● L’instruction break permet de sortir

parseFloat() conversion en décimal: parseFloat("3.14 est la valeur de pi") donne 3.14

eval() évalue toute expression et eval("20+7+6") donne la valeur numérique 33

Remarque : L'utilisation de la fonction eval est déconseillée

function ma_fonction(liste des paramètres)

● Pour renvoyer un résultat, il suft d'écrire le mot clé return

II. Les objets JavaScript

● Les méthodes efectuent des opérations sur les propriétés

Propriété Description exemple

closed Renvoie l’état d’une fenêtre if(window.closed)

name Nom de la fenêtre alert(window.name);

Méthode Description exemple

Propriété Description exemple

fgColor Couleur de texte du document document.fgColor=black;

URL URL complète du document en cours alert(document.URL);

Méthode Description exemple

getSeconds() renvoie le numéro des secondes.

III. La programmation événementielle

● Un clic souris, une saisie de données, un

<BALISE onQuelquechose="code javascript">

<HTML><BODY onLoad="alert('page chargée');">

Exercice 3 : Dessin animé

● Node (Réf : https://developer.mozilla.org/fr/docs/Web/API/Node )

● Chaque noeud excepté le noeud document, a un title h1 p

● Les propriétés de relation

– nodeValue, permet d'obtenir ou de changer la valeur d'un noeud

Attributs Description Type

attributes Tous les attributs associés à un élément. NamedNodeMap

childNodes Tous les nœuds enfants d'un élément. NodeList

className Définit ou obtient la classe de l'élément. String

Le premier nœud enfant direct d'un élément, ou

id Définit ou obtient l'identifiant (id) de l'élément courant. String

Renvoie ou définit l'ensemble du balisage et du texte

● Utiliser l'objet document :

Vous aimerez peut-être aussi