Premiers pas en JavaScript

2.3 Instructions
cuy copyleft
  See You Why?  

 


programme (2.2) | | exercices commentaires, instructions et programme (2.8)

Contenu

 

 

I. Commentaires

voir <<< séquence précédente

 

II. Programme

voir <<< séquence précédente

 

III. Instructions

Rappelons qu'une instruction Javascript est une étape élémentaire d'un programme éventuellement sophistiqué, et qui doit respecter une syntaxe précise.

Toute instruction JVS doit se trouver
* entre la balise ouvrante <script language="javascript"> (ce qui est une vieille version, toujours tolérée ; aujourd'hui on préfère <script type="text/javascript">, préférable et plus actuel, mais seuls les navigateurs postérieurs aux versions 4 comprennent l'argument type
* et la balise fermante </script>.

Comme le lecteur aura déjà pu le constater dans les exemples présentés aux pages précédentes, une instruction JVS doit se terminer par un point-virgule.
Plusieurs instructions peuvent se trouver sur une même ligne, mais nous conseillons vivement de n'écrire qu'une seule instruction par ligne de programme.

Tous les appels à des fonctions (nous y reviendrons) se terminent par des parenthèses devant le point-virgule et les parenthèses peuvent contenir des paramètres.

Certaines fonctions sont préexistantes, c-à-d déjà créées pour vous et faisant partie du langage JavaScript (on les appelle aussi fonctions prédéfinies ou embarquées),
d'autres peuvent être déclarées par le programmeur (ce qui sera développé dans les chapitres "fonctions" et suivants).

Nous n'aborderons ici que quatre fonctions prédéfinies, à savoir :

Les autres fonctions prédéfinies de JS seront découvertes au fur et à mesure de votre progression dans ce tutoriel.

 

A. la fonction ALERT

La fonction ALERT affiche une boîte de dialogue avec un message d’avertissement et un bouton OK.

N'utilisez cette méthode que pour avertir l’usager et que ce dernier n’a aucune décision à prendre.

La syntaxe en est :

alert("un message");

où l'on observe le point-virgule en fin d'instruction,
les parenthèses qui suivent le nom de la fonction appelée et entre lesquelles on place un éventuel attribut
ici un texte (une chaîne de caractères) placé soit entre guillemets (double quote), soit entre apostrophes (single quote), mais surtout sans mélanger les 'single' et 'double' quotes, ce texte apparaîtra dans la boîte de dialogue qui s'affichera ;
puisque ALERT est une instruction qui affiche un message dans une boîte de dialogue, il faut lui transmettre un attribut (un paramètre) qui précisera le message à afficher et que l'on place dans les parenthèses.
On n'oubliera évidemment pas la balise <script type="text/javascript"> qui doit précéder les instructions JVS et la balise fermante </script> qui les suit.

Exemple

<html>
<body>

<h1>Ma premiere fonction JVS</h1>

<script type="text/javascript">
alert("un message");
</script>


</body>
</html>


 

 

B. la fonction WRITE

La fonction WRITE retourne une ou plusieurs expressions HTML dans un document de la fenêtre spécifiée (généralement la page ouverte en HTML).

La syntaxe en est quasi identique :

document.write("un message");

où l'on observe le point-virgule en fin d'instruction ;
les parenthèses qui suivent le nom de la fonction appelée
et un texte (une chaîne de caractères) placé soit entre guillemets (double quote), soit entre apostrophes (single quote), mais surtout sans mélanger les 'single' et 'double' quotes, ce texte apparaîtra sur le document en cours (la page HTML) qui s'affichera ;
puisque WRITE est une instruction qui affiche du texte dans la page HTML en cours, il faut lui transmettre un attribut (un paramètre) qui précisera le texte à afficher et que l'on place dans les parenthèses.
On n'oubliera évidemment pas la balise <script type="text/javascript"> qui doit précéder les instructions JVS et la balise fermante </script> qui les suit.

Le texte placé entre guillemets peut contenir des balises HTML qui seront correctement interprétées. Par exemple :
document.write("Bonjour,<br>je suis content de te voir.");
Ce texte pourra même être remplacé par une variable pour afficher le contenu (la valeur) de cette variable... patience, nous aborderons les variables dans les chapitres suivants.

Les erreurs fréquentes avec l'instruction document.write :
1. oublier le point entre les deux mots ;
    (en langage orienté objet, on dira que write est une méthode de l'objet document)
2. placer des lettres capitales à l'un des deux mots ;
    (le langage JavaScript est case sensitive)
3. oublier les parenthèses immédiatement (sans espace) après write ;
4. oublier d'ouvrir et/ou fermer les guillemets à l'intérieur des parenthèses si l'on veut écrire du texte.

Le lecteur pourrait s'étonner que l'on emploie une instruction JavaScript pour écrire du texte sur la page, alors que la simple balise <p> du langage HTML aurait suffi.
Patience, on verra que les textes à afficher à l'écran pourraient être différents selon les circonstances... à programmer dans la suite ;o) .

Exemple

<html>
<body>

<h1>Ma deuxième fonction JVS</h1>

<script type="text/javascript">
document.write("un message");
</script>


</body>
</html>

Le lecteur attentif aura remarqué cette syntaxe curieuse de la fonction. Nous avions déjà signalé que JS était un langage orienté objet, objet auquel on peut donner des propriétés et des méthodes : ici, la méthode write (écrire) est à appliquer à l'objet document (document HTML en cours)...

 

C. la fonction PROMPT

La fonction PROMPT affiche une boîte de dialogue avec un message (ou une question) que vous avez programmé, une zone d’affichage d'une réponse par l'internaute et deux boutons : un "OK" et un "Cancel".

Dans le chapitre 4, nous expliciterons les variables... en attendant, il suffit de savoir que ma_variable sera le nom sous lequel le JS retiendra la réponse de l'internaute à la question posée (comme l'étiquette à coller sur le tiroir qui contiendra l'information). Le mot clé var montre que l'on déclare une variable.

La syntaxe de la fonction PROMPT est un peu plus difficile :

var ma_variable=prompt("la question","une réponse possible");

où l'on observe le point-virgule en fin d'instruction ;
le mot-clé var suivi d'un nom de variable (ici ma_variable) suivi d'un signe = (égal) ;
les parenthèses qui suivent le nom de la fonction appelée
un premier texte (une chaîne de caractères) placé soit entre guillemets (double quote), soit entre apostrophes (single quote), mais surtout sans mélanger les 'single' et 'double' quotes, ce premier texte apparaîtra dans la boite de dialogue de la page HTML comme une question ou un message suscitant une réponse ;
derrière une virgule [facultative] suivra un deuxième texte [facultatif aussi] (une chaîne de caractères) placé soit entre guillemets (double quote), soit entre apostrophes (single quote), mais surtout sans mélanger les 'single' et 'double' quotes, ce deuxième texte [facultatif] apparaîtra dans la boite de dialogue, dans la zone de texte où l'internaute pourra écrire, comme une réponse possible à la question... à défaut d'une autre réponse, JS considérera que l'internaute accepte cette réponse ;
puisque PROMPT est une instruction qui affiche un texte (ou une question), il faut lui transmettre cet attribut (ce paramètre) qui précisera le texte à afficher et que l'on place dans les parenthèses... mais il n'est pas indispensable de prévoir la réponse possible.

Les deux boutons "OK" et "Annuler/Cancel" permettront à l'internaute,
en cliquant sur "OK", d'accepter la réponse donnée ou
en cliquant sur "Annuler/Cancel", de rejeter ou annuler la boîte de dialogue dans son entièreté, y compris les réponses données.

On n'oubliera évidemment pas la balise <script type="text/javascript"> qui doit précéder les instructions JVS et la balise fermante </script> qui les suit.

Attention, erreur fréquente : la variable qui recevra la réponse d'un PROMPT sera prioritairement de type chaine de caractères (ou string)... vous risquez de vous laisser prendre, on y reviendra.

Exemple

<html>
<body>

<h1>Ma troisième fonction JVS</h1>

<script type="text/javascript">
var ma_variable = prompt("Quel est ton prénom ?","");
alert("Bonjour " + ma_variable + " !");

</script>


</body>
</html>

 

C. l'ordre d'exécution des instructions

Les instructions sont suivies dans l'ordre de leur apparition dans le programme... comme l'indication "prenez la deuxième à gauche puis la première à droite" ne vous mènera pas au même but que l'instruction "prenez la première à droite puis la deuxième à gauche"...

À vous de tester et de modifier (éditer) l'ordre des instructions ci-dessous :

Exemple

<html>
<body>

<h1>Ma première suite d'instructions JVS</h1>

<script type="text/javascript">
document.write("début du texte");
alert("un premier message");
document.write("<br>suite du texte");
alert("un deuxième message");

document.write("<br>fin du texte");
</script>


</body>
</html>

Le lecteur attentif aura remarqué que chaque instruction document.write() écrit dans la page en cours... à la suite, sans espace ni retour à la ligne... normal, vos instructions ne signalent nulle part qu'il faut insérer espace ou saut de ligne.

Pour cela, il suffit d'ajouter à l'intérieur des guillemets, les instructions HTML correspondantes (<br> pour un saut à la ligne... que l'on peut aussi écrire <br/ > ; <font color=FF0000> pour écrire en rouge ; etc.)

Ce qui génèrerait en écrivant les instructions suivantes :

Exemple

<html>
<body>

<h1>Une autre suite d'instructions balisées JVS</h1>

<script type="text/javascript">
document.write("début du texte<br>");
alert("un premier message");
document.write("<font color='#FF0000'>suite du texte </font>");
alert("un deuxième message");

document.write(" fin du texte");
</script>


</body>
</html>

Le lecteur aura remarqué l'emploi distinct des guillemets et celui des simples quotes... attention, cela est souvent une source d'erreurs ou de difficultés.

 

VIII. Exercices relatifs aux commentaires, instructions et programme

voir suite >>>

 

IX. Test relatif aux commentaires, instructions et programme

voir suite >>>


programme (2.2) | | exercices commentaires, instructions et programme (2.8)