Cours JavaScript

COURS DINITIATION AU JAVASCRIPT
Sance 1
I. Les principes de base du langage
1. Gnralits
Comme le code CSS, le code Javascript (JS) sera crit dans un fichier externe avec
lextension .js. Celui-ci sera appel depuis le fichier HTML juste avant la fermeture de la
balise <body> par la balise <script></script> avec lattribut src.
Toujours utiliser lencodage UTF-8 sans BOM.
Remarque. On pourra trouver la documentation sur le code Javascript sur http://w3schools.com .
En JS les commentaires sont prcds de // lorsquils tiennent sur une ligne
ou bien encadrs par /* et */ lorsquils prennent plusieurs lignes.
Toutes les instructions doivent tre suivies de ;
Dans la suite, prvoir un dossier par exercice (le premier sera nomm ex1.1). Dans chaque
dossier, prvoir un fichier HTML (le premier sera nomm ex1-1 : pas de point dans le nom de
fichier). Ce dossier sera reli un fichier JS et, si ncessaire, un fichier CSS ( partir des
exercices 10).
Quand un programme ne sarrte pas :
taper Ctrl+Alt+Suppr / Gestionnaire des tches/iexplorer.exe/arrter le processus.
Pour dboguer un programme : taper F12 et actualiser. Les erreurs saffichent en rouge.
Ex1.1. Faire apparatre une bote de dialogue JS sur une page HTML. La fonction utiliser
est alert(). On place le texte afficher entre guillemets lintrieur des parenthses.
2. Les variables
Une variable permet de rserver un certain nombre de cases mmoires sur lordinateur.
La syntaxe est
var nom_variable = valeur ;
La dclaration se fait avec var ; Le nom de la variable est quelconque (lettres sans accents
majuscules et minuscules, chiffres, $ et _ , sans espace et sans commencer par un chiffre.
Laffectation de la variable se fait avec =.
Remarque. On peut dclarer et ventuellement affecter plusieurs variables en mme temps
en les sparant par , (on ncrit var quune seule fois).
Il y a essentiellement trois types de variables :
Les nombres (number) : criture dcimale (1.23) ;
criture scientifique (1.23e-12) ; criture hexadcimale (0xA310)
Les chanes de caractres (string) : les caractres sont crits entre guillemets. Si on veut
crire des guillemets ou des apostrophes dans le texte, il faut les faire prcder de \
Les boolens (boolean) : false (0 ou ="") ou true (sinon) (permettent de faire des
tests).
Remarque. On peut vrifier lexistence ou le type dune variable laide de linstruction typeof
Ex2.1. Dclarer et affecter une variable de chacun des trois types et faire apparatre des botes de
dialogue pour vrifier leur valeur puis leur type.
Page | 1
3. Les oprateurs
Ex3.1. Trouver un exemple dans chacun des cas ci-dessous et regarder le rsultat avec alert
+ : additionner deux nombres ; concatner deux chanes de caractres (les crire lune la
suite de lautre) ; concatner un nombre et un chane de caractres ; concatner deux
nombres (il faut alors ajouter "" entre les deux pour que lordinateur comprenne quil ne
sagit pas dune addition).
- , * , / : soustraire, multiplier, diviser deux nombres.
% : donne le reste de la division modulo un nombre
Exemple. n%10 donne le chiffre des units de lentier n.
Remarques. Linstruction var1 += var2 ; quivaut var1 = var1 + var2 ;
Linstruction var1 ++ ; quivaut var1 = var1 + 1 ;
Ex3.2. Demander lutilisateur de rentrer son prnom (la fonction utiliser est prompt() avec le
texte afficher entre guillemets lintrieur des parenthses ; elle renvoie ce qui est crit par
lutilisateur sous forme de chane de caractres) et lui renvoyer un message de bienvenue contenant
son prnom.
Ex3.3. Demander deux nombres entiers lutilisateur et lui renvoyer leur produit ; utiliser la
fonction parseInt() qui convertit la chane de caractres (les chiffres) entre parenthses en un
nombre entier (elle sarrte au premier caractre autre quun chiffre rencontr ; sil ny a pas de
chiffre en premier, elle renvoie NaN (not a number)).
Remarque. La fonction parseFloat() convertit de mme en nombre dcimal.
4. Les fonctions mathmatiques

On ne va citer ici que les plus utiles pour cette anne (il sagit en fait de mthodes qui sappliquent
sur lobjet Math) :
Math.floor() ; renvoie le plus grand entier infrieur ou gal au nombre entre parenthses
Math.pow(a,b) ; renvoie ab (Attention : a^b est interprt mais ne donne pas le rsultat voulu !).
Math.sqrt(a) ; renvoie a
Math.random() ; renvoie un nombre alatoire compris entre 0 et 1
On pourra aussi utiliser Math.cos() ; et Math.sin() ; avec des radians.
Exemple. Pour renvoyer un entier alatoire compris entre a et b inclus :
Math.floor((b-a+1)*Math.random())+a ;
Ex.4.1. Demander un nombre de trois chiffres lutilisateur et renvoyer le chiffre des centaines,
celui des dizaines et celui des units.
Page | 2
Sance 2
5. Les conditions
On peut comparer deux variables laide des oprateurs ci-dessous ; on obtient alors un boolen :
== (est gale ) ; != (est diffrente de) ; === (est gale avec le mme type) ;
!== (a une valeur ou un type diffrent de ) ; > (est suprieure ) ; >= (est suprieure ou gale ) ;
< (est infrieure ) ; <= (est infrieure ou gale ).
On peut aussi utiliser des oprateurs sur les boolens : && (et) ; || (ou) ; ! (non)
La syntaxe dune structure conditionnelle est la suivante :
if(booleen)
{
instruction1 ;
}
else
{
instruction2 ;
}
ou
if(booleen1)
{
instruction1 ;
}
else if(booleen2)
{
instruction2 ;
}
else
{
instruction3 ;
}
La structure else if peut tre utilise plusieurs fois et la structure else est facultative.
La fonction confirm() renvoie un boolen qui vaut vrai si lutilisateur clique sur OK et faux sil
clique sur Annuler en fonction du texte affich (entre parenthses)
Exemple.
if(confirm("Cliquez sur OK si vous pensez que 3+2=5"))
{
alert("Bien !")
}
else
{
alert("Cest mal parti !")
}
Ex 5.1. Demander un nombre lutilisateur et afficher la valeur des boolens suivants :
3 3 ; 1 ou 5.
Ex.5.2. Demander lutilisateur de confirmer sil veut jouer. Dans ce cas, lui proposer une opration et
lui demander le rsultat puis lui dire si cest juste ou faux. Sinon afficher un message.
Ex.5.3. Demander le numro INSEE de lutilisateur (sans espace) et lui renvoyer son sexe aprs avoir
vrifi que le numro comporte bien 15 chiffres (le numro est de la forme 1 98 05 75 103 235 63 ;
il donne dans lordre : le sexe (1 = garon, 2 = fille) lanne de naissance, le mois, le n du dpt, le n
de la commune, le n dordre dinscription sur le registre dtat civil et la cl calcule de sorte que la
somme du nombre constitu des 13 premiers chiffres et de la cl soit divisible par 97).
Page | 3
Sance 3
6. Les boucles
Il y a deux types importants de boucle :
La boucle For (Pour) :
La boucle While (Tant que) :
while(condition)
for(var i=0 ; i<10 ; i++)
{
{
instructions ;
instructions ;
}
}
Remarque. La boucle For est un cas particulier de la boucle While :
La boucle de droite peut en effet scrire var i=0 while(i<10) {instructions ; i++ ;}
Exemple. Tant que lutilisateur veut continuer, on lui propose une multiplication alatoire de deux
entiers deux chiffres non nuls, on lui donne le rsultat et on affiche un score (+1 si juste et -1 sinon) :
var score = 0 ;
while(confirm("Voulez-vous continuer ?"))
{
var a1 = Math.floor(9*Math.random())+1 ,
a2 = Math.floor(9*Math.random())+1 ,
n1 = a1 + 10*a2 , n2 = a3 + 10*a4 ,
N = parseInt(prompt(n1 + "*" + n2 + "= ?")) ;
if(N == n1*n2)
{
score++ ;
alert("BRAVO ! ; score : " + score) ;
}
else
{
score-- ;
alert("FAUX ! ; score : " + score) ;
}
}
alert("score final : " + score) ;
Ex.6.1. Lordinateur affiche deux entiers alatoires distincts entre 1 et 99.

Ex.6.2. Lordinateur choisit un entier au hasard entre 1 et 99. Lutilisateur entre un entier et, tant que
ce nest pas celui qui a t choisi par lordinateur, ce dernier indique plus ou moins . la fin il
indique le nombre de coups jous.
Ex.6.3. Lordinateur affiche un entier alatoire entre 1 et 10 et lajoute aux prcdents tant que
lutilisateur demande de continuer. Le but du jeu est de ne pas dpasser 21. Quand lutilisateur arrte,
lordinateur choisit encore un nombre alatoire entre 1 et 10. Si la somme est infrieure ou gale 21
le joueur perd 1 point, sinon il gagne 1 point. Le jeu dure tant que le joueur demande de rejouer.
Page | 4
Sances 4 et 5
7. Les tableaux
Un tableau (Array) est une suite de valeurs (items) accessibles laide dun indice (index) partir de 0.
Dclaration et affectation :
var tabl1 = [val1 , val2 , val3] ;
ou var tabl1 = new Array() ; tabl1[0]=val1 ; tabl1[1]=val2 ; tabl1[2]=val3 ;
ce tableau est appel tabl1 et a trois valeurs : val1 , val2 et val3.
Le nombre de valeurs dun tableau est donn par la proprit .length (longueur).
Remarque. Une chane de caractres est un tableau.
Exemple. var mot = "ab" ; alert(mot[0] + mot[1] + mot.length) ;
var T1 = [1,2,3];
for(var i = 0 ; i < T1.length ; i++) T1[i]++ ;
alert(T1) ;
Remarque. Il pourra tre utile de dfinir des tableaux avec deux indices (ligne et colonne).
Par exemple :
var T = new Array() ;
for(var i = 0 ; i < 2 ; i++) T[i] = new Array() ;
T[0][0] = 1 ; T[0][1] = 3 ; T[1][0] = 5 ; T[1][1] = 7 ;
alert(T[0] + "\n" + T[1]) ;
(\n permet de passer la ligne dans une chane de caractres).
Ex.7.1. Afficher les 5 chiffres 1,2,3,4,5 dans un ordre alatoire (faire un tableau avec 5 chiffres
alatoires distincts entre 1 et 5).
Ex.7.2. Afficher les 9 chiffres non nuls sur 3 lignes et 3 colonnes dans un ordre alatoire.
8. Les fonctions
Elles permettent de renvoyer une variable partir dautres variables appeles arguments.
Le code est function nomfonct(arg1, arg2){var var1 ; instructions ; return var1 ;}
Pour excuter la fonction nomfonct partir de deux valeurs a et b il suffit dcrire
nomfonct(a,b) ;
Remarque. La fonction peut renvoyer une variable prise en argument aprs lavoir modifie.
Attention ! Les variables dclares lintrieur dune fonction (comme var1 dans lexemple ci-dessus)
nexistent que pendant lexcution de cette fonction. On ne peut donc pas les utiliser en dehors.
Page | 5
Exemples importants.
1. La fonction compte compte le nombre de fois o lentier k apparat dans un tableau T :
function compte(T,k)
{
var N = 0 ;
for(var i = 0 ; i < T.length ; i++) if(T[i] == k) N++ ;
return N ;
}
2. La fonction tri trie les valeurs dun tableau T dans lordre croissant :
function tri(T)
{
for(var i = 0 ; i < T.length-1 ; i++)
for(var j = i+1 ; j < T.length ; j++)
if(T[j]< T[i]) {N = T[j] ; T[j] = T[i] ; T[i] = N ;}
return T ;
}
Ex.8.1. crire la fonction maxmin qui prend trois arguments a,b,i et renvoie max(a,b) si i1 et
min(a,b) sinon. Utiliser cette fonction pour renvoyer le max et le min de deux entiers donns par
lutilisateur.
Remarque. Il sagit dun pur exercice puisque les mthodes Math.min et Math.max existent ; elle
prennent un nombre quelconque darguments.
Ex.8.2. a) crire la fonction minimum qui prend en argument un tableau et renvoie la plus petite de
ses valeurs.
b) crire la fonction lieu_minimum qui prend en argument un tableau et renvoie tous les indices
qui correspondent la plus petite de ses valeurs.
Ex.8.3. crire la fonction aleadis qui prend en argument deux entiers N et t et qui renvoie un
tableau de t entiers alatoires distincts compris entre 1 et N inclus. Utiliser cette fonction en demandant
N et t lutilisateur.
Ex.8.4. On reprend lexercice 5.3.
1. crire la fonction nbreChiffres qui prend en argument un entier N (renvoie 0 si N )
2. crire la fonction inverse qui prend en argument un tableau T et renvoie un tableau lenvers
3. crire la fonction chiffres qui prend en argument un entier N et renvoie ses chiffres dans un
tableau.
4. crire la fonction cleInsee qui prend en argument un tableau T et un entier n et renvoie 1 si T
est un tableau de chiffres dun nINSEE et n = 15 ; elle renvoie 0 sinon (on pourra crire la fonction
sommeInsee(T,n) qui renvoie la somme du nombre constitu des 13 premiers chiffres de T et de
celui constitu des deux derniers si n = 15 et 0 sinon.
5. Demander le numro INSEE de lutilisateur (sans espace) et, si le numro est valide, afficher
Vous tes un garon n (une fille ne) en mois anne.
Page | 6
Sance 6
II. Liens avec HTML et CSS
9. Application dun script un lment HTML
Le lien entre les lments HTML et les scripts se fait par lintermdiaire dune interface appele
DOM (Document Object Model). Les lments HTML (balises ouvrante et fermante) sont vus
comme des objets sur lesquels on peut appliquer des mthodes (on a dj vu lobjet Math et
quelques mthodes comme random( ) , par exemple ; il y a aussi lobjet window qui nest
autre que la fentre du navigateur sur lequel on a vu, entre autres, la mthode alert( ) mais
comme cet objet tait implicite, il ntait pas utile dcrire window.alert() ).
Rcuprer un lment HTML
La page Web (balise <html>) est un objet appel document sur lequel nous utiliserons la mthode
getElementById( ) qui permet de rcuprer un lment HTML partir de son attribut id .
Exemple.
HTML
JS
<p id = "coucou">Coucou !</p> var elemt1 = document.getElementById("coucou")
alert(elemt1) ;
Le navigateur indique que type1 est un objet de type paragraphe.
Une fois quon a rcupr llment voulu, on peut utiliser ses proprits notamment :
Ses attributs (les plus courants sont en gnral des proprits de llment dans le DOM).
Exemple. Pour changer limage <img id = "im1" src = "image1.jpg"/>, on crira
document.getElementById("im1").src = "image2.jpg" ;
La proprit textContent qui prend pour valeur le texte contenu entre les balises de llment.
Exemple. Pour changer le texte <p id = "coucou">Coucou !</p>, on crira
document.getElementById("coucou").textContent = "Bonjour !" ;
10. La gestion du temps
On utilisera la fonction setTimeout( ) qui permet dexcuter une fonction au bout dun temps donn et qui prend en
arguments la fonction excuter, le temps en millisecondes et, ventuellement, les arguments de la fonction excuter. On
peut annuler leffet de cette fonction avec la fonction clearTimeout( ) dont le seul argument est la fonction excute
par setTimeout( ) .
Exemple.
var N = parseInt(prompt("Entrer un entier")) ;
var elt = document.getElementById("rebours") ;
function afficheRebours(N,i)
{
elt.textContent = N-i ;
if(i < N) setTimeout(afficheRebours,1000,N,i+1) ;
}
afficheRebours(N,0) ;
Ex.10.1. a) Crer la fonction affichageMcanique qui prend pour arguments deux chiffres M et N, un identifiant id et
un entier i et qui renvoie tous les chiffres entre M et N compris, en croissant, toutes les 200ms dans llment HTML dont
lidentifiant est id (i sert de compteur).
b) Construire trois cases contiges dans une page Web et crer la fonction afficheHasard qui prend pour arguments
deux entiers t et i et renvoie alatoirement un chiffre par case de faon mcanique (avec tous les chiffres intermdiaires)
toutes les 3 secondes pendant t secondes (i sert de compteur).
Page | 7
Sance 7
11. Les vnements
On nutilisera que lvnement click qui consiste cliquer (appuyer et relcher) sur llment.
Le clic dclenche lexcution dune fonction grce la proprit onclick dont la valeur est le nom de la
fonction utiliser (sans les parenthses). Si la fonction prend des paramtres, il faut utiliser une fonction
anonyme comme dans lexemple ci-dessous :
Exemple.
HTML
<img id = "c1"
src = "im1.jpg"/img>
JS
function alerte() {alert("Bravo !") ;}
elt = document.getElementById("c1") ;
elt.onclick = alerte ;
function alertes(a,b){alert(a + b) ; }
elt.onclick = function() {alertes("bien ","vu");} ;
Pour supprimer lvnement, il suffit de lui affecter une fonction vide :
document.getElementById("c1").onclick = function() {} ;
On utilisera souvent la proprit onclick sur llment <button> </button>.
Remarque. On peut rcuprer les coordonnes du point o le clic a eu lieu :
elt.onclick = function(e){elt1.textContent = e.clientX + "," + e.clientY ;};
Dans ce code, le paramtre e reprsente lvnement onclick et elt1 est llment o saffichent les coordonnes.
Ex.11.1. Construire une page Web avec un rectangle. Choisir 3 images de la taille du rectangle et faire en sorte
que lutilisateur puisse passer dune image lautre en cliquant sur le rectangle.
Ex.11.2. Construire une page Web avec un rectangle contenant un entier alatoire entre 1 et 99.
Prvoir deux boutons et sur lesquels lutilisateur peut cliquer pour augmenter ou diminuer de 1 le
nombre affich.
12. Application dun script au CSS
On ne modifiera le style CSS que par lintermdiaire de lattribut style dans la balise considre. Cet attribut a
priorit sur le style de la feuille CSS. On accde tout simplement cet attribut par la proprit style . Comme
les tirets sont impossibles en JS, ils sont remplacs par une majuscule accole.
Exemple.
HTML
<body id = "c1" style =
"background-color:blue">
JS
var elt = document.getElementById("c1") ;
elt.style.backgroundColor = "red" ;
Ex.12.1. Construire une page Web avec un rectangle vide et neuf boutons (trois par niveau de couleur : + ; - ; 0) sur
lesquels lutilisateur peut cliquer pour augmenter ou diminuer le niveau de 5 ; celui-ci saffiche dans le bouton 0.
Le rectangle reoit alors la couleur indique par les trois niveaux.
On utilisera les deux fonctions suivantes :
function couleurRGB(r,g,b) {return "rgb(" + r +"," + g + "," + b + ")" ; }
function coul(i,j){
niv[i] += 5*j ;
if(niv[i] >=0 && niv[i] <= 255) elt[i].textContent = niv[i] ;
else if(niv[i] < 0) elt[i].textContent = niv[i] + 255 ;
else elt[i].textContent = niv[i] - 255 ;
elt[9].style.backgroundColor = couleurRGB(niv[0],niv[1],niv[2]) ; }
Page | 8
Sance 8
13. Le dessin
On utilise llment <canvas id="canvas" width="1300"
height="600"></canvas>
qui est un rectangle dont on a prcis les dimensions en pixels dans lequel on va pouvoir dessiner
avec des instructions en JS. On peut visualiser ce rectangle avec le CSS :
canvas{border : solid ; border-width : 1px ;}
Les points du canvas sont reprs par une abscisse et une ordonne : lorigine est le coin suprieur
gauche, laxe des abscisses est laxe horizontal orient vers la droite et laxe des ordonnes est
laxe vertical orient vers le bas.
Pour crer un dessin, on commence par rcuprer llment :
var ctx =document.getElementById("canvas").getContext("2d") ;
(on choisit presque toujours le nom ctx (contexte) pour la variable).
Les rectangles
On utilise deux mthodes du contexte : fillRect() pour des rectangles pleins et strokeRect()
pour les contours qui prennent 4 paramtres : labscisse du sommet suprieur gauche, son
ordonne, la largeur et la hauteur en pixels. On les fait prcder de la couleur avec les deux
proprits du contexte correspondantes : fillStyle permet de remplir des formes et strokeStyle
de tracer des contours. Leur valeur est une couleur (nom, hexadcimal, RGB ou RGBA). La
proprit lineWidth dfinit lpaisseur du trait.
La mthode clearRect() avec les mmes paramtres permet deffacer lintrieur dun rectangle.
Les chemins
On peut tracer des segments ou des courbes par tapes en allant dun point un autre.
On commence par choisir la couleur avec strokeStyle ou fillStyle et ventuellement lpaisseur du
trait puis on indique le dbut du chemin avec la mthode beginPath() ;
On termine le chemin avec stroke() pour tracer les lignes indiques entre les deux ou avec
fill() ; pour remplir la forme (dans ce cas le dernier point est automatiquement reli au premier).
Entre les deux, on peut tracer :
des segments : moveTo(a,b) ; pour indiquer le point de dpart , lineTo(c,d) ; pour
indiquer le 2me point, etc ,
sur le cercle de centre (x,y) et de
des arcs de cercle : arc(x,y,r,a,b) ; dfinit larc
a et ,
b (en radians dans le sens des aiguilles dune montre
rayon r avec ,
(de vers )),

des courbes : moveTo(a,b) ; pour indiquer le point de dpart ,
bezierCurveTo(c,d,e,f,x,y) ; dfinit la courbe cubique partant du point jusquau
point (x,y) suivant les tangentes
et
avec (c,d) et (e,f).
Remarque. Si on trace une ligne noire horizontale ou verticale de largeur un nombre impair de
pixels, on obtient deux lignes de 1px dpaisseur lextrieur de la ligne en gris. De mme, les
traits des strokeRect font deux pixels dpaisseur. Pour viter cela, il faut tracer un fillRect la
place dune ligne.
Page | 9
Exemple.
ctx.fillRect(0,100,100,1) ;
ctx.strokeStyle="rgb(100,50,250)" ;
ctx.lineWidth = "1" ;
ctx.beginPath() ;
ctx.moveTo(100,100) ;
ctx.lineTo(200,200) ;
ctx.arc(300,300,100*Math.sqrt(2),(Math.PI/180)*225,(Math.PI/180)*315);
ctx.bezierCurveTo(440,50,420,80,500,50) ;
ctx.stroke() ;
Ex.13.1 Crer la fonction traitHor (xdeb , ydeb , longueur, couleur) qui trace un trait horizontal de 1px
dpaisseur et, de mme, la fonction traitVer (xdeb , ydeb , longueur, couleur) puis la fonction
rect(xdeb , ydeb , largeur, hauteur, couleur) qui trace un rectangle. Utiliser cette fonction pour tracer
10 rectangles concentriques de plus en plus petits dans un carr de 200px de ct.
Ex.13.2 Dessiner une cible circulaire divise en 12 secteurs de mme angle et de couleurs alatoires.
Les changements de repre
On peut dplacer lorigine par translation avec la mthode translate(x,y)et faire tourner les axes
avec la mthode rotate(a). La mthode save( ) permet de sauvegarder le repre et les styles
appliqus au canvas et la mthode restore( ) de rcuprer la sauvegarde aprs des transformations.
Exemple. Dans un canvas carr de 150 px de ct :
ctx.save() ;
ctx.translate(100,100) ;
ctx.fillStyle = "red" ;
ctx.restore() ;
ctx.rotate((Math.PI/180)*60) ;
ctx.strokeStyle = "orange" ;
ctx.strokeRect(0,0,40,40) ;
Ex.13.3. Dessiner 180 carrs de couleur alatoire qui tournent autour dun sommet au centre du
canvas (1000px sur 600px).
Page | 10
Sance 9
14. Le texte
On peut insrer du texte avec les mthodes fillText("texte insrer",x,y) ou strokeText( ),
x et y tant les coordonnes du dbut de la ligne dcriture du texte. Ces mthodes sont aussi associes
aux mthodes fillStyle et strokeStyle . La proprit font a pour valeur la police utilise.
Exemple.
ctx.fillStyle = "rgba(50,125,250,0.2)" ;
ctx.font = "bold 20pt Calibri" ;
ctx.fillText("abc",50,50) ;
ctx.strokeStyle = "rgb(250,100,50)" ;
ctx.font = "30pt TimesNewRoman"
ctx.strokeText("abc",50,100) ;
15. Les images
Pour insrer une image dans le canvas, on utilise la mthode drawImage(x,y) qui place limage
(dfinie par un objet Image) de sorte que le coin suprieur gauche ait pour coordonnes (x,y).
Exemple.
var im = new Image() ;
im.src = "im1.jpg" ;
ctx.drawImage(im,10,10) ;
On peut crer sa propre image pixels par pixels avec la mthode createImageData(a,b) qui cre
une ImageData de a px de large sur b px de haut sous forme dun tableau (.data) de longueur 4ab,
chaque pixel tant cod par son code RGBA (les quatre varient de 0 255 (mme lopacit)).
On peut aussi rcuprer les pixels dune partie du canvas avec la mthode getImageData(x,y,a,b).
Pour visualiser une ImageData, on utilise putImageData(im,x,y).
Exemple.
var imgData = ctx.createImageData(2,2) ;
var im1 = imgData.data ;
im1[0]=255 ; im1[1]=0 ; im1[2]=0 ; im1[3]=255 ;
im1[4]=0 ; im1[5]=255 ; im1[6]=0 ; im1[7]=255 ;
im1[8]=0 ; im1[9]=0 ; im1[10]=255 ; im1[11]=255 ;
im1[12]=0 ; im1[13]=0 ; im1[14]=255 ; im1[15]=1 ;
ctx.putImageData(imgData,20,20) ;
Page | 11
Sance 10
16. Les animations
On peut crer des animations en dessinant des images lgrement modifies les unes aprs les autres
aprs avoir effac la prcdente et suffisamment rapidement pour que lil ne voit pas les ruptures (60
images par secondes). Pour cela on utilise la fonction setTimeout( ) de la faon suivante :
Exemple.
function trace(angle)
{
ctx.save() ;
ctx.clearRect(0,0,150,150) ;
ctx.fillStyle = "red" ;
ctx.rotate((Math.PI/180)*angle) ;
ctx.restore() ;
angle +=2 ;
if (angle<=360) setTimeout(trace,1000/60,angle) ;
}
canvas.onclick = trace(0) ;
Remarque.
Les nouvelles versions des navigateurs implmentent la mthode requestAnimationFrame( ) qui est
plus performante que lutilisation de setTimeout( ) .
Ex.16.1. Reprendre le code de lexercice 13.3. en traant des carrs pleins qui tournent en animation
pendant 5 tours et qui changent de couleur alatoirement chaque quart de tour.
PROJET1 : Dessiner une pendule avec ses aiguilles qui tournent en temps rel.
On rcupre la date et lheure laide de mthodes de lobjet Date (var date = new Date ;)
On utilisera ici : date.getHours(); date.getMinutes(); date.getSeconds(); et
lvnement .onload (au lieu de onclick).
Page | 12
Exercices supplmentaires :
I. Construire une page Web avec un rectangle vide et un bouton sur lequel lutilisateur peut cliquer
pour faire apparatre une image. Limage apparatra de moins en moins floue (utiliser la proprit
opacity ) .
II. Crer une fonction convertisseurBase16(a) qui revoie lcriture en base 16 de a sous forme dune
chane de caractres.
Crer la fonction couleurHexa(r,g,b) qui revoie le code hexadcimal de la couleur rgb(r,g,b) sous la
forme "FF0000".
Afficher un bouton sur lequel on peut cliquer pour crire une couleur RGB et qui renvoie le code
hexadcimal.
III.
Construire une horloge digitale qui saffiche et disparat chaque clic sur la page Web.
V. Dessiner 10 disques pleins (couleur alatoire), de rayon 50px, centrs sur la ligne y=200, portant un
numro (entier alatoire entre 1 et 99) centr sur le disque et de couleur blanc si la moyenne des trois
niveaux de couleur du disque est infrieure 127 (noir sinon).
VI. Un balle de rayon 10px se dplace alatoirement dans le canvas (1300*600). Si lutilisateur clique
dessus, il marque un point jusqu ce que la balle sorte du canvas. Afficher le score.
VII. Tracer une grille de 100 cases (10*10). Lutilisateur peut cliquer sur chaque case pour la colorier
avec une couleur alatoire. Le numro du clic saffiche sur la case et, pour chaque numro, les trois
niveaux de couleur saffichent droite de la grille.
Projet2. Trouve Pixel

Page | 13
Sur un canvas 600*600 le joueur clique jusqu dcouvrir un pixel alatoire. chaque clic, le canvas se
colore en noir de faon que ne reste en blanc quun rectangle de sommet le point cliqu et contenant le
point cherch. Le nombre de clics est affich.
Page | 14

Cours JavaScript

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours JavaScript

Transféré par

Droits d'auteur :

Formats disponibles

COURS DINITIATION AU JAVASCRIPT

4. Les fonctions mathmatiques

Ex.6.1. Lordinateur affiche deux entiers alatoires distincts entre 1 et 99.

(de vers )),

Projet2. Trouve Pixel

Vous aimerez peut-être aussi

Cours JavaScript

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours JavaScript

Transféré par

Droits d'auteur :

Formats disponibles

COURS DINITIATION AU JAVASCRIPT

4. Les fonctions mathmatiques

Ex.6.1. Lordinateur affiche deux entiers alatoires distincts entre 1 et 99.

(de  vers )),

Projet2. Trouve Pixel

Vous aimerez peut-être aussi

(de vers )),