Bases de JavaScript. Partie 2 Cours de JavaScript du débutant à avancé

Ceci est la deuxième partie de la série d’articles de blog sur JavaScript qui vous fera passer de débutant à avancé. À la fin de cette série, vous connaîtrez tous les éléments de base nécessaires pour commencer à coder en JavaScript. Sans plus tarder, commençons avec le deuxième tutoriel.

Les bases de JavaScript – table des matières :

1. Les bases de JavaScript
2. Exécution ligne par ligne
3. Deux façons de terminer les instructions
4. Commentaires

Dans cet article de blog, nous allons continuer là où nous nous étions arrêtés dans le premier article de blog. À ce stade, vous devriez avoir votre navigateur Google Chrome ouvert et plus précisément avoir votre console JavaScript ouverte. Si pour une raison quelconque vous les avez fermées, ce serait un bon moment pour les rouvrir. Commençons à apprendre les bases de JavaScript.

Si vous êtes sur un Mac, le raccourci clavier pour ouvrir la console est de presser “option + commande + J”, après avoir ouvert Chrome. Si vous utilisez un appareil Windows, vous pouvez utiliser le raccourci clavier “Contrôle + Maj + J” pour ouvrir la console JavaScript, une fois que vous avez ouvert Chrome. Ou vous pouvez également aller dans le menu en haut et aller à Affichage -> Développeur -> Console JavaScript.

Les bases de JavaScript

JavaScript, comme tous les autres langages de programmation, est un langage que vous utilisez pour communiquer avec les ordinateurs. Comme une langue naturelle a une grammaire et des mots connus pour former des phrases correctes, les langages de programmation ont également certaines règles que vous devez suivre pour communiquer efficacement avec l’ordinateur.

Par exemple, certains mots signifient certaines choses pour le moteur JavaScript qui exécute notre code, comme le mot-clé “alert” que nous avons utilisé dans le tutoriel précédent qui avait pour signification d’afficher une alerte à l’utilisateur avec les mots spécifiques qu’il a mis entre les parenthèses juste après. Dans notre cas, nous avons écrit “Hello, World!” donc nous avons eu une alerte qui disait “Hello, World!”.

Il existe également d’autres mots réservés en JavaScript dont nous devrions être conscients afin de pouvoir communiquer efficacement avec l’ordinateur en utilisant les bons mots et la bonne grammaire. De plus, tout comme la grammaire que nous avons dans une langue naturelle, il existe également une grammaire dans les langages de programmation. Cette grammaire est communément appelée “syntaxe” dans les langages de programmation et JavaScript n’échappe pas à cette règle. C’est pourquoi il est judicieux de comprendre les principaux mots-clés et la grammaire que nous avons en JavaScript alors que nous commençons à apprendre les bases de JavaScript. Voyons quelques-unes des choses principales que nous devrions savoir sur JavaScript.

Exécution ligne par ligne

En ce qui concerne les bases de JavaScript, l’une des premières choses que vous devez savoir est que le code que vous écrivez sera exécuté ligne par ligne, de haut en bas. Ce style d’exécution de code est également appelé JavaScript étant un “langage de programmation interprété”.

Au contraire, certains langages de programmation sont des “langages de programmation compilés”. Quelques exemples de langages compilés seraient : C, C++, C#, Swift, Java, etc. La principale différence est qu’avec les langages de programmation compilés, tout le code que vous écrivez sera “compilé” et sera exécuté en un seul bloc par l’ordinateur. C’est aussi pourquoi il peut être plus difficile de commencer à apprendre un langage de programmation compilé, car il peut être plus difficile de repérer où vous avez fait une erreur dans votre programme.

Quelques exemples de langages de programmation interprétés seraient JavaScript, Python, Bash et Matlab. Avec les langages de programmation interprétés, vous avez l’avantage inhérent de voir quelle ligne vous avez faite l’erreur, par exemple en oubliant un point-virgule ou en ne faisant pas correspondre les parenthèses dans votre code. Avoir cette caractéristique peut ne pas faire une grande différence dans certaines applications, mais lorsque nous essayons de charger un site Web avec une connexion Internet lente, vous préférez que chaque ligne de JavaScript soit exécutée aussi rapidement que possible.

Deux façons de terminer les instructions

Un programme informatique, à la fin de la journée, est un ensemble d’instructions pour l’ordinateur. Mais où se termine un programme et où commence la prochaine instruction ? Il existe différentes approches à ce problème. JavaScript utilise deux choses principales, le point-virgule et les parenthèses.

Selon le type d’instruction que nous écrivons, nous utiliserons généralement l’un ou l’autre pour terminer ou regrouper un ensemble d’instructions. Nous utiliserons différents types de parenthèses pour différentes fonctionnalités et types de données. Par exemple, dans le code alert(“Hello, World”); que nous avons précédemment exécuté, les parenthèses qui entourent l’écriture hello world indiquent à l’ordinateur ce que l’alerte doit dire, et le point-virgule à la fin de l’instruction indique à l’ordinateur que cette instruction se termine ici, vous pouvez passer à l’instruction suivante. C’est très similaire à la façon dont nous utilisons un point “.” pour terminer les phrases en anglais.

Commentaires

Ajouter des commentaires au code est une partie essentielle de la programmation. Il peut être facile de comprendre ce que vous écrivez en code pendant que vous l’écrivez, mais selon la complexité du code, vous pouvez avoir très peu d’idée six mois plus tard, lorsque vous revenez au code.

Ajouter des commentaires rend non seulement beaucoup plus facile de comprendre votre code pour le futur vous, mais cela rend également beaucoup plus facile pour quiconque avec qui vous travaillez de comprendre le code également. Cela peut également vous aider à mieux développer votre compréhension du problème avec lequel vous travaillez, car il est généralement beaucoup plus facile de résoudre des problèmes en les divisant en morceaux plus petits. Les parties commentées de votre code seront ignorées par l’interpréteur et ne seront pas exécutées.

Il existe deux façons d’ajouter des commentaires en JavaScript. La première consiste à ajouter un simple commentaire “sur une seule ligne” avec deux barres obliques comme ceci :

// ceci est un commentaire

De cette façon, tout ce que vous écrivez après les deux barres obliques sera ignoré sur la ligne spécifique où vous avez mis les barres obliques. Vous pouvez répéter cela autant de fois que nécessaire pour avoir plusieurs lignes couvertes de commentaires comme ceci :

// ceci est un commentaire.
// ceci est un autre commentaire.
// vous pouvez continuer à commenter comme ça.

Une autre raison pour laquelle nous utilisons des commentaires est de commenter un morceau de code pour expérimenter avec le code. Par exemple, vous pouvez écrire la même fonctionnalité de plusieurs manières et vous pouvez vouloir commenter une version du même code pour comparer leurs performances ou résultats individuels. Voyons cela avec un exemple également.

Allez-y et copiez et collez le code suivant dans votre console JavaScript que vous avez ouverte dans Chrome.

// saluer l'utilisateur
alert("Hello, User!");
alert("Hi, User!");

Si vous voulez un exercice supplémentaire, vous pouvez également écrire tout le code vous-même. Une chose que vous devez savoir sur l’écriture de plusieurs lignes de code dans la console est que pour passer à la ligne suivante sans l’exécuter, vous pouvez appuyer sur “maj + entrée” pour le faire. Sinon, après avoir écrit une seule ligne de code, si vous appuyez simplement sur entrée, cela exécutera cette ligne de code. Dans cet exemple, ce n’est pas un gros problème et il est en fait acceptable de l’exécuter ligne par ligne également, car nous avons un exemple simple qui peut également fonctionner dans ce style.

Après avoir copié et collé ou écrit le code vous-même, allez-y et appuyez sur “entrée” pour exécuter le code. Le résultat devrait vous donner deux alertes séparées. De plus, pour fermer les alertes, vous pouvez cliquer sur “OK”, dans ce cas, elles ne feront rien car il s’agit d’une alerte simple et cela ne déclenche rien après avoir affiché le message que nous voulons afficher.

Lorsque nous avons exécuté le code de cette manière, nous exécutons la même fonctionnalité deux fois. Mais que devez-vous faire si vous voulez voir une seule implémentation à la fois ? Eh bien, vous savez exactement quoi faire dans ce cas car nous en avons déjà parlé. Allez-y et commentez l’une des lignes après avoir collé ou écrit le code afin que seule la deuxième implémentation de “Hi, User!” soit exécutée.

Une fois que vous avez terminé le défi, ou si vous êtes bloqué pendant le défi, vous pouvez voir le code de solution au défi ci-dessous. Avant de jeter un œil à la solution, je recommande toujours fortement d’essayer par vous-même car vous apprendrez le mieux lorsque vous le pratiquez vraiment. Si vous avez réussi le défi, vous devriez voir un écran comme celui-ci :

Notez que lorsque vous commentez une ligne de code, elle devient de la même couleur que la ligne commentée précédente. Cette différence de couleur n’a pas réellement d’importance pour l’ordinateur, mais c’est une fonctionnalité plutôt utile pour nous lorsque nous écrivons du code. De cette façon, il est beaucoup plus facile si vous commentez par erreur une ligne de code, car les couleurs le rendront évident.

Une autre façon de commenter le code est d’utiliser la barre oblique et le caractère astérisque. De cette façon, nous pouvons créer des commentaires sur une seule ligne ou des commentaires multilignes dans notre code.

/* un commentaire sur une seule ligne */
/* le commentaire commence lorsque nous mettons une barre oblique et un astérisque
et les zones commentées se terminent
lorsque nous fermons le commentaire avec un astérisque et la barre oblique
comme ceci */

Maintenant, vous connaissez les bases de JavaScript. Dans le prochain tutoriel, nous verrons un concept extrêmement courant en programmation appelé “variables” ainsi que les types de données de base en JavaScript.