Le Javascript est surtout utilisé en complément des pages HTML. Il permet de manipuler les éléments des pages HTML, un peu comme PHP mais interprété par le navigateur et non pas le serveur.

1- La balise <script>

La manière la plus simple et la plus directe pour intégrer du Javascript au code source d'une page HTML est d'utiliser la balise <script>.

<script language="javascript" type="text/javascript">
<!--
Votre code Javascript ici
//-->
</script>

Jusqu'au HTML 4.0, la balise <script> prend comme attribut language="javascript".

<script language="javascript">
<!--
document.write("Hisse et oh - et un cruchon d'rhum !")
//-->
</script>

Le HTML 4.0 remplace l'attribut language="javascript" par l'attribut type="text/javascript".

<script type="text/javascript">
<!--
document.write("Hisse et oh - et un cruchon d'rhum !")
//-->
</script>

C'est pourquoi on voit souvent les deux, c'est à dire <script language="javascript" type="text/javascript">, mais maintenant seul l'attribut type="text/javascript" est nécessaire.

2- Exécuter du code JavaScript avant l'affichage d'une page HTML

Si du code Javascript est inséré dans la section <head> d'une page HTML, il sera exécuté avant l'affichage de la page HTML.

  1. <html>
  2.  
  3. <head>
  4. <title> Exécuter du code JavaScript avant l'affichage de la page HTML</title>
  5. <script type="text/javascript">
  6. <!--
  7. alert("J'apparais avant l'affichage de la page HTML")
  8. //-->
  9. </script>
  10. </head>
  11.  
  12. <body>
  13. <h1>Titre de la page</h1>
  14. <p>Un texte dans la page.</p>
  15. <script type="text/javascript">
  16. <!--
  17. alert("J'apparais après l'affichage de la page HTML")
  18. //-->
  19. </script>
  20. </body>
  21.  
  22. </html>

Attention, un code Javascript placé dans la section <head> d'une page HTML ne peut pas manipuler des éléments HTML qui ne sont pas encore affichés.

Si dans la section <body> du document se trouve la balise <img> suivante :

  1. <img name="image1" src="img.gif" width="100" height="100" border="0" />

... si le code Javascript suivant est placé dans la section <head> :

  1. alert(document.images["image1"].width);

... une erreur Javascript apparaît, avant l'affichage de la page, signalant que document.images["image1"] n'est pas un objet.

Error: document.images.image1 has no properties
Source File: http://localhost/test.html
Line: 7

Cette erreur vient du fait que lorsque le code Javascript est exécuté, l'image qui porte le nom image1 n'est pas encore affichée. Pour que le code fonctionne correctement, il est nécessaire de l'insérer après la balise <img> qui comporte l'attribut name="image1".

3- Partager du code Javascript entre plusieurs pages HTML

L'attribut src vous permet d'inclure dans une page HTML du code Javascript se trouvant dans un fichier texte externe ayant l'extension .js. Il est dès lors possible de partager du code Javascript entre plusieurs pages HTML en incluant le même fichier .js.

Si le fichier alerte.js contient :

  1. alert(document.images["image1"].width);

Je peux l'inclure dans une page HTML de la manière suivante :

  1. <html>
  2.  
  3. <head>
  4. <title> Inclure du code Javascript qui se trouve dans un fichier externe</title>
  5. </head>
  6.  
  7. <body>
  8. <h1>Titre de la page</h1>
  9. <p>Un texte dans la page.</p>
  10. <p>Une image : <img name="image1" src="img.gif" width="100" height="100" border="0" /></p>
  11. <script language="javascript" type="text/javascript" src="alerte.js"></script>
  12. </body>
  13.  
  14. </html>

4- Déclencher du code Javascript sur le clic d'un lien hypertexte

Il est possible de déclencher du code Javascript sur le clic d'un lien hypertexte en utilisant le pseudo-protocole "javascript:".

<a href="javascript:alert('Hisse et oh - et un cruchon d'rhum !')">Mon lien hypertexte</a>

5- Créer du code HTML avec du Javascript

La fonction document.write() permet d'écrire aussi bien du texte simple que du HTML. Il suffit d'insérer des balises HTML dans la chaîne passée en paramètre de la fonction.

  1. document.write("<p>Hisse et oh - et un cruchon d'rhum !</p>");

Il faut cependant faire attention à l'utilisation des guillemets nécessaires à certains attributs des balises HTML. Ces guillemets devront être précédés du caractère \ (antislash) afin de ne pas provoquer l'interruption de la chaîne à afficher.

<script type="text/javascript">
<!--
document.write("<p><span style=\"color: red;\">Du code HTML généré par du Javascript</span></p>");
//-->
</script>

Ou alors il est également possible de remplacer les guillemets par des apostrophes, mais attention aux apostrophes dans le texte html ;) Si il y en a il faut également les précéder du caractère \ (antislash).

<script type="text/javascript">
<!--
document.write('<p><span style="color: red;">Hisse et oh - et un cruchon d\'rhum !</span></p>');
//-->
</script>

6- Créer du code Javascript avec ... du Javascript !

La fonction eval() vous permet d'exécuter un chaîne de caractères comme s'il s'agissait de la ligne d'un code Javascript.

<script type="text/javascript">
<!--
var gs_code = "document.write(\"<p><span style=\\\"color: red;\\\">Du code HTML qui est créé 
par du Javascript, lui-même généré par du ... Javascript !</span></p>\")";

eval(gs_code);
//-->
</script>

Mais attention, il faut tripler les antislashes à l'intérieur de notre Javascript du Javascript ;-)

7- Et si le Javascript est désactivé ?

Si l'utilisateur a décidé de désactiver l'exécution du Javascript dans les préférences de son navigateur internet, aucune des balises <script> présentes dans le code source de la page HTML ne seront interprétées.

Il est cependant possible de détecter la désactivation du Javascript avec la balise <noscript>.

<noscript>Votre navigateur ne lit pas le Javascript, 
veuillez l'activer pour une utilisation optimale du site</noscript>

8- Conclusion

Et voilà, vous connaissez maintenant quelques bases de javascript.

D'autres tutoriaux suivront bientôt, pour donner des exemples d'utilisation et expliquer comment l'utiliser conjointement avec PHP.

Tutorial écrit par Benjamin