STRUCTURES DE CONTRÔLE EN JAVASCRIPT

Modulo les notations propres à JavaScript, nous retrouvons les structures de contrôle classiques,
en particulier celles vues en cours d'algorithmique.

Ainsi, le si alors sinon a la forme générale suivante.

if (une condition ici) {

// des instructions ici
} else {
// des instructions ici
}

La boucle tant que, elle, s'exprime comme suit :

while (une condition ici) {

// des instructions ici
}

ce qui donne sur un exemple comptant de un à dix :

var i=0; # initialisation d'une variable i

while (i<10) { # tant que et sa condition
document.writeln(i); # affichage
i = i+1; # incrémentation de la variable i
}

Enfin, la boucle pour, trois éléments doivent être fournis : une variable avec son initialisation,
une condition de type tant que et une instruction à effectuer à chaque passage dans la boucle
(typiquement une mise à jour de la variable associée à la boucle).

for ( initialisation ; condition pour continuer ; progression) {

# des instructions ici
}

... ce qui nous permet de revisiter notre exemple avec une forme plus compacte :

for (var i=0 ; i<10 ; i++) {

document.writeln(i); # affichage
}

D'autres boucles sont proposées par JavaScript mais elles sont dédiées à l'énumération des
éléments d'un tableau.
STRUCTURES DE DONNÉES JAVASCRIPT : LES TABLEAUX

Deux types de tableaux :

• les tableaux classiques : pas de contrainte sur le contenu des cases, celles-ci sont
numérotées à partir de 0 ;
• les tableaux associatifs dont la particularité est que les cases ne sont plus indicées par
un numéro mais par un texte.

MANIPULATION DES TABLEAUX JAVASCRIPT

Tout d'abord la déclaration d'un tableau et l'affectation de valeurs à ses cases.

// définition d'un tableau vide et remplissage des cases

var notes = [];
t[0] = 10;
t[1] = 5;
t[2] = 20;

// autre syntaxe pour définir un tableau

var notes = [10,5,20,14,2];

À noter que la taille d'un tableau t est accessible à travers l'expression « t.length ».

Enfin, les tableaux associatifs :

var mails = [];

mails['torre'] = 'torre@univ.fr';
mails['toto'] = 'toto.machin@free.fr';
document.writeln('Mail de toto = '+mails['toto']);

PARCOURS DE TABLEAUX JAVASCRIPT : LES BOUCLES FOR IN ET FOR OF

Ces boucles sont dédiées aux parcours des tableaux.

// syntaxes générales
for (var k in t) {
// des instructions ici portant sur t[k]
}
for (var v of t) {
// des instructions ici portant sur v
}
// définition d'un tableau classique
var notes = [10,12,18,20,4];
// parcours des indices
for (var i in notes) {
document.writeln(notes[i]);
}
// parcours des valeurs
for (var note of notes) {
document.writeln(note);
}
// définition d'un tableau associatif
var carnet = [];
carnet['pierre'] = '19 ans';
carnet['paul'] = '26 ans';
carnet['jacques'] = '30 ans';

// parcours des clefs et affichage des valeurs du tableau

for (var i in carnet) {
document.write('la clef vaut : ' + i);
document.write(', la valeur associée est : ',carnet[i],'<br>');
}

FONCTIONS ET PROCÉDURES EN JAVASCRIPT

Rappelons que procédures et fonctions sont semblables sur bien des points. Elles permettent
d'isoler un bout de code, de le nommer et ainsi le rendre réutilisable à différents moments. Elles
peuvent utiliser des paramètres et contenir des instructions quelconques.

En revanche, une fonction doit toujours se terminer par le renvoi d'un résultat (à l'aide du mot-
clef return en JavaScript), ce qui n'est jamais le cas pour une procédure. Cela signifie en
particulier qu'un appel à une fonction se trouvera souvent dans la partie droite d'une affectation, ou
embarqué directement dans un test, ce qui ne sera jamais le cas pour un appel de procédure.

DÉFINITION ET UTILISATION D'UNE PROCÉDURE

// forme générale d'une procédure
function nom_de_la_procédure (paramètres) {
// des instructions ici
}
# définition d'une procédure
function est_voyelle_procédure_tantque (lettre) {

var voyelles = ['a','e','i','o','u','y'];

var i = 0;
while ((i<voyelles.length) && (lettre != voyelles[i])) {
i = i+1;
}

if (i<voyelles.length) {

document.writeln('« ',lettre,' » est une voyelle.');

} else {
 document.writeln('« ',lettre,' » N\'est PAS une voyelle.');

}
}

# appels à la procédure
est_voyelle_procédure_tantque('a');
est_voyelle_procédure_tantque('b');

DÉFINITION ET UTILISATION D'UNE FONCTION

// forme générale d'une fonction
function nom_de_la_fonction (paramètres) {
// des instructions ici
return(résultat)
}
# définition d'une fonction
function est_voyelle_fonction_tantque (lettre) {

var voyelles = ['a','e','i','o','u','y'];

var i = 0;
while ((i<voyelles.length) && (lettre != voyelles[i])) {
i = i+1;
}

return (i<voyelles.length);

# appel à la fonction dans la condition d'un if

for (lettre of ['a','b']) {
if (est_voyelle_fonction_tantque(lettre)) {
document.writeln('« ',lettre,' » est une voyelle.');
} else {
document.writeln('« ',lettre,' » N\'est PAS une voyelle.');
}
}

GESTION DES ÉVÉNEMENTS ET DES ACTIONS EN JAVASCRIPT

Le couple HTML + CSS amène à des documents essentiellement statiques. Nous avons vu que
certains calculs peuvent être automatisés avec document.writeln. Nous regardons maintenant
comment produire des documents de manière dynamique :

• côté serveur : il est possible d'utiliser un langage comme PHP associé à une base de
données SQL ;
 • côté client : ce sont les actions de l'utilisateur, puis la modification du document en
fonction de ces actions et à l'aide de JavaScript, qui produisent une page web
dynamique.

Dans cette section, nous nous intéressons aux événements déclenchés par l'utilisateur, la section
suivante porte sur la modification du document.

ÉVÉNEMENTS QUE L'ON PEUT CAPTURER AVEC JAVASCRIPT

Voici les principaux événements que nous allons pouvoir traiter.

• onload : événements déclenchés à l'arrivée sur la page,

• onunload : événements déclenchés au départ de la page,
• onclick, onmousedown, onmouseup, onmousemove, onmouseover, onmouseout :
événements associés aux clics et déplacements de la souris,
• onkeypress, onkeydown, onkeyup : événements provoqués par l'appui d'une touche
au clavier,
• onsubmit, onchange : événements associés à la manipulation d'un formulaire par
l'utilisateur.

Ces événements sont également des noms d'attributs HTML, le contenu de ces attributs sera du
JavaScript. De manière générale, JavaScript permet d'associer une instruction JavaScript à chaque
événement : soit l'appel à une fonction de base JavaScript, soit l'appel à l'une des nos propres
procédures.

FONCTIONS JAVASCRIPT ASSOCIABLES À UNE ACTION DE L'UTILISATEUR

Nous venons de capturer un événement, il reste à lui associer une action, c'est-à-dire un code
JavaScript à exécuter, sachant que document.write n'est plus utilisable dans ce contexte.

Nous pouvons en revanche jouer sur les actions JavaScript suivantes :

• alertouvre une fenêtre avec un message donné,

• modifier window.location pour aller vers une autre page,
• setTimeout et setInterval permettent respectivement de différer et de répéter une
instruction ;
• focus permet d'activer un élément de la page (comme la case à remplir
obligatoirement dans un formulaire), blur de le désactiver.

Exemples :

// déclenchement d'une alerte immédiate (alert)

<button onclick="alert('Coucou !')">cliquez ici !<button>

// déclenchement d'une alerte dans une demi-seconde (setTimeout)

<button onclick="setTimeout('alert(\'Surprise !\')',500)">
cliquez ici !<button>

// répétition toutes les 5 secondes (setInterval)

var clock_id = setInterval('alert(\'hi hi !\');',5000);
...
clearInterval(clock_id); // fin de la répétition

INFORMATIONS SUR UN ÉVÉNEMENT CAPTURÉ

Dans le cas particulier de la frappe d'une touche au clavier, l'événement peut être capturé et
associé à l'une de nos fonctions gere_frappe comme suit :

<body onkeyup="gere_frappe(event);">

event est une variable qui décrit l'événement qui s'est produit, en particulier dans le cas d'une
touche pressée au clavier, elle contient l'information nous permettant de connaître cette touche.

Dans le cas d'un caractère imprimable, il suffit d'utiliser event.key nous donne le caractère lui-
même. Dans les autres cas, event.key fournit une chaîne de caractères correspondant à la touche
pressée :

• Delete
et Backspace pour les suppressions,
• Enter pour la touche entrée,
• ArrowLeft, ArrowUp, ArrowRight, ArrowDown pour les flèches,
• etc.

Enfin, dans le cas d'un clic à la souris dans la page, l'objet event nous fournit les coordonnées
du pixel cliqué à travers event.pageX et event.pageY.

MODIFICATION DU DOCUMENT : LE MODÈLE DOM EN JAVASCRIPT

La seconde étape pour avoir du dynamique côté utilisateur, consiste à modifier le document à
l'aide d'instructions JavaScript.

GÉNÉRALITÉS SUR LE « DOM »

Il faut savoir que les navigateurs ont en mémoire un modèle du document, c'est sur lui qu'il nous
faut intervenir. Nous allons parler de DOM (Document Object Model), avec deux sens possibles :

1. DOM désigne la structure d'arbre représentant le document et présente dans dans la

mémoire du navigateur. Nous ne savons pas ce qu'est cette structure dans le détail,
 elle peut être différente selon les navigateurs et les langages de programmation
utilisés. C'est pourtant cet arbre-document que nous voulons modifier.
2. DOM est aussi une API (Application Programming Interface, ou interface de
programmation) qui nous fournit les moyens d'interagir avec l'arbre-document. C'est
une recommandation du W3C pour gérer le contenu de documents XML, HTML en
particulier. Une telle API standardisée nous permet d'écrire des scripts indépendants
des navigateurs, résistant aux modifications futures des navigateurs, et que nous
pourrions aisément traduire dans d'autres langages que JavaScript implémentant cette
API.

En résumé, DOM désigne à la fois l'objet que nous voulons modifier et la boite à outils qui va
nous permettre de le faire.

Nous avons jusque là utilisé document.write pour insérer automatiquement du contenu.

Savons-nous ce que fait subir exactement cette méthode au document ? Non, en particulier nous
savons ni où s'ajoute le contenu produit dynamiquement, ni si nous pouvons réellement greffer un
nouveau sous-arbre, ni enfin ce qui se produit si le code HTML ainsi ajouté n'est pas du XML
valide. De plus, document.writeln ne permet ni d'accéder à la CSS, ni de supprimer une partie
du contenu. Finalement, cette méthode n'est clairement pas la bonne pour modifier un document.

Avant, d'examiner les méthodes du DOM, considérons quelques exemples de modifications du

document que nous voudrions être capables de réaliser dynamiquement :

• rendre visible/invisible une partie du document,

• modifier un élément de style de la page,
• changer une image,
• remplissage automatique de formulaires ou test de validité des données saisies dans
un formulaire avant envoi au serveur,
• etc.

Notons que, dans tous les cas, les identifiants HTML (attributs ID) vont jouer un rôle crucial
pour repérer les nœuds de l'arbre.

On distingue souvent le DOM HTML (utilisant les propriétés propres au html comme l'existence
d'identifiants ou de classes), du DOM XML (plus générique).

DOM PAR L'EXEMPLE

Dans les exemples suivants, instructions DOM HTML et instructions DOM XML sont mêlées.

// nous jouons avec les couleurs

document.fgColor = 'blue'
document.bgColor = 'red'

// nous changeons le texte d'une case de formulaire

document.form1.coul.value = 'rouge'
// curseur dans la case à remplir
document.form1.adresse.focus();
// le curseur quitte cette case
document.form1.adresse.blur();

// nous changeons une image

document.ecran.src=file;

// récupération d'un élément de la page...

e = document.getElementById('divcomment');
// ... nous le rendons invisible par modification CSS
e.style.visibility = 'hidden';

// pareil en une seule ligne

document.getElementById('divcomment').style.visibility = 'hidden';

// modification d'un attribut

document.getElementById('ecran').setAttribute(src,file);

// modification d'un attribut

e.setAttribute('style','color: #666699;');

// suppression d'un attribut

document.getElementById(bname).removeAttribute('disabled');

// définition du contenu d'un élément

e.innerHTML = 'coucou';

// ajout d'une branche à l'arbre DOM

t = document.createTextNode('coucou');
p = document.createElement('p');
p.appendChild(t);
e.appendChild(p);

// autre méthode d'ajout

e.insertBefore(p,e.firstChild)

// fils et nombre de fils d'un élément

e.childNodes
e.childNodes.length

// suppression d'un élément

e.remove();

RÉCAPITULATIF DES PRINCIPALES INSTRUCTIONS DOM

DOM HTML.

getElementById(id) // récupération de l'élément portant

l'identifiant donné

getElementsByClassName(class) // récupération du tableau des éléments de la

classe donnée
e.style // modification du style d'un élément

e.attribute // accès/modification à un attribut de l'élément

(src, value, etc.)

e.innerHTML // accès au contenu HTML, bien formé, de

l'élément

DOM XML.

getElementsByTagName(tag) // récupération des éléments dans un tableau

e.getAttribute(a) // récupération de la valeur de l'attribut a de

l'élément e

e.setAttribute(a,v) // définition de la valeur de l'attribut a pour

l'élément e

e.removeAttribute(a) // suppression de l'attribut a de l'élément e

createElement(tag) // création d'un nouvel élément

createTextNode(texte) // création d'une nouvelle feuille textuelle

e.appendChild(nf) // ajout d'un dernier fils nf à l'élément e

e.insertBefore(nf,pf) // ajout d'un fils nf à l'élément e, avant le fils

pf

e.firstChild // premier fils de e

e.lastChild // dernier fils de e

e.children // tableau des enfants-éléments de e

e.childNodes // tableau des enfants-nœuds de e

e.childNodes // tableau des attributs de e

Et pour quelques instructions de plus... sur les nœuds de l'arbre DOM.

n.nodeType // type du nœud n

n.nodeValue // texte du nœud n (s'il est de type 3)

n.nodeName // nom de l'élément (si le nœud n est de type 1)

n.parentNode // nœud père du nœud n

L'OBJET CANVAS DE HTML5 ET JAVASCRIPT

 INITIALISATIONS

Le canvas est un objet introduit dans html5 mais qui ne peut être manipulé que par JavaScript.
Ensemble ils permettent du graphisme animé, par exemple pour programmer des jeux. En cela, le
couple canvas+JavaScript a concurrencé, et finalement remplace, Flash qui auparavant permettait
ces animations.

Côté HTML, nous allons introduire la balise <canvas>, vide de contenu, mais avec un identifiant
et des dimensions.

<canvas id="world" width="..." height="..."></canvas>

Ajoutons que l'apparence du canvas (marges, bordures, etc.) peut être spécifiée en CSS.

Côté JavaScript, un code s'occupant du canvas commencera systématiquement par ces deux
lignes :

canvas = document.getElementById('world');
context = canvas.getContext('2d');

La première permet de récupérer l'objet canvas à partir de son identifiant. Avec la seconde, on
obtient un objet que l'on place dans une variable context, lequel va nous permettre de dialoguer
avec le canvas à travers des instructions deux dimensions (tracer un rectangle, un cercle, etc.). Il
n'existe pas d'autre contexte que 2D !

Pour ces instructions de dessin en 2D, le canvas utilise un système de coordonnées dont
l'origine (0,0) se trouve en haut à gauche.

DESSINER DANS LE CANVAS HTML5

Ci-dessous des exemples de traçage en couleur de différentes formes, de remplissage, de

gommage, etc.

// changement de couleurs, de trait et de remplissage

context.strokeStyle = '#000';
context.fillStyle = '#6F6';

// dessin de rectangle, un creux et un plein

context.strokeRect(x,y,largeur,hauteur);
context.fillRect(x,y,largeur,hauteur);

// forme générale pour un arc

context.arc(x,y,rayon,angledeb,anglefin,antihoraire);
// les angles sont mesurés par rapport à l'horizontal vers la droite

// dessin d'un disque avec bord

context.beginPath();
context.arc(200,150,60,0,2*Math.PI,false);
context.closePath();
context.fill();
context.stroke();

// tracé de deux traits

context.beginPath();
context.moveTo(80,250);
context.lineTo(90,250);
context.moveTo(110,250);
context.lineTo(120,250);
context.stroke();

// nettoyage d'une zone rectangulaire

context.clearRect(90,280,20,20);

// écriture de texte
context.fillStyle = 'black';
context.font = "bold 15px sans-serif";
context.fillText("-> coucou !",120,295);

ASSOCIATION D'UN CODE JAVASCRIPT À UN ÉVÉNEMENT DU CANVAS

À nouveau, il est possible d'associer une procédure JavaScript à un événement cette fois lié
au canvas, ici un clic :

<canvas id="world" width="..." height="..."

onclick="gere_clic(event)"></canvas>

Outre cette syntaxe html, il est possible d'associer un événement à une balise directement en
JavaScript. Par exemple, pour associer une action JavaScript au clic sur le canvas, nous écrivons :

canvas.addEventListener("click", gere_clic);

Dans les deux cas, un clic à la souris dans le canvas déclenchera l'exécution de la
procédure gere_clic (qu'il faut donc de définir). L'événement clic fournit les coordonnées du clic
dans la fenêtre du navigation. Si l'on veut les coordonnées dans le canvas lui-même, il convient
d'ôter les distances du canvas aux bords du navigateur.

function gere_clic(e) {
...
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
...
}