Paramètres de fonctions [Débutant(e)]

**Booniak** · 07/04/2015, 15h06

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Mais elle ne fonctionne pas sous cette forme:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Bovino** · 07/04/2015, 15h24

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Booniak** · 07/04/2015, 21h41

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Lakhdr** · 07/04/2015, 23h52

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Bovino** · 08/04/2015, 09h09

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Booniak** · 08/04/2015, 13h43

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Paramètres de fonctions [Débutant(e)]

JavaScript

Vue hybride

Discussions similaires

Partager

Partager