Introduction to JavaScript

Chapitre 1




Qu'est-ce que JavaScript?

JavaScript est un nouveau langage script destiné à être utilisé depuis des pages Web HTML et qui leurs offre de nombreuses possibilités d'extensions ainsi que des contrôles intéressants. Vous pourrez par exemple réagir aisément à des évènements utilisateurs tels qu'un changement de focalisation ou un clic de souris. De plus, JavaScript permet des traitements qui n'étaient jusqu'à présent possibles qu'avec CGI. Grâce à son aide vous pouvez désormais créer des pages vraiment élaborées. De nombreux exemples de programmes JavaScript sont disponibles sur Internet. Faites attention aux pages utilisant JavaScript lors de vos explorations du CyberEspace. Vous trouverez aussi pas mal de liens sur le site de Gamelan (section JavaScript). Ainsi que la documentation distribuée par Netscape à http://home.netscape.com.

Quelle est la différence entre Java et JavaScript?

Malgré une ressemblance flagrante entre leur deux noms, JavaScript n'a rien à voir avec Java. Ce sont deux méthodes différentes de programmation pour Internet; Java est un langage de programmation à part entière avec lequel on peut créer de véritables programmes, alors que JavaScript est, comme son nom l'indique, un langage script. Mais dans la plupart des cas, vous désirez uniquement quelques effets sans les tracas d'une programmation complexe. JavaScript est non seulement simple à comprendre, mais aussi à utiliser. Les concepteurs ne se soucieront d'ailleurs que très peu de la partie programmation. Vous pouvez dire que JavaScript est plus une extension du langage HTML plutôt qu'un langage informatique à part entière. Bien entendu, ceci n'est pas la version 'officielle', mais je pense que, maintenant, on comprend mieux la différence entre Java et JavaScript. Vous trouverez d'autres informations concernant Java et JavaScript sur le site de Gamelan.

Pour plus d'infos sur ce sujet, veuillez lire l'introduction fournie par Netscape.





Comment les scripts JavaScript peuvent-ils s'exécuter?

Le premier navigateur supportant JavaScript était Netscape Navigator 2.0. Et bien entendu les versions plus récentes en font autant. Vous savez peut être que Java ne fonctionne pas sur toutes les versions de Netscape Navigator 2.0 (ou ultérieur). Rassurez-vous ceci n'est guère valable pour JavaScript - bien qu'il y ait certains problèmes en fonction des différents versions. Par exemple, la version MAC semble connaître de nombreux bugs. Dans un proche future, d'autres navigateurs, tels que l'Internet Explorer de Microsoft, devraient reconnaître JavaScript. L'utilisation de JavaScript va bientôt étendre largement les possibilités des navigateurs, il vous serait donc profitable de vous initier dès maintenant à cette nouvelle technique. Vous réalisez déjà qu'il est très simple d'écrire des scripts. Tout ce dont vous avez besoin, ce sont quelques techniques de base et quelque peu de travail sur les problèmes que vous rencontrerez éventuellement.
Evidemment, il est nécessaires de comprendre les bases de HTML avant de lire ce didacticiel. Naturellement, vous trouverez de très bons documents en ligne sur HTML. Pour les dénicher, je recommande une recherche à partir de
Yahoo en indiquant 'html' comme mot-clé (ces documents en ligne sont plus souvent mis à jour que les livres, Internet évolue si vite de nos jours...).




Voici maintenant quelques petits scripts qui vous enseigneront la manière de les implémenter dans des documents HTML ainsi que les nouvelles possibilités offertes par ce nouveau langage script. Je commencerai par un script simple inscrivant uniquement du texte dans un document HTML.

<html>
<head>
Mon premier script en JavaScript!
</head>
<body>
<br>
Ceci est un document HTML classique.
<br>
  <script language="JavaScript">
    document.write("Ceci provient de JavaScript!")
  </script>
<br>
Retour au HTML.
</body>
</html>

Si vous utilisez en ce moment un navigateur compatible JavaScript, vous aurez la possibilité de voir ce script fonctionner. Dans le cas contraire le résultat sera quelque peu étrange...

Ceci est un document HTML classique.

Retour au HTML.

Je dois admettre que ce script n'est guère utile. Vous pouvez écrire ceci en HTML plus rapidement, mais je tenais à vous faire remarquer l'utilisation des balises <script> que vous pouvez placer d'ailleurs n'importe où dans votre document.




Je ne veux pas vous ennuyer plus longtemps avec des scripts aussi stupides qu'inutiles, donc nous allons passer à l'étude des fonctions. Elles ne sont pas plus difficiles à comprendre mais, croyez-moi, on les utilise beaucoup plus! On les déclare entre les balises <head> de votre page HTML. Celles-ci sont appelées à partir d'évènements utilisateurs. Il semble donc raisonnable de les conserver entre les balises <head>, pour être chargées avant qu'un utilisateur puisse faire quelque chose nécessitant leur appel. Les scripts doivent être placé en commentaire, à l'aide des balises <!-- -->, pour que les bons vieux navigateurs n'affichent pas le script lui-même.

<html>
<head>
  <script language="JavaScript">
     function pushbutton() {
       alert("Salut!");
  }
 </script>
</head>
<body>
<form>
  <input type="button" name="Bouton1" value="Clickez moi" onclick="pushbutton()">
  </form>
</body>
</html>


Vous voulez tester celui-ci immédiatement et votre navigateur est compatible JavaScript, alors je vous en prie pressez le bouton ci-dessous.

Ce script crée un bouton qui, lors d'un click, fera apparaître un fenêtre disant 'Salut!'. N'est-ce pas génial? Mais comment fonctionne-t-il? Premièrement, la fonction est chargée puis demeure en mémoire, ensuite on crée un bouton à l'aide de la balise standard <form> (HTML). Ce qui est relativement récent se situe dans la balise <input> où vous apercevez 'onclick'. Ceci indique au navigateur quelle fonction il doit appeler quand le bouton est pressé (seulement, bien entendu, s'il est compatible). La fonction 'pushbutton()',déclarée dans l'entête, est alors exécutée lorsque le bouton est pressé. Il y a une autre chose nouvelle dans ce script: la méthode 'alert'. Celle-ci est prédéclarée par JavaScript (il vous suffira de l'appeler). Elle n'est pas la seule dans son cas, mais il y en a beaucoup d'autres. Je vous en montrerai quelques une, mais vous trouverez une description complète sur le site de Netscape. Je pense que dans un future proche cette liste devrait grandement s'allonger. Mais il y a déjà pas mal de trucs cools que l'on peut réaliser avec la liste actuelle.
(Je ne pense pas que la méthode alert soit destinée à cet usage mais on ne fait qu'appendre. Et cette voie est très simple à comprendre. J'espère que vous me pardonnerez...)




Actuellement, nous avons bien avancé. En fait, de nombreuses possiblitées vous sont offertes en ajoutant simplement vos fonctions dans ces scripts. Je vais vous montrer comment récupérer ce qu'un utilisateur a inséré dans un formulaire.

<html>
<head>
<script language="JavaScript">
<!--  masquer les script aux vieux navigateurs
  function getname(str) {
    alert("Salut , "+ str+"!");
  }
// fin de la section masquée -->
</script>
</head>
<body>
Entrez votre nom SVP:
<form>
  <input type="text" name="nom" onBlur="getname(this.value)" value="">
</form>
</body>
</html>


Maintenant vous pouvez tester ce script.

Entrez votre nom SVP:

Nous avons encore implémenté de nouveaux éléments dans ce script. Tout d'abord, vous avez sûrement remarqué le commentaire dans le script. Ceci nous permet de le cacher aux vieux navigateurs qui ne peuvent les exécuter. Vous devez absolument garder cet ordre! Le début du commentaire doit se suivre la première balise <script>. Dans ce document HTML est présent un contrôle de formulaire dans lequel un utilisateur peut entrer son nom. Le paramètre 'onBlur' dans la balise <input> indique quelle fonction doit être appelée quand quelque chose est entrée dans le formulaire. La fonction 'getname(str)' sera appelée quand vous 'quitterez' ce contrôle ou après validation par la touche 'entrée'. La fonction recevra la chaîne tapée à travers la commande 'getname(this.value)'. 'this.value' représente la chaîne que vous avez introduite dans ce contrôle.




Je pense que le truc à venir est pas mal. Nous allons implémenter une fonction de date dans notre script. Ainsi, si vous créez une page HTML, vous pourrez faire apparaître dans le document la date de sa dernière modification. Vous n'aurez plus à écrire directement la date dans la document, mais simplement un petit programme script. Quand vous opérerez des changements dans le future la date se mettra à jour automatiquement.

<html>
<body>
Ceci est une simple page HTML.
<br>
Dernière modif:
  <script language="JavaScript">
  <!--  masquer les script aux vieux navigateurs
    document.write(document.lastModified)
  // fin de la section masquée -->
  </script>
</body>
</html>

Pour le moment cette propriétés ne semble pas fonctionner sur toute les machines. certains serveurs indique seulement la date 1/1/1970. Cela semble venir d'un problème avec cette fonction [NDQ: un Bug?]. Nous devons attendre la prochaine mise à jour et espérer que ceci sera corrigé sur toute les machines. Mais vous pouvez essayer sur la votre, ça semble marcher sur quelques unes [NDQ: Mystère].

Comme je l'ai déjà dit, les choses vont si vite de nos jours. Il ne serait pas surprenant si la semaine prochaine un changement majeur était apporté à JavaScript! Vous devez toujours chercher d'éventuels changements, ce langage est relativement jeune. SVP comprenez que certaines choses dites précédemment ont pu changer depuis. Même si je pense que les bases principales demeureront identiques.


Sommaire - Chapitre 2 - Chapitre 3 - Chapitre 4 - Chapitre 5 - Chapitre 6 - Chapitre 7

Last changed: 25.février'97 - © 1996 by Stefan Koch - 1997 Traduction de Qaghan