Page mise à jour le 03/06/2008 (Tous droits réservés - TECHNETEA)
Un langage de programmation JavaScript
Développements Electroniques
Bien que fort simple à apprendre, JavaScript est un véritable langage informatique, dont un des attraits est de pouvoir s'intégrer dans une page HTML. Son deuxième attrait et non le moindre, est qu'un simple éditeur de texte comme le bloc-notes de Windows® suffit pour écrire des pages de programme.
La base de tout langage informatique est avant tout structurelle, et pour JavaScript la base de la structure s'appelle : une fonction.
- une fonction est introduite par le mot clef "function" suivi du nom qui lui a été choisi, puis d'éventuels paramètres mis entre parenthèses. (dans l'exemple ci-dessous, le contenu des parenthèses est vide)
- le corps de la fonction est placé entre deux accolades (ouvrante et fermante) qui délimitent la fonction.
- chaque instruction est terminée par un caractère point-virgule. A noter que ce caractère de fin de ligne est optionnel, mais il est fortement conseillé de prendre l'habitude de le conserver. En effet prendre des libertés en JavaScript conduirait fatalement un utilisateur également coutumier d'un autre langage informatique où le point-virgule est obligatoire, à fréquemment l'oublier par la suite.
function NomDeLaFonction()
{
instruction1;
instruction2;
instruction3;
}
Une fonction est destinée à être appelée à partir d'une autre fonction. Dans l'exemple qui suit, la fonction alert() (fonction prédéfinie de JavaScript) est appelée avec une ligne de texte comme paramètre unique. Un texte se définit en l'entourant de guillemets ou d'apostrophes. ("texte" ou 'texte')
function NomDeMaFonction()
{
alert("Le monde de JavaScript");
}
Exercice 1 : Intégration de JavaScript dans une page HTML
Recopiez l'exemple ci-dessous dans le fichier "exemple HTML.html", et lancez le fichier pour qu'il soit affiché par le browser.
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<!--*****************************************************************************-->
<!--***** HEAD -->
<!--*****************************************************************************-->
<head>
<title> Ma page de test </title>
<script type="text/javascript">
function MaFonction()
{
alert("Est-ce que vous commencez à trouver ça intéressant ?");
}
</script>
</head>
<!--*****************************************************************************-->
<!--***** BODY -->
<!--*****************************************************************************-->
<body>
<h1>Quelle joie de découvrir JavaScript !</h1>
<div style="position:absolute; top:100px; left:50px" onclick="MaFonction()" >Cliquez ici ...</div>
</body>
</html>
Voyons ce qui a été ajouté à ce que nous connaissons déjà :
- comme déjà dit, la lisibilité est un point primordial de l'écriture d'un programme informatique, et c'est dans ce but que des lignes de commentaire ont été ajoutées pour bien séparer les chapitres head et body.
- dans le chapitre head, a été ajouté un chapitre script dont l'attribut type sert à informer le browser qu'il s'agit là de JavaScript. Toutes les fonctions JavaScript doivent être placées dans ce chapitre, et il en est donc ainsi de notre première fonction MaFonction().
- la partie body est la même que dans le dernier exemple de la page traitant du HTML, mais dans la balise <div> a été ajouté un attribut onclick. L'attribut onclick="MaFonction()" informe le browser, que lorsque l'utilisateur fera un clic de souris sur le contenue de la balise <div>, alors devra être lancée la fonction MaFonction().
Ainsi avec cet exercice d'intégration de JavaScript dans un document HTML, un élément événementiel (le clic de la souris) provoque l'appel d'une fonction JavaScript. L'action de la fonction prédéfinie alert() est évidente, elle permet au browser d'afficher un texte à l'attention de l'utilisateur.
Exercice 2 : Manipulation des paramètres d'une fonction
Imaginons que nous voulions placer une deuxième balise <div> dont le texte à afficher en cliquant dessus serait différent de la première. Une première approche serait de créer deux fonctions différentes dans la partie script, et les appels correspondant dans le chapitre body du HTML.
dans la partie <script> ...
function MaFonction1()
{
alert("Vous avez cliqué sur le DIV 1");
}
function MaFonction2()
{
alert("Vous avez cliqué sur le DIV 2");
}
dans la partie <body> ...
<div onclick="MaFonction1()"> Cliquez sur le DIV 1 </div>
<div onclick="MaFonction2()"> Cliquez sur le DIV 2 </div>
Une approche plus informatique (et surtout plus formatrice) est de passer des paramètres à une fonction, comme dans l'exemple ci-dessous.
dans la partie <script> ...
function MaFonction(MaDonnée)
{
alert("Vous avez cliqué sur le " + MaDonnée);
}
dans la partie <body> ...
<div onclick="MaFonction('DIV 1')"> Cliquez sur le DIV 1 </div>
<div onclick="MaFonction('DIV 2')"> Cliquez sur le DIV 2 </div>
L'événement onclick des deux balises <div> appelle la même fonction mais avec des paramètres différents placés entre parenthèses. A noter que cette fois les textes 'DIV 1' et 'DIV 2' sont encadrés par des apostrophes et non par des guillemets comme habituellement, sinon le browser s'emmêlerait dans cette succession incompréhensible de guillemets de l'attribut et du paramètre. Pour la définition d'un texte, guillemets et apostrophes sont interchangeables à condition de refermer avec le même caractère ce qui a été ouvert au préalable.
Le texte affiché par la fonction alert() est cette fois l'addition du texte "Vous avez cliqué sur le " et de la variable nommée MaDonnée représentant symboliquement la donnée passée en paramètre à la fonction MaFonction() ; le signe + indique que les deux éléments doivent être reliés pour former un texte unique.
Recopiez l'exemple ci-dessous dans le fichier "exemple HTML.html", et lancez le fichier.
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<!--*****************************************************************************-->
<!--***** HEAD -->
<!--*****************************************************************************-->
<head>
<title> Ma page de test </title>
<script type="text/javascript">
function Afficher(Mot1, Mot2)
{
alert("En anglais, " + Mot1 + " se dit " + Mot2);
}
</script>
</head>
<!--*****************************************************************************-->
<!--***** BODY -->
<!--*****************************************************************************-->
<body>
<h1>Qui est qui ?</h1>
<div style="position:absolute; top:100px; left:50px" onclick="Afficher('Chat', 'Cat')">le CHAT</div>
<div style="position:absolute; top:150px; left:50px" onclick="Afficher('Chien','Dog')">le CHIEN</div>
</body>
</html>
Cette fois 2 paramètres séparés par des virgules sont transmis à la fonction Afficher() . Pour les noms des fonctions et des paramètres, il est toujours préférable de choisir des noms explicites.
Noter que l'attribut top de la deuxième balise <div> a été modifié sinon les deux balises s'afficheraient l'une sur l'autre.
Exercice 3 : Amélioration de l'affichage
Appelée DHTML (Dynamic HTML) à son apparition puis DOM (Document Object Model) dans sa version standardisée, la technique qui est présentée ici permet de modifier l'apparence d'une page HTML tout au long de son affichage, en rendant tout élément HTML accessible et modifiable à partir du langage de Script.
DOM est universel et applicable à tous les browser, mais l'approche présentée ici est celle de Microsoft® car plus immédiate à comprendre.
dans la partie <script> ...
id_Afficheur_Toto.innerText = "Mon message";
id_Afficheur_Titi.innerText = "Un autre message";
dans la partie <body> ...
<div id="id_Afficheur_Toto" ></div>
<div id="id_Afficheur_Titi" ></div>
Pour que JavaScript puisse identifier un élément HTML, il faut donner un nom unique à cet élément. Pour cela un attribut id (identifiant) suivi du nom choisi est ajouté dans la balise visée. Le nom peut être quelconque mais il est conseillé de le faire commencer par id_ de manière à éviter les confusions.
Un élément HTML tel que <div> contient une propriété innerText (défini par DOM) qui représente la donnée affichée ; JavaScript accède à cette donnée en spécifiant le nom de l'objet visé et la propriété par une syntaxe Objet.Propriété
Dans l'exemple donné ci-dessus, la première ligne de Script accède à la première balise <div>, et la seconde ligne à la deuxième balise.
Recopiez l'exemple ci-dessous dans le fichier "exemple HTML.html", et lancez le fichier. L'affichage réalisé jusqu'à présent par la fonction alert() a été remplacé par un affichage basé sur DHTML.
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<!--*****************************************************************************-->
<!--***** HEAD -->
<!--*****************************************************************************-->
<head>
<title> Ma page de test </title>
<script type="text/javascript">
function Afficher(Mot1, Mot2)
{
id_Afficheur.innerText = "En anglais, " + Mot1 + " se dit " + Mot2;
}
</script>
</head>
<!--*****************************************************************************-->
<!--***** BODY -->
<!--*****************************************************************************-->
<body>
<h1>Qui est qui ?</h1>
<button style="position:absolute; top:100px; left:50px" onclick="Afficher('Chat', 'Cat')">le CHAT</button>
<button style="position:absolute; top:150px; left:50px" onclick="Afficher('Chien','Dog')">le CHIEN</button>
<div id="id_Afficheur" style="position:absolute; top:250px; left:50px; width:100%" ></div>
</body>
</html>
A noter deux ajouts supplémentaires :
- l'utilisation de la balise <button> qui permet de représenter un bouton à l'écran.
- dans la balise <div> destinée à l'affichage, une information "width:100%" a été ajoutée pour signaler au browser que la ligne peut occuper 100% de la largeur de l'écran ; mais une donnée exprimée en pixels aurait également été possible. Supprimez l'information width pour en voir l'effet ...
Exercice 4 : Le calcul numérique
Le principal intérêt de la programmation est de pouvoir calculer une formule mathématique de manière répétitive en entrant des paramètres. Pour cela il nous faut une fenêtre de saisie telle que la balise <input> identifiée par un id et dont l'accès à la donnée se fait très simplement par la propriété value.
dans la partie <script> ...
alert(id_Saisie.value);
dans la partie <body> ...
<input id="id_Saisie" />
Dans l'exemple qui suit, la surface est calculée par la célèbre formule S = PI * R * R et la donnée d'entrée saisie est le diamètre, ce qui permet d'aborder la notion de variable. Une variable est une donnée symbolique permettant de mémoriser une donnée intermédiaire ou un résultat, elle se déclare idéalement au début de la fonction avec le mot clef var.
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<!--*****************************************************************************-->
<!--***** HEAD -->
<!--*****************************************************************************-->
<head>
<title> Ma page de test </title>
<script type="text/javascript">
function Calcule()
{
var Rayon, Surface;
Rayon = id_Saisie.value / 2;
Surface = 3.14 * Rayon * Rayon;
id_Afficheur.innerText = "Le cercle a un rayon de " + Rayon + " et une surface de " + Surface;
}
</script>
</head>
<!--*****************************************************************************-->
<!--***** BODY -->
<!--*****************************************************************************-->
<body>
<h1> Calcul de la surface d'un cercle </h1>
<div style="position:absolute; top:150px; left:10px" > Diamètre </div>
<input id="id_Saisie" style="position:absolute; top:150px; left:100px" />
<button style="position:absolute; top:150px; left:350px" onclick="Calcule()"> RESULTAT ? </button>
<div id="id_Afficheur" style="position:absolute; top:250px; left:50px" > </div>
</body>
</html>
Conclusion :
Notre court voyage parmi les techniques Internet s'achève déjà ; en seulement trois pages ont été présentées des notions qui ne demandent maintenant qu'à s'enrichir des diverses lectures que vous pourrez faire. Ces quelques éléments de base présentés suffisent déjà pour vous permettre de faire rapidement des petits utilitaires de calcul en prenant le dernier exercice comme fichier de base :
- essayez de calculer le volume d'un cylindre (il faudra 2 fenêtres de saisie : id_SaisieDiametre et id_SaisieHauteur).
