JAVASCRIPT > INTRODUCTION

Aujourd'hui supporté par la plupart des navigateurs, le Javascript est un langage orienté objet qui permet d'ajouter de l'interactivité aux pages écrites en HTML (avant de poursuivre, consultez la partie dédiée au langage HTML est lisez soigneusement l'introduction qui en est faite).
Cette partie recense essentiellement un grand nombre d'exemples et ne constitue en aucun cas un cours de langage...

Pour une introduction au langage proprement dit, consultez l'excellent http://rummelplatz.uni-mannheim.de/~skoch/js ou télécharger la version en ligne ici :

Nous allons voir comment inclure du JS dans les pages et quels peuvent être concrètement les domaines d'application des fonctions écrites dans ce langage. Ensuite, nous passerons directement aux exemples dont nous ne détaillerons pas le fonctionnement, mais avec lesquels vous serons fournis les informations nécessaires à leur personnalisation.

NOTE : initialement développé par "Netscape", Javascript n'est pas Java ! Tous deux sont orientés objet mais retenez simplement que le langage développé par "Sun" et le Javascript n'ont rien à voir...

COMMENT INCLURE DU JS DANS SES PAGES ?

Il existe deux manière d'utiliser des fonctions JS : la première consiste à utiliser un fichier annexe (dont l'extension sera .js) auquel on fera référence dans la page. Plus utilisée, la seconde méthode consiste à inclure la/les fonctions entre deux balises.

Utilisation d'un fichier annexe :

<SCRIPT langage="Javascript" SRC="../js_dir/fichier.js">
</SCRIPT>

Inclusion directement dans la page :

<SCRIPT language="JavaScript">
<!--
    ici se place le code du script
//-->
</SCRIPT>

NOTE : les balises  permettent de placer le code en commentaires pour les navigateurs ne supportant pas le JS, le script est alors ignoré (ces balises tendent naturellement à disparaître). Par la suite, ces balises seront absentes pour plus de clarté.

Selon ce que contient votre script, il vous faudra le placer dans certains cas soit dans l'en-tête (HEAD), soit dans le corps du document (BODY) mais sa situation dans la page pourra également être indifférente ; outre les paramètres à personnaliser, nous détaillerons pour chaque exemple où placer le code et, le cas échéant, comment appeler la fonction.
L'appel d'une fonction se fait suivant un évènement prédeterminé par l'auteur (lorsque l'utilisateur clique ici, lorsque la page est totalement chargé etc...). Voici les plus courants ainsi que leur signification :
- onClick (lorsqu'un clic de souris est effectué sur l'objet considéré)
- onMouseOver ( = lorsque le poiteur de la souris passe sur l'objet)
- onMouseout ( = lorsque le poiteur de la souris se retire de l'objet)
- onLoad ( = lorsque le chargement de la page est terminé)
Pour un liste complète détaillant l'utilisation des évènements, consultez la page évènements.

PETITS EXEMPLES

Comme un certain nombre de sujets proposés sur ce site, il y a profusion d'informations sur le Net à propos du JS : tout le monde s'en donne à coeur joie et propose des centaines d'exemples de scripts... Certains s'amusent à les classer par catégories, d'autres réclament 3 ou 4 clics de souris pour accéder à ce que vous souhaitez et la plupart présentent un des scripts sans le moindre intérêt ! Personnelllement, je vais essayer de vous présenter l'essentiel pour que vous puissiez ensuite écrire vous même des petits scripts. Dans la plupart des cas, il vous suffira de faire un copier-coller et de procéder ensuite à une simple personnalisation du script. C'est là que vous entrez dans l'arène : cette page n'est pas là pour tout expliquer, vous allez comprendre un certain nombre de choses très rapidement...

Pour commencer, voyons comment créer un lien en JS et quel intérêt cela représente-t-il :

<BODY>
 <IMG SRC="logo.gif"
      onClick="parent.rony.location.href='dossier/page.html'">
</BODY>

DESCRIPTION : en cliquant sur l'image logo.gif, on accède à la page désirée
rony --> nom de la frame dans laquelle on souhaite charger la page
dossier/page.html --> URL de la page à charger

NOTE : n'ayant qu'une instruction à exécuter, cette action ne nécessite pas l'appel d'une fonction dont la présence ne se justifierait que par le besoin d'exécuter un bloc d'instruction (c'est-à-dire plusieurs instructions d'un seul coup).
Ce petit exemple n'est pas vraiment utile (me direz-vous) puisque le HTML permet ce genre de chose... Mais là où le script est intéressant, c'est que l'utilisation d'une fonction permet par exemple d'appeler différentes pages et de charger chacune dans la frame désirée (voir HTML) :

<HEAD>
  <SCRIPT language="JavaScript">
  function go()
  {
   parent.down.location.href='dossier/down_page.html';
   parent.up.location.href='dossier/up_page.html';
  } 
  </SCRIPT>
</HEAD>
<BODY>
  <IMG SRC="logo.gif" onClick="go()">
</BODY>

DESCRIPTION : en cliquant sur l'image logo.gif, chacune des deux pages est chargée dans "sa frame"

Voyons maintenant un grand classique : le "bouton" RETOUR. Abondamment utilisé sur ce site, ce bouton remplit pratiquement la même fonction que celui de votre navigateur...

<A HREF="javascript:history.go(-1)">RETOUR</A>

DESCRIPTION : avec un peu de malice vous aurez compris que
--> history.go(0) permet de recharger la page courante
--> history.go(1) permet de charger la page "suivante"

NOTE : il est possible de remplacer history.go(-1) par history.back() et history.go(1) par history.forward() (préférez tout de même history.go(num), il marche à tous les coups...

Cette page ne constituant pas un cours sur le JS, nous allons nous arrêter là pour les petits exemples...
L'essentiel était ici de vous présenter brièvement :
- la syntaxe générale du JS
- les différentes manières d'appeler des instructions JS
- l'intérêt que peuvent avoir de toutes petites fonctions

Pour accéder aux exemples : EXEMPLES

[ RETOUR ]