gilles.hunault@univ-angers.fr                                      

 

Un petit tuteur JavaScript

Valid XHTML 1.0!                  

Table des matières

 

1. Présentation de JavaScript

2. Eléments du langage de JavaScript

3. Programmation classique en JavaScript

4. Exemples spécifiques en JavaScript

5. Exemples plus conséquents en JavaScript

6. Gestion dynamique d'une page Web

 

 

1.  Présentation de JavaScript

JavaScript est un "petit" langage de programmation pour le Web qui s'exécute en local chez le client (et non pas sur le serveur Web). Il ne doit en aucun cas être confondu avec Java qui est un "gros" langage de programmation général (qui fonctionne dans ou à l'extérieur du Web). JavaScript permet de gérer des pages HTML dynamiques et en particulier de soulager le serveur Web de certaines petites tâches (alertes, vérifications de positivité etc). Sans être totalement objet, JavaScript utilise de nombreux concepts objets définis par prototype et non pas par classe, comme en java ou php. C'est un langage interprété, exécuté dynamiquement au fur et à mesure du chargement de la page Web qui permet d'effectuer des traitements en mode asynchrone (technologie AJA et AJAX).

Pour savoir si Javascript est activé sur votre ordinateur, consultez ma page actif ? .

Pour activer ou désactiver Javascript, consultez activation.

Au-delà de gadgets sympathiques mais un peu inutiles (comme changer la couleur de fond de tous les paragraphes), JavaScript est le seul langage qui est capable de gérer dynamiquement une page Web, c'est à dire d'ajouter des éléments (paragraphes, formulaires..), de les supprimer, de les remplir, de les organiser, de les trier sans avoir à recharger la page. Même pour des applications Web déjà existantes, JavaScript est un bon choix pour renforcer et améliorer l'application, ajouter des fonctionnalités sans avoir à réécrire l'application. Attention toutefois à ce qu'un "vrai" développement JavaScript demande une grande rigueur pour ne pas entrer en conflit avec d'autres fonctionnalités ou avec d'autres composantes JavaScript.

JavaScript est intégré à Firefox, Opera, Internet Explorer... mais le "moteur d'interprétation" n'est pas le même suivant le logiciel d'où quelques petites incompatibilités et spécificités. On verra un plus plus loin comment tester si le browser supporte JavaScript (ou si l'option d'activation de JavaScript est invalidée...). Pour utiliser JavaScript, on peut

soit insérer des parties SCRIPT dans les fichiers HTML.
soit utiliser des URL étendues comme <a href="Javascript: ...">, onclick=...
soit utiliser des évènements comme onclick, onsubmitMouseover...

Chaque partie script commence par le marqueur <script ... et se termine par le marqueur </script>. La construction <script ... /> (c'est à dire sous la forme de balise autofermante) est interdite. Il est à noter que dés le premier appel à JavaScript, le navigateur gère une "session" JavaScript qui garde en mémoire un certain nombre d'informations, dont notamment les variables JavaScript.

Il y a plusieurs façons d'utiliser l'élément script avec l'attribut type="text/javascript". La syntaxe

<script type="text/javascript" src="prog.js"></script>

permet de charger le fichier nommé prog.js avec toutes les défintions de fonctions présentes et la syntaxe

<script type="text/javascript">mafonc();</script>

permet d'appeler la fonction nommé mafonc. Plus généralement, on peut exécuter les instructions javascript entre la balise ouvrante <script ...> et la balise fermante </script>. Il est conseillé de mettre le chargement dans l'élément head.

On notera que pour XHTML seul l'attribut type="text/javascript" est obligatoire mais un script "online" doit certainement s'écrire avec du CDATA pour être bien propre et bien lisible. C'est pourquoi il vaut mieux externaliser le javascript dans des fichiers externes et les charger par :


<script type="text/javascript" src="demoJs08.js">

Par exemple le fichier suivant, nommé xmpjs01.htm


    <html>
      <head>
         <title> (gH) : un premier exemple en JavaScript</title>
      </head>
      <body>
         Bonjour
         <script language="javascript">window.document.write("tout le monde ") </script>
      </body>
    </html>

est une page Web qui utilise le mode normal pour afficher "Bonjour" et qui fait appel à JavaScript pour afficher " tout le monde ".

Attention ! l'imbrication des marqueurs Web classiques et ceux de JavaScript n'a pas besoin d'être "équilibrée" tant que cela donne un page correcte. Par exemple, le fichier xmpjs02.htm qui contient 


<html>
  <head>
     <title> (gH) : deuxième exemple en JavaScript</title>
  </head>
  <body>
    <ul>
      <li> Un
        <script language="javascript">
          window.document.write("<li>Deux ")
          window.document.write("</ul>")
        </script>
  </body>
</html>

est correct, alors que le marqueur <script> commence avant que le marqueur </ul> termine la liste (ce qui est normal, ici, puisque c'est JavaScript qui termine la liste).

On peut ouvrir et fermer JavaScript plusieurs fois dans une même page, comme on pourra s'en rendre compte en affichant le "source" des pages Web mais attention ! JavaScript ce n'est pas le serveur qui exécute la page mais le "browser" local.

Pour écrire "proprement" du JavaScript, il est donc conseillé de définir les fonctions et les variables dans des fichiers externes et de ne mettre dans la page Web que des appels de fonctions JavaScript. Toutefois, pour la simplicité de l'exposé, nous mettrons souvent le code source dans la page, laissant au lecteur le soin de l'externaliser. Ainsi l'exemple 1 devrait donc être écrit ainsi : 


    <html>
      <head>
         <title> (gH) : un premier exemple en JavaScript</title>
         <script type="text/javascript" src="xmpjs01.js"></script>
      </head>
      <body>
         Bonjour
         <script language="javascript">bonjour() ; </script>
      </body>
    </html>
avec la définition de la fonction bonjour dans le fichier xmpjs01.js suivant : 

    function bonjour() {
       window.document.write("tout le monde ") ;
    } // fin de fonction  bonjour

2.  Eléments du langage de JavaScript

Un commentaire suit le symbole double //. L'affectation de variables se fait avec =. Par exemple n = 0 met la valeur 0 dans la variable n mais comme JavaScript est sensible à la "casse", la variable N, différente de n n'est pas affectée. Avec Firefox, il est possible de faire apparaitre une "console" javascript en tapant l'URL javascript:. On peut alors tester en interactif les commandes, ou y lire le dernier message d'erreur Les sous-programmes commencent par le mot function et renvoient éventuellement une valeur avec le mot return. Les structures de flot classiques comme if, while, for ont une syntaxe traditionnelle, comme on pourra s'en rendre compte à la lecture du code-source des différents exemples.

Nous n'en dirons pas plus sur le langage de base de JavaScript car la syntaxe est classique avec des accolades, comme en C, PHP... Pour un programmeur de ces langages, les exemples fournis devraient permettre d'accéder rapidement à la syntaxe. Pour ceux et celles qui ne savent pas programmer, nous conseillons de suivre d'abord un cours d'algorithmique afin de comprendre la notion d'action, de variable, de fonction avant de voir leur écriture en Javascript. On trouvera en fin de tuteur des notions plus techniques (à cause de DOM et CSS) liées à la gestion d'une page Web.

La programmation orientée objets est surtout prévue en mode utilisation de classes prédéfinies plutot qu'en mode définition de nouvelles classes. La syntaxe de l'appel de la méthode MTH avec les paramètres PRM pour l'objet OBJ est simplement OBJ.MTH(PRM). De nombreuses classes standard permettent toute l'interaction avec l'utilisateur. Ainsi la classe navigator permet de savoir de quel browser il s'agit, la classe window donne accès aux documents. Par exemple on crée la fenetre F par F = window.open(...) et on l'ouvre par F.open(). On peut alors y écrire par F.document.write(...). De même, pour revenir en arrière, il suffit d'écrire window.history.back() pour un document normal et window.top.history.back() pour une "frame".

Javascript sait gérer les expressions régulières, les fonctions mathématiques classiques, et dispose de constructeurs dynamiques, de fonctions pour différer l'exécution (comme setTimeout). Il n'est pas toujours évident de maitriser au début ce qui est exécuté à la lecture de la page et ce que Javascript exécute dynamiquement. Un add-on comme Firebug pour Firefox permet d'afficher le code HTML produit par Javascript.

3.  Programmation classique en JavaScript

 

  Programmes élémentaires en JavaScript

On trouvera pour chaque exemple un tout petit peu de javascript (une difficulté à la fois) avec des commentaires dans le texte pour faciliter la compréhension.

demoJs01.htm affichage de la date source
demoJs02.htm affichage du jour de la semaine source
demoJs03.htm jour de la semaine par fonction et formulaire source

 

  Programmes classiques en JavaScript

demoJs04.htm bonjour avec alerte source
demoJs05.htm bonjour avec nouveau browser source
fichier inclus : demoJs05s.htm source
demoJs06.htm table de multiplication aléatoire source
demoJs07.htm table de multiplication par sous-programme source
demoJs08.htm table de multiplication avec fichier inclus source
fichier inclus : demoJs08.js source

4.  Exemples spécifiques en JavaScript

demoJs09.htm gestion du browser source
demoJs10.htm gestion de fenêtres source
demoJs11.htm informations sur le document, le browser etc. source

5.  Quelques exemples plus conséquents

   tarifs    formulaire multi-volets
   pdb    appels paramétrés d'URL avec son programme
   chapitres    masquables dynamiquement
   bleues    des boules bleues doute pour IE seulement... (aussi !) et ceci pour Noel.
     avec son programme

6.  Gestion dynamique d'une page Web

Avant d'aborder la gestion en JavaScript d'une page Web, il faut maitriser les composantes d'une page. Un élément comme un paragraphe a une balise ouvrante, une balise fermante et un contenu. Il a des propriétés comme la police de caractères, la couleur de fond, que ces propriétés soit définies par défaut ou à l'aide d'un style. Il est donc conseillé d'apprendre ou de réviser CSS avant d'étudier ce qui suit. Il faut aussi se rappeler qu'une page Web correcte, c'est à dire qui respecte les règles d'écriture et la grammaire définie par le DOCTYPE -- qui est donc obligatoire -- est en fait un arbre au sens informatique du terme où les noeuds, les fils et les parents sont les éléments que vous connaissez. Ainsi une ligne tr d'un tableau est un noeud-fils dont le noeud-parent correspond à table.

Remarque importante : il est possible que tout ce qui est indiqué ci-dessous ne fonctionne pas "pile poil" avec votre navigateur (Internet Explorer, Firefox, Opera, Safari...) ; un tel comportement (malheureusement fréquent) est lié à un non respect du "standard" de Javascript (nommée ECMASCRIPT) par les développeurs. Il est donc conseillé d'installer tous ces navigateurs et de tester les programmes JavaScript pour vérifier que tout le monde pourra en profiter. Au fil des années (ces pages ont été écrites en 2006), ces incompatibilités devraient disparaitre...

La gestion des éléments par JavaScript se fait soit en accédant à un élément particulier via son identification (attribut id) soit en accédant à un ensemble (liste) d'éléments via leur nom d'élément (comme tous les <p>, tous les <h1>)... à l'aide respectivement des fonctions document.getElementById et document.getElementsByTagName.

Voici un exemple : passez votre souris sur les mots bleu et rouge ci-dessous et observez le premier paragraphe de cette section 6 : la couleur du texte est censée changer...

bleu      rouge      normal

Voici le texte qui permet de définir le bouton du mot "bleu" : 

     <span
        onmouseover="javascript:document.getElementById('psec6').setAttribute('class','gbleu') ; "
        class="bouton_rectangulaire_sur_fond_bleu"
     >bleu
     </span>

Explications : le premier paragraphe de la section 6 commence ainsi : 

     <p class="texte" id="psec6">
     Avant d'aborder la gestion en JavaScript d'une page Web, il faut maitriser...

Vous avez remarqué que ce paragraphe a un identificateur qui est psec6 ; on peut donc y accéder avec document.getElementById('psec6'). Le reste de l'instruction permet de définir l'attribut class et de lui attribuer la valeur gbleu. C'est donc comme si dynamiquement Javascript avait écrit : 

     <p class="gbleu" id="psec6" >
     ...

En termes d'objets, document.getElementById('psec6') est un objet auquel on applique la fonction setAttribute(). Il faut bien faire attention à appliquer les "bonnes" fonctions aux "bons" objets sinon il ne se passe rien...

Passons maintenant à une gestion "en ligne" d'un formulaire. On veut convertir des pouces (unités anglaises) en centimètres, sachant qu'un pouce vaut 2,54 cm. Considérez le formulaire suivant :

Nombre de pouces :

Explications : au lieu d'un comportement classique (chargement de la page spécifiée par action et exécution du script correspondant), on écrit dans la zone de texte d'entrée (<input type="text>) dont l'id est cm le résultat de la multiplication.

En termes d'objets, this est une autoréférence du formulaire, this.pouces est l'élément du formulaire dont l'id est pouces et this.pouces.value sa valeur. Le texte complet du formulaire est presque (voir le code-source pour plus de détails) : 

     <form method="get" action="#conversion" onsubmit="this.cm.value=2.54*this.pouces.value + ' cm' ">
     Nombre de pouces :
     <input type="text" id="pouces" class="tajaunec" />
     <input type="submit" />
     <a name="conversion">
     <input type="text" id="cm" />
     </a>
     <input type="reset" />
     </form>

CSS permet de faire encore mieux grâce à JavaScript. Regardez le formulaire suivant :

Nombre de pouces :

Vous aurez remarqué qu'il n'y a plus de bouton "reset" ni de zone de résultat au départ. Pourtant, lorqu'on entre une valeur et qu'on clique sur le bouton d'envoi, ces deux éléments apparaissent. C'est parce qu'on utilise la propriété CSS visibility (à ne pas confondre avec la propriété display) via les deux styles visible et invisible que nous avons inventés pour l'occasion. Nous vous laissons chercher où ces styles sont définis et où est définie la fonction appelée par le clic de souris dans le formulaire...

Nous allons maintenant redécorer tous les formulaires d'un coup. Voici le texte du bouton bleu nommé OUI ! (le bouton NON remet les formulaires comme avant) : 


    var lesform = document.getElementsByTagName("form") ;

    for (idf=0;idf<lesform.length;idf++)  {
        lesform[idf].setAttribute("class","cadre tarose") ;
    } ; // fin pour idh

OUI !

formulaire

NON

Passons maintenant à la création et à la suppression d'objet (là, il faut cliquer) :

ajout      suppression

Explications : avec la fonction appendChild() il est possible d'ajouter un élément, mais on peut aussi utiliser document.body.insertBefore() ; on crée un élément par document.createElement() et le contenu-texte de l'élement est accessible et modifiable via la propriété textContent. L'endroit où insérer l'élément est défini par rapport à un autre élément ou par rapport à document.body qui existe toujours.

Voici donc à peu de choses près le texte exécuté sous le mot "ajout" : 


    nouveaup = document.createElement("p") ;
    nouveaup.textContent = " COUCOU, ME VOICI, ME VOILA ! ";
    nouveaup.setAttribute("id","np") ;
    document.getElementById("lesp").insertBefore(nouveaup,document.getElementById("explik"));

et le texte sous le mot "suppression" : 

    n1  = document.getElementById("np") ;
    n2  = n1.parentNode ;
    n2.removeChild(n1) ;
    delete nouveaup ;

Arrivé(e) ici, vous devriez avoir compris l'essentiel de la gestion dynamique d'une page avec Javascript. Le modèle objet sous-jacent est nommé DOM. Voici de quoi alimenter vos lectures nocturnes :

event pour savoir quels évènements (souris, clavier...) sont utilisables ;
node donne la liste des fonctions liées aux éléments (ou "noeuds") ;
document   la page web en tant que document au sens de DOM et Javascript.

Si vous pensez avoir compris comment JavaScript interagit dynamiquement avec l'arbre des éléments du document, ouvrez la page tutjsajouts.htm avec Javascript activé puis avec Javascript désactivé (ou avec une copie locale, sans le fichier de script tutjsajouts.js) et comparez les affichages. N'oubliez pas d'avoir aussi le fichier de styles tutjsajouts.css.

Un dernier cadeau : après avoir affiché tutjdyn.htm regardez le code source et constatez qu'il n'y a rien entre <body> et </body>. Et pourtant la page affiche bien un beau texte. Intéressant, non ?

---- Fin de document