Javascript #4.1 : fonctions for noobs

1. Javascript : Fonctions for noobs

2. 1. Javascript & fonctions

3. 1.1 Créer une fonction

4. Définir & exécuter une fonction (1)
function sayHello(){
alert('hello');
}
!
sayHello();
// hello

5. Définir & exécuter une fonction (2)
sayHello();
!
function sayHello(){
alert('hello');
}
// hello

6. Return & side effects
function sayHello(){
alert('hello');
}
!
sayHello();
!
function sayHello(name){
return 'Hello '+name;
}
!
alert(sayHello('toto'));
// hello
// Hello toto

7. 1.2 Paramètres

8. Fonction & paramètres
function sayHello(name){
return 'Hello '+name;
}
!
alert(sayHello());
!
alert(sayHello('Brandon', 'Jason', 'Kevin'));
// Hello undefined
// Hello Brandon

9. Paramètres par default
function sayHello(name){
name = typeof name === 'undefined' ? 'Jason' : name;
return 'Hello '+name;
}
!
alert(sayHello('Kevin'));
alert(sayHello());
// Hello Kevin
// Hello Jason

10. 1.3 The call stack

11. The call stack (1)
function sayHello(name){
return 'Hello '+name;
}
!
alert(sayHello('Jason'));
!
alert(sayHello('Kevin'));
!
alert(sayHello('Brandon'));
// Hello Jason
// Hello Kevin
// Hello Brandon

12. The call stack (2)
function poule() {
return oeuf();
}
function oeuf() {
return poule();
}
console.log(poule() + " était là avant.");
// RangeError: Maximum call stack size exceeded

13. 2. fonctions & scope

14. Portée des variables (1)
var helloWorld = 'Hello World!';
function sayHello(){
alert(helloWorld);
}
!
sayHello()
alert(helloWorld);
function sayHello(){
var helloWorld = 'Hello World!';
alert(helloWorld);
}
!
sayHello();
alert(helloWorld);
// Hello World!
// Hello World!
// Hello World!
// undefined

15. Portée des variables (2)
var whoAmI = "Jason";
!
var f1 = function() {
var whoAmI = "Kevin";
};
f1();
console.log(whoAmI);
!
var f2 = function() {
whoAmI = "Brandon";
};
f2();
console.log(whoAmI);
// Jason
// Brandon

16. 3. Recursion

17. Exemple de recursion
function inception(timerate){
timerate = timerate / 12;
console.log('Level ' + level);
console.log("1 second is %d second", 1/timerate);
if(level == 4){
console.log("The Limbo");
return;
}
level++;
inception(timerate);
}
!
var level = 1, timerate = 1;
inception(timerate);

18. 4. Mise en pratique

19. Exercice 1 : Evil genius (1)
Vous êtes chargé par le Docteur Denfer de créer une page
web permettant de simuler la propagation d’une maladie
mortelle à la population française.
L’utilisateur saisie un taux de mortalité et un coefficient de
viralité. Le programme calcule ensuite le nombre d’itérations
nécessaires pour que toute la population soit décimée.
29 instructions maximum

20. Exercice 1 : Evil genius (2)
31 instructions maximum
Quelques contraintes :
- Si les données saisies ne permettent pas d’exterminer la
population française en moins de 36 itérations, le programme
s’arrête.
- L’épidémie commence avec un patient 0.
- La population française est de 66 000 000 habitants.
- La simulation doit utiliser la récursivité.

21. Exercice 2 : Jump
Créer une page web permettant de jouer à un jeu consistant
à choisir les coordonnées d’un saut en parachute.
Le jeu génère des données aléatoires concernant la direction du
vent (gauche ou droite), la vitesse du vent (1 à 10) et la hauteur
du saut (10 à 110). Le joueur choisie ensuite à quelle abscisse il
souhaite sauter (1 à 100).
50 instructions maximum
Le jeux simule la descente et affiche chaque itération dans la
console de manière « graphique ».
Si le joueur sort de la zone cible (0, 100) le jeux s’arrête.
Si grace à la saisie du joueur le parachutiste attend la zone cible
il a gagné.

22. Merci pour votre attention.

23. 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