DD

Accueil > Cours > Apprenez à programmer avec JavaScript > Appréhendez la logique de programmation

Apprenez à programmer avec JavaScript

12 heures  Facile

Mis à jour le 22/04/2024

 

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

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 ?

Un algorithme est une façon de concevoir les étapes d’un code dans le but de résoudre un
problème donné.

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

Je vous rassure, nous n’irons pas plus loin sur la notion d’algorithmique dans ce cours. Tout ce
que vous avez besoin de retenir, c’est qu’un algorithme vous aidera à bien penser vos étapes en
amont de votre code. Toutefois, si vous souhaitez en savoir plus, n’hésitez pas à consulter le
cours Découvrez le fonctionnement des algorithmes.

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.

Les blocs de code sont des regroupements de lignes de code. Ils permettent d’organiser votre
code et de clarifier à quoi sert un groupe de lignes de code. En JavaScript, ils sont délimités par
des accolades { } .

Voici un exemple de bloc de code :

javascript

1 {
2 const monChiffre = 4
3 console.log(monChiffre)
4 }
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 !

Personnellement, j’utiliserai Visual Studio Code dans ce cours. Il s’agit d’un IDE (Integrated
Development Environment, ou environnement de développement intégré, en français). Un IDE
permet de regrouper tout ce dont nous aurons besoin pour écrire notre code. Ainsi, tous les
fichiers seront au même endroit, et le code sera coloré pour faciliter la lecture.

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

1 <!DOCTYPE HTML>
2 <html lang="fr">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <script src="script.js"></script>
 9 </head>
10 <body>
11
12 </body>
13 </html>

Attardons-nous sur cette ligne :

javascript

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

C’est elle qui va “lier” notre fichier HTML au fichier JS. Elle signifie : Ce fichier HTML va charger le
fichier script.js. En d’autres termes, c’est grâce à cette ligne que le navigateur saura qu’il doit
exécuter les instructions contenues dans script.js.

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

1 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.

La page est vide, c’est normal ! Notre “Hello World” n’est pas écrit dans la page HTML, mais dans
la console. Il faut donc, comme sur CodePen, ouvrir l’onglet Console.

Pour afficher la console dans votre navigateur, vous devez afficher les Outils de développement.
Si vous utilisez Chrome ou Firefox, vous pouvez faire un clic droit à n’importe quel endroit de
votre page HTML et choisir “Inspecter”. Cherchez alors l’onglet “Console”. Il se trouve
généralement :

Dans la zone en bas des Outils de développement sur Chrome :

 Affichez la console sur Chrome en faisant un clic droit

Dans la zone en haut à gauche des Outils de développement sur Firefox.

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.

Résultat du console.log

Bravo ! Vous savez maintenant vous servir de la console de votre navigateur. 🎉 Si vous avez
besoin de revoir plus en détail les différentes étapes pour installer votre environnement de travail,
n’hésitez pas à suivre le cours Mettez en place votre environnement front-end.

Personne n’est à l'abri d’une erreur de code, même les développeurs les plus expérimentés.
Prenez donc l’habitude de tester très régulièrement votre code. Il vous sera alors bien plus
facile de trouver votre erreur qu’en ne testant qu’à la fin ! Cela vous évitera également de longues
heures de débogage, au passage…

Récapitulons en vidéo
Retrouvez les démonstrations de ce chapitre dans la vidéo ci-dessous :

02:27
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 !

J'ai terminé ce chapitre et je passe au suivant

Et si vous obteniez un diplôme OpenClassrooms ?

Formations jusqu’à 100 % financées

Date de début flexible

Projets professionnalisants

Mentorat individuel

Trouvez la formation et le financement faits pour vous

Être orienté Comparez nos types de formation

Quiz : Manipuler des données avec

 Contrôlez du code grâce aux conditions 
JavaScript

Le professeur
David Pierru
Mentor chez OpenClassrooms (spécialisé dans les parcours web), Ingénieur IT et freelance.
POUR LES ÉTUDIANTS

POUR LES EMPLOYEURS

OPENCLASSROOMS

AIDE

LANGUE

Français

NOUS SUIVRE

Mentions légales Conditions générales d'utilisation Politique de protection des données personnelles

Cookies Accessibilité