Vous avez découvert le langage JavaScript, et vous connaissez désormais sa syntaxe. Prochaine étape ? Comprendre la logique de programmation de JavaScript ! Pour cela, je vous propose de réaliser un petit projet. 🚀
Découvrez votre mission
Votre but est de coder une application en ligne nommée “AzerType”. L’objectif de cette application est d’apprendre à taper plus vite au clavier, en tapant le plus rapidement possible et dans un temps imparti des mots proposés par l’application.
Nous allons réaliser l’intégralité de ce projet ensemble. Voici une capture d’écran pour vous montrer un aperçu du projet finalisé :
Mais commençons par le début : écrire notre premier fichier JavaScript !
Dans cette deuxième partie du cours, vous allez rédiger un programme informatique qui répond à une logique de programmation : votre navigateur est capable de comprendre et d’interpréter ce programme.
Avant de rentrer dans les lignes de code, arrêtons-nous sur quelques notions clés pour mieux appréhender le concept de logique de programmation.
Appréhendez la notion d’algorithme
En tant que développeur, vous rédigez du code dans le but de développer un programme informatique. Vous allez donc écrire, en JavaScript, un ensemble d’instructions et d’opérations qui seront exécutées par un ordinateur dans un but précis. Dans notre cas, nous souhaitons coder un algorithme capable de :
proposer des mots à un utilisateur ;
vérifier que les mots entrés par l’utilisateur sont corrects.
Un algorithme ? Mais qu’est-ce que c’est ?
Dans notre cas, l’application AzerType va proposer des mots, et l’utilisateur devra taper ces mots correctement avec son clavier. Notre problème est donc le suivant : comment faire comprendre cela à l’ordinateur ?
L’idéal serait de lui fournir une liste d’étapes pour lui expliquer, pas à pas, chaque instruction qu’il doit exécuter. Eh bien un algorithme, c’est exactement ça !
Notre algorithme pourrait donc ressembler à cette suite d’étapes :
Étape 1 : L’application propose un mot.
Étape 2 : L’utilisateur tape ce mot au clavier.
Étape 3 : Si le mot de l’utilisateur est exactement le même que le mot de l’application, alors on ajoute un point au score.
Étape 4 : On passe au mot suivant.
Étape 5 : On recommence à l’étape 1, jusqu’à ce que le temps soit écoulé.
Organisez votre code grâce aux blocs de code
Dans les chapitres précédents, nous avons écrit des lignes de code les unes à la suite des autres. Maintenant que nous suivons une logique de programmation, cette logique doit transparaître dans l’organisation de votre code. C’est là qu’interviennent les blocs de code.
Voici un exemple de bloc de code :
{
const monChiffre = 4
console.log(monChiffre)
}Ici, j’ai utilisé un bloc de code pour déclarer la variable monChiffre.
Mais…. Il est un peu seul, ton bloc de code, non ?
Pour le moment, oui. 😃 Mais dans un programme informatique, les blocs de code sont associés à des structures conditionnelles et à des fonctions. Je ne rentre pas plus dans les détails pour l’instant, car vous allez justement le découvrir dans cette partie en construisant votre premier fichier JavaScript.
Installez votre environnement de travail
Utilisez un éditeur de code
Jusqu’ici, nous avons utilisé l’éditeur de code en ligne CodePen. Mais pour démarrer notre nouvelle mission, nous aurons besoin d’un éditeur plus avancé. Vous l’avez compris : on passe aux choses sérieuses !
Si vous le souhaitez, vous pouvez choisir d’autres IDE similaires, comme IntelliJ ou Atom. Vous avez fait votre choix ? Alors découvrons ensemble les fichiers sur lesquels vous allez travailler.
Une fois votre éditeur lancé, votre première étape consiste à créer un dossier qui contiendra tous les fichiers nécessaires à votre projet.
Créez vos premiers fichiers
Pour exécuter du code JavaScript, vous aurez besoin de créer au minimum deux fichiers :
un fichier .html : votre page web ;
un fichier .js : qui contiendra votre code JavaScript.
Commençons par créer un fichier index.html.
Voici un exemple de son contenu initial, en fonction de l’IDE que vous utilisez :
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="script.js"></script>
</head>
<body>
</body>
</html>Attardons-nous sur cette ligne :
<script src="script.js"></script>Dans un deuxième temps, nous allons donc créer ce fichier script.js.
Pour tester que tout fonctionne, je vous propose le traditionnel “Hello World”. Écrivons ceci dans notre .js :
console.log("Hello World");Affichez la console de votre navigateur
Maintenant que notre code est écrit, il ne reste plus qu’à le tester. Pour cela, vous devez ouvrir votre fichier index.HTML dans votre navigateur.
Dans la console, vous verrez notre “Hello World”, qui correspond à l’instruction écrite dans le fichier script.js.
Récapitulons en vidéo
Retrouvez les démonstrations de ce chapitre dans la vidéo ci-dessous :
En résumé
Un fichier JavaScript répond à une logique de programmation qui a pour but de résoudre un problème donné.
Pour construire cette logique de programmation, vous devrez :
concevoir un algorithme qui définit les étapes permettant de résoudre un problème donné ;
transposer cet algorithme en code organisé avec des structures conditionnelles et/ou des fonctions intégrant des blocs de code.
Pour coder, vous devez utiliser un éditeur de code comme Visual Studio Code pour créer ou importer vos fichiers JavaScript et HTML.
Pour tester votre code, affichez la console de votre navigateur grâce aux Outils de développement.
Vous avez compris la logique de programmation et installé votre environnement de travail. Vous êtes paré pour la prochaine étape : utiliser des conditions. Rendez-vous au prochain chapitre pour découvrir comment faire !
