SlideShare ist ein Scribd-Unternehmen logo
1 von 19
Downloaden Sie, um offline zu lesen
Javascript : Boucles & conditions
1. structures conditionnelles
Test simple (1) 
var sheldonQi = 187, leonardQi = 173; 
! 
if(sheldonQi > leonardQi){ 
console.log('Bazinga'); 
}
Test simple (2) 
var sheldonQi = 187, leonardQi = 173; 
! 
if(sheldonQi > leonardQi){ 
console.log('Bazinga'); 
}else{ 
console.log('My mother had me tested'); 
}
Test simple (3) 
var sheldonQi = 187, leonardQi = 173; 
! 
if(sheldonQi > leonardQi){ 
console.log('Bazinga'); 
}else if(sheldonQi == leonardQi){ 
console.log('IMPOSSIBRU!!'); 
}else{ 
console.log('My mother had me tested'); 
}
Switch 
var qi = prompt('Quel est votre Qi ?'); 
! 
switch(Number(qi)){ 
case 187: 
console.log('Sheldon'); 
break; 
case 173: 
console.log('Leonard'); 
break; 
case 164: 
console.log('Rajesh'); 
break; 
case 160: 
console.log('Howard'); 
break; 
default: 
console.log('Penny'); 
break; 
}
2. Boucles
Boucle while (1) 
var i = 0; 
while(i < 5){ 
console.log(i); 
i++; 
}
Boucle while (2) 
var i = 0; 
while(i < 5){ 
console.log(i); 
if(i == 3){ 
break; 
} 
i++; 
}
Boucle do … while 
var i = 0; 
do{ 
console.log(i); 
i++; 
}while(i < 5);
Boucle for 
for (var i = 0; i < 5; i++) { 
console.log(i); 
};
3. Mise en pratique
Quelques fonctions utiles 
console.log('toto'); 
! 
var x = prompt('toto ?'); 
console.log(x); 
! 
console.log(x.length); 
Number(4); 
String(4); 
x.indexOf('y'); 
! 
Math.random(); 
Math.floor();
Exercice 1 : Guess the Number 
Créer une page web permettant de jouer à un jeu consistant 
à trouver un nombre compris entre 1 et 1000. 
Tant que l’utilisateur n’a pas trouvé le bon nombre, le jeu 
affiche un indice sous forme de « plus » ou « moins ». 
A la fin du jeux le programme affiche le nombre d’itérations 
nécessaires pour vaincre le jeux. 
16 instructions maximum
Exercice 2 : Fizz Buzz Woof 
Créer une page web permettant de jouer au Fizz Buzz Woof. 
Le programme devra demander à l’utilisateur à chaque 
nombre de 1 à 1000 d’indiquer : 
- fizz si le nombre contient ou est divisible par 3 
- buzz si le nombre contient ou est divisible par 5 
- woof si le nombre contient ou est divisible par 7 
Si un nombre respecte plusieurs conditions chaque mot doit 
être indiqué. 
En cas de mauvaise réponse le jeux s’arrête et affiche le score 
du joueur dans une popup.
Exercice 2 : Fizz Buzz Woof 
1, 2, FizzFizz (3), 4, BuzzBuzz (5), Fizz (6), WoofWoof (7), 8, 
Fizz (9), Buzz (10), 11, Fizz (12), Fizz (13), Woof (14), 
FizzBuzzBuzz (15), 16, Woof (17), Fizz (18), 19, Buzz (20), 
FizzWoof (21), 22, Fizz (23), Fizz (24), BuzzBuzz (25), 26, 
FizzWoof (27), Woof (28), 29, FizzFizzBuzz (30), Fizz (31), Fizz 
(32), FizzFizzFizz (33), ... 
30 instructions maximum
Exercice 3 : La tour de Pise 
Créer une page web permettant d’afficher une version 
simplifié de la tour de Pise dans la console. 
Le programme devra demander à l’utilisateur au démarrage la 
hauteur et la largeur qu’il souhaite pour la construction. 
## 
#### 
#### 
#### 
#### 
#### 
#### 
#### 
#### 
#### 
------ 30 instructions maximum
Merci pour votre attention.
Bibliographie 
Eloquent JavaScript - Marijn Haverbeke 
http://eloquentjavascript.net 
Dynamisez vos sites web avec Javascript ! - Johann Pardanaud & Sébastien de la Marck 
http://fr.openclassrooms.com/informatique/cours/dynamisez-vos-sites-web-avec-javascript 
JavaScript Fundamentals - Jeremy McPeak 
http://code.tutsplus.com/courses/javascript-fundamentals 
Guide JavaScript - teoli, BenoitL, delislejm, Ame_Nomade, SphinxKnight 
https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide

Weitere ähnliche Inhalte

Andere mochten auch

Wordpress #2 : customisation
Wordpress #2 : customisationWordpress #2 : customisation
Wordpress #2 : customisationJean Michel
 
PHP #4 : sessions & cookies
PHP #4 : sessions & cookiesPHP #4 : sessions & cookies
PHP #4 : sessions & cookiesJean Michel
 
Dev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummiesDev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummiesJean Michel
 
Gestion de projet #4 : spécification
Gestion de projet #4 : spécificationGestion de projet #4 : spécification
Gestion de projet #4 : spécificationJean Michel
 
Javascript #2.2 : jQuery
Javascript #2.2 : jQueryJavascript #2.2 : jQuery
Javascript #2.2 : jQueryJean Michel
 
PHP & MYSQL #5 : fonctions
PHP & MYSQL #5 :  fonctionsPHP & MYSQL #5 :  fonctions
PHP & MYSQL #5 : fonctionsJean Michel
 
WebApp #2 : responsive design
WebApp #2 : responsive designWebApp #2 : responsive design
WebApp #2 : responsive designJean Michel
 
PHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulairesPHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulairesJean Michel
 
Wordpress #1 : introduction
Wordpress #1 : introductionWordpress #1 : introduction
Wordpress #1 : introductionJean Michel
 
Javascript #5.1 : tp1 zombies!
Javascript #5.1 : tp1 zombies!Javascript #5.1 : tp1 zombies!
Javascript #5.1 : tp1 zombies!Jean Michel
 
Architecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezoneArchitecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezoneJean Michel
 
Les modèles économiques du web
Les modèles économiques du webLes modèles économiques du web
Les modèles économiques du webJean Michel
 
Javascript #6 : objets et tableaux
Javascript #6 : objets et tableauxJavascript #6 : objets et tableaux
Javascript #6 : objets et tableauxJean Michel
 
Javascript #8 : événements
Javascript #8 : événementsJavascript #8 : événements
Javascript #8 : événementsJean Michel
 
Javascript #10 : canvas
Javascript #10 : canvasJavascript #10 : canvas
Javascript #10 : canvasJean Michel
 
WebApp #4 : Consuming REST APIs
WebApp #4 : Consuming REST APIs WebApp #4 : Consuming REST APIs
WebApp #4 : Consuming REST APIs Jean Michel
 
Javascript #11: Space invader
Javascript #11: Space invaderJavascript #11: Space invader
Javascript #11: Space invaderJean Michel
 

Andere mochten auch (20)

Wordpress #2 : customisation
Wordpress #2 : customisationWordpress #2 : customisation
Wordpress #2 : customisation
 
PHP #4 : sessions & cookies
PHP #4 : sessions & cookiesPHP #4 : sessions & cookies
PHP #4 : sessions & cookies
 
PHP #6 : mysql
PHP #6 : mysqlPHP #6 : mysql
PHP #6 : mysql
 
Dev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummiesDev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummies
 
Gestion de projet #4 : spécification
Gestion de projet #4 : spécificationGestion de projet #4 : spécification
Gestion de projet #4 : spécification
 
Javascript #2.2 : jQuery
Javascript #2.2 : jQueryJavascript #2.2 : jQuery
Javascript #2.2 : jQuery
 
#4 css 101
#4 css 101#4 css 101
#4 css 101
 
PHP & MYSQL #5 : fonctions
PHP & MYSQL #5 :  fonctionsPHP & MYSQL #5 :  fonctions
PHP & MYSQL #5 : fonctions
 
Projet timezone
Projet timezoneProjet timezone
Projet timezone
 
WebApp #2 : responsive design
WebApp #2 : responsive designWebApp #2 : responsive design
WebApp #2 : responsive design
 
PHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulairesPHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulaires
 
Wordpress #1 : introduction
Wordpress #1 : introductionWordpress #1 : introduction
Wordpress #1 : introduction
 
Javascript #5.1 : tp1 zombies!
Javascript #5.1 : tp1 zombies!Javascript #5.1 : tp1 zombies!
Javascript #5.1 : tp1 zombies!
 
Architecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezoneArchitecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezone
 
Les modèles économiques du web
Les modèles économiques du webLes modèles économiques du web
Les modèles économiques du web
 
Javascript #6 : objets et tableaux
Javascript #6 : objets et tableauxJavascript #6 : objets et tableaux
Javascript #6 : objets et tableaux
 
Javascript #8 : événements
Javascript #8 : événementsJavascript #8 : événements
Javascript #8 : événements
 
Javascript #10 : canvas
Javascript #10 : canvasJavascript #10 : canvas
Javascript #10 : canvas
 
WebApp #4 : Consuming REST APIs
WebApp #4 : Consuming REST APIs WebApp #4 : Consuming REST APIs
WebApp #4 : Consuming REST APIs
 
Javascript #11: Space invader
Javascript #11: Space invaderJavascript #11: Space invader
Javascript #11: Space invader
 

Mehr von Jean Michel

Startup #7 : how to get customers
Startup #7 : how to get customersStartup #7 : how to get customers
Startup #7 : how to get customersJean Michel
 
HTML & CSS #10 : Bootstrap
HTML & CSS #10 : BootstrapHTML & CSS #10 : Bootstrap
HTML & CSS #10 : BootstrapJean Michel
 
Wordpress #3 : content strategie
Wordpress #3 : content strategieWordpress #3 : content strategie
Wordpress #3 : content strategieJean Michel
 
Architecture logicielle #1 : introduction
Architecture logicielle #1 : introductionArchitecture logicielle #1 : introduction
Architecture logicielle #1 : introductionJean Michel
 
Architecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto frameworkArchitecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto frameworkJean Michel
 
PHP #7 : guess who?
PHP #7 : guess who?PHP #7 : guess who?
PHP #7 : guess who?Jean Michel
 
PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles Jean Michel
 
PHP #1 : introduction
PHP #1 : introductionPHP #1 : introduction
PHP #1 : introductionJean Michel
 
Startup #5 : pitch
Startup #5 : pitchStartup #5 : pitch
Startup #5 : pitchJean Michel
 
WebApp #1 : introduction
WebApp #1 : introductionWebApp #1 : introduction
WebApp #1 : introductionJean Michel
 

Mehr von Jean Michel (12)

Startup #7 : how to get customers
Startup #7 : how to get customersStartup #7 : how to get customers
Startup #7 : how to get customers
 
HTML & CSS #10 : Bootstrap
HTML & CSS #10 : BootstrapHTML & CSS #10 : Bootstrap
HTML & CSS #10 : Bootstrap
 
Wordpress #3 : content strategie
Wordpress #3 : content strategieWordpress #3 : content strategie
Wordpress #3 : content strategie
 
Architecture logicielle #1 : introduction
Architecture logicielle #1 : introductionArchitecture logicielle #1 : introduction
Architecture logicielle #1 : introduction
 
Architecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto frameworkArchitecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto framework
 
PHP #7 : guess who?
PHP #7 : guess who?PHP #7 : guess who?
PHP #7 : guess who?
 
PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles
 
PHP #1 : introduction
PHP #1 : introductionPHP #1 : introduction
PHP #1 : introduction
 
Startup #5 : pitch
Startup #5 : pitchStartup #5 : pitch
Startup #5 : pitch
 
WebApp #3 : API
WebApp #3 : APIWebApp #3 : API
WebApp #3 : API
 
Projet timezone
Projet timezoneProjet timezone
Projet timezone
 
WebApp #1 : introduction
WebApp #1 : introductionWebApp #1 : introduction
WebApp #1 : introduction
 

Javascript #3 : boucles & conditions

  • 1. Javascript : Boucles & conditions
  • 3. Test simple (1) var sheldonQi = 187, leonardQi = 173; ! if(sheldonQi > leonardQi){ console.log('Bazinga'); }
  • 4. Test simple (2) var sheldonQi = 187, leonardQi = 173; ! if(sheldonQi > leonardQi){ console.log('Bazinga'); }else{ console.log('My mother had me tested'); }
  • 5. Test simple (3) var sheldonQi = 187, leonardQi = 173; ! if(sheldonQi > leonardQi){ console.log('Bazinga'); }else if(sheldonQi == leonardQi){ console.log('IMPOSSIBRU!!'); }else{ console.log('My mother had me tested'); }
  • 6. Switch var qi = prompt('Quel est votre Qi ?'); ! switch(Number(qi)){ case 187: console.log('Sheldon'); break; case 173: console.log('Leonard'); break; case 164: console.log('Rajesh'); break; case 160: console.log('Howard'); break; default: console.log('Penny'); break; }
  • 8. Boucle while (1) var i = 0; while(i < 5){ console.log(i); i++; }
  • 9. Boucle while (2) var i = 0; while(i < 5){ console.log(i); if(i == 3){ break; } i++; }
  • 10. Boucle do … while var i = 0; do{ console.log(i); i++; }while(i < 5);
  • 11. Boucle for for (var i = 0; i < 5; i++) { console.log(i); };
  • 12. 3. Mise en pratique
  • 13. Quelques fonctions utiles console.log('toto'); ! var x = prompt('toto ?'); console.log(x); ! console.log(x.length); Number(4); String(4); x.indexOf('y'); ! Math.random(); Math.floor();
  • 14. Exercice 1 : Guess the Number Créer une page web permettant de jouer à un jeu consistant à trouver un nombre compris entre 1 et 1000. Tant que l’utilisateur n’a pas trouvé le bon nombre, le jeu affiche un indice sous forme de « plus » ou « moins ». A la fin du jeux le programme affiche le nombre d’itérations nécessaires pour vaincre le jeux. 16 instructions maximum
  • 15. Exercice 2 : Fizz Buzz Woof Créer une page web permettant de jouer au Fizz Buzz Woof. Le programme devra demander à l’utilisateur à chaque nombre de 1 à 1000 d’indiquer : - fizz si le nombre contient ou est divisible par 3 - buzz si le nombre contient ou est divisible par 5 - woof si le nombre contient ou est divisible par 7 Si un nombre respecte plusieurs conditions chaque mot doit être indiqué. En cas de mauvaise réponse le jeux s’arrête et affiche le score du joueur dans une popup.
  • 16. Exercice 2 : Fizz Buzz Woof 1, 2, FizzFizz (3), 4, BuzzBuzz (5), Fizz (6), WoofWoof (7), 8, Fizz (9), Buzz (10), 11, Fizz (12), Fizz (13), Woof (14), FizzBuzzBuzz (15), 16, Woof (17), Fizz (18), 19, Buzz (20), FizzWoof (21), 22, Fizz (23), Fizz (24), BuzzBuzz (25), 26, FizzWoof (27), Woof (28), 29, FizzFizzBuzz (30), Fizz (31), Fizz (32), FizzFizzFizz (33), ... 30 instructions maximum
  • 17. Exercice 3 : La tour de Pise Créer une page web permettant d’afficher une version simplifié de la tour de Pise dans la console. Le programme devra demander à l’utilisateur au démarrage la hauteur et la largeur qu’il souhaite pour la construction. ## #### #### #### #### #### #### #### #### #### ------ 30 instructions maximum
  • 18. Merci pour votre attention.
  • 19. Bibliographie Eloquent JavaScript - Marijn Haverbeke http://eloquentjavascript.net Dynamisez vos sites web avec Javascript ! - Johann Pardanaud & Sébastien de la Marck http://fr.openclassrooms.com/informatique/cours/dynamisez-vos-sites-web-avec-javascript JavaScript Fundamentals - Jeremy McPeak http://code.tutsplus.com/courses/javascript-fundamentals Guide JavaScript - teoli, BenoitL, delislejm, Ame_Nomade, SphinxKnight https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide