Pratique JavaExemples de scripts avec code source Code
James Hartmann
⚡ Résumé intelligent
Pratique Code Exemples utilisant JavaCe script illustre comment les boucles, la validation de formulaires et les événements permettent de résoudre les tâches courantes d'un navigateur. Cet article présente un générateur de tables de multiplication, un validateur complet de formulaire d'inscription, une fenêtre contextuelle qui s'affiche au survol de la souris, une horloge numérique en temps réel et les bonnes pratiques qui garantissent la fiabilité de tels scripts.
Ce que vous construirez dans ces JavaExemples de scripts
Chaque exemple ci-dessous est une page HTML complète, exécutable dans n'importe quel navigateur sans étape de compilation ni bibliothèque externe. Ensemble, ils couvrent les trois compétences présentes dans presque tous les scripts de navigateur : la génération de balisage à partir de données, la validation des entrées utilisateur et la réaction aux événements.
| Exemple | Concept mis en pratique | Principales méthodes utilisées |
|---|---|---|
| Table de multiplication | Boucles imbriquées et construction de chaînes de caractères | invite, pour, pendant que, document.écrire |
| Validation de formulaire | Tableaux, conditions et mises à jour du DOM | getElementById, indexOf, lastIndexOf, innerHTML |
| Message contextuel | Gestion des événements | ajouterEventListener, alerte |
| Digihorloge tal | Minuteurs et formatage de date | setInterval, Date, padStart, texteContent |
Connaissance de base avec Javascénario La syntaxe est supposée correcte. Si les boucles ne vous sont toujours pas familières, consultez la documentation. comment utiliser les boucles dans Javascénario avant de commencer.
Exemple 1: JavaTable de multiplication de scripts
Créez une table de multiplication simple demandant à l'utilisateur le nombre de lignes et de colonnes.
Solution:
<html>
<head>
<title>Multiplication Table</title>
<script type="text/javascript">
var rows = prompt("How many rows for your multiplication table?");
var cols = prompt("How many columns for your multiplication table?");
if(rows == "" || rows == null)
rows = 10;
if(cols== "" || cols== null)
cols = 10;
createTable(rows, cols);
function createTable(rows, cols)
{
var j=1;
var output = "<table border='1' width='500' cellspacing='0' cellpadding='5'>";
for(i=1;i<=rows;i++)
{
output = output + "<tr>";
while(j<=cols)
{
output = output + "<td>" + i*j + "</td>";
j = j+1;
}
output = output + "</tr>";
j = 1;
}
output = output + "</table>";
document.write(output);
}
</script>
</head>
<body>
</body>
</html>
Résultat (3 lignes et 4 colonnes) :
1 2 3 4 2 4 6 8 3 6 9 12
Code explication: La boucle for externe crée une ligne de tableau à chaque itération, tandis que la boucle while interne remplit cette ligne avec une cellule par colonne. Le compteur j La valeur est réinitialisée à 1 après chaque ligne, une étape souvent oubliée par les débutants. Sans cette réinitialisation, seule la première ligne contiendrait des cellules.
Astuce : La fonction prompt renvoie toujours une chaîne de caractères. L'expression i*j fonctionne parce que JavaLe script convertit les deux opérandes en nombres pour la multiplication, mais une comparaison telle que rows > 5 comparerait du texte. Enveloppez l'entrée dans Number() lorsque la valeur est utilisée aussi bien pour des calculs arithmétiques que pour des comparaisons.
Exemple n° 2 : Exemple de formulaires JS
Créez un exemple de formulaire qui recueille le prénom, le nom, l'adresse e-mail, l'identifiant, le mot de passe et sa confirmation. Tous les champs sont obligatoires et l'adresse e-mail doit être au format correct. Les valeurs saisies dans les champs « Mot de passe » et « Confirmation du mot de passe » doivent être identiques. Après validation… Javascénario, afficher les messages d'erreur appropriés en rouge juste à côté de la zone de texte où se trouve l'erreur.
Solution avec source Code:
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
var divs = new Array();
divs[0] = "errFirst";
divs[1] = "errLast";
divs[2] = "errEmail";
divs[3] = "errUid";
divs[4] = "errPassword";
divs[5] = "errConfirm";
function validate()
{
var inputs = new Array();
inputs[0] = document.getElementById('first').value;
inputs[1] = document.getElementById('last').value;
inputs[2] = document.getElementById('email').value;
inputs[3] = document.getElementById('uid').value;
inputs[4] = document.getElementById('password').value;
inputs[5] = document.getElementById('confirm').value;
var errors = new Array();
errors[0] = "<span style='color:red'>Please enter your first name!</span>";
errors[1] = "<span style='color:red'>Please enter your last name!</span>";
errors[2] = "<span style='color:red'>Please enter your email!</span>";
errors[3] = "<span style='color:red'>Please enter your user id!</span>";
errors[4] = "<span style='color:red'>Please enter your password!</span>";
errors[5] = "<span style='color:red'>Please confirm your password!</span>";
for (i in inputs)
{
var errMessage = errors[i];
var div = divs[i];
if (inputs[i] == "")
document.getElementById(div).innerHTML = errMessage;
else if (i==2)
{
var atpos=inputs[i].indexOf("@");
var dotpos=inputs[i].lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=inputs[i].length)
document.getElementById('errEmail').innerHTML = "<span style='color: red'>Enter a valid email address!</span>";
else
document.getElementById(div).innerHTML = "OK!";
}
else if (i==5)
{
var first = document.getElementById('password').value;
var second = document.getElementById('confirm').value;
if (second != first)
document.getElementById('errConfirm').innerHTML = "<span style='color: red'>Your passwords don't match!</span>";
else
document.getElementById(div).innerHTML = "OK!";
}
else
document.getElementById(div).innerHTML = "OK!";
}
}
function finalValidate()
{
var count = 0;
for(i=0;i<6;i++)
{
var div = divs[i];
if(document.getElementById(div).innerHTML == "OK!")
count = count + 1;
}
if(count == 6)
document.getElementById("errFinal").innerHTML = "All the data you entered is correct!!!";
}
</script>
</head>
<body>
<table id="table1">
<tr>
<td>First Name:</td>
<td><input type="text" id="first" onkeyup="validate();" /></td>
<td><div id="errFirst"></div></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" id="last" onkeyup="validate();"/></td>
<td><div id="errLast"></div></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" id="email" onkeyup="validate();"/></td>
<td><div id="errEmail"></div></td>
</tr>
<tr>
<td>User Id:</td>
<td><input type="text" id="uid" onkeyup="validate();"/></td>
<td><div id="errUid"></div></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="password" onkeyup="validate();"/></td>
<td><div id="errPassword"></div></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" id="confirm" onkeyup="validate();"/></td>
<td><div id="errConfirm"></div></td>
</tr>
<tr>
<td><input type="button" id="create" value="Create" onclick="validate();finalValidate();"/></td>
<td><div id="errFinal"></div></td>
</tr>
</table>
</body>
</html>
Comportement attendu :
Empty first name -> Please enter your first name! Email "ann@site" -> Enter a valid email address! Email "ann@site.com" -> OK! Passwords differ -> Your passwords don't match! All six fields valid -> All the data you entered is correct!!!
Code explication: Trois réseaux fonctionnent en parallèle. entrées contient les valeurs actuelles, erreurs contient les messages correspondants, et div L'index contient l'identifiant du conteneur affichant chaque message. Il associe ainsi un champ, son texte d'erreur et son emplacement de sortie. La branche email n'accepte une adresse que si le symbole arobase n'est pas le premier caractère et si au moins deux caractères séparent l'arobase du point final.
⚠️ Attention : La validation côté client améliore l'expérience utilisateur, mais n'offre aucune sécurité. N'importe qui peut la désactiver. JavaExécutez le script ou envoyez la requête directement au point de terminaison ; par conséquent, chaque règle indiquée ici doit être répétée sur le serveur.
Exemple n° 3 : Message contextuel utilisant un événement
Affichez un simple message « Bienvenue !!! » sur votre page Web de démonstration, et lorsque l'utilisateur survole le message, une fenêtre contextuelle doit s'afficher avec le message « Bienvenue sur ma page Web !!! ».
Solution:
<html> <head> <title>Event!!!</title> <script type="text/javascript"> function trigger() { document.getElementById("hover").addEventListener("mouseover", popup); function popup() { alert("Welcome to my WebPage!!!"); } } </script> <style> p{ font-size: 50px; position: fixed; left: 550px; top: 300px; } </style> </head> <body onload="trigger();"> <p id="hover">Welcome!!!</p> </body> </html>
Comportement attendu :
Page loads -> the text "Welcome!!!" appears in large type Mouse hovers -> an alert box shows "Welcome to my WebPage!!!"
Code explication: L'écouteur est intégré à la fonction de déclenchement, qui s'exécute lors de l'événement `onload` du corps de la page. Il est important d'attendre le chargement complet, car le paragraphe avec l'identifiant « hover » n'existe pas encore tant que l'en-tête n'est pas analysé. On obtient le même résultat de manière plus élégante en plaçant le script juste avant la balise de fermeture `</body>`, ou en ajoutant l'attribut `defer`.
Exemple n° 4 : En direct DigiHorloge tal utilisant setInterval
Affichez l'heure actuelle sur la page et actualisez-la chaque seconde. Cet exemple présente les minuteurs et illustre l'alternative moderne à la fonction document.write.
<html> <head> <title>Digital Clock</title> </head> <body> <h2 id="clock">--:--:--</h2> <script> function showTime() { const now = new Date(); const hh = String(now.getHours()).padStart(2, "0"); const mm = String(now.getMinutes()).padStart(2, "0"); const ss = String(now.getSeconds()).padStart(2, "0"); // textContent is safer than innerHTML for plain text document.getElementById("clock").textContent = hh + ":" + mm + ":" + ss; } showTime(); // draw immediately setInterval(showTime, 1000); // then refresh every second </script> </body> </html>
Comportement attendu :
09:05:07 09:05:08 09:05:09 (the heading updates in place once per second)
Appeler showTime une fois avant setInterval évite un délai visible d'une seconde à l'ouverture de la page. Utilisez clearInterval avec la valeur renvoyée par setInterval lorsque l'horloge doit s'arrêter.
Meilleures pratiques pour la rédaction de ces JavaExemples de scripts
Les trois exemples originaux datent d'un style antérieur de JavaScript. La liste ci-dessous indique les modifications à apporter lors de l'adaptation pour la production.
- Remplacez document.write : Cette méthode efface l'intégralité du document lorsqu'elle est appelée après le chargement de la page. Créez plutôt un élément et définissez son contenu textuel ou ajoutez un nœud.
- Déclarez chaque variable : Utilisez `let` et `const` plutôt que de vous fier à des variables globales implicites comme le compteur.
idans les boucles ci-dessus. - Préférez textContent à innerHTML : L'insertion de texte fourni par l'utilisateur avec innerHTML ouvre une faille de sécurité permettant les attaques XSS (Cross-Site Scripting).
- Déplacez les gestionnaires hors du balisage : Remplacez les attributs onkeyup et onclick par addEventListener, ce qui permet de séparer le comportement de la structure.
- Convertir l'entrée de l'invite : Encapsulez les valeurs dans la fonction Number() avant de les utiliser dans des comparaisons, car prompt renvoie toujours une chaîne de caractères.
- Validez à nouveau sur le serveur : Considérez les vérifications du navigateur comme une simple couche de commodité.
Pour approfondir ces exemples, consultez Javaméthodes de tableau de script pour les tableaux parallèles utilisés dans le validateur de formulaire, JavaChaînes de script pour les vérifications de position par courriel, et cookies dans Javascénario pour mémoriser les valeurs saisies par un visiteur. Déterminez où placer le script final en lisant interne et externe Javascénario.
