Début en Javascript

Version imprimable

Début en Javascript

Bonjour je débute en javascript,

j'essaye de faire une "sorte" de calculette, je vous explique sur la page html il n'y a qu'un bouton, et en cliquant dessus sa lance les fonctions, une première pour enregistrer 2 nombres, puis 4 pour +, -, *, /, et une dernière pour l'affichage.

Je cherche pas a faire quelque chose de propres je cherche juste a bien comprendre les fonction en Js, donc si vous voyez l'erreur, pouvez-vous me la signaler?

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
 
  <title>Exercice</title>
 
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
 
<body>
	<script type="text/javascript" >
		<!--
			function calculatrice()
			{
				var resultat;
				var nombre1;
				var nombre2;
 
				function saisie(nb1,nb2)
				{
					nb1 = prompt("Saisissez le premier nombre.","nombre");
					nb2 = prompt("Saisissez le second nombre.","nombre");
 
					return [nb1,nb2];
				}
 
				function addition(res,nb1,nb2)
				{
					res = nb1 + nb2;
					return res;
				}
 
				function soustraction(res,nb1,nb2)
				{
					res = nb1 - nb2;
					return res
				}
 
				function multiplication(res,nb1,nb2)
				{
					res = nb1 * nb2;
					return res
				}
 
				function division(res,nb1,nb2)
				{
					res = nb1 / nb2;
					return res
				}
 
				function affichage(res)
				{
					alert("Resultat : "+res);
				}
 
				saisie(nombre1,nombre2);
				addition(resultat,nombre1,nombre2);
				soustraction(resultat,nombre1,nombre2);
				multiplication(resultat,nombre1,nombre2);
				division(resultat,nombre1,nombre2);
				affichage(resultat);
			}
		//-->
	</script>
	<br /><br /><br /><br />
	<center><input type="submit" value="calculatrice" onclick="calculatrice();"/></center>
</body>

Salut !
Tu as fait du C non ? ^^ J'ai l'impression que tu essayes de manipuler les arguments de tes fonctions comme les pointeurs de C.

En JavaScript les choses sont bien plus simples (enfin, question d'habitude je pense :roll:). Les arguments sont en général (*) passés par copie :
Code:

1 2 3 4 5 function f(a, b) { return a + b; } var x = f(2, 3); // x reçoit la valeur 5
Les arguments se comportent exactement comme des variables locales.

Dans ton cas, tu fais la même erreur plusieurs fois : tu n'utilises pas la valeur de retour de tes fonctions. Tu les appelles comme si elles étaient « void ».
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function addition(res,nb1,nb2) { res = nb1 + nb2; // l'argument "res" a été modifié, mais pas la variables "resultat" return res; } ... addition(resultat,nombre1,nombre2); // il faudrait faire : // resultat = addition(resultat,nombre1,nombre2); // du coup, le 1er paramètre ne sert à rien
(*) Je dis en général, en fait ça dépend du type, et c'est comme en Java :
– les types primitifs : nombre, booléen, chaîne, sont passés par copie ;
– les tableaux, les fonctions et les objets sont passés par référence.

Il y a un moyen simple de vérifier ça en JavaScript :
Code:

1 2 3 4 5 6 7 8 9 10 11 function verifier( arg ) { arg.test = 'ok'; } var nombre = 42; verifier(nombre); alert(nombre.test); // undefined => les nombres sont passés par copie var tableau = []; verifier(tableau); alert(tableau.test); // "ok" => les tableaux sont passés par référence
;)

Là, tu n'utilises ni les paramètres fournis aux fonctions ni les valeurs retournées : tout fonctionne sur les globales... :weird:

Tu as un problème à résoudre en rapport avec l'extrait fourni ?
Ou tu veux des conseils généraux sur la manière dont c'est écrit ? :koi:

edit : cramé par Watilin :piou: ;)

Une autre manière d'en avoir le coeur net, le code suivant est équivalent au tien, j'ai simplement retiré ce qui ne servait pas tout en conservant la structure choisie :
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 function calculatrice() { function saisie() { nb1 = prompt("Saisissez le premier nombre.","nombre"); nb2 = prompt("Saisissez le second nombre.","nombre"); } function addition() { res = nb1 + nb2; } function soustraction() { res = nb1 - nb2; } function multiplication() { res = nb1 * nb2; } function division() { res = nb1 / nb2; } function affichage() { alert("Resultat : "+res); } saisie(); addition(); soustraction(); multiplication(); division(); affichage(); }
...mais ne pense pas que je te conseille cette manière de faire, hein :aie:

Simplement, c'est pour te montrer que tu fais simplement du procédural de cette manière, tes appels de fonction ne sont que des simili-goto ^^

07/07/2011, 20h00
Tora21

Je vous remercie de vos réponse, alors je ne fait pas de C mais du Java:D, et effectivement je pensais que l'ion pouvais travailler un peu de la même manière les variables, mais j'ai quelques soucis de compréhension.

RomainVALERI --> Merci pour ta modification de mon code, il m'aide à voir un aspect du traitement des variable et des fonctions. Toutefois, je voulais travailler dans mon code, le passage de paramètre et les valeurs de retours des fonctions. Et autre chose comment se fait-il que tu ne déclare pas tes variables?

Watilin --> Merci pour tes explications, mais pourrait tu reprendre mon code et le modifier a ta façon que je compare avec le mien, parce que je ne comprend pas le passage de paramètre. Je met en paramètre dans mes fonction res, nb1 et nb2, mais je valorise les variables global resultat, nombre1 et nombre2, et lorsque j'appel les fonction je leur donne en argument resultat, nombre1 et nombre2. euh.... je suis pomé, pour le coup c'est moin chiant en Java:D
07/07/2011, 21h45
RomainVALERI
Citation:

Envoyé par Tora21

RomainVALERI --> Merci pour ta modification de mon code, il m'aide à voir un aspect du traitement des variable et des fonctions. Toutefois, je voulais travailler dans mon code, le passage de paramètre et les valeurs de retours des fonctions. Et autre chose comment se fait-il que tu ne déclare pas tes variables?

C'est précisément ce que je voulais te montrer ^^ Comme les variables n'ont pas été déclarées, la première initialisation "vaut" pour déclaration implicite, au niveau global. A chaque fois une propriété de l'objet window est automatiquement créée à cet effet (window.resultat, window.nb1, window.nb2).

D'où l'intérêt de toujours les déclarer avec l'opérateur var, mais comme tu viens du Java, ce n'est pas ça qui devrait te poser un souci :mrgreen: Ca permettra de toujours connaitre précisément la portée de tes variables et d'éviter les confusions. Ca fait partie des "libertés" dangereuses de Javascript (Watilin pourra t'en parler ;) il en connait bien plus que moi sur ce point et il est assez remonté contre ce genre de permissivités intempestives ^^)

Autre chose : la fonction prompt (qui, elle aussi, est en fait une propriété de window : window.prompt() ^^) renvoie une chaine. Si tu veux faire des opérations numériques sans te jeter aveuglément dans les flammes de la conversion implicite automatique :aie:, utilise parseInt sur le résultat pour obtenir un Number :)
Code:

1 2 var nb1 = parseInt(prompt("Saisissez le premier nombre.","nombre"), 10);// "10" pour la base de conversion (décimale) // ou parseFloat pour des réels

ah ben c'est sur la connaissance des variables en java va m'aider a rester dans le droit chemin avec JavaScript. C'est vrai que c'est bizarre de laisse open ce maniement des variables. Merci pour ces infos complémentaires ^^.

Voila ou j'en suis rester sur cet exercice:

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
50
51
52
53
54
55
56
57
58
59
60
61
 
<body>
	<script type="text/javascript" >
		<!--
			function calculatrice()
			{
				var resultat;
				var nombre1;
				var nombre2;
 
				saisie(nombre1,nombre2);
 
				function saisie(nb1,nb2)
				{
					nb1 = prompt("Saisissez le premier nombre.","nombre");
					nb2 = prompt("Saisissez le second nombre.","nombre");
 
					return [nb1,nb2];
				}
 
				function addition(res,nb1,nb2)
				{
					res = nb1 + nb2;
					return res;
				}
 
				function soustraction(res,nb1,nb2)
				{
					res = nb1 - nb2;
					return res
				}
 
				function multiplication(res,nb1,nb2)
				{
					res = nb1 * nb2;
					return res
				}
 
				function division(res,nb1,nb2)
				{
					res = nb1 / nb2;
					return res
				}
 
				function affichage(res)
				{
					alert("Resultat : "+res);
				}
 
 
				addition(resultat,nombre1,nombre2);
				soustraction(resultat,nombre1,nombre2);
				multiplication(resultat,nombre1,nombre2);
				division(resultat,nombre1,nombre2);
				affichage(resultat);
			}
		//-->
	</script>
	<br /><br /><br /><br />
	<center><input type="submit" value="calculatrice" onclick="calculatrice();"/></center>
</body>

Mais ça ne fonctionne toujours pas.

Bonjour,

Vous passez nombre1 et nombre2 mais vous retournez nb1 et nb2 qui ne sont recueillis par personne :
Code:

1 2 3 4 5 6 7 8 9 10 saisie(nombre1,nombre2); function saisie(nb1,nb2) { nb1 = prompt("Saisissez le premier nombre.","nombre"); nb2 = prompt("Saisissez le second nombre.","nombre"); return [nb1,nb2]; }
Du coup lorsque vous appelez addition(resultat,nombre1,nombre2);, nombre1 et nombre2 sont toujours null. Et c'est pareil avec resultat, et ainsi de suite.

Vos return sont inutils. Vos variables "internes" nb1, nb2, res aussi. Remplacez nb1 par nombre1, etc.

08/07/2011, 09h42
Tora21
vermine --> Si je suis votre exemple, le passage de paramètre et les valeurs de retours deviendront inutiles, n'est-ce pas? Mais je souhaiterais travailler et surtout comprendre ces élément en JavaScript.

Pour tenter de comprendre mieux, je vous explique comment j'ai l'habitude de procéder en Java, et peut-être vous pourriez me montré les différence avec le JavaScript.

en java je ferais (en rapide bien sur:)):
Code:

1 2 3 4 5 6 7 8 9 10 int number1; int number2; int resultat; public static int addition(int nb1, int nb2) { int res = nb1 + nb2; return res; }
Et lorsque j'appel ma méthode:
Code:

1 2 resultat = maClasse.addition(this.number1,this.number2);
Comment ferai-t-on en JavaScript?
08/07/2011, 09h44
javatwister

à part ça, le but c'est d'avoir les 4 résultats d'opérations affichés ou bien?
08/07/2011, 09h47
Tora21

Non pas du tous, mais en fait j'ai oublié de mettre en commentaire, je laissai, la fonction addition et affiche :aie::aie::aie:
08/07/2011, 10h00
vermine

C'est le même principe qu'en Java. Je suis d'accord avec votre fonction addition, mais c'est la fonction saisie qui pose problème parce que nb1 n'est jamais mis dans nombre1. ;)

Voila comment j'ai procédé:
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 <script type="text/javascript" >  </script>
Mais du coup si je met plusieurs boutons un correspondant à chaque type de calcul (+,-,*,/), comment je donnerais à résultat la bonne valeur.
Et nb1, nb2, et res sont des global du coup si j'en crois les explications de RomainVALERI?

Citation:

Comme les variables n'ont pas été déclarées, la première initialisation "vaut" pour déclaration implicite, au niveau global.

08/07/2011, 10h17
RomainVALERI
Citation:
Envoyé par Tora21

Et lorsque j'appel ma méthode:

Code:

1 2 resultat = maClasse.addition(this.number1,this.number2);

Comment ferai-t-on en JavaScript?
Ben la même chose :aie:

En Java, si tu ne stockes pas la valeur de retour... ça n'ira pas bien loin non plus ;)
Code:

1 2 maClasse.addition(this.number1,this.number2);// wtf
08/07/2011, 10h20
vermine

Pour les variables, je laisse répondre Romain.

La notion d'orienté objet n'est pas totalement la même qu'en Java. Il y a des exemples sur le forums mais je ne sais plus trop où. :oops:

Voilà ma version, j'utilise uniquement les valeurs de retour.

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
function calculatrice()
{
   var resultat;
   var nombre1;
   var nombre2;
 
   function saisie()
   {
      var nb1 = prompt("Saisissez le premier nombre.","nombre");
      var nb2 = prompt("Saisissez le second nombre.","nombre");
 
      return [nb1,nb2];
   }
 
   function addition(nb1,nb2)
   {
      return nb1 + nb2;
   }
 
   function soustraction(nb1,nb2)
   {
      return nb1 - nb2;
   }
 
   function multiplication(nb1,nb2)
   {
      return nb1 * nb2;
   }
 
   function division(nb1,nb2)
   {
      return nb1 / nb2;
   }
 
   function affichage(res)
   {
      alert("Resultat : "+res);
   }
 
   var tableau = saisie();
   nombre1 = tableau[0];
   nombre2 = tableau[1];
 
   resultat = addition(nombre1,nombre2);
   resultat = soustraction(nombre1,nombre2);
   resultat = multiplication(nombre1,nombre2);
   resultat = division(nombre1,nombre2);
   affichage(resultat);
}

Il faut voir les fonctions comme un stagiaire dans une grosse entreprise ^^ On lui demande un travail, on lui donne des documents (les arguments) et il produit un résultat (la valeur de retour). Et en général (*), il n'a pas le droit de garder les documents qu'on lui donne, alors il en fait des photocopies pour pouvoir travailler avec…

08/07/2011, 19h21
NoSmoking

Citation:

Envoyé par Watilin

Il faut voir les fonctions comme un stagiaire dans une grosse entreprise ^^ On lui demande un travail, on lui donne des documents (les arguments) et il produit un résultat (la valeur de retour). Et en général (*), il n'a pas le droit de garder les documents qu'on lui donne, alors il en fait des photocopies pour pouvoir travailler avec…

:ccool: j':heart: bien :ccool:...

il manque le (*) non?
08/07/2011, 20h42
Invité

j'ai NAN comme resultat c'est normale ?
08/07/2011, 20h49
RomainVALERI
Citation:

Envoyé par mekal

j'ai NAN comme resultat c'est normale ?

lapsus de Watilin (il en fait peu :mrgreen:)

il n'y a que deux postes dans le tableau retourné par saisie(), il faut y accéder par 0 et 1, pas 1 et 2
Code:

1 2 nombre1 = tableau[0]; nombre2 = tableau[1];
08/07/2011, 21h23
Invité

adjugé vendu pour la prochaine j'ouvrirait mieux les yeux :calim2:
08/07/2011, 23h35
Watilin

Ah oui. Euh… Oups ^^ Mais c'est parce que j'aime bien NaN…

J’édite mon code pour plus de clarté :oops:

Citation:

Envoyé par NoSmoking

il manque le (*) non?

C'est le même que mon post d'au-dessus ;)
09/07/2011, 01h18
RomainVALERI

veuillez m'excuser par avance pour ce très flagrant hors sujet ^^

Citation:

Envoyé par Watilin

Ah oui. Euh… Oups ^^ Mais c'est parce que j'aime bien NaN…

...et bon appétit ! :mrgreen: (et ben voilà tu m'as donné faim :furieux:)

Avec vos conseils et aides, voila ce que j'ai réalisé:

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<body>
	<script type="text/javascript" >
		<!--
			function calculatrice()
			{
				var resultat;
				var nombre1;
				var nombre2;
				var type;
 
				type = saisieSigne();
				nombre1 = saisie();
				nombre2 = saisie2();
 
				function saisieSigne(){
					return signe = prompt("Quel type d'operation voulez-vous faire ? (+,-,*,/)");
				}
 
				function saisie(){
					nb1 = parseInt(prompt("Saisissez le premier nombre.","nombre"));
					return nb1;
				}
				function saisie2(){
					nb2 = parseInt(prompt("Saisissez le premier nombre.","nombre"));
					return nb2;
				}
 
				if (type == "+"){
					function addition(nb1,nb2)
					{
						res = nb1 + nb2;
						return res;
					}
					resultat = addition(nombre1,nombre2);
				} else if (type == "-"){
					function soustraction(nb1,nb2)
					{
						res = nb1 - nb2;
						return res;
					}
					resultat = soustraction(nombre1, nombre2);
				} else if (type == "*"){
					function multiplication(nb1,nb2)
					{
						res = nb1 * nb2;
						return res;
					}
					resultat = multiplication(nombre1, nombre2);
				} else if (type == "/") {
					function division(nb1,nb2)
					{
						res = nb1 / nb2;
						return res;
					}
					resultat = division(nombre1, nombre2);
				}
 
				function affichage(res)
				{
					alert("Resultat : "+res);
				}
 
				affichage(resultat);
			}
		//-->
	</script>
	<br /><br /><br /><br />
	<center><input type="submit" value="calculatrice" onclick="calculatrice();"/></center>
</body>

Si vous avez des conseils pour améliorer un peu n'hésitez pas.

Pareil ^^ tu utilises ici des variables globales inutiles...

Je proposerais quelques simplifications :

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
         function calculatrice() {
            var resultat;
            var nombre1;
            var nombre2;
            var type;
 
            type = saisieSigne();
            nombre1 = saisie("Saisissez le premier nombre.");
            nombre2 = saisie("Saisissez le deuxième nombre.");
 
            function saisieSigne() {
               return prompt("Quel type d'operation voulez-vous faire ? (+,-,*,/)");
            } 
            function saisie(message) {
               return parseInt(prompt(message, "nombre"), 10);
            }
            function addition(nb1,nb2) {
               return (nb1 + nb2);
            }
            function soustraction(nb1,nb2) {
               return (nb1 - nb2);
            }
            function multiplication(nb1,nb2) {
               return (nb1 * nb2);
            }
            function division(nb1,nb2) {
               return (nb1 / nb2);
            }
            function affichage(res) {
               alert("Resultat : "+res);
            }
 
            switch (type) {
               case "+": resultat = addition(nombre1, nombre2);
               case "-": resultat = soustraction(nombre1, nombre2);
               case "*": resultat = multiplication(nombre1, nombre2);
               case "/": resultat = division(nombre1, nombre2);
            }
            affichage(resultat);
         }

Citation:

Envoyé par Tora21

Si vous avez des conseils pour améliorer un peu n'hésitez pas.

J'avoue qu'il y en aurait pas mal :aie:

Tout d'abord, l'intérêt d'une fonction est de pouvoir exécuter plusieurs fois la même portion de code. Donc faire une fonction
Code:

1 2 3 4 function saisie(){ nb1 = parseInt(prompt("Saisissez le premier nombre.","nombre")); return nb1; }
c'est bien, mais à quoi sert la fonction saisie2() qui fait exactement la même chose ???
Ensuite, vu que tu peux passer des arguments à une fonction, saisieSigne() devient aussi superfétatoire (:yaisse:)
Et surtout, définir une fonction qui refait exactement la même chose qu'une méthode native, c'est bien mais pas top :aie:

Ensuite, une variable sert à stocker une donnée, mais stocker une donnée qui va être détruite à l'instruction suivante a ma foi assez peu d'intérêt, donc saisie() peut facilement devenir
Code:

1 2 3 function saisie(texte, valeur){ return prompt(texte, valeur); }
Autre chose
Code:

1 2 3 4 5 6 7 if (type == "+"){ function addition(nb1,nb2){ res = nb1 + nb2; return res; } resultat = addition(nombre1,nombre2); }
A part le plaisir masochiste de se faire de noeuds à l'encéphale, je comprends difficilement l'intérêt de définir une fonction puis une variable qui récupèrera le résultat de la fonction pour le retourner immédiatement... :calim2:
Ne crois-tu pas que
Code:

1 2 3 if (type == "+"){ return nb1 + nb2; }
est plus simple :mrgreen:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function calculatrice(){ var nb1 = prompt('Entrez le premier nombre', 'Nombre'); var nb2 = prompt('Entrez le deuxième nombre', 'Nombre'); switch(prompt('Quelle opération ?', '+,-,*,/'){ case '+': alert(parseInt(nb1, 10) + parseInt(nb2, 10)); return; case '-': alert(nb1 - nb2); return; case '*': alert(nb1 * nb2); return; case '/': alert(nb1 / nb2); return; default: alert('Erreur de saisie...'); calculatrice(); } }

Ne nous arrêtons pas en si bon chemin :mrgreen:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function calculatrice() { var resultat, type, nombre1, nombre2; var Operations = { "+": function (nb1,nb2) { return (nb1 + nb2); }, "-": function (nb1,nb2) { return (nb1 - nb2); }, "*": function (nb1,nb2) { return (nb1 * nb2); }, "/": function (nb1,nb2) { return (nb1 / nb2); } }; function saisieSigne() { return prompt("Quel type d'operation voulez-vous faire ? (+,-,*,/)"); } function saisie(message) { return parseInt(prompt(message, "nombre"), 10); } function affichage(res) { alert("Resultat : " + res); } type = saisieSigne(); nombre1 = saisie("Saisissez le premier nombre."); nombre2 = saisie("Saisissez le deuxième nombre."); resultat = Operations[type](nombre1, nombre2); affichage(resultat); }
edit : le code ci-dessus constitue un retour en arrière par rapport aux remarques de bon sens de Bovino, mais j'étais pris dans mon élan de factorisation, indépendamment du pragmatisme général (le "pour quoi faire ?") :oops:

Etant donné que l'idée du post initial était d'apprendre à manipuler les fonctions... ^^

--- (ci-dessous, supplément hors-sujet)

Citation:

Envoyé par Bovino

superfétatoire (:yaisse:)

Attends ne me dis rien... Vous faites une sorte de loto avec des copains et tu devais essayer de placer celui-là quelque part... :mrgreen: Bravo c'était pas évident ^^

12/07/2011, 14h55
Watilin

Code:

eval(nombre1 + type + nombre2);

:pastaper:
12/07/2011, 15h01
RomainVALERI

Citation:

Envoyé par Watilin

Code:

eval(nombre1 + type + nombre2);

:pastaper:

J'y ai pensé mais j'avais pas osé :mouarf:
12/07/2011, 16h09
javatwister

c'est pour ça que j'ai pas voulu participer :mrgreen:
13/07/2011, 10h14
Tora21

Eh ben je vois que ça vous motive mon post.

J'ai encore amélioré mon code avec des petits morceaux de RomainVALERI et Bovino. Mais la ton dernier affichage de code Romain ma donné mal à la tête je pense que je dois encore m'enfoncer un peu plus dans le javascript avant d'attaquer les réductions de code.

Fuseau horaire GMT +2. Il est actuellement 16h34.