Exercice Tableau Javascript [Résolu]

[hindou90]

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 .

[Willpower]

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

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

[hindou90]

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

[Willpower]

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

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

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 !

[hindou90]

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 ?

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

[Willpower]

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

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

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

[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

[hindou90]

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 pour ces questions, mais tout est flou


Amicalement.

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

[laurentg2003]

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à

[NoSmoking]

Bonsoir, vite fait en passant

Envoyé par hindou90

Malgré ça chez moi le code ne fonctionne pas !

partie script

Code javascript :

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

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.

[Willpower]

j'ai honte

[hindou90]

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>
<!-- FIN BALISE ERRONE
</sript>
-->
 
<!-- MANQUE NAME POUR ACCES DIRECT -->
<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>
<!-- MANQUE PARENTHESE SUR APPEL FONCTION
  <input type="button" id="ajout" value="ajouter" onclick="ajouter"/>
-->
</form>
</body>
</html>

[Willpower]

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>

[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

[hindou90]

Willpower => oui le code marche très bien, merci beaucoup.
laurentg2003=> 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.

[laurentg2003]

javaScript permet de communiquer avec une applet petite précision
et javaScript c'est surtout ajax et le web 2.0 le coté langage de script de java c pour l'histoire

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

[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

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

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à