• 12 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 4/22/24

Appréhendez la logique de programmation

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é :

Maquette de l’application AzerType. Au milieu, l'interface de l'application est affichée dans un encart orange. Ce dernier contient de haut en bas : les mots à taper, le champ de texte, le score et deux boutons
Maquette de l’application

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.

Capture d'écran de Chrome. L'option
Affichez la console sur Chrome en faisant un clic droit
Capture d'écran du chemin vers la console du navigateur depuis
Affichez la console sur Firefox en passant par le menu

Dans la console, vous verrez notre “Hello World”, qui correspond à l’instruction écrite dans le fichier script.js.

Capture d'écran du résultat du console.log en 3 lignes.
Résultat du console.log

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 !

Example of certificate of achievement
Example of certificate of achievement