Les bases de Javascript. Partie 2 Cours JavaScript de débutant à avancé

Il s'agit de la deuxième partie de la série d'articles de blog JavaScript qui vous mènera de débutant à avancé. À la fin de cette série, vous connaîtrez toutes les bases dont vous avez besoin pour commencer à coder en JavaScript. Sans plus tarder, commençons par le deuxième tutoriel.

Bases de JavaScript - table des matières :

1. Principes de base de JavaScript
2. Exécution ligne par ligne
3. Deux manières de terminer les instructions
4. commentaires

Dans cet article de blog, nous continuerons là où nous nous sommes arrêtés depuis le premier article de blog. A ce stade, votre navigateur Google Chrome doit être ouvert et plus précisément votre console JavaScript ouverte. Si vous les avez fermés pour une raison quelconque, ce serait le bon moment pour les rouvrir. Commençons à apprendre les bases de JavaScrip

Si vous êtes sur un Mac, le raccourci clavier pour ouvrir la console consiste à appuyer sur "option + commande + J", après avoir ouvert Chrome. Si vous utilisez un appareil Windows, vous pouvez utiliser le raccourci clavier "Ctrl + 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 dans Affichage -> Développeur -> Console JavaScript.

Principes de base de JavaScript

JavaScript, comme tous les autres langages de programmation, est un langage que vous utilisez pour communiquer avec les ordinateurs. Comme un langage naturel a une grammaire et des mots connus pour former des phrases appropriées, 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 didacticiel précédent signifiait afficher une alerte à l'utilisateur avec les mots spécifiques qu'il a mis entre parenthèses juste après . Dans notre cas, nous avons écrit "Hello, World!" nous avons donc reçu une alerte disant "Hello, World!".

Il existe également d'autres mots-clés réservés en JavaScript dont nous devons être conscients afin de pouvoir communiquer efficacement avec l'ordinateur en utilisant les mots et la grammaire appropriés. De plus, tout comme la grammaire que nous avons en langage naturel, il existe également une grammaire dans les langages de programmation. Cette grammaire est communément appelée la « syntaxe » dans les langages de programmation et JavaScript ne fait pas exception à la règle. C'est pourquoi il est judicieux de comprendre les principaux mots-clés et la grammaire que nous avons en JavaScript lorsque nous commençons à apprendre les bases de JavaScript. Voyons quelques-unes des principales choses 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 ». Voici quelques exemples de langages compilés : 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 morceau 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 commis l'erreur, par exemple en oubliant un point-virgule ou en ne correspondant pas aux parenthèses dans votre code. Avoir cette caractéristique peut 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 manières de terminer les instructions

En fin de compte, un programme informatique est un ensemble d'instructions destinées à l'ordinateur. Mais où se termine un programme, où commence l'instruction suivante ? Il existe différentes approches à ce problème. JavaScript utilise deux éléments principaux, le point-virgule et les crochets.

Selon le type d'instruction que nous écrivons, nous utiliserons généralement l'un ou l'autre pour terminer ou empaqueter 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 alert("Hello, World"); code que nous avons exécuté précédemment, 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. Ceci est très similaire à la façon dont nous utilisons un point "." pour terminer les phrases en anglais.

commentaires

L'ajout de commentaires au code est une partie essentielle de la programmation. Il peut être facile de comprendre quel code vous écrivez au fur et à mesure 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.

L'ajout de commentaires facilite non seulement la compréhension de votre code pour l'avenir, mais il permet également à toute personne avec qui vous travaillez de comprendre le code beaucoup plus facilement. Cela peut également vous aider à mieux comprendre le problème avec lequel vous travaillez, car il est généralement beaucoup plus facile de résoudre les 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 est JavaScipt. La première consiste à ajouter un simple commentaire "sur une seule ligne" avec deux barres obliques comme ceci :

// this is a comment

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

// this is a comment.
// this is another comment.
// you can keep commenting like this.

Une autre raison pour laquelle nous utilisons des commentaires est de commenter un morceau de code pour expérimenter avec du code. Par exemple, vous pouvez écrire la même fonctionnalité de plusieurs manières et vous pouvez 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 sur Chrome.

// greet user
alert("Hello, User!");
alert("Hi, User!");

Si vous souhaitez vous entraîner davantage à écrire vous-même tout le code, vous pouvez également le faire. Une chose que vous devez savoir sur l'écriture de plusieurs lignes de code dans la console est que pour accéder à la ligne suivante sans l'exécuter, vous pouvez appuyer sur "shift + enter" pour le faire. Sinon, après avoir écrit une seule ligne de code, si vous appuyez simplement sur Entrée, il exécutera cette ligne de code. Dans cet exemple, ce n'est pas un gros problème et c'est en fait bien de l'exécuter également ligne par ligne, car nous avons un exemple simple qui peut également fonctionner dans ce style.

Après l'avoir copié et collé ou avoir écrit le code vous-même, continuez et appuyez sur "Entrée" pour exécuter le code. Le résultat devrait vous donner deux alertes distinctes. Aussi pour ignorer les alertes, vous pouvez cliquer sur "OK", dans ce cas, ils ne feront rien car il s'agit d'une simple alerte et cela ne déclenche rien après avoir affiché le message que nous voulons afficher.

Lorsque nous avons exécuté le code comme celui-ci, nous exécutons deux fois la même fonctionnalité. Mais que devez-vous faire si vous ne souhaitez voir qu'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!" se fait exécuter.

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 coup d'œil à la solution, je recommande toujours fortement de l'essayer vous-même, car vous apprendrez le meilleur lorsque vous l'exercerez 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 prend la même couleur que la ligne commentée précédente. Cette différence de couleur ici ne fait pas vraiment de différence 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 consiste à 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 sur plusieurs lignes dans notre code.

/* a single line comment */
/* the commenting starts when we put a forward slash and an asterisk
and the commented areas ends
when we close of the comment with an asterisk and the forward slash
like this */

Vous connaissez maintenant les bases de JavaScript. Dans le prochain didacticiel, nous verrons un concept extrêmement courant en programmation appelé "variables" ainsi que des types de données de base en JavaScript.

Auteur : Robert Whitney

Expert JavaScript et instructeur qui coache les départements informatiques. Son objectif principal est d'augmenter la productivité de l'équipe en enseignant aux autres comment coopérer efficacement lors du codage.

Afficher tous les articles

Cours JavaScript de débutant à avancé en 10 articles de blog :

1. Comment commencer à coder en JavaScript ?
2. Principes de base de JavaScript
3. Variables et différents types de données en JavaScript
4. Extraits de code et structures de contrôle
5. Boucles While et boucles for
6. Tableau Java
7. Fonctions JavaScript
8. Objets JavaScript
9. Méthodes JavaScript et plus
10. Résumé du cours JavaScript