Tout pour le Javascript aux 1001 Astuces Nam@ni

1001 Astuces Nam@ni
http://www.namani.net
javascript -1

JavaScript est un langage simple à mettre en ?uvre , qui permet d'agrémenter la présentation et l'interactivité des pages web.

Il faut savoir qu'il est totalement différent de Java ( bien que tous les deux soient utilisés pour créer des pages web évoluées, et qu'ils reprennent le terme Java ), nous avons là deux outils informatiques bien différents.

Ajoutez à cela qu'il n'est pas à proprement parler un langage orienté objet tel que Java, C⁺⁺, ou ActivX, mais plutôt un langage basé sur les objets.

JavaScript a le grand avantage d'être tout simplement une extension du code Html des pages Web. Les scripts, qui s'ajoutent aux balises Html, peuvent en quelque sorte être comparés aux macros d'un traitement de texte.

Ces scripts vont être gérés et exécutés par le navigateur lui-même sans devoir faire appel aux ressources du serveur. Ces instructions seront donc traitées en direct et surtout sans retard par le navigateur. Aucun besoin de se fatiguer à le compiler, les codes Javascript ne ralentissent pas le chargement de la page alors qu'une applet Java peut demander de la patience.

Surtout, il est facile à apprendre.

Néanmoins, une bonne connaissance des balises ou tags Html est indispensable. Ainsi, si vous utilisez uniquement un éditeur Html wysiwyg vous risquez de devoir retourner à vos chères études.

Une page Html n'est que du texte. Le code Javascript n'est, lui aussi, que du texte. Quoi de plus simple qu'un éditeur ( de ...texte ) comme le Block-note de Windows pour inclure votre Javascript dans votre page Html.

Un éditeur Html de la première génération ( un ancien éditeur qui fait encore apparaître les balises ), comme HTML Notepad, fait également bien l'affaire.

De plus en plus d'éditeurs Html wysiwyg proposent une fenêtre Javascript.
Attention ! Si certains semblent bien faits, comme WebExpert 2 (en français),
avec d'autres il arrive que le code Javascript introduit soit modifié par l'éditeur.

Je ne vais aborder, ici, que quelques points simples. Il ne s'agit pas d'un cours JavaScript ! Vous verrez où placer JavaScript dans votre page web, et comment JavaScript "parle" à votre navigateur.

Pour illustrer ces points nous allons écrire un programme simple qui affichera un message.

Où placer JavaScript dans votre page ?

La réponse est simple : où vous voulez..!
Rien n'interdit de mettre plusieurs scripts dans une même page Html.

Ceci étant dit, la majorité des programmeurs le place près du sommet de la page, en général sous le tag <body> ou dans la section <head></head> , pour faciliter la lisibilité et le debugging. Le fait de le placer dans la section <head></head> est plus sûr, puisqu'ainsi tout le code sera chargé avant la page proprement dite.

Dans la logique du langage Html il faut signaler au navigateur, par une balise, que ce qui suit est un script et que c'est du Javascript (et non du VBScript).

<SCRIPT LANGUAGE="Javascript">.

De même, il faudra informer le navigateur de la fin du script.

</SCRIPT>.

Vous devez, donc, le placer entre les tags HTML :

<script language="JavaScript">
<!--
 
(placez votre code  ici)
 
// --></script>

Les marqueurs de commentaires (  ) rendent JavaScript invisible pour les vieux navigateurs qui ne reconnaissent pas ce langage.

NB : Ne confondez pas les commentaires Javascript et les commentaires Html, pour rappel (  ).

Comment agit JavaScript pour que le navigateur fasse des choses ?

JavaScript parle à votre navigateur par des objets et des méthodes. Un objet peut être une fenêtre, une boite de dialogue ou une image : des composants de votre navigateur et des pages web qu'il affiche. Une méthode est quelque chose qu'un objet peut faire. Par exemple, une fenêtre peut être ouverte ou fermée.

Voici une instruction JavaScript ( une méthode de l'objet window )
soit l'instruction alert().

 
alert("votre texte");

Cette instruction affiche un message (dans le cas présent votre texte entre les guillemets) dans une boite de dialogue pourvue d'un bouton OK. Pour continuer dans la page, le lecteur devra cliquer ce bouton.

<HTML>
<HEAD>
<TITLE>Page avec Javascript</TITLE>
</HEAD>
<BODY>
Blah-blah en Html
<SCRIPT LANGUAGE="Javascript">

</SCRIPT>
Suite blah-blah en Html
</BODY>
</HTML>

Html normal
...
...
...
...
...
Début du script
Masquer le script
Script
Fin de masquer
Fin du script
Html normal
...
...

Et voici le résultat :

Voyez ? C'est simple ! Vous appelez la méthode alert de l'objet fenêtre, pour afficher un message. La méthode prend un argument : le texte à afficher dans une boite. On ne peut faire plus simple !

Remarques

N'oubliez pas les point-virgules ( ; ).
Il vous faudra écrire alert() et non pas Alert().
Pour l'écriture des instructions Javascript, on utilisera l'alphabet ASCII classique (à 128 caractères) comme en Html.
Les caractères accentués comme é ou à ne peuvent être employés que dans les chaînes de caractères c.-à-d. dans votre texte de notre exemple.
Les guillemets " et l'apostrophe ' font partie intégrante du langage Javascript. On peut utiliser l'une ou l'autre forme à condition de ne pas les mélanger. Ainsi alert("...') donnera un message d'erreur. Si vous souhaitez utiliser des guillemets dans vos chaînes de caractères, tapez \" ou \' pour les différencier vis à vis du compilateur.

En plus

Il vous arrivera sûrement qu'après une modification (correction?) de votre script, aucun changement ne soit visible à l'écran après avoir fait "Reload" ou "Actualiser".

Vérifier bien si vous avez enregistré vos modifications (cela arrive même aux meilleurs).
Il faut parfois recharger plus profondément votre page :
Cliquez dans la zone de localisation du navigateur et frappez la touche Entrée, ou faites Maj + Reload (sous Netscape).

Lorsque vous débutez, évitez de mettre du Javascript dans des tableaux. Javasript dans des tableaux ce n'est pas le grand amour (..bug?).
On recommande dans la littérature de ne pas placer de tag <SCRIPT> dans des balises <TD> mais plutôt de commencer le tag <SCRIPT> avant le tag <TD> et d'écrire le tag <TD> jusqu'au tag </TD> par une écriture document.write. Et même, pour être sûr de son coup, d'écrire tout le tableau avec le document.write. Ce qui donnerait :

<SCRIPT LANGUAGE="Javascript">

</SCRIPT>

Allez un petit peu plus loin, en lisant les concepts de programmation, sur la page suivante.