SlideShare une entreprise Scribd logo
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

Contenu connexe

PDF
Ch42 questions
PDF
Ch4 3 reponses
PDF
Ch42 reponses
PDF
Les modèles économiques du web
PDF
Javascript #2.2 : jQuery
PDF
Dev Web 101 #2 : development for dummies
PDF
Wordpress #2 : customisation
PDF
#4 css 101
Ch42 questions
Ch4 3 reponses
Ch42 reponses
Les modèles économiques du web
Javascript #2.2 : jQuery
Dev Web 101 #2 : development for dummies
Wordpress #2 : customisation
#4 css 101

En vedette (20)

PDF
Javascript #5.1 : tp1 zombies!
PDF
Projet timezone
PDF
Une introduction à Javascript
PDF
Javascript #2 : valeurs, types & opérateurs
PDF
Wordpress #3 : content strategie
PDF
Wordpress #1 : introduction
PDF
WebApp #4 : Consuming REST APIs
PDF
PHP #4 : sessions & cookies
PDF
Startup & entrepreneuriat #2.1: disrupt me
PDF
Architecture logicielle #2 : TP timezone
PDF
#3 html in the real world
PDF
Architecture logicielle #4 : mvc
PDF
Javascript #7 : manipuler le dom
PDF
Javascript #6 : objets et tableaux
PDF
Javascript #11: Space invader
PDF
PHP #3 : tableaux & formulaires
PDF
PHP #6 : mysql
PDF
Javascript #3 : boucles & conditions
PDF
Architecture logicielle #3 : object oriented design
PDF
#1 entreprendre au xxiè siècle
Javascript #5.1 : tp1 zombies!
Projet timezone
Une introduction à Javascript
Javascript #2 : valeurs, types & opérateurs
Wordpress #3 : content strategie
Wordpress #1 : introduction
WebApp #4 : Consuming REST APIs
PHP #4 : sessions & cookies
Startup & entrepreneuriat #2.1: disrupt me
Architecture logicielle #2 : TP timezone
#3 html in the real world
Architecture logicielle #4 : mvc
Javascript #7 : manipuler le dom
Javascript #6 : objets et tableaux
Javascript #11: Space invader
PHP #3 : tableaux & formulaires
PHP #6 : mysql
Javascript #3 : boucles & conditions
Architecture logicielle #3 : object oriented design
#1 entreprendre au xxiè siècle
Publicité

Similaire à Javascript #4.1 : fonctions for noobs (11)

DOCX
Compte rendu jess
PPTX
Cours javascript v1
PDF
jeu de serpent (Snake)
PDF
Fondamentaux portée - contexte - function ms tech days
ODP
Introduction à JavaScript
PPT
Le langage C
PDF
Javascript #4.2 : fonctions for pgm
PDF
Cycle de vie d'activité Android et les composant d'Android
PDF
Cycle de vie d'activité Android et les composant d'Android
ODP
Tp-jquery
PDF
Algea - 01 - hero
Compte rendu jess
Cours javascript v1
jeu de serpent (Snake)
Fondamentaux portée - contexte - function ms tech days
Introduction à JavaScript
Le langage C
Javascript #4.2 : fonctions for pgm
Cycle de vie d'activité Android et les composant d'Android
Cycle de vie d'activité Android et les composant d'Android
Tp-jquery
Algea - 01 - hero
Publicité

Plus de Jean Michel (16)

PDF
Startup #7 : how to get customers
PDF
HTML & CSS #10 : Bootstrap
PDF
Javascript #10 : canvas
PDF
Architecture logicielle #1 : introduction
PDF
Architecture logicielle #5 : hipsto framework
PDF
PHP #7 : guess who?
PDF
PHP & MYSQL #5 : fonctions
PDF
PHP #2 : variables, conditions & boucles
PDF
PHP #1 : introduction
PDF
Startup #5 : pitch
PDF
Javascript #8 : événements
PDF
WebApp #3 : API
PDF
WebApp #2 : responsive design
PDF
Gestion de projet #4 : spécification
PDF
Projet timezone
PDF
WebApp #1 : introduction
Startup #7 : how to get customers
HTML & CSS #10 : Bootstrap
Javascript #10 : canvas
Architecture logicielle #1 : introduction
Architecture logicielle #5 : hipsto framework
PHP #7 : guess who?
PHP & MYSQL #5 : fonctions
PHP #2 : variables, conditions & boucles
PHP #1 : introduction
Startup #5 : pitch
Javascript #8 : événements
WebApp #3 : API
WebApp #2 : responsive design
Gestion de projet #4 : spécification
Projet timezone
WebApp #1 : introduction

Javascript #4.1 : 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
  • 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
  • 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