Sujet 6

1.1 Bienvenue au 6e sujet

Pour votre progression, c'est très important de finir le sujet précédent avant de commencer celui-ci.

Vous devez travailler connectés (lien « Connexion » en haut à droite de la page). Sinon, vous rencontrerez des problèmes d'avancement et vous risquez d'être comptés absent. En étant connectés vous retrouverez l'endroit où vous en étiez à la séance suivante.

2. Révisions-1

2.1 Révisions-1

Commençons par une révision des notions introduites au Sujet-1

Révisions-1

2.2 Boucle for

Écrivez une boucle for, sur la variable i, qui affiche dans la console toutes les valeurs du tableau tab:

let tab=['chien','chat','souris','escargot'];

for(let i=0;i<tab.length;i++){console.log(tab[i]);}
Regexp: for *$ *let +i *= *0 *; *i *< *tab\.length *; *(i\+\+|i *= *i *\+ *1|i *\+= *1) *$ *\{ *console\.log$ *tab\[ *i *\] *$ *(;|) *\} *;?
for(let i=0;i<tab.length;i++)
Regexp: for *$ *let +i *= *0 *; *i *< *tab\.length *; *(i\+\+|i *= *i *\+ *1|i *\+= *1) *$.* : Vous êtes sur la bonne voie.
Votre boucle for(...) est correcte. Le problème est dans la suite.
{console.log(tab[i]);}
Regexp: .*\{ *console\.log$ *tab\[ *i *\] *$ *(;|) *\} *;? : Vous êtes sur la bonne voie.
Le corps {console.log(tab[i]);} est correct. Le problème est avant cette partie.

Révisions-1

2.3 addEventListener

let para=document.querySelector('p');
para.addEventListener('click', abcdef );

Quel est le type du deuxième paramètre abcdef de addEventListener ?
Répondez par un seul mot.

fonction
Regexp: (une? +)?f[ou]nction/i

Révisions-1

2.4 addEventListener

let para=document.querySelector('p');
para.addEventListener('click', abcdef );

Que fait addEventListener ?

Elle enregistre la fonction abcdef sur para
Elle attend que l'utilisateur click puis appelle la fonction abcdef
: Non... Un programme JS ne peut pas bloquer. Sinon tout le navigateur est bloqué.
Elle appelle la fonction abcdef
: Non, addEventListener est appelé au chargement du programme. abcdef n'est que appelée plus tard, quand l'utilisateur clique
Elle clique sur para

Révisions-1

2.5 DOM

Le navigateur reçoit ce HTML:

<body>
   <p>Bonjour</p>
   <h2></h2>
</body>

Et, à partir de ce HTML, construit l'arbre DOM suivant:

Quelles affirmations sont vraies ?

Chaque élément de l'arbre DOM est un objet, avec des propriétés, comme style et id
Quand on manipule un objet DOM, on change le HTML
: Non, pas vraiment. Le navigateur construit l'arbre DOM à partir du HTML... et ensuite "jette" le HTML. Après ça, pour le navigateur, il n'y a plus que les objets DOM. Le HTML n'existe plus.
Dans le DOM "p" est appelé un "élément"
:

Révisions-1

2.6 Sélecteurs CSS

<p>
   <span>Pomme</span>
   <span id="abc">Fraise</span>
   <span>Poire</span>
</p>

Que faut-il écrire dans un fichier CSS pour afficher « Fraise » en rouge ?

#abc{color:red;}
Regexp: (p +)?(span)?#abc *\{ *color *: *red *(;|) *\}

Révisions-1

2.7 Sélecteur 2

<p>
   <span class="ghi">Pomme</span>
   <span>Fraise</span>
   <span class="ghi">Poire</span>
</p>

Que faut-il écrire dans un fichier CSS pour afficher « Pomme » et « Poire » en rouge ?

.ghi{color:red;}
Regexp: (p +)?(span)?\.ghi *\{ *color *: *red *(;|) *\}

Révisions-1

2.8 Sélecteur composé

<p id="p">
   <span class="ghi">Pomme</span>
   <span>Ajouter</span>
</p>
<p id="q">
   <span class="ghi">Fraise</span>
   <span>Ajouter</span>
</p

Que faut-il écrire dans un fichier CSS pour afficher « Pomme » en rouge ?

#p .ghi{color:red;}
Regexp: p?#p( +| *> *)(span)?\.ghi *\{ *color *: *red *(;|) *\}

Révisions-1

2.9 pageX

<p>Bonjour</p>
...
document.querySelector('p').addEventListener('click',exemple);

Écrivez, en une seule ligne, la fonction exemple. Celle-ci permettra d'afficher sur la console, la coordonnée X de l'endroit ou l'utilisateur à cliqué.
Indices:
pageX est une propriété d'un objet.

function exemple(e){console.log(e.pageX);}
Regexp: function +exemple *$ *(e|[a-zA-Z]+) *$ *\{ *console\.log *$ *(e|\1)\.pageX *$ *(;|) *\} *;?
function exemple(e)
Regexp: function +exemple *$ *(e|[a-zA-Z]+) *$.* : Vous êtes sur la bonne voie. La première partie que vous avez écrit est correcte:
function exemple(...)

Révisions-1

2.10 Créer un élément

Que faut-il écrire pour créer un nouveau paragraphe et le mettre dans une nouvelle variable appelée "para" ?
(pour l'instant, on veut juste le créer en mémoire, sans le modifier, ni l’insérer dans le document)

let para=document.createElement('p');
Regexp: let +para *= *document\.createElement *$ *['"]p['"] *$ *(;|)

Révisions-1

2.11 Remplir paragraphe

On a crée un paragraphe avec :

let para=document.createElement('p');

Que faut-il écrire pour que ce paragraphe devienne <p>bonjour</p> ?

para.textContent='bonjour';
Regexp: para\.textContent *= *['"]bonjour['"] *(;|)

Révisions-1

2.12 Insérer

<div>
   <p>Hello</p>
   <p>Hola</p>
   AAAA
</div>

let para=document.createElement('p');
para.textContent='bonjour';
let d=document.querySelector('div');
XYZ

Que faut-il écrire à la place de XYZ pour insérer le paragraphe para dans le document à l'endroit indiqué par "AAAA" ?

d.append(para);
Regexp: d\.append *$ *para *$ *(;|)

Révisions-1

2.13 Position

...
<body>
   <img src="photo.jpg" ... />
</body>

On veut afficher l'image aux coordonnées x=100 y=200 de la page.
Que faut-il écrire dans le fichier CSS ?
Indications:

Il y a 3 propriétés CSS à renseigner: une pour dire que l'on peut déplacer, une pour X et une pour Y.
Renseignez-les dans cet ordre.

img{position:absolute;left:100px;top:200px;}
Regexp: img *\{ *position *: *(absolute|relative) *; *left *: *100px *; *top *: *200px *(;|) *\}
img{position:absolute;left:100;top:200;}
Regexp: img *\{ *position *: *(absolute|relative) *; *left *: *100(px)? *; *top *: *200(px)? *(;|) *\} : Presque! Vous avez oublié les unités...
img{position:absolute;topleft
Regexp: img *\{ *position *: *(absolute|relative) *; *top.*left.* : Vous êtes sur la bonne voie.
Dans la question on vous demande de mettre X avant Y, c'est à dire left avant top.

3. Révisions-2

3.1 Révisions-2

Continuons par une révision des notions introduites au Sujet-2

Révisions-2

3.2 querySelector : plusieurs

<p>Fraise</p>
<p>Poire</p>
<p>Pomme</p>

La fonction document.querySelector('p') permet d'obtenir le premier élément correspondant au sélecteur: ici, le paragraphe <p>Fraise</p>

Il existe une autre fonction, similaire, permettant d'obtenir tous les éléments correspondant à un sélecteur.

Que faut-il écrire pour obtenir tous les paragraphes ?

document.querySelectorAll('p')
Regexp: .*document\.querySelectorAll *$ *['"]p['"] *$ *;?

Révisions-2

3.3 querySelectorAll

<p>Fraise</p>
<p>Poire</p>
<p>Pomme</p>

let q=document.querySelectorAll('p')

Que faut-il écrire pour afficher le contenu du 3e paragraphe dans la console ("Pomme") ?

console.log(q[2].textContent);
Regexp: console\.log *$ *q\[ *2 *\]\.textContent *$ *(;|)
q[2].textContent
Regexp: q\[ *2 *\]\.textContent : Presque! On vous demande d'afficher ça dans la console...
console.log(q[3].textContent);
Regexp: console\.log *$ *q\[ *3 *\]\.textContent *$ *(;|) : Presque! Il y a une erreur dans l'index ... ce n'est pas 3
console.log(q[2]);
Regexp: console\.log *$ *q\[ *2 *\] *$ *(;|) : Presque! Vous avez affiché le paragraphe lui-même, alors qu'on vous demande son contenu.

Révisions-2

3.4 Fonction anonyme

let z=document.querySelector('h1')

Récrivez, en une ligne, le code suivant en utilisant une fonction anonyme.

z.addEventListener('click',abcdef);
function abcdef()
{
    console.log('hello');
}

z.addEventListener('click',function(){console.log('hello');});
Regexp: z\.addEventListener *$ *['"]click['"] *, *function *\( *$ *\{ *console\.log *$ *['"]hello['"] *$ *(;|) *\} *\) *(;|)

Révisions-2

3.5 Class

Que faut-il écrire pour transformer ceci

<p id="fraise">Fraise</p>
<p id="pomme">Pomme</p>
<p id="poire">Poire</p>

en ceci:

<p id="fraise">Fraise</p>
<p id="pomme" class="promo">Pomme</p>
<p id="poire">Poire</p>

document.getElementById('pomme').className='promo';
Regexp: document\.getElementById *$ *['"]pomme['"] *$\.className *= *['"]promo['"] *(;|)
document.querySelector('#pomme').className='promo';
Regexp: document\.querySelector *$ *['"]#pomme['"] *$\.className *= *['"]promo['"] *(;|)
document.getElementById('pomme').classList.add('promo');
Regexp: document\.getElementById *$ *['"]pomme['"] *$\.classList\.add$ *['"]promo['"] *$ *(;|)
document.querySelector('#pomme').classList.add('promo');
Regexp: document\.querySelector *$ *['"]#pomme['"] *$\.classList\.add$ *['"]promo['"] *$ *(;|)

Révisions-2

3.6 class

Que faut-il écrire pour transformer ceci

<p id="fraise">Fraise</p>
<p id="pomme" class="promo important">Pomme</p>
<p id="poire">Poire</p>

en ceci:

<p id="fraise">Fraise</p>
<p id="pomme" class="promo">Pomme</p>
<p id="poire">Poire</p>

On vous demande d'enlever la classe "important". On suppose que votre programme ne sait pas à priori quelles autres classes il y a sur l'élément.

document.getElementById('pomme').classList.remove('important');
Regexp: document\.getElementById *$ *['"]pomme['"] *$\.classList\.remove$ *['"]important['"] *$ *(;|)
document.querySelector('#pomme').classList.remove('important');
Regexp: document\.querySelector *$ *['"]#pomme['"] *$\.classList\.remove$ *['"]important['"] *$ *(;|)
document.getElementById('pomme').className
Regexp: document\.(getElementById|querySelector) *$ *['"]#?pomme['"] *$\.className.* : On vous demande d'enlever la classe "important".
On suppose que votre programme ne sait pas à priori quelles autres classes il y a sur l'élément.
Quand on veut gérer plusieurs classes, il y a un moyen plus simple de les manipuler individuellement...

4. Révisions-3

4.1 Révisions-3

Continuons par une révision des notions introduites au Sujet-3

Révisions-3

4.2 Ordre d’exécution

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Exemple</title>
	</head>
	<body>
		<p>Bonjour!</p>
		<script>
            console.log('A');
			var para=document.querySelector('p');
            console.log('B');
			para.addEventListener('click',exemple);
            console.log('C');
			function exemple() 
			{
                console.log('D');
			}
            console.log('E');
		</script>
	</body>
</html>

Quel est l'ordre ?

1
:
A
2
:
B
3
:
On enregistre exemple sur para
4
:
C
5
:
E
6
:
Le script a fini, on rend la main au navigateur
7
:
Après un temps, l'utilisateur clique sur le paragraphe
8
:
D

Révisions-3

4.3 Web client / serveur

Quelles affirmations sont vraies ?

Le navigateur reçoit du HTML et l'affiche
Le navigateur exécute du PHP et affiche le HTML qu'il génère.
La base de données SQL se trouve sur le navigateur
Le JavaScript manipule le DOM qui se trouve sur le serveur
Le CSS est utilisé par le navigateur pour mettre en page le HTML

Révisions-3

4.4 Objet

Appelez la fonction afficher_position avec un objet contenant les coordonnées (x,y) 100 et 200.

function afficher_position(pos)
{
    console.log(pos.x,pos.y);
}

afficher_position({x:100,y:200})
Regexp: afficher_position *$ *\{ *x *: *100 *, *y *: *200 *\} *$ *;?
afficher_position({y:200,y:100})
Regexp: afficher_position *$ *\{ *y *: *200 *, *y *: *100 *\} *$ *;?

Révisions-3

4.5 Tableau

let t=[500,300];

Que faut-il écrire pour ajouter la valeur 800 à la fin du tableau ?

t.push(800);
Regexp: t\.push *$ *800 *$ *(;|)

5. Révisions-4,5

5.1 Révisions-4,5

Continuons par une révision des notions introduites au Sujet-4 et au Sujet-5

Révisions-4,5

5.2 Regexp

Donnez une expression régulière correspondant aux chaînes suivantes:

produit54925-A
produit92856-X
produit1855-A
produit139523-X

La dernière lettre ne peut être que A ou X

/^produit[0-9]+-[AX]$/
Regexp: \/\^produit\[0-9\]\+-\[(AX|XA)\]\$\/

Révisions-4,5

5.3 Regexp 2

Donnez une expression régulière correspondant aux chaînes suivantes:

AXXXXXXB5
AB2
AXXB1
AXXXXXXXXB0
AB9

/^AX*B[0-9]$/
Regexp: \/\^AX\*B\[0-9\]\$\/

Révisions-4,5

5.4 String

let s="123 joueurs on marqué plus de 20 points";

Que faut-il écrire pour remplacer les nombres par X dans la variable s ?

Le résultat souhaité dans s est:
"X joueurs on marqué plus de X points"

s=s.replace(/[0-9]+/g,'X');
Regexp: s *= *s\.replace *$ *\/\[0-9\]\+\/g *, *['"]X['"] *$ *(;|)
s.replace(/[0-9]+/g,'X');
Regexp: s\.replace *$ *\/\[0-9\]\+\/g *, *['"]X['"] *$ *(;|) : Presque! Vous avez oublié de réaffecter ce résultat dans la variable s
s.replace(/[0-9]+/,'X');
Regexp: (s *= *)?s\.replace *$ *\/\[0-9\]\+\/ *, *['"]X['"] *$ *(;|) : Presque! Vous devez utiliser l'option g pour indiquer le remplacement de toutes les occurrences, pas seulement la première.

Révisions-4,5

5.5 Concaténation

La variable n contient un nombre.
Affichez dans la console le nombre n suivi de « joueurs ».

Par exemple si n vaut 100, on voudrait afficher « 100 joueurs »

console.log(n+'joueurs');
Regexp: console\.log *$ *n *\+ *['"] *joueurs['"] *$ *(;|)

Révisions-4,5

5.6 Portée

let x=123;
if(true){
   x=456;
}
console.log(x);

Qu'est affiché sur la console ?

Révisions-4,5

5.7 Portée 2

let x=123;
if(true){
   let x=456;
}
console.log(x);

Qu'est affiché sur la console ?

Révisions-4,5

5.8 Élément DOM

<p id="abc">bonjour</p>

let t=document.getElementById('abc');
XYZ

Que faut-il écrire à la place de XYZ pour obtenir « hello » à la place de « bonjour » ?

t.textContent='hello';
Regexp: t\.textContent *= *['"][hH]ello['"] *(;|)

Révisions-4,5

5.9 Élément DOM 2

<input id="def" type="text"/>

let t=document.getElementById('def');
XYZ

Que faut-il écrire à la place de XYZ pour afficher dans la console ce que l'utilisateur a tapé dans le champs texte ?

console.log(t.value);
Regexp: console\.log *$ *t\.value *$ *(;|)

Révisions-4,5

5.10 Programme entier

<p>Haha</p>

Écrivez, en une seule ligne, sans créer de variable, un programme qui affiche « coucou » dans la console chaque fois que l'utilisateur clique sur le paragraphe.
(c'est un peu long)

document.querySelector('p').addEventListener('click',function(){console.log('coucou');});
Regexp: document\.querySelector *$ *['"]p['"] *$\.addEventListener *$ *['"]click['"] *, *function *\([a-zA-Z]* *$ *\{ *console\.log *$ *['"](coucou|[a-zA-Z ]+)['"] *$ *(;|) *\} *\) *(;|)
document.querySelector('p')
Regexp: document\.querySelector *$ *['"]p['"] *$
addEventListener('click',function(){console.log('coucou');});
Regexp: addEventListener *$ *['"]click['"] *, *function *\([a-zA-Z]* *$ *\{ *console\.log *$ *['"](coucou|[a-zA-Z ]+)['"] *$ *(;|) *\} *\) *(;|) : Vous êtes sur la bonne voie: La fin est correcte:
addEventListener(function(){console.log('coucou');});
document.querySelector('p').addEventListener
Regexp: document\.querySelector *$ *['"]p['"] *$\.addEventListener.* : Vous êtes sur la bonne voie: Le début est correct: document.querySelector('p').addEventListener
document.querySelector('p')
Regexp: document\.querySelector *$ *['"]p['"] *$.* : Vous êtes sur la bonne voie: Le début est correct: document.querySelector('p')

6. Diaporama

6.1 Diaporama

On veut créer un affichage où plusieurs images peuvent défiler à l'aide de deux flèches, comme ceci:

Pour ça, on créez les fichiers HTML et le CSS suivants:

diapos.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>diapos</title>
		<link type="text/css" rel="stylesheet" href="diapos.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	</head>
	<body>
<!--------------------->
<div id="dia">
	<div id="dia-images">
		<img src="http://moodle.iutv.univ-paris13.fr/img/js/montagne-small.jpg" />
		<img src="http://moodle.iutv.univ-paris13.fr/img/js/oiseau-small.jpg"   />
		<img src="http://moodle.iutv.univ-paris13.fr/img/js/escargot-small.jpg" />
		<img src="http://moodle.iutv.univ-paris13.fr/img/js/marmotte-small.jpg" />
	</div>
	<div id="dia-fleches">
		<span id="dia-gauche">&lt;</span>
		<span id="dia-droite">&gt;</span>
	</div>
</div>
<!--------------------->
		<script src="diapos.js"></script>
	</body>
</html>

diapos.css

/* Le cadre principal. */
#dia
{
	/* On le restreint exactement à la taille d'une seule image. */
	width: 600px;
	height: 450px;
	/* Tout ce qui déborde est caché. Donc, une seule image n'est visible. */
	overflow: hidden;
	/* Ceci sert uniquement pour créer un containing block  */
	/* qui permet de positionner les flêches avec position: absolute  */
	position: relative;
}

/* Un div très très large */
/* Il contient toutes les images disposées horizontalement */
/* Il déborde de son parent */
#dia-images 
{
	/* La largeur des 4 images */
	width: 2400px;
	/* Trés important: c'est ce qui permet de décaler ce div en JS avec "left: ...px;" */
	position: relative; 
	/* Les images sont affichées de gauche à droite, sans espaces */
	display: flex;
	/* Décalage: coordonnée x de dia-images */
	left: 0px;
}

/* Commun aux deux flêches */
#dia-fleches span
{
	position: absolute;
	top: 200px;
	font-size: 30px;
	font-family: sans;
	background-color: rgba(0,0,0,.4);
	color: #bbb;
	padding: .1em;
	/* Le pointeur de la souris */
	cursor: pointer;
}
#dia-gauche
{
	left: 0;	
}
#dia-droite
{
	right: 0;
}
#dia-fleches span:hover
{
	color: #fff;	
}

Vérifiez que ceci s'affiche bien et prenez le temps de comprendre en détail cette mise en page.

Lisez les commentaires du CSS.

Utilisez l'inspecteur (outils de développement) pour voir où sont les images.

On va ensuite voir ensemble comment faire fonctionner le défilement.

Diaporama

6.2 Diapos : analyze

<div id="dia"> est ajusté exactement à la taille d'une image (600x450).

<div id="dia-images"> contient toutes les images horizontalement. Il est beaucoup plus large que <div id="dia" >

Grâce à "overflow: hidden;" tout ce qui déborde de <div id="dia"> est caché.

Dans le CSS, pour #dia, ajoutez ceci:

    border: 5px solid red;

Dans le CSS, pour #dia-images, ajoutez ceci:

    border: 5px solid green;

Regardez le résultat.

Maintenant, dans le CSS, mettez en commentaire overflow: hidden

Combien d'images voyez-vous ?
(vous devrez peut-être faire défiler un peu la page à droite)

Diaporama

6.3 Déplacement dans le CSS

Maintenant, dans le fichier CSS, remplacez « left: 0px; » par « left: 100px; »
Remarquez dans quel sens bouge dia-images.

left: XYZpx;

Dans le CSS, que faut-il écrire à la place de XYZ pour que l'escargot soit affiché dans #dia (le cadre rouge) ?
(Essayez avant de répondre ici)

-1200
Regexp: (left *: *)?-1200(px)?
-1200
Regexp: (left *: *)?-1200( +px)? : Presque! Vous avez ajouté un espace entre le nombre et "px" ... c'est une erreur.
-1100
Regexp: (left *: *)?-1[12][0-9][0-9](px)? : Presque! Utilisez une valeur multiple de 100.

Diaporama

6.4 Déplacement en JS dans la console

En modifiant le CSS, on a réussi à bouger #dia-images !
Remettez "overflow: hidden" et enlevez les "border: 5 px solid ..."
Dans le CSS, essayez à nouveau différentes valeurs de "left: ...px" pour #dia-images.

Ce que vous faites à la main dans le CSS, c'est ce qu'on veut faire en JS.
En JS, on ne modifie pas le fichier CSS, mais on modifie la propriété "style" de l'élément concerné.
Remettez "left: 0px" dans le fichier CSS.

On veut afficher l'escargot en JS.
Il faut donc:

Aller chercher l'élément #dia-images
Accéder à la propriété style, puis à left
Y indiquer une nouvelle valeur (sans oublier "px")

Essayez dans la console. Une fois que ça marche, copiez la réponse ici.

document.getElementById('dia-images').style.left='-1200px'
Regexp: document\.(getElementById$ *['"]|querySelector\( *['"]#)dia-images['"] *$\.style\.left *= *(['"]-1200|-1200 *\+ *['"])px['"] *;?

Diaporama

6.5 diapos.js

Créez le fichier diapos.js

Faites en sorte d'afficher "Flèche droite" dans la console, quand l'utilisateur clique sur la flèche droite.
(N'hésitez pas à vous inspirer de ce que vous avez fait dans d'autres exercices)

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Diaporama

6.6 Correction: diapos.js

let diaDroite=document.getElementById('dia-droite');
diaDroite.addEventListener('mousedown',function(){
  console.log('Flèche droite');

});

Diaporama

6.7 Déplacer

En tout début de fichier JS, ajoutez la ligne suivante, pour initialiser à 0 la position de dia-images:

document.getElementById('dia-images').style.left='0px';

Pour déplacer les images sur l'escargot, on avait utilisé:

document.getElementById('dia-images').style.left='-1200px'

Décomposons:

let diaImages=document.getElementById('dia-images')

diaImages.style.left='-1200px'

Pour pouvoir déplacer les images, il faut d'abord connaître leur position (comme on avait déplacé le pingouin dans jeu.js au Sujet-3).
On va lire sa position avec:

let pos=parseInt(diaImages.style.left);

Ensuite, il faut changer la valeur numérique dans "pos" et mettre à jour diaImages.style.left

Faites en sorte qu'on puisse faire défiler les diapos en cliquant sur la flèche droite.
(N’hésitez pas à vous inspirer de jeu.js du Sujet-3)

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Diaporama

6.8 Correction

diapos.js

document.getElementById('dia-images').style.left='0px';

let diaDroite=document.getElementById('dia-droite');
diaDroite.addEventListener('click',function(){
  console.log('Flèche droite');
  let diaImages=document.getElementById('dia-images');
  let pos=parseInt(diaImages.style.left);
  pos-=600;
  diaImages.style.left=pos+'px';

});

Diaporama

6.9 Flèche gauche

Faites en sorte que la flèche gauche fonctionne aussi.

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Diaporama

6.10 Correction

document.getElementById('dia-images').style.left='0px';

let diaDroite=document.getElementById('dia-droite');
diaDroite.addEventListener('click',function(){
  console.log('Flèche droite');
  let diaImages=document.getElementById('dia-images');
  let pos=parseInt(diaImages.style.left);
  pos-=600;
  diaImages.style.left=pos+'px';
});

let diaGauche=document.getElementById('dia-gauche');
diaGauche.addEventListener('click',function(){
  console.log('Flèche gauche');
  let diaImages=document.getElementById('dia-images');
  let pos=parseInt(diaImages.style.left);
  pos+=600;
  diaImages.style.left=pos+'px';
});

Diaporama

6.11 Conditions d'arrêt

Ajoutez des conditions sur pos pour que le défilement s’arrête quand on arrive aux bouts.

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Diaporama

6.12 Correction

document.getElementById('dia-images').style.left='0px';

let diaDroite=document.getElementById('dia-droite');
diaDroite.addEventListener('click',function(){
  console.log('Flèche droite');
  let diaImages=document.getElementById('dia-images');
  let pos=parseInt(diaImages.style.left);
  pos-=600;
  if(pos<-600*3){pos=-600*3;}
  diaImages.style.left=pos+'px';
});

let diaGauche=document.getElementById('dia-gauche');
diaGauche.addEventListener('click',function(){
  console.log('Flèche gauche');
  let diaImages=document.getElementById('dia-images');
  let pos=parseInt(diaImages.style.left);
  pos+=600;
  if(pos>0){pos=0;}
  diaImages.style.left=pos+'px';
});

Diaporama

6.13 Transition

On veut que le passage d'une diapos à l'autre soit plus fluide.
Dans des programmes précédents on a utilisé la propriété CSS transition.
Dans le fichier CSS il suffit d'ajouter une ligne dans #dia-image
Cette ligne va dire que tout changement de la propriété CSS left doit prendre 0.5 secondes.

Ecrivez ici la ligne qu'il faut ajouter.
Inspirez vous de ce qui a été vu pour l'animation du splat vert, ou du pingouin Tux dans le jeu ...
(voir documentation)

transition: left .5s;
Regexp: transition *:( |) *left +0?\.5s *(;|)

7. Programmes courts

7.1 Programmes courts

Au cours des 5 derniers sujets, on a appris a écrire des programmes JS simples. Vous devez maintenant être en mesure d'en écrire, seul.
C'est ce qu'on va faire maintenant.

Programmes courts

7.2 Rouge vert

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Rouge vert</title>
	</head>
	<body>
		<p><span id="fraise">Fraise</span> <span id="pistache">Pistache</span></p>
		<script>
            ...
		</script>
	</body>
</html>

Quand l'utilisateur clique sur « Fraise », « Fraise » devient rouge.
Quand l'utilisateur clique sur « Pistache », « Pistache » devient verte.

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Programmes courts

7.3 Correction

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Rouge vert</title>
	</head>
	<body>
		<p><span id="fraise">Fraise</span> <span id="pistache">Pistache</span></p>
		<script>
			let f=document.getElementById('fraise');
			f.addEventListener('click',function(){
			  f.style.color='red';
			});
			let p=document.getElementById('pistache');
			p.addEventListener('click',function(){
			  p.style.color='red';
			});
		</script>
	</body>
</html>

Programmes courts

7.4 Liste

liste.html

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Liste</title>
	</head>
	<body>
		<ul>
			<li>Karim</li>
			<li>Paul</li>
			<li>Leila</li>
			<li>Tom</li>
			<li>Steve</li>
		</ul>
		<script>
           ...
		</script>
	</body>
</html>

Quand l'utilisateur clique sur un nom, il devient rouge.

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Programmes courts

7.5 Correction

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Liste</title>
	</head>
	<body>
		<ul>
			<li>Karim</li>
			<li>Paul</li>
			<li>Leila</li>
			<li>Tom</li>
			<li>Steve</li>
		</ul>
		<script>
			let lis=document.querySelectorAll('li');
			for(let i=0;i<lis.length;i++){
			   lis[i].addEventListener('click',function(){
				 this.style.color='red';
			   });
			}
		</script>
	</body>
</html>

Programmes courts

7.6 class

class.html

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Rouge vert</title>
	</head>
	<style>
		.ok{
			color: white;
			background-color: green;
			text-shadow: 1px 1px 1px black;
			box-shadow: 1px 1px 1px black;
		}
		.lumiere
		{
			padding: .5em;
			margin: .5em;
		}
	</style>
	<body>
		<p><span class="lumiere">Départ</span></p>
		<script>
            ...
		</script>
	</body>
</html>

Quand l'utilisateur clique sur Départ, il est affiché avec ce qui est indiqué dans .ok {...}.
Si l'utilisateur clique dessus alors que c'est déjà affiché avec .ok, alors, on revient à la situation initiale.

Rappel: classList

Programmes courts

7.7 Correction

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Rouge vert</title>
	</head>
	<style>
		.ok{
			color: white;
			background-color: green;
			text-shadow: 1px 1px 1px black;
			box-shadow: 1px 1px 1px black;
		}
		.lumiere
		{
			padding: .5em;
			margin: .5em;
		}
	</style>
	<body>
		<p><span class="lumiere">Départ</span></p>
		<script>
			let s=document.querySelector('span');
			s.addEventListener('click',function(){
			  if(s.classList.contains('ok')){s.classList.remove('ok');}
			  else {s.classList.add('ok');}
			});
		</script>
	</body>
</html>

Programmes courts

7.8 Champs texte

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Champs texte</title>
	</head>
	<body>
		<p><input type="text"/></p>
		<script>
           ...
		</script>
	</body>
</html>

Quand l'utilisateur tape du texte, le texte du champs texte devient rouge si ce que l'utilisateur a tapé est plus court que 10 caractères. Il devient noir sinon.

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Programmes courts

7.9 Correction

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Champs texte</title>
	</head>
	<body>
		<p><input type="text"/></p>
		<script>
			let t=document.querySelector('input');
			t.addEventListener('keyup',function(){
			   if(t.value.length<10){t.style.color='red'  ;}
               else                 {t.style.color='black';}
			});
		</script>
	</body>
</html>

Programmes courts

7.10 Ajouter ligne

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Ajouter ligne</title>
	</head>
	<body>
		<p>
			<input id="nom" type="text"/>
			<input id="ajouter" type="button" value="ajouter"/>
		</p>
		<ul>
			<li>Karim</li>
			<li>Fatoumata</li>
		</ul>
		<script>
                        ...
		</script>
	</body>
</html>

Quand l'utilisateur rentre un nom puis appuie sur le bouton, le nom est ajouté à la liste.

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Programmes courts

7.11 Correction

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Ajouter ligne</title>
	</head>
	<body>
		<p>
			<input id="nom" type="text"/>
			<input id="ajouter" type="button" value="ajouter"/>
		</p>
		<ul>
			<li>Karim</li>
			<li>Fatoumata</li>
		</ul>
		<script>
			let bouton=document.getElementById('ajouter');
			bouton.addEventListener('click',function(){
			    let ligne=document.createElement('li');
			    ligne.textContent=document.getElementById('nom').value;
			    document.querySelector('ul').append(ligne);
			});
		</script>
	</body>
</html>

Sujet 6

1. Bienvenue au 6e sujet

1.1 Bienvenue au 6e sujet

2. Révisions-1

2.1 Révisions-1

Révisions-1

2.2 Boucle for

Révisions-1

2.3 addEventListener

Révisions-1

2.4 addEventListener

Révisions-1

2.5 DOM

Révisions-1

2.6 Sélecteurs CSS

Révisions-1

2.7 Sélecteur 2

Révisions-1

2.8 Sélecteur composé

Révisions-1

2.9 pageX

Révisions-1

2.10 Créer un élément

Révisions-1

2.11 Remplir paragraphe

Révisions-1

2.12 Insérer

Révisions-1

2.13 Position

3. Révisions-2

3.1 Révisions-2

Révisions-2

3.2 querySelector : plusieurs

Révisions-2

3.3 querySelectorAll

Révisions-2

3.4 Fonction anonyme

Révisions-2

3.5 Class

Révisions-2

3.6 class

4. Révisions-3

4.1 Révisions-3

Révisions-3

4.2 Ordre d’exécution

Révisions-3

4.3 Web client / serveur

Révisions-3

4.4 Objet

Révisions-3

4.5 Tableau

5. Révisions-4,5

5.1 Révisions-4,5

Révisions-4,5

5.2 Regexp

Révisions-4,5

5.3 Regexp 2

Révisions-4,5

5.4 String

Révisions-4,5

5.5 Concaténation

Révisions-4,5

5.6 Portée

Révisions-4,5

5.7 Portée 2

Révisions-4,5

5.8 Élément DOM

Révisions-4,5

5.9 Élément DOM 2

Révisions-4,5

5.10 Programme entier

6. Diaporama

6.1 Diaporama

Diaporama

6.2 Diapos : analyze

Diaporama

6.3 Déplacement dans le CSS

Diaporama

6.4 Déplacement en JS dans la console

Diaporama