IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Programmation javascript


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Janvier 2011
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Janvier 2011
    Messages : 5
    Par défaut Programmation javascript
    bonjour a tous

    J'ai donc envoyer avec mon message la page html donc j'ai des problemes.
    Voila je sais ici qu il y a des gens forts en javascript.

    Le code qui se trouve dans la page html, c 'est de lancer des dés aleatoirement, bon je dois finalement remplacer les boutons dés par des images qu j'ai mais je n'arrive pas a les remplacer.

    Il faut que quand les des ont fini de tourner, qu il affiche aussi en texte son nombre.

    Ensuite je ne sais pas programmée le résultats de ces deux dés qui tournent aleatoirement, il faut que le r'sultat s aafiche une fois les des tournés.



    Voici le code

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    <html>
     
    	<head>
    		<title>Lancer de dés</title>
     
    			<script language="javascript">
    			var nombre;
    			var tabphotos = new Array("image1.jpg","image2.jpg", "image3.jpg","image4.jpg","image5.jpg","image6.jpg");
    			nombre = Math.floor(Math.random() * tabphotos.length);
    			function ini() {
    			doc.de1.value=parseInt(Math.random()*6+1);
    			doc.de2.value=parseInt(Math.random()*6+1);
    			}
    			function restart() {
    			doc.de1.value=0;
    			doc.de2.value=0;
    			}
     
    			</script>
    			<body>
    			<form name="doc">
    			<input type="button" value="Lancer" onclick="ini()"><br />
    			<input type="button" name="de1" value="" />
    			<input type="button" name="de2" value="" /><br />
    			<input type="button" value="Reset" onclick="restart()" />
    			</form>
    			</body>
     
    			</html>
    Je suis novice et j'aimerais de l'aide....
    Ce serait vraiment gentil.
    N'hésitez pas a me repondre et je vous remercie d'avance.
    Images attachées Images attachées     
    Fichiers attachés Fichiers attachés

  2. #2
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Entre autres, il y a 3 erreurs ici :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    doc.de1.value=parseInt(Math.random()*6+1);
    1) l'accès à ton input ne fonctionnera pas (à moins que tu aies fait une référence sur "document" appelée "doc" ^^). Essaie plutot de leur mettre un id et d'accèder par getElementById :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="button" name="de1" id="de1" value="" />
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    var de1 = document.getElementById("de1");
    2) parseInt prend un second paramètre (radix) pour la base de conversion. Comme tout le monde 99% du temps, c'est de la base 10 qu'il te faut. Il est considéré comme une bonne pratique de l'ajouter, pour éviter la conversion implicite en octal dans le cas d'une chaine paramètre commençant par "0".
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("de1").value=parseInt((Math.random()*6+1), 10);
    3) Tu voulais simuler des dés à 7 faces ou c'est mes yeux ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var de1a6 = Math.round((Math.random() * 6) + 0.5)
    ... ça devrait aller mieux

    Mais il y a d'autres problèmes, la liste n'est pas finie... ^^ (le fait que le script soit placé dans le head et s'exécute tout de suite donc les éléments qu'on essaie d'obtenir n'existent pas encore dans le DOM, la variable "nombre" est inutilisée, l'attribut de la balise script est obsolète, etc.)

  3. #3
    Membre chevronné Avatar de nounetmasque
    Inscrit en
    Janvier 2003
    Messages
    494
    Détails du profil
    Informations forums :
    Inscription : Janvier 2003
    Messages : 494
    Par défaut
    En plus des remarques précédentes, pour afficher les images des dés tu dois utiliser la méthode innerHTML en fonction des valeurs définies.

    Voici le code HTML mise à jour :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <body>
    		<form name="doc">
    			<input type="button" value="Lancer" onclick="ini()"><br />
    			<div id="img_de1"></div>
    			<input type="button" id="de1" value="" />
    			<div id="img_de2"></div>
    			<input type="button" id="de2" value="" /><br />
    			<input type="button" value="Reset" onclick="restart()" />
    		</form>
    	</body>
    Ainsi que le code JS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    function ini() {
    	var val1 = parseInt((Math.random()*6+0.5), 10);
    	var img1 = document.getElementById('img_de1');
    	var de1 = document.getElementById('de1');
     
    	if(img1 != null && de1 != null){
    		img1.innerHTML = '<img src="./image' + val1 + '.jpg" />';
    		de1.value = val1;
    	}
    }

  4. #4
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    Citation Envoyé par nounetmasque Voir le message
    En plus des remarques précédentes, pour afficher les images des dés tu dois utiliser la méthode innerHTML en fonction des valeurs définies.
    ouh là

    Insère directement une balise img avec un src pointant vers une image transparente ou de la couleur du fond avant de lancer les dés.
    Lorsque la fonction ini() est exécutée on change uniquement le src de la balise.

  5. #5
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Janvier 2011
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Janvier 2011
    Messages : 5
    Par défaut Continuité code aide des dés
    Bonjour à tous

    je suis vraiment nul, bon je vous remercie tous de m'aider car je vais pouvoir comprendre les fonctions, et progresser. Il y a pas longtemps que je pratique le javascript.

    J'ai essayer vos propositions et je n'arrive pas a inserer mes images et mon code est pas correct.

    je suis vraiment un vrai novice.....

    Si vous pouviez me dire ce qui va pas...

    En plus comment on créer pour afficher le résultat des deux des ....

    En attente...




    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    <html>
     
    	<head>
    		<title>Lancer de dés</title>
     
    			<script language="javascript">
    			function ini() {
    			var val1 = parseInt((Math.random()*6+0.5), 10);
    			var img1 = document.getElementById('image1.jpg","image2.jpg", "image3.jpg","image4.jpg","image5.jpg","image6.jpg');
    			var de1 = document.getElementById('de1');
    			var de2 = document.getElementById('de2');
     
    			if(img1 != null && de1 != null){
    			img1.innerHTML = '<img src="./image1' + val1 + 'image1.jpg" />';
    			de1.value = val1;
    			}
    			if(img1 != null && de2 != null){
    			img1.innerHTML = '<img src="./image1' + val1 + 'image1.jpg" />';
    			de2.value = val1;
    			}
     
    			}
     
    			function ini() {
    			document.getElementById("de1").value=parseInt((Math.random()*6+1), 10);
    			document.getElementById("de2").value=parseInt((Math.random()*6+1), 10);
    			}
    			function restart() {
    			doc.de1.value=0;
    			doc.de2.value=0;
    			}
     
    			</script>
    			<body>
    			<form name="doc">
    			<input type="button" value="Lancer" onclick="ini()"><br />
    			<input img src="des/image1.jpg" name="de1" id="de1" value="" />
    			<input img src="des/image2.jpg" name="de2" value="" /><br />
    			<input type="button" value="Reset" onclick="restart()" />
    			</form>
    			</body>
     
    			</html>

  6. #6
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Citation Envoyé par picto8679 Voir le message
    je suis vraiment nul, bon je vous remercie tous de m'aider car je vais pouvoir comprendre les fonctions, et progresser. Il y a pas longtemps que je pratique le javascript.

    J'ai essayer vos propositions et je n'arrive pas a inserer mes images et mon code est pas correct.

    je suis vraiment un vrai novice.....

    Si vous pouviez me dire ce qui va pas...
    Bah non il ne faut pas être si négatif
    Ne t'inquiète pas, ton code n'a rien de déshonorant, il ne fonctionne pas encore, c'est différent

    Sache aussi que tu as à ta disposition les tutoriels et la FAQ, à ne pas négliger ^^

    Bon alors une autre chose qui, elle non plus, n'est pas grave regarde cette petite ligne en dessous de ton message de départ :
    Dernière modification par danielhagnoul ; Hier à 01h23. Motif: Merci d'utiliser la balise [code] (bouton #) de l'editeur.
    Quand tu nous montres un extrait de code dans un message, sélectionne-le et clique sur "#" au-dessus de la boite de texte, c'est beaucoup plus lisible pour tout le monde sans qu'un modérateur soit obligé de le corriger à la main en passant.
    Citation Envoyé par picto8679 Voir le message
    Contactez moi par mp si vous souhaitez
    A priori c'est mieux pour tout le monde que les échanges se fassent sur le forum : c'est le principe fondateur qui permet de constituer, au fur et à mesure des discussions et des résolutions de problèmes, une énorme base de connaissances ^^ Si on t'aide à résoudre ton problème par MP, le prochain qui aura le même problème que toi va reposer les mêmes questions et retraverser les mêmes étapes de questionnement, essai, erreur, etc. Alors que si il fait une recherche sur les forums avant de poster*, quel gain de temps pour tout le monde !

    Allez, remets-nous en forme le dernier extrait posté et on va s'en sortir

    * ce qui donc, fait de lui un être d'exception

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    une pluie de petit détail pèche...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var img1 = document.getElementById('image1.jpg","image2.jpg", "image3.jpg","image4.jpg","image5.jpg","image6.jpg');
    la méthode getElementById n'attend qu'un argument, une string, qui représente l'ID d'un élément du document, pas une chaîne qui ne veux pas dire grand chose...
    de plus cette méthode cherche un élément qui a une ID, sauf IE qui trouve si un NAME existe, donc
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var de2 = document.getElementById('de2');
    te retournera rien attendu que sur cette ligne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input img src="des/image2.jpg" name="de2" value="" /><br />
    il n'y a pas d'ID.

    de plus il te faut 2 réceptacles pour tes images, ou sont-ils puisque voir début de ce message...

    voila pour un début et profites pour éditer et mettre les balises code

  8. #8
    Membre Expert Avatar de Willpower
    Homme Profil pro
    sans emploi
    Inscrit en
    Décembre 2010
    Messages
    1 009
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : sans emploi

    Informations forums :
    Inscription : Décembre 2010
    Messages : 1 009
    Par défaut
    En fait, je pense que ton problème vient du fait que ton 2 et ton 3 ne ressemblent pas à ceux d'un vrai dé.

  9. #9
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Janvier 2011
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Janvier 2011
    Messages : 5
    Par défaut EN code
    Oui merci pour les conseils, par contre je comprends pas mon code doit avoir des defaults puisque il ne marche pas sur internet eplorer et en plus il n'affiche pas les résultats.....
    Je seche si vous avez la reponse....


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    <html> 
     
    <head> 
    <title>Lancer de dés</title> 
     
    <script language="javascript"> 
    function ini() { 
    var val1 = parseInt((Math.random()*6+0.5), 10); 
    var val2 = parseInt((Math.random()*6+0.5), 10); 
    var img1 = document.getElementById('img_de1'); 
    var img2 = document.getElementById('img_de2'); 
    var somme = 0 ; 
    somme = val1 + val2 ; 
     
    if(img1 != null && de1 != null){ 
    img1.innerHTML = '<img src="./image' + val1 + '.jpg" />'; 
    de1.value = val1; 
    } 
    if(img2 != null && de2 != null){ 
    img2.innerHTML = '<img src="./image' + val2 + '.jpg" />'; 
    de2.value = val2; 
    } 
    } 
     
     
    </script> 
    <body> 
    <form name="doc"> 
    <input type="button" value="Lancer les dés" onclick="ini()"><br /> 
    <div id="img_de1"></div> 
    <input img src="des/images1.jpg" Id="de1" value="" /> 
    <div id="img_de2"></div> 
    <input img src="des/images2.jpg" Id="de2" value="" /><br /> 
    <input type="text" value="Le résultat est" id="somme"><br /> 
    </form> 
    </body> 
     
    </html>
    Merci d'avance

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    il ne marche pas sur internet eplorer
    sur les autres navigateurs non plus je présumes

    Toujours des petits détails, avec le s cette fois.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    function ini() {
      var val1 = parseInt((Math.random() * 6 + 0.5), 10);
      var val2 = parseInt((Math.random() * 6 + 0.5), 10);
      var img1 = document.getElementById('img_de1');
      var img2 = document.getElementById('img_de2');
      //------------------------------
      // NE PAS OUBLIER de les definir
      //------------------------------
      var de1 = document.getElementById('de1');
      var de2 = document.getElementById('de2');
      var oSomme = document.getElementById('somme');
     
      var somme = 0;
      somme = val1 + val2;
     
      if (img1 != null && de1 != null) {
        img1.innerHTML = '<img src="./image' + val1 + '.jpg" />';
        de1.value = val1;
      }
      if (img2 != null && de2 != null) {
        img2.innerHTML = '<img src="./image' + val2 + '.jpg" />';
        de2.value = val2;
      }
      //-------------------
      // METTRE le resultat
      //-------------------
      oSomme.value = somme;
    }
    Citation Envoyé par Auteur
    Insère directement une balise img avec un src pointant vers une image transparente ou de la couleur du fond avant de lancer les dés.
    Lorsque la fonction ini() est exécutée on change uniquement le src de la balise.
    pourquoi ne pas prendre en compte, cela serait bien plus élégant

    Il te restera à régler les valeurs de ton tirage...

  11. #11
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut répartition aléatoire erronée
    Pour obtenir le résultat du dé, tu fais actuellement :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    var val1 = parseInt((Math.random()*6+0.5), 10);
    .. cependant il me semble peu probable que ton dé ait une face "0"

    Tu as repris mon conseil en ne gardant qu'une partie, ça ne peut pas aller
    Fais plutôt :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    var val1 = parseInt((Math.round(Math.random()*6+0.5)), 10);
    Comme ça non seulement tu es sûr de n'obtenir que des entiers entre 1 et 6, mais avec une répartition aléatoire équilibrée. ^^

    Pour éviter de tout réécrire, et aussi pour simplifier la lecture, quand ce genre de besoin devient plus fréquent sur une page, ça ne fait pas de mal d'en faire une petite fonction du style :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    // FONCTION : simulation de jet de dé
    // PARAM #1 : "max" (number) : nombre de "faces"
    // RETOUR : entier aléatoire entre 1 et "max"
    function de(max) {
       if (max < 1) { return 0; }
       return Math.round((Math.random() * max) + .5);
    }

  12. #12
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut mea culpa
    Citation Envoyé par RomainVALERI Voir le message
    2) parseInt prend un second paramètre (radix) pour la base de conversion. Comme tout le monde 99% du temps, c'est de la base 10 qu'il te faut. Il est considéré comme une bonne pratique de l'ajouter, pour éviter la conversion implicite en octal dans le cas d'une chaine paramètre commençant par "0".
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("de1").value=parseInt((Math.random()*6+1), 10);
    Bon ben ...

    Cette remarque, juste par ailleurs, est très inutile ici, désolé
    Dans ce cas de figure, le problème n'est pas là : parseInt attend une chaine en paramètre... comme tu lui passes un nombre à la place, il va commencer par le convertir en chaine... puis parser les caractères un par un et il ne pourra pas tomber dans le cas de figure que je décris.
    Mais bon, utiliser parseInt ici me semble inapproprié. Math.floor à la limite... ^^

Discussions similaires

  1. executer un petit programme javascript
    Par CG-CONCEPT-STUDIO dans le forum Développement Web en Java
    Réponses: 1
    Dernier message: 20/04/2011, 14h36
  2. recuperation d'un tableau de string dans un programme javascript
    Par freestyler1982 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 05/06/2008, 13h16
  3. programmation javascript !
    Par tom818 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 18/03/2008, 18h23
  4. aide programmation javascript
    Par tom818 dans le forum Général JavaScript
    Réponses: 16
    Dernier message: 18/03/2008, 15h37
  5. aide programmation javascript.
    Par tom818 dans le forum Général JavaScript
    Réponses: 19
    Dernier message: 29/02/2008, 15h38

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo