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