Design numérique

Javascript / Agir : boucles, conditions, fonctions

Les boucles

Les boucles sont des outils programmatiques qui permettent de répéter une action un nombre de fois défini ou tant qu’une condition autre n’a pas été remplie. En Javascript et dans les autres langages de programmation, il existe différents types de boucles, mais nous n’allons voir qu’un seul type cette année : les boucles for.

for(i=0; i < 3; i++){

    console.log(i);
}   

// Ouput: 0
// Ouput: 1
// Ouput: 2

Elles sont notamment utilisées pour parcourir les tableaux d’éléments, comme ceci:

var tableau = [1, 1.1, "Alan", true];

for(i=0; i < tableau.length; i++){

    console.log(i, tableau[i]);
}   

// Output: 0, 1
// Output: 1, 1.1
// Output: 2, "Alan"
// Output: 3, true

Les conditions

Les conditions sont des outils programmatiques qui permettent d’exécuter une série de lignes de code seulement sous certaines conditions.

Les opérateurs de base

Pour définir une condition, on utilise des opérateurs tels que:

> qui signifie "plus grand que"
< qui signifie "plus petit que"
== qui signifie "égale à" (ATTENTION deux signes égals !!! Un seul redéfinirait la valeur de gauche)

// PLUS DE CAILLOUX OU DE BIJOUX ? 

var cailloux = 6;
var bijoux = 10;

if(cailloux > bijoux){

    console.log("Il y a plus de cailloux que de bijoux.");    
}

if(cailloux < bijoux){

    console.log("Il y a moins de cailloux que de bijoux.");
}

if(cailloux == bijoux){

    console.log("Il y a autant de cailloux que de bijoux.");
}

La condition "else"

La condition else sert à provoquer une action en cas de non vérification de la condition précédemment énoncée avec if.

// PLUS DE CAILLOUX OU DE BIJOUX ? 

var cailloux = 6;
var bijoux = 10;

if(cailloux > bijoux){

    console.log("Il y a plus de cailloux que de bijoux.");    

}else{

    // Propositions possiblement vraies

    console.log("Il y a moins de cailloux que de bijoux.");
    console.log("Il y a autant de cailloux que de bijoux.");
}

La condition else if sert à provoquer une action en cas de non-vérification, et de vérification d'une autre condition.

// PLUS DE CAILLOUX OU DE BIJOUX ? 

var cailloux = 6;
var bijoux = 10;

if(cailloux > bijoux){

    console.log("Il y a plus de cailloux que de bijoux.");    

}else if(cailloux == bijoux) {

    console.log("Il y a autant de cailloux que de bijoux.");

}else{

    console.log("Il y a moins de cailloux que de bijoux.");
}

Les opérateurs additionnels

Il est également possible d'enchainer les conditions, afin de vérifier si les deux, ou seulement l'une d'elle sont vraie. Pour définir une série de conditions qui peuvent être ou non vraie, on utilise des opérateurs tels que :

&& qui signifie "et", c’est-à-dire que les deux conditions doivent être vraies pour que la proposition soit vraie.
|| qui signifie "ou", c’est-à-dire que l’une des deux conditions doit être vraie pour que la proposition soit vraie.

// OPÉRATEUR AND 

var temps = "pluie";
var temperature = 2;

if(temps == "pluie" && temperature < 10){

    // Proposition vraie

    console.log("Il pleut et il fait froid.");

}else{

    // Propositions possiblement vraies

    console.log("Il pleut mais il ne fait pas froid.");
    console.log("Il ne pleut pas mais il froid.");
    console.log("Il ne pleut pas et il ne fait pas froid.");

}

// OPÉRATEUR OR

var temps = "pluie";
var temperature = 2;

if(temps == "pluie" || temperature < 10){

    // Propositions possiblement vraies

    console.log("Il pleut et il fait froid.");
    console.log("Il pleut mais il ne fait pas froid.");
    console.log("Il ne pleut pas et il ne fait pas froid.");

}else{

    // Proposition vraie

    console.log("Il ne pleut pas et il ne fait pas froid.");
}

Les fonctions

Les fonctions sont des outils programmatiques qui permettent de réutiliser un morceau de code sans avoir besoin de le réécrire entièrement. Celles-ci se définissent par un nom, ainsi qu’une série d’arguments, et ou non une valeur de retour. Les arguments sont des variables utilisées à l’intérieur de la fonction, qui diffèrent à chaque lancement de la fonction. Les fonctions peuvent retourner un résultat ou simplement performer une action sans retourner de valeurs.

function comparerCaillouxEtBijoux(cailloux, bijoux){

     if(cailloux > bijoux){

        console.log("Il y a plus de cailloux que de bijoux.");    

    }else if(cailloux == bijoux) {

        console.log("Il y a autant de cailloux que de bijoux.");

    }else{

        console.log("Il y a moins de cailloux que de bijoux.");
    }

}

comparerCaillouxEtBijoux(6, 10);

Un autre exemple, avec notre petit test de météo :

function meteo(temps, temperature){

    var limiteDeFroid = 10;

    if(temps == "pluie"){

        console.log("Il pleut.");

    }else{

        console.log("Il ne pleut pas.");
    }

    if(temperature < limiteDeFroid){

        console.log("Il fait froid.");

    }else{

        console.log("Il ne fait pas froid.");
    }

}

meteo("soleil", 15);

Exercice commun en classe

Créer une fonction qui transforme une chaine de caractères, en passant un caractère sur deux en lowerCase() et un caractères sur deux en upperCase().