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