Introduction

Après avoir vu les bases du langage JavaScript, on va aborder dans ce chapitre les conditions, celles-ci vous permettront de contrôler le flux de vos scripts et d’interagir dans vos pages web.

Les expressions

Les expressions JavaScript ressemblent beaucoup à celles de PHP. Une expression est une combinaison de valeurs, de variables, d’opérateurs et de fonctions qui aboutit à une valeur. Le résultat peut être un nombre, une chaîne ou une valeur booléenne (qui vaut true ou false).

Prenez les exemples ci-dessous :


<script> 
    document.write("valeur=" + (10 < 5) + "<br>"); 
    document.write("valeur=" + (10 == 10) + "<br>"); 
</script>

Ce code renverra à l’écran :

La différence avec PHP se situe uniquement au niveau du retour, PHP renvoyant 1 (pour true) et rien (une chaîne vide pour false).

Attention toutefois lorsque vous réalisez des tests de condition avec ces booléens, vous devez impérativement les écrire en minuscule, car seules true et false sont définies en JavaScript, toute autre écriture déclenchera une erreur ReferenceError.

Littéraux et variables

La forme la plus simple d’une expression est un littéral (un nombre, une chaîne de caractères, etc.), par exemple l’instruction suivante affiche un littéral :


<script> 
    document.write("Hello World"); 
</script>

La chaîne de caractères "Hello World" est un littéral.

Une expression peut également être une variable contenant la valeur qui lui a été affectée, comme par exemple :


<script> 
    age = 35; 
    prenom = "Michel"; 
</script>

Les opérateurs relationnels

Les opérateurs relationnels testent deux opérandes et retournent un résultat booléen true ou false. Il existe trois types d’opérateurs relationnels :

égalité
comparaison
logique

1. L’opérateur d’égalité

L’opérateur d’égalité est représenté par le symbole double == (à ne pas confondre avec l’opérateur d’affectation =). Dans l’exemple suivant, la première instruction attribue une valeur à la variable age et la seconde réalise un test d’égalité :


<script>  
    age = 15  
    if (age == 18) document.write ("C'est un adulte")  
</script>

Lorsque les deux opérandes d’une expression d’égalité sont de types différents, JavaScript les convertira dans le type le plus proche des deux opérandes. Par exemple, toutes les chaînes composées uniquement de chiffres seront converties en nombres.

Examinez l’exemple suivant qui démontre cela, mais JavaScript (tout comme PHP) possède un opérateur === qui permet de comparer à la fois les valeurs, mais aussi le type des valeurs :


<script>  
    age = 15  
    age_str = "15"  
    if (age...

L’instruction with

L’instruction with est généralement utilisée pour diminuer la quantité de code à écrire dans certaines situations.

Elle permet de remplacer l’écriture d’une variable ou d’un objet, comme le montre l’exemple suivant :


 <script>   
    ma_chaine = "J'apprends javascrit en quelques leçons." 
 
    document.write("Sans l'instruction with:<br>") 
    document.write("la longueur de la chaine est de " + 
ma_chaine.length + " caractères.<br>")     
    document.write("Conversion en majuscule: " +  
ma_chaine.toUpperCase() + "<br>")  
 
    document.write("<br>Avec l'instruction with:<br>") 
    with (ma_chaine)  {     
           document.write("la longueur de la chaine est de " +  
length + " caractères.<br>")     
           document.write("Conversion en majuscule: " +  
toUpperCase() + "<br>")  
    } 
</script>

À l’écran :

Attention toutefois, l’utilisation de l’instruction with rend le code moins lisible...

Capter les erreurs JavaScript

Il existe deux façons d’intercepter et de traiter les erreurs JavaScript. Soit en utilisant l’événement onerror, soit à l’aide d’une combinaison des mots-clés try et catch.

Les événements sont des actions qui peuvent être détectées par JavaScript. Chaque élément d’une page web comporte certains événements pouvant déclencher des fonctions JavaScript. Par exemple, le clic sur un élément déclenche l’événement onclick, on peut ainsi ajouter du code quand l’utilisateur clique sur un objet particulier de la page web.

1. onerror

L’évènement onerror permet d’intercepter un évènement produit par une erreur et d’y associer une liste d’instructions, l’exemple suivant montre son utilisation :


<script>   
    //on introduit volairement une faute  
    //de frappe pour déclcencher une erreur 
    onerror = errorHandler  
    document.writ("Hello Michel !");  
 
    function errorHandler(message, url, line)  {  
          output = "Oops, une erreur a été détectée.\n\n";  
          output += "Erreur: "...

Les conditions

Comme dans de nombreux langages, les conditions permettent d’orienter le déroulement du script en fonction de certains paramètres, certaines actions de l’utilisateur, etc.

1. L’instruction if

Vous avez probablement déjà vu dans les paragraphes précédents l’utilisation de l’instruction if, elle est presque incontournable. Le code est exécuté uniquement si l’expression conditionnelle est vraie. La syntaxe est la même qu’en PHP, l’instruction doit être écrite entre parenthèses et vous pouvez omettre les accolades s’il n’y a qu’une seule instruction à exécuter dans la condition :


<script> 
    age = 15; 
    if (age >= 18)  
        document.write ('Adulte'); 
</script>

2. L’instruction else

Lorsqu’une condition n’est pas remplie, c’est-à-dire que l’évaluation de la condition est fausse, le bloc d’instructions contenu dans le bloc else sera exécuté :


<script> 
    age = 15; 
    if (age >= 18)  
        document.write ('Adulte'); 
    else { 
        document.write ('Enfant'); 
        prenom = "Michel"; ...

Les boucles

Encore une fois, vous trouverez de nombreuses similitudes entre JavaScript et PHP en ce qui concerne les boucles (while, do ... while, for), voyez plutôt.

1. Les boucles while

En JavaScript, une boucle while vérifie d’abord la valeur d’une expression et commence à exécuter les instructions dans la boucle uniquement si cette expression est vraie. Si elle est fausse, l’exécution passe à l’instruction suivante (celle après la fin de la boucle dont on sort).

À la fin d’une itération de la boucle, l’expression est à nouveau testée pour voir si elle est vraie, et le processus continue jusqu’à ce que l’expression évaluée soit fausse, et le code passe alors aux instructions suivant la boucle, par exemple :


<script>   
    compteur = 0 
    while (compteur < 5)  { 
          document.write("compteur = " + compteur + "<br>")     
          compteur++;   
    }  
</script>

À l’écran, on obtient :

N’oubliez pas d’incrémenter votre variable dans une boucle (la variable compteur dans l’exemple ci-dessus), sous peine de rester dans une boucle infinie.

2. Les boucles do ... while

Cette boucle est similaire...

Les expressions en JavaScript