Javascript & Html demande de correction

Javascript & Html demande de correction - Javascript/Node.js - Programmation

Marsh Posté le 11-03-2015 à 22:46:18    

Bonsoir, voila je travail actuellement sur mon projet de fin d'années en ISN, je suis un élève de terminale S et je vous demande un peu d'aide pour m'aider a corrigé mon code source, je programme donc en Javascript et en Html sous le logiciel Fraise qui est sur Mac OS X.  
 
Voici le code source :  
 

Code :
  1. <html>
  2.     <head>
  3.         <title> Programme Pour L'Utilisation Des Tableaux. </title>
  4.        
  5.   <style type="text/css">
  6.    body { background-image:url(http://images.fotocommunity.fr/photos/personnes/scenes-de-rue/musicien-des-rues-7208cbca-89ff-47ea-96ee-a4ae66b7b7a0.jpg);
  7.              background-attachment:fixed; background-repeat:no-repeat;
  8.              background-position:left top; background-size:cover; }
  9.             </style>
  10.         <script language="JavaScript" type="text/JavaScript">
  11.  function jouerNote(note)
  12.      {
  13.    document.embeds[note].play();
  14.  }
  15.    n=1;
  16.    c='aaa'
  17.    i=1;
  18.  notes = new Array();
  19.        
  20.  function date(iddate)
  21.         {
  22.                 date = new Date;
  23.                 annee = date.getFullYear();
  24.                 moi = date.getMonth();
  25.                 mois = new Array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre',     'Décembre');
  26.                 j = date.getDate();
  27.                 jour = date.getDay();
  28.                 jours = new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi');
  29.              
  30.                 resultatdate = jours[jour]+' '+j+' '+mois[moi]+' '+annee;
  31.                 document.getElementById(iddate).innerHTML = resultatdate;
  32.                 return true;
  33.         }
  34.         function heure(idheure)
  35.         {
  36.                 date = new Date;
  37.                 h = date.getHours();
  38.                 if(h<10)
  39.                 {
  40.                         h = "0"+h;
  41.                 }
  42.                 m = date.getMinutes();
  43.                 if(m<10)
  44.                 {
  45.                         m = "0"+m;
  46.                 }
  47.                 s = date.getSeconds();
  48.                 if(s<10)
  49.                 {
  50.                         s = "0"+s;
  51.                 }
  52.              
  53.                 resultatheure = h+':'+m+':'+s;
  54.                 document.getElementById(idheure).innerHTML = resultatheure;
  55.                 setTimeout('heure("'+idheure+'" );','1000');
  56.                 return true;
  57.         }
  58.         </script>
  59. <script language="JavaScript1.1" type="text/JavaScript">
  60. function rejouer()
  61. {
  62. jouerNote(notes[i]);
  63. aff = window.open('','aff','toolbar=no,status=yes, scrollbars=yes,width=300,height=200');
  64. aff.document.write('<html><head><title>Notes</title></head>');
  65. aff.document.write('<body>');
  66. if (notes[i]==0) message = 'Do';
  67. if (notes[i]==1) message = 'Dodiese';
  68. if (notes[i]==2) message = 'Re';
  69. if (notes[i]==3) message = 'Rediese';
  70. if (notes[i]==4) message = 'Mi';
  71. if (notes[i]==5) message = 'Fa';
  72. if (notes[i]==6) message = 'Fadiese';
  73. if (notes[i]==7) message = 'sol';
  74. if (notes[i]==8) message = 'soldiese';
  75. if (notes[i]==9) message = 'la';
  76. if (notes[i]==10) message = 'ladiese';
  77. if (notes[i]==11) message = 'si';
  78. if (notes[i]==12) message = 'Dohaut';
  79. message +=',';
  80. aff.document.write('<h2>'+message+'</h2>');
  81. i++;
  82. if (notes.length < i){ stoppage();
  83.   i=0; window.clearTimeout(id); }
  84. id=window.setTimeout("rerejouer();",500);}
  85. function rerejouer(){
  86. jouerNote(notes[i]);
  87. if (notes[i]==0) message='Do';
  88. if (notes[i]==1) message='Dodiese';
  89. if (notes[i]==2) message='Re';
  90. if (notes[i]==3) message='Rediese';
  91. if (notes[i]==4) message='Mi';
  92. if (notes[i]==5) message='Fa';
  93. if (notes[i]==6) message='Fadiese';
  94. if (notes[i]==7) message='sol';
  95. if (notes[i]==8) message='soldiese';
  96. if (notes[i]==9) message='la';
  97. if (notes[i]==10) message='ladiese';
  98. if (notes[i]==11) message='si';
  99. if (notes[i]==12) message='Dohaut';
  100. message +=',';
  101. aff.document.write('<h2>'+ message + '</h2>');
  102. i++;
  103. if (notes.length<i)
  104. {
  105.   i=0; stoppage(); window.clearTimeout(id);
  106. }
  107. id=window.setTimeout("rerejouer();",500);}
  108.  function stoppage() {aff.close();}
  109. </script>
  110.   <body>
  111.  <a href="METTRE LE NOM DU FICHIER EN ZIP !!!">Télécharger le fichier </a> 
  112.         <span id="date" style="position:absolute;top:50px;right:70px;font-size:22px;border-top:1px solid #000;">
  113.         </span>
  114.        
  115.          <script type="text/javascript">window.onload = date('date');</script>
  116.        
  117.         <span id="heure" style="position:absolute;top:20px;right:125px;font-size:22px;">
  118.         </span>
  119.        
  120.          <script type="text/javascript">window.onload = heure('heure');</script>
  121.        
  122.         <Font color="navy" size="15"><i><b> Piano interactif </b></i></Font>
  123.           <BR><BR><BR><BR>
  124.          <div align=left>
  125.          <FORM name="FORMULAIRE">
  126.           <BR><BR>
  127.    
  128.           <BR><BR>
  129.                   
  130.          </FORM>
  131.      
  132.  
  133.     <div align=center>
  134.  
  135. <embed src="C0.wav" hidden="true" autostart="false"></embed>
  136. <embed src="Cs0.wav" hidden="true" autostart="false"></embed>
  137. <embed src="D0.wav" hidden="true" autostart="false"></embed>
  138. <embed src="Ds0.wav" hidden="true" autostart="false"></embed>
  139. <embed src="E0.wav" hidden="true" autostart="false"></embed>
  140. <embed src="F0.wav" hidden="true" autostart="false"></embed>
  141. <embed src="Fs0.wav" hidden="true" autostart="false"></embed>
  142. <embed src="G0.wav" hidden="true" autostart="false"></embed>
  143. <embed src="Gs0.wav" hidden="true" autostart="false"></embed>
  144. <embed src="A0.wav" hidden="true" autostart="false"></embed>
  145. <embed src="As0.wav" hidden="true" autostart="false"></embed>
  146. <embed src="B0.wav" hidden="true" autostart="false"></embed>
  147. <embed src="C1.wav" hidden="true" autostart="false"></embed>
  148. <h1><Voici un petit piano fait en Javascript</h1>
  149. <hr>
  150. <p><font size="10";font color="navy";><i><b>Jouez votre mélodie en cliquant sur les touches du piano</b></i></font></p>
  151. <hr>
  152. <a href="#" onClick="jouerNote(0); notes[n] = 0; n++;"><img border=0 src="toucheBlanche.jpeg" align="top"></a>
  153. <a href="#" onClick="jouerNote(1); notes[n] = 1; n++;"><img border=0 src="toucheNoire.jpeg" align="top"></a>
  154. <a href="#" onClick="jouerNote(2); notes[n] = 2; n++;"><img border=0 src="toucheBlanche.jpeg" align="top"></a>
  155. <a href="#" onClick="jouerNote(3); notes[n] = 3; n++;"><img border=0 src="toucheNoire.jpeg" align="top"></a>
  156. <a href="#" onClick="jouerNote(4); notes[n] = 4; n++;"><img border=0 src="toucheBlanche.jpeg" align="top"></a>
  157. <a href="#" onClick="jouerNote(5); notes[n] = 5; n++;"><img border=0 src="toucheBlanche.jpeg" align="top"></a>
  158. <a href="#" onClick="jouerNote(6); notes[n] = 6; n++;"><img border=0 src="toucheNoire.jpeg" align="top"></a>
  159. <a href="#" onClick="jouerNote(7); notes[n] = 7; n++;"><img border=0 src="toucheBlanche.jpeg" align="top"></a>
  160. <a href="#" onClick="jouerNote(8); notes[n] = 8; n++;"><img border=0 src="toucheNoire.jpeg" align="top"></a>
  161. <a href="#" onClick="jouerNote(9); notes[n] = 9; n++;"><img border=0 src="toucheBlanche.jpeg" align="top"></a>
  162. <a href="#" onClick="jouerNote(10); notes[n] = 10; n++;"><img border=0 src="toucheNoire.jpeg" align="top"></a>
  163. <a href="#" onClick="jouerNote(11); notes[n] = 11; n++;"><img border=0 src="toucheBlanche.jpeg" align="top"></a>
  164. <a href="#" onClick="jouerNote(12); notes[n] = 12; n++;"><img border=0 src="toucheBlanche.jpeg" align="top"></a>
  165. <hr>
  166. <a href="#" onClick="rejouer();"> Rejouer la mélodie</a>
  167.          
  168.          
  169. <br><br><br>         
  170. <Font size="6" <b><address>Batti Mondoloni © 2014</address></b></Font>
  171. <a href="METTRE LE NOM DU FICHIER EN ZIP !!!">Télécharger le fichier </a> 
  172.         </div>
  173.     </body>
  174. </html>

Reply

Marsh Posté le 11-03-2015 à 22:46:18   

Reply

Marsh Posté le 11-03-2015 à 23:19:47    

Corriger quoi ? Quel est le soucis ? Il s'agirait pas de faire le boulot à ta place des fois ? ;)
 
En tout cas, concernant ton code JS :
1) mets tes fonctions ensemble, là ca va dans tout les sens
 
2) en JS, si tu ne mets pas le mot clé "var" devant une variable, elle est automatiquement globale, même si elle est définie dans une fonction
 
3) replace tes "new Array" par la version litérale, càd []
new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi');
devient
['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'];
 
4) les if en pagaille se remplacent facilement par un switch
 
5) ne fait pas window.setTimeout("rerejouer();",500);
mais window.setTimeout (rerejouer, 500);
 
6) méfies toi des variables qui portent presque le même nom et qui representent presque la même chose, genre moi/mois, jour/jours
 
7) conseil : même si dans un if tu n'as qu'une seule ligne derriere, mets quand même les accolades, tu gagneras en lisibilité et en temps de debug
au lieu de  
if (notes[i]==0) message='Do';
if (notes[i]==1) message='Dodiese';
if (notes[i]==2) message='Re';
 
remplaces par
if (notes[i]==0) { message='Do'; }
if (notes[i]==1) { message='Dodiese'; }
if (notes[i]==2) { message='Re'; }
 
Dailleurs, ici un switch est bien meilleur, là ton code va passer tout tes if les uns apres les autres, alors que ce n'est pas necessaire
switch (notes[i])
{
  case 0:
    message='Do';
    break;
 
  case 1:
    message='DoDiese';
    break;
//...
}
 
8) evites de mélanger les type, si tu utilises une variable pour stocker un nombre, ne la transforme pas en string plus loin, sauf si tu veux que ton code soit tout lent :o
h = date.getHours();
if (h < 10)
{
  h = "0"+h; // nope ! crée une autre variable !
}
 
9) relis ton html, ca va dans tout les sens ;)
et "font" est déprecié depuis 1 siecle environ  
 
10) mets tout le code ensemble, le js avec le js (pas besoin de plusieurs balises script), et le html avec le html. Les onclick dépannent, mais ne devraient pas être la base du taf ;)
 
bonne chance


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 12-03-2015 à 12:44:38    

J'ajouterais qu'il est mieux de sortir le CSS et le JS du fichier HTML, et donc d'avoir trois fichiers différents (il faut ensuite importer les fichiers CSS et JS dans le HTML).

Reply

Marsh Posté le 12-03-2015 à 19:36:03    

Merci de votre réponse enfaite lorsque je lance cet page je ne voit ni les image et je n'entend pas le son associer aux images.. En tout cas merci et je vais essayer de tout corriger ;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed