lafrite/2022-2023
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat(NSI): fin du chapitre sur IHM web
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Bertrand Benjamin
2023-03-06 14:58:54 +01:00
parent 688f8161b7
commit 5751062905
20 changed files with 458 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
1NSI/08_Interaction_web/codes/projets/age.html Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="fr">
<!-- Début en-tête -->
<head>
<title>Âge avec JS </title>
<meta charset="utf-8">
<script type="text/Javascript" src="code-age.js" defer="defer"></script>
</head>
<!-- Fin en-tête -->
<!-- Début corps -->
<body class="bg-light">
<!-- Début de la balise container bootstrap -->
<div>
<h1>Calcul d'âge avec Javascript. </h1>
<label>Saisissez votre date de naissance </label>
<br>
<input type="number" id="naissance" value="1975" required />
<br>
<button id="bouton" onclick="calcul_age()">Calculer</button>
<br>
<p> Nous sommes en <span id="courant"></span>,
donc vous avez <span id="age"></span> ans. </p>
<!-- Fin de la balise container bootstrap -->
</div>
<p>
<a href="index.html">Retour à l'accueil</a>
</p>
</body>
</html>

13
1NSI/08_Interaction_web/codes/projets/code-age.js Normal file
View File

@@ -0,0 +1,13 @@
//gestionnaire d'événement clic pour l'élément bouton
function calcul_age(){
let n = document.getElementById("naissance");
let naissance = parseInt(n.value);
let date = new Date();
let courant = date.getFullYear();
let c = document.getElementById("courant");
c.innerHTML = courant;
//àcompléter
}
//age par défaut :
calcul_age();

21
1NSI/08_Interaction_web/codes/projets/code-temperature.js Normal file
View File

@@ -0,0 +1,21 @@
//gestionnaire d'événement clic pour l'élément bouton
function conversion_unite(){
let u = document.getElementById("unite_source");
let m = document.getElementById("mesure_source");
let c = document.getElementById("unite_cible");
let v = document.getElementById("valeur");
if (u.value === 'celsius'){
v.innerHTML = 9/5 * parseInt(m.value) + 32;
c.innerHTML = 'fahrenheit';
}
//à compléter avec un bloc else
}
/*
Compléter en attachant le gestionnaire d'événement conversion_unite
à l'élément #bouton pour l'événement click
*/
/* conversion par défaut au chargement de la page
décommenter la ligne suivante*/
//conversion_unite();

44
1NSI/08_Interaction_web/codes/projets/evenements.html Normal file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="fr">
<!-- Début en-tête -->
<head>
<title>Onmouseover avec JS </title>
<meta charset="utf-8">
<script type="text/Javascript" defer="defer">
function chatouille(){
let titre = document.getElementById("titre");
if (titre.style.color === "red"){
titre.style.color = "blue";
}
else {
titre.style.color = "red";
}
}
//à compléter avec une fonction griffe
</script>
</head>
<!-- Fin en-tête -->
<!-- Début corps -->
<body>
<!-- à compléter avec un gestionnaire d'événement click -->
<h1 onmouseover="chatouille()" id="titre" style='color : red'>J'aime les souris </h1>
<p>
<a href="index.html">Retour à l'accueil</a>
</p>
</body>
</html>

44
1NSI/08_Interaction_web/codes/projets/evenements2.html Normal file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="fr">
<!-- Début en-tête -->
<head>
<title>Evenements avec JS </title>
<meta charset="utf-8">
<script type="text/Javascript" defer="defer">
function chatouille(){
let chat = document.getElementById("chat");
chat.src = 'images/chat-touille.png';
}
//àcompléter avec une fonction chatpince
function chatbonjour(){
let chat = document.getElementById("chat");
chat.src = 'images/chat-bonjour.png';
}
</script>
</head>
<!-- Fin en-tête -->
<!-- Début corps -->
<body>
<!-- à compléter avec un gestionnaire d'événement click -->
<img src="images/chat-bonjour.png" alt="Bonjour" onmouseover="chatouille()" onmouseout="chatbonjour()" id="chat">
<p>
<a href="index.html">Retour à l'accueil</a>
</p>
</body>
</html>

BIN
1NSI/08_Interaction_web/codes/projets/images/chat-bonjour.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
1NSI/08_Interaction_web/codes/projets/images/chat-pince.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
1NSI/08_Interaction_web/codes/projets/images/chat-touille.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

22
1NSI/08_Interaction_web/codes/projets/index.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="fr">
<head><!-- Début en-tête -->
<title>Accueil </title>
<meta charset="utf-8">
</head><!-- Fin en-tête -->
<body><!-- Début corps -->
<h1>Menu </h1>
<ul>
<li> <a href="age.html"> Calcul d'âge </a> </li>
<li> <a href="evenements.html"> Jouer avec les événements I </a> </li>
<li> <a href="evenements2.html"> Jouer avec les événements II </a> </li>
<li> <a href="temperature.html"> Conversion d'unité de température </a> </li>
</ul>
</body><!-- Fin corps -->
</html>

24
1NSI/08_Interaction_web/codes/projets/script.js Normal file
View File

@@ -0,0 +1,24 @@
let compteur = 0;
function suivant(){
compteur = compteur + 1;
let v = document.getElementById("valeur");
if (compteur <= 1) {
v.innerHTML = compteur + " clic";
}
else {
v.innerHTML = compteur + " clics";
}
}
function reinitialiser(){
compteur = 0;
let v = document.getElementById("valeur");
v.innerHTML = compteur + " clic";
}
let bouton_clic = document.getElementById("bouton_clic");
bouton_clic.addEventListener("click", suivant);
let bouton_reset = document.getElementById("bouton_reset");
bouton_reset.addEventListener("click", reinitialiser);

0
1NSI/08_Interaction_web/codes/projets/style.css Normal file
View File

45
1NSI/08_Interaction_web/codes/projets/temperature.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="fr">
<!-- Début en-tête -->
<head>
<title>Conversion d'unité en JS </title>
<meta charset="utf-8">
<script type="text/Javascript" src="code-temperature.js" defer="defer">
</script>
</head>
<!-- Fin en-tête -->
<!-- Début corps -->
<body>
<h1> Conversion d'unité d'une mesure de température. </h1>
<label for="unite_source">Choisir l'unité de la mesure source :</label>
<select name="unite_source" id="unite_source">
<option value="celsius"selected >Celsius</option>
<option value="fahrenheit">Fahrenheit</option>
</select>
<br>
<label for="mesure_source">Saisir la mesure de température dans l'unité source : </label>
<input type="number" id="mesure_source" value="0">
<br>
<button id="bouton">Convertir</button>
<br>
<label>Conversion en <span id="unite_cible"></span> : <span id="valeur"></span>. </label>
<p>
<a href="index.html">Retour à l'accueil</a>
</p>
</body>
</html>