11528 sujets

JavaScript, DOM et API Web HTML5

Bonjour les gars j'ai un problème avec un projet vous pourriez m'aider?
Le but est de pouvoir comparer l’exécution de deux tris: le tri par insertion et le tri par fusion en utilisant la méthode dom de Javascript

L'utilisateur peut choisir
le type de tri
et le jeu de données qui va avec:
- trié,
- trié inverse,
-totalement aléatoire,
-partiellement trié
Il doit donner le nombre d'éléments dans le tableau.
Le tableau est le même pour chaque tri,
il est généré en fonction des choix de l'utilisateur.
Ce que nous voulons:
Le tri selon les deux tris sélectionnés par l'utilisateur.
Pour chaque tri, l'animation du tri et le temps mi pour le génerer

merci
Modérateur
Bonjour,

Les spécifications sont assez mal écrites.

1) Tu parles de méthode dom de javascript. Quelle est donc cette méthode magique ?

2) Tu envisages de trier quoi ? des légumes ? du linge ? ou bien simplement des nombres ?

3) En supposant que tu veuilles trier des nombres, faut-il prévoir un champ de saisie pour tous les nombres du tableau ? Ou bien peut-on se contenter de donner la taille du tableau et générer le contenu du tableau aléatoirement ?

4) Il semble que quand tu dis "L'utilisateur peut choisir le type de tri et le jeu de données qui va avec", cela veuille dire que l'utilisateur doit saisir tous les éléments du tableau. Mais cela pourrait aussi vouloir dire que les données du départ sont générés automatiquement et doivent être soit déjà triées, soit déjà triées mais inversées, soit réparties aléatoirement, soit déjà partiellement triées (et dan ce dernier cas, c'est quoi les critères à respecter). Bref, on ne comprend pas clairement ce qu'il faut vraiment faire.

4) Tu parles d'animation du tri. Cela signifie-t-il qu'il faut faire une animation en html+css/javascript déplaçant les éléments du tableau au fur et à mesure que le tri s'effectue (comme ce qui est fait sur les pages https://fr.wikipedia.org/wiki/Tri_par_insertion et https://fr.wikipedia.org/wiki/Tri_fusion ) ?

5) Tu parles de "tri selon les deux tris sélectionnés par l'utilisateur". C'est assez mystérieux comme phrase. Je ne vois que deux tris possibles dans l'énoncé : le tri par insertion et le tri par fusion. On se demande donc ce que l'utilisateur a bien pu "sélectionner" comme tri.

6) Tu parles de temps mis pour effectuer le tri. S'il y a une animation, il ne peut y avoir qu'assez peu de données et le temps mis sera très court, et les temps mis seront sans doute non significatif du coup. Pour qu'on puisse voir des différences notables au niveau du temps d'exécution des tris, il faudrait des milliers voir des millions de données, mais alors une animation sera difficile voire impossible à réaliser. Et il faudra ralentir artificiellement l'animation pour qu'on ait le temps de voir ce qu'il se passe. Du coup le temps mis sera principalement la somme des ralentissements : rien à voir du coup avec la durée des tris si ce n'est que ce sera peut-être proportionnel au nombre de comparaisons (la durée d'un tri sur un gros volume de données dépend certes du nombre de comparaisons à effectuer mais aussi beaucoup de la nécessité ou pas d'avoir des tableaux intermédiaires : le nombre de comparaisons seul n'est pas suffisant pour mesurer l'efficacité d'un tri). Peut-être faut-il faire d'abord les "deux" tris (à condition qu'on sache ce qu'est vraiment ce "deux") sans rien voir, puis générer les animations ?

Amicalement,
Modifié par parsimonhi (20 Mar 2021 - 07:55)
Il s'agit de trier des nombre par exemple de 0 à 100
Donc un tableau qui genere10 nombre par exemple de 0 à 100 soit trié aléatoirement, ensuite partiellement trié, inversement trié
Pour chaque type de jeu de donnée(trié aléatoirement, ensuite partiellement trié, inversement trié) on fera une tri fusion d'une par et le tri insertion de l'autre

Ensuite c'est de comparer les 2 tri: fusion et insertion le temps mis
la methode dom en Javascript c'est elle qui utulise( du code get ElementById.......)
exemple de code dom en javascript
function init(nbElement)
{
var tab=new Array(nbElement);
for(var i=0;i<nbElement;i++)
{
tab=alea(10,100);
}

return tab;
}

function start()
{
var monTableau=init(10);
var maPage=document.getElementById("page");
var maTable=document.createElement("table");
var uneLigne=document.createElement("tr");
for(var i=0;i<monTableau.length;i++)
{
var uneCase=document.createElement("td");
var unTexte=document.createTextNode(monTableau[i]);
uneCase.setAttribute("id","case"+i);
uneCase.appendChild(unTexte);
uneLigne.appendChild(uneCase);
}
maTable.appendChild(uneLigne);
maPage.appendChild(maTable);

var monBouton=document.createElement("button");
monBouton.setAttribute("onclick","byebye(0);"); //cacheCache(10);");
maPage.appendChild(monBouton);
}
[/i]
Effectivement ca doit etre comme l'animation que vous m'avez envoyé sur wiki
au fait par rapport au jeu de donnée:
On aura par exemple 3 bouton : trié aléatoire , inverse, tri partielle
-Si l'utilisateur choisi tri aleatoire on aura un tableau de nombre(10) qui sont aléatoire
ensuite il y aura 2 autre boutons qui corrspond au type de tri: fusion et insertion
sil appuie sur tri fusion ça procedera au tri a fusion de ces 10 nombre generer aleatoirement; idem pour le tri insertion;
-L'utilisateur peut choisir tri inverse et on procedera comme le precedent
Modérateur
Bonjour,

Déjà, on ne va pas faire ton exo à ta place, sinon, ça sert à rien.

Il faudrait pour une première étape que tu fasses ta page html avec un champ pour saisir le nombre d'éléments, une liste d'inputs radio pour le choix du type de tri (insertion ou fusion), tes 3 boutons tri aléatoire , tri inverse, tri partielle, et sans doute un bouton démarrer.

Il faut aussi faire un css minimal qui accompagne ça.

Normalement, tu devrais y arriver.

Une fois que t'as fait ça, tu reviens poster ton html et ton css, et on avancera.

Amicalement,
Meilleure solution