--> Stage de programmation web
∼

html / CSS / Javascript

1Logiciels utilisés et liens utiles Vous pourrez utiliser les logiciels suivants :

Notepad++ pour écrire nos fichiers. https://notepad-plus-plus.org.
Le service en ligne replit.com qui permet de créer des fichiers html sur le cloud.
The Gimp, pour les graphiques. http://www.gimp.org/

Quelques liens utiles pour ceux qui voudraient en apprendre plus que ce que nous aborderons :

2Les balises html Exercice 1 Dans votre éditeur taper le texte ci-dessous, enregistrer votre programme dans le répertoire choisi en le nommant test_01.html. Ouvrir ensuite ce fichier avec un navigateur web.

xxxxxxxxxx
 
Voici mon super site !
Quelle joie !

Le résultat qui apparaît correspond aux caractères enregistrés mais sans passage à la ligne et sans aucun formatage.
Pour mieux organiser ce que l'on voit, il va falloir ajouter des instructions « codées » dans notre fichier test_01.html.
Remplacer le contenu du fichier précédent par ce qui suit et observer le résultat dans votre navigateur en rechargeant la page.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mon super premier fichier html</title>
</head>
<body> 
<p>
    Voici mon super site !
    <br>
    Quelle joie !
</p>
</body>
</html>

Chaque instruction entre les caractères < et > s'appelle une balise, et toutes ont un effet sur la structure de la page web. Nous allons apprendre le fonctionnement des plus communes dans ce tutoriel. Exercice 2 La zone de saisie ci-dessous simule l'utilisation d'un éditeur, et « l'écran » en dessous simule le résultat dans un navigateur. Cliquer sur « Exécuter » pour afficher le résultat du code.
Modifier ensuite le texte entre les balises body et insérer au milieu de celui-ci la balise <br />. Observer le résultat en cliquant sur « Exécuter ».

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
​
<style>
body{
    background-color:lightblue;
}
</style>
​
</head>
<body>
​
Changer le texte ici !
​
</body>
</html>

Exécuter

3Le CSS Exercice 3 On aimerait que le texte du fichier de l'exercice 1 soit écrit en rouge.
Voici trois méthodes pour faire cela. Nous verrons ensuite laquelle est la meilleure.

Dans la première, on modifie l'attribut css couleur du bloc <p>.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mon super premier fichier html</title>
</head>
<body> 
<p style="color:#ff0000;">
   Voici mon super site !
   <br>
   Quelle joie !
</p>
</body>
</html>

Pour la deuxième, on annonce le changement de couleur dans la partie <head> de notre document.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mon super premier fichier html</title>
<style>
p{
   color: #ff0000;
}
</style>
</head>
<body> 
<p>
   Voici mon super site !
   <br>
   Quelle joie !
</p>
</body>
</html>

Dans la troisième méthode on se sert d'un fichier externe styles.css, on doit le signaler dans le <head> du document et on crée ensuite ce nouveau fichier (on veillera à l'enregistrer dans le même répertoire que test_01.html.

Nom du fichier : test_01.html

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mon super premier fichier html</title>
<link rel="stylesheet" href="styles.css">
</head>
<body> 
<p>
   Voici mon super site !
   <br>
   Quelle joie !
</p>
</body>
</html>

Nom du fichier : styles.css

xxxxxxxxxx
 
p{
 color:#ff0000; 
}

Exercice 4 On souhaite maintenant écrire un paragraphe en rouge, l'autre, en blanc sur fond noir, et le troisième de la même manière que le premier.
Modifier vos fichiers avec les codes ci-dessous :

Nom du fichier : test_01.html

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
<title>Mon super premier fichier html</title>
</head>
<body> 
<p class="rouge">
   Voici mon super site !
   <br />
   Quelle joie !
</p>
​
<p class="noir">
   Maintenant un joli texte en blanc sur fond noir.
</p>
​
<p class="rouge">
   Revenons au rouge...
</p>
​
</body>
</html>

Nom du fichier : styles.css

xxxxxxxxxx
 
.rouge{
    color:#ff0000; 
 }
.noir{
    color:#ffffff;
    background-color: #000000; 
 }

Exercice 5 Compléter le code ci-dessous pour que la couleur de fond de la page soit rose, que la couleur d'écriture du premier paragraphe soit blanche, et du deuxième bleue.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
​
<style>
​
body{
   background-color: ;
}
.para1{
    color: black;
}
</style>
​
</head>
<body>
​
<p class="para1">
Ce paragraphe doit être écrit en blanc !
</p>
​
<p class="para2">
Alors que celui-ci en ??? Je ne sais plus ???
</p>
​
​
        
​
</body>
</html>

Exécuter

Exercice 6 Chaque balise html peut avoir ses attributs css que l'on modifie pour obtenir un aspect différent. Il faut donc apprendre les balises html et les attributs css.
À l'aide de recherches expliquer le rôle des balises html et attributs css ci-dessous :

```
<div>
```
```
<table>
```
```
<a>
```
```
<img />
```
```
<h1>
```
```
background-image
```
```
font-size
```
```
width
```
```
height
```
```
margin
```
```
opacity
```
```
word-wrap
```
```
border-radius
```
```
border
```
```
box-shadow
```
```
position
```

Exercice 7 Modifier le code ci-dessous pour que le rectangle blanc soit à la droite du disque bleu et non en dessous.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
​
<style>
body{
   background-color: lightgreen;
}
#rectangle{
    position: absolute;
    top: 200px;
    left: 50px;
    width: 150px;
    height: 80px;
    background-color: white;
    border: solid 3px black;
}
#balle{
    position: absolute;
    top: 100px;
    left: 50px;
    width: 80px;
    height: 80px;
    border-radius: 80px;
    background-color: lightblue;
    border: solid 3px black;
}
</style>
​
</head>
<body>
​
<div id="rectangle"></div>
​
<div id="balle"></div>
</body>
</html>

Exécuter

Exercice 8 Votre mission est de créer une page pour obtenir le résultat ci-dessous

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
​
<style>
​
​
</style>
​
</head>
<body>
​
​
</body>
</html>

Exécuter

4Les images Un site web se doit d'être agréable à l’œil. Il faut donc savoir y insérer des images. Cela n'est pas toujours aisé. Voici des problématiques auxquelles il va nous falloir répondre.

Image détaillée ou compressée ?
Quel est le meilleur format d'image ?
Comment créer ou modifier des images ?
Quelles images ai-je le droit d'utiliser ?
Comment insérer une image dans un site web ?

5Un exemple pas à pas Nous allons créer une page web, en partant de zéro, et en effectuant des ajouts, au fur et à mesure, pour bien se rendre compte de l'effet de chaque instruction.
Nous aurons besoin pour cela de créer un nouveau répertoire, dans lequel nous créerons, deux fichiers : page_web.html et mon_style.css. Pour la première étape le fichier mon_style.css sera vide.

Nom du fichier : page_web.html

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="mon_style.css" />
<title>Pas à Pas</title>
</head>
<body> 
​
​
​
</body>
</html>

Nom du fichier : mon_style.css

​

En faisant un clic droit sur l'image ci-dessous, on la sauvegardera dans le même répertoire que les deux fichiers précédents, et on la nommera fractale.png. Ce sera l'image qui nous servira d'image de fond pour notre page web.

fractale.png

• Étape 1
Ouvrir le fichier page_web.html dans votre navigateur.
Ouvrir le fichier page_web.html dans votre navigateur.
Une page blanche devrait apparaître, et c'est normal, car nous n'avons encore rien écrit entre les balises <body> et </body>.

• Étape 2
Nous allons modifier le fichier mon_style.css pour afficher l'image de fond.

Nom du fichier : mon_style.css

xxxxxxxxxx
 
body{
    background-image:url('fractale.png');
    }

Vérifier le changement en actualisant la page web.

• Étape 3
Nous obtenons une image de fond qui se répète. Pour empêcher cela, nous allons à nouveau modifier le fichier de style.

Nom du fichier : mon_style.css

xxxxxxxxxx
 
body{
    background-image:url('fractale.png');
    background-repeat: no-repeat;
    }

• Étape 4
L'image ne se répète plus, mais la couleur de fond ne correspond pas. Nous décidons de plus de placer l'image en haut à droite et non à gauche.

Nom du fichier : mon_style.css

xxxxxxxxxx
 
body{
    background-image:url('fractale.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-color:  #000000;
    }

• Étape 5
Nous allons maintenant organiser le corps de notre fichier html.
Nous y mettrons une bannière pour le titre et un conteneur central, pour le texte principal, qui sera découpé en plusieurs paragraphes.

Nom du fichier : page_web.html

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="mon_style.css" />
<title>Pas à Pas</title>
</head>
<body> 
​
<div id="banniere">
​
</div>
​
<div id="conteneur">
​
    <div class="paragraphe">
    
    </div>
​
    <div class="paragraphe">
    
    </div>
​
    <div class="paragraphe">
    
    </div>
​
</div>
​
</body>
</html>

Pour l'instant, ces derniers changements ne sont pas encore visible car aucun contenu n'a été ajouté à l'intérieur de ces balises.

• Étape 6
Ajoutons du texte en latin (c'est une pratique courante chez les développeurs web durant la conception d'un site).

Nom du fichier : page_web.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="mon_style.css" />
<title>Pas à Pas</title>
</head>
<body>

<div id="banniere">
	Harum trium sententiarum
</div>

<div class="paragraphe">
	       <h2>Quam multa enim</h2>

Batnae municipium in Anthemusia conditum 
	       Macedonum manu priscorum ab Euphrate 
	       flumine brevi spatio disparatur, refertum 
	       mercatoribus opulentis, ubi annua 
	       sollemnitate prope Septembris initium 
	       mensis ad nundinas magna promiscuae 
	       fortunae convenit multitudo ad commercanda 
	       quae Indi mittunt et Seres aliaque plurima 
	       vehi terra marique consueta
	</div>

<div class="paragraphe">
	       <h2>Quae in nostris rebus</h2>

Accedebant enim eius asperitati, ubi 
	       inminuta vel laesa amplitudo imperii 
           dicebatur, et iracundae suspicionum 
     	   quantitati proximorum cruentae blanditiae 
	       exaggerantium incidentia et dolere 
	       inpendio simulantium, si principis 
	       periclitetur vita, a cuius salute velut 
	       filo pendere statum orbis terrarum
	       fictis vocibus exclamabant.
	</div>

<div class="paragraphe">
	       <h2>sic in amicum sit animatus</h2>

Ob haec et huius modi multa, quae 
           cernebantur in paucis, omnibus timeri 
	       sunt coepta. et ne tot malis dissimulatis 
  	       paulatimque serpentibus acervi crescerent
           aerumnarum, nobilitatis decreto legati 
	       mittuntur: Praetextatus ex urbi praefecto 
	       et ex vicario Venustus et ex consulari 
	       Minervius oraturi, ne delictis supplicia 
	       sint grandiora, neve senator quisquam
           inusitato et inlicito more tormentis
           exponeretur.
	</div>

</div>

</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="mon_style.css" />
<title>Pas à Pas</title>
</head>
<body> 
​
<div id="banniere">
    Harum trium sententiarum
</div>
​
<div id="conteneur">
​
    <div class="paragraphe">
           <h2>Quam multa enim</h2>
​
           Batnae municipium in Anthemusia conditum 
           Macedonum manu priscorum ab Euphrate 
           flumine brevi spatio disparatur, refertum 
           mercatoribus opulentis, ubi annua 
           sollemnitate prope Septembris initium 
           mensis ad nundinas magna promiscuae 
           fortunae convenit multitudo ad commercanda 
           quae Indi mittunt et Seres aliaque plurima 
           vehi terra marique consueta
    </div>
​

Et nous allons, mettre un fond blanc dans la bannière et le conteneur centrale.

Nom du fichier : mon_style.css

xxxxxxxxxx
 
body{
    background-image:url('fractale.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-color:  #000000;
    }
#banniere{
    background-color:#ffffff;
    }
#conteneur{
    background-color:#ffffff;
    }

• Étape 7 : la bannière
Nous allons modifier la largeur de la bannière pour qu'elle occupe 70% de la largeur de l'écran. Ensuite, nous écrirons au centre de la div avec une police de 2em, et nous demanderons à ce qu'il y ait une marge interne de 10 pixels en haut et en bas.

Nom du fichier : mon_style.css
Lignes modifiées : ligne 9 à 13.

xxxxxxxxxx
 
body{
    background-image:url('fractale.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-color:  #000000;
    }
#banniere{
    background-color:#ffffff;
    width:70%;
    text-align:center;
    font-size:2em;
    padding-top:10px;
    padding-bottom:10px;
    }
#conteneur{
    background-color:#ffffff;
    }

Nous allons maintenant écrire le titre de la bannière en gras, et avec une ombre en gris.
Nous demandons également à ce que les coins de la bannière soient arrondis.

Nom du fichier : mon_style.css
Lignes modifiées : ligne 14 à 16.

xxxxxxxxxx
 
body{
    background-image:url('fractale.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-color:  #000000;
    }
#banniere{
    background-color:#ffffff;
    width:70%;
    text-align:center;
    font-size:2em;
    padding-top:10px;
    padding-bottom:10px;
    font-weight:bold;
    text-shadow: 2px 3px 2px #929292;
    border-radius:5px;
    }
#conteneur{
    background-color:#ffffff;
    }

Ajoutons maintenant une image à gauche dans la bannière. Cette image, à télécharger ci-dessous (clic droit + enregistrer-sous), à une hauteur de 100 pixels. Il faut donc donner cette même hauteur à notre bannière, et dire que la ligne d'écriture fait également 100 pixels, si on veut que le texte soit centré verticalement.

Nom du fichier : julia.png

Nom du fichier : mon_style.css
Lignes modifiées : ligne 17 à 21.

xxxxxxxxxx
 
body{
    background-image:url('fractale.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-color:  #000000;
    }
#banniere{
    background-color:#ffffff;
    width:70%;
    text-align:center;
    font-size:2em;
    padding-top:10px;
    padding-bottom:10px;
    font-weight:bold;
    text-shadow: 2px 3px 2px #929292;
    border-radius:5px;
    background-image:url('julia.png');
    background-repeat: no-repeat;
    background-position: top left;
    height: 100px;
    line-height:100px;
    }
#conteneur{
    background-color:#ffffff;
    }

• Étape 8 : le conteneur central
Nous allons tout d'abord, établir une marge avec la bannière, pour ne pas que les div soient collées.
Ensuite, nous allons éloigner le texte des bords hauts et bas de la div, c'est-à-dire augmenter les marges internes, puis définir une largeur égale à celle de la bannière.
Et pour finir, nous arrondirons les coins de la div.

Nom du fichier : mon_style.css
Lignes modifiées : ligne 25 à 29.

xxxxxxxxxx
 
body{
    background-image:url('fractale.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-color:  #000000;
    }
#banniere{
    background-color:#ffffff;
    width:70%;
    text-align:center;
    font-size:2em;
    padding-top:10px;
    padding-bottom:10px;
    font-weight:bold;
    text-shadow: 2px 3px 2px #929292;
    border-radius:5px;
    background-image:url('julia.png');
    background-repeat: no-repeat;
    background-position: top left;
    height: 100px;
    line-height:100px;
    }
#conteneur{
    background-color:#ffffff;
    margin-top: 30px;
    padding-top:10px;
    padding-bottom:10px;
    width: 70%;
    border-radius:5px;
    }

• Étape 9 : les paragraphes
Pour l'instant les paragraphes occupent 100% de la largeur du conteneur central. Nous allons réduire cela, et demander de centrer les div.

Nom du fichier : mon_style.css
Lignes modifiées : ligne 31 à 34.

xxxxxxxxxx
 
body{
    background-image:url('fractale.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-color:  #000000;
    }
#banniere{
    background-color:#ffffff;
    width:70%;
    text-align:center;
    font-size:2em;
    padding-top:10px;
    padding-bottom:10px;
    font-weight:bold;
    text-shadow: 2px 3px 2px #929292;
    border-radius:5px;
    background-image:url('julia.png');
    background-repeat: no-repeat;
    background-position: top left;
    height: 100px;
    line-height:100px;
    }
#conteneur{
    background-color:#ffffff;
    margin-top: 30px;
    padding-top:10px;
    padding-bottom:10px;
    width: 70%;
    border-radius:5px;
    }
.paragraphe{
    width:50%;
    margin:auto;
    }

Pour les titres (balises h2), nous allons ajouter à gauche une image de fond (à télécharger ci-dessous), et donc devoir décaler l'écriture pour que le texte ne se superpose pas à l'image.
Pour que le texte soit centré verticalement, nous allons définir la hauteur de la balise et donner la même valeur pour la hauteur de ligne.

Nom du fichier : vign_2.jpg

Nom du fichier : mon_style.css
Lignes modifiées : ligne 35 à 42.

xxxxxxxxxx
 
body{
    background-image:url('fractale.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-color:  #000000;
    }
#banniere{
    background-color:#ffffff;
    width:70%;
    text-align:center;
    font-size:2em;
    padding-top:10px;
    padding-bottom:10px;
    font-weight:bold;
    text-shadow: 2px 3px 2px #929292;
    border-radius:5px;
    background-image:url('julia.png');
    background-repeat: no-repeat;
    background-position: top left;
    height: 100px;
    line-height:100px;
    }
#conteneur{
    background-color:#ffffff;
    margin-top: 30px;
    padding-top:10px;
    padding-bottom:10px;
    width: 70%;
    border-radius:5px;
    }
.paragraphe{
    width:50%;
    margin:auto;
    }
h2{
    background-image:url('vign_2.jpg');
    background-repeat: no-repeat;
    background-position: top left;
    padding-left:50px;
    height:50px;
    line-height:50px;
    }

• Étape 10 : ajout d'une image
Pour terminer, nous allons ajouter une image (à télécharger ci-dessous), dans le corps du fichier html.

Nom du fichier : fractale.jpg

Nom du fichier : page_web.html
Ligne modifiée : 33.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="mon_style.css" />
<title>Pas à Pas</title>
</head>
<body>

<div id="banniere">
	Harum trium sententiarum
</div>

<div class="paragraphe">
	       <h2>Quam multa enim</h2>

<div class="paragraphe">
	       <h2>Quae in nostris rebus</h2>

<img id="img_01" src="fractale.jpg" />
	       
	       Accedebant enim eius asperitati, ubi 
	       inminuta vel laesa amplitudo imperii 
           dicebatur, et iracundae suspicionum 
     	   quantitati proximorum cruentae blanditiae 
	       exaggerantium incidentia et dolere 
	       inpendio simulantium, si principis 
	       periclitetur vita, a cuius salute velut 
	       filo pendere statum orbis terrarum
	       fictis vocibus exclamabant.
	</div>

<div class="paragraphe">
	       <h2>sic in amicum sit animatus</h2>

</div>

</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="mon_style.css" />
<title>Pas à Pas</title>
</head>
<body> 
​
<div id="banniere">
    Harum trium sententiarum
</div>
​
<div id="conteneur">
​
    <div class="paragraphe">
           <h2>Quam multa enim</h2>
​
           Batnae municipium in Anthemusia conditum 
           Macedonum manu priscorum ab Euphrate 
           flumine brevi spatio disparatur, refertum 
           mercatoribus opulentis, ubi annua 
           sollemnitate prope Septembris initium 
           mensis ad nundinas magna promiscuae 
           fortunae convenit multitudo ad commercanda 
           quae Indi mittunt et Seres aliaque plurima 
           vehi terra marique consueta
    </div>
​
    <div class="paragraphe">

Et il nous reste à définir le style pour cette image dans le fichier css.
Nous allons définir sa taille, et à la place de demander à la centrer, nous allons définir une position flottante à droite, ce qui aura pour effet que l'image sera placée à droite, et que le texte s'y adaptera.
Et pour des raisons esthétiques, nous allons ajouter une bordure arrondie autour de cette image.

Nom du fichier : mon_style.css
Lignes modifiées : ligne 43 à 48.

xxxxxxxxxx
 
body{
    background-image:url('fractale.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-color:  #000000;
    }
#banniere{
    background-color:#ffffff;
    width:70%;
    text-align:center;
    font-size:2em;
    padding-top:10px;
    padding-bottom:10px;
    font-weight:bold;
    text-shadow: 2px 3px 2px #929292;
    border-radius:5px;
    background-image:url('julia.png');
    background-repeat: no-repeat;
    background-position: top left;
    height: 100px;
    line-height:100px;
    }
#conteneur{
    background-color:#ffffff;
    margin-top: 30px;

6Un concours Voici deux fichiers composant une page web : une page html et un fichier de style css.
La règle du concours et de ne jamais modifier la page html, mais par contre de faire preuve d'imagination sur le fichier css, pour que la page web soit la plus belle possible !

Nom du fichier : concours.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Concours CSS</title>
<link rel="stylesheet" href="concours_style.css" />
</head>

<body>

<div id="ban">
Concours CSS - Lycée Gutenberg
</div>

<div id="para_1">
<h2>La couleur des sables brûlants</h2>

Pandente itaque viam fatorum sorte tristissima, qua praestitutum 
erat eum vita et imperio spoliari, itineribus interiectis 
permutatione iumentorum emensis venit Petobionem oppidum Noricorum,
ubi reseratae sunt insidiarum latebrae omnes, et Barbatio repente 
apparuit comes, qui sub eo domesticis praefuit, cum Apodemio agente 
in rebus milites ducens, quos beneficiis suis oppigneratos elegerat 
imperator certus nec praemiis nec miseratione ulla posse deflecti.
</div>

<div id="para_2">
<h2>Le son du vent lointain</h2>

Quapropter a natura mihi videtur potius quam ab indigentia orta 
amicitia, applicatione magis animi cum quodam sensu amandi quam 
cogitatione quantum illa res utilitatis esset habitura. 
Quod quidem quale sit, etiam in bestiis quibusdam animadverti 
potest, quae ex se natos ita amant ad quoddam tempus et ab eis ita 
amantur ut facile earum sensus appareat. Quod in homine multo est 
evidentius, primum ex ea caritate quae est inter natos et parentes, 
quae dirimi nisi detestabili scelere non potest; deinde cum similis 
sensus exstitit amoris, si aliquem nacti sumus cuius cum moribus et 
natura congruamus, quod in eo quasi lumen aliquod probitatis et 
virtutis perspicere videamur.
</div>

<div id="para_3">
<h2>L'odeur des embruns légers</h2>

Haec dum oriens diu perferret, caeli reserato tepore Constantius 
consulatu suo septies et Caesaris ter egressus Arelate Valentiam 
petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma 
moturus, quorum crebris excursibus vastabantur confines limitibus 
terrae Gallorum. Cognitis enim pilatorum caesorumque funeribus nemo 
deinde ad has stationes appulit navem, sed ut Scironis praerupta 
letalia declinantes litoribus Cypriis contigui navigabant, quae 
Isauriae scopulis sunt controversa.
</div>

</div>

<div class="entree_menu">Algèbre</div>
<div class="entree_menu">Analyse</div>
<div class="entree_menu">Arithmétique</div>
<div class="entree_menu">Probabilités</div>

</div>

</div>

</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Concours CSS</title>
<link rel="stylesheet" href="concours_style.css" />
</head>
​
<body>
​
<div id="ban">
Concours CSS - Lycée Gutenberg
</div>
​
​
<div id="corps_site">
​
<div id="para_1">
<h2>La couleur des sables brûlants</h2>
​
Pandente itaque viam fatorum sorte tristissima, qua praestitutum 
erat eum vita et imperio spoliari, itineribus interiectis 
permutatione iumentorum emensis venit Petobionem oppidum Noricorum,
ubi reseratae sunt insidiarum latebrae omnes, et Barbatio repente 
apparuit comes, qui sub eo domesticis praefuit, cum Apodemio agente 
in rebus milites ducens, quos beneficiis suis oppigneratos elegerat 
imperator certus nec praemiis nec miseratione ulla posse deflecti.
</div>
​
​
<div id="para_2">
<h2>Le son du vent lointain</h2>
​
Quapropter a natura mihi videtur potius quam ab indigentia orta 
amicitia, applicatione magis animi cum quodam sensu amandi quam 
cogitatione quantum illa res utilitatis esset habitura. 

Nom du fichier : concours_style.html

xxxxxxxxxx
 
body{
    
    }
​
h2{
    
    }
    
#ban{
    
    }
    
#corps_site{
    
    }
    
#para_1{
    
    }
    
.entree_menu{
    
    }
    
#footer{
    
    }

7Le Javascript Le JavaScript est un langage qui comme le css peut s'insérer dans une page web. Il permet de créer une interaction entre l'utilisateur et le site : modification des couleurs ou de la position d'une div, menu déroulant, déplacement d'éléments au clavier ou à la souris, etc.
Le Javascript est un langage de programmation, c'est à dire qu'il gère des variables et peut donc effectuer des opérations et calculs. Ce langage s'éxécute dans le navigateur de la personne qui visite la page web et non pas sur le serveur où est située cette dernière (dans le cas d'un site distant).

Voici un fichier html sans Javascript dans un premier temps qui affiche trois div de couleurs différentes.

Nom du fichier : js_01.html

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS 01</title>
​
<style>
.noir{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 100px;
    background-color: #000000;
    }
    
.rouge{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 250px;
    background-color: #DF0101;
    }
    
.bleu{
    width: 100px;

Remarque : nous avons créer les styles dans la partie head car il n'y avait que très peu d'attributs, pour un fichier plus volumineux nous aurions préféré le faire dans un fichier externe comme précédemment.

Nous allons ajouter maintenant de l'interaction.
Quand nous allons cliquer sur l'une des trois div un message différent va apparaître dans une boite de dialogue. On modifie le fichier js_01.html, au niveau des lignes 40, 44 et 49, de la sorte :

Nom du fichier : js_01.html

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS 01</title>
​
<style>
.noir{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 100px;
    background-color: #000000;
    }
    
.rouge{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 250px;
    background-color: #DF0101;
    }
    
.bleu{
    width: 100px;

L'instruction onclick="...", à l'intérieur d'une balise, permet d'exécuter une action lorsque l'utilisateur clique sur l'objet créer par la balise.
L'action exécutée correspond à l'instruction qui a été écrite entre les guillemets. Ici on demande d'ouvrir une boite de dialogue grâce à l'instruction alert('...'), et le navigateur affichera le message inscrit entre les guillemets ' '.

Voici une autre manière de faire la même chose, mais qui une fois comprise nous permettra par la suite de faire des pages web bien plus complexes.

Nom du fichier : js_01.html

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS 01</title>
​
<style>
.noir{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 100px;
    background-color: #000000;
    }
    
.rouge{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 250px;
    background-color: #DF0101;
    }
    
.bleu{
    width: 100px;
    height: 100px;
    position: absolute;

Décryptons les nouveautés.
À la fin de la page nous avons créé une sous-partie de script et à l'intérieur nous avons écrit du Javascript.

<script>
...
</script>

Tout ce qui est en pointillets sera une zone où l'on pourra écrire du Javascript. Ici nous avons défini une fonction javascript :

function boite(texte) {
	alert(texte);
	}

Cette fonction s'appelle boite et prend un paramètre qui se nomme texte. Entre les accolades nous voyons ce qu'exécute cette fonction.
Ici rien de compliqué : elle affiche une boite de dialogue (grâce à alert) dont le message sera ce que contiendra la variable texte.
Il faut bien comprendre que cette suite d'instruction est simplement la définition de la fonction. On ne l'a pas encore exécutée.
Elle le sera justement quand on cliquera sur l'une des trois div. Par exemple :

<div class="noir" onclick="boite('Noir');">

nous dit que si l'utilisateur clique sur cette div on exécute la fonction boite avec comme paramètre 'Noir'. La variable texte de la fonction devient donc 'Noir'.

Pour montrer ce qu'apporte cette manière de faire, voici une modification de ce fichier.

Nom du fichier : js_01.html

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS 01</title>
​
<style>
.noir{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 100px;
    background-color: #000000;
    }
    
.rouge{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 250px;
    background-color: #DF0101;
    }
    
.bleu{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;

Nous travaillons ici avec trois variables : i, texte et phrase.

Concernant i : l'instruction

var i = 0;

fait que lorsque le navigateur crée la page web, il va créé également une variable i qui aura la valeur 0. Nous aurions pu mettre bien sûr une autre valeur. Le navigateur comprend de lui-même que cette variable est de type entier. Et à chaque fois, que la fonction boite sera exécutée, l'instruction

i = i+1;

fera augmenter la variable i de 1.

Concernant la variable phrase : l'instruction

phrase = "Vous avez cliqué "+i+" fois.\n Et vous aimez la boite "+texte;

permet de créer une chaîne de caractères qui commence par "Vous avez cliqué " et ensuite nous voulons ajouter le nombre de clics qui se sont produits. C'est la variable i qui le contient. Mais si nous avions écris i entre les guillemets, le navigateur aurait afficher la lettre i et non pas le contenu de la variable i. C'est pour cela qu'on ajoute le +i+ après les guillemets.
Quand on utilise le + entre deux chaînes de caractères cela va créer une nouvelle chaîne de caractère composée des deux à la suite. On parle de concaténation.
Les sympboles \n dans " fois.\n Et vous aimez la boite " ajoute un retour chariot (on passe à la ligne).
Nous voyons enfin que le +texte de la fin permet de concaténer la valeur de la variable texte à la fin de la chaîne de caractères. La boite de dialogue affichée contient donc un message personnalisé en fonction de la div où on clique.

L'affiche des boites de dialogue n'est pas très conviviale. Nous allons plutôt afficher les messages dans une quatrième div prévue à cet effet.

Nom du fichier : js_01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS 01</title>

#message{
	width: 300px;
	height: 80px;
	position: absolute;
	top: 200px;
	left: 550px;
	border: solid 1px black;
	background-color: #f0f0f0;
	padding: 10px;
	}
</style>

</head>
<body>

</div>

</div>

</div>

<script>
var i = 0;

function boite(texte) {
	i = i+1;
	var elt_mes = document.getElementById("message");	
	phrase = "Vous avez cliqué "+i+" fois. <br />Et vous aimez la boite "+texte;
	elt_mes.innerHTML = phrase;
    }
</script>

</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS 01</title>
​
<style>
.noir{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 100px;
    background-color: #000000;
    }
    
.rouge{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 250px;
    background-color: #DF0101;
    }
    
.bleu{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 400px;
    background-color: #2E2EFE;
    }
​

Nous avons donc créé une nouvelle div dont l'id est "message". Il est très important ici que la div porte une id, c'est-à-dire une identité unique, car nous voulons en modifier des attributs à l'aide de Javascript, il faut donc que nous puissions y faire référence.
Dans la fonction Javascript boite qui est appelée à chaque clic nous avons l'instruction suivante :

var elt_mes = document.getElementById("message");

La variable elt_mes est un objet que l'on trouve dans le "document" (on peut dire dans la page web) et qui porte l'id "message". Ainsi, on pourra utiliser elt_mes pour interagir avec la div "message".
L'instruction

elt_mes.innerHTML = phrase;

permet justement de modifier le contenu html de la div "message". On le remplace par la chaîne de caractère phrase. C'est d'ailleurs pour cela que nous avons remplacer "\n" par "<br />" car en html le retour chariot "\n" n'est pas reconnu par tous les navigateurs, alors que la balise "<br />" oui. Exercice 9 Modifier la fonction affiche() pour qu'apparaisse dans la div grise non pas la table de 3, mais la table de 5 décallée de une unité. C'est-à-dire : 1 ; 6 ; 11 ; 16 ; 21 etc.
Ajouter une interaction avec la div bleue pour qu'au clic la table se réinitialise.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
​
<style>
​
#obj{
    width: 200px;
    padding: 20px;
    border: solid 3px black;
    background-color: lightcoral;
    text-align: center;
}
​
#resultat{
    width: 200px;
    padding: 20px;
    border: solid 3px black;
    background-color: lightgray;
    text-align: center;
    margin-top: 50px;
}
​
#zero{
    width: 200px;
    padding: 20px;

Exécuter

8Le DOM Pour pouvoir aller plus loin dans nos interactions avec une page web, il va falloir un peu mieux comprendre ce qu'il se passe lorsqu'un navigateur charge un fichier html.
Au chargement d'une page le navigateur utilisé crée un objet appelé DOM pour Document Object Model qui est une sorte « d'arbre » contenant tous les éléments de la page web.
Le langage javascript permet d'agir sur le DOM et donc de modifier les éléments de la page web. Dans la dernière page js_01.html lorsqu'on écrivait

document.getElementById("message");

on récupérait en fait l'élément message dans le DOM.
Mais pour pouvoir faire cela il faut que le DOM soit créé, et ceci n'a lieu qu'une fois que la page a été complètement chargée et les attributs css d'un objet du DOM que l'on souhaite modifier doivent auparavant avoir été définis pour le DOM. C'est pour cela que la balise script a été ajoutée au bas de la page, pour que les objets du DOM sur lesquels portent des instructions existent déjà.
Cependant, le chargement d'une page web peut être assez long, surtout si on fait appel à des librairies externes que l'on charge dans la partie head et qui exécutent des instructions sur la page. Nous ne serons alors pas certains que tous les objets du DOM seront créés même lorsque le navigateur lit les dernières instructions au bas de la page.
Pour cela on va utiliser l'instruction Javascriptonload(...) qui exécute les instructions écrites entre parenthèses une fois la page chargée.
Dans l'exemple ci-dessous, on change la couleur de la « balle » une fois la page chargée :

Nom du fichier : js_02.html

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS 02</title>
​
<style>
#balle{
    position: absolute;
    top: 100px;
    left: 200px;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background-color: black;
    }
</style>
​
<script>
function init(){
    var balle = document.getElementById('balle');
    balle.style.backgroundColor = "red";
    }
</script>
​
</head>
<body onload="init()">
​
<div id="balle"></div>
​
</body>
</html>

Le fait d'appeler une fonction une fois que la page est chargée est fondamentale pour de nombreuses pages web utilisant javascript, et encore plus lorsque nous voudrons programmer des jeux, notamment ceux dont les éléments graphiques doivent s'adapter à la taille de l'écran de l'utilisateur. Exercice 10 Expliquer les instructions Javascript de la page web suivante.

Nom du fichier : js_03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS 03</title>

function initialisation() {
	var balle = document.getElementById('balle');
	balle.style.top = "200px";
	balle.style.left = "200px";
    }

function bouge_v(y) {
	var balle = document.getElementById('balle');
	pos_v = parseInt(balle.style.top)+y;
	balle.style.top = pos_v+"px";
    }

function bouge_h(x) {
	var balle = document.getElementById('balle');
	pos_v = parseInt(balle.style.left)+x;
	balle.style.left = pos_v+"px";
    }
</script>

</head>
<body onload="initialisation()">

</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS 03</title>
​
<style>
#haut{
    width:0px;
    border:20px solid transparent;
    border-bottom:20px solid black;
    position: absolute;
    bottom: 120px;
    left: 100px;
    }
#bas{
    width:0px;
    border:20px solid transparent;
    border-top:20px solid black;
    position: absolute;
    bottom: 40px;
    left: 100px;
    }
#gauche{
    width:0px;
    border:20px solid transparent;
    border-right:20px solid black;
    position: absolute;
    bottom: 80px;
    left: 60px;
    }
#droite{
    width:0px;
    border:20px solid transparent;
    border-left:20px solid black;

Exercice 11 Après avoir testé le fichier ci-dessous, ajouter deux autres div pour le bleu et le vert, ainsi que le + et -, pour pouvoir faire tous les mélanges de couleur que l'on souhaite.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
​
<style>
.case{
    padding: 20px;
    border: solid 2px black;
    }
#couleur{
    width: 50px;
    height: 50px;
    border: solid 3px black;
    margin-top: 50px;
    left: 100px;
    background-color: rgb(0,100,0);
    }
#green{
    width: 100px;
    }
</style>
​
</head>
<body>

Exécuter

Exercice 12 Remplaçons les clics sur les + et - de l'exercice précédent par des curseurs. Compléter le code ci-dessous pour ajouter le bleu.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
​
<style>
#couleur{
    width: 50px;
    height: 50px;
    border: solid 3px black;
    margin-top: 50px;
    left: 100px;
    background-color: rgb(100,100,100);
    }
</style>
​
</head>
<body>
​
<input type="range" min="0" max="255" oninput="modifieRed(this.value)"> Red 
<br>
<input type="range" min="0" max="255" oninput="modifieGreen(this.value)"> Green 
​

Exécuter

9Le clic s'est bien, mais les touches s'est mieux !

Nom du fichier : js_04.html

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS 04</title>
​
<style>
#balle{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #ff0000;
    position: absolute;
    left: 200px;
    top: 200px;
    }
</style>
​
<script>
function init() {
    var balle = document.getElementById('balle');   
    balle.style.top = "200px";
    balle.style.left = "200px";
    }
​

Exercice 13 Améliorer le fichier précédent en :

ajoutant les déplacements verticaux,
en empéchant la balle de sortir d'une certaine zone rectangulaire à créer,
en faisant changer la balle de couleur si elle entre dans une certaine zone à créer également.

10Conception de mini jeux en Javascript 10.1Principes Nous allons ici décrire une manière de concevoir une page web contenant un petit jeu de telle sorte que l'on puisse généraliser la pratique.
Partons de la base suivante :

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>

Nous allons faire le choix de ne pas utiliser de fichier css et js externe, donc nous utiliserons les balises de style et de script dans la partie head de la sorte :

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
​
<style>
​
</style>
​
<script>
​
</script>
</head>
​
<body>
​
​
​
</body>
</html>

L'autre choix que nous faisons est de concevoir un jeu basé sur des balises div, c'est un dans un premier temps plus simple que d'utiliser la balise canvas.
Il faut imaginer ensuite le jeu, les balises à placer dans la partie body et le css associé.
Certaines de ces balises auront des propriétés css qui devront être modifiées. Par exemple, une div représentant un personnage qui doit bouger, aura ses propriétés css top et left qui changeront de valeur. Et pour que cela se fasse sans difficulté il va falloir définir ses propriétés css, non pas dans la partie style, mais en Javascript. Nous verrons comment un peu plus loin.
Cependant, pour modifier en Javascript une propriété css d'un élément de la page, il faut que celui-ci soit créé, et et pour être sûr de cela, il faut le faire à l'aide d'une fonction Javascript qui ne se lance qu'une fois la page chargée.
On ajoute pour cela à la balise <body> l'attribut onload="", où entre les guillemets on écrira le nom de la fonction Javascript qui modifiera les propriétés css. Cette fonction Javascript étant écrite entre les balises script.
Toutes les autres fonctions Javascript nécessaires au jeu seront également placées entre les balises script : on peut avoir besoin par exemple d'une fonction qui gère un chronomètre, une qui gère les mouvements, soit en attendant qu'il y ait un clic, soit en se déclenchant lorsqu'on enfonce une touche, une autre fonction qui se déclenche à la fin de la partie, ou encore d'autres fonctions pour gérer les mouvements des « méchants », l'évolution du score etc. 10.2Un exemple pas à pas Nous allons ici créer un jeu où le personnage principal est un crabe qui se déplace de gauche à droite, avec pour but de survivre le plus longtemps possible sans se faire toucher par les noix de cocos qui tombent du ciel.
Il nous faut donc créer un répertoire spécifique à ce jeu et y sauvegarder les images suivantes :
plage

Créons maintenant le fichier html du jeu en commençant par la base html et css.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Noix de cocos</title>

#debut{
	position: absolute;
     top: 0px;
     bottom: 0px;
     left: 0px;
     right: 0px;
     background-color: black;
     padding-top: 200px;
     color: white;
     font-size: 200%;
     text-shadow: 5px 5px 10px gray;
     z-index: 2000;
     text-align: center;
}
</style>

</head>

<body>
<div id="beach"></div>
<div id="crabe"></div>
<div id="coco1" class="coco"></div>
<div id="coco2" class="coco"></div>
<div id="coco3" class="coco"></div>
<div id="coco4" class="coco"></div>
<div id="coco5" class="coco"></div>
<div id="coco6" class="coco"></div>
<div id="coco7" class="coco"></div>
<div id="coco8" class="coco"></div>
<div id="coco9" class="coco"></div>
<div id="coco10" class="coco"></div>
<div id="temps">Temps : 0</div>
<br>
<div id="debut">Cliquez pour lancer le jeu</div>
<br>
</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Noix de cocos</title>
​
<style>
#beach{
    position: absolute;
    top:100px;
    left:50px;
    width: 837px;
    height: 463px;
    background-image: url("beach.png");
    background-size: contain;
    background-repeat: no-repeat;
    border: solid 2px black;
    border-radius: 5px;
    z-index: 1000;
}
#crabe{
    position: absolute;
    top: 523px;
    left: 100px;
    height: 30px;
    width: 36px;
    background-image: url("crabe.png");
    background-size: contain;
    z-index: 2000;
}
.coco{
    position: absolute;
    top: 100px;
    left: 200px;
    height: 26px;
    width: 20px;
    background-image: url("coco.png");

Exercice 14

Pourquoi ne voit-on qu'un écran noir avec un texte ?
Pourquoi, à ce stade du jeu ne voit-on aucune noix de coco ?
Pourquoi #beach a-t-elle un z-index à 1000 alors que #crabe et .coco à 2000 ?

Ajoutons la gestion du clic sur la page noire (lignes 69 à 73 et ligne 93).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Noix de cocos</title>

</head>

<body>
<div id="beach"></div>
<div id="crabe"></div>
<div id="coco1" class="coco"></div>
<div id="coco2" class="coco"></div>
<div id="coco3" class="coco"></div>
<div id="coco4" class="coco"></div>
<div id="coco5" class="coco"></div>
<div id="coco6" class="coco"></div>
<div id="coco7" class="coco"></div>
<div id="coco8" class="coco"></div>
<div id="coco9" class="coco"></div>
<div id="coco10" class="coco"></div>
<div id="temps">Temps : 0</div>
<br>
<div id="debut" onclick="initialise()">Cliquez pour lancer le jeu</div>
<br>
</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Noix de cocos</title>
​
<style>
#beach{
    position: absolute;
    top:100px;
    left:50px;
    width: 837px;
    height: 463px;
    background-image: url("beach.png");
    background-size: contain;
    background-repeat: no-repeat;
    border: solid 2px black;
    border-radius: 5px;
    z-index: 1000;
}
#crabe{
    position: absolute;
    top: 523px;
    left: 100px;
    height: 30px;
    width: 36px;
    background-image: url("crabe.png");
    background-size: contain;
    z-index: 2000;
}
.coco{
    position: absolute;
    top: 100px;
    left: 200px;
    height: 26px;
    width: 20px;
    background-image: url("coco.png");
    background-size: contain;
    z-index: 2000;
    visibility: hidden;

Exercice 15 Expliquer les derniers ajouts dans le code.

Il va nous falloir maintenant, lors de l’exécution de cette fonction initialise que les objets et les variables du jeu se définissent (ligne 74 à 134).
Par contre les variables utilisées dans le jeu devront être tout d'abord déclarées à l'extérieur de toute fonction pour qu'elles soient bien définies de manière globale et donc que nous puissions les utiliser dans toutes les parties du code (ligne 70).
Nous allons donc définir ici les propriétés css du crabe, des dix noix de coco, de la position du chronomètre et également de son lancement.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Noix de cocos</title>

</head>

<body>
<div id="beach"></div>
<div id="crabe"></div>
<div id="coco1" class="coco"></div>
<div id="coco2" class="coco"></div>
<div id="coco3" class="coco"></div>
<div id="coco4" class="coco"></div>
<div id="coco5" class="coco"></div>
<div id="coco6" class="coco"></div>
<div id="coco7" class="coco"></div>
<div id="coco8" class="coco"></div>
<div id="coco9" class="coco"></div>
<div id="coco10" class="coco"></div>
<div id="temps">Temps : 0</div>
<br>
<div id="debut" onclick="initialise()">Cliquez pour lancer le jeu</div>
<br>
</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Noix de cocos</title>
​
<style>
#beach{
    position: absolute;
    top:100px;
    left:50px;
    width: 837px;
    height: 463px;
    background-image: url("beach.png");
    background-size: contain;
    background-repeat: no-repeat;
    border: solid 2px black;
    border-radius: 5px;
    z-index: 1000;
}
#crabe{
    position: absolute;
    top: 523px;
    left: 100px;
    height: 30px;
    width: 36px;
    background-image: url("crabe.png");
    background-size: contain;
    z-index: 2000;
}
.coco{
    position: absolute;
    top: 100px;
    left: 200px;
    height: 26px;
    width: 20px;
    background-image: url("coco.png");
    background-size: contain;
    z-index: 2000;
    visibility: hidden;
}
#temps{
    position: absolute;
    background-color: black;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-weight: bold;
    width: 150px;
    text-align: center;
}
​
#debut{
    position: absolute;
     top: 0px;
     bottom: 0px;
     left: 0px;
     right: 0px;
     background-color: black;

Ici a donc été ajouté la variable time qui correspond au temps qui s'écoule lors de la partie. Il va s'incrémenter de 1 à chaque seconde. Ce sera la fonction chrono() qui s'en chargera. D'ailleurs celle-ci a va se déclencher à intervalle régulier grâce à l'instruction chronoTime = setInterval( function (){chrono();},1000);. L'intervalle d’exécution sera de 1000 millisecondes soit bien d'une seconde.
La variable chronotime sert donc à établir cette exécution répétée de la fonction chrono().
La dernière variable définie de manière globale est collision. Elle permettra de savoir si une noix de coco a touché le crabe ou non.
Nous voyons de plus dans ces ajouts de code l'instruction setTimeout( function () { tombeCoco(n);},1000 ); . Le nombre n de tombeCoco(n) correspondant au numéro du crabe. Elle permet d'exécuter la fonction tombeCoco(n) après un temps en milliseconde. Dans notre exemple c'est au bout de 1000 millisecondes. La fonction tombeCoco(n) permettra de faire chuter les noix de coco, et nous remarquons donc que nous n'allons pas toutes les faire tomber en même temps, mais les une après les autres.
Il nous reste alors à définir les fonctions chrono et tombeCoco (lignes 137 à 163).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Noix de cocos</title>

function tombeCoco(n) {
     var eltCoco = document.getElementById("coco"+n);
    eltCoco.style.visibility = "visible";
    eltCoco.style.left = Math.floor( 50+817*Math.random() )+"px";
    eltCoco.style.top = "100px";
    chute(n);
}

function chrono() {
    time++;
    document.getElementById("temps").innerHTML = "Temps : "+time;
}
</script>

</head>

<body>
<div id="beach"></div>
<div id="crabe"></div>
<div id="coco1" class="coco"></div>
<div id="coco2" class="coco"></div>
<div id="coco3" class="coco"></div>
<div id="coco4" class="coco"></div>
<div id="coco5" class="coco"></div>
<div id="coco6" class="coco"></div>
<div id="coco7" class="coco"></div>
<div id="coco8" class="coco"></div>
<div id="coco9" class="coco"></div>
<div id="coco10" class="coco"></div>
<div id="temps">Temps : 0</div>
<br>
<div id="debut" onclick="initialise()">Cliquez pour lancer le jeu</div>
<br>
</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Noix de cocos</title>
​
<style>
#beach{
    position: absolute;
    top:100px;
    left:50px;
    width: 837px;
    height: 463px;
    background-image: url("beach.png");
    background-size: contain;
    background-repeat: no-repeat;
    border: solid 2px black;
    border-radius: 5px;
    z-index: 1000;
}
#crabe{
    position: absolute;
    top: 523px;
    left: 100px;
    height: 30px;
    width: 36px;
    background-image: url("crabe.png");
    background-size: contain;
    z-index: 2000;
}
.coco{
    position: absolute;
    top: 100px;
    left: 200px;
    height: 26px;
    width: 20px;
    background-image: url("coco.png");
    background-size: contain;
    z-index: 2000;
    visibility: hidden;
}
#temps{
    position: absolute;
    background-color: black;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-weight: bold;
    width: 150px;
    text-align: center;
}
​
#debut{
    position: absolute;
     top: 0px;
     bottom: 0px;
     left: 0px;
     right: 0px;
     background-color: black;
     padding-top: 200px;
     color: white;
     font-size: 200%;
     text-shadow: 5px 5px 10px gray;
     z-index: 2000;
     text-align: center;
}
</style>
​

Exercice 16

Expliquez les ajouts.
Quelle fonction exécutée dans chute(n) n'a pas encore été définie ?

Il nous reste maintenant à animer le crabe à l'aide du clavier, à regarder si une noix de coco touche le crabe, et dans ce cas gérer la fin du jeu. Et puisqu' à la fin du jeu nous allons recharger la page, il va falloir qu'au chargement de celle-ci l'écran noir redevienne visible (lignes 165 à 201 et ligne 207).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Noix de cocos</title>

function chrono() {
    time++;
    document.getElementById("temps").innerHTML = "Temps : "+time;
}

function testCollision(n) {
    var eltCoco = document.getElementById("coco"+n);
    var xCoco = parseInt(eltCoco.style.left);
    var yCoco = parseInt(eltCoco.style.top);
    var eltCrabe = document.getElementById("crabe");
    var xCrabe = parseInt(eltCrabe.style.left);
    if ( xCoco > xCrabe-18 && xCoco < xCrabe+34 && yCoco > 497 ) {
        collision++;
        console.log("Collisions : "+collision);
        finJeu();
    }
}

function finJeu() {
    clearInterval(chronoTime);
    lance();
    document.getElementById("debut").innerHTML = "Vous avez survécu "+time+" secondes";
    setTimeout( function () { location.reload();},2000 );
}

function lance() {
	var debut = document.getElementById("debut");
	debut.style.visibility = "visible";
}
</script>

</head>

<body onkeydown="bouge(event)" onload="lance()">
<div id="beach"></div>
<div id="crabe"></div>
<div id="coco1" class="coco"></div>
<div id="coco2" class="coco"></div>
<div id="coco3" class="coco"></div>
<div id="coco4" class="coco"></div>
<div id="coco5" class="coco"></div>
<div id="coco6" class="coco"></div>
<div id="coco7" class="coco"></div>
<div id="coco8" class="coco"></div>
<div id="coco9" class="coco"></div>
<div id="coco10" class="coco"></div>
<div id="temps">Temps : 0</div>
<br>
<div id="debut" onclick="initialise()">Cliquez pour lancer le jeu</div>
<br>
</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Noix de cocos</title>
​
<style>
#beach{
    position: absolute;
    top:100px;
    left:50px;
    width: 837px;
    height: 463px;
    background-image: url("beach.png");
    background-size: contain;
    background-repeat: no-repeat;
    border: solid 2px black;
    border-radius: 5px;
    z-index: 1000;
}
#crabe{
    position: absolute;
    top: 523px;
    left: 100px;
    height: 30px;
    width: 36px;
    background-image: url("crabe.png");
    background-size: contain;
    z-index: 2000;
}
.coco{
    position: absolute;
    top: 100px;
    left: 200px;
    height: 26px;
    width: 20px;
    background-image: url("coco.png");
    background-size: contain;
    z-index: 2000;
    visibility: hidden;
}
#temps{
    position: absolute;
    background-color: black;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-weight: bold;
    width: 150px;
    text-align: center;
}
​
#debut{
    position: absolute;
     top: 0px;
     bottom: 0px;
     left: 0px;
     right: 0px;
     background-color: black;
     padding-top: 200px;
     color: white;
     font-size: 200%;
     text-shadow: 5px 5px 10px gray;
     z-index: 2000;
     text-align: center;
}
</style>
​
<script>
var time, collision, chronoTime;
​
function initialise() {
    document.getElementById("debut").style.visibility = "hidden";
    time = 0;
    collision = 0;
    
    var eltCrabe = document.getElementById("crabe");
    eltCrabe.style.left = "200px";
    

Exercice 17

Quelle instruction permet de détecter que le jeu doit s'arréter ?
Comment la page web s'est-elle qu'il faut « écouter » l'appuie de touches sur le clavier ?
Quelle partie du code gère le mouvement vers la gauche du crabe ?

11D'autres mini-jeux Voici trois autres mini-jeux conçus de la même façon. Pour analyser le code il vous faudra faire un clic droit et choisir « afficher le code source de la page ».