Notes de cours sur le langage JavaScript

Dans ce cours, nous commençons par les éléments de base du langage JavaScript, en parallèle avec le langage de description vu en cours d'algorithmique (variables, types, structures de contrôle, procédures et fonctions, etc.). Nous faisons ici le choix de ne pas insister sur les aspects programmation orientée objet du JavaScript.

Dans un second temps, nous nous intéressons à l'utilisation de JavaScript pour la prise en charge des interactions avec le visiteur d'une page web : la prise en compte de ses actions, la modification dynamique du document HTML et d'un objet HTML5 qu'est le canvas.

Types simples, variables, expressions et instructions JavaScript

Instructions et blocs d'instructions

Les scripts JavaScript trouvent leur place au sein de pages HTML. Ainsi, le code JavaScript doit être encadré par une balise <SCRIPT> et la présence d'un attribut LANGUAGE="JavaScript" pour cette balise est obligatoire ou non selon le dialecte HTML utilisé : en html5, nous indiquons simplement <script>.

Dans le langage JavaScript, les blocs d'instructions sont délimités par des accolades : { est l'équivalent d'un Début, } d'une Fin.

Chaque instruction est impérativement suivie d'un point-virgule (;).

Types et variables

JavaScript autorise la manipulation de types classiques : booléens, entiers, réels, caractères et chaîne de caractères et tableaux. Cela dit les types ne sont pas déclarés, uniquement les variables, cela à l'aide du mot-clef var.

var x;         // simple déclaration
var pi = 3.14; /* déclaration
                  et affectation d'une valeur */
var z = 'toto';

Notons les deux syntaxes possibles pour écrire des commentaires dans le code JavaScript (// est réservé aux commentaires qui restent sur une même ligne).

Enfin, une valeur null permet d'affecter une variable sans pour autant lui donner une valeur du type de la variable.

Comme suggéré ci-dessus, le symbole = est réservé à l'affectation d'une valeur à une variable. Le symbole ==, lui, permet d'exprimer un test d'égalité qui ne modifie en rien les variables.

Opérateurs

Nous disposons en JavaScript des opérateurs arithmétiques classiques : +, -, *, /, % pour l'opération modulo, et de l'opérateur de concaténation entre chaînes de caractères noté par un plus (+, comme pour l'addition entre entiers).

var i = 10;
i = i + 1;
i = i + 9;
var texte = 'La variable i vaut '+i;
texte = texte+"\n";

Il existe d'autres manières, souvent pratiques, d'exprimer ces opérations. Par exemple, les opérations ci-dessus sont strictement équivalentes à :

i = 10;
i++;
i += 9;
texte  = 'La variable i vaut ';
texte += i;
texte += "\n";

Nous retrouvons également les habituels opérateurs logiques : le ET (noté &&), le OU (noté ||) et le NON(noté !).

Notons enfin que les comparaisons comme < peuvent porter sur des nombres mais aussi sur des chaînes de caractères (il s'agit alors d'une comparaison alphabétique).

Instruction de sortie et chaînes de caractères

L'affichage est réalisé à l'aide des méthodes write et writeln de l'objet document : il s'agit d'écrire du texte ou des balises au sein du code HTML, à l'endroit où est placé le script.

Le langage JavaScript permet de délimiter les chaînes de caractères soit par des apostrophes, soit par des guillements. Il est pratique d'utiliser les guillemets lorsque le texte contient une apostrophe, et vice-versa. Il est aussi possible d'utiliser un backslash (signe \) pour neutraliser la signification JavaScript d'un caractère.

var prenom = 'Toto';
document.write("salut ");
document.writeln(prenom);
document.writeln("<p>ça va aujoud'hui ?</p>");
document.writeln('<p>oui, ça va aujoud\'hui !</p>');

Fonctions mathématiques qui peuvent servir

// les arrondis : en dessous, au plus proche, au dessus
Math.floor(...)
Math.round(...)
Math.ceil(...)

// de l'aléatoire : un entier entre 0 et 1
Math.random()

// de la géométrie : la valeur de Pi
Math.PI

Fonctions et procédures en JavaScript

Rappelons que procédures et fonctions peuvent utiliser des paramètres et contenir des instructions quelconques. Par contre, 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, ce qui ne sera jamais le cas pour une 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
}

// procédure qui affiche un texte donné en le centrant
function affiche_au_milieu (msg) {
  document.write('<center>');
  document.write(msg);
  document.writeln('</center>');
}

// appel à la procédure et renseignement de son paramètre
affiche_au_milieu('coucou');

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)
}

// fonction qui calcule la somme de deux entiers et la renvoie
function addition (x,y) {
  var s = x+y;
  return(s)
}

// appel à la fonction et renseignement de ses paramètres
var somme = addition(2,2);
document.writeln('le résultat est '+somme);

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.

Structure conditionnelle : le si alors sinon

if (une condition ici) {
  // des instructions ici
} else {
  // des instructions ici
}

Structure itérative : la boucle tant que

while (une condition ici) {
  // des instructions ici
}

Structure itérative : la boucle pour

Pour cette dernière boucle, 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 (var i=0 ; i<10 ; i++) {
  // des instructions ici
}

Un dernier type de boucle est proposé par JavaScript mais il est dédié à 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.

var t = new Array();
t[0]  = 2;
t[1]  = 3.14;
t[2]  = 'coucou';

// autre syntaxe pour définir un tableau
var notes = new Array(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 = new Array();
mails['torre'] = 'torre@univ.fr';
mails['toto']  = 'toto.machin@free.fr';
document.writeln('Mail de toto = '+mails['toto']);

Parcours de tableaux JavaScript : la boucle for in

Cette boucle est dédiée au parcours de tableaux, qu'ils soient simples ou associatifs :

// syntaxe générale
foreach (var k in t) {
  // des instructions ici portant sur t[k]
}

// ... et sur un exemple
var carnet = new Array();
carnet['pierre'] = '19 ans';
carnet['paul'] = '26 ans';
carnet['jacques'] = '30 ans';

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

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, onunload : événements déclenchés à l'arrivée et 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. Nous pourrons en particulier jouer sur les actions JavaScript suivantes :

• alert ouvre une fenêtre avec un message donné,
• modifier window.location pour aller vers une autre page,
• document.write écrit un texte donné,
• 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 nous pouvons ensuite connaître la touche pressée à l'aide de event.keyCode et de la convention suivante :

• 8 : backspace,
• 32 : espace,
• 37 : flèche gauche,
• 38 : flèche haut,
• 39 : flèche droite,
• 40 : flèche bas.

Dans le cas d'un clic : event.pageX, 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.

Dans la suite, nous distinguons un DOM historique qui traite explicitement des documents HTML, et un DOM générique capable de manipuler tout document XML.

Méthodes JavaScript du « DOM HTML »

Dans ce premier cas, nous modifions explicitement des propriétés du document HTML.

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

Méthodes JavaScript du « DOM XML »

Dans ce cas, nous ne travaillons plus que sur la structure d'arbre XML du document, les méthodes utilisées ne sont pas propres au HTML.

// 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');

// ajout d'une branche à l'arbre DOM
t = document.createTextNode('coucou');
p = document.createElement('p');
p.appendChild(t);
e.appendChild(p);

// fils et nombre de fils d'un élément
e.childNodes
e.childNodes.length

// suppression du 1er fils
e.removeChild(e.childNodes[0]);

// autres opérations
replaceChild
insertBefore

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.

Côté HTML :

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

Apparence à spécifier en CSS...

Initialisations JavaScript :

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

Dessiner dans le canvas html5

Rectangles et cercles, origine en haut à gauche.

// 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,radius,startAngle,endAngle, clockwise);

// dessin d'un disque avec bord
context.beginPath();
context.arc(x,y,zoom,0,Math.PI*2,true);
context.closePath();
context.fill();
context.stroke();

// autres instructions pour composer dans le canvas
context.beginPath();             // deux traits
context.moveTo(80,250);
context.lineTo(90,250);
context.moveTo(110,250);
context.lineTo(120,250);
context.stroke();
context.clearRect(90,280,20,20); // nettoyage d'un rectangle
context.fillStyle = 'black';     // écriture de texte
context.font = "bold 15px sans-serif";
context.fillText("-> coucou !",120,295);

Association d'un code JavaScript à un événement du canvas

Exemples :

canvas.addEventListener("click", gere_clic, false);
window.addEventListener('keydown',gere_frappe, true);

Paramètres à renseigner :

• événement
• fonction associée à déclencher
• booléen useCapture

Pour repérer le pixel cliqué, il faut jouer sur les coordonnées du pixel cliqué dans la page et sur la position du canvas dans cette page.

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