Exercice Tableau Javascript

Version imprimable

25/03/2011, 00h22
hindou90

Exercice Tableau Javascript

Bonjour,
Je suis d�butante en Javascript.
Je me boque sur un exercice, d�j� m�me dans la phase de conception, bon voil� l'�nonc� de l'exercice:
Cr�er un tableau qui contiendra des noms d'�quipes tap�s dans une fen�tre ou dans une zone de texte ainsi leur nombre de points dans le championnat. Ecrir une fonction de tri de ces tableaux par ordre d�croissante des scores. Vous obtiendrez alors le classement de votre championnat.

Si j'�tais en C, j'allais cr�er drectement un tableau de structure.
et comme Javascript est un langage Orient� Objet, alors structure = Classe.
J'ai pens� d'abord � cr�er une classe "equipe" puis � chaque ajout d'une �quipe j'instance un objet mais le probl�me c'est comment lier ces objet (le cas d'un tableau).

Je serais tr�s reconnaissante si quelqu'un pourriez m'aider .

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var classement = [
    {equipe:"real",score:2},
    {equipe:"om",score:3},
    {equipe:"sg",score:1},
    {equipe:"montpellier",score:5}
];
 
function tri(tableau){
	tableau.sort(function(a,b){return b.score-a.score;});
}
 
function affiche(tableau){
	for(var i=0;i<tableau.length;i++)
		document.write(tableau[i].equipe,'|',tableau[i].score,'<br/>');
}
 
tri(classement);
affiche(classement);

25/03/2011, 00h59
hindou90

Merci pour la r�ponse!
dites-mi s'il vous plait, est ce que classement joue le m�me r�le que "strucute" ?
L� vous faites la saisie manuellement, alors que c'est l'utilisateur qui va entrer les donn�e;
pour lire un classement, je met classement.equipe ,c'est bien �a ?
25/03/2011, 01h01
hindou90

et comment s'il vous plait identifier le ligne du classement => indice ?

Citation:

Envoy� par hindou90

et comment s'il vous plait identifier le ligne du classement => indice ?

dans ce cas j'ai cr�� un tableau (Array) d'objets.

un tableau en javascript se d�clare :
Code:

1 2 [elem1,elem2,elem3,etc...]
ou
Code:

1 2 new Array(elem1,elem2,elem3,etc...);
j'ai donc d�clar� une variable que j'ai nomm� "classement"

var classement

� laquelle j'ai assign� mon nouveau tableau.

les �l�ments du tableau peuvent �tre (un peu pr�t) n'importe quoi, du simple string
Code:

1 2 ["nom1","nom2","nom3"]
ou des objects

un objet javascript s'instancie soit via une instance d'une fonction(�quivalent de classe) :
Code:

1 2 3 4 5 function class1(){ this.name = "lol"; } var monObject = new ma_fonction();
ou bien � l'aide des accolades avec le nom des attributs et leurs valeur comme suit : {attr1:value,attr2:value,etc...}
Code:

1 2 var monObject = {name:"lol"};
les �l�ments de mon classements sont tous ici des objets contenant 2 attributs "equipe" et "score"

pour lire le ni�me �l�ment d'un tableau, il suffit de faire : tableau[n]

dans notre cas :
Code:

1 2 3 classement[0]; // renverra le premier élémént du tableau // donc dans notre cas: {equipe:"real",score:2} avant le tri // et : {equipe:"montpellier",score:5} après le tri
pour lire l'attribut d'un objet il suffit de faire : objet.attribut
donc dans notre exemple apr�s tri :
Code:

1 2 classement[0].equipe; // renverra "montpellier" (notre première équipe)
pour le saisi manuelle faut voir de quelle fa�on tu d�sires "entrer" les valeurs.

par exemple on peut concevoir que classement est par d�faut un tableau vide :

Code:

var classement = [];

et que dans ta page html, tu aies un formulaire qui rajoutera les �quipes et leurs scores :
Code:

1 2 3 4 5 <form id="ajouter"> <input type="text" name="equipe" /> <input type="text" name="score" /> <input type="button" id="ajout" value="ajouter" /> </form>
Code:

1 2 3 4 function ajouter(){ classement.push({equipe:document.forms['ajouter'].elements['equipe'].value,score:document.forms['ajouter'].elements['score'].value}); } document.forms['ajouter'].elements['ajout'].onclick = ajouter;
en conclusion: si c'est un projet pour un cours, t'as int�r�t � rudement bien �tudier avant ton examen ! :D

bonjour,

je vous remercie beaucoup pour avoir pris le temps de r�pondre de cette fa�on d�taill�.
Alors je ne vois pas qur vous avez utilis� le mot cl� "array", pourquoi ?
s'il vous plait, o� est ce que on d�finit les champs de notre tableau, dans l'objet c'est �a ?
voil� mon essaie, qui ne donne rien lorsque je l'ex�cute :
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 <html> <script language="javasript"> cp=0; function instance() { String equipe; int score; } var Tab_equipe[] = new instance(); function ajouter() { Tab_equipe={equipe:document.f1.equipe.value,equipe:document.f1.score.value} cp++; } </sript> <form id="f1"> <input type="text" name="equipe" /> <input type="text" name="score" /> <input type="button" id="ajout" value="ajouter" onclick="ajouter"/> </form> </html>
Si j'ai bien compris votre derbi�r code, push joue le m�me r�le que la fonction ajouter, c'est correct ?

Concernant votre fonction "tri', pourquoi vous avez appel� "fonction(a,b)" et � quoi sert cette derni�re ?

Citation:

en conclusion: si c'est un projet pour un cours, t'as int�r�t � rudement bien �tudier avant ton examen

Oui absolument, car j'ai tout m�lang� dans la t�te :)
Merci infiniment :)

- "[]" correspond(+/-) � "Array()"

Citation:

function instance()
{
String equipe;
// �a n'existe pas, tu peux faire "var equipe;" mais ce sera inutile ici
int score;
// pareil qu'au dessus "var score;" mais sans int�ret
}
var Tab_equipe[] = new instance();
//tu ne peux pas mettre de crochets � un nom de variable
function ajouter()
{
Tab_equipe={equipe:document.f1.equipe.value,equipe:document.f1.score.value}
// tu assignes un objet � ta variable tab_equipe... �a �crase donc la valeur pr�c�dente
cp++;
}

une autre solution (que la premi�re que je t'ai propos�e et qui se rapproche de la tienne)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function classement() { this.equipe = []; // new Array(); this.score = []; // new Array(); } var Tab_equipe[] = new classement(); function ajouter() { Tab_equipe.equipe.push(document.f1.equipe.value); Tab_equipe.equipe.push(document.f1.score.value); }
Code:

1 2 3 4 5 <form> <input type="text" name="equipe" /> <input type="text" name="score" /> <input type="button" value="ajouter();" onclick="ajouter"/>"/> </form>
mais cette approche est moche car "ajouter" devrait �tre un prototype de "classement" plutot qu'une fonction isol�e. et surtout tu as 2 tableaux distinct pour les �quipes et les scores. les �l�ments ne sont donc "li�s" que par leurs indices. alors qu'un unique tableau d'objets comme dans mon premier message est beaucoup plus adapt�.

27/03/2011, 14h57
laurentg2003

en javaScript un tableau associatif est en r�alit� un objet et les champs monTab["champs"] sont des propri�t�s
Tu peux donc cr�er un "tableau associatif" de plusieurs manieres
var monTab=new Array();
var monTab= new Object();
et les formes litt�rales
var monTab=[];
var monTab={};
tu peux aussi cr�er une tableau d'objets au format json (forme literalle)donc une chaine de caractere et l'evaluer avec eval();
il est ansi tr�s facile de passer des donn�es de php ou java � JavaScript mais Je n'utilise que la forme litterale plus rapide � ecrire et donc la forme
var monTab={} car un tableau associatif est un objet c'est un hash.
Vu que tu peux les lire avec la boucle for in c'est des objets donc � ne pas confondre avec les tableaux indic�s

Bonsoir,
Merci pour vos r�ponses:

Code:

mais cette approche est moche car "ajouter" devrait être un prototype de "classement" plutot qu'une fonction isolée.

Donc comment rencdre la fonction "ajouter" un prototype de "classement"?
Dans votre premi�re solution, je n'ai pas vue ou est-ce que vous avez d�fini les variables "equipe" et "score".
Malgr� �a chez moi le code ne fonctionne pas !
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html> <body> <script language="Javascript"> function classement() { this.equipe = []; // new Array(); this.score = []; // new Array(); } var Tab_equipe[] = new classement(); function ajouter() { Tab_equipe.equipe.push(document.f1.equipe.value); Tab_equipe.equipe.push(document.f1.score.value); } </sript> <form id="f1"> <input type="text" name="equipe" /> <input type="text" name="score" /> <input type="button" id="ajout" value="ajouter" onclick="ajouter"/> </form> </body> </html>
S'il vous plait dans les arguments de vos fonctions (affiche et tri�) vous avez mis juste "tableau" sans type , pourrais-je savoir pourquoi ?
Franchement, je n'ai pas compris votre fonction de tri.
D'autre part, pourquoi vous dites que les �l�ments sont li�s juste par les indices.

laurentg2003=> merci pour ces informations,j'aurais du utiliser les tableaux associatifs .

Excusez-moi :oops: pour ces questions, mais tout est flou :?

Amicalement.

27/03/2011, 22h39
Willpower
tu ne dois pas d�clarer le type des variables en javascript, leurs types seront d�finis en fonction et leurs contenu et pourront changer durant l'ex�cution du programme.
Code:

1 2 3 4 var a = "33"; // string var b = 33; // number var c = {}; // object var d = function(){}; // function
pour la fonction de tri, j'avais simplement utilis� la m�thode "sort" de la classe "array".
27/03/2011, 23h13
laurentg2003

Citation:

pourquoi vous dites que les �l�ments sont li�s juste par les indices.

Je ne comprend pas trop cette remarque
mais un element donc une valeur de ton tableau est accessible par son indice comme en C et tout langage qui reprend la syntaxe du C Java C# C++ Php et javaScript doc soit un int 0,1,2 pour un tableau indic� MonTab[1] soit une chaine de caractere pour un tableau associatif MonTab["machaine"]
l'indice est la cl�f du tabeau
J'ai fais du C# et donc javaScript n'a pas de structure
si je m'en souvient bien en c#c'est une classe qui n'implemente pas l'heritage et ou le passage de valeur se fait par valeur et non pas par refrence bref
javaScript n'implemente pas �a mais pour cr�er une collection style Java m�me si �a pas vraiment la m�me chose tu utilise json [{ "nom" : "valeur"}, { "nom2" : "valeur2"}, etc et tu utilise eval qui "compile" le code
sinon tu peux cr�er directement des classes avec une notation Json genre le framework prototype
Mais je te conseil 4 livres qui m'ont ouvert les yeux sur la puissance de JS
les meilleurs pour moi
"Bien developper pour le web 2.0" de christophe porteneuve
"JavaScript pour le web 2.0 " de thierry templier et arnaud Gougeon
" D�buter en javaScript" de Shelley Power assez complexe pr un debutant ,mais riche sur les closures par exemple
Javascript Pr�cis et concis de david Flanagan (je l'ai toujurs a port� de main celui l�=))
JavaScript est un langage tr�s puissant mais assez d�routant pour qui vient du C ou pire des langages � objets
javaScript n'est pas veritablement un langage orient� objet
Il est bas� sur le prototypage il n'impl�mente pas les concepts de la poo mais il permet de les simuler voil� :)

Bonsoir, vite fait en passant

Citation:

Envoy� par hindou90

Malgr� �a chez moi le code ne fonctionne pas !

partie script

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<script language="Javascript">
function classement(){
  this.equipe = []; // new Array();
  this.score = []; // new Array();
}
// PAS DE COCHET POUR LA DECLARATION
// var Tab_equipe[] = new classement();
var Tab_equipe = new classement();
 
function ajouter(){
  Tab_equipe.equipe.push(document.f1.equipe.value);
  Tab_equipe.score.push(document.f1.score.value);
// ERREUR DE FRAPPE equipe DEUX FOIS
// Tab_equipe.equipe.push(document.f1.score.value);
  alert(Tab_equipe.equipe +'\n' +Tab_equipe.score);
}
</script>
<!-- FIN BALISE ERRONE
</sript>
-->

partie HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
</head>
<body>
<!-- MANQUE NAME POUR ACCES DIRECT -->
<form id="f1" name="f1">
  <input type="text" name="equipe" />
  <input type="text" name="score" />
  <input type="button" id="ajout" value="ajouter" onclick="ajouter()"/>
<!-- MANQUE PARENTHESE SUR APPEL FONCTION
  <input type="button" id="ajout" value="ajouter" onclick="ajouter"/>
-->
</form>
</body>
</html>

voir commentaires inline.

27/03/2011, 23h36
Willpower

j'ai honte :oops:

Bonjour,
Je vous remercie vous tous �norm�ment :)
Willpower=> Dans la fonction tableau.sort vous avez untilis� Function(a,b),pourquoi ?
N�ayez pas honte c'est moi qui copie/colle les code b�tement ;)
laurentg2003=> Merci sp�cialement pour cette r�ponse tr�s riche. j'ai cru que javascript c'est comme java orient� objet pur.
J'avoue que j'ai besoin de r�-lire le cours sur javascript,et bien entendue les livres.
NoSmoking=> Merci pour votre r�ponse "corrective" le code marche tr�s bien mais lorsque j'ajoute les fonctions d'affichage et de tri, il cesse de fonctionne.
De plus, en ajoutant une nouvelle �quipe, il m'affiche dans "alert" la valeur pr�c�dant, la nouvelle valeur; pour y rem�dier j'ai vid� les champs avant de quitter la fonction, est-il correcte ce que j'ai fait.
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 <html> <body> <script language="Javascript"> function classement(){ this.equipe = []; // new Array(); this.score = []; // new Array(); } // PAS DE COCHET POUR LA DECLARATION // var Tab_equipe[] = new classement(); var Tab_equipe = new classement(); function ajouter(){ Tab_equipe.equipe.push(document.f1.equipe.value); Tab_equipe.score.push(document.f1.score.value); // ERREUR DE FRAPPE equipe DEUX FOIS // Tab_equipe.equipe.push(document.f1.score.value); alert(Tab_equipe.equipe +'\n' +Tab_equipe.score); f1.equipe.value=NULL; f1.score.value=NULL; } function tri(tableau){ tableau.sort(function(a,b){return b.score-a.score;}); } function affiche(tableau){ for(var i=0;i<tableau.length;i++) document.write(tableau[i].equipe,'|',tableau[i].score,'<br/>'); } </script>   <form id="f1" name="f1"><p> Equipe&nbsp<input type="text" name="equipe" /> Score&nbsp<input type="text" name="score" /> <input type="button" id="ajout" value="ajouter" onclick="ajouter()"/> <input type="button" id="ajout" value="tri" onclick="tri(classement)"/> <input type="button" id="ajout" value="affiche" onclick="affiche(classement)"/></p>  </form> </body> </html>

un code qui fonctionne :

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
<body>
<form id="ajouter">
  <input type="text" name="equipe" value="equipe" />
  <input type="text" name="score" value="score" />
  <input type="button" id="ajout" value="ajouter" />
  <br/>
  <br/>
  <input type="button" id="trier" value="trier" />
  <input type="button" id="affiche" value="affiche" />
</form>
</body>
<script type="text/javascript">
var classement = [
	// supprimer les 2 lignes suivantes pour commencer avec un classement vide
	{equipe:"lol",score:2},
	{equipe:"om",score:3}
];
 
function tri(){
	classement.sort(function(a,b){return b.score-a.score;});
}
 
function affiche(){
	result = "";
	for(var i=0;i<classement.length;i++)
		result += classement[i].equipe+' : '+classement[i].score+'\n';
	alert(result);
}
function ajouter(){
    classement.push({equipe:document.forms['ajouter'].elements['equipe'].value,score:document.forms['ajouter'].elements['score'].value});
}
 
document.forms['ajouter'].elements['ajout'].onclick = ajouter; 
document.forms['ajouter'].elements['trier'].onclick = tri;
document.forms['ajouter'].elements['affiche'].onclick = affiche;
</script>
</body>

28/03/2011, 01h36
laurentg2003

Java n'a rien a voir avec JavaScript si ce n'est qu'a l'origine c'est le langage de script de Java et d'ailleurs je l'utilise parfois pour �a avec une applet Java mais avec moi c'est java qui devient le langage de prog de Javascript :)
si tu as des cours sur Javascript comme j'ai eu tu vas pas aller loin c'etait des cours( pourtant c r�cent) avec des prompt etc genre JS 1.0...
il y a de tr�s bon tutos ici sur javascript orient� objet sur Internet et l� c'est un de mes cours de bts sur java et la poo surtout, je te le met c'est vraiment hyper bien fait http://www.webcreation-lg.fr/Java.pdf
28/03/2011, 02h12
hindou90

Willpower => oui le code marche tr�s bien, merci beaucoup.
laurentg2003=>:calim2: maintenant les choses commence � �claircir.
Si j'ai bien compris, Javascript est la langage de script de java c'est �a, javascript permet de cr�er des applets, et l'alliance entre les deux s'arr�t ici :). Merci pour les liens :)

Sinon, il me reste � faire "la recherche" mais je veux essayer de me d�brouiller toute seule, ce n'est pas la peine de vous emb�tez et de vous arr�tez chaque 2lignes sur une concepts.

Merci pour vous tous.
Amicalement.
28/03/2011, 02h34
laurentg2003

javaScript permet de communiquer avec une applet petite pr�cision :lol:
et javaScript c'est surtout ajax et le web 2.0 le cot� langage de script de java c pour l'histoire ;)
28/03/2011, 02h52
hindou90

donc java utilise "parfois" du javascript pour la cr�ation applets.
java se base essentiellement sur POO alors que javascript se base sur prototypage => l'utilisation des fonction, c'est bien ca ?
28/03/2011, 12h01
laurentg2003

JavaScript se base sur le prototypage oui et en particulier la propri�t� prototype de l'objet fonction
tout est un objet en javaScript
JavaScript manipule des objets sans pour autant impl�ment� les concepts de la poo.
Tu peux les simuler donc
En java tu auras une classe ,un constructeur dans ces classes et tes objets seront des instances de cette classe.
En javaScript tu emule tout cela
Avec une fonction constructrice d'objet
En js un objet est donc une instance d'objet
tout objet derive de l'objet Object tout objet est une instance de l'objet Object donc
avec la propri�t� prototype tu peux ajouter des proprit�s et des m�thodes a tes objets personnalis�s
mais tu peux faire plus fort et c'est l� toute la puissance de JS tu peux ajouter via prototype des proprit�s et des m�thodes aux objets pr�d�finies
array string et m�me object et ton membre sera comme un membre natif
en java tu peux les etendre mais si tu as une interface c'est plus possible
javaScript pour moi est un langage orient� objet mais different des autres langages de poo le prototype est un modele d'objet en fait la ou une classe d�fini un objet
c'est cette diff�rence ce cot� hors norme qui l'a longtemps fait pass� pour le vilain petit canard de la prog mais en fait sa difference fait sa richesse comme souvent dans tous les domaines

Citation:

java se base essentiellement sur POO alors que javascript se base sur prototypage => l'utilisation des fonction, c'est bien ca

c'est bien �a oui

Citation:

donc java utilise "parfois" du javascript pour la cr�ation applets.

java et javaScript communique via une applet l'applet est cr�� en langage html avec inclu un fichier .class un fichier java compil� donc
js accede aux methodes de java peut r�cuperer des valeurs et java accedent aux m�thodes(aux fonctions de js donc)
voil� :)