Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2767 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Javascript & Html demande de correction

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Javascript & Html demande de correction

n°2253005
titi2a1
Posté le 11-03-2015 à 22:46:18  profilanswer
 

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>

mood
Publicité
Posté le 11-03-2015 à 22:46:18  profilanswer
 

n°2253008
SICKofitAL​L
misanthrope
Posté le 11-03-2015 à 23:19:47  profilanswer
 

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...
n°2253050
psychodark​squall
VégétAryen
Posté le 12-03-2015 à 12:44:38  profilanswer
 

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

n°2253139
titi2a1
Posté le 12-03-2015 à 19:36:03  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Javascript & Html demande de correction

 

Sujets relatifs
Appel d'une autre page a partir d'une page HTML ou PHP[html et JavaScript] Récupération d'informations et ré-utilisation
Correction examen c++ [RÉSOLU]Vidéo et HTML
Javascript Selector / colonne d'un tableauHTML/CSS Probleme de format Besoin d'aide !!!
[Résolu] Problème Index.html quand hébergéajout de plusieurs images en HTML/CSS
Extraction VBA de données depuis pages HTML 
Plus de sujets relatifs à : Javascript & Html demande de correction


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR