Ici un exemple de code, donnant l’illusion d’un personnage qui marche:

L’image de départ pour cette animation:

Il est aisé de deviner que suivant la position du fond, avec cette planche de dessin, nous pourrons donner l’illusion de quatre déplacements différents pour ce personnage.

Par la suite…..

Deux animation, le texte, et le personnage plus la suite du texte, déclenchés par un clique sur le bouton.

Testez vous même!

N’hésitez pas à réactualiser la page pour voir le début de l’animation.

Le fichier js:

Il faut bien faire attention à ce que chaque bouton et élément devant être actionné en même temps face partie d’un parent commun.

Le script du fichier classlist.js

Le même code simplifier:

Evaluation!!!

1ere partie:

2eme partie:

Noter qu’il n’y a pas d’espace entre .diapositive.diapositiveActive, dans le css, ceci à pour effet de cibler les deux class.

Dans le script, ajouteClass, de la variable lien04, n’est pas util, puisque que la fonction ne sert uniquement qu’ à retirer.

Le fichier JS:

Autre exercice:

Création d’une galerie avec déplacement des images, plus fondu à la transition.

Le code:

Pour intégrer dans la page html, placer juste avant le </body> le chemin du fichier.

<script src="js/galeries01.js"></script>

Dans le fichier .js, pour récupérer, placer:

var galerie = document.querySelector('#galerie-01');

var afficheur = galerie.querySelector('.afficheur');

var liens =galerie.querySelectorAll('a');

Pour récupérer toutes les photos, il nous faut faire une boucle:

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

liens[i].onclick=function(){

afficheur.src=this.href;

returnfalse;

}

}

Pour un résultat:

Pour rajouter un le titre de l’image, sous l’image nous rajoutons dans le html:

<div class="titreImage">Le titre de l'image</div>

Pour rajouter un le titre de l’image, sous l’image nous rajoutons dans le js:

var titreImage = document.querySelector('.titreImage');

Pour rajouter  le titre de l’image, sous l’image nous rajoutons dans la boucle et la fonction:

titreImage.innerHTML = this.title;

Autre exercice:

Pour arriver au même résulta mais sans rien ajouter au html:

var galerie = document.querySelector('#galerie-01'); 
var afficheur = document.createElement('img'); 
afficheur.classList.add('afficheur'); 
galerie.appendChild(afficheur); 

var titreImage = document.createElement('div'); 
titreImage.classList.add('titre-image'); 
galerie.appendChild(titreImage); 

var liens = galerie.querySelectorAll('a'); 

for ( let i=0 ; i<liens.length ; i++ ) { 
liens[i].onclick=function() { 
afficheur.src=this.href; 
titreImage.innerHTML=this.title; 
return false; 
} 
}

Autre galerie:

var galerie = document.querySelector('#galerie-01');

var afficheur = document.createElement('img');

afficheur.classList.add('afficheur');

galerie.appendChild(afficheur);

var titreImage = document.createElement('div');

titreImage.classList.add('titre-image');

galerie.appendChild(titreImage);

var liens = galerie.querySelectorAll('a');

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

liens[i].onclick=function() {

afficheur.src=this.href;

titreImage.innerHTML=this.title;

returnfalse;

}

}

Le résultat:

Slider:

<link type="text/css" rel="stylesheet" href="css/lightslider.css" /> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/lightslider.js"></script>

<script type="text/javascript"> 
$(document).ready(function() { 
$("#light-slider").lightSlider();  
}); 
</script>

<ul id="light-slider">
<li>
<imgsrc = "https://lp.trucdev.fr/paysages/400/200/1">
</li>
<li>
<imgsrc = "https://lp.trucdev.fr/paysages/400/200/2">
</li>

</ul>

Nous pouvons modifier le slider, pour par exemple, rendre notre slider automatique(en passant les valeur false en true):

<script type="text/javascript">

        $(document).ready(function() {
            $("#light-slider").lightSlider({auto:true,});
        });

    </script> // entre accolade nous pouvons changer beaucoup de chose 
{item:1,auto:true,speed:2000,pause:3000,}

<linktype="text/css"rel="stylesheet"href="css/lightgallery.css"/>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="js/lightgallery.js"></script>

<script type="text/javascript">

$(document).ready(function() {
$("#ma-galerie").lightGallery();
});

</script>

<divid="ma-galerie">

<ahref="https://lp.trucdev.fr/paysages/12000/1000/1"><imgsrc="https://lp.trucdev.fr/paysages/100/100/1"></a>
<ahref="https://lp.trucdev.fr/paysages/12000/1000/2"><imgsrc="https://lp.trucdev.fr/paysages/100/100/2"></a>
<ahref="https://lp.trucdev.fr/paysages/12000/1000/3"><imgsrc="https://lp.trucdev.fr/paysages/100/100/3"></a>

</div>

<link type="text/css" rel="stylesheet" href="css/lightslider.css" /> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/lightslider.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$('#slider-galerie-01').lightSlider({
item:1,
auto:true,
speed:2000,
pause:3000,
gallery:true,
thumbItem:12,
onSliderLoad:function (el) {
el.lightGallery({
selector:'#slider-galerie-01 .lslide'

});
}
})
});
</script>

<h1>Slider-galerie 01</h1>

<divid="slider-galerie-01"class="slider">

<divdata-thumb="https://lp.trucdev.fr/trains/100/50/1"data-src="https://lp.trucdev.fr/trains/1200/800/1"><imgsrc="https://lp.trucdev.fr/trains/1200/400/1"alt=""></div>

<divdata-thumb="https://lp.trucdev.fr/trains/100/50/2"data-src="https://lp.trucdev.fr/trains/1200/800/2"><imgsrc="https://lp.trucdev.fr/trains/1200/400/2"alt=""></div>

<divdata-thumb="https://lp.trucdev.fr/trains/100/50/3"data-src="https://lp.trucdev.fr/trains/1200/800/3"><imgsrc="https://lp.trucdev.fr/trains/1200/400/3"alt=""></div>

</div>

<link type="text/css" rel="stylesheet" href="css/lightslider.css" />
<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<scriptsrc="js/lightslider.js"></script>
<linktype="text/css"rel="stylesheet"href="css/lightgallery.css"/>
<scriptsrc="js/lightgallery-all.js"></script>
<linkrel="stylesheet"href="css/slider01.css">

<script type="text/javascript">
$(document).ready(function() {

$("#light-slider").lightSlider({auto:true, gallery:true,item:1,});

$("#ma-galerie").lightGallery({thumbnail :true,thumbItem:14,});

$('#slider-galerie-01').lightSlider({
item:1,
auto:true,
speed:2000,
pause:3000,
gallery:true,
thumbItem:12,
onSliderLoad:function (el) {
el.lightGallery({
selector:'#slider-galerie-01 .lslide'
});
}
})
});
</script>

Smooth scroll:

<script src="js/jetpack.js"></script>

<script>

varjet = newjetpack({duration:200});
jet.hookAnchors();

</script>

Que contiennent les objets ?

Les objets contiennent trois choses distinctes :

• un constructeur ;

• des propriétés ;

• des méthodes.

Les propriétés

Toute valeur va être placée dans une variable au sein de l’objet : c’est ce que l’on appelle une propriété. Une propriété est une variable contenue dans l’objet, elle contient des informations nécessaires au fonctionnement de l’objet.

Les méthodes

Enfin, il est possible de modifier l’objet. Cela se fait par l’intermédiaire des méthodes. Les méthodes sont des fonctions contenues dans l’objet, et qui permettent de réaliser des opérations sur le contenu de l’objet. Par exemple, dans le cas d’une chaîne de caractères, il existe une méthode qui permet de mettre la chaîne de caractères en majuscules.

Exemple d’utilisation

Ici on attribue a  la variable stagiaire01 les propriétés: prenom et nom auxquelles on attribue une valeur.

var stagiaire01 = {prenom:"truc",nom:"muche"};

Affiche muche 45 ans

Affiche le prénom, le nom et l’age renseignés:

Méthode:

(La fonction est la méthode).

Afficher l’identité et le lieu renseigner.

Affiche l’identité d’un stagiaire et l’ajoute dans la cible:

Nous allons créer une chaîne de caractères, pour ensuite afficher son nombre de caractères et la transformer en majuscules. Soit la mise en pratique de la partie théorique que nous venons de voir.

var myString = 'Ceci est une chaîne de caractères'; // On crée un objet String

alert(myString.length); // On affiche le nombre de caractères, au moyen de la propriété « length »

alert(myString.toUpperCase()); // On récupère la chaîne en majuscules, avec la méthode toUpperCase()

On remarque la présence d’un point. Ce dernier permet d’accéder aux propriétés et aux méthodes d’un objet. Ainsi, quand nous écrivons myString.length, nous demandons au JavaScript de fournir le nombre de caractères contenus dans myString.

Avec myString.toUpperCase(), je demande au JavaScript de changer la casse de la chaîne, ici, tout mettre en majuscules. À l’inverse, la méthode toLowerCase()permet de tout mettre en minuscules.

Nous en avons déjà rencontré trois :

1. Number: l’objet qui gère les nombres ;

2. Boolean: l’objet qui gère les booléens ;

3. String: l’objet qui gère les chaînes de caractères.

Les tableaux (l’objetArray)

Un tableau, ou plutôt un array en anglais, est une variable qui contient plusieurs valeurs, appelées items. Chaque item est accessible au moyen d’un indice (index en anglais) et dont la numérotation commence à partir de 0. Voici un schéma représentant un tableau, qui stocke cinq items :

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];

var myArray_a = [42, 12, 6, 3];
var myArray_b = [42, 'Sébastien', 12, 'Laurence'];

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];

myArray[1] = 'Clarisse';

alert(myArray[1]); // Affiche : « Clarisse »

Notre exemple :

Idem mais avec une fonction:

Additionner le total d’un tableau:

Calculer la moyen:

Opérations sur les tableaux

var myArray = ['Sébastien', 'Laurence'];

myArray.push('Ludovic'); // Ajoute « Ludovic » à la fin du tableau
myArray.push('Pauline', 'Guillaume'); // Ajoute « Pauline » et « Guillaume » à la fin du tableau

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];

myArray.shift(); // Retire « Sébastien »
myArray.pop(); // Retire « Guillaume »

alert(myArray); // Affiche « Laurence,Ludovic,Pauline »

var cousinsString = 'Pauline Guillaume Clarisse',
cousinsArray = cousinsString.split(' ');

alert(cousinsString);
alert(cousinsArray);

La méthode split()va couper la chaîne de caractères à chaque fois qu'elle va rencontrer une espace. Les portions ainsi découpées sont placées dans un tableau, ici cousinsArray.

var cousinsString_2 = cousinsArray.join('-');

alert(cousinsString_2);

Parcourir un tableau

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];

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

alert(myArray[i]);

}

var family = {
self: 'Sébastien',
sister: 'Laurence',
brother: 'Ludovic',
cousin_1: 'Pauline',
cousin_2: 'Guillaume'
};

var myObject = {
item1: 'Texte 1',
item2: 'Texte 2'
};

family.sister;

family['sister'];

var id = 'sister';

alert(family[id]); // Affiche : « Laurence »

family['uncle'] = 'Didier'; // « Didier » est ajouté et est accessible via l'identifiant « uncle »

ou

family.uncle = 'Didier'; // Même opération mais d'une autre manière

Parcourir un objet avecfor in

var family = {
    self:     'Sébastien',
    sister:   'Laurence',
    brother:  'Ludovic',
    cousin_1: 'Pauline',
    cousin_2: 'Guillaume'
};

for (var id in family) { // On stocke l'identifiant dans "id" pour parcourir l'objet "family".
	
    alert(family[id]);
		
}

var family = {
    self:     'Sébastien',
    sister:   'Laurence',
    brother:  'Ludovic',
    cousin_1: 'Pauline',
    cousin_2: 'Guillaume'
};

for (var id in family) { // On stocke l'identifiant dans "id" pour parcourir l'objet "family".
	
    alert(family[id]);
		
}

function getCoords() {
/* Script incomplet, juste pour l'exemple */

Les arguments

Créer et utiliser un argument

Comme nous venons de le dire, les arguments sont des informations envoyées à une fonction. Ces informations peuvent servir à beaucoup de choses.

function myFunction(arg) { // Notre argument est la variable « arg » // Une fois que l’argument a été passé à la fonction, vous allez le retrouver dans la variable « arg »

alert(‘Votre argument : ‘ + arg);

}

myFunction(‘En voilà un beau test !’);

Ex:

function myFunction(arg) {

alert(‘Votre argument : ‘ + arg);

}

myFunction(prompt(‘Que souhaitez-vous passer en argument à la fonction ?’));

Dans cet exemple quand on remplit le champs par, par exemple: il fait beau! et que l’on valide, la fonction nous renvoie Votre argument : il fait beau!

La boucle while permet de répéter une liste d’instructions tant que la condition est vérifiée.

Tant que celle-ci est vraie (true), la boucle se répète. Dès que la condition est fausse (false), la boucle s’arrête. Il faut s’arranger, à un moment, pour que la condition ne soit plus vraie.

Voici un exemple de la syntaxe d’une boucle while:

while (condition) {
instruction_1;
instruction_2;
instruction_3;
}

Ex:

var number = 1;

while (number < 10) {
number++;
}

alert(number); // Affiche : « 10 »

Exemple:

Nous allons utiliser une boucle while, qui va demander, à chaque passage dans la boucle, un prénom supplémentaire. La boucle ne s’arrêtera que lorsque l’utilisateur choisira de ne plus entrer de prénom.

var nicks = ‘ ‘,
nick,
proceed = true;

while (proceed) {
nick = prompt(‘Entrez un prénom :’);

if (nick) {
nicks += nick + ‘ ‘; // Ajoute le nouveau prénom ainsi qu’une espace juste après
} else {
proceed = false; // Aucun prénom n’a été entré, donc on fait en sorte d’invalider la condition
}
}

alert(nicks); // Affiche les prénoms à la suite

La boucle do while 

Ressemble très fortement à la boucle while, sauf que dans ce cas la boucle est toujours exécutée au moins une fois. Dans le cas d’une boucle while, si la condition n’est pas valide, la boucle n’est pas exécutée. Avec do while, la boucle est exécutée une première fois, puis la condition est testée pour savoir si la boucle doit continuer.

Voici la syntaxe d’une boucle do while:

do {
instruction_1;
instruction_2;
instruction_3;
} while (condition);

La boucle for

La boucle for est une boucle utilisée pour répéter une liste d’instructions un certain nombre de fois.

Le schéma d’une boucle for est le suivant :

for (initialisation; condition; incrémentation) {
instruction_1;
instruction_2;
instruction_3;
}

Dans l’exemple suivant, on va afficher cinq fois une boîte de dialogue à l’aide de alert(), qui affichera le numéro de chaque itération :

for (var iter = 0; iter < 5; iter++) {
alert(‘Itération n°’ + iter);
}

Dans le premier bloc, l’initialisation, on initialise une variable appelée iter qui vaut 0 ; le mot-clé var est requis, comme pour toute initialisation. On définit dans la condition que la boucle continue tant qu’ iter est strictement inférieure à 5. Enfin, dans le bloc d’incrémentation, on indique qu’ iter sera  incrémentée à chaque itération terminée.

Reprenons notre exemple

for (var nicks =  », nick; true;) {
nick = prompt(‘Entrez un prénom :’);

if (nick) {
nicks += nick + ‘ ‘;
} else {
break;
}
}

alert(nicks);

Modifions la boucle de manière à compter combien de prénoms ont été enregistrés. Pour ce faire, nous allons créer une variable de boucle, nommée i, qui sera incrémentée à chaque passage de boucle.

Ecrivez un programme qui affiche tous les nombres entre 1 et 100 avec les exceptions suivantes :

• Il affiche « Fizz » à la place du nombre si celui-ci est divisible par 3.
• Il affiche « Buzz » à la place du nombre si celui-ci est divisible par 5 et non par 3.
• Il affiche « FizzBuzz » à la place du nombre si celui-ci est divisible à la fois par 3 et par 5.

Tout comme le HTML, le JavaScript est généralement exécuté par le navigateur de l’internaute : on parle d’un comportement client-side, par opposition au server-side lorsque le code est exécuté par le serveur.

La syntaxe du JavaScript

Les instructions

Les instructions doivent être séparées par un point-virgule que l’on place à la fin de chaque instruction:

instruction_1;
instruction_2;
instruction_3;

Le JavaScript n’est pas sensible aux espaces.

Commentaires de fin de ligne

instruction_1; // Ceci est ma première instruction
instruction_2;
// La troisième instruction ci-dessous :
instruction_3;

Commentaires multilignes

/* Ce script comporte 3 instructions :
– Instruction 1 qui fait telle chose
– Instruction 2 qui fait autre chose
– Instruction 3 qui termine le script
*/
instruction_1;
instruction_2;
instruction_3;

Les fonctions

Une fonction se compose de deux choses : son nom, suivi d’un couple de parenthèses (une ouvrante et une fermante). Entre les parenthèses se trouvent les arguments, que l’on appelle aussi paramètres. Ceux-ci contiennent des valeurs qui sont transmises à la fonction. Dans le cas duHello world!, ce sont les mots « Hello world! » qui sont passés en paramètre :

alert(‘Hello world!’);

Le JavaScript « dans la page »

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>

<body>

<script>
alert(‘Hello world!’);
</script>

</body>
</html>

Le JavaScript externe

Il est possible, et même conseillé, d’écrire le code JavaScript dans un fichier externe, portant l’extension.js. Ce fichier est ensuite appelé depuis la page Web au moyen de l’élément<script>et de son attributsrcqui contient l’URL du fichier.js. Voici tout de suite un petit exemple :

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>

<body>

<p>
<!–

Contenu de la page Web

…

–>
</p>

<script>
// Un peu de code JavaScript…
</script>

<script src= »hello.js »></script>

</body>
</html>

Déclarer une variable

Le mot-clévarest présent pour indiquer que vous déclarez une variable.

Le signe = sert à attribuer une valeur à la variable ; ici nous lui avons attribué le nombre 2.

var myVariable = 2;

Vous pouvez déclarer et assigner des variables sur une seule et même ligne :

var myVariable1, myVariable2;

On peut ce servir de la variable let pour donner une valeur à une variable uniquement dans un bloque spécifique.

Le type numérique (alias number) :

var number = 5.5;

Les chaînes de caractères (alias string) :

Entouré de ‘ ou « :

Les booléens (alias boolean) :

var isTrue = true;
var isFalse = false;

Il se peut que vous ayez un jour ou l’autre besoin de tester l’existence d’une variable ou d’en vérifier son type. Dans ce genre de situations, l’instructiontypeofest très utile, voici comment l’utiliser :

var number = 2;

alert(typeof number); // Affiche : « number »

Convertir une chaîne de caractères en nombre

Les conditions

La base de toute condition : les booléens

Les opérateurs de comparaison

var number1 = 2, number2 = 2, number3 = 4, result;

result = number1 == number2; // On spécifie deux variables avec l’opérateur de comparaison entre elles
alert(result); // Affiche « true », la condition est donc vérifiée car les deux variables contiennent bien la même valeur

result = number1 == number3;
alert(result); // Affiche « false », la condition n’est pas vérifiée car 2 est différent de 4

result = number1 < number3;
alert(result); // Affiche « true », la condition est vérifiée car 2 est bien inférieur à 4

var number = 4, text = ‘4’, result;

result = number == text;
alert(result); // Affiche « true » alors que « number » est un nombre et « text » une chaîne de caractères

result = number === text;
alert(result); // Affiche « false » car cet opérateur compare aussi les types des variables en plus de leurs valeurs

Les opérateurs logiques

L’opérateur ET

Cet opérateur vérifie la condition lorsque toutes les valeurs qui lui sont passées valent true. Si une seule d’entre elles vaut false alors la condition ne sera pas vérifiée.

L’opérateur OU

Cet opérateur est plus « souple » car il renvoietruesi une des valeurs qui lui est soumise contienttrue, qu’importent les autres valeurs.

L’opérateur NON

Cet opérateur se différencie des deux autres car il ne prend qu’une seule valeur à la fois. S’il se nomme « NON » c’est parce que sa fonction est d’inverser la valeur qui lui est passée, ainsitruedeviendrafalseet inversement.

Combiner les opérateurs

Tout d’abord un petit résumé (lisez attentivement) : les opérateurs de comparaison acceptent chacun deux valeurs en entrée et renvoient un booléen, tandis que les opérateurs logiques acceptent plusieurs booléens en entrée et renvoient un booléen.

var result = 2 > 8 && 8 > 2;
alert(result); // Affiche « false »

Combiner les opérateurs

Tout d’abord un petit résumé (lisez attentivement) : les opérateurs de comparaison acceptent chacun deux valeurs en entrée et renvoient un booléen, tandis que les opérateurs logiques acceptent plusieurs booléens en entrée et renvoient un booléen.

var result = 2 > 8 && 8 > 2;
alert(result); // Affiche « false »

La structure if pour dire « si »

Comme vous pouvez le constater, le code d’une condition est exécuté si le booléen reçu est true alors que false empêche l’exécution du code.

La structure else pour dire « sinon »

confirm() on lui passe en paramètre une chaîne de caractères qui sera affichée à l’écran et elle retourne un booléen en fonction de l’action de l’utilisateur

if (confirm(‘Pour accéder à ce site vous devez avoir 18 ans ou plus, cliquez sur « OK » si c\’est le cas.’)) {
alert(‘Vous allez être redirigé vers le site.’);
}

else {
alert(« Désolé, vous n’avez pas accès à ce site. »);
}

La structure else  if pour dire « sinon si »

• Une première condition est à tester ;

• Une deuxième condition est présente et sera testée si la première échoue ;

• Et si aucune condition ne se vérifie, la structure else fait alors son travail.

var floor = parseInt(prompt(« Entrez l’étage où l’ascenseur doit se rendre (de -2 à 30) : »));

if (floor == 0) {

alert(‘Vous vous trouvez déjà au rez-de-chaussée.’);

} else if (-2 <= floor && floor <= 30) {

alert(« Direction l’étage n° » + floor + ‘ !’);

} else {

alert(« L’étage spécifié n’existe pas. »);

}

Le cas de l’opérateur OU

En plus de sa fonction principale, permet de renvoyer la première variable possédant une valeur évaluée à true!

var conditionTest1 =  », conditionTest2 = ‘Une chaîne de caractères’;

alert(conditionTest1 || conditionTest2);

Ce code nous retourne la valeur « Une chaîne de caractères » parce que l’opérateur OU va se charger de retourner la valeur de la première variable dont le contenu est évalué à true.

La condition « switch »

• On écrit le mot-clé switch suivi de la variable à analyser entre parenthèses et d’une paire d’accolades ;

• Dans les accolades se trouvent tous les cas de figure pour notre variable, définis par le mot-clé case suivi de la valeur qu’il doit prendre en compte (cela peut être un nombre mais aussi du texte) et de deux points ;

• Tout ce qui suit les deux points d’un case sera exécuté si la variable analysée par le switch contient la valeur du case;

• À chaque fin d’un case on écrit l’instruction break pour « casser » le switch et ainsi éviter d’exécuter le reste du code qu’il contient ;

• Et enfin on écrit le mot-clé default suivi de deux points. Le code qui suit cette instruction sera exécuté si aucun des cas précédents n’a été exécuté. Attention, cette partie est optionnelle, vous n’êtes pas obligés de l’intégrer à votre code.

var drawer = parseInt(prompt(‘Choisissez le tiroir à ouvrir (1 à 4) :’));

switch (drawer) {
case 1:
alert(‘Contient divers outils pour dessiner : du papier, des crayons, etc.’);
break;

case 2:
alert(‘Contient du matériel informatique : des câbles, des composants, etc.’);
break;

case 3:
alert(‘Ah ? Ce tiroir est fermé à clé ! Dommage !’);
break;

case 4:
alert(‘Contient des vêtements : des chemises, des pantalons, etc.’);
break;

default:
alert(« Info du jour : le meuble ne contient que 4 tiroirs et, jusqu’à preuve du contraire, les tiroirs négatifs n’existent pas. »);
}

Les ternaires

Ex:

• La variable reponse qui va être analysée par la ternaire ;

• Un point d’interrogation suivi d’une valeur (un nombre, du texte, etc.) ;

• Deux points suivis d’une deuxième valeur et enfin le point-virgule marquant la fin de la ligne d’instructions.

si la variable reponse vaut true alors la valeur retournée par la ternaire sera celle écrite juste après le point d’interrogation, si elle vaut false alors la valeur retournée sera celle après les deux points.

Un petit exercice

fournir un commentaire sur quatre tranches d’âge différentes qui sont les suivantes :

Le déroulement du code sera le suivant :

• L’utilisateur charge la page Web ;

• Il est ensuite invité à taper son âge dans une fenêtre d’interaction ;

• Une fois l’âge fourni l’utilisateur obtient un petit commentaire.

Correction:

var age = parseInt(prompt(‘Quel est votre âge ?’)); // Ne pas oublier : il faut « parser » (cela consiste à analyser) la valeur renvoyée par prompt() pour avoir un nombre !

if (age <= 0) { // Il faut bien penser au fait que l’utilisateur peut rentrer un âge négatif

alert(« Oh vraiment ? Vous avez moins d’un an ? C’est pas très crédible =p »);

} else if (1 <= age && age < 18) {

alert(« Vous n’êtes pas encore majeur. »);

} else if (18 <= age && age < 50) {

alert(‘Vous êtes majeur mais pas encore senior.’);

} else if (50 <= age && age < 60) {

alert(‘Vous êtes senior mais pas encore retraité.’);

} else if (60 <= age && age <= 120) {

alert(‘Vous êtes retraité, profitez de votre temps libre !’);

} else if (age > 120) { // Ne pas oublier les plus de 120 ans, ils n’existent probablement pas mais on le met dans le doute

alert(« Plus de 120 ans ?!! C’est possible ça ?! »);

} else { // Si prompt() contient autre chose que les intervalles de nombres ci-dessus alors l’utilisateur a écrit n’importe quoi

alert(« Vous n’avez pas entré d’âge ! »);

}

Autre exercice:

Quelle heure sera-t-il dans une seconde?