Les
bases du développement Web
Javascript,
DOM
1. JavaScript
1.1.
Introduction
JavaScript
est un langage de script. Il permet de programmer dans les pages
HTML et est interprété par le navigateur.
Ses
principales utilisations sont les suivantes :
·
gestion
du navigateur (historique, fenêtrage, cookies…)
·
contrôler
les données saisies par l’utilisateur avant leur traitement par le
serveur,
·
réagir
aux événements (à
Ajax,
JQuery)
·
animer
les pages HTML en en changeant le contenu,
1.2.
Pour démarrer
Le
code peut être placé :
·
soit
dans une page HTML entre les balises <script></script>,
soit dans un fichier externe. Le lien se fait alors dans
le <head>
du
document HTML via
<script
src="script.js"><script/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<html>
<head>
<title>Formulaire personne</title>
<script
src="test.js"></script>
</head>
<body>
<form
name="frmPersonne" action="traitement.php">
<h2>
Renseignements
à fournir : </h2>
<div>
<input type="radio"
name="optEtatCivi1" value="1">
M.
<input type="radio"
name="optEtatCivil" value="2">
Mme
<input type="radio"
name="optEtatCivil" value="3"
checked> Melle
<br/>
Région :
<select name="lstReg"
size="1">
<option>Alsace</option>
<option>Bretagne</option>
<option selected>Champagne</option>
</select>
<br/>
<input type="button" value="Valider"
name="btValider" onclick="verif()">
<input type="reset"
value="Annuler" name="brAnnul">
</div>
</form>
<script>changeAffichage();</script>
</body>
</html>
|
1.3.
Syntaxe
·
une
instruction est une « commande » passée au navigateur.
Chaque instruction se termine par un point-virgule.
·
Un
bloc d’instructions se placent entre {}
·
JavaScript
est sensible à la casse.
·
Les
commentaires ont la forme suivante :
// 1
commentaire d’1 seule ligne
/* 1
commentaire de plusieurs lignes */
·
Les
variables sont déclarés grâce au mot-clé var.
·
Une
variable non initialisée prend la valeur null
ou
undefined.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function
verif
()
{
// l'adresse URL de destination du
formulaire
alert("destination : " +
document.frmPersonne.action);
// afficher la valeur du bouton radio
sélectionné var radio =
for (var
i=0;i<document.frmPersonne.optEtatCivil.length ; i++)
{
if
(document.frmPersonne.optEtatCivil[i].checked)
radio = document.frmPersonne.optEtatCivil[i].value ;
}
alert("radio sélectionné : " +
radio);
// changer l'option sélectionnée de
la liste : ce doit être la première
document.frmPersonne.lstReg[0].selected = true;
return
false;
}
|
·
document
est
un objet fourni par le navigateur et représente le document HTML
courant.
·
document.write()
permet
d’écrire sur la sortie standard, donc dans le document
HTML.
·
La
syntaxe de JavaScript est très proche de celle du C ou encore du
PHP.
1.4.
Données
·
Le
typage des données est implicite.
·
Les
chaînes de caractères sont placées entre guillemets ou entre
quotes.
·
Les
booléens prennent comme valeur true
ou
false
·
Les
tableaux peuvent être initialisés de plusieurs
façons :
1
2
3
4
5
6
7
|
var cars =
new Array();
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";
var cars =
new Array("Saab", "Volvo", "BMW");
var cars = ["Saab",
"Volvo", "BMW"];
|
On
accède au ième élément par :
cars[i]
et
cars.length
donne
la taille du tableau.
1.5.
Fonctions
·
Les
fonctions sont définies dans le fichier .js et appelées dans le
corps du document HTML.
·
Une
fonction se déclare ainsi et comporte éventuellement des
paramètres :
1
2
3
4
|
function
changeAffichage
()
{
// bloc
d'instructions
}
|
·
Elle
est appelée de la façon suivante, soit dans un bloc
<script></script>
lors
de l’interprétation du document, soit sur le déclenchement d’un
événement onclick,
onblur…
·
Une
variable est globale si elle est déclarée en début de script et en
dehors de toute fonction. Sa valeur est alors valable sur
l’ensemble du document HTML. Une variable locale, elle, n’est
visible qu’au niveau de la fonction qui l’utilise.
·
Une
fonction peut retourner un résultat grâce à l’instruction
return.
1.6.
Opérateurs
·
+ - *
/ pour
les opérations classiques,
·
%
pour
le reste de la division,
·
++
pour
incrémenter, de 1 et --
pour
décrémenter de 1,
·
+= (x
+= y pour
abréger x =
x+y)
et -=
(x
-= y pour
abréger x =
x-y)
·
+
sert
aussi pour concaténer les chaînes.
·
Comparaison :
==, !=,
<, <=, >, >=
·
Logique :
&&
(et),
|| (ou), !
(non)
1.7.
Structures de contrôle
if
(condition)
{
instructions
à exécuter si la condition est vérifiée
}
else
{
instructions à exécuter sinon
}
switch(n)
{
case 1:
code à exécuter si n=1
break;
case 2:
code à exécuter si n=2
break;
default:
code à exécuter si n different de 1 et 2
}
for
(initialisation; condition;
incrément)
{
les
instructions à exécuter tant que la condition est
remplie
}
while
(condition)
{
code à
exécuter tant que la condition est vraie
}
do
{
code à
exécuter tant que la condition est vraie (au – une fois)
}
while
(condition);
1.8.
Entrées – Sorties
Le code
suivant :
nombre =
prompt("Nombre ?");
if
(nombre != null) {
// affichage dans document, fenêtre du navigateur - retour à ligne
fin de chaîne
window.document.write("Le nombre saisi est
"+nombre+"<BR>");
} else
{
// affichage dans fenêtre pop-up
alert("Vous n'avez rien saisi.");
}
Provoquera
l’affichage suivant :


Si l’utilisateur ne
saisi rien – clic sur Annuler - (null), on aura :

1.9.
Recherche d’un motif : expressions régulières (ou
rationnelles)
On utilisera cette
technique à chaque fois que l’on recherchera un motif dans une
chaîne de caractère, un texte, un système de fichier…
D’une manière
générale en JavaScript on aura :
if (/contenu_à_rechercher/.test('Chaîne de caractères')) …
Pour savoir
si 'toto.martin@rabelais.fr'
est une adresse mail valide on pourra écrire :
if
(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]{2,}[.][a-zA-Z]{2,4}$/.test('toto.martin@rabelais.fr')) …
Pour savoir
si '45add888' est un
entier on pourra écrire :
if (/^\d+$/.test('45add888')) …
Le site
www.regexlib.com
propose une bibliothèque d’expressions régulières très fournies qui
devrait répondre à tous vos besoins.
1.10.
Objets
JavaScript
permet de créer et de manipuler ses propres objets avec propriétés
et méthodes.
1.11.
Les objets prédéfinis du navigateur
La
plupart des navigateurs implémentent les mêmes objets pour
interagir avec JavaScript. Ils suivent la hiérarchie
suivante :
Niveau1
|
Niveau2
|
Niveau3
|
Niveau
4
|
Commentaire
|
navigator
|
|
|
|
Informations
sur le navigateur utilisé
|
screen
|
|
|
|
Informations
sur l'écran du poste client
|
window
|
|
|
|
Gestion
de la fenêtre d'affichage du navigateur
|
frames
|
|
|
Référence
des sous-fenêtres
|
location
|
|
|
Informations
et contrôle de l'adresse URL de la page
|
history
|
|
|
Accès
à l'historique (URL des sites précédemment visités)
|
document
|
|
|
Informations
sur le contenu de la page affichée dans une fenêtre
|
images
|
|
Référence
des images présentes dans la page
|
forms
|
|
Référence
des formulaires présents dans la page
|
|
elements
|
Référence
des éléments de tout type contenus dans le formulaire
|
links
|
|
Référence
des liens présents dans la page
|
anchors
|
|
Référence
des ancrages présents dans la page
|
Chaque
objet possède des propriétés (des infos qui lui sont propres) et
des méthodes (des actions qu’on peut lui faire faire).
Pour
accéder à un objet du navigateur, il faut parcourir toute la
hiérarchie, en partant du sommet (objet window).
Exemple :
window.document.images[0]
accède
à la 1ère image de la page.
Tous
les tableaux d'objets (frames,
forms,
elements,
links,
etc) - repérables par le s final - présentent la
propriété length
qui
fournit le nombre d'objets présents dans le tableau.
screen
: l'écran du poste client
|
colorDepth
|
nombre
de bits par pixel pour la couleur
|
height
|
résolution
verticale de l'écran
|
width
|
résolution
horizontale de l'écran
|
navigator
: le navigateur utilisé par le poste client
|
appCodeName
|
nom
de code du navigateur
|
appName
|
nom
complet du navigateur
|
appVersion
|
version
du navigateur
|
window
: la fenêtre active du navigateur
|
history
|
accès
à l'historique du cache (à
history)
|
location
|
adresse
URL en cours dans la fenêtre ( à
location)
|
frames
|
tableau
de frames, chaque frame est de type window
|
document
|
accès
au document courant, chargé dans la fenêtre ( à
document)
|
status
|
texte
apparaissant dans la barre d'état en bas de la fenêtre
|
parent
|
si
la fenêtre courante est un frame, parent est la référence au frame
de la fenêtre qui le contient.
|
top
|
si
la fenêtre courante est un frame, top est la référence à l'objet
Window situé au plus haut niveau qui contient ce frame.
|
open(URL, nom, options, replace)
|
Ouvre
une nouvelle fenêtre ou une fenêtre nommée.
|
close()
|
Ferme
la fenêtre.
|
history
: l'historique des documents consultés
|
back()
|
méthode
permettant de revenir au document précédent
|
forward()
|
méthode
permettant de revenir au document suivant
|
document
: informations sur le document courant
|
links
|
tableau
de link : donc de balises <a href=…> dans le document
(à
link)
|
images
|
tableau
des images du document ( à
image)
|
forms
|
tableau
des formulaires du document ( à
form)
|
anchors
|
tableau
de anchor : donc de balises <a name=…> dans le document
(à
anchor)
|
link
: balise <a href=…> du document
|
href
|
valeur
de l'attribut href du lien (document pointé par le lien)
|
target
|
nom
du frame ou de la fenêtre cible
|
anchor
: balise <a name=…> du document
|
name
|
nom
de l'ancre
|
location
: information concernant l'adresse URL
|
href
|
chaîne
concernant l'URL complète
|
reload()
|
méthode
permettant de recharger le document (idem bouton
actualiser)
|
replace(urlCible)
|
méthode
permettant de remplacer le document courant par 'urlCible'. Il est
également possible d'affecter simplement un objet location avec
l'url cible ( document.location.href = "urlCible"). La différence,
c'est qu'avec replace, il est ensuite impossible de revenir en
arrière à l'aide du bouton back du navigateur)
|
image
: informations sur une image (balise img)
|
src
|
adresse
URL du document image
|
complete
|
booléen
indiquant si le chargement de l'image est terminé
|
form
: informations sur un formulaire (balise form)
|
elements
|
tableau
des éléments du formulaire (chacun possède un type : text, radio,
submit, …)
|
target
|
nom
du frame ou de la fenêtre cible
|
action
|
adresse
URL de destination (valeur de l'attribut action de la balise
form)
|
reset()
|
méthode
ayant le même effet qu'un clic sur un bouton reset
|
submit()
|
méthode
ayant le même effet qu'un clic sur un bouton submit
|
JavaScript
permet de récupérer les données des formulaires, le plus souvent
pour en contrôler la valeur.
Exemple
: Accéder au nom récupéré dans la zone de texte txtNom du
formulaire frmIdentite
:
document.write(document.frmIdentite.txtNom.name
+ "n'est pas valide.");
type
|
type
du contrôle (text, submit, …, en fait l'attribut type)
|
defaultValue
|
valeur
par défaut du contrôle (attribut value à la création)
|
value
|
valeur
actuelle du contrôle
|
form
|
référence
le formulaire auquel appartient le contrôle
|
defaultChecked
|
booléen
indiquant si le contrôle est coché par défaut
|
checked
|
booléen
indiquant si le contrôle est coché actuellement
|
focus()
|
donne
le focus au contrôle
|
click()
|
simule
un clic sur le contrôle
|
Le
tableau ci-dessous indique les caractéristiques des contrôles de
formulaire :
|
type
|
checked
|
defaultChecked
|
defaultValue
|
value
|
form
|
focus()
|
click()
|
text
|
X
|
|
|
X
|
X
|
X
|
X
|
|
textarea
|
X
|
|
|
X
|
X
|
X
|
X
|
|
password
|
X
|
|
|
|
X
|
X
|
X
|
|
hidden
|
X
|
|
|
|
X
|
X
|
|
|
submit
|
X
|
|
|
|
X
|
X
|
X
|
X
|
reset
|
X
|
|
|
|
X
|
X
|
X
|
X
|
button
|
X
|
|
|
|
X
|
X
|
X
|
X
|
radio
|
X
|
X
|
X
|
|
X
|
X
|
X
|
X
|
checkbox
|
X
|
X
|
X
|
|
X
|
X
|
X
|
X
|
Un
objet select se compose de plusieurs <option>.
Chaque option possède les propriétés suivantes :
defaultSelected
|
booléen
indiquant si l'option est sélectionné par défaut
|
selected
|
booléen
indiquant si l'option est actuellement sélectionnée
|
text
|
texte
de l'option
|
value
|
valeur
de l'option
|
L'objet
select lui-même possède les caractéristiques suivantes :
form
|
référence
vers le formulaire
|
length
|
nombre
d'options
|
options
|
tableau
des options (chacune du type option décrit ci-dessus)
|
type
|
"select-one" ou "select-multiple"
|
selectedIndex
|
nombre
entier spécifiant l'indice de l'option sélectionnée
|
2. DOM (Document Object
Model)
2.1.
Introduction
DOM
est le modèle objet d'un document HTML. Il permet à JavaScript
d'accéder à l'ensemble des éléments du document, et donc d'en
changer le contenu, les attributs, le style ou de réagir aux
événements.

2.2.
Accéder à un élément
On
accède à un élément grâce à document.getElement
ByID().
Exemple
:
var x=document.getElementById("intro");)
Bien
sûr cet élément doit avoir un attribut id défini :
<div
id="intro">Introduction</div>
Si
l'élément est trouvé, la méthode getElementById retournera l'objet
demandé, sinon, elle renverra null.
2.3.
Changer le contenu d'un élément
On
utilise pour cela la propriété
innerHTMLd'un
élément.
<html>
<body>
<p
id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "Nouveau texte!";
</script>
</body>
</html>
2.4.
Changer l'attribut d'un élément
<html>
<body>
<img
id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
La
syntaxe est la suivante :
document.getElementById(id).attribute=new
value
2.5.
Changer le style d'un élément
La
syntaxe est la suivante :
document.getElementById(id).style.property=new
style
<html>
<body>
<p
id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
<p>Le
paragraphe ci-dessus a été modifié par un script.</p>
</body>
</html>
2.6.
Ajouter ou supprimer un élément
Pour
ajouter un élément, on doit d'abord créer un nouvel élément. Il
faut ensuite le rattacher à un élément existant qui deviendra son
"père".
Ici,
on crée un élément <p>
stocké
dans la variable para.
On lui rattache du texte. Enfin, para
devient
l'enfant de l'élément <div>
récupéré
et stocké lui-même dans la variable element.
<div id="d1">
<p
id="p1">Mon 1er paragraphe</p>
<p
id="p2">Mon 2ème
paragraphe</p>
</div>
<script>
var
para=document.createElement("p");
var
node=document.createTextNode("Mon 3ème
paragraphe");
para.appendChild(node);
var
element=document.getElementById("d1");
element.appendChild(para);
</script>
Pour
supprimer un élément, on doit connaître son père :
<div id="d1">
<p
id="p1">1er paragraphe</p>
<p
id="p2">2ème
paragraphe</p>
</div>
<script>
var
parent=document.getElementById("d1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
Si
on ne le connaît pas, on le récupère via l'élément à supprimer
:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
2.7.
Gestion des événements
Les
événements sont les actions de l'utilisateur qui permettent
d’interagir avec le document HTML. Par exemple, le clic de souris.
JavaScript permet d'associer des fonctions à des événements, grâce
aux gestionnaires d'événements.
La
syntaxe d'un gestionnaire d'événement est la suivante:
onEvenement="AppelFonction();"
Le
plus souvent, il est représenté par un attribut HTML placé dans la
balise de l’élément correspondant.
<html>
<head>
<script>
function colore(x)
{
x.style.background="red";
}
function avertit()
{
alert("Message déclenché sur l'évènement
onload (chargement de la page)");
}
</script>
</head>
<body onload="avertit()">
Nom:
<input type="text"
onfocus="colore(this)">
Prenom :
<input type="text"
onfocus="colore(this)">
<p>Quand la zone de saisie obtient le focus,
sa couleur change.</p>
</body>
</html>
Lorsque
la fonction appelée par l'événement peut être déclenchée sur
plusieurs objets, il faut utiliser le mot-clé
this en
paramètre. Ainsi, la fonction saura à quel objet s’applique
l’événement.