Javascript : Fonctions for noobs
1. Javascript & fonctions
1.1 Créer une fonction
Définir & exécuter une fonction (1)
function sayHello(){
alert('hello');
}
!
sayHello();
// hello
Définir & exécuter une fonction (2)
sayHello();
!
function sayHello(){
alert('hello');
}
// hello
Return & side effects
function sayHello(){
alert('hello');
}
!
sayHello();
!
function sayHello(name){
return 'Hello '+name;
}
!
alert(sayHello('toto'));
// hello
// Hello toto
1.2 Paramètres
Fonction & paramètres
function sayHello(name){
return 'Hello '+name;
}
!
alert(sayHello());
!
alert(sayHello('Brandon', 'Jason', 'Kevin'));
// Hello undefined
// Hello Brandon
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
1.3 The call stack
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
The call stack (2)
function poule() {
return oeuf();
}
function oeuf() {
return poule();
}
console.log(poule() + " était là avant.");
// RangeError: Maximum call stack size exceeded
2. fonctions & scope
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
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
3. Recursion
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);
4. Mise en pratique
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
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é.
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é.
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

Javascript #4.1 : fonctions for noobs

  • 1.
  • 2.
    1. Javascript &fonctions
  • 3.
  • 4.
    Définir & exécuterune fonction (1) function sayHello(){ alert('hello'); } ! sayHello(); // hello
  • 5.
    Définir & exécuterune fonction (2) sayHello(); ! function sayHello(){ alert('hello'); } // hello
  • 6.
    Return & sideeffects function sayHello(){ alert('hello'); } ! sayHello(); ! function sayHello(name){ return 'Hello '+name; } ! alert(sayHello('toto')); // hello // Hello toto
  • 7.
  • 8.
    Fonction & paramètres functionsayHello(name){ return 'Hello '+name; } ! alert(sayHello()); ! alert(sayHello('Brandon', 'Jason', 'Kevin')); // Hello undefined // Hello Brandon
  • 9.
    Paramètres par default functionsayHello(name){ name = typeof name === 'undefined' ? 'Jason' : name; return 'Hello '+name; } ! alert(sayHello('Kevin')); alert(sayHello()); // Hello Kevin // Hello Jason
  • 10.
  • 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.
  • 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.
  • 17.
    Exemple de recursion functioninception(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 enpratique
  • 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 votreattention.
  • 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