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)

 

 

Merci de votre visite à partir de :

Vous êtes sur :
https://cuy.be/cours/jvs/jvs_024_instructions.html

partager sur FaceBook...           consulter sur FaceBook...

 

copyleft
Des liens ne fonctionnent plus ?
Avez-vous des suggestions ?
des commentaires, des corrections, un encouragement... ?
Pour info : Non, il n'y a pas de version papier ou DOC, PDF, etc. de ces notes.


Envoyez-moi un E-Mail (cuy(point)w(at)skynet(point)be)

Attention (at) signifie @ et (point) signifie .

Accueil CUY = See you why?

Compteur gratuitEasyCounter     BelStat Monitored by BelStat - Your Site Counts
La 1 000 000e page a été visitée le 21 mai 2010.
La 2 000 000e page a été visitée ce 18 mars 2012, vers midi.
La 3 000 000e page a été visitée ce 7 janvier 2014 entre 18 h et 18 h 45,
La 4 000 000e page a été visitée ce 5 juin 2015 entre 15 h 49 et 15 h 52,
La 5 000 000e page a été visitée ce 29 aout 2017 après 23 h 30,
Et la 6 000 000e page visitée, trop tôt pour y penser ?
 
et, d'après BelStat, CUY est visité surtout en semaine, peu le weekend...
moins et irrégulièrement pendant les vacances :

visites sur 3 mois, de la mi octobre 2013 à la mi janvier 2014.
 
La 3 333 333e page visitée a eu lieu ce mardi 10 juin 2014, en début d'après midi...
La 3 666 666e page visitée a eu lieu ce dimanche 28 decembre 2014, vers 16 h...
Un tiers de million de pages visitées en 154 jours cela fait une moyenne de 2165 pages visitées par jour...
Deux tiers de million de pages visitées en 355 jours soit une moyenne de 1878 pages visitées par jour...
et seulement 1195 pages visitées quotidiennement pendant les vacances estivales
de la mi juin à la mi septembre 2014

Vous voulez lire quelques messages reçus ?
quelques encouragements ?
Cliquez ici


Fin septembre 2009, installation de ce compteur
qui ne compte chaque nouvel ordinateur visiteur qu'une seule fois
free counter
 
m-à-j du 22/11/2021 :

Depuis cette fin septembre 2009, parmi les 210 pays (sur 274 drapeaux connus) qui nous ont visité,
voici les 100 pays qui nous visitent le plus, 
Nos petits visiteurs, classés par date de visite, où un seul ordi nous a visité, sont :
199. Turkmenistan (TM May 10, 2017) ; 200. Lesotho (LS March 1, 2017) ;
201. Turks and Caicos Island (TC January 18, 2016
202. Cook Islands (CK September 19, 2015)  203. Faroe Islands (FO January 27, 2015
204. Virgin Islands American (VI November 12, 2014) ;
205. Belize (BZ September 29, 2014) ;206. Eswatini - Swaziland (SZ July 21, 2014) ;
207. Grenada (GD April 3, 2014) ; 208. Timor-Leste (TI March 29, 2014) ;
209. American Samoa (AS December 26, 2012) ; 210. Guyana (GY November 5, 2010).