Skip to content

Commit 95cde3f

Browse files
bpesquetbpesquet
committed
Exercices chapitre 3
1 parent e65e89e commit 95cde3f

File tree

6 files changed

+104
-13
lines changed

6 files changed

+104
-13
lines changed

‎chapitre_3/html/cours.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@
88

99
<body>
1010
<h1 class="debut">Quelques langages</h1>
11-
<ul id="langages">
12-
<li id="cpp">C++</li>
13-
<li id="java">Java</li>
14-
<li id="csharp">C#</li>
15-
<li id="php">PHP</li>
16-
</ul>
17-
<p>Une <a href="https://fr.wikipedia.org/wiki/Liste_des_langages_de_programmation">liste</a> plus complète.</p>
18-
11+
<div id="contenu">
12+
<ul id="langages">
13+
<li id="cpp">C++</li>
14+
<li id="java">Java</li>
15+
<li id="csharp">C#</li>
16+
<li id="php">PHP</li>
17+
</ul>
18+
</div>
1919
<script src="../js/cours.js"></script>
2020
</body>
2121

‎chapitre_3/html/dictionnaire.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Mini-dictionnaire</title>
7+
</head>
8+
9+
<body>
10+
<h1>Un mini-dictionnaire</h1>
11+
<div id="contenu"></div>
12+
13+
<script src="../js/dictionnaire.js"></script>
14+
</body>
15+
16+
</html>

‎chapitre_3/html/journaux.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Quelques journaux en ligne</title>
7+
</head>
8+
9+
<body>
10+
<h1>Quelques journaux en ligne</h1>
11+
<div id="contenu"></div>
12+
13+
<script src="../js/journaux.js"></script>
14+
</body>
15+
16+
</html>

‎chapitre_3/js/cours.js

+12-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Affiche du contenu HTML de la liste
1+
// Affichage du contenu HTML de la liste
22
console.log(document.getElementById("langages").innerHTML);
33

44
// Modification du contenu HTML de la liste : ajout d'un langage
@@ -10,9 +10,6 @@ document.getElementById("langages").innerHTML += '<li id="c">C</li>';
1010
// Modification du contenu textuel du premier titre
1111
document.querySelector("h1").textContent += " de programmation";
1212

13-
// Modification de la cible du premier lien
14-
document.querySelector("a").href = "https://fr.wikipedia.org/wiki/Langage_informatique";
15-
1613
var titre = document.querySelector("h1"); // Accès au premier titre h1
1714
titre.classList.add("titre"); // Ajout de la classe "titre"
1815
titre.classList.remove("debut"); // Suppression de la classe "titre"
@@ -49,4 +46,14 @@ bash.textContent = "bash"; // Définition de son contenu textuel
4946
document.getElementById("langages").replaceChild(bash, document.getElementById("perl"));
5047

5148
// Suppression de l'élément identifié par "bash"
52-
document.getElementById("langages").removeChild(document.getElementById("bash"));
49+
document.getElementById("langages").removeChild(document.getElementById("bash"));
50+
51+
// Exercice 1 : ajout d'un paragraphe contenant un lien
52+
var p = document.createElement("p");
53+
var lien = document.createElement("a");
54+
lien.href = "https://fr.wikipedia.org/wiki/Liste_des_langages_de_programmation";
55+
lien.textContent = "liste";
56+
p.appendChild(document.createTextNode("En voici une "));
57+
p.appendChild(lien);
58+
p.appendChild(document.createTextNode(" plus complète."));
59+
document.getElementById("contenu").appendChild(p);

‎chapitre_3/js/dictionnaire.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/*
2+
Exercice : construire un dictionnaire
3+
*/
4+
5+
// Liste des mots du dictionnaire
6+
var mots = [
7+
{
8+
terme: "Procrastination",
9+
definition: "Tendance pathologique à remettre systématiquement au lendemain"
10+
},
11+
{
12+
terme: "Tautologie",
13+
definition: "Phrase dont la formulation ne peut être que vraie"
14+
},
15+
{
16+
terme: "Oxymore",
17+
definition: "Figure de style qui réunit dans un même syntagme deux termes sémantiquement opposés"
18+
}
19+
];
20+
21+
var dl = document.createElement("dl"); // Création de la liste
22+
23+
// Pour chaque mot, on construit une balise <dt> avec le terme et une balise <dd> avec sa définition
24+
mots.forEach(function (mot) {
25+
var dt = document.createElement("dt");
26+
var strong = document.createElement("strong");
27+
strong.textContent = mot.terme;
28+
var dd = document.createElement("dd");
29+
dd.textContent = mot.definition;
30+
31+
dt.appendChild(strong);
32+
dl.appendChild(dt);
33+
dl.appendChild(dd);
34+
});
35+
36+
document.getElementById("contenu").appendChild(dl); // Ajout de la liste à la page

‎chapitre_3/js/journaux.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*
2+
Exercice : construire une liste de journaux
3+
*/
4+
5+
// Liste des journaux
6+
var journaux = ["http://lemonde.fr", "http://lefigaro.fr", "http://liberation.fr"];
7+
8+
for (var i = 0; i < journaux.length; i++) {
9+
var lien = document.createElement("a");
10+
lien.textContent = journaux[i];
11+
lien.href = journaux[i];
12+
// Ajoute un lien
13+
document.getElementById("contenu").appendChild(lien);
14+
// Ajoute une balise <br>
15+
document.getElementById("contenu").appendChild(document.createElement("br"));
16+
}

0 commit comments

Comments
 (0)