Traduction
Tutoriel sur Javascript, Vue.js, jQuery.js & Node.js
Recherche dans ce tuto
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Dans les exemples des chapitres précédents l'utilisateur communiquait avec le programme grâce à des fonctions natives :
prompt(), confirm() & alert(). On ne peut pas dire que ce soit très ergonomique ...
Si JavaScript est un bon langage de programmation pour le Web il faut regretter que la gestion des entrées et sorties soit minimaliste ...
Heureusement dans HTML nous avons un outil formidable : le formulaire !
D'autant que la norme HTML 5 à notablement enrichi cet outil : de nouveaux types de champs, de nouveaux attributs pour
un contrôle de saisie "côté client" efficace sans qu'il soit nécessaire parfois de recourir à un script JS.
Il est donc préférable de toujours confier les entrées-sorties à un formulaire HTML associé ou non à un script JS.
J'entends par "simples" des formulaires qui ne sont pas des formulaires de soumission.
Dans de tels formulaires les attributs action & method de la balise FORM sont absents et le bouton légendé "valider / envoi"
est de type "button" pour appeler un script.
Thème: l'utilisateur saisit un nom puis un prénom et, grâce à un script, la concaténation des deux est réalisée et affichée. Puis le focus est rendu au champ pour saisir le nom.
Il faut aussi un bouton de commande pour appeler le script (sur clic).
Il faut aussi des légendes pour aider l'utilisateur.
Précisez surtout le type "button" pour l'élément button sinon le type par défaut est "submit" et le script ne sera alors pas exécuté.
Il est très simple.
f.bouton.onclick = function ()
{
f.nom_prenom.value = f.nom.value +" "+ f.prenom.value ;
f.nom.focus(); // activer le premier champ du formulaire
}
Pour accéder en JavaScript, à un élément de formulaire, j'ai utilisé une technique aussi ancienne que le JavaScript
(mais toujours valide) reposant sur la syntaxe :
nomFormulaire.nomChamp.propriété / méthode / événement.
Cela suppose que le formulaire et les contrôle du formulaire soient nommés (emploi de l'attribut "name").
Inconvénient de ce programme : même si je laisse un des champs vide je peux concaténer ...
Nous saisissons un nombre (entier ou décimal) dans un champ.
Suite à un clic sur le bouton de commande, le carré ce nombre s'affiche dans un deuxième champ du formulaire.
Le premier INPUT est de type "number" (nouveau type de champ introduit par la spécification HTML5).
Tous les navigateurs récents ont implémenté ce type de champ.
Comme j'ai rajouté l'attribut step ="any" je peux saisir un décimal.
Sous Chrome on peut saisir dans ce champ un nombre décimal au format français (la virgule en tant que séparateur).
f.bouton.onclick =function()
{
var vnombre = f.nombre.value;
f.carre.value = vnombre * vnombre;
}
Le script ne présente aucune difficulté.
Saisissez 5.5 puis 5,5 dans le champ.
À chaque fois vous obtenez comme résultat 30.25
En combinant dans un document HTML un formulaire HTML5, du CSS et un script en JS, il est possible de réaliser des applications web.
En lien deux applications qui peuvent vous être utiles :
-Calculette en ligne
-Boite à couleurs
Je vais maintenant évoquer l'emploi de JavaScript dans le cadre d'un formulaire de soumission
c'est à dire un formulaire qui permet d'envoyer des données dans une autre page le plus souvent en vue d'un traitement en PHP.
Le traitement PHP consiste en général à lire / écrire dans la base de données associée au site.
On reconnait un formulaire de soumission facilement : les attributs action & method de la balise FORM deviennent obligatoires.
De plus le bouton de commande doit être de type "submit".
Dans ce type de formulaire avant toute tentative de soumission des données il faut procéder à un contrôle de saisie "côté client"
appelé aussi contrôle "navigateur.
Vous êtes en droit de penser que grâce à toutes ces nouveautés apportées par HTML5 & CSS3 on peut parfaitement effectuer un contrôle
de saisie "côté client" uniquement via le code du formulaire : typage des champs et attributs required & pattern)
appliqués à certains champs.
Mais je vais vous montrer au travers d'un exemple que le contrôle HTML a des limites ...
Pour vous inscrire sur un site de rencontres coquin (lol) vous devez saisir en guise d'identifiant votre adresse mail et
la confirmer puis choisir un mot de passe et le confirmer.
Le mot de passe doit contenir entre 6 et 8 caractères alphanumériques c'est à dire des lettres non accentuées et des chiffres.
Les autres caractères sont bannis.
Nous envisageons successivement plusieurs solutions concernant le contrôle de saisie "côté client".
Le contrôle de saisie se fera uniquement grâce à l'emploi des nouveaux types de champs (email, number) et des nouveaux attributs (required & pattern) de la norme HTML 5.
Les données sont envoyées avec la méthode POST. En cas de succès de la soumission : accès à la page "inscription_trait.htm".
Cette page cible réserve quelques surprises agréables ...
Dans un formulaire de soumission l'élément button doit être de type "submit". En effet si il est de type "button" il n'y aura pas de soumission : les données saisies ne seront pas adressées à la cible (valeur de l'attribut "action").
Dans notre exemple le formulaire comprend quatre champs de saisie dont deux de type "email" et deux de type "password".
Un champ de type "email" oblige la saisie d'une chaine comprenant le caractère "@" donc impose un certain gabarit.
L'attribut pattern peut imposer aussi un gabarit.
Ainsi pour les champs "password" seuls sont autorisés les lettres (majuscules et minuscules) non accentuées ainsi que les chiffres.
Donc les lettres accentuées, les caractères spéciaux sont interdits.
Les quatre champs ne peuvent rester pas vides grâce à l'attribut required.
Dans les champs "passe1" et "passe2" il est impossible de saisir plus de 8 caractères grâce à l'attribut maxlength ='8'.
Bravo! vous accéder à la page "inscription_trait.htm". Donc vous avez soumissionné avec succès.
Vous accédez quand même à la page "inscription_trait.htm" alors que les deux adresses mail sont différentes et les deux mots de passe
sont également différents.
Vous découvrez à cette occasion les limites d'un contrôle "côté client" qui se résume à un contrôle via le code HTML du formulaire.
Si vous devez comparer la saisie dans deux champs différents, HTML ne vous est d'aucun secours puisque la notion de test est étrangère à ce langage ; il faut compléter le contrôle "navigateur".
Le contrôle "navigateur" comprendra non seulement un contrôle HTML et un contrôle JS.
Le code HTML reste inchangé sauf pour la balise FORM ...
Le formulaire se nomme "f". Notez dans la balise FORM la valeur de l'attribut onsubmit : "return fenvoi()".
La soumission sera effective seulement si la fonction JS fenvoi() retourne true.
function fenvoi()
{
var message = document.querySelector('#message')
var compteur = 0 ;
if(f.mail1.value == f.mail2.value) compteur++;
if(f.passe1.value == f.passe2.value) compteur++;
if (compteur < 2)
{message.innerHTML = "champs mal renseignés"; return false; }
else
{return true; message.innerHTML = "saisie correcte" ; }
} // fin fonction
Le script vérifie l'égalité entre les deux identifiants saisis ainsi que l'égalité entre les deux mots de passe saisis.
Si les deux tests sont VRAI alors la variable compteur vaut 2.
Si la variable vcompteur vaut 2 alors la fonction retourne true.
Premier essai : saisir : toto.free - toto.free- abcd - abcd
Les mails et mots de passe sont égaux entre eux mais ne correspondent pas aux "pattern" donc soumission bloquée par HTML.
Deuxième essai : saisir : toto@free.fr - toti@free.fr - abcedefij -abcdefgh
Les mails et mots de passe correspondent aux patterns mais ne sont pas égaux entre eux.
Donc la soumission est bloquée par le script qui retourne false.
Troisième essai : saisir : toto@free.fr - toto@free.fr - abcedefg -abcdefg
Les saisies correspondent aux gabarits et sont égaux entre eux donc soumission effectuée avec succès car la fonction JS
retourne true.
Un contrôle "côté client" (par HTML et JS) ne dispensera d'une vérification "côté serveur"
(en PHP au sein de la page cible).
En effet un visiteur averti sait accéder au code source de la page pour le modifier dans le cadre de sa session : supprimer les
attributs required, pattern, etc.
Il existe désormais une solution plus simple pour concilier dans un formulaire un bouton de type "submit" ET l'appel d'une fonction JS.
Par défaut lorsque vous cliquez sur un bouton de type "submit", vous adressez les données saisies vers le fichier précisé
dans l'attribut "action" (et à condition que les contrôles HTML soient vérifiés).
La méthode preventDefault() permet d'annuler le comportement par défaut. Donc dans le cadre d'un formulaire elle permet
d'interdire le soumission.
Le code HTML :
L'attribut "onsubmit ..." a disparu de la balise FORM. Sinon pas de changement.
Le script :
...
var message = document.querySelector('#message') ;
document.querySelector('form').onsubmit = function(event)
// sur soumission du formulaire appel d'une fonction anonyme
{
if (f.mail1.value == f.mail2.value && f.passe1.value == f.passe2.value)
{ message.textContent = "Saisie correcte ! " ; }
else
{
event.preventDefault(); // annulation de la soumission
message.textContent = "Erreurs de saisie !" ;
}
} // fin fonction anonyme
...
Donc tout le code JS est regroupé dans le script ; plus de "scories" de JS dans le HTML.
Appel de la fonction JS : document.querySelector('form').onsubmit = function(event)
Si le test est vérifié affichage d'un message : "saisie correcte" puis envoi des données vers la cible.
Sinon event.preventDefault() : annulation de la soumission ET affichage d'un message d'erreur.
Vous pouvez refaire les mêmes tests que lors de la version précédente : saisies égales mais ne correspondant pas aux gabarits, saisies correspondant aux patterns mais inégales, saisies égales et correspondant aux gabarits.
Désormais sur beaucoup de sites, les caractères que vous saisissez dans un champ "mot de passe"
peuvent être affichés si vous le désirez.
C'est un script qui permet d'afficher le mot de passe saisi en modifiant le type du INPUT.
Thème : connexion à un site par identifiant et mot de passe.
Une image représentant un oeil (facile à trouver sur la toile) est affichée à côté du champ de type "password".
Une légende est associée à l'image.
Si clic sur cette image appel : d'une fonction.
Il est d'un simplicité déroutante.
function f_oeil()
{
if (f.motdepasse.getAttribute('type')=='password')
{f.motdepasse.setAttribute('type','text'); }
else
{f.motdepasse.setAttribute('type','password'); }
}
Si le champ "motdepasse" est de type "password" alors il devient de type "text". Sinon c'est l'inverse.
C'est le grand intérêt de JS dans le cadre d'une page web : pouvoir modifier le DOM iniitial de la page. Ici on modifier la valeur de l'attribut "type" d'un INPUT.
Le visiteur (du site) qui remplit un formulaire peut adresser à son insu des informations au site.
En effet un formulaire peut comprendre des champs masqués au visiteur. Ces champs doivent être remplis via l'attribut "value" ou
par un script.
En se connectant à son espace le visiteur communique à son insu la largeur et la hauteur de l'écran du terminal qu'il utilise.
Ainsi l'administrateur du site sait s'il a visité avec un ordinateur de bureau ou un PC portable ou une tablette ou un smartphone.
Les données renseignées sont transmises à la page "cible.php" avec la méthode POST.
Remarquez les trois champs masqués (input type ="hidden").
document.querySelector('form').onsubmit = function()
{
f.masque1.value = screen.width;
f.masque2.value = screen.height;
} // fin fonction anonyme
Pour éviter le onsubmit="return nomfonction() dans la balise FORM, l'appel de la fonction se réalise dans le script :
document.querySelector('form').onsubmit = function()
Ce qui est beaucoup plus conforme au JS moderne.
Pour information je vous communique un extrait de la page "cible.php".
Il s'agit d'un script PHP qui se contente d'afficher les données soumissionnées par la méthode POST.
Dans un formulaire il n'y a pas que des champs et des boutons de commande.
Dans l'exemple ci-desssous je vous montre comme traiter en JS mais aussi en PHP ces différents types de contrôles.
Attention, le code HTML est conçu aussi pour un traitement PHP d'où l'instruction :
...form name ="f" action ="autres_controles.php" method ="post" ...
C'est en vue du traitement PHP que le groupe de cases cocher et la liste à choix multiples portent le nom d'un tableau de valeurs :
jeux[] & sports[].
Ce nommage est obligatoire dans le cadre du traitement PHP.
Notez que toutes les cases à cocher bénéficient de la classe "cases" et tous les items de la liste à choix multiples sont affectés
de la classe "multiple".
Aucune mise en forme n'est associée à ces deux classes ; elles ont un rôle uniquement dans le cadre du script !
...
f.js.onclick = function ()
{
var contenu = "Genre : " + f.sexe.value + "
" ;
contenu += "Tranche d'age : " + f.age.value + "
" ;
contenu+= "jeux pratiqués : " ;
var jeux = document.querySelectorAll('.cases');
for (i=0; i < jeux.length; i++)
{if (jeux[i].checked) {contenu += jeux[i].value + " " ; } }
contenu+= "
sports pratiqués : ";
var sports = document.querySelectorAll('.multiple');
for (i=0; i < sports.length; i++)
{if (sports[i].selected) {contenu += sports[i].value + " " ; } }
document.getElementById("resultat").innerHTML = contenu;
}
...
Pour ces quatre types d'entrées il faut manipuler les "value"
Pour un groupe de boutons radio et une liste à choix unique le traitement JS est simple puisqu'il n'y a qu'une seule valeur saisie
(on ne peut cocher qu'un bouton et sélectionner un seul item de la liste).
Par contre pour un groupe de cases à cocher et une liste à choix multiple c'est un peu plus compliqué ...
En JS les noms jeux[] & sports[] ne sont pas valides ; on identifie donc le groupe (de cases et d'items) via une classe
d'où les instructions :
var jeux = document.querySelectorAll('.cases') & var sports = document.querySelectorAll('.multiple')
Puis pour chaque groupe une boucle permet de concaténer dans une variable les "value" des cases "checked" OU
les "value" des items "selected".
Donc une classe CSS ne sert pas seulement à la mise en forme mais peut être utilisée pour un regroupement logique d'éléments du DOM en vue d'un traitement.
Cliquez sur le bouton "traitement JS" après avoir renseigné correctement le formulaire,
cliquez ensuite sur le bouton "traitement PHP".
Attention le resultat du traitement JS s'affiche sous le formulaire alors que le résultat
du traitement PHP s'affiche dans une autre page.
Pour info je vous communique le traitement PHP donc un extrait de la page "autres_controles.php".
Si vous recréez cette page web sur votre PC, le code PHP ne fonctionnera que si vous avez installé sur votre poste un serveur web tel WampServer qui autorise l'exécution de scripts PHP.
Il existe dans mon site un tutoriel d'initiation au langage PHP.
Mon tuto sur PHP et MYSQL