Correction Des EXERCICES 6 7 8.pdf Version 1
Correction Des EXERCICES 6 7 8.pdf Version 1
Correction Des EXERCICES 6 7 8.pdf Version 1
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);;
}
CORRECTION DES EXERCICES 6-7 ET 8
.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>
CORRECTION DES EXERCICES 6-7 ET 8
<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>
<a href="#"><img src="images/plat02.png" alt="plat2" /></a>
<a href="#"><img src="images/plat03.png" alt="plat3" /></a>
<a href="#"><img src="images/plat04.png" alt="plat4" /></a>
</footer>
CORRECTION DES EXERCICES 6-7 ET 8
<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;
justify-content: center;
align-items: center;
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");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.8;
color: white;
font-size: 3rem;
font-weight: bold;
}
CORRECTION DES EXERCICES 6-7 ET 8
fieldset {
color: blanchedalmond;
font-weight: bold;
width: 200px;
margin: 5px auto;
}
form {
width: 250px;
background-color: rgb(0, 0, 0, 0.4);
padding: 5px;
border-radius: 10px;
}
input,
textarea,
select {
display: block;
margin: 8px auto;
width: 200px;
padding: 6px 10px;
border: none;
border-radius: 10px;
}
.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);
background-size: cover;
display: flex;
justify-content: center;
}
CORRECTION DES EXERCICES 6-7 ET 8
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>
<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><b>Commande de pizzas :</b></legend>
<input
type="submit"
value="Commander"
name="B1"
CORRECTION DES EXERCICES 6-7 ET 8
class="sub"
onclick="return commande()"
/>
<input type="reset" value="Annuler" name="B2"
class="res"onclick="retourzero()" />
<p id="msg"></p>
</fieldset>
</form>
</section>
<footer>
<a href="#"><img src="images/plat01.png" alt="plat1" /></a>
<a href="#"><img src="images/plat02.png" alt="plat2" /></a>
<a href="#"><img src="images/plat03.png" alt="plat3" /></a>
<a href="#"><img src="images/plat04.png" alt="plat4" /></a>
</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 (tel.length != 8 || isNaN(tel)) {
msg.innerHTML = "Telephone invalide";
msg.style.backgroundColor = "red";
return false;
}
indice = document.getElementById("type").selectedIndex;
val = document.getElementById("type").options[indice].value;
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>
<link rel="stylesheet" href="style.css" />
</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
CORRECTION DES EXERCICES 6-7 ET 8
function verif() {
cin = document.getElementById("cin").value;
nom = document.getElementById("nom").value;
pren = document.getElementById("pren").value;