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 : JumpCré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.
BibliographieEloquent 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