Paramètres de fonctions

Version imprimable

Bonjour, voila mon problème: J'ai une fonction javascript qui fonctionne dans mon fichier html sous cette forme:

Code:

1
2
3
4
5
 function fonction(){
    var param1;
    var param2;
    // Instructions....
}

Mais elle ne fonctionne pas sous cette forme:

Code:

1
2
3
4
5
6
var param1;
var param2;
 
function fonction(param1, param2){
    //Instructions...
}

Pourtant dans un autre fichier html j'utilise une fonction de ce type (function fonction(param1, param2)) assez proche et elle marche.

Je ne comprend pas pourquoi :D .

Le fichier HTML qui marche:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
 
<head>
    <link rel = "stylesheet" type = "text/css" href = "kappa.css">
    <script src = "kappa.js" defer></script>
</head>
 
<body  onload = "dessinerBoutonCo(boutonCo, canvasBoutonCo);">
 
        <a href = "utilisateur.html">
        <canvas id = "boutonConnexion" width = "250px" height = "200px" onmouseover = "changerBoutonCo(boutonCo, canvasBoutonCo);" onmouseout = "dessinerBoutonCo(boutonCo, canvasBoutonCo);">
        </canvas>
        </a>
    </body>
</html>

Le fichier javaScript asocié:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
var canvasBoutonCo = document.getElementById("boutonConnexion");
var boutonCo = canvasBoutonCo.getContext("2d");
 
var canvasBoutonRe = document.getElementById("boutonRecherche");
var boutonRe = canvasBoutonRe.getContext("2d");
 
function dessinerBoutonCo(boutonCo, canvasBoutonCo){ // Marche
    var gradient = boutonCo.createLinearGradient(50, 10, 160, 160);
    boutonCo.clearRect(0, 0, canvasBoutonCo.width, canvasBoutonCo.height);
    boutonCo.beginPath();
    boutonCo.arc(140, 100, 90, 0, 2 * Math.PI);
    boutonCo.fillStyle = "#B3B7B3";
    boutonCo.fill();
    boutonCo.fillStyle = "white";
    boutonCo.textBaseline = "top";
    boutonCo.font = "bold 27px serif";
    boutonCo.fillText("Connexion", 80, 85);
    boutonCo.beginPath();
    boutonCo.arc(140, 100, 91, 0, 2 * Math.PI);
    gradient.addColorStop("0", "#1F002D");
    gradient.addColorStop("1", "#8133A1");
    boutonCo.strokeStyle = gradient;
    boutonCo.lineWidth = 3;
    boutonCo.stroke(); 
}
function changerBoutonCo(boutonCo, canvasBoutonCo){ // Marche
    var gradient = boutonCo.createLinearGradient(50, 10, 160, 160);
    boutonCo.clearRect(0, 0, canvasBoutonCo.width, canvasBoutonCo.height);
    boutonCo.beginPath();
    boutonCo.arc(140, 100, 95, 0, 2 * Math.PI);
    boutonCo.fillStyle = "#E6E6E6";
    boutonCo.fill();
    boutonCo.fillStyle = "#1F002D";
    boutonCo.textBaseline = "top";
    boutonCo.font = "bold 27px serif";
    boutonCo.fillText("Connexion", 80, 85);
    boutonCo.beginPath();
    boutonCo.arc(140, 100, 96, 0, 2 * Math.PI);
    gradient.addColorStop("0", "#1F002D");
    gradient.addColorStop("1", "#8133A1");
    boutonCo.strokeStyle = gradient;
    boutonCo.lineWidth = 3;
    boutonCo.stroke(); 
}
//[...]
function dessinerBoutonRe(boutonRe, canvasBoutonRe){ // Ne marche pas, mais marche si je declare les variables dans la fonction plutot que de les passer par parametres.
    boutonRe.clearRect(0, 0, canvasBoutonRe.width, canvasBoutonRe.height);
    boutonRe.fillRect(10, 10, 10, 10);
}

Le fichier html qui ne marche pas:

Code:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<head>
    <link rel = "stylesheet" type = "text/css" href = "kappa.css">
    <script src = "kappa.js" defer></script>
</head>
    <body onload = "dessinerBoutonRe(boutonRe, canvasBoutonRe);">
            <canvas id = "boutonRecherche" width = "30" height = "30">
            </canvas>
    </body>
</html>

J'ai l'impression de faire la même chose dans les deux cas mais la fonction dessinerBoutonRe(param1, param2) qui est appelé dans mon second .html ne fonctionne pas alors quelle fonctionne sous la forme
dessinerBoutonRe(){ var param1; var param2...}.

Je dois certainement passé à coté de quelque chose que je ne vois pas.

Merci d'avance pour votre aide.

Tu sembles faire une grosse confusion entre un nom de variable et un nom de paramètre...
Quand tu fais
Code:

1 2 3 4 5 6 var param1; var param2; function fonction(param1, param2){ //Instructions... }
Les variables que tu déclares avec le mot clé var n'ont rien à voir avec les paramètres attendus par la fonction.

A titre d'exemple
Code:

1 2 3 4 5 6 7 8 9 10 var param1 = 'toto'; var param2 = 'tata'; function fonction(param1, param2){ console.log(param1); // foo console.log(param2); // bar } fonction('foo', 'bar'); console.log(param1); // toto console.log(param2); // tata
Donc tu constates que les variables (globales) param1 et param2 ne sont pas accessibles dans la fonction (puisque tu as affecté leurs noms aux paramètres). Et que les paramètres attendus par ta fonction ont pour valeur celles transmises dans l'appel de la fonction.

Effectivement j'ai du mal à comprendre les fonctions en javascript. Voila ce que j'avais compris et qui est faux:

Code:

1
2
3
4
5
6
var uneVariable = 2; // Un int.
var autreVariable = "Clous"; // Un String.
function uneFonction(uneVariable, autreVariable){ // La fonction prend deux arguments du type des variables indiqués.
    uneVariable = 3; // Change le premier parametre si c'est une variable du même type que uneVarible.
    autreVariable = "Vis"; // Change le second parametre si c'est une variable du même type que autreVarible.
}

Code:

1
2
<canvas onmouseover = "uneFonction(uneVariable, autreVariable);"> </canvas>
<!-- Lors de l'appel de la fonction on indique le vrai nom des variables qui seront utilisés en arguments. -->

Peut être qu'il faut faire ceci?:

Code:

1
2
3
4
5
6
7
8
9
var uneVariable = 2; // Un int.
var autreVariable = "Clous"; // Un String.
var nouvelleVariable = "Poivre"; // Autre String
function uneFonction(param1, param2){ // La fonction prend deux arguments dont le type n'est pas connu.
    param1 = 3; // Change le premier parametre si l'argument passé peut recevoir cette valeur.
    param2 = "Vis"; // Change le second parametre si l'argument passé peut recevoir cette valeur.
}
uneFonction(uneVariable, autreVariable); // Définition de la fonction avec des arguments précis dans le javascript.
uneFonction(uneVariable, nouvelleVariable); // Définition de la fonction avec des arguments précis dans le javascript.

Code:

1
2
<canvas onmouseover = "uneFonction(uneVariable, autreVariable);"> </canvas>
<!--Appel de la fonction d'après une définition précise faites dans le javascript. -->

Je dois dire que je suis assez confus, je n'avait pas eu de mal a comprendre le paramétrage et l'appel des fonctions paramétrés en C le truc c'est que là entre l'absence de typage de variable explicite et l'interaction javaScript/html...
Merci d'avance d'éclairer mes lanternes. :o

07/04/2015, 22h52
Lakhdr

Scoping et hoisting
Bonjour !

En effet en Javascript il y a un petit hic dans les declaration de variables et les parametres . je te conseille de lire sur les principes de scoping et hoisting dans javascript

Pour resoudre ce genre de soucis utilise aussi "use strict" dans le debut de chaque script comme sa tu seras sur que les variable seront bien declaree , sinon y aura une erreur .

dans une fonction javascript tu peux aussi utiliser le mot cle argumets qui te permet de recuper la liste des arguments passe a la focntion d'une maniere dynamique genre :*
Code:

1 2 3 4 5 6 7 8 9 10 function func(){ console.log(arguments); } func(): //log [] func(14,15) // log [14,15] ....

Non, je ne trouve pas qu'il y ai particulièrement de hic entre les variables et les paramètres. Quant au hoisting, ce n'est pas trop le problème ici.

La chose essentielle à comprendre, c'est que quand une fonction reçoit des paramètres, il faut bien qu'ils aient un nom pour pouvoir les utiliser dans le corps de la fonction.
Ce nom correspond sert donc uniquement à l'associer à une valeur reçue.
Par exemple, dans le code suivant
Code:

1 2 3 4 function maFonction(){ // Ici, la fonction n'a pas prévu de nommer les paramètres qu'elle reçoit } maFonction('valeur1', 'valeur2'); // Sauf qu'on lui envoie deux paramètres...
comment fais-tu pour utiliser les valeurs reçues puisqu'elles ne sont associées à aucun nom ? Bien sûr, comme l'indique Lakhdr, tu peux utiliser arguments, mais ce n'est pas recommandé, il est donc important de nommer les paramètres attendus :
Code:

1 2 3 4 function maFonction(val1, val2){ console.log(val1, val2); // valeur1 et valeur2 } maFonction('valeur1', 'valeur2'); // Sauf qu'on lui envoie deux paramètres...
Tu noteras par ailleurs que les paramètres passés sont des valeurs (les chaines 'valeur1' et 'valeur2') alors que les paramètres sont des noms (val1 et val2).
Ensuite, il y a la notion de variable et de scope. Il existe deux scopes possibles en JavaScript (pour simplifier, car en réalité, c'est plus compliqué). Le scope global, quand tu définis une variable en dehors de toute fonction, et le scope local, quand tu définis une variable dans une fonction. Pour rappel, même si c'est théoriquement possible de ne pas le faire, il faut malgré tout toujours déclarer ses variables avec le mot clé var. Les variables locales sont disponibles uniquement dans la fonction qui les déclare (là aussi, c'est un peu plus complexe, mais on va simplifier) alors que les variables globales sont disponibles dans tout le code.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var globale = 'foo', ambigue = 'Hum...'; function fonction(arg){ var ambigue = 'baz'; var locale = 42; console.log(arg); // bar console.log(ambigue); // baz console.log(globale); // foo console.log(locale); // 42 } fonction('bar'); console.log(ambigue); // Hum... console.log(globale); // foo console.log(locale); // ReferenceError: locale is not defined

Tout d'abord merci pour vos réponses.
Voila ou j'en suis après avoir revu mon code suite à vos explications:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 //----> javaScript var canvasBoutonRe = document.getElementById("boutonRecherche"); // Je déclare des variables globales, elles me seront utiles pour plusieurs fonctions. var boutonRe = canvasBoutonRe.getContext("2d"); function dessinerBoutonRe(pBouton, pCanvas) // Nom des parametres pour pouvoir les mentionner dans le corps de la fonction. { pBouton.clearRect(0, 0, pCanvas.width, pCanvas.height); pBouton.fillStyle = "#E6E6E6"; pBouton.fillRect(0, 0, 30, 30); pBouton.arc(17, 12, 5, 0, 2 * Math.PI); pBouton.moveTo(6, 25); pBouton.lineTo(13, 16); pBouton.strokeStyle = "#1F002D"; pBouton.lineWidth = 2; pBouton.stroke(); } //-----> html <body onload = "dessinerBoutonRe(boutonRe, canvasBoutonRe);"> // La fonction est appelé dans le fichier html avec les valeurs des variables déclarées dans le fichier javaScript.
Dites moi si c'est bien la façon de faire normale.
Au passage ça na pas résolu mon problème, par contre, sans changer le code et simplement en séparément mon fichier javaScript en un fichier javaScript par page html, miracle ça marche.
Rapidement je met la main sur l'endroit qui est à l'origine de mon problème:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var canvasBoutonRe = document.getElementById("boutonRecherche"); var boutonRe = canvasBoutonRe.getContext("2d"); var canvasBoutonCo = document.getElementById("boutonConnexion"); var boutonCo = canvasBoutonCo.getContext("2d"); // Si j'écris les variables dans cet ordre, la fonction dessinerBoutonCo(boutonCo, canvasBoutonCo) ne peut pas fonctionner. var canvasBoutonCo = document.getElementById("boutonConnexion"); var boutonCo = canvasBoutonCo.getContext("2d"); var canvasBoutonRe = document.getElementById("boutonRecherche"); var boutonRe = canvasBoutonRe.getContext("2d"); // Si j'écrit les variables dans cet ordre, la fonction dessinerBoutonRe(boutonRe, canvasBoutonRe) ne peut pas fonctionner.
La confusion dans mon esprit deviens de plus en plus grande qu'est ce que je fais de mal dans la déclaration de ces variables? Ou alors le probleme viendrais t-il du mystérieux .document pour moi ça indique juste le .html auquel est lié le .javaScript ...?
Si vous pouviez me désembrumer je vous en serais reconnaissant.