Université Mohammed Premier Année Universitaire : 2023-2024
Faculté des Sciences - Oujda Filière : SMI – S3
Département d’informatique Module : Technologie du Web
Session : Normale
Correction d’examen
Exercice 1 :
<!DOCTYPE html>
<html>
<head>
<title>Suivi des heures de sommeil</title>
</head>
<body>
<h1>Suivi des heures de sommeil</h1>
<script>
[Link]("<hr>");
// Demander à l'utilisateur de saisir le nombre d'heures de sommeil pour trois nuits consécutives
var heuresSommeil = [];
var moyenne = 0, nbr_inf = 0;
for (let i = 0; i < 3; i++) {
// saisir les heures de sommeil pour la nuit i
heuresSommeil[i] = parseInt(prompt("Nuit N°" + (i + 1) + " :"));
// afficher les heures de sommeil pour la nuit i
[Link]("Nuit N°" + (i + 1) + " : " + heuresSommeil[i] + " heures <br>");
}
[Link]("<hr>");
// Calculer et afficher la moyenne
for (let i = 0; i < [Link]; i++) {
// Calculer la somme des heures de sommeil
moyenne += heuresSommeil[i];
}
// Calculer la moyenne des heures de sommeil
moyenne = moyenne / [Link];
1/5
// Afficher la moyenne
[Link]("Moyenne des heures de sommeil : " + moyenne + " heures<br>");
[Link]("<hr>");
// Afficher et compter les nuits où l'utilisateur a dormi moins de 6 heures
for (let i = 0; i < [Link]; i++) {
if (heuresSommeil[i] < 6) {
nbr_inf++;
/* var nuitSuffisante = true;
nuitSuffisante = false; // Mettre à false si une nuit a moins de 6 heures de sommeil
break; */
}
}
/* Autre méthode
// Afficher et compter les nuits où l'utilisateur a dormi moins de 6 heures
var nuitSuffisante = true;
for (let i = 0; i < [Link]; i++) {
if (heuresSommeil[i] < 6) {
nuitSuffisante = false; // Mettre à false si une nuit a moins de 6 heures de sommeil
break;
}
} */
if (nbr_inf > 0) {
[Link]("L'utilisateur a " + nbr_inf + " nuit(s) avec moins de 6 heures de sommeil :<br>");
for (let i = 0; i < [Link]; i++) {
if (heuresSommeil[i] < 6) {
[Link]("Nuit N°"+(i+1)+" : "+heuresSommeil[i] + " heures<br>");
}
}
}
[Link]("<hr>");
// Vérifier si l'utilisateur a eu un sommeil suffisant pour les trois nuits
if (nbr_inf++ == 0) { // if (nuitSuffisante)
[Link]("<font color='green'>Sommeil suffisant pour les trois nuits</font>");
} else {
2/5
[Link]("<font color='red'>Sommeil non suffisant pour les trois nuits</font>");
}
[Link]("<hr>");
</script>
</body>
</html>
Exercice 2 :
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Times New Roman", Arial, sans-serif;
background-color: #83c5be;
}
h1 {
text-align: center;
text-transform: capitalize;
color : #c1121f;
text-shadow: 2px 2px #FFF;
text-decoration: underline overline;
font-style: italic;
form {
width: 450px; // max-width: 450px;
margin: 0px 500px;
background-image: url("[Link]");
padding: 20px;
box-shadow: 10px 10px 20px #0077b6;
border: 3px dotted #000;
}
label {
font-weight: bold;
input[type="text"],
input[type="number"],
input[type="date"],
input[type="file"],
select{
width: 100%;
padding: 6px;
margin-bottom: 10px;
border-radius: 9px;
}
3/5
input[type="submit"],
input[type="reset"] {
background-color: #008CBA;
color: #fff;
padding: 10px;
border-radius: 7px;
width: 45%;
}
input[type="reset"] {
background-color: #f44336;
margin-left: 10px;
}
/* Hover effect on buttons */
input[type="reset"]:active {
background-color: #45a049;
}
#img2{
float: right;
}
#img1{
float: left;
}
#img1, #img2{
margin : 10px;
width : 80px;
height : 80px;
border-radius: 10px;
}
</style>
<title>Suivi des Réservations de Voyage</title>
</head>
<body>
<h1>Suivi des Réservations de Voyage</h1>
<form action="[Link]" method="POST">
<table>
<tr>
<td colspan="2"><img src = "[Link]" id="img1"><img src = "[Link]" id="img2"></td>
</tr>
<tr>
<td><label for="destination">Destination*:</label></td>
<td><input type="text" id="destination" name="destination" placeholder="Exemple: Paris"
required></td>
</tr>
<tr>
<td><label for="dateDepart">Date de Départ*:</label></td>
<td><input type="date" id="dateDepart" name="dateDepart" required></td>
</tr>
<tr>
<td><label for="dateRetour">Date de Retour*:</label></td>
<td><input type="date" id="dateRetour" name="dateRetour" required></td>
</tr>
<tr>
<td><label for="nbVoyageurs">Nombre de Voyageurs*:</label></td>
4/5
<td><input type="number" id="nbVoyageurs" name="nbVoyageurs" required></td>
</tr>
<tr>
<td><label for="typeHebergement">Type d'Hébergement*:</label></td>
<td>
<select id="typeHebergement" name="typeHebergement" required>
<option value="hotel">Hôtel</option>
<option value="appartement">Appartement</option>
<option value="maison">Maison</option>
</select>
</td>
</tr>
<tr>
<td><label for="mTransport">Moyen de Transport*:</label></td>
<td>
<input type="radio" id="avion" name="moyenTransport" value="avion" required checked>
<label for="avion">Avion</label><br>
<input type="radio" id="train" name="moyenTransport" value="train" required>
<label for="train">Train</label><br>
<input type="radio" id="voiture" name="moyenTransport" value="voiture" required>
<label for="voiture">Voiture</label>
</td>
</tr>
<tr>
<td><label for="Choix">Choix*:</label></td>
<td><input type="checkbox" id="Passeport" name="Passeport"required checked>
<label for="Passeport" >Passeport </label>
</td>
<br>
<input type="checkbox" id="Carte" name="Carte" required checked>
<label for="Carte" >Carte d'identité</label>
</td>
</tr>
<tr>
<td><label for="pièces">Pièces*:</label></td>
<td><input type="file" id="pièces" name="pièces" required></td>
</tr>
<tr>
<td><label for="codePromo">Code Promo:</label></td>
<td><input type="text" id="codePromo" name="codePromo" placeholder="Votre code de
promo"></td>
</tr>
<tr>
<td colspan="2" class="form-buttons">
<input type="submit" value="Confirmer">
<input type="reset" value="Réinitialiser">
</td>
</tr>
</table>
</form>
</body>
</html>
Bon courage…
5/5
