Le défaut du langage HTML, c'est qu'une fois chargé sur l'ordinateur du visiteur, le code ne peut plus être modifié. Javascript est la solution : il va vous permettre de traiter des événements de la page (ouverture, fermeture...) et ceux provoqués par l'internaute (clics, saisies, envoi de formulaires...). Le Javascript va donc dynamiser votre document HTML, le rendre intéractif.

Remarques importantes :

le javascript est un complément au langage html. Il ne le remplace pas.
le javascript peut être désactivé par les internautes. C'est un point très important à souligner car si internaute l'a désactivé, le code ne sera pas exécuté. Il est donc déconseillé de l'utiliser pour des éléments importants de vos pages (comme l'affichage des menus par exemple, sans lesquels les visiteurs ne peuvent pas naviguer librement sur le site).
autre inconvénient de ce langage, certaines fonctions ne sont pas les mêmes pour tous les navigateurs (Internet Explorer, Netscape...). Les différences seront étudiées plus loin mais retenez bien qu'il y a des incompatibilités qui risquent de créer des erreurs dans vos scripts (nous verrons également comment gérer ces erreurs).

Insertion d'un script dans une page html

Pour insérer un script Javascript dans vos pages, la première solution est de créer un fichier spécifique portant l'extension .js , qui sera appelé par la page html. Cette solution est recommandée car elle est avantageuse en plusieurs points.

gain de place sur le serveur : le code étant dans une page spécifique, il peut être appelé par plusieurs pages html, ce qui évite donc de répéter le code dans chacune de vos pages.
les modifications sont simplifiées. Si vous désirez modifier le script, il suffira d'éditer le fichier .js (si le code était répété dans chaque page, il faudrait toutes les modifier ! ).
les pages s'affichent plus rapidement. Lorsqu'un internaute visite un site, certains fichiers sont mis en cache (conservés en mémoire dans l'ordinateur), ce qui évite d'avoir à les télécharger à chaque fois. Ainsi si l'internaute visite plusieurs pages de votre site, la page contenant votre code javascript ne sera chargée qu'une seule fois.

<html>

<head> // le fichier peut-être appelé dans l'en-tête
<SCRIPT language="javascript" src="code_javascript_1.js"></SCRIPT>
</head>

<body> // ou dans le corps de la page
<SCRIPT language="javascript" src="code_javascript_2.js"></SCRIPT>[...]
</body>

</html>

La seconde solution peut cependant être utilisée dans certains cas, par exemple lorsqu'un script de quelques lignes ne concerne qu'une seule et unique page. Dans ce cas, le code sera inclu directement dans votre page html en utilisant la balise script (paramètre langage="javascript").

<html>

<head> // le script peut-être inséré dans l'en-tête
<SCRIPT language="javascript">
  <!-- Votre script 1 //-->
</SCRIPT>
</head>

<body> // ou dans le corps de la page
<SCRIPT language="javascript">
  <!-- Votre script 2 //-->
</SCRIPT>
</body>

</html>

Remarque : les balises  cachent votre script pour les navigateurs trop anciens qui ne comprennent pas le langage Javascript. Ces navigateurs ne devraient plus exister, mais il est conseillé de les insérer en prévention.

Syntaxe du Javascript

Le code : il sera nécessaire d'étudier les bases de ce langage : les variables et constantes, opérateurs, fonctions, instructions, évènements... vous retrouverez toutes ces fiches dans le menu ci-contre, sous « perfectionnement Javascript ». Une fois les bases acquises (ou au moins comprises), la meilleure façon de se former sera d'étudier des scripts complets, mais chaque chose en son temps...

Les commentaires : comme dans la plupart des langages, il est possible d'insérer des commentaires dans le code javascript. Les commentaires ne sont pas nécessaires mais aident à rendre le code plus lisible (pour vous ou pour les autres personnes qui seraient éventuellement amenées à travailler sur le code). Là encore, deux solutions possibles :

<SCRIPT language="javascript">
<!-- début de votre script
  // les commentaires sur une ligne sont
  // précédées de ces caractères ( // )
Suite de votre script
  /* les commentaires sur plusieurs lignes
  sont entourées comme dans cet exemple */
fin de votre script
//-->
</SCRIPT>

Qu'est-ce que PHP : précédent | suivant : Optimiser ses fichiers