Skip to content
Commits on Source (5)
Show whitespace changes
Inline Side-by-side
exodom2.1/index.html 0 → 100644
View file @ f8bb51f8
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exo DOM 2.1</title>
<script src="./index.js" defer></script>
</head>
<body>
</body>
</html>
exodom2.1/index.js 0 → 100644
View file @ f8bb51f8
const main = document.createElement("main");
const div = document.createElement("div");
div.id = "2c1";
const p = document.createElement("p");
const strong = document.createElement("strong");
strong.textContent = "Javascript";
const text1 = document.createTextNode(" a été créé en 1995 par ");
const a1 = document.createElement("a");
a1.href = "/wiki/Brendan_Eich";
a1.title = "Brendan Eich";
a1.textContent = "Brendan Eich";
const text2 = document.createTextNode(". Il a été standardisé sous le nom d'");
const a2 = document.createElement("a");
a2.href = "/wiki/ECMAScript";
a2.title = "ECMAScript";
a2.textContent = "ECMAScript";
const text3 = document.createTextNode(" en juin 1997 par ");
const a3 = document.createElement("a");
a3.href = "/wiki/Ecma_International";
a3.title = "Ecma International";
a3.textContent = a3.title;
const text4 = document.createTextNode(" dans le standard ECMA-262.");
p.append(strong, text1, a1, text2, a2, text3, a3, text4);
div.appendChild(p);
main.append(div);
document.body.append(main);
exodom2.2/index.html 0 → 100644
View file @ f8bb51f8
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exo DOM 2.2</title>
<script src="./index.js" defer></script>
</head>
<body>
</body>
</html>
exodom2.2/index.js 0 → 100644
View file @ f8bb51f8
const main = document.createElement("main");
const div = document.createElement("div");
div.id = "2c2";
const p = document.createElement("p");
p.textContent = "Mangez 5 fruits et légumes par jour :";
const ul = document.createElement("ul");
const lis = ['Pomme', 'Poire', 'Haricots verts',
'Carottes', 'Concombres']
.map(text => {
const li = document.createElement("li");
li.textContent = text;
return li;
});
ul.append(...lis);
div.append(p, ul);
main.append(div);
document.body.append(main);
exodom2.3/index.html 0 → 100644
View file @ f8bb51f8
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exo DOM 2.3</title>
<script src="./index.js" defer></script>
</head>
<body>
</body>
</html>
exodom2.3/index.js 0 → 100644
View file @ f8bb51f8
const main = document.createElement("main");
const div = document.createElement("div");
div.id = "2c3";
const p = document.createElement("p");
p.textContent = "Langages basés sur ECMAScript :";
const dl = document.createElement("dl");
const contents = [
{ dt: "JavaScript", dd: "JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi coté serveur." },
{ dt: "JScript", dd: "JScript est le nom générique de plusieurs implémentations d'ECMAScript 3 créées par Microsoft." },
{ dt: "ActionScript", dd: "ActionScript est le langage de programmation utilisé au sein d'applications clientes (Adobe Flash, Adobe Flex) et serveur (Flash media server, JRun, Macromedia Generator)." },
{ dt: "EX4", dd: "ECMAScript for XML (E4X) est une extension XML au langage ECMAScript." }
]
.forEach(obj => {
const dt = document.createElement("dt");
const dd = document.createElement("dd");
dt.textContent = obj.dt;
dd.textContent = obj.dd;
dl.append(dt, dd);
});
div.append(p, dl);
main.append(div);
document.body.append(main);
exodom2.4/index.html 0 → 100644
View file @ f8bb51f8
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exo DOM 2.4</title>
<script src="./index.js" defer></script>
</head>
<body>
</body>
</html>
exodom2.4/index.js 0 → 100644
View file @ f8bb51f8
const main = document.createElement("main");
const form = document.createElement("form");
form.enctype = "multipart/form-data";
form.method = "post";
form.action = "upload.php";
form.id = "2c4";
const fieldset = document.createElement("fieldset");
const legend = document.createElement("legend");
legend.textContent = "Uploader une image";
const div = document.createElement("div");
div.style.textAlign = "center";
const label = document.createElement("label");
label.htmlFor = "inputUpload";
label.textContent = 'Image à uploader :';
const fileInput = document.createElement("input");
fileInput.type = "file";
fileInput.name = "inputUpload";
fileInput.id = "inputUpload";
const br = document.createElement("br");
const submit = document.createElement("input");
submit.type = "submit";
submit.value = "Envoyer";
const cancel = document.createElement("input");
cancel.type = "reset";
cancel.value = "Annuler";
div.append(label, fileInput, br, submit, cancel);
fieldset.append(legend, div);
form.appendChild(fieldset);
main.appendChild(form);
document.body.append(main);
exoge01/index.html 0 → 100644
View file @ f8bb51f8
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exo GE 01</title>
<link rel="stylesheet" href="./style.css">
<script src="./index.js" defer></script>
</head>
<body>
<button>Click me!</button>
</body>
</html>
exoge01/index.js 0 → 100644
View file @ f8bb51f8
const btn = document.querySelector("button");
// On peut utiliser thios au lieu de evt.target
// MAIS uniquement dans une fonction anonyme, pas dans une fonction fléchée !!!
// En effet, this n'existe pas dans le contexte d'une fonction fléchée (subtilité, mais importante !)
btn.addEventListener("click", function (evt) { this.classList.add("red"); });
exoge01/style.css 0 → 100644
View file @ f8bb51f8
.red {
background-color: red;
}