Début en Javascript

**Tora21** · 07/07/2011, 15h34

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 :

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

**Watilin** · 07/07/2011, 16h32

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

). Les arguments sont en général (*) passés par copie :

Code JS :

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

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

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

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

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

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

**RomainVALERI** · 07/07/2011, 16h33

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

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 ?

edit : cramé par Watilin

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 :

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

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 ^^

**Tora21** · 07/07/2011, 20h00

Je vous remercie de vos réponse, alors je ne fait pas de C mais du Java

, 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

**RomainVALERI** · 07/07/2011, 21h45

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

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

, utilise parseInt sur le résultat pour obtenir un Number

Code :

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

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

**Tora21** · 08/07/2011, 09h11

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 :

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
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.

**vermine** · 08/07/2011, 09h21

Bonjour,

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

Code :

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

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.

**Tora21** · 08/07/2011, 09h42

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 :

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

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 :

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

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

Comment ferai-t-on en JavaScript?

**javatwister** · 08/07/2011, 09h44

à part ça, le but c'est d'avoir les 4 résultats d'opérations affichés ou bien?

**Tora21** · 08/07/2011, 09h47

Non pas du tous, mais en fait j'ai oublié de mettre en commentaire, je laissai, la fonction addition et affiche

**vermine** · 08/07/2011, 10h00

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.

**Tora21** · 08/07/2011, 10h16

Voila comment j'ai procédé:

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
 
<script type="text/javascript" >
<!--
	function calculatrice()
	{
	        var resultat;
		var nombre1;
		var nombre2;
 
		nombre1 = saisie();
		nombre2 = saisie2();
 
		function saisie()
		{
			nb1 = parseInt(prompt("Saisissez le premier nombre.","nombre"));
			return nb1;
		}
		function saisie2()
		{
			nb2 = parseInt(prompt("Saisissez le premier nombre.","nombre"));
			return nb2;
		}
 
		function addition(nb1,nb2)
		{
			res = nb1 + nb2;
			return res;
		}
 
		function affichage(res)
		{
			alert("Resultat : "+res);
		}
 
 
		resultat = addition(nombre1,nombre2);
		affichage(resultat);
	}
//-->
</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?

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

**RomainVALERI** · 08/07/2011, 10h17

Envoyé par Tora21

Et lorsque j'appel ma méthode:

Code :

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

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

Comment ferai-t-on en JavaScript?

Ben la même chose

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

Code :

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

1
2
 
maClasse.addition(this.number1,this.number2);// wtf

**vermine** · 08/07/2011, 10h20

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ù.

**Watilin** · 08/07/2011, 18h46

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

Code JS :

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
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…

**NoSmoking** · 08/07/2011, 19h21

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…

j'

bien

...

il manque le (*) non?

Invité · 08/07/2011, 20h42

j'ai NAN comme resultat c'est normale ?

**RomainVALERI** · 08/07/2011, 20h49

Envoyé par mekal

j'ai NAN comme resultat c'est normale ?

lapsus de Watilin (il en fait peu

)

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 :

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

1
2
nombre1 = tableau[0];
nombre2 = tableau[1];

Invité · 08/07/2011, 21h23

adjugé vendu pour la prochaine j'ouvrirait mieux les yeux

**Watilin** · 08/07/2011, 23h35

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

J’édite mon code pour plus de clarté

Envoyé par NoSmoking

il manque le (*) non?

C'est le même que mon post d'au-dessus

Début en Javascript

JavaScript

Discussions similaires

Partager

Partager