Javascript : Fonctions for pgm

1. Fonction anonyme

Définition d’une fonction anonyme (1)

function() { alert('Hello ladies!'); };

(function() { alert('Hello ladies!'); });

Définition d’une fonction anonyme (2)

var hello = function() { alert('Hello ladies!'); }; !hello();

Executer une fonction anonyme

(function(){ alert('Tagada!'); })();

(function(x){ alert('Tagada ' + x + ' ' + x + '!'); })('tsoin');

Callback

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

2. Timing

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

setTimeout()

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

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

setInterval()

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

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

Paramètres

setInterval(function(name){ alert('Hello ' + name + '!'); }, 2000, 'toto');

Arrêter une fonction temporelle

var test = setTimeout(function(name){ alert('Hello ' + name + '!'); }, 2000, 'toto'); !clearTimeout(test);

3. Closure

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

Closure ?

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

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

4. Mise en pratique

Quelques fonctions utiles

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

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.

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