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/>

<html>

<head>

<title>Formulaire personne</title>

</head>

<body>

<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 :

<option>Alsace</option>

<option>Bretagne</option>

<option selected>Champagne</option>

</select>

<br/>

</div>

</form>

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

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 :

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 :

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…

<html>

<head>

<title>Formulaire personne</title>

</head>

<body>

</body>

</html>

<html>

<head>

<title>Formulaire personne</title>

</head>

<body>

</body>

</html>

· 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

}

{

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.

function personne(p,n,a,y)

{

this.prenom = p;

this.nom = n;

this.age = a;

this.yeux = y;

function changeNom(n)

{

this.nom=n;

}

var monPere=new personne("John","Doe",50,"bleus");

var maMere=new personne("Sally","Rally",48,"verts");

maMere.changeNom("Doe");

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.

1.12. Propriétés et méthodes des principaux objets du navigateur

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

1.13. Les contrôles de formulaire

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

1.13.1. Objet Select

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>

document.getElementById("p1").innerHTML = "Nouveau texte!";

</script>

</body>

</html>

2.4. Changer l'attribut d'un élément

<html>

<body>

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>

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.

<p id="p1">Mon 1er paragraphe</p>

<p id="p2">Mon 2ème paragraphe</p>

</div>

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 :

<p id="p1">1er paragraphe</p>

<p id="p2">2ème paragraphe</p>

</div>

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>

function colore(x)

{

x.style.background="red";

}

function avertit()

{

alert("Message déclenché sur l'évènement onload (chargement de la page)");

}

</script>

</head>

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.

Evénements page et fenêtre
onabort	s'il y a une interruption dans le chargement
onerror	en cas d'erreur pendant le chargement de la page
onload	après la fin du chargement de la page
onunload	se produit lors du déchargement de la page (par changement de page, en quittant)
onresize	quand la fenêtre est redimensionnée
Evénements souris
onclick	sur un simple clic
ondblclick	sur un double clic
onmousedow	lorsque que le bouton de la souris est enfoncé, sans forcément le relâcher
onmousemove	lorsque la souris est déplacée
onmouseout	lorsque la souris sort de l'élément
onmouseover	lorsque la souris survole l'élément
onmouseup	lorsque le bouton de la souris est relâché
Evénements clavier
onkeydown	lorsqu'une touche est enfoncée
onkeypress	lorsqu'une touche est pressée et relâchée
onkeyup	lorsqu'une touche est relâchée
Evénements formulaire
onblur	à la perte du focus
onchange	à la perte du focus si la valeur a changé
onfocus	lorsque l'élément prend le focus (ou devient actif)
onreset	lors de la remise à zéro du formulaire (via un bouton "reset" ou une fonction reset())
onselect	quand du texte est sélectionné
onsubmit	quand le formulaire est validé