JavaScript

Langage coté client: JavaScript

Le JavaScript est un langage principalement utilisé du coté client . Ce langage permet de gérer les événement ( click, appui sur une touche du clavier) et d'ajouter du dynamisme à une page web ( modifier interactivement la page, créer des animations graphiques, etc..). Il est aussi utile pour contrôler qu'un formulaire est bien rempli avant de transmettre son contenu à un serveur.

Exercice 5.1

Ajouter le script ci-dessous juste après la balise en paire <div id=feedback></div> située juste avant la balise </body>.

A savoir: un script doit être placé juste avant </body> pour ne pas empêcher l'affichage de la page s'il est mal écrit.

const form = document.getElementById('userForm');

// on ajoute une fonction de gestion de l'évènement submit

form.addEventListener('submit', function(event) {
// on bloque la transmission classique vers le serveur

event.preventDefault();

// on affiche une alert

alert ( "vous avez cliqué pour transmettre le formulaire") ;

});

</script>

Exercice 5.2

Vous allez maintenant contrôler le formulaire . On va remplacer le contenu de la fonction de gestion de l'évènement submit. Vous allez ajouter un code qui signalera que le champ nom ou le champ prénom n'est pas rempli.

1 . on associe la constante feedback avec la balise <div id=feedback> en rouge ci-dessous:

const form = document.getElementById('userForm');

// on associe la constante feedback avec la balise <div id=feedback>

const feedback = document.getElementById('feedback');

// on ajoute une fonction de gestion de l'évènement submit

form.addEventListener('submit', function(event) {
// on bloque la transmission classique vers le serveur

event.preventDefault();

});

</script>

2 . on définit un contenu vide pour le <div id=feedback> dans la fonction en utilisant la propriété textcontent de la balise

ce qui se code feedback.textContent = '';

Si le contenu du champ nom ou celui de prénom est vide, on affichera dans la page un message grâce à ce div dont on modifiera le contenu ainsi <div id=feedback> Veuillez remplir le nom et le prénom.</div>, pour l'instant vous ajoutez les parties en rouge:

const form = document.getElementById('userForm');

// on associe la constante feedback avec la balise <div id=feedback>

const feedback = document.getElementById('feedback');

// on ajoute une fonction de gestion de l'évènement submit

form.addEventListener('submit', function(event) {
// on bloque la transmission classique vers le serveur

event.preventDefault();
// on définit un contenu vide pour le <div id=feedback> avec la propriété textContent

feedback.textContent = '';

// le div utilisera une classe de décoration spéciale que l'on définira plus tard

feedback.className = '';

});

</script>

3 . On doit ensuite récupérer les valeurs des champs nom et prénom : pour ça , on doit récupérer le contenu ( value) du champ (nom) du formulaire (form) ce qui se code form.nom.value. On nettoie les espaces éventuels avant et après la chaîne saisiedans le champ avec la méthode trim(), ce qui se code form.nom.value.trim().

On affecte ce que renvoie trim() à une variable ou à une constante que l'on va ensuite analyser

const nom = form.nom.value.trim();

Ajoutez les parties en rouge qui font tout ça:

const form = document.getElementById('userForm');

// on associe la constante feedback avec la balise <div id=feedback>

const feedback = document.getElementById('feedback');

// on ajoute une fonction de gestion de l'évènement submit

form.addEventListener('submit', function(event) {
// on bloque la transmission classique vers le serveur

event.preventDefault();
// on définit un contenu vide pour le <div id=feedback> avec la propriété textContent

feedback.textContent = '';

feedback.className = '';
// on définit deux constantes qui contiennent le contenu des champs nom et prénom néttoyés
const nom = form.nom.value.trim();

const prenom = form.prenom.value.trim();

});

</script>

4 . On teste ensuite si le champ nom ou le champ prénom est vide, si c'est le cas, on affiche un message dans le div feedback en utilisant sa propriété textcontent, on associe le div feedback à la classe error du css pour afficher un message en rouge, puis on quitte la fonction avec return :

Voici le code :

!nom veut dire pas de contenu pour nom et l'opérateur || réalise un ou logique entre les deux constantes nom et prenom

// si pas de nom ou de prenom

if (!nom || !prenom) {

feedback.textContent = 'Veuillez remplir le nom et le prénom.';

feedback.className = 'error';

return;

}

Ajoutez les parties en rouge qui font tout ça et tester:

const form = document.getElementById('userForm');

// on associe la constante feedback avec la balise <div id=feedback>

const feedback = document.getElementById('feedback');

// on ajoute une fonction de gestion de l'évènement submit

form.addEventListener('submit', function(event) {
// on bloque la transmission classique vers le serveur

event.preventDefault();
// on définit un contenu vide pour le <div id=feedback> avec la propriété textContent

feedback.textContent = '';

feedback.className = '';
// on définit deux constantes qui contiennent le contenu des champs nom et prénom néttoyés
const nom = form.nom.value.trim();

const prenom = form.prenom.value.trim();

if (!nom || !prenom) {

feedback.textContent = 'Veuillez remplir le nom et le prénom.';

feedback.className = 'error';

return;

}

});

</script>

EXEMPLE:

5 . On Vérifie ensuite que les champs de mot de passe contiennent des données identiques. Si ce n'est pas le cas, on affiche un message toujours via le div feedback:

if (pass1 !== pass2) {

feedback.textContent = 'Les mots de passe ne correspondent pas.';

feedback.className = 'error';

return;

}

Ajoutez les parties en rouge qui font tout ça et tester:

const form = document.getElementById('userForm');

// on associe la constante feedback avec la balise <div id=feedback>

const feedback = document.getElementById('feedback');

// on ajoute une fonction de gestion de l'évènement submit

form.addEventListener('submit', function(event) {
// on bloque la transmission classique vers le serveur

event.preventDefault();
// on définit un contenu vide pour le <div id=feedback> avec la propriété textContent

feedback.textContent = '';

feedback.className = '';
// on définit deux constantes qui contiennent le contenu des champs nom et prénom néttoyés
const nom = form.nom.value.trim();

const prenom = form.prenom.value.trim();

if (!nom || !prenom) {

feedback.textContent = 'Veuillez remplir le nom et le prénom.';

feedback.className = 'error';

return;

}

if (pass1 !== pass2) {

feedback.textContent = 'Les mots de passe ne correspondent pas.';

feedback.className = 'error';

return;

}

});

</script>

Exemple:

6 . Plutôt que d'envoyer le contenu du formulaire vers un serveur, vous allez l'enregistrer dans le cache du navigateur avec un fichier Json:

Ajoutez les parties en rouge qui font tout ça et tester:

const form = document.getElementById('userForm');

const feedback = document.getElementById('feedback');

form.addEventListener('submit', function(event) {

event.preventDefault();

feedback.textContent = '';

feedback.className = '';

const nom = form.nom.value.trim();

const prenom = form.prenom.value.trim();

const pass1 = form.pass1.value;

const pass2 = form.pass2.value;

if (!nom || !prenom) {

feedback.textContent = 'Veuillez remplir le nom et le prénom.';

feedback.className = 'error';

return;

}

if (pass1 !== pass2) {

feedback.textContent = 'Les mots de passe ne correspondent pas.';

feedback.className = 'error';

return;

}

const formData = { nom, prenom, pass1 };

localStorage.setItem('formData', JSON.stringify(formData));

feedback.textContent = 'Données enregistrées dans le cache du navigateur.';

feedback.className = 'message';

form.reset();

});

</script>

Exercice 5.2

Vous allez créer une page, appelée page2.html qui affiche dans un tableau ce qui a été enregistré dans le cache du naviagateur. la page 2 sera accédée avec un lien hypertexte.

1. Ajouter un lien vers la page 2 dans votre code entre la fin du formulaire et le le div feedback ( à la place des pointillés):

</form>

.....................................................

2. Créer une page 2.html avec le contenu ci-dessous, vous pouvez voir du html en noir, du css en bleu et du javascript qui récupère le contenu du cache en rouge. Tester le code en cliquant sur le lien "Voir les données enregistrées" de la première page":

<!DOCTYPE html>

<head>

<title> Page 2 - Données enregistrées</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 24px;

line-height: 1.5;

}

h1 {

margin-bottom: 12px;

}

table {

border-collapse: collapse;

width: 100%;

max-width: 560px;

}

th, td {

border: 1px solid #444;

padding: 10px 12px;

text-align: left;

}

th {

background: #f0f0f0;

}

.empty {

color: #555;

margin-top: 16px;

}

</style>

</head>

<body>

<h1>Données enregistrées</h1>

<p><a href="index.html">Retour au formulaire</a></p>

const content = document.getElementById('content');

const rawData = localStorage.getItem('formData');

if (!rawData) {

content.innerHTML = '<p class="empty">Aucune donnée enregistrée dans le cache du navigateur.</p>';

} else {

try {

const data = JSON.parse(rawData);

content.innerHTML = `

<table>

<thead>

<tr>

<th>Descripteur</th>

<th>Valeur</th>

</tr>

</thead>

<tbody>

<tr><td>prenom</td><td>${data.prenom || ''}</td></tr>

<tr><td>mot de passe</td><td>${data.pass1 || ''}</td></tr>

</tbody>

</table>

} catch (e) {

content.innerHTML = '<p class="empty">Impossible de lire les données enregistrées.</p>';

}

</script>

</body>

</html>

Résultat possible:

Créé avec HelpNDoc Personal Edition: Générateur complet de livres électroniques ePub