1. Les différentes instructions :
  1. Les mots clés :

Nous allons aborder l’emploi des mots clés var, new, delete, this, with et void. Leur fonction n’a rien de spectaculaire, mais il ne faut pas en sous-estimer la signification.

  1. Objects avec new et delete :

Il est souvent nécessaire de regrouper diverses variables et fonctions d’un objet. Les objets disposent de propriétés, dont certaines peuvent être des fonctions. On les appelle alors des méthodes.

Les objets disposent donc de propriétés et de méthodes. Ces propriétés d’objet sont gérées comme des variables : on peut leur affecter une valeur et lire ultérieurement cette valeur dans le cours du programme, nous y reviendrons plus tard.

Pour commencer nous allons créer un nouvel objet. Pour cela nous faisons appel à l’opérateur new. Voici comment se présente l’objet.

Nouvel_objet est ici le nom de l’objet, celui que nous souhaitons créer. Le constructeur est une fonction servant de modèle pour l’objet à créer.

Pour supprimer un objet est un jeu d’enfant : il suffit d ‘appliquer le mot clé delete

D’abord l’objet a est crée à partir de la fonction String. Sa valeur de retour est JavaScript n’est pas difficile !

La deuxième ligne affiche la chaîne de caractères.

Après suppression de l’objet a, la dernière ligne ne fournit aucun résultat : la chaîne de caractères n’est plus affichable.

  1. Référence à l’objet actuel avec this :

Le mot clé this matérialise une référence à l’objet actuel. Cela permet d’accéder à un objet sans passer par son identificateur.

En voici un exemple.

Sur de nombreuses pages, vous trouverez des formulaires. Le visiteur doit remplir certains champs, puis un programme JavaScript vérifie les saisies et affiche un message en cas de valeur incorrecte.

Pour cette vérification, avant l’envoi des données, un programme JavaScript est exécuté.

Pour vérifier le troisième champ du premier formulaire de la page actuelle, nous serions obligés de lire cette longue variable :

Le mot clé this est une référence sur l’objet actuel, en l’occurrence le champ input. Dans ce cas, this a la même signification que la première forme(bien trop complexe !) : Windows.document.forms[0].elements[2]. L’économie au niveau de la saisie est plus qu’appréciable.

This intervient par ailleurs souvent dans les fonctions constructeurs.

  1. With comme abréviation :

Tout comme this, width facilite le travail de saisie. Avec width, il est possible de définir une espèce d’objet standard. Dans le bloc suivant, toutes les références de propriétés se rapportent à cet objet standard.

Dans la zone délimitée par les accolades, il n’est plus nécessaire d’écrire :

La fonction alert ouvre une boîte de dialogue et y affiche le texte spécifié.

Il en va de même pour des objets personnalisés.

<html>

<head>

<title>Exemple de programme JavaScript</title>

</head>

<body bgcolor=#eeeeee text=#555555 link=#0000ff vlink=#0000ff

alink=#ff0000>

<p align=left>

<font size=2 face="arial,helvetica" color=#ff7700>

<b>Premier exemple de programme</b><br>

</font>

<p align=left>

<font size=2 face="arial,helvetica">

<script language="JavaScript"><!--

annonce = new object() ;

annonce.taille = ‘1,70 m’ ;

annonce.poids =’64 kg’ ;

annonce.yeux = ‘bleu’ ;

annonce.cheveux =’blond’ ;

annonce.loisirs=’programmation et automobile’ ;

with (annonce)}

document.write(‘taille :’ +taille+’ <br>’) ;

document.write(‘poids : ‘ +poids+ ‘<br>’) ;

document.write(‘couleur des cheveux  : ‘ +cheveux+ ‘<br>’) ;

document.write(‘couleur des yeux : ‘+yeux+ ‘<br>’) ;

document.write(‘Loisirs : ‘+loisirs+ ‘<br>’) ;

//--></script>

</font>

</p>

</body>

</html>

Dans le bloc identifié par width, il suffit d’écrire yeux à la place de annonce.yeux.

  1. Void est toujours indéfini :

Chaque appel de fonction dans JavaScript livre une valeur de retour. Void livre en principe undefined.

La traduction littérale en français est " défini ", et c’est exactement le sens de cette valeur de retour.

Une nouvelle variable à laquelle aucune n’a été affectée est d’abord indéfinie.

L’instruction void exécute une expression, mais annule sa valeur de retour.

La syntaxe est simple :

Void prend exactement un argument, mais dont la valeur n’a aucune espèce d’importance.

Après ces trois instructions, a, b et c ont le même contenu :undefined.

Il existe des applications de void. Dans JavaScript, il n’est pas prévu de mot clé spécial pour undefined. Longtemps, pour vérifier une variable a été définie, il n’y a eu qu’une seule solution : il fallait déclarer une nouvelle variable explicitement indéfinie, et l’employer comme élément de comparaison.

Et voici la méthode élégante, avec void :

Comme nous l’évoquions, void attend un argument. Celui-ci interprété ; en d’autres mots, s’il s’agit d’une fonction, elle est exécutée. Le côté intéressant de void est que la valeur est immédiatement à nouveau détruite. En affectant une variable ordinaire comme argument, il ne se passe absolument rien ; void livre comme d’habitude undefined, quelle que soit la valeur de la variable.

Que la valeur de la variable soit 0, 7 ou sept, le résultat est toujours le même : undefined.

Void est également pratique pour retirer la valeur de retour d’une fonction. Par exemple, chaque appel de fonction :

livre une valeur de retour.Dans certaines conditions, cette valeur de retour doit être cachée ;c’est là qu’intervient void.

La fonction est bien exécutée et la chaîne de caractères Hello World est bien affichée à l’écran, mais la valeur de retour de la fonction est undefined.

 

  1. Qu'est-ce qu'une structure conditionnelle?
  2. On appelle structure conditionnelle les instructions qui permettent de tester si une condition est vraie ou non, ce qui permet de donner de l'interactivité à vos scripts par exemple.

  3. L'instruction if

L'instruction if est la structure de test la plus basique, on la retrouve dans tous les langages (avec une syntaxe différente...). Elle permet d'exécuter une série d'instruction si jamais une condition est réalisée.

La syntaxe de cette expression est la suivante:

if (condition réalisé) {
liste d'instructions
}

Remarques:

  1. L'instruction if ... else
  2. L'instruction if dans sa forme basique ne permet de tester qu'une condition, or la plupart du temps on aimerait pouvoir choisir les instructions à exécuter en cas de non réalisation de la condition...
    L'expression if ... else permet d'exécuter une autre série d'instruction en cas de non-réalisation de la condition.

    La syntaxe de cette expression est la suivante:

    if (condition réalisé) {
    liste d'instructions
    }
    else {
    autre série d'instructions
    }

  3. Plus simple avec switch :

 

Pour vérifier le contenu d’une variable à partir d’un grand nombre de valeurs, adoptez l’instruction switch.

Cette instruction attend une expression entre les parenthèses, et saute à un label précis, dans le bloc d’intructions :

Les labels sont spécifiés par case <valeur> : L’expression (dans ce cas Nom) est comparée successivement aux différentes valeurs des labels. Si la comparaison livre la valeur true, les instructions de ce label sont exécutées. Une instruction break termine l’exécution et saute à la fin de l’instruction switch. Si aucune valeur ne correspond à l’expression, JavaScript cherche un label appelé default :

Comme vous l’avez certainement constaté, il y a toujours un break à la fin de chaque instruction.

Veillez à bien introduire l’instruction break. Si vous l’omettez, ce n’est pas seulement les instructions jusqu’au prochain label qui seront exécutées, mais également les suivantes.

Si vous avez déjà programmé en C ou en Java, vous savez que switch y accepte des valeurs numériques. Comme le montre le dernier exemple, dans JavaScript, elle sait également travailler avec des chaînes de caractères.

  1. Une boucle pour exécuter à répétition des instructions :
  2. Il existe différents instructions permettant l’exécution à répétition de certaines parties de programme. Ces instructions sont appelées des boucles. Sur un plan général, les boucles sont comparables à des instructions if : elles permettent également une exécution conditionnelle des programmes.

    While, aussi souvent que nécessaire

    L’instruction While attend, comme if, une expression entre parenthèses et exécute un bloc d’instructions. Mais à l’inverse de if, while ne se contente pas d’exécuter ce bloc une seule fois ; elle l’exécute aussi longtemps que la condition est vraie. Attention cependant : si la condition n’est jamais fausse, le bloc est exécutée à perpétuité ; vous êtes alors dans une boucle dite sans fin.

    Voici un exemple :

    <html>

    <head>

    <title>Exemple de programme JavaScript</title>

    </head>

    <body bgcolor=#eeeeee text=#555555 link=#0000ff vlink=#0000ff

    alink=#ff0000>

    <p align=left>

    <font size=2 face="arial,helvetica" color=#ff7700>

    <b>Exemple de programme pour la boucle <u>while</u></b><br>

    </font>

    <p align=left>

    <font size=2 face="arial,helvetica">

    <script language="JavaScript"><!--

     

    var i = 0;

    var Vert;

    var Bleu;

    while(i < 9)

    {

    i++;

    Vert = 5 * i + 5;

    Bleu = 10 * i;

    document.write('<font color=#40', Vert, Bleu + '>',

    i, ': <b>Couleur = #40', Vert, Bleu, '</b></font><br>');

    }

     

    //--></script>

    </font>

    </p>

    </body>

    </html>

    Les variables i, Vert et Bleu sont déclarées et i est placé sur sa valeur de Départ. Puis vient la Boucle While. Elle est exécutée jusqu’à ce que i soit égal ou supérieur à 9. A chaque passage de la boucle, i est incrémenté de 1. La valeur de couleur vert est obtenue par le calcul 5*i+5, bleu par 10*i. Les couleurs sont mélangées et un texte en couleur est affiché.

    L’important est que la variable i est modifiée à chaque passage, car c’est ainsi que la boucle est limité à 9 passages.

  3. Do …While, au moins une fois :
  4. Une boucle While n’est exécutée que si la condition est vraie au minimum une fois. A l’inverse, la boucle do… While est toujours exécutée au moins une fois, quel que soit l’état de la condition.

    Avec do…While, la condition n’est vérifiée qu’après la première exécution de la boucle.

    L’idée maîtresse des deux boucles et cependant la même :tant que la condition est remplie, elles ont le même effet. la boucle do… While est parcourue aussi souvent que la boucle While. La différence n’intervient que si condition est remplie lors du premier passage. Dans ce cas, While n’est pas exécutée alors que do… While est exécutée une fois.

    En voici quelques exemples :

    Var i=0

    While(i<10)

    {

    i++ ;

    document.write(i+’<br>’) ;

    }

    Cette boucle While est parcourue 10 fois ; elle écrit les chiffres de 0 à 9.

    Var i=0

    do

    {

    i++ ;

    document.write(i+’<br>’) ;

    Avec do… While, le résultat est identique.

    Pour les deux exemples, la condition est d’abord remplie(i<10). Dans les exemples suivants, il en va autrement, illustrant bien ce qui distingue les 2 types de boucle.

    Var i=100 ;

    While(i<10)

    {

    i++ ;

    document.write(i+’<br>’) ;

    While détecte de suite que la condition est fausse et saute à la fin de la boucle. Cette dernière n’est pas exécutée.

    Avec do… While, la boucle est parcourue une fois :

    Var i=100

    Do

    {

    i++ ;

    document.write(i+’<br>’) ;

    }

    while(i<10) ;

    Dans ce dernier exemple, la boucle est d’abord parcourue, puis la condition est vérifiée. Comme la condition est fausse, il n’y a pas de nouveau passage dans la boucle.

  5. La boucle for
  6. L'instruction for permet d'exécuter plusieurs fois la même série d'instructions: c'est une boucle!

    Dans sa syntaxe, il suffit de préciser le nom de la variable qui sert de compteur (et éventuellement sa valeur de départ, la condition sur la variable pour laquelle la boucle s'arrête (basiquement une condition qui teste si la valeur du compteur dépasse une limite) et enfin une instruction qui incrémente (ou décrémente) le compteur.

    La syntaxe de cette expression est la suivante:

    for (compteur; condition; modification du compteur) {
    liste d'instructions
    }

    Par exemple:

    for (i=1; i<6; i++) {
    Alert(i)
    }

    Cette boucle affiche 5 fois la valeur de i, c'est-à-dire 1,2,3,4,5
    Elle commence à i=1, vérifie que i est bien inférieur à 6, etc... jusqu'à atteindre la valeur i=6, pour laquelle la condition ne sera plus réalisée, la boucle s'interrompra et le programme continuera son cours.

     

  7. Instruction Continue :
  8. Il peut être nécessaire de faire sauter à la boucle une ou plusieurs valeurs sans pour autant mettre fin à celle-ci.

    La syntaxe de cette expression est "continue;" (cette instruction se place dans une boucle!), on l'associe généralement à une structure conditionnelle, sinon les lignes situées entre cette instruction et la fin de la boucle seraient obsolètes.

    Exemple: Imaginons que l'on veuille imprimer pour x allant de 1 à 10 la valeur de 1/(x-7) ... il est évident que pour x=7 il y aura une erreur. Heureusement, grâce à l'instruction continue il est possible de traiter cette valeur à part puis de continuer la boucle!

    x=1
    while (x<=10) {
    if (x == 7) {
    Alert('division par 0');
    continue;
    }
    a = 1/(x-7);
    Alert(x);
    x++
    }

    Il y avait une erreur dans ce script... peut-être ne l'avez-vous pas vue:
    Lorsque x est égal à 7, le compteur ne s'incrémente plus, il reste constamment à la valeur 7, il aurait fallu écrire:

    x=1
    while (x<=10) {
    if (x == 7) {
    Alert('division par 0');
    x++;
    continue;
    }
    a = 1/(x-7);
    Alert(x);
    x++
    }

     

  9. Instruction Break :

A l'inverse, il peut être voulu d'arrêter prématurément la boucle, pour une autre condition que celle précisé dans l’en-tête de la boucle. L'instruction break permet d'arrêter une boucle (for ou bien while). Il s'agit, tout comme continue, de l'associer à une structure conditionnelle, sans laquelle la boucle ne ferait jamais plus d'un tour!

Dans l'exemple de tout à l'heure, par exemple si l'on ne savait pas à quel moment le dénominateur (x-7) s'annule (bon...OK...pour des équations plus compliquées par exemple) il serait possible de faire arrêter la boucle en cas d'annulation du dénominateur, pour éviter une division par zéro!

for (x=1; x<=10; x++) {
a = x-7;
if (a == 0) {
Alert('division par 0');
break;
}
Alert(1/a);
}

Retour au sommaire