Javascript #4.2 : fonctions for pgm

1. Javascript : Fonctions for pgm

2. 1. Fonction anonyme

3. Définition d’une fonction anonyme (1)
function() {
alert('Hello ladies!');
};
(function() {
alert('Hello ladies!');
});

4. Définition d’une fonction anonyme (2)
var hello = function() {
alert('Hello ladies!');
};
!
hello();

5. Executer une fonction anonyme
(function(){
alert('Tagada!');
})();
(function(x){
alert('Tagada ' + x + ' ' + x + '!');
})('tsoin');

6. Callback
function saySomething(fct){
fct();
}
function youpi(){
alert('Youpi!');
}
var tagada = function(){
alert('Tagada!');
}
!
saySomething(youpi);
saySomething(tagada);

7. 2. Timing

8. Fonctions temporelles
The setTimeout() method calls a function or
evaluates an expression after a specified number of
milliseconds.
Source : w3schools.com
The setInterval() method calls a function or
evaluates an expression at specified intervals (in
milliseconds).
Source : w3schools.com

9. setTimeout()
function sayHello(){
alert('Hello!');
}
!
setTimeout(sayHello, 2000);
setTimeout(function(){
alert('Hello!');
}, 2000);

10. setInterval()
function sayHello(){
alert('Hello!');
}
!
setInterval(sayHello, 2000);
setInterval(function(){
alert('Hello!');
}, 2000);

11. Paramètres
setInterval(function(name){
alert('Hello ' + name + '!');
}, 2000, 'toto');

12. Arrêter une fonction temporelle
var test = setTimeout(function(name){
alert('Hello ' + name + '!');
}, 2000, 'toto');
!
clearTimeout(test);

13. 3. Closure

14. Closure ?
Dans un langage de programmation, une fermeture
ou clôture (en anglais, closure) est une fonction qui
capture des références à des variables libres dans
l'environnement lexical.
Source : wikipedia.org

15. Closure ?
function operation(x) {
function plus(y) {
return x + y;
}
return plus;
}
!
var a = operation(10);
alert( a(2) );

16. Exemple
for(var i = 0; i < 3; i++) {
setTimeout(
function() { alert(i) },
1000
);
}
// 3 / 3 / 3
for(var i = 0; i < 3; i++) {
setTimeout(
( function(it) {
return function() {
alert( it );
};
} ) ( i ),
1000
);
}
// 0 / 1 / 2

17. 4. Mise en pratique

18. Quelques fonctions utiles
var text = 'youpi';
console.log(text.length); // 5
console.log(text.charAt(2)); // u

19. Exercice 1 : Memento
Créer une page web permettant de jouer à un jeu consistant
à mémoriser une chaine de caractère.
Le jeu génère une chaine de caractère aléatoire, l’affiche à
l’utilisateur puis cache cette chaine pendant 5 secondes et lui
demande de la saisir à nouveau.
Si l’utilisateur entre la bonne réponse, le jeu continue sinon le
jeu s’arrête et affiche le score.
Toute les 5 réponses correctes, la chaine à mémoriser
augmenter de 1 caractère.
35 instructions maximum

20. Merci pour votre attention.

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