Exercices : JavaScript, langage de programmation

Pour réaliser les exercices suivants :

• ouvrez Firefox
• affichez la console Web de Firefox : Outils > Développeur Web > Console Web
• ouvrez l'ardoise JavaScript de Firefox : Outil > Développeur Web > Ardoise JavaScript
• ayez à portée de main la documentation de JavaScript sur DocHub ou sur Mozilla Developper Network.

Premiers pas

Écrire un programme qui calcule la factorielle d'un entier positif n demandé à l'utilisateur. Afficher le résultat dans la console du navigateur.

Ne pas oublier l'instruction "use strict"; au début du programme. Plus d'explications ici.

Qu'affiche le programme suivant ? Pourquoi ?

var test = "un morceau de texte";
if (test) {
    console.log("la variable est évaluée à vrai");
} else {
    console.log("la variable est évaluée à faux");
}

Sauvegarder 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 exercices.

Fonctions et tableaux

Transformer le programme de la partie précédente en créant une fonction fact qui calcule et retourne la factorielle d'un entier positif n.

Écrire une fonction carre qui prend en argument un tableau tab et qui met tous les éléments du tableau au carré. Par exemple : le résultat de l'application de carre au tableau [1,2,3,4] donnera [1,4,9,16].

Remarque : Lorsque votre console devient trop chargée en affichages, vous pouvez effacer son contenu en cliquant sur "Vider la console".

Manipulations de fonctions

Écrire une fonction applique qui prend en argument un tableau tab et une fonction f et qui applique la fonction f à tous les éléments du tableau.

Utiliser la fonction applique pour mettre au carré tous les éléments d'un tableau comme dans la partie précédente.

Objets littéraux

Executer le code du problème de géométrie présenté dans les slides (remis ci-dessous) et vérifier qu'après translation, le triangle triangle a bien pour coordonnées [{x:1, y:1}, {x:1, y:4}, {x:4, y:1}].

function translaterForme(forme, dx, dy){
    for(var i = 0; i < forme.length ; i++){
        forme[i].x += dx;
        forme[i].y += dy;
    }
}

var triangle = [{x:0,y:0},{x:0,y:3},{x:3,y:0}];

translaterForme(triangle,1,1);

console.log(triangle);

Que se passe-t-il si, dans le programme ci-dessus, on remplace le triangle par le triangle suivant : var triangle = [{x:0,z:0},{u:0,y:3},{x:3,y:0}]; ? Pourquoi ?

Modèles d'objets

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

Rectangles

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.

Tester votre programme en créant un rectangle. Par exemple :

var r = new Rectangle(20, 30, 40, 20);
console.log(r);

Ajouter une méthode aire au prototype Rectangle permettant d'obtenir l'aire d'un rectangle.

Tester votre programme. Par exemple : console.log(r.aire()); // 800

Cercles

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. Tester votre programme en créant un cercle.

Ajouter une méthode aire permettant d'obtenir l'aire d'un cercle. Tester votre programme.

Liste de formes

Créer une fonction aireFormes qui retourne la somme des aires des formes contenues dans un tableau.

Tester cette fonction. Par exemple :

console.log(aireFormes([new Rectangle(20, 30, 40, 20), new Cercle(60, 60, 20)])); // 2056.6370614359175

Que se passe-t-il si on appelle aireFormes sur le tableau [new Rectangle(20, 30, 60, 50), new Cercle(60, 60, 20), 42] ? Comparer au comportement de Java.

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

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.

Interception d'un événement

Dans votre page web "mapage.html" :

Ajouter un lien hypertexte ;

Déclencher l'affichage de la phrase "Le lien a été cliqué." dans la console web lorsque l'utilisateur clique sur le lien.

Accès au document

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

Exercices : utiliser DOM avec JavaScript

Accès au contenu du document

Afficher dans la console web la valeur de l'élément <title> de la page web "mapage.html" créée à l'exercice précédent.

Rechercher des éléments dans la page

Ecrire un programme JavaScript qui affiche dans la console web le texte des items (éléments li) présents dans la page web suivante (télécharger le fichier "listes.html" puis le modifier pour inclure le programme JavaScript).

Améliorer votre programme pour qu'il n'affiche que les items de la liste portant l'identifiant thematique.

Ajouter des éléments à la page

Dans votre programme, faire en sorte d'ajouter un item portant le texte "Item en plus" à la liste portant l'identifiant thematique.

Modifier votre programme pour que cet item supplémentaire porte un identifiant de valeur "itemEnPlus".

Remarque : un identifiant est un attribut dont le nom est id. Par exemple :

<h1 id="titre1">Titre</h1>

Exercice d'application : générer 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.

L'objectif est d'obtenir une page semblable à celle présentée dans la figure suivante :

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 ?

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.

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. 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. Elle s'utilise de la façon suivante :

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

Les figures géométriques devront ensuite être générées à l'intérieur de l'élément <svg>.

Générer des rectangles

Copier le code des formes géométriques créées dans l'exercice 1.5 dans votre programme.

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

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.

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 window.onload pourra ressembler au code suivant :

window.onload = function (){
    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 cercles

Faire de même pour les objets Cercle.

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

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 un tableau contenant les 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)]);

Bonus : générer les figures lorsque l'utilisateur clique sur un lien

Ajouter un lien hypertexte à votre page web.

Appeler la fonction dessineListe sur événement de clic sur ce lien.