Correction-des-EXERCICES-6-7-8.pdf-version-1

CORRECTION DES EXERCICES 6-7 ET 8
EXERCICE6
EXERCICE6.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EX6</title>
<link rel="stylesheet" href="Ex6.css">
</head>
<body>
<form name="F" method="post" action="#">
<h1>Authentification</h1>
<div class="input">
<input type="text" name="login" placeholder="Login">
</div>
<div class="input">
<input type="password" name="pass" id ="pass" placeholder="Mot de passe">
<img src="rouge.jpg" id="eye" onclick="changer()">
</div>
<input type="submit" value="S'authentifier" class="submit">
</form>
<script src="Ex6.js"></script>
</body>
</html>
Ex6.css
*{ font-family: Cambria; font-size: 20px; }
body{
margin: 0;
height: 100vh;
background-image:url(ex6.png) ;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
form{
width: 500px;
background-color: rgba(0,0,0, 0.3);
border-radius: 20px;
padding: 60px;
box-sizing: border-box;
}
h1{
font-size: 30px;
color: #fff;
border-bottom: solid 1px rgba(255,255,255,0.3);;
}
.input{
background-color:#fff;
padding: 5px;
margin: 10px 0;
}
input{
width: 80%;
border: none;
outline: none;
background-color: none;
vertical-align: middle;
}
.input img{
height: 25px;
cursor: pointer;
vertical-align: middle;
}
.submit{
width: 100%;
background-color: rgba(63, 131, 63,0.8);
color: #fff;
padding: 6px 0;
text-align: center;
cursor: pointer;
}
.submit:hover{
background-color: rgba(63,131,63,1);
}
Ex6.js
e=true;
function changer(){
if(e){
document.getElementById("pass").setAttribute("type","text");
document.getElementById("eye").src="vert.jpg";
e=false;
}
else{
document.getElementById("pass").setAttribute("type","password");
document.getElementById("eye").src="rouge.jpg";
e=true;
}
}
EXERCICE7
Inscription.HTML
<html>
<head>
<meta http-equiv="Content-Language" content="fr" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inscription</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav>
<ul>
<li><a href="inscription.html">Inscription </a></li>
<li><a href="commande.html">Commande </a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<form name="f" method="POST" action="">
<fieldset>
<legend>Inscription d'un client :</legend>
<input type="text" name="nom" id="nom" placeholder="Nom : " />
<input type="text" name="pre" id="pre" placeholder="Prénom : " />
<input type="text" name="tel" id="tel" placeholder="Telephone : " />
<textarea name="adr" id="adr" placeholder="Adresse : "></textarea>
<hr />
<input
type="password"
name="mdp"
id="pw"
placeholder="Mot de passe : "
/>
<input
type="password"
name="cmp"
id="pwc"
placeholder="Confirmation du MP"
/>
<input class="sub" type="submit" value="Valider" name="B1" />
<input class="res" type="reset" value="Annuler" name="B2" />
<span id="erreur"></span>
</fieldset>
</form>
</section>
<footer>
<a href="#"><img src="images/plat01.png" alt="plat1" /></a>
</footer>
<script src="biblio.js"></script>
</body>
</html>
style.css
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
body {
margin: 0;
}
nav {
height: 15vh;
display: flex;
color: white;
font-weight: bold;
}
ul li {
display: inline;
margin: 40px;
height: 100px;
}
li a {
text-decoration: none;
border-radius: 5px;
}
li a:hover {
background-color: #1e1;
}
section {
height: 70vh;
background-image: url("images/pizza.jpg");
display: flex;
opacity: 0.8;
color: white;
font-size: 3rem;
font-weight: bold;
}
fieldset {
color: blanchedalmond;
font-weight: bold;
width: 200px;
margin: 5px auto;
}
form {
width: 250px;
background-color: rgb(0, 0, 0, 0.4);
padding: 5px;
}
input,
textarea,
select {
display: block;
margin: 8px auto;
width: 200px;
padding: 6px 10px;
border: none;
}
.sub {
background-color: #1e1;
font-weight: bold;
color: aliceblue;
cursor: pointer;
font-weight: 700;
}
.res {
background-color: #555;
font-weight: bold;
color: aliceblue;
cursor: pointer;
font-weight: 700;
}
footer {
height: 15vh;
background-color: rgba(174, 152, 99, 0.5);
display: flex;
}
img {
padding: 20px;
width: 70px;
}
commande.html
<html>
<head>
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>commande</title>
</head>
<body>
<nav>
<ul>
<li><a href="inscription.html">Inscription </a></li>
<li><a href="commande.html">Commande </a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<form name="f" method="POST" action="">
<fieldset>
<legend><b>Commande de pizzas :</b></legend>
<b>Type de pizza : </b>

<select name="type" id="type">
<option selected>Choisir une Pizza :</option>
<option value="25.500">fruits de mer</option>
<option value="10.000">margherita</option>
<option value="14.500">napolitaine</option>
<option value="12.000">neptune</option>
<option value="20.000">royale</option>
</select>
<input type="number" name="qte" id="qte" placeholder="Quantite: " />
<input type="text" name="tel" id="tel" placeholder="Téléphone: " />
<input
type="submit"
value="Commander"
name="B1"
class="sub"
onclick="return commande()"
/>
<input type="reset" value="Annuler" name="B2"
class="res"onclick="retourzero()" />
<p id="msg"></p>
</fieldset>
</form>
</section>
<footer>
</footer>
</body>
<script src="biblio.js"></script>
</html>
biblio.js
function commande() {
var qte = document.getElementById("qte").value;
var tel = document.getElementById("tel").value;
if (document.getElementById("type").selectedIndex == 0) {
msg.innerHTML = "Sélectionnez un type";
msg.style.backgroundColor = "red";
return false;
}
if (isNaN(qte) || Number(qte) < 1 || Number(qte) > 5) {

msg.innerHTML = "Quantité invalide";
return false;
}
if (tel.length != 8 || isNaN(tel)) {
msg.innerHTML = "Telephone invalide";
return false;
}
indice = document.getElementById("type").selectedIndex;
val = document.getElementById("type").options[indice].value;
total = val * qte;

msg.innerHTML = "Total à payer = " + total + " D";
msg.style.backgroundColor = "green";
return false;
}
function retourzero(){
msg.innerHTML = ""
EXERCICE8
Examen.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Examen en JS</title>
</head>
<body>
<form action="" name="F">
<h2>Identification</h2>
<label>CIN:</label><input type="text" name="cin" id="cin" required />
<label>NOM:</label><input type="text" name="nom" id="nom" required />
<label>PRENOM:</label><input type="text" name="pren" id="pren" required
/>
<hr />
<h2>TEST</h2>
<p class="ex">Exercice1: (4 points)</p>
<p>
Quels sont les opérateurs qui peuvent être utilisés avec les réels ?
</p>
<select name="ex1" id="ex1">
<option value="c1">AND, OR, NOT</option>
<option value="c2">+, -, *, /</option>
<option value="c3">DIV, MOD</option>
</select>
<br /><br /><br />
<p class="ex">Exercice2: (4 points)</p>
<p>
Quel est l'opérateur qui peut être utilisé dans l'expression suivante:
</p>
<p>19 ..... 3 = 1</p>
<input type="radio" name="ex2" id="div" />DIV
<input type="radio" name="ex2" id="and" />AND
<input type="radio" name="ex2" id="mod" />MOD
<p class="ex">Exercice3: (12 points:4+4+4)</p>

<p>Numéroter les étapes de l'algorithme suivant:</p>
<input type="text" name="c1" id="c1" size="3" />Somme <-- a + b
<br /><br />
<input type="text" name="c2" id="c2" size="3" />Lire(a, b) <br /><br />
<input type="text" name="c3" id="c3" size="3" value="4" readonly />Fin
<br /><br />
<input type="text" name="c4" id="c4" size="3" />Ecrire(Somme) <br /><br
/>
<input type="text" name="c4" id="c5" size="3" value="0" readonly />Début
<br /><br /><br />
<input type="button" value="Corriger" class="btn" id="corriger" />
<input type="reset" value="Annuler" class="btn" />
</form>
<script src="controle.js"></script>
</body>
</html>
style.css
body {
background-color: khaki;
margin: 30px;
}
h2 {
padding-left: 25%;
color: brown;
}
label,
p {
font-weight: bold;
font-size: large;
}
.ex {
font-weight: bold;
font-size: 20px;
text-decoration: underline;
color: green;
}
.btn {
background-color: rgb(51, 201, 113);
border: 2px solid white;
padding: 10px 14px;
font-size: 15px;
}
input[type="text"] {
border: 2px solid white;
padding: 3px 3px;

font-size: 15px;
border-radius: 5px;
}
controle.js
document.getElementById("corriger").addEventListener("click", verif);
function verif() {
cin = document.getElementById("cin").value;
nom = document.getElementById("nom").value;
pren = document.getElementById("pren").value;
if (cin == "" || nom == "" || pren == "") {

alert("Les champs Cin, Nom et prénom sont obligatoires");
return false;
}
/****** Calcul de la note totale *******/

note = 0;
if (document.getElementById("ex1").selectedIndex == 1) note = note + 4;
if (document.getElementsByName("ex2")[2].checked) note = note + 4;
if (document.getElementById("c1").value == 2) note = note + 4;

alert("Note Totale = " + note + "/20");

}

Correction-des-EXERCICES-6-7-8.pdf-version-1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Correction-des-EXERCICES-6-7-8.pdf-version-1

Uploaded by

Copyright:

Available Formats

CORRECTION DES EXERCICES 6-7 ET 8

<meta http-equiv="Content-Language" content="fr" />

<b>Type de pizza : </b>

<input type="text" name="tel" id="tel" placeholder="Téléphone: " />

if (isNaN(qte) || Number(qte) < 1 || Number(qte) > 5) {

total = val * qte;

<p class="ex">Exercice3: (12 points:4+4+4)</p>

padding: 3px 3px;

if (cin == "" || nom == "" || pren == "") {

/ Calcul de la note totale */

if (document.getElementById("ex1").selectedIndex == 1) note = note + 4;

if (document.getElementsByName("ex2")[2].checked) note = note + 4;

if (document.getElementById("c1").value == 2) note = note + 4;

alert("Note Totale = " + note + "/20");

You might also like