Apprenez à programmer avec JavaScript

Notre projet avance ! Nous pouvons maintenant proposer plusieurs mots ou phrases à l’utilisateur, compter son score et l’afficher. 🚀

Pour l’instant notre code est encore relativement petit, mais il va grandir au fur et à mesure du développement. Il est donc très important de l’organiser pour qu’il reste lisible et fonctionnel. C’est d’autant plus important que, en tant que développeur, vous devrez fréquemment dupliquer du code. Voyons ensemble comment éviter cette répétition et réaliser cela efficacement, grâce aux fonctions ! 😃

Découvrez les fonctions

En fait, vous utilisez déjà des fonctions depuis le début de ce cours, sans même le savoir ! Par exemple, quand vous écrivez :

motUtilisateur = prompt('Entrez un mot')

Prompt est une fonction : 

• elle prend en paramètre le message à afficher (ici, “Entrez un mot”) ;

• elle retourne un résultat : le mot tapé par l’utilisateur. 

Dans l’exemple ci-dessus, le retour de la fonction prompt est copié dans motUtilisateur. 

Rédigez une fonction en JavaScript

Dans le cadre de notre application, nous souhaitons écrire une fonction qui va générer une phrase pour donner le score final à l'utilisateur. Cette fonction prendra donc en paramètre deux informations : 

• le score ;

• le nombre de questions.

Elle retournera une phrase contenant ces informations.

Cela donne donc :

function retournerMessageScore(score, nombreQuestions) {
    let message = 'Votre score est de ' + score + ' sur ' + nombreQuestions
    return message
}

Revenons en détail sur ce morceau de code :

• le mot-clé function (“fonction”, en anglais) est suivi du nom “retournerMessageScore”. Ce mot est ici obligatoire pour définir la fonction, mais il n’est ensuite plus nécessaire lorsqu’on l’utilise ;

• par conséquent, la fonction “retournerMessageScore” est créée ;

• entre parenthèses sont indiqués les paramètres envoyés à cette fonction : “score” et “nombreQuestions” ;

• entre accolades est indiqué le bloc de code qui sera exécuté quand la fonction sera appelée (let message… et return) ;

• dans ce bloc de code, nous déclarons une variable message dans laquelle nous créons notre message ;

• le code est finalisé avec le nouveau mot-clé return. Ce mot signifie que la fonction va retourner le contenu de message.  

Par exemple :

let nouveauMessage = retournerMessageScore(5, 10)
console.log(nouveauMessage)

Je vous propose de revoir cette opération dans la vidéo ci-dessous :

Codez proprement

Vous vous rendrez compte très rapidement que les fonctions sont un élément majeur de votre code. Il est donc très important de respecter quelques bonnes pratiques pour prévenir tout problème. Voici quelques conseils.

Définissez une tâche spécifique pour chaque fonction

Dans l’idéal, on attribue une seule tâche à une fonction : afficher, calculer, lancer une opération, initialiser… Si une fonction s’occupe de tout gérer à la fois, elle comportera beaucoup de lignes, difficiles à comprendre, à modifier et à tester.

Écrivez des fonctions courtes

Dans l'idéal, vos fonctions ne doivent pas dépasser 30 lignes. Si le but de la fonction est clair, un code court est généralement suffisant pour l’atteindre.

Nommez clairement vos fonctions

Comme pour les variables, le nom d’une fonction devrait être suffisamment clair pour permettre d’en deviner le contenu sans lire le code qu’elle contient.

Nommez clairement vos paramètres

Les paramètres doivent également être le plus explicites possible :

lancerJeu(a) {
    // code
}

Que dois-je envoyer à ma fonction pour remplir le paramètre a ? Est-ce qu’il représente le nom du joueur ? La liste des mots qu’il doit taper ? Autre chose ? 

Ici, est donc préférable d’écrire :

lancerJeu(listeMots) {
    // code
}

Rien qu’avec le nom, nous savons maintenant que le paramètre contient en réalité un tableau avec une liste de mots. N’oubliez pas non plus qu’en cas d'ambiguïté, vous pouvez toujours insérer un commentaire pour ajouter une précision !

Organisez votre code en plusieurs fichiers

Découper votre code en plusieurs fonctions permet de mieux organiser vos idées et facilite les modifications, mais ce n’est pas suffisant…

Souvenez-vous, quand nous avons créé notre fichier index.HTML dans le chapitre "Appréhendez la logique de programmation", nous avons écrit :

<script src="script.js"></script>

… afin d’inclure notre fichier script.

Imaginez maintenant que nous voulions créer un fichier de configuration qui contiendrait nos deux tableaux listeMots et listePhrases. Cela nous permettrait de faire évoluer ces tableaux sans risquer de modifier par erreur la logique du code ! 😃

Pour y parvenir, nous pouvons inclure ce nouveau fichier en insérant une nouvelle ligne dans le fichier HTML pour préciser le chemin du nouveau fichier :

<script src="config.js"></script>
<script src="script.js"></script>

Ensuite, nous devons définir le contenu du fichier. Pour cela, nous allons supprimer les deux const listeMots et listesPhrases de script.js, et les copier  dans config.js.

// Liste des mots utilisés pour le jeu
const listeMots = ['Bonjour', 'Salut', 'Coucou']
const listePhrases = ['Bonjour, comment allez-vous ?', 'Salut, ça va ?', 'Coucou, ça va ?']

Je vous propose de revoir ces opérations dans la vidéo ci-dessous :

Maîtrisez la portée des variables

Nous avons commencé à apprendre le JavaScript en déclarant des variables. Maintenant que vous manipulez des fonctions et des blocs de code, vous devez maîtriser une notion importante : la portée des variables. Pas de panique, je vous explique ! 😉

Bien sûr ! Prenons l’exemple ci-dessous :

let monNombre = 1
// monNombre est une variable globale, car elle est déclarée en dehors d’un bloc de code

function afficheUnNombre() {
    let monNombreLocal = 2
   // monNombreLocal est une variable locale, car déclarée uniquement au sein d’une fonction
    console.log("Intérieur de la fonction : ")
    console.log(monNombre) // monNombre est accessible
    console.log(monNombreLocal) // monNombreLocal est accessible
}

afficheUnNombre()
console.log("Extérieur de la fonction : ")
console.log(monNombre) // monNombre est accessible
console.log(monNombreLocal) // monNombreLocal n’est pas accesssible

Si vous copiez-collez ce code dans votre éditeur de code, vous constaterez plusieurs choses :

• les chiffres 1 et 2 apparaissent en premier : ils sont affichés dans la fonction afficheUnNombre ;

• le dernier console.log renvoie une erreur, due au fait que la variable monNombreLocal est définie au sein du bloc de code de la fonction afficheUnNombre.

Comme il s’agit d’une variable locale, elle n’est pas accessible dans l’ensemble du code. Elle est donc inconnue lorsqu’on tente de l’afficher hors de la fonction qui la déclare.

À vous de jouer !

Étape 1 : découpez votre code en fonctions

Notre but est maintenant d’améliorer l’organisation et la lisibilité de notre code. Je vous propose donc de créer les fonctions suivantes : 

• afficherResultat : cette fonction prend en paramètre le résultat et le nombre total de mots proposés, et affiche le résultat du joueur ; 

• choisirPhrasesOuMots : cette fonction demande à l’utilisateur s’il veut jouer avec des phrases ou des mots. 

• lancerBoucleDeJeu : cette fonction contient la boucle principale de jeu, c'est-à-dire la boucle for qui propose les mots/phrases au joueur, et lui demande de taper ces mots. Elle prend en paramètre le tableau de mots/phrases qui sera proposé au joueur, et retourne le nombre de mots/phrases correctement tapés ;

• lancerJeu : cette fonction sera la fonction principale, c’est elle qui s’occupe de lancer toutes les autres. En d’autres termes, c’est elle qui va appeler les fonctions que vous venez d’écrire. 

Vous pouvez vérifier votre travail en consultant la vidéo ci-dessous :

Étape 2 : séparez votre code en plusieurs fichiers

• Séparez votre code en plusieurs fichiers.

• Créez un fichier config.js qui contiendra uniquement les deux listes de propositions.

• Créez un fichier main.js qui contiendra uniquement l’appel à la fonction principale lancerJeu.

• Vérifiez que tout fonctionne encore.

• Créez un nouveau répertoire appelé “scripts”, et placez-y tous vos fichiers.

• Vérifiez à nouveau votre code. 😃

Vous pouvez vérifier votre travail en consultant la vidéo ci-dessous :

Corrigé

Vous pouvez vérifier votre travail en consultant le corrigé.

En résumé

• Une fonction est un morceau de code qui accomplit une tâche spécifique. L’utilisation de fonctions permet d’organiser son code en blocs fonctionnels.

• Pour créer une fonction en JavaScript, on utilise le mot-clé function et on lui attribue un nom.

• On peut appeler une fonction en utilisant son nom, suivi de parenthèses  ()  . Si la fonction comporte des paramètres, ceux-ci sont ajoutés entre les parenthèses. 

• Vous pouvez définir une valeur de retour que la fonction renvoie après son exécution. Cette valeur retournée par la fonction pourra alors être utilisée dans la suite du code. 

• Séparer son code en plusieurs fonctions et en plusieurs fichiers vous permet de mieux découper votre code, et donc de le rendre plus simple à comprendre.  

• Une variable déclarée dans un bloc de code n’est accessible que dans ce bloc de code.

Et voilà, vous avez écrit votre premier fichier JavaScript, tout en découvrant des bonnes pratiques de code indispensables pour faire de vous un développeur JavaScript professionnel ! 🥳 Vous pouvez être fier de vous et vous préparer à la prochaine étape : faire interagir JavaScript avec votre page web ! Mais avant, je vous propose de tester ce que vous avez appris, grâce au quiz.