Web td5
Web td5
Web td5
IMAC
2015-2016
TD 5 : JavaScript
28 octobre 2015
/*
Au fait, la ligne ci-dessus est un commentaire.
Et même ces deux lignes le sont !
*/
</script>
Dans une même page HTML on peut insérer plusieurs scripts. De plus, on peut décider de
les placer n’importe où dans le document.
Malgré cette liberté, il est de bonne pratique de placer tout le code dans un même script situé
au bas de l’élément body. Cela permet d’améliorer le chargement de la page car, de cette façon,
l’affichage des éléments HTML n’est pas bloqué par le chargement des scripts.
Par exemple :
1
<!DOCTYPE html>
<html>
[...]
<body>
[...]
<script>
// On ouvre une fenêtre pop-up
alert("Bonjour. Ca va ?");
</script>
</body>
</html>
Comme en CSS, on peut également (et on doit, généralement) externaliser le code JavaScript,
qui sera contenu dans un (ou, si nécessaire, plusieurs) fichier(s) « *.js ».
Par exemple, dans le code HTML on écrira :
<script src="tous_mes_scripts.js"></script>
et dans le fichier « tous_mes_scripts.js » :
alert("Bonjour. Ca va ?");
Avec JavaScript on peut écrire directement dans une page HTML en utilisant le méthode
document.write().
Par exemple, le code :
document.write("<p>Alouette, gentille alouette, \
<br>Alouette, je te plumerai.</p>");
affiche le refrain d’une fameuse comptine française. Remarquez que pour diviser en deux lignes
une chaîne de texte (le texte entre guillemets) trop longue, on a utilisé un antislash.
2
nous permet de récuperer la date courante. On peut aussi décider de définir une nouvelle date
en utilisant une des syntaxes suivantes (et d’autres encore) :
uneDate4 = new Date("1977-05-25");
uneDate5 = new Date("21/05/1980");
uneDate6 = new Date("1983/05/25");
uneDate1 = new Date("May 19 1999");
uneDate2 = new Date("16 May 2002");
uneDate3 = new Date("2005 May 19");
uneDate7 = new Date("December 18 2015");
Comme vous pouvez le remarquer, on peut écrire la date dans la forme courte (que des
chiffres) soit “à l’anglaise” (MM-DD-YYYY) soit “à la chinoise” (YYYY-MM-DD), mais pas “à
la française” (DD-MM-YYYY) !
3 Du déjà vu
La syntaxe de JavaScript ressemble à s’y méprendre à celle du langage C.
On peut définir une variable (à l’aide du mot-clé var), l’initialiser, l’utiliser pour des opéra-
tions arithmétiques, etc.
Par exemple, le code :
var n = 4;
var m;
n++;
m = (n + 3) * 2.5;
document.write(m)
affichera « 20 » dans notre page web.
Ainsi, tout ce qui est test et boucle est identique au langage C.
Par exemple, on peut écrire une instruction conditionnelle comme dans le code :
if (age<26 && etudiant==true) {
monMessage = "Vous avez droit au tarif jeune étudiant.";
} else if (age<26) {
monMessage = "Vous avez droit au tarif jeune.";
} else {
monMessage = "Vous n'avez droit à aucun tarif réduit.";
}
ou une boucle for comme dans le code :
3
var comptine = "";
for (var i = 1; i < 100; i++) {
comptine += "<p>" + i + " éléphants qui se balancaient \
sur une toile d'araignée.</p>";
}
De même pour les boucles while et do/while (voir http://www.w3schools.com/js/
js_loop_while.asp pour plus de détails).
Comme en C, en JavaScript on peut définir des functions, c’est-à-dire des blocs de code conçus
pour effectuer des tâches particulieres.
Par exemple :
function maPresqueSomme(a,b) {
var somme = a + " plus " + b + " font " + a+b;
return somme;
}
Pour des raisons historiques, on écrit le code JavaScript en utilisant la notation lowerCamel-
Case (casse “en chameau” avec la première lettre en minuscule) : maSomme, monJoliScript,
uneDate, etc. 1 .
1. Pour le code HTML et CSS on a préféré dans les TDs précédents la notation avec le tiret bas :
mon_film_prefere, mon_element_arrondi, etc.
2. Formalement du DOM, ou Modèle Objet du Document.
4
4.1 Différents façons d’obtenir des éléments (avec un interlude sur les
tableaux)
Comme l’identifiant d’un élément est unique, la méthode document.getElementById()
donne un seul résultat.
En JavaScript on peut aussi chercher tous les éléments ayant la même balises, avec la méthode
document.getElementsByTagName(), ainsi que tous les éléments ayant une même classe,
avec la méthode document.getElementsByClassName().
Par exemple, le script
y = document.getElementsByTagName("h1");
nous permet de trouver tous les titres de niveau 1 du document.
Comme en général il y a plusieurs éléments ayant la même balise, les résultats de notre
recherche seront stockés dans un tableau. Un tableau est une variable particulière 3 qui contient
plusieures valeurs, indexées à partir de 0.
Par exemple, dans le code ci-dessus, y[0] contiendra le premier titre de niveau 1, y[1] le
deuxième, etc. Le dernier titre de niveau 1 sera contenu dans y[y.length - 1] (comme vous
en douterez, la méthode length permet de récuperer la longueur du tableau).
x Exercice 5 : Reprenez la page créée dans le TD précédent et, à l’aide d’un script JavaScript,
changez le titre de la bannière en “Mon premier cours de Programmation Web”.
5
4.4 Changer le style CSS
D’une façon similaire à ce qui a été fait jusqu’à présent, on peut changer le style CSS d’un
élément HTML en utilisant la syntaxe x.style.propriété = "valeur";.
Par exemple, le code :
d = document.getElementById("mon_div");
d.style.backgroundImage = "url('nouveau_paysage.png')";
change l’image d’arrière plan de l’élément mon_div. Remarquez qu’on transforme en lowerCa-
melCase toutes les propriétés CSS (on écrit backgroundImage à la place de background-image).
x Exercice 7 : En utilisant deux boutons (ou si vous préférez les images « eat_me.png » et
« drink_me.png) » créez un script qui permet de changer la taille (horizontale et verticale)
de l’image « alice.png », agrandissant l’image si on clique sur le premier et la réduisant si on
clique sur le second.
6
x Exercice 9 : Modifiez l’Exercice 7 pour tourner horizontalement l’image d’Alice quand on
passe la souris dessus ou la tourner verticalement quand on conserve le clic (pensez à réviser les
transformations 2D et 3D vues dans le TD précédent 4 ).
Une méthode très utile, pas seulement en Mathématiques mais aussi dans le monde réel, est
Math.random(). Cela renvoie un nombre aléatoire 6 entre 0 (inclus) et 1 (exclus).
x Exercice 10 : Reprenez la galerie d’image créée dans les TDs précédents. Utilisez la méthode
Math.random() pour donner à chaque image un angle de rotation (vraiment) aléatoire.