LES TRAVAUX PRATIQUES JavaScript
Exercice N 1 Formulaire de validation (mail et mot de pass)
Soit le code html suivant:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login</title>
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<form action="[Link]" method="post" id="loginForm">
<fieldset>
<legend>Login</legend>
<div>
<label for="email">Email Address</label>
<input type="email" name="email" id="email" >
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" id="password" >
</div>
<div>
<label for="submit"></label>
<input type="submit" value="Login" id="submit">
</div>
</fieldset>
</form>
<script src="js/[Link]"></script>
</body>
</html>
Consigne:
La fonction valideform vérifie si les champs "email" et "password" d'un formulaire
ont été remplis. Si c'est le cas, elle renvoie true, sinon elle affiche une alerte
demandant à l'utilisateur de saisir le mail et le mot de passe, puis renvoie false.
Exercice N 2 Reformatage de nom et prenoms
Considérons le code suivant:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Formatting Names</title>
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<form action="" method="post" id="theForm">
<fieldset>
<div>
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName"
required>
</div>
<div>
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName"
required>
</div>
<div>
<label for="result">Formatted Name</label>
<input type="text" name="result" id="result">
</div>
<div>
<input type="submit" value="Submit" id="submit">
</div>
</fieldset>
</form>
<script src="js/[Link]"></script>
</body>
</html>
Consigne:
Écrire une fonction nommée formatNom prend les valeurs des champs de
formulaire "firstName" et "lastName", les formate en plaçant le nom de famille
avant le prénom.
EXERCICE 3: Calcul du rayon d’un cercle.
considérer le code suivant:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Calcul du volume d une sphere</title>
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<form action="" method="post" id="theForm">
<fieldset>
<p>Formulaire servant a calculer le volume d une sphere.</p>
<div>
<label for="rayon">Rayon</label>
<input type="text" name="rayon" id="rayon" required>
</div>
<div>
<label for="volume">Volume</label>
<input type="text" name="volume" id="volume">
</div>
<div>
<input type="submit" value="Calculer" id="submit">
</div>
</fieldset>
</form>
<script src="js/[Link]"></script>
</body>
</html>
Consigne:
Écrire une fonction JavaScript qui, La fonction calculer calcule le volume d'une
sphère de rayon r . Elle récupère la valeur du rayon depuis un champ de
formulaire avec l'ID "rayon", effectue le calcul, arrondit le résultat à quatre
décimales et affiche le volume dans un champ avec l'ID "volume".
Exercice 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Champ de textes</title>
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<form action="" method="post" id="theForm">
<fieldset>
<p>Entrer votre commentaire ici (100 charactere
maximum).</p>
<div>
<label for="comments">Commentaire</label>
<textarea name="comments" id="comments" maxlength="100"
required></textarea>
</div>
<div>
<label for="count">Compte des caracteres</label>
<input type="number" name="count" id="count">
</div>
<div>
<label for="result">Resultat</label>
<textarea name="result" id="result"></textarea>
</div>
<div>
<input type="submit" value="Submit" id="submit">
</div>
</fieldset>
</form>
<script src="js/[Link]"></script>
</body>
</html>
Consigne:
Écrire un programme JS qui permet de compter le nombre de caractères et d’afficher
le résultat.
Exercice 5:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Calculatrice pour les achats</title>
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<form action="" method="post" id="theForm">
<fieldset>
<p>Utilisez ce formulaire pour calculer le total de la
commande.</p>
<div>
<label for="quantity">Quantite</label>
<input type="number" name="quantity" id="quantity"
value="1" min="1" required>
</div>
<div>
<label for="price">Prix unitaire</label>
<input type="text" name="price" id="price" value="1.00"
required>
</div>
<div>
<label for="tax">Taux d'imposition (%)</label>
<input type="text" name="tax" id="tax" value="0.0"
required>
</div>
<div>
<label for="discount">Rabais</label>
<input type="text" name="discount" id="discount"
value="0.00" required>
</div>
<div>
<label for="total">Total</label>
<input type="text" name="total" id="total" value="0.00">
</div>
<div>
<input type="submit" value="Calculate" id="submit">
</div>
</fieldset>
</form>
<script src="js/[Link]"></script>
</body>
</html>
