Alain Barraud Mémento informatique  
 
Accueil Logithèque - SE Photo - vidéo Internet - protocoles Site Web PC - Réseau Archives
Page ouverte le 18/05/2009

JavaScript - Synthèse sur la syntaxe

Retour accueil JS

Sommaire partie 4
1. Les boîtes de dialogues
2. Où se place le JS ?
3. Lisibilité du code
4. Les variables
5. Conditions, tests et boucles
6. Les tableaux
7. Les fonctions

Les boîtes de dialogues

Servent à dialoguer avec l'utilisateur. Il en existe trois sortes.

Afficher du texte

La première, alert(message), affiche un message (une chaîne de caractères) à l'utilisateur.

Code : JavaScript
1     alert('Bonjour');

Ce qui donne sur ce lien 		boîte alert

Demander une chaîne de caractères

La boîte de dialogue prompt(message, valeur) demande à l'utilisateur d'entrer du texte.
Si l'utilisateur clique sur "Annuler", la fonction renvoie alors null.
Le message sera affiché au-dessus du champ pour saisir le texte, champ qui aura initialement la valeur précisée.

Code : JavaScript
1     var commentaire = prompt("Dites-nous ce que vous voulez", "Votre message ici");
Ce qui donne : dites-nous ce que vous voulez … 		boîte prompt

Demander "oui" ou "non"

La dernière, confirm(message), affiche le message, ainsi que deux boutons : Ok et Annuler.
La valeur renvoyée est true si l'utilisateur clique sur "Ok", false sinon.

Code : JavaScript
1     var continuer = confirm("Voulez-vous continuer ?");
Ce qui donne : Voulez-vous continuer ? … 		boîte confirm
Haut de page

Où se place le JS ?

Le code JS peut se placer :

  • soit directement dans les balises HTML, à l'aide d'un gestionnaire d'événements
  • soit entre des balises propres au JS
  • soit dans un fichier externe, portant l'extension .js, qui sera importé au chargement de la page.

gestionnaires d'événements

Un gestionnaire d'événements est un attribut (une propriété) qui se place dans une balise HTML, qui s'écrit sous la forme onevenement.
Son rôle est de lancer le script lorsque l'événement spécifié se produit.

Exemple :
Code : JavaScript
1     <a href="#" onclick="alert('Salut')">Cliquez</a>
Ce qui donne : Cliquez
alt Le gestionnaire d'événements est un attribut d'une balise HTML, et doit donc s'écrire en minuscules pour que la page soit valide.
Quelques événements (ne pas oublier le on devant) :
  • click : un clic de la souris sur l'élément concerné
  • dblclick : un double-clic sur cet élément
  • mouseover : la souris passe sur cet élément
  • mouseout : la souris sort de cet élément (en quelque sorte le contraire de mouseover).

Balises propres au JS

Le code JS peut aussi se placer entre ces balises :
Code : JavaScript
1     <script type="text/javasript">
2     <!--
3
4     //-->
5     </script>
alt Les "flèches" servent à masquer le JS aux anciens navigateurs qui ne peuvent pas l'interpréter.
En leur absence, ces derniers afficheraient le code au milieu de la page.

Ces balises peuvent se placer :
  • soit dans l'en-tête (head) de la page web : on y place du code qui doit être "mis en mémoire" pour être exécuté plus tard.
    Un exemple typique : les déclarations de fonctions.
  • Soit dans le corps (<body></body>) de la page, pour le code à exécuter au chargement de celle-ci.
    Par exemple, des fonctions pour initialiser ou lancer un script.

Importer un fichier externe

La dernière méthode (la plus "propre") consiste à écrire le code JS dans un fichier séparé, portant l'extension .js.
On importe ensuite ce fichier à l'aide des balises précédentes, utilisées comme ceci (fichier.js étant le nom du fichier à importer) :
Code : HTML
1     <script type="text/javasript" src="fichier.js"></script>
De même, cette ligne peut se placer soit dans l'en-tête, soit dans le corps de la page, selon les mêmes règles que pour le paragraphe précédent.
Haut de page

Lisibilité du code

Haut de page

Les variables

En fait, le Javascript n'autorise la manipulation que de 4 types de données :
  • des nombres : entiers ou à virgules
  • des chaînes de caractères (string): une suite de caractères
  • des booléens : des variables permettant de vérifier une condition. Les booléens peuvent prendre deux états :
    - true : si le résultat est vrai
    - false : si le résultat est faux.
  • des variables de type null : un mot caractèristique pour indiquer que la variable ne contient aucune donnée.

Utilisation des variables

Les variables servent à stocker des données.
Déclaration
Pour créer (on dit déclarer) une variable, on utilise le mot-clé var, suivi du nom qu'on veut lui donner :
Code : JavaScript
1     var age;
alt Le nom ne peut être composé que des 26 lettres, majuscules et / ou minuscules (JS fait la différence entre les deux), des 10 chiffres et du underscore (trait de soulignement).
De plus, le nom ne doit pas commencer par un chiffre.

alt Certains mots-clé sont déjà utilisés en JS.
Ainsi, il y a certains mots, comme, break, case, char, continue, delete, double, final, long, new, public et super, qu'on ne peut pas utiliser comme nom de variable (ou de fonction).

La déclaration se fait (sauf exception) en une seule fois.
Affectation
Pour affecter une valeur à une variable, on utilise le signe = comme ceci :
Code : JavaScript
1     age = 18;
Initialisation
Il est possible d'affecter une valeur à une variable lors de sa déclaration.
Code : JavaScript
1     var age = 18;
Variables locales
Une variable déclarée &agarve; l'intérieur d'une fonction n'est accessible qu'à l'intérieur de cette même fonction.
On parle de variable locale.
alt Il faut utiliser autant que possible des variables locales.
Cela évitera bon nombre de problêmes.

Types de données

Une variable peut contenir différents types de données.
Présentation de deux types récurrents : les nombres et les chaînes de caractères.
Les nombres
Exemple : on veut créer une variable pi contenant le nombre 3.14
Code : JavaScript
1     var pi = 3.14;
alt On utilise le point à la place de la virgule.

Il y a 5 opérations de bases : l'addition (+), la soustraction (-), la multiplication (*), la division (/) et le modulo (%).
alt modulo :
a % b (si b est positif) est le reste dans la division euclidienne de a par b.

Dans cet exemple, on verra s'afficher 3 (car 18 = 5 x 3 + 3) :
Code : JavaScript
1     alert(18%5);

Il existe des opérateurs supplémentaires pour faciliter les calculs avec des variables :
  • += / -= / *= / /= pour : augmenter de / diminuer de / multiplier par / diviser par un nombre la valeur d'une variable.
    De même, il existe aussi %=.
  • ++ et -- pour incrémenter / décrémenter de 1 la valeur d'une variable.
Exemple :
Code : JavaScript
1     // Les 3 dernières lignes sont équivalentes
2     / on augmente a chaque fois de 1 la valeur de n
3     var n =0;
4     n = n+1;
5     n += 1;
6     n++;
Les chaînes de caractères
Une chaîne de caractère, c'est… du texte.
Elle est délimitée par des guillemets " ou bien par des apostrophes '.
Code : JavaScript
1     var chaine = "Je suis une chaine de caracteres";
2     var msg = 'Eh bien moi aussi !';

On utilise un caractère d'échappement pour certains caractères spéciaux, comme :
  • \n pour un retour à la ligne
  • \' et \" pour une apostrophe / un guillemet
  • \\ pour afficher un antislash
  • \uXXXX pour insérer le caractère dont la valeur unicode est XXXX.
On utilise le signe + pour concaténer (mettre bout-à-bout) plusieurs chaînes de caractères.
Exemple :
Code : JavaScript
1     var age = 18;
2     alert("Vous avez " + age + " ans");// on concatene les bouts de phrases
(Noter que le nombre 18 est converti automatiquement en chaîne de caractères, pour pouvoir ensuite être concaténé.)

L'opérateur += sert à ajouter une chaîne de caractères à la fin d'une variable.
Dans cet exemple, on ajoute un retour à la ligne à la fin :
Code : JavaScript
1     var msg = "Bonjour";
2     msg += "\n";

On peut utiliser les fonctions parseInt(chaine) et parseFloat(chaine) pour convertir une chaîne de caractères en nombre (int : entier ou float : décimal).
C'est utile pour additionner des nombres qui sont enregistrés sous forme de chaînes de caractères : le signe + les concatène si on l'utilise directement.
Code : JavaScript
1     var a = "1";
2     var b = "8";
3     alert(a+b);// affiche 18
4     alert(parseInt(a)+parseInt(b));// affiche 9
Haut de page

Conditions, tests et boucles

Les booléens

On a déjà vu deux types de variables : les nombres et les chaînes de caractères.
On va voir un troisième type de variables : les booléens. Ces variables ont deux valeurs possibles : vrai (true), ou faux (false).
Voyons leur fonctionnement et à quoi ç sert…
Comparer des nombres
On peut obtenir des booléens en comparant des valeurs.
On dispose d'opérateurs de comparaison, qui sont au nombre de 6 :
  • opérateur "égal à", ==
  • opérateur "est différent de", !=
  • opérateur "strictement plus grand que", >
  • opérateur "strictement plus petit que", <
  • opérateur "plus grand ou égal à", >=
  • opérateur "plus petit ou égal à", <=
Exemple : une variable est_majeur qui contient vrai uniquement si l'âge saisi par l'utilisateur est plus grand ou égal à 18.
Code : JavaScript
1     var age = prompt("Quel age avez-vous ?");
2     var est_majeur = (age >= 18);
Noter que les parenthèses autour de la condition servent à bien la distinguer (elles ne sont pas obligatoires, on les met si on veut).
Opérations sur les booléens
On a vu qu'on peut additionner ou multiplier des nombres et concaténer des chaînes de caractères.
Il existe aussi des opérations sur les booléens, au nombre de trois :
  • la négation, notée ! (si a est vrai, !a est faux, et inversement)
  • le ET logique && : on a a && b qui est vrai si et seulement si a et b sont vrais
  • le OU logique || : a || b est vrai si et seulement si au moins l'une des deux valeurs est vraie.

Les conditions

IF … ELSE …
On peut effectuer un test, pour exécuter des instructions différentes selon la valeur d'un booléen.
Voici la syntaxe :
Code : JavaScript
1     if(booleen)
2     // instruction a executer si le booleen est vrai
3     else
4     // instruction a effectuer s'il est faux
alt Avec cette écriture, on ne peut mettre qu'une instruction dans chaque "membre".
Si on a plusieurs instructions, il suffit de les placer entre accolades, { et }.

Le else n'est d'ailleurs pas obligatoire, on peut n'écrire que :
Code : JavaScript
1     if(booleen)
2     // instruction a executer si le booleen est vrai

Un exemple :
Code : JavaScript
1     var age = prompt("Quel age avez-vous ?");
2     if (age >= 18)
3     {
4         alert("Vous êtes majeur.");
5         alert("Mais il n'est jamais trop tard pour apprendre à programmer :D");
6     }
7     else
8         alert("Tu es mineur");

On peut bien sûr effectuer des tests les uns à l'intérieur des autres (imbriqués).
IF avec autre chose qu'un booléen
question Et si on met autre chose qu'un booléen dans le if ?
Dans ce cas, JS va essayer de "convertir" la chose en booléen.
Le résultat sera false uniquement dans les cas suivants :
  • 0 (zéro)
  • •• ou '' (chaîne de caractères vide)
  • undefined (variable déclarée mais non définie)
  • null (mot-clé utilisé pour des objets "vides")
SWITCH
Mais il arrive qu'on ait besoin de tester plusieurs valeurs pour une même variable.
Dans ce cas, il est possible d'utiliser plusieurs tests : if … else if … else if … else ….

Mais il existe une syntaxe moins lourde.
Voyons : on va distinguer plusieurs cas concernant le nombre d'enfants de l'utilisateur.
Code : JavaScript
1     var nb = prompt("Combien avez-vous d'enfants ?");
2     switch(nb)
3     {
4         case 0: // si le nombre est 0…
5             alert("Au moins, vous êtes tranquilles :p"); // … on affiche un message…
6             break; // … et on arrete le "switch" ici
7         case 1: // si le nombre est 1
8             alert("Oh il est tout seul…");
9             break;
10         case 2:
11         case 3:
12 // s'il y en a 2 ou 3
13             alert("Il doit y avoir de l'ambiance chez vous ^^");
14             break;
15         case 4:
16             alert("Jolie famille !");
17             break;
18         default: // si c'est aucune des valeurs precedentes
19             alert("Plus de 4 enfants ?! Waow…");
20             break;
21     }
En rentrant dans le switch, l'ordinateur exécute le code à partir du case correspondant, et quitte le switch lorsqu'il rencontre break.

Les boucles

Les boucles permettent de répéter des instructions tant qu'une condition est vraie.
On distingue trois types de boucles, adaptées à des situations différentes.
WHILE
La première est très classique :
Code : JavaScript
1     while(condition)
2     // action

On répète l'action tant que la condition est vraie.
Noter que si la condition est fausse dès le début, l'action n'est jamais effectuée.

Exemple :
Code : JavaScript
1     var i=0;
2     while(i<10)
3     {
4         var j = i*i;
5         alert("Le carré de " + i + " est " + j);
6         i++;
7     }
FOR
La boucle for est une variante, plus complète, de la boucle while.
Elle s'utilise sous cette forme : for(initialisation ; condition ; incrémentation) :
  • l'initialisation se fait une seule fois, au début de la boucle
  • la boucle est exécutée tant que la condition est vraie
  • à la fin de chaque tour de boucle, l'incrémentation est effectuée.
alt Cette boucle est très utilisée, car elle convient souvent au besoin.
Mais chaque boucle a une utilisation particulière : on choisit cette boucle avant tout parce qu'elle convient à notre problème, et non pas uniquement parce qu'elle est pratique.
Un exemple :
Code : JavaScript
1     for(var i=0; i<10; i++)
2         alert(i);

Ce qui est équivalent à :
Code : JavaScript
1     var i=0;
2     while(i<10)
3     {
4         alert(i);
5         i++;
6     }
alt Il faut éviter d'utiliser à l'intérieur de la boucle la variable servant de compteur (les parenthèses servent justement à regrouper tout ce qui la concerne).
Inversement, on évitera de mettre dans ces parenthèses des choses qui n'ont rien à voir avec ce compteur.
DO … WHILE
Cette dernière boucle est un peu différente des précédentes.
En effet, la condition est évaluée à la fin de la boucle : les instructions seront toujours exécutées au moins une fois, même si la condition est fausse dès le départ.

Cette particularité fait qu'elle a une utilisation différente.

Sa syntaxe est la suivante :
Code : JavaScript
1     do
2     // instruction a repeter
3     while(condition);
alt Noter la présence du point-virgule à la fin.
Ceci est dû au fait que la condition est à la fin de la boucle.
Voici un exemple : on demande une chaîne de caractères à l'utilisateur tant qu'il ne clique pas sur "Annuler".
Code : JavaScript
1     var msg;
2     do
3         msg = prompt("Entrez ce que vous voulez, ou cliquez sur Annuler");
4     while(msg);
alt On effectue ici un test avec une valeur qui n'est pas un booléen, comme ça a été expliqué quelques paragraphes plus haut.
Réaliser une affectation dans une condition
Noter qu'on peut combiner une affectation et une condition.
Autrement dit, faire quelque chose comme ceci :
Code : JavaScript
1     var msg;
2     while( (msg = prompt("Entrez du texte")) != null)
3         alert(msg);

Pour comprendre cette condition, on peut la séparer en deux, comme ceci :
Code : JavaScript
1     msg = prompt("Entrez du texte"); // c'est l'affectation, entre les parentheses
2     msg != null; // c'est la condition

Et en effectuant le test directement avec une valeur qui n'est pas booléenne, on peut écrire ceci :
Code : JavaScript
1     var msg;
2     while( (msg = prompt("Entrez du texte"))
3         alert(msg);

alt Il faut bien comprendre que le signe = est le signe d'affectation !
En décomposant la condition, ça nous donne :
Code : JavaScript
1     msg = prompt("Entrez du texte");// affectation
2     msg;// le test, avec une valeur qui n'est pas booleenne
Haut de page

Les tableaux

Haut de page

Les fonctions

Haut de page