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 :

Débutante - Conseils


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Femme Profil pro
    prof d'histoire ?!?
    Inscrit en
    Février 2015
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 30
    Localisation : France, Finistère (Bretagne)

    Informations professionnelles :
    Activité : prof d'histoire ?!?

    Informations forums :
    Inscription : Février 2015
    Messages : 22
    Points : 19
    Points
    19
    Par défaut Débutante - Conseils
    Bonjour à tous,

    je me lance doucement en Javascript. Pour ceci, j'ai codé un petit jeu d'anagramme. J'aimerais si quelqu'un avait le temps des critiques et conseils pour éviter de futures erreurs.

    voici mon jeu (en mode console) :

    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
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
     
    <!DOCTYPE html>
    <html>
    <head lang="fr">
        <meta charset="UTF-8">
        <title>Jeu Anagramme</title>
     
            <script type="application/javascript">
     
            function anagramme() {
     
                var tabMot, motChoisi, tabAleatoire, tabChoixUtilsateur;
     
                tabMot = [
                    ["champignon", "cham", "pi", "gnon"],
                    ["parapluie", "pa", "ra", "pluie"],
                    ["telephone", "te", "le", "pho", "ne"]
                ];
     
                motChoisi = Math.floor((Math.random() * tabMot.length));
                tabAleatoire = new Array();
                tabChoixUtilsateur = new Array();
     
     
                //creation et melange du tableau avec le mot choisi
                function melangeMot (){
     
                    console.log("mot choisi : " + tabMot[motChoisi][0]);
     
                    for (i = 1; i < tabMot[motChoisi].length; i++){
     
                        tabAleatoire.push(tabMot[motChoisi][i]);
     
                    }   
                    console.log(tabAleatoire);
     
                    // Creation de l'anagramme, mélange du tableau
     
                    for(var position=tabAleatoire.length-1; position>=1; position--){
     
                    //hasard reçoit un nombre entier aléatoire entre 0 et position
                    var hasard=Math.floor(Math.random()*(position+1));
     
                    //Echange
                    var sauve=tabAleatoire[position];
                    tabAleatoire[position]=tabAleatoire[hasard];
                    tabAleatoire[hasard]=sauve;
                    } 
                    for(var i = 0; i < tabAleatoire.length; i++){
                                    console.log(tabAleatoire[i] + " " + (i + 1) );
                                } 
                };
     
     
                melangeMot();
     
             	//Input de l'utilisateur 
                function utilisateur(){
     
             		for(var i = 0, length1 = tabAleatoire.length; i < length1; i++){
             			var reponse = prompt("syllabe " + (i + 1) + " : ");
                        console.log(reponse);
                        var tmp = tabAleatoire[reponse - 1];
             			tabChoixUtilsateur.push(tmp);
     
             		}
             		console.log("choix utilisateur : " + tabChoixUtilsateur);
             	}
             	utilisateur();
     
     
                function compareTab()
                    {
                        if (tabChoixUtilsateur.length != tabMot[motChoisi].length - 1) {
                            console.log('longueur différente');
                        } else {
                            for (var i = 0; i < tabChoixUtilsateur.length; ++i) {
                                if (tabChoixUtilsateur[i] != tabMot[motChoisi][i + 1]) {
                                    // Affichage des erreurs ...
                                    console.log("bonne syllabe : " + tabMot[motChoisi][i + 1]);
                                    console.log("syllabe choisi : " + tabChoixUtilsateur[i]);
                                    console.log('Attention !!!');
                                } else {
                                    console.log('C\'est parfait !!!');
                                }
                            } 
                        } 
                    }
                compareTab();
            };
            anagramme();
     
        </script>
     
    </head>
     
    <body>
     
     
     
    </body>
    </html>
    les moindres réflexions me seront utiles, merci d'avance.
    bises à tous

  2. #2
    Rédacteur/Modérateur

    Avatar de yahiko
    Homme Profil pro
    Développeur
    Inscrit en
    Juillet 2013
    Messages
    1 424
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur

    Informations forums :
    Inscription : Juillet 2013
    Messages : 1 424
    Points : 8 713
    Points
    8 713
    Billets dans le blog
    43
    Par défaut
    J'ai vu pire.
    Si ça fonctionne, c'est déjà bien.

    Maintenant pour chipoter :
    * J'aurais tendance à dire que tu "sur-indentes". Essaie de te tenir à un style d'indentation et de bloc.
    * Il serait préférable de mettre ton code à la fin du body plutôt que dans l'entête, (ça t'évitera certains comportements bizarres), voir mieux, mettre ton code dans un fichier à part.
    * Il faudrait que tu affiches les résultats sur la page HTML, la sortie console est plutôt réservée pour le debuggage.

  3. #3
    Membre à l'essai
    Femme Profil pro
    prof d'histoire ?!?
    Inscrit en
    Février 2015
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 30
    Localisation : France, Finistère (Bretagne)

    Informations professionnelles :
    Activité : prof d'histoire ?!?

    Informations forums :
    Inscription : Février 2015
    Messages : 22
    Points : 19
    Points
    19
    Par défaut
    merci Yahico,

    pour le jeu, j'aimerais évidemment le "porté" dans la page html. mais j'ai lu qu'il était impossible de rendre le texte cliquable en javascript(Canvas). je regarde d'ailleurs le framework phaser (je suis graphiste et le jeu pourrait être joli).

    pour la sur-indentation, c'était pour le rendre lisible à tous, mais je ne le ferai plus, promis.

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

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 651
    Points : 11 145
    Points
    11 145
    Par défaut
    bonjour,

    quelques points me chagrinent dans ce code :
    - les fonctions melangeMot(), utilisateur(), compareTab() qui sont définies dans la fonction anagrammes(). Tu peux les sortir sans problème.
    - l'appel de la fonction anagramme avant le chargement complet de la page : certes elle est vide mais il est bon d'attendre le chargement du code HTML avant l'exécution des scripts.
    - pour l'indentation, je mets ça sur le compte de l'éditeur de texte du forum qui a un peu de mal à gérer les tabulations.

    bons points :
    - la déclaration des variables ;
    - script dans l'entête de la page (et non dans le code comme on peut le voir parfois ).



    Personnellement, je ne suis pas fan des déclarations de variables au milieu du code ou dans les boucles. Mais bon, c'est permis.
    Pour les accolades ouvrantes, là aussi, personnellement, je préfère les mettre à la ligne pour avoir une vision du bloc plus précise (c'est un débat récurrent ). Mais si tu es plus à l'aise en mettant les accolades ouvrantes sur la même ligne que l'instruction laisse les.

  5. #5
    Membre à l'essai
    Femme Profil pro
    prof d'histoire ?!?
    Inscrit en
    Février 2015
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 30
    Localisation : France, Finistère (Bretagne)

    Informations professionnelles :
    Activité : prof d'histoire ?!?

    Informations forums :
    Inscription : Février 2015
    Messages : 22
    Points : 19
    Points
    19
    Par défaut
    Citation Envoyé par Auteur Voir le message
    bonjour,

    quelques points me chagrinent dans ce code :
    - les fonctions melangeMot(), utilisateur(), compareTab() qui sont définies dans la fonction anagrammes(). Tu peux les sortir sans problème.
    )
    Les sortir ??? je les placent où . A la Fin ? juste avant la dernière accolade (avant anagrame(); ).

    merci pour tes critiques constructive.

  6. #6
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 651
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 651
    Points : 11 145
    Points
    11 145
    Par défaut
    Place les juste avant la fonction anagramme.

    Mais après avoir réexaminé ton code, ça ne sera pas possible : tes fonctions utilisent des variables (par exemple tabMot) déclarées dans anagramme(). Si tu sors ces fonctions tu seras obligée soit de déclarer tes variables comme des variables globales, soit de passer les variables déclarées dans anagramme() en tant que paramètres à ces fonctions (je ne sais pas si j'ai été très clair ).

  7. #7
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Hello,

    C'est pas mal du tout pour une débutante

    N'hésite pas à séparer le JavaScript du HTML : <script src="anagramme.js"></script>. C'est bien plus pratique à l'usage.

    Tu peux laisser tes fonctions à l'intérieur de la fonction anagramme, ce n'est pas génant. En fait ça te sert même de fermeture, ce qui limite le nombre de variables globales déclarées (ici la seule globale est anagramme). Donc contrairement à Auteur je verrais ça plutôt comme un bon point Toutefois il est plus courant de recourir à un namespace (qui est un bête objet JavaScript) pour stocker toutes les variables d'une application. Voilà un exemple, j'ai l'habitude de nommer ce namespace "app" mais on peut lui donner le nom qu'on veut : http://syllab.fr/projets/experiments...sjs/js/main.js

Discussions similaires

  1. [Débutant] Conseils pour débuter
    Par stip dans le forum Débuter avec Java
    Réponses: 8
    Dernier message: 04/07/2005, 17h01
  2. [débutant] Conseil sur l'achat d'un Portable ..???
    Par blackhorus dans le forum Ordinateurs
    Réponses: 13
    Dernier message: 15/04/2005, 17h09
  3. [Débutant] Conseil
    Par Machjaghjolu dans le forum Débuter
    Réponses: 4
    Dernier message: 21/02/2005, 18h19
  4. Réponses: 4
    Dernier message: 22/09/2004, 09h17
  5. [débutant] conseils sur contraintes et alter table
    Par maysa dans le forum MS SQL Server
    Réponses: 10
    Dernier message: 26/05/2004, 09h03

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