Ensuite : des exemples simples de JavaScript

L'utilisation de JavaScript dans les pages HTML nécessite un navigateur tel que Netscape 2.0 ou plus récent ; MS Internet Explorer supporte aussi le JavaScript  à partir de sa version 3.0 .

Tests JavaScript

Avant tout,donc, un rapide et simple petit test pour contrôler si votre navigateur supporte JavaScript ;

Il existe en fait plusieurs versions de JavaScripts (1.0, 1.1 et 1.2)   ; mais la plupart des commandes employées ici sont compatibles avec la version standard actuelle 1.1 (spécification ECMA-262), elle même compatible avec les navigateurs cités précédemment.

On peut mieux faire, puisqu'une seule commande complexe de JavaScript insérée dans une page HTML permet de savoir quel type et quelle version de navigateur vous utilisez.

L'apprentissage du JavaScript

Les programmes JavaScript sont  en langage interprété (non compilé) ; ils s'écrivent à l'intérieur des pages HTML à l'aide d' un simple éditeur de texte (genre "Notepad").
On peut ainsi, quand on rencontre sur le Web un script intéressant, copier ce script en affichant la "source" de la page HTML à l'aide d'une commande du navigateur.
On peut donc apprendre JavaScript tout seul, en analysant les nombreux exemples rencontrés dans les pages Web.

Essayez donc d'afficher la source de la page que vous allez ouvrir en cliquant sur l'icône ci-dessous :

Savez-vous comment voir maintenant la source de la présente page ?
Si oui, vous êtes prêt pour le copillage-collage mondial !

A propos du Copyright et de la protection des données, consulter le site de référence : la Commission Nationale de l'Informatique et des Libertés. Et si vous êtes maintenant soucieux de protéger vos créations, cliquer sur l'image suivante pour ouvrir un exemple de protection grâce à JavaScript :

Boutons et boîtes d'alerte

Très faciles à définir en JavaScript, les boutons et boîtes d'alerte facilitent la navigation, apportent plus de convivialité aux pages et permettent de faire passer rapidement de brèves informations.
Ci-dessous le plus simple des boutons d'alerte :

Cliquez encore sur l'icône ci-dessous pour découvrir un autre exemple de gestion des boîtes d'alerte.

Sélecteur d'arrière-plan

Ci-dessous le résultat d'un petit script qui autorise le visiteur   à choisir la couleur du fond de page.
Le même type de script peut être utilisé pour changer la couleur du texte ou des hyperliens
(évidemment pour que cela fonctionne, il ne faut pas avoir mis une image en fond de page).

Date de la dernière modification de cette page

La ligne  rouge "Dernière modification : ... "   ci-dessous est automatiquement générée par un petit script à la dernière mise à   jour de cette page ; cette méthode est souvent utilisée par les webmestres qui veulent tenir les visiteurs informés.

Horloge en JavaScript

JavaScript permet de mettre une horloge sur une page Web ; l'horloge peut être contrôlée par le visiteur.

Démonstration en cliquant ici sur ce lien.

Une autre horloge

D'abord on va traduire tout cela en français, ce qui nécessite un petit traitement supplémentaire ;
et puis, on va utiliser des boutons de commande.

Ouverture d'une nouvelle fenêtre du navigateur

Ouvrir une nouvelle fenêtre de votre navigateur peut présenter plusieurs intérêts :

• donner des informations complémentaires ou temporaires ; on évite ainsi de modifier la page principale :
  les bannières publicitaires servent ainsi souvent de liens-boutons pour ouvrir une page d'annonce ;

• permet au visiteur de voir la source du document quand celui-ci est encadré dans des frames (déjà vu précédemment) ;

• permet au visiteur de consulter rapidement plusieurs liens à partir d'une même page restant toujours ouverte.

  Il existe plusieurs techniques pour ouvrir une page HTML dans une nouvelle fenêtre :

• en  cliquant sur le lien avec le bouton de droite de la souris, puis en choisissant avec le bouton de gauche la rubrique "Ouvrir dans une nouvelle fenêtre" ;
• en utilisant dans la balise HTML  <a href>, qui définit un lien,  le paramètre   target="_blank" ,   comme dans le lien suivant :  www.faidherbe.org  ;
• enfin, en utilisant JavaScript ; c'est plus souple puisque cela permet de choisir les dimensions de la nouvelle fenêtre. L'exemple précédent (l'horloge) peut être alors ouvert sans trop perdre de vue le présent texte.
  Cliquez donc sur l'icône pour ouvrir une "pop-window" :

(En fait, ceci ne devrait fonctionner qu'avec IE > 3.0)

Messages sur la barre inférieure des statuts

Bien souvent, sur les pages Web, apparaissent des messages sur la barre inférieure des statuts de la fenêtre (c'est beaucoup plus discret qu'une boîte d'alerte) ; faites l'essai en cliquant ici .

Le visiteur doit être attentif au message de la barre des statuts ; la barre des statuts peut être entièrement gérée par JavaScript. Par exemple, quand le curseur de la souris passe sur une zone de la page, le message de la barre des statuts peut changer ; faites l'essai en cliquant ici .

Les Roll Overs  (IE > 3.0)

JavaScript gère très bien les événements liés à la souris ; le "roll over"" (difficilement traduisible en Français) ressemble un peu au dernier exemple présenté. Quand vous faites passer le curseur de la souris au-dessus d'une zone, une image change ou apparaît. Cet effet, très utilisé sur le Web, donne de la dynamique et de l'interactivité à une page HTML.

Le premier exemple est très simple :

Le deuxième exemple est un peu plus travaillé :

Accès aux Moteurs de Recherche

Une autre application classique de JavaScript est de proposer sur une page HTML un accès à une recherche à l'aide d'un moteur défini. On fait ainsi économiser quelques clics au visiteur désireux d'effectuer une recherche.

Le premier exemple, bien que très simple dans sa forme, n'est finalement pas si facile à réaliser (voyez le code source).

Le deuxième exemple, beaucoup plus évolué, permet de rechercher le même terme dans plusieurs moteurs en même temps.
Cet exemple a été emprunté d'un site spécialiste de ce type de page : www.personalcompass.com
(nécessite I.E. > 3.02 )

Un générateur aléatoire de dictons

JavaScript permettant facilement de définir des variables aléatoires, on peut terminer avec cette petite page gadget amusante.