Javascript 07 : LES FONCTIONS - LES BASES

Nous allons voir un aspect fondamental de la programmation : la possibilité d'insérer des mini-programmes dans les programmes de façon à créer de nouvelles actions. Vous avez déjà utilisé de nombreuses fois les fonctions. Lesquelles ? alert est une fonction, prompt est une fonction, parseInt, parseFloat ... Mais nous allons voir aujourd'hui comment créer vos propres fonctions si l'action que vous voulez effectuer n'est pas gérée par l'une des innombrables fonctions ou méthodes de Javascript. Nous verrons également la différence entre une fonction 'pure' et une 'méthode'.

Commençons par vous montrer ce qu'on peut faire de très basique avec les fonctions et une image SVG (voir les activités HTML/CSS si vous voulez en savoir plus).

Utiliser Go ! pour démarrer l'animation et cliquer plusieurs fois pour l'accélerer.

Pour construire cette animation, nous avons dû utiliser les fonctions. En réalité, vous avez déjà beaucoup utilisé les fonctions : à chaque fois que vous avez donné un nom derrière onclick=", vous avez en réalité donné le nom d'une fonction que vous avez défini dans votre script js. Voyons cela de plus près maintenant.

1 - Premieres fonctions créées : les procédures

Une fonction est un ensemble d'instructions qui seront effectuées lorsqu'on va appeler la fonction. Rien avant. Un petit exemple pour la forme (sans animation pour l'instant) :

Le fichier CSS style_1.css est le suivant :

Et pour le script js js_fonctions.js (attention, la fonction droite ne sera pas expliquée en détail ici) :

01° Tester le code. Comme vous pouvez le constater, la fonction go_droite ne sert qu'à lancer l'appel à droite.

02° Comment se nomme la variable js qui contient la référence du cercle SVG ? Comment se nomme la variable qui contient la coordonnée x du centre du cercle ? Pourquoi avoir utiliser un parseInt ?

03° Quel est le nom de la méthode qui permet ici de modifier la coordonnée x du centre du cercle ? Avec quelle structure parvient-on à empêcher le cercle de sortir du cadre de 500 pixels de large ?

Même si vous ne comprenez pas le code de la fonction droite vous savez maintenant comment déplacer le cercle vers la droite : il s'agit d'utiliser cette fonction. C'est tout l'intêret des fonctions : quelqu'un l'a créée, ensuite il suffit de taper son nom. Ainsi, ici on active via le bouton une fonction go_droite qui lance droite.

La déclaration des fonctions commence toujours par la ligne go_droite() { où tous les éléments sont importants :

1. function go_droite() { : On commence par le mot-clé function qui indique qu'on va donner le nom d'une fonction.
2. function go_droite() { : On place un espace entre function et le nom.
3. function go_droite() { : On donne le nom de la fonction, go_droite ici, suivi de parenthèses ().
4. function go_droite() { : On finit la déclaration du nom par l'accolade { pour signaler que la suite va être composée des actions à effectuer (c'est le même principe qu'avec le if, le while, le for...)
5. On tabule pour indiquer aux codeurs que l'instruction est incluse dans la fonction.
6. La fin des instructions est indiquée par une accolade de fermeture }.

function go_droite() {

    ...

    ...

    ...

} // A partir d'ici, l'interpréteur comprend qu'il ne s'agit plus de go_droite()

Point important : lorsque vous voulez utiliser la fonction, il ne faut pas juste donner son nom : il faut rajouter les parenthèses après son nom. Il faut donc utiliser go_droite().

On peut donc utiliser de telles fonctions-procédures pour effectuer des tâches répétitives (et exactement identiques) qu'on devrait taper sinon à plusieurs endroits dans le code. On notera que si on devait les faire à la suite directe les unes des autres, les boucles FOR ou WHILE conviennent également.

Vous devriez obtenir ceci :

04° Rajouter un bouton qui permettra d'aller à gauche dans votre HTML. Créer ensuite la fonction go_gauche qui appelle la fonction gauche (inspirez vous des fonctions pour la droite).

Et si on veut faire des choses un peu différentes ? On peut aussi ?

Oui, on peut transmettre des données aux fonctions de façon à ce qu'elles utilisent des contenus venant de l'extérieur. Lors de la déclaration de la fonction, il suffit de placer entre les parenthèses les paramètres attendus.

Nous allons maintenant réaliser une animation capable d'aller à droite ou à gauche (comme précédemment) mais en utilisant la même fonction deplacerDessin de déplacement. Vous avez du remarquer que les fonctions gauche et droite sont très similaires.

Pour cela, voici le code HTML des deux boutons (attention, j'ai rajouté un indice 3 derrière les fonctions pour limiter l'interaction avec codes précédents) :

Et voici le code javascript (qu'il faudra compléter !): les deux fonctions attribuées aux boutons vont appel à la même fonction pour déplacer le cercle. MAIS, lors de l'appel, on peut envoyer des informations qui seront utilisées par la fonction pour savoir ce qu'elle doit faire.

Ces informations qu'on envoie se nomment des arguments.

Par contre, dans le code de la fonction, les variables recevant les arguments envoyés se nommment les paramètres.

05° En regardant le code deplacerDessin3("???","???") lors de l'appel de la fonction, quel est le type des deux arguments à envoyer ?

06° En regardant maintenant le code de la fonction function deplacerDessin3, donner le nom des variables paramètres qui vont récupérer ce qu'on envoie à la fonction.

07° En regardant les commentaires placés dans la fonction deplacerDessin3, donner les valeurs à fournir lors de l'appel de la fonction pour faire déplacer le cercle vers la gauche ou pour faire déplacer le cercle vers la droite.

08° Modifier le code pour que les boutons gauche et droite soient fonctionnels.

De façon générale, les paramètres ne sont pas nécessairement des strings. Vous pouvez créer des fonctions utilisant n'importe quel type de variables : integer, string ... Même des objets.

Pour l'instant, la vitesse de déplacement est fixée dans la fonction elle-même.

09° Modifier le code de deplacerDessin3 de façon à ce qu'elle recoive un troisième paramètre : un integer qui contiendra la vitesse de déplacement voulue. Modifiez ensuite les deux appels à la fonction de façon à ce que le bouton droite crée un mouvement plus rapide que le bouton gauche par exemple.

Pour illustrer l'intêret des fonctions, nous allons utiliser une nouvelle page HTML dans laquelle nous allons dessiner sur un Canvas de 400 pixels sur 400 pixels.

10° Modifier votre page html en remplaçant le contenu de votre balise section par ceci :

11° Rajouter les lignes suivantes dans votre fichier css puis javascript. La fonction dessineTrait n'est pas à comprendre réellement. Il suffit de lire sa description en commentaires de façon à voir comment s'en servir.

12° Tester les boutons puis modifier les fonctions dessin_1 et dessin_2 en réalisant le dessin de votre choix, par exemple :

Ces dessins nécessitent bien entendu l'utilisation de boucles.

Pas mal avec quelques lignes de codes, non ? Comme c'est votre premier vrai contact avec la création de fonction, voilà un corrigé possible :

Les codes permettant d'obtenir les deux images précédentes sont :

Comme vous le voyez, on peut utiliser une fonction dans une autre fonction.

D'ailleurs, l'une des forces des fonctions, c'est qu'on peut les utiliser sans savoir exactement comment elles fonctionnent : lorsqu'on les utilise, on doit simplement connaitre les arguments à transmettre et avoir une idée du but de la fonction. Vous n'avez aucunement besoin de connaitre les rouages internes d'une fonction ou d'une méthode pour l'utiliser. Elle peut contenir un code simple ou compliqué sans que vous ayez à vous en soucier. Sauf si c'est vous que l'avez conçue bien entendu.

Fonctions, procédures et méthodes

Voilà la limite des "fonctions basiques" : on ne peut pas utiliser leurs codes pour faire autre chose. Comment faire pour récupérer un résultat et le renvoyer vers le programme principal ? Et bien, il faut rajouter une ligne de code qui va renvoyer quelque chose vers le programme d'appel.

Comme la fonction ne renvoie pas ni information ni valeur vers le programme principal, on pourrait la nommmer PROCEDURE.

Si on parvient à faire communiquer la fonction, on la nommera effectivement FONCTION.

Dans certains langages, fonctions et procédures ne se déclarent pas de la même manière. Ce n'est pas le cas de Python. C'est donc la dernière fois que nous noterons ici le mot procédure.

Et les méthodes ? Il s'agit tout simplement du nom qu'on donne à une fonction appartenant à une classe d'objets et pouvant donc agir sur un objet. La plupart du temps, elles sont utilisées sous la forme objet.methode(argument). Vous vous souvenez ?

Nous avons donc vu les fonctions sans retour : les procédures.

Il nous reste à voir les fonctions renvoyant une information vers le programme qui en ont fait l'appel.

2 - Fonctions avec retour d'information

Pour renvoyer une valeur y dans la partie de code qui a fait appel à la fonction, il suffit d'utiliser le code suivant return (y) si y=a*x+b. Mais on pourrait faire plus court encore avec return(a*x+b).

Dans cette partie, nous nous limiterons aux interactions utilisant alert pour afficher et prompt pour faire des demandes.

13° Utiliser les codes suivants. La fonction permettra de calculer le résultat d'une fonction affine f(x) = a.x+b.

Description des actions lorsqu'on appuie sur le go ! :

• Lorsqu'on appuie sur le bouton, on active la fonction go.
• Cette fonction va alors utiliser affine(3) et stockera ce résultat dans la variable y.
• On transmet donc x = 3 à la fonction et on stocke donc le résultat du calcul suivant : 5*3+100 = 115.
• On revient ensuite dans la fonction go et on lance un alert avec cette variable : on affiche 115 dans la fenêtre.

Comme vous le voyez, on stocke le résultat de la fonction (qu'elle renvoie avec le return) dans une variable y pour garder le résultat en mémoire.

ATTENTION : lorsque la fonction rencontre return, elle calcule le résultat et sort ensuite du codage de la fonction : c'est comme un break : le reste du code ne sera pas analysé. Ainsi alert("Alors, ça s'affiche ou pas ?") après le return ne sera jamais exécuté.

14° Et ce code, que va-t-il afficher ? Réflechir puis lancer le code pour vérifier si votre raisonnement est le bon.

On constate également qu'on peut donner une variable comme argument : vous n'êtes pas obligé de donner une valeur en "dur" ce qui est très pratique.

3 - Mini-projet : des fonctions pour Simon

Nous allons maintenant travailler sur une interface graphique type Simon : 4 cubes qui changent de couleur lorsqu'on clique dessus.

Attention : nous n'utiliserons pas ici les automatismes existants pour gérer les différents cubes. La solution proposée ici n'est clairement pas la plus propre sur un projet de ce type. La solution proposée ici est simplement la plus adaptée à votre niveau actuel.

Vous allez d'abord devoir créer les trois fichiers HTML, CSS et JS du prototype avant de rajouter du code :

Voici le code HTML :

Voici le CSS nommé miniprojet.css".

14° Créer les deux fichiers et vérifier que l'affichage est correct.

Il nous reste maintenant à créer la gestion des clics sur les cubes.

La solution utilise la fonction native setTimeout qui permet de lancer l'appel d'une fonction avec un certain décalage dans le temps : setTimeout(go,500) va lancer la fonction go après une attente de 500 ms (soit 0,5 s).

Voici le début du script js nommé miniprojet.js :

15° Rajouter le script et tester.

16° Modifier et compléter le script de façon à faire réagir correctement les 4 carrés. Pour les couleurs claires, vous pouvez utiliser les valeurs numériques avec # ou utiliser lightgreen, yellow et tomato.

17° Comme vous pouvez le constater la gestion des couleurs n'est pas très pratique avec les noms HTML. Voici donc un code qui utilise la version numérique. A vous de modifier les couleurs avec nom en codes hexadécimaux pour rendre le tout plus joli

Voici le résultat attendu après modification du code :

Et voilà : nous avons l'ébauche d'un Simon. Il manque encore beaucoup de choses : la mémorisation des coups joués, le stockage des séries à trouver, les sons... Nous verrons tout cela au fur et à mesure.