javascript #4.2 : fonctions for pgm
DESCRIPTION
Javascript #4.2 : fonctions for pgmTRANSCRIPT
![Page 1: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/1.jpg)
Javascript : Fonctions for pgm
![Page 2: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/2.jpg)
1. Fonction anonyme
![Page 3: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/3.jpg)
Définition d’une fonction anonyme (1)
function() { alert('Hello ladies!'); };
(function() { alert('Hello ladies!'); });
![Page 4: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/4.jpg)
Définition d’une fonction anonyme (2)
var hello = function() { alert('Hello ladies!'); }; !hello();
![Page 5: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/5.jpg)
Executer une fonction anonyme
(function(){ alert('Tagada!'); })();
(function(x){ alert('Tagada ' + x + ' ' + x + '!'); })('tsoin');
![Page 6: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/6.jpg)
Callback
function saySomething(fct){ fct(); } function youpi(){ alert('Youpi!'); } var tagada = function(){ alert('Tagada!'); } !saySomething(youpi); saySomething(tagada);
![Page 7: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/7.jpg)
2. Timing
![Page 8: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/8.jpg)
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
![Page 9: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/9.jpg)
setTimeout()
function sayHello(){ alert('Hello!'); } !setTimeout(sayHello, 2000);
setTimeout(function(){ alert('Hello!'); }, 2000);
![Page 10: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/10.jpg)
setInterval()
function sayHello(){ alert('Hello!'); } !setInterval(sayHello, 2000);
setInterval(function(){ alert('Hello!'); }, 2000);
![Page 11: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/11.jpg)
Paramètres
setInterval(function(name){ alert('Hello ' + name + '!'); }, 2000, 'toto');
![Page 12: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/12.jpg)
Arrêter une fonction temporelle
var test = setTimeout(function(name){ alert('Hello ' + name + '!'); }, 2000, 'toto'); !clearTimeout(test);
![Page 13: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/13.jpg)
3. Closure
![Page 14: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/14.jpg)
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
![Page 15: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/15.jpg)
Closure ?
function operation(x) { function plus(y) { return x + y; } return plus; } !var a = operation(10); alert( a(2) );
![Page 16: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/16.jpg)
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
![Page 17: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/17.jpg)
4. Mise en pratique
![Page 18: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/18.jpg)
Quelques fonctions utiles
var text = 'youpi'; console.log(text.length); // 5 console.log(text.charAt(2)); // u
![Page 19: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/19.jpg)
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.
35 instructions maximum
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.
![Page 20: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/20.jpg)
Merci pour votre attention.
![Page 21: Javascript #4.2 : fonctions for pgm](https://reader033.vdocuments.us/reader033/viewer/2022052413/55983fb71a28abfb458b4868/html5/thumbnails/21.jpg)
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