Travaux pratique JavaScript, Übungen von Inszenierung (Werkstatt)

Nur auf Docsity: Lade Travaux pratique JavaScript und mehr Übungen als PDF für Inszenierung (Werkstatt) herunter!

D´epartement Informatique

IUT de Saint-Die des Vosges

TD/TP de Javascript

Author :

PF Villard

email :

pierre-frederic.villard@

univ-lorraine.fr

KIT DE SURVIE JAVASCRIPT - TD

Pierre BIASUTTI

IUT Informatique, Licence Pro

1 Rappels de Javascript

Variables En JS, la d´eclaration de variable se fait `a l’aide du pr´efixe var.

Exemple 1 var a; 2 var b = 1.41; 3 var c = "texte";

Conditions Les conditions JS se font au travers des mots-cl´es if, else if, else.

Exemple 1 if(a == 1){ 2 // Condition 1 3 } 4 else if(b < 12){ 5 // Condition 2 6 } 7 else{ 8 // Condition 3 9 }

Notez que l’usage des accolades n’est n´ecessaire que lorsque le bloc de la condition contient plus d’une instruction. Dans le cas ou l’on souhaite cr´eer beaucoup de conditions par rapporta la valeur d’une variable, on peut utiliser les mots-cl´es switch, case, break.

Fonctions Les fonctions JS se d´eclarent `a l’aide du mot-cl´e function. Une valeur peut ˆetre retourn´ee en utilisant le mot-cl´e return

Exemple 1 function divideByX(n, x){ 2 return n / x; 3 }

Les fonctions peuvent aussi ˆetre d´eclar´ees comme des variables. Ainsi, une fonction peut ˆetre pass´e comme argument d’une autre fonction. Exemple 1 var divideByX = function(n, x){ return n / x; };

Exercice 01. Ecrire un objet litt´eral “Etudiant” contenant les informations suivantes: Nom, Pr´enom, Num´ero ´etudiant, Date de naissance (au format repr´esent´e sous la forme d’un tableau de 3 entiers Jour- Mois-Ann´ee).

Exercice 02. Ecrire le constructeur d’un objet Etudiant poss´edant les mˆemes attributs que dans l’exercice

1. Le constructeur doit prendre en argument Nom, Pr´enom, Num. ´etudiant et Date de Naissance. Rajouter a ce constructeur les fonctions suivantes:
   • presenter: affiche une courte phrase r´esumant les diff´erentes informations de l’´etudiant dans la console
   • age: calcul l’age de l’´etudiant en fonction de sa date de naissance

Enfin, cr´eer deux objet Etudiant correspondant `a deux Etudiants diff´erents.

2.2 Prototypes

Prototype Le Javascript n’a pas de concept de classe. Cependant, les prototypes peuvent ˆetre utiles pour d´efinir des fonctions de base `a des objets. Exemple 1 var Personne = { 2 nom: "", 3 prenom: "", 4 dateNaissance: [1, 1, 1977], 5 6 init: function(nom, prenom, dateNaissance){ 7 this.nom = nom; 8 this.prenom = prenom; 9 this.dateNaissance = dateNaissance; 10 }, 11 12 decrire: function(){ console.log( ... ); } 13 }; 14 15 var pers = Object.create(Personne); 16 pers.nom = "Dupont"; 17 pers.prenom = "Michel"; 18 pers.dateNaissance = [12, 5, 1971]; 19 20 // Ou 21 22 pers.init(‘‘Dupont’’, ‘‘Michel’’, [12, 5, 1971]);

Ici, la fonction membre create de l’objet g´en´erique Object permet de cr´eer une r´ef´erence a l’objet Personne dans la variable pers. De ce fait, si l’on souhaite acc´eder a un attribut qui n’existe pas dans pers, le Javascript ira automatiquement chercher cet attribut dans l’objet Personne. Ce concept est tres utilis´e pour d´eriver des objets depuis d’autres objets. Par exemple, en partant de notre objet Personne, on peut d´efinir un objet Etudiant poss´edant tous les attributs d’une Personne ainsi que des attributs suppl´ementaires.

Exemple 1 var Etudiant = Object.create(Personne); // On cr´ee la r´ef´erence `a l’objet Personne 2 Etudiant.numEtudiant = 0; 3 Etudiant.initEtudiant = function(nom, prenom, dateNaissance, numEtudiant){ 4 // On appelle la fonction de l’objet Personne 5 this.init(nom, prenom, dateNaissance); 6 7 this.numEtudiant = numEtudiant; 8 } 9 10 var etu = Objet.create(Etudiant); 11 etu.initEtudiant(‘‘Durand’’, ‘‘Kevin’’, [26, 7, 1991], 574812);

Exercice 03. En partant des exemples au dessus, cr´eer un objet Professeur d´eriv´e de l’objet Personne qui contient en plus l’adresse mail du professeur comme attribut. Cr´eer une fonction initProfesseur permettant d’initialiser une nouvelle instance de cet objet. Enfin, modifier la fonction decrire pour qu’elle affiche l’int´egralit´e des informations contenues dans l’objet Professeur. Testez votre code en cr´eant deux professeurs.

Exercice 04. Modifier maintenant le prototype Personne en lui ajoutant un attribut taille et une fonction direAge qui calcul l’age de la personne en fonction de sa date de naissance. Ces attributs sont-ils d´efinis pour les professeurs cr´ees dans l’exercice 03? Pourquoi?

3 jQuery

jQuery est une bibliotheque Javascript dont l’usage est extrˆemement r´ependu sur dans le d´eveloppement web. Cette bilbliotheque integre de nombreuse fonctions permettant la manipulation du DOM en toute simplicit´e. De plus, elle permet de rendre les pages web plus int´eractive grˆacea la gestion de nombreuses int´eractions entre l’utilisateur et la page.

3.1 Mise en place de jQuery

La bibliohteque jQuery consiste en un unique fichier JS contenant l’int´egralit´e des fonctions. Ce fichier est t´el´echargeable depuis le site de jQuery (http://jquery.com) dans sa version compress´ee (jquery-X.X.X.min.js). Une fois le fichier t´el´echarg´e, on l’inclue dans une page HTML de la maniere suivante: Exemple 1 2 3 4 Titre de la page 5 6 7 8 11 12 13 ... 14 15

De mani`ere g´en´erale, on execute le code de jQuery une fois tout le DOM charg´e. Pour ce faire, on d´efini une fonction qui s’executera une fois la page completement charg´ee:

Notez qu’il est aussi possible d’utliser les fonctions .parent, .children pour se d´eplacer dans le DOM. Exemple 1 $(’div’).children(’p’) // Les paragraphes contenus dans des divs 2 $(’p’).parent() // Le parent de chaque paragraphe

La fonction jQuery renvoie syst´ematiquement un objet jQuery. Celui-ci fonctionne d’une maniere assez similairea celle d’un tableau. Il possede un attribut “length” qui permet de connaitre le nombre d’´el´ements concern´es par la requˆete. Pour la suite des exercices, nous travaillerons sur les fichiers HTML disponiblesa l’adresse suivante: http://labri.fr/perso/pbiasutt/KDJS/td01.zip

Exercice 05. a) Ecrire un script Javascript qui affiche dans la console le nombre de lien (a) dans le fichier exo5.html. b) Mˆeme question pour tous les paragraphe (p) dont la classe est “.paragraphe”. c) Mˆeme question pour tous les input (input) dont le type n’est pas “text”. d) Mˆeme question pour toutes les listes (ul) contenant plus de 2 ´el´ements.

Exercice 06. La fonction .css(propriete, valeur) permet de modifier une propri´et´e CSS de l’´el´ement pr´ealablement s´electionn´e. A l’aide de cette fonction, et de la priori´et´e “color” de CSS, mettez en rouge tous les premiers item de liste (li) du fichier exo6.html. Mettez en bleu le premier et le dernier paragraphe (p) de chaque bloc (div). A l’aide de la propri´et´e “border” de CSS, mettez un bord rouge de 1px `a toutes les images contenues dans une liste.

3.3 Modification d’un ´el´ement

jQuery impl´emente un large ensemble de fonction permettant de modifier les ´el´ements du DOM.

Attributs La m´ethode .attr(attribut, valeur) permet de modifier ou d’ajouter un attribut a un ´el´ement. Notez que la m´ethode .removeAttr(attribut) permet de supprimer un attribut d’un ´el´ement. Exemple 1 $(’a’).attr(’about’, ’_blank’); // Rajoute l’attribut about=_blanka tous les 2 $(’a’).removeAttr(’href’); // Supprime le lien de tous les

Exercice 07. Dans le fichier exo7.html, ´ecrire un script Javascript qui transforme tous les champs de texte en bouton et qui remplace toutes les images par une image que de votre choix.

Jouer avec les classes Les classes permettent de rajouter des propri´et´es CSS a plusieurs ´el´ementsa la fois. jQuery permet de manipuler les classes des ´el´ements du DOM tres simplement Exemple 1 $(’p’).addClass(’classe’); // Ajoute la classe ‘‘.classe’’a tous les paragraphes 2 $(’p’).removeClass(’classe’); // Retire la classe ‘‘.classe’’ a tous les paragraphes 3 $(’p’).toggleClass(’classe’); // Ajoute la classe si elle n’y est pas, la supprime sinon 4 $(’p’).hasClass(’classe’) // Retourne vrai si l’´el´ement possede la classe

Exercice 08. La balise style permet de d´efinir du CSS directement dans un fichier HTML. Elle se place avant l’ouverture de la balise body. a) A l’aide de cette balise, d´efinissez les classe .orange, .violet, .gras, .italique ayant respectivement pour effet de mettre le texte en orange, en violet, en gras et en italique. Dans le fichier exo8.html, ´ecrire un script qui met en orange tous les premiers ´el´ements d’une liste et en violet tous les derniers ´el´ements d’une liste. Rajouter un script qui met tous les titres (h1, h2, etc.) en italique, et tous les paragraphes en gras. b) Ajoutez maintenant la classe violet `a tous les premiers ´el´ements de liste. Comment remettre les tous les premiers ´el´ements de liste en orange? c) Ajoutez la classe violet aux balises h1. Ajoutez maintenant la classe orange. Qu’observez-vous? Expliquez pourquoi.

3.4 Ajouter / Supprimer des ´el´ements

En plus de modifier les propri´et´es CSS des ´el´ements, jQuery poss`ede plusieurs fonction permettant la modi- fication du DOM. Ainsi, on peut ajouter, modifier ou supprimer des ´el´ements de l’arborescence de la page.

Exercice 09. A l’aide de la console Javascript du navigateur, observer les effets des instructions suivantes sur un des fichiers utilis´e au dessus: Exemple 1 console.log($(’ul’).text()); 2 console.log($(’ul’).html()); 3 $(’p’).text(’lien’); 4 $(’p’).html(’lien’); 5 console.log($(’input:text[name=nom]’).text()); 6 console.log($(’input:text[name=nom]’).val());

A quoi servent chacune de ces fonctions?

Exercice 10. A l’aide de la console Javascript du navigateur, observer les effets des instructions suivantes: Exemple 1 $(’p’).append(’Javascript’); 2 $(’p’).prepend(’Javascript’); 3 $(’p’).remove(); 4 $(’ul’).before(’Before’); 5 $(’ul’).after(’After’);

A quoi servent chacune de ces fonctions?

Exercice 11. A l’aide de la console Javascript du navigateur, observer les effets des instructions suivantes: Exemple 1 $(’SUPER!’).appendTo(’li’); 2 $(’OK!’).prependTo(’li’); 3 $(’HEY!’).insertBefore(’li’); 4 $(’OH!’).insertAfter(’li’);

A quoi servent chacune de ces fonctions?

V´erifier vos r´eponses avec le charg´e de TD avant de passer `a la suite.

3.5 Les ´evenements

L’utilisation du Javascript est tr`es utilis´ee dans le but de rendre les pages web plus dynamiques. Il permet de faciliter l’interaction entre l’utilisateur et la page web. jQuery impl´emente de nombreuses fonctions pour simplifier la gestion de ces int´eractions, qu’elles soient faites depuis la souris, le clavier, ou encore en redimensionnant la page. La structure g´en´erale d’une interaction avec jQuery se d´efinit comme suit: Exemple 1 $(’element’).action(fonctionAExecuter);

Ici, lorsque l’interaction “action” est effectu´ee sur un ´element “element” du DOM, la fonction “fonctionAEx- ecuter” est appel´ee. En g´en´eral, pour ´eviter de devoir d´efinir une nouvelle fonction pour chaque int´eraction, on fait appel `a un callback. Un callback est une fonction sans nom que l’on passe en argument et qui sera execut´ee automatiquement par une autre fonction. Dans le cas d’une interaction jQuery, on peut d´efinir le sch´ema g´en´eral suivant: Exemple 1 $(’element’).action(function(){ 2 // Ne s’execute que lorsque ‘‘action’’ est effectu´e 3 });

b) Comment exectuer une fonction lorsque le formulaire est valid´e/soumis? c) Ecrire un script qui, lorsque le formulaire est valid´e/soumis, r´ecup`ere les valeurs du formulaire et les stock dans un objet “Utilisateur” contenant les attributs appropri´es. L’objet devra ensuite ˆetre affich´e dans la console.

Exercice 15. On cherche maintenant a faire un g´en´erateur de page web en Javascript. L’id´ee est qu’avec l’aide d’un formulaire tres simple, on puisse cr´eer de nouveaux ´el´ements dans une page vierge. On peut ensuite choisir d’afficher le code HTML de la page ou de vider le contenu de la page. Le ficher exo15.html contient le squelette de notre g´en´erateur.

Selon le type d’´el´ement s´electionn´e, la valeur du champs “contenu” repr´esentera:

• h1: le contenu du titre
• h2: le contenu du titre
• h3: le contenu du titre
• p: le contenu du titre
• img: l’url de l’image
• a: l’url du lien
• input:text: le placeholder
• input:submit: le titre du bouton
• label: le titre du label

Lorsque l’option “Ins´er´er avant” est coch´ee, le nouvel ´el´ement s’insere avant tous les autres dans la page. Sinon, il s’insere `a la suite. Quand on clique sur le bouton “Ajouter”, le nouvel ´el´ement est cr´e´e dans le div “conteneur”. Lorsque l’on clique sur le bouton “G´en´erer”, une popup s’affiche avec le code HTML de la page g´en´er´ee. Et lorsque l’on clique sur “R´einitialiser”, la page est vid´ee de son contenu.

Table des mati`eres

• 1 Aide au TD/TP
  • Structure
  • Attributs des balises
  • Modification d’attribut en Javascript
  • Quelques fonctions Javascript
  • Javascript sans bouton
  • Page web sur deux colonnes
  • Construire du texte en Javascript
• 2 Exercices simples
  • Exercice 1 - Modification de texte
  • Exercice 2 - Modification d’images
  • Exercice 3 - Op´erations math´ematiques
  • Exercice 4 - Les conditions
  • Exercice 5 - Les boucles
  • Exercice 6 - Les tableaux

Quelques fonctions Javascript

• Math´ematique (http://www.w3schools.com/js/js_math.asp) :

Math.sin(), Math.random(),Math.min(), Math.max(), Math.round(), Math.abs(), ...

• Date et heure (http://www.w3schools.com/js/js_date_methods.asp) :

var j = new Date();

puis, au choix :

j, j.getDate(), j.getFullYear(), j.getHours(), j.getMinutes(), j.getMonth(), ...

Javascript sans bouton

Pour effectuer une page web avec du Javascript sans bouton, appeler directement les fonctions

cr´ees avant la balise fermante et ne pas mettre de boutton.

Exemple :

2

3

4

Page web sur deux colonnes

Rajouter dans entre les balises ... :

1

Construire du texte en Javascript

Dans ces exercices, le texte `a afficher est d´efini par : x.innerHTML=text;, comme nous l’avons

d´ej`a vu.

Pour construire un texte `a stoquer dans la variable text :

• Initialiser le a une chaine de caractere nulle : var text="";
• Compl´eter le avec du texte en utilisant + : text=text+" je rajoute du texte";
• Compl´eter le avec des nombres en utilisant + : text=text+ 745.
• Compl´eter le avec des variables en utilisant + : text=text+ beta
• Compl´eter le en utilisant des + : text=text+" je rajoute du texte"+ 745.18 +beta

2 Exercices simples

Exercice 1 - Modification de texte

1. Ecrire une page web qui contient un bouton ”Texte2” qui permet de passer du texte ”Qui est

In” au texte ”qui est Out” comme ci-dessous :

2. Ecrire une page web qui contient un bouton ”Texte1” et un bouton ”Texte2” qui permet de

passer du texte ”Qui est In” au texte ”qui est Out” et inversement comme ci-dessous :

3. Ecrire une page web qui contient en plus de pr´ec´edemment, un bouton ”change couleur” qui

permet d’avoir le texte en rouge comme ci-dessous :

4. Ecrire une page web qui contient en plus de pr´ec´edemment, un bouton ”change taille” qui

permet d’avoir le texte en taille de 30 pixels comme ci-dessous :

5. (question bonus) Changer la mise en page pour avoir une page plus esth´etique

6. (question bonus) Ecrire une page web qui contient en plus de pr´ec´edemment, un bouton ”cou-

leur al´eatoire” qui permet d’avoir le texte avec une couleur al´eatoire.

6. (question bonus) Compl´eter la page web avec un bouton ”Op´eration5’ qui permet de calculer x

d´efini par ax^2 + bx + c = 0′^ avec a , b et c donn´e sous forme de variable.

Exercice 4 - Les conditions

1. Ecrire une page web qui affiche la date du jour avec un bouton ”Date”.

2. Compl´eter la page web avec un bouton ”Bonjour1” qui affiche soit ‘bonjour’, soit ‘bon apr`es-

midi’, soit ‘bonne soir´ee’, soit ‘bonne nuit’ en fonction de l’heure de la journ´ee.Il faut utiliser

ici if, else.

3. Compl´eter la page web avec un bouton ”Bonjour2” qui affiche soit ‘bonjour’, soit ‘bon apr`es-

midi’, soit ‘bonne soir´ee’, soit ‘bonne nuit’ en fonction de l’heure de la journ´ee. Essayer avec

une heure rentr´ee manuellement aussi. Il faut utiliser ici if, else if, else.

4. Compl´eter la page web avec un bouton ”Jour dans la semaine” qui affiche le jour de la semaine.

Il faut utiliser ici switch case,break.

5. (question bonus) Changer la mise en page pour avoir une page plus esth´etique

Le r´esultat global doit ˆetre comme ci-dessous :

6. (question bonus) Changer le format de la date pour l’´ecrire de la forme ”Le jour / mois / ann´ee a`

exactement heures minutes secondes ”

Exercice 5 - Les boucles

Aide : Pour passer `a la ligne en html, utiliser la balise .

1. Ecrire une page web qui permet, en cliquant sur un bouton, d’´ecrire ”*” 5 fois avec un saut de

ligne et en utilisant une boucle for

2. Compl´eter la page web avec un autre bouton qui permet d’´ecrire ”Le nombre est i ” 5 fois avec

i allant de 0 `a 4 en utilisant une boucle for

3. Compl´eter la page web avec un autre bouton qui permet de la mˆeme fac¸on `a ´ecrire les 6 pre-

miers styles de titre (”H i ” )

4. Compl´eter la page web avec un autre bouton qui permet d’´ecrire ”Le nombre est i ” 10 fois avec

i allant de 0 `a 9 en utilisant une boucle while.

5. (question bonus) Changer la mise en page pour avoir une page plus esth´etique

6. (question bonus) Faire une boucle imbriqu´ee pour afficher autant d’´etoile que le num´ero de

ligne.

Le r´esultat global doit ˆetre comme ci-dessous :

Exercice 6 - Les tableaux

Un tableau est d´efini par une liste de valeurs comme ceci : var tableau = [valeur1, valeur2,

valeur3, valeur4];.

Il y a plusieurs op´erations possibles sur les tableaux (http://www.w3schools.com/jsref/jsref_

obj_array.asp) :

• tableau[i] pour acc´eder au ieme^ ´el´ement du tableau
• tableau.length pour connaitre la dimension du tableau
• tableau.pop() pour enlever le dernier ´el´ement du tableau
• tableau.push() pour ins´erer un ´el´ement en derni`ere position
• tableau.sort() pour trier le tableau par ordre croissant/alphab´etique
• tableau.reverse() pour inverser l’ordre

1. Ecrire une page web qui permet, en cliquant sur un bouton, d’´ecrire un tableau de voitures.

2. Compl´eter la page web avec un autre bouton qui permet d’´ecrire un tableau de fruits sans son

dernier ´el´ement.