Evénements et formulaires☘
L'objectif est ici de retravailler des exercices de même type que ceux des pages précédentes. On s'entraîne donc à manipuler le trio html, css, javascript en utilisant notamment des formulaires.
Exercice☘
On considère le code html ci-dessous.
Dans ce code, un formulaire a été défini. Un script récupère les modifications de la valeur du champ de type input (avec un écouteur d'événement "change") pour modifier la composante rouge de la couleur de fond de l'élément d'identifiant cadreCouleur.
le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> couleurs </title>
<style>
html{
font-size: 20px;
}
body{
width: 80%;
margin: 0 auto;
}
#cadreCouleur{
width: 50px;
height: 30px;
background-color: rgb(200, 0, 0);
}
</style>
</head>
<body>
<form>
<label for="rouge">Entrez la composante rouge (entier entre 0 et 255):</label>
<input type="number" id="rouge" min="0" max="255" step="1" value="200"/>
</form>
<div id="cadreCouleur"></div>
<script>
let rouge = document.querySelector("#rouge");
let visu = document.querySelector("#cadreCouleur");
rouge.addEventListener( "change",
() => {
let composanteRouge = parseInt(rouge.value, 10);
visu.style.backgroundColor = `rgb(${composanteRouge},0, 0)`;
}
,false);
</script>
</body>
</html>
Votre mission: ajouter deux champs input qui demanderont de même à l'utilisateur d'entrer des valeurs pour les composantes de vert et de bleu et modifieront la couleur de fond du bloc div en conséquence.
Un code possible
On calque pour le vert et le bleu le code donné pour le rouge. Ce qui peut donner:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> couleurs </title>
<style>
html{
font-size: 20px;
}
body{
width: 80%;
margin: 2rem auto;
}
#cadreCouleur{
width: 50px;
height: 30px;
background-color: rgb(200, 0, 0);
}
</style>
</head>
<body>
<form>
<p>
<label for="rouge">Entrez la composante rouge (entier entre 0 et 255):</label>
<input type="number" id="rouge" min="0" max="255" step="20" value="200"/>
</p>
<p>
<label for="vert">Entrez la composante rouge (entier entre 0 et 255):</label>
<input type="number" id="vert" min="0" max="255" step="20" value="0"/>
</p>
<p>
<label for="bleu">Entrez la composante rouge (entier entre 0 et 255):</label>
<input type="number" id="bleu" min="0" max="255" step="20" value="0"/>
</p>
</form>
<div id="cadreCouleur"></div>
<script>
let rouge = document.querySelector("#rouge");
let vert = document.querySelector("#vert");
let bleu = document.querySelector("#bleu");
let visu = document.querySelector("#cadreCouleur");
rouge.addEventListener( "change",
() => {
let composanteRouge = parseInt(rouge.value, 10);
let composanteVert = parseInt(vert.value, 10);
let composanteBleu = parseInt(bleu.value, 10);
visu.style.backgroundColor = `rgb(${composanteRouge}, ${composanteVert}, ${composanteBleu})`;
}
,false);
vert.addEventListener( "change",
() => {
let composanteRouge = parseInt(rouge.value, 10);
let composanteVert = parseInt(vert.value, 10);
let composanteBleu = parseInt(bleu.value, 10);
visu.style.backgroundColor = `rgb(${composanteRouge}, ${composanteVert}, ${composanteBleu})`;
}
,false);
bleu.addEventListener( "change",
() => {
let composanteRouge = parseInt(rouge.value, 10);
let composanteVert = parseInt(vert.value, 10);
let composanteBleu = parseInt(bleu.value, 10);
visu.style.backgroundColor = `rgb(${composanteRouge}, ${composanteVert}, ${composanteBleu})`;
}
,false);
</script>
</body>
</html>
Exercice☘
On a défini ci-dessous une fonction echange(lettre, mot) qui prend en paramètre un caractère lettre
et une chaîne de caractères (appelée mot). Cette fonction remplace les caractères égaux à lettre par un 'e'
dans le mot et renvoie le résultat.
Testez ce code. Vous pouvez bien sûr dans l'éditeur de texte modifier la valeur des paramètres dans l'appel de la fonction pour constater (en ouvrant cette fois avec un navigateur) l'effet.
Code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> substituer </title>
<style>
html{
font-size: 20px;
}
body{
width: 80%;
margin: 2rem auto;
}
</style>
</head>
<body>
<script>
function echange(lettre, mot){
let motModifie = '';
for(let caractere of mot){
if(caractere == lettre){
motModifie += 'e';
}
else{
motModifie += caractere;
}
}
return motModifie;
}
document.querySelector("body").innerHTML = echange('a', 'blabla');
</script>
</body>
</html>
Votre mission est de rendre l'exécution de ce code un peu plus interactive à l'aide d'un formulaire:
- On demande, dans un formulaire, deux lettres lettre1, lettre2 et un mot à l'utilisateur.
- Après un clic sur une zone de votre choix, le mot entré s'affiche dans la page mais avec toutes les "lettre1" remplacées par "lettre2".
Un code possible
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> substituer </title>
<style>
html{
font-size: 20px;
}
body{
width: 80%;
margin: 2rem auto;
}
form{
margin: 1rem;
padding: 1rem;
border: 5px ridge purple;
text-align: center;
}
</style>
</head>
<body>
<form>
<div>
<label for="lettre_un">Entrez la lettre à remplacer:</label>
<input type="text" id="lettre_un" minlength="1" maxlength="1"/>
</div>
<div>
<label for="lettre_deux">Entrez la lettre de remplacement:</label>
<input type="text" id="lettre_deux" minlength="1" maxlength="1"/>
</div>
<div>
<label for="mot">Entrez le mot à transformer:</label>
<input type="text" id="mot" minlength="1" />
</div>
<div>
<button type="button" id="go">Cliquez ici.</button>
</div>
</form>
<div id="resultat">
</div>
<script>
function echange(lettreAremplacer, lettreDeRemplacement, mot){
let motModifie = '';
for(let caractere of mot){
if(caractere == lettreAremplacer){
motModifie += lettreDeRemplacement;
}
else{
motModifie += caractere;
}
}
return motModifie;
}
document.querySelector("#go").addEventListener( "click",
() => {
let lettreAremplacer = document.querySelector("#lettre_un").value;
let lettreDeremplacement = document.querySelector("#lettre_deux").value;
let mot = document.querySelector("#mot").value;
document.querySelector("#resultat").innerHTML = echange(lettreAremplacer, lettreDeremplacement, mot);
},
false)
</script>
</body>
</html>