IV. JavaScript : Dynamisme du document▲
IV-A. Introduction▲
Les trois notions fondamentales :
- le fichier est au format JavaScript ;
- le document (ou programme) est à destination de l'internaute ;
- l'outil est un navigateur Web.
Le code JavaScript est interprété par le navigateur Web (s'il n'est pas trop préhistorique et si sa configuration ne l'a pas désactivé).
Je viens déjà de vous présenter un inconvénient de JS : il peut être désactivé. Néanmoins, sachez que c'est ce langage qui est derrière l'acronyme AJAX… JavaScript est donc fondamental dans le développement des sites Web d'aujourd'hui (de type Web 2.0), à savoir des sites qui ne se contentent pas d'afficher des pages Web, mais qui demandent à l'internaute de s'impliquer, de participer, voire des sites qui s'adaptent au profil de leurs visiteurs.
Incruster du code JS dans une page Web permet à la page de réagir aux actions de l'internaute, par exemple « la souris survole tel bouton » ou encore « le formulaire vient d'être envoyé ». Ainsi, nous pouvons utiliser JavaScript pour attraper des évènements et agir en conséquence.
ActionScript 3, la dernière version du langage de script pour Flash, utilise une syntaxe quasiment identique à celle de JavaScript.
IV-B. Outils nécessaires▲
Pour développer en JavaScript, il est recommandé d'avoir un éditeur de code plus puissant que ceux recommandés au début de cet article (avoir la documentation du langage à portée de main commence à devenir une condition importante). Cependant, surtout dans vos débuts, vous pourrez vous contenter de rechercher sur Internet et d'utiliser des codes sources déjà existants, en les adaptant à vos besoins.
En clair, il vous faut un bon éditeur de code + la documentation officielle + une bonne FAQ (cf. les liens ci-dessous).
Un bon outil de développement JavaScript est AptanaSite officiel d'aptana, dans la famille d'Eclipse.
IV-C. Vos premiers scripts JS▲
Le code JavaScript doit être appelé depuis un attribut situé dans une balise HTML. Le nom de l'attribut utilisé commence par « on » et se poursuit par l'évènement désiré (exemples : onload, onsubmit, onmouseover, etc.).
<html>
<body onload="alert('Hello world!');"></body>
</html>JavaScript est très souvent utilisé pour gérer des formulaires en ligne. Je ne compte pas vous montrer ici une utilisation complète, mais j'espère que mes exemples vous donneront une vision d'ensemble.
<html>
<body>
<form onsubmit="if(document.getElementById('login').value == ''){ return false; } else{ return true; }">
Nom d'utilisateur : <input type="text" id="login"/><br/>
Mot de passe : <input type="text" id="password"/><br/>
<input type="submit"/>
</form>
</body>
</html>Oui, bien sûr, ce n'est ni proprement écrit ni facile à lire… Il faut bien voir que nous commençons à voir des techniques un peu plus complexes que HTML et CSS, il faut donc commencer à bien s'organiser.
<html>
<head>
<script type="text/javascript">
function checkForm()
{
if(document.getElementById("login").value == "")
{
alert("Formulaire invalide : le nom d'utilisateur est vide");
return false;
}
else
{
alert("Le formulaire est valide");
return true;
}
}
</script>
</head>
<body>
<form onsubmit="return checkForm();">
Nom d'utilisateur : <input type="text" id="login"/><br/>
Mot de passe : <input type="text" id="password"/><br/>
<input type="submit" value="Envoyer"/>
</form>
</body>
</html>Ici, le comportement de notre page Web est bien plus évident. Lorsque l'évènement onsubmit est déclenché par le formulaire (c'est-à -dire que l'internaute a validé le formulaire), la fonction checkForm() vérifie si le champ « login » est rempli. Si c'est bon, le formulaire est transmis ; sinon, il n'est pas envoyé.
Cela permet d'éviter d'envoyer des informations au serveur lorsque l'on sait qu'elles sont incomplètes, et ainsi d'éviter à l'internaute d'attendre que le serveur réponde. Ici, c'est le navigateur qui se charge de tout vérifier.
Ici encore, je vous ai proposé un exemple minimaliste. En situation réelle, il faut notamment utiliser les attributs « id » et « name » des contrôles du formulaire : j'en parle plus en détail dans mon cours sur les formulaires (cf. les liens en bas de page)
Sécurité
Dans l'exemple ci-dessus, le serveur Web ne doit pas partir du principe que tout formulaire reçu a été validé : ce serait une erreur grave. Le code JavaScript présenté ici sert uniquement à accélérer l'arrivée des réponses données à l'utilisateur ; il ne permet pas d'assurer que 100 % des formulaires transmis sont valides.
IV-D. Formation▲
IV-D-1. Organisme officiel▲
Depuis que la fondation Mozilla a repris le développement du navigateur Netscape, elle a repris également le langage JavaScript.
La fondation Mozilla met à disposition la RéférenceRéférence JS 1.5 et le GuideGuide JS 1.5 de JavaScript 1.5, deux collections à toujours garder à portée de main.
IV-D-2. Nos ressources habituelles▲
- La FAQ JavaScript et la FAQ AJAX répondent à vos questions posées dans nos forums.
- Les sources JavaScript vous donnent des codes permettant de résoudre des problématiques précises .
- Les tutoriels JavaScriptLes meilleurs cours CSS vous permettront d'apprendre tout ce dont vous avez besoin.
- Les livres JavaScriptLes meilleurs livres CSS critiqués par la Rédaction pour toujours avoir une référence sous le coude.
- Le forum JavaScript et le forum AJAX vous permettent de poser toutes vos questions qui ne trouvent pas réponse dans nos autres ressources.
IV-D-3. Notre sélection de cours▲
Introduction à JavaScript▲
Serge P. vous présente le langage JavaScript de manière très didactique et complète.
JavaScript dans les formulaires▲
Dans mon cours sur les formulaires, j'ai présenté une méthode simple de validation de formulaire au moyen de JavaScript.
Conseils d'écriture du code▲
Adrien Pellegrini a également couvert le langage JavaScript dans son guide de styleConseils d'écriture du code javaScript.
Comparatif PHP/JavaScript▲
PHP et JavaScript étant très souvent confondus, Julp vous a préparé un tableau comparatif qui ne vous laissera plus aucun doute sur leurs différences.
IV-E. Les dangers de JavaScript▲
Ce paragraphe n'est qu'une reformulation de ce que j'ai déjà évoqué plus haut. Il est absolument fondamental que tout développeur ait parfaitement conscience de tous ces dangers.
Puisque JavaScript permet de vérifier certaines informations envoyées par l'internaute, la tentation est forte de faire confiance à une page Web dont on sait que du code JS effectue ces vérifications. Cependant, il faut bien se souvenir que la majorité des navigateurs Internet peuvent désactiver le JavaScript, ce qui rend ces précautions inutiles (tout du moins du point de vue sécurité). Par conséquent, JavaScript ne doit être utilisé que pour améliorer l'expérience utilisateur, pas pour la sécurité. Si un champ est vérifié par JS, il doit impérativement l'être à nouveau par le script de destination côté serveur.
J'insiste : JavaScript est à utiliser exclusivement pour faciliter la navigation dans votre site.