Soutenez-nous

Développement Web : "Zone Grand Débutant"


précédentsommairesuivant

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.).

Exemple d'action au chargement de la page Web :
Sélectionnez
<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.

Envoyer le formulaire uniquement si le nom d'utilisateur n'est pas vide :
Sélectionnez
<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.

Envoyer le formulaire uniquement si le nom d'utilisateur n'est pas vide + avertir l'internaute :
Sélectionnez
<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

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.


précédentsommairesuivant

  

Copyright © 2007 Guillaume Rossolini. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.