CentraleSupélecDépartement informatique
Gâteau du Glouton
3 rue Joliot-Curie
F-91192 Gif-sur-Yvette cedex
TD 2 — JavaScript

L'objectif de ce TD est de se familiariser avec le langage javascript. On en profitera pour manipuler un format d'image XML : le SVG.

Pour réaliser les exercices

Il vous faut au minimum une console javascript. Tous les navigateurs en proposent une avec les outils de développement. Firefox est cependant conseillé ici car il a la possibilité d'éditer et d'exécuter des fichier javascript directement.

Avec Firefox donc:

  • affichez la console Web de Firefox : Outils > Développeur Web > Console Web
  • ouvrez l'ardoise JavaScript de Firefox : Outils > Développeur Web > Ardoise JavaScript
  • consulter les tutos Javascript, JSclient et DOM
  • ayez à portée de main la documentation de JavaScript sur Mozilla Developper Network

Sinon, vous pouvez le faire en WISIWIG sur internet, avec un éditeur HTML, par exemple JSbin

Remarques

  • Sauvegardez régulièrement le contenu de votre ardoise JavaScript (Fichier > Enregistrer, ou ctrl+s). Vous pouvez éventuellement sauvegarder le contenu de votre ardoise dans des fichiers différents pour les différentes parties du TD.
  • N'oubliez pas l'incantation "use strict"; pour avoir des messages d'erreur et des warnings
  • Lorsque votre console devient trop chargée en affichages, vous pouvez effacer son contenu en cliquant sur "Vider la console".

1 - Javascript, un langage de programmation

  • Écrivez un programme qui calcule la factorielle d'un entier positif n demandé à l'utilisateur. Affichez le résultat dans la console du navigateur.
    • console.log("blah blah blah") imprime la chaine de caractère dans la console (n'oubliez pas de l'ouvrir !)
    • prompt("Une question") lance un pop-up permettant à l'utilisateur de rentrer une chaine de caractère
    • Le résultat est une chaine de caractère...
    • Vous pouvez utiliser parseInt("1234") pour interpréter une chaine de caractères en un entier.
  • Si ce n'est pas deja fait, encapsulez le programme de la partie précédente en une fonction fact qui calcule et retourne la factorielle d'un entier positif n (donc en utilisant le mot-cle function, comme suit).
function fact(n) {

   // code de la fonction

}
  • Écrire une fonction applique qui prend en argument un tableau tab et une fonction f, et qui a le comportement suivant:
applique(f,[1,2,3]);
// retourne le tableau [f(1),f(2),f(3)]

Votre fonction pourrait ressembler à cela:

function applique(f, tab) {

   // code de la fonction

}
  • Utilisez les fonctions fact et applique pour faire la factorielle de tous les éléments d'un tableau:
applique(fact,[1,2,3,4,5,6]);
  • Utilisez applique à une fonction non-nommée:
applique(function(n) { return (n+1); } , [1,2,3,4,5,6]);

Essayez le code et assurez-vous de comprendre ce qui se passe.

2 - JavaScript dans une page web

Nous allons maintenant utiliser JavaScript dans une page web. En conséquence, dans les exercices suivants, vous écrirez vos programmes JavaScript soit directement dans le code HTML de la page web, soit dans un fichier ".js" que vous incluerez dans la page web.

2.1 - Premiers pas

Créer un fichier HTML "mapage.html" contenant un titre et un paragraphe de texte.

Par exemple :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ma Page Web</title>
  </head>
  <body>
    <h1>Bienvenue sur ma page !</h1>
    <p>Voici un paragraphe.</p>
  </body>
</hml>

Inclure dans cette page un programme JavaScript affichant le texte "Le code JavaScript s'exécute." dans la console web pendant le chargement de la page.

  • En principe c'est trivial: le code d'un fichier javascript chargé par le navigateur s'exécute tout de suite.

2.2 - Interception d'un événement

Dans votre page web "mapage.html", déclenchez l'affichage de la phrase "Le paragraphe a été cliqué" dans la console web lorsque l'utilisateur clique sur le paragraphe.

  • Utilisez l'attribut onclick qui capture l'évènement click...

2.3 - Accès au document

Afficher dans la console web l'objet document de la page web "mapage.html".

Attention

On ne peut manipuler le contenu d'une page que lorsque cette page est entièrement chargée, ce qui n'est pas le cas lorsque le JavaScript commence à s'exécuter. En revanche la fonction désignée par onload est justement appelée lorsque le chargement de la page est terminé...

L'idée est donc de placer le code qui manipule à l'intérieur d'une fonction et de faire appeler cette fonction par l'attribut onload de <body>.

3 - Utiliser DOM avec JavaScript

3.1 - Accès au contenu du document

Afficher dans la console web la valeur de l'élément <title> de la page web "mapage.html".

  • Vous pouvez aller le chercher "à la main" en parcourant l'arbre
  • Ou directement avec getElementsByTagName (sachant que cette fonction renvoie un tableau)

3.2 - Rechercher des éléments dans la page

Ecrire un programme JavaScript qui affiche dans la console web les attributs href des balises <a> présentes dans la page web suivante (téléchargez le fichier puis modifiez-le pour inclure le programme JavaScript).

  • getElementsByTagName est encore votre ami.

3.3 - Modifions la page !

A. Dans votre programme, changer le style des liens: mettez-les en gras, ou en couleur...

  • Utilisez par exemple setAttribute pour définir l'attribut style des éléments qui vous intéressent.
  • N'oubliez pas les points-virgules à la fin. Par exemple, voila un style potentiel:
"color: green; font-weight: bold;"

B. Modifiez le contenu des balise <a>: ajouter une image (par exemple Une belle image de lien - Copiez l'adresse du lien pour l'utiliser) en fin de texte.

  • Pour chaque élément a:
    • créez d'abord un nouvel élément tout neuf de type img
    • mettez-lui le bon attribut src avec la fonction setAttribute
    • ajoutez-le à la fin des fils de la balise a avec appendChild
  • Attention: créez bien un nouvel élément img pour chaque balise a ! Si vous ne comprenez pas pourquoi, demandez-moi.

4 - Des formes géométriques dans une page web

Dans cet exercice, nous allons utiliser JavaScript pour générer des formes géométriques dans une page web grâce à SVG, un langage textuel permettant de décrire des figures.

4.1 - Premiers pas avec SVG

Observer le code source de ce petit exemple en SVG (clic droit sur la page > Code source de la page). Comment décrit-on un rectangle en SVG ? Et un cercle ?

4.2 - Préparation de la page web

Créer une page web qui contient un titre h1 et un élément div avec un identifiant déterminé (par exemple fig). Ce div sera le conteneur de notre figure SVG.

4.3 Préparation du programme JavaScript

Ajouter dans la page web un programme JavaScript qui recherche dans la page l'élément div qui contiendra la figure, et lui ajoute un enfant correspondant à l'élément <svg>.

Attention

pour créer un élément SVG, il faut impérativement utiliser la fonction createElementNS de la façon suivante :

window.document.createElementNS("http://www.w3.org/2000/svg", "nomElementACreer");

Cette fonction a pour effet de créer les éléments SVG dans le namespace SVG (http://www.w3.org/2000/svg), ce qui permet au navigateur de les différencer des éléments HTML.

Les figures géométriques devront ensuite être générées à l'intérieur de l'élément <svg>. (Et donc dans l'espace de nom svg)

4.4 - Générer des rectangles

On va représenter un rectangle par un tableau de quatre valeurs: [x,y,largeur,hauteur]

  1. Écrivez une fonction dessineRectangle qui prend en argument un objet DOM et une représentation de rectangle et qui :
  • créée un nouvel élément correspondant à la balise SVG dessinant la forme géométrique rectangle ;
  • insère ce nouvel élément comme enfant de l'élément passé en paramètre de la fonction.

Attention : pour créer l'un de ces éléments SVG à l'aide du DOM, vous devez absolument les créer dans le namespace SVG, c'est-à-dire http://www.w3.org/2000/svg. Pour cela utilisez la fonction createElementNS comme précédemment.

  1. Tester la méthode dessineRectangle sur un objet rectangle en lui passant en paramètre l'élément <svg> créé à la question 4.3. La fonction donnée à onload pourra ressembler au code suivant :
function fonctionApresOnload(){
    var svg = … // code permettant de générer l'élément <svg>

    var r = [30, 20, 100, 40];
    dessineRectangle(svg, r);
}

4.5 - Générer les figures lorsque l'utilisateur clique sur un lien

  1. Ajoutez un lien hypertexte à votre page web (il n'est pas utile de lui mettre un attribut href).
  2. Appelez la fonction dessineRectangle sur événement de clic sur ce lien : un rectangle est dessiné lors du clic de souris.

4.6 - Figures aléatoires

  1. Modifiez votre page et votre programme pour que le clic sur le lien ajoute un rectangle dont la position et la taille sont aléatoirement généré (Vous pouvez utiliser la fonction Math.random() pour cela).
  2. Mettez de la couleur aux rectangles générés !

Pour aller plus loin : les objets

Faites la section sur les objets du tuto Javascript.

Modèles d'objets

Dans cette partie, nous allons créer des modèles objets pour représenter des formes géométriques.

  1. Créer un constructeur d'objets Rectangle, un rectangle étant défini par un point de coordonnées x et y, une largeur l et une hauteur h.
  2. Tester votre programme en créant un rectangle. Par exemple :
var r = new Rectangle(20, 30, 40, 20);
console.log(r);
  1. Ajouter une méthode aire au prototype Rectangle permettant d'obtenir l'aire d'un rectangle.
  2. Tester votre programme. Par exemple :
console.log(r.aire()); // 800
  1. De même, créer un modèle d'objet Cercle, défini par un point de coordonnées x et y et un rayon r. Ajouter une méthode aire permettant d'obtenir l'aire d'un cercle. Tester votre programme.
  2. Créer une fonction aireFormes qui retourne la somme des aires des formes contenues dans un tableau.
  3. Tester cette fonction. Par exemple :
console.log(aireFormes([new Rectangle(20, 30, 40, 20), new Cercle(60, 60, 20)]));
// 2056.6370614359175
  1. Que se passe-t-il si on appelle aireFormes sur le tableau [new Rectangle(20, 30, 60, 50), new Cercle(60, 60, 20), 42] ?
  2. Comparer au comportement de Java (indice: types!).

Générer des objets rectangles

On va maintenant faire un code plus propre que dans la question 4 en utilisant notre classe Rectangle.

  1. Copier le code des formes géométriques créées dans l'exercice précédant dans votre programme.

Attention : le code des formes géométriques doit se trouver en dehors de la fonction désignée par onload.

  1. Ajouter au modèle d'objet Rectangle une méthode dessineSVG qui prend en paramètre un élément DOM et qui :
  • créée un nouvel élément correspondant à la balise SVG dessinant la forme géométrique rectangle ;
  • insère ce nouvel élément comme enfant de l'élément passé en paramètre de la fonction.

Attention : pour créer l'un de ces éléments SVG à l'aide du DOM, vous devez absolument les créer dans le namespace SVG, c'est-à-dire http://www.w3.org/2000/svg. Pour cela utilisez la fonction createElementNS comme précédemment.

  1. Tester la méthode dessineSVG sur un objet rectangle en lui passant en paramètre l'élément <svg> créé à la question 4.3. La fonction donnée à onload pourra ressembler au code suivant :
function fonctionApresOnload(){
    var svg = … // code permettant de générer l'élément <svg>

    var r = new Rectangle(30, 20, 100, 40);
    r.dessineSVG(svg);
}

Générer des objets cercles

Un cercle est caractérisé par un triplet (x,y,rayon).

  1. Faire de même pour des objets Cercle.
  2. Tester la méthode dessineSVG sur un objet cercle en lui passant en paramètre l'élément <svg> créé à la question 4.3. Par exemple :
var svg = … // code permettant de générer l'élément <svg>

var c = new Cercle(40, 60, 30);
c.dessineSVG(svg);

Générer des listes de figures propres avec nos objets

L'objectif est maintenant de réorganiser le code que vous avez écrit jusqu'à présent pour créer une fonction chargée de faire se dessiner toutes les figures qu'on lui passe dans une liste.

Créer une fonction dessineListe qui prend en argument la liste des objets à dessiner dans la page web. Cette fonction :

  • recherche dans la page l'élément div qui contiendra la figure, et lui ajoute un enfant correspondant à l'élément <svg> ;
  • demande à chaque objet de se dessiner dans l'élément <svg>.

Tester cette fonction. Par exemple :

dessineListe([new Rectangle(30, 20, 100, 40), new Cercle(40, 60, 30)]);