Cours IT Bases JavaScript 036_Structure Syntaxique

Instructions

Les instructions JavaScript (Statements) sont un ensemble de directives utilisées pour effectuer des tâches spécifiques.

Exemple :

1
// Déclaration de variables
2
let userName = 'Pierre';
3
let age = 18;
4

5
// Instruction conditionnelle
6
if (age >= 18) {
7
  console.log(userName + ' est une personne adulte');
8
} else {
9
  console.log(userName + ' est une personne mineure');
10
}
11

12
// Boucle
13
for (let i = 0; i < 5; i++) {
14
  console.log('Sortie de boucle ' + (i + 1));
15
}
16

17
// Définition de fonction
18
function Hello(name) {
19
  return 'Bonjour, ' + name + ' !';
20
}
21

22
// Appel de fonction
23
let sayHello = Hello(userName);
24
console.log(sayHello);

Point-virgule

En JavaScript, le point-virgule (;) est un symbole de fin d’instruction, utilisé pour marquer la fin d’une instruction. Le point-virgule est facultatif dans la plupart des cas, car l’interpréteur JavaScript tentera d’insérer automatiquement des points-virgules (Automatic Semicolon Insertion, ASI) pour que le code soit analysé comme syntaxiquement correct. Cependant, il existe des cas où ASI peut conduire à un comportement inattendu, il est donc recommandé d’ajouter explicitement des points-virgules lors de l’écriture de code JavaScript.

Lorsqu’un point-virgule apparaît, qu’il soit sur une seule ligne ou sur plusieurs lignes, cette instruction se termine.

Exemple :

1
alert('Bonjour');alert('JavaScript !');

Lorsqu’il y a un saut de ligne (line break), dans la plupart des cas, le point-virgule peut être omis.

Exemple :

1
alert('Bonjour')
2
alert('JavaScript !')

1
alert('Bonjour');
2
alert('JavaScript !')

1
alert('Bonjour')
2
alert('JavaScript !');

1
alert('Bonjour');alert('JavaScript !')

Lorsque des blocs d’instructions ou des blocs de code sont rencontrés, le saut de ligne n’ajoutera pas automatiquement de points-virgules. Et les espaces et sauts de ligne seront ignorés.

Exemple :

1
alert
2
(
3
1+
4
   2
5
   +1);

Commentaires

En JavaScript, les commentaires sont utilisés pour ajouter des explications et des remarques dans le code. Ce texte n’a aucun impact réel sur l’exécution du programme. Les commentaires sont très utiles pour améliorer la lisibilité du code, la collaboration et le débogage.

Commentaires sur une seule ligne

En utilisant le symbole //, vous pouvez créer des commentaires sur une seule ligne. Tout le texte de // jusqu’à la fin de la ligne sera traité comme un commentaire.

Exemple :

1
alert('Bonjour JavaScript !'); // Commentaire sur une seule ligne après l'instruction
2
// Commentaire sur une seule ligne sur une ligne propre

Commentaires sur plusieurs lignes

En commençant par /* et en terminant par */, vous pouvez créer des commentaires sur plusieurs lignes. Tout le texte entre ces deux symboles sera traité comme un commentaire.

1
/*
2
  Ceci est un commentaire sur plusieurs lignes
3
  peut s'étendre sur plusieurs lignes
4
*/
5
alert('Bonjour');
6
/*
7
Les commentaires sur plusieurs lignes peuvent également être utilisés pour commenter un bloc de code, le code suivant ne sera pas exécuté
8
alert('JavaScript !');
9
*/

Boîtes de dialogue

JavaScript fournit plusieurs boîtes de dialogue pour une interaction simple avec l’utilisateur, notamment alert, confirm et prompt. Ces boîtes de dialogue vous permettent d’afficher des informations à l’utilisateur, de poser des questions ou d’accepter des entrées. Lorsqu’une boîte de dialogue est affichée, l’exécution du code est suspendue jusqu’à ce que l’utilisateur ferme la boîte de dialogue.

Boîte de dialogue alert

La boîte de dialogue alert est utilisée pour afficher un message à l’utilisateur et attendre que l’utilisateur clique sur le bouton “OK”.

Exemple :

1
alert('Bonjour JavaScript interne !');

Effet :

Boîte de dialogue confirm

La boîte de dialogue confirm est utilisée pour afficher à l’utilisateur une boîte de dialogue avec des boutons de confirmation et d’annulation, généralement utilisée pour demander à l’utilisateur s’il souhaite effectuer une certaine action.

Exemple :

1
    let yesNo = confirm("Apprenez-vous JavaScript ?");
2
    alert(yesNo);

Effet :

Boîte de dialogue prompt

La boîte de dialogue prompt est utilisée pour afficher à l’utilisateur une boîte de dialogue avec un champ de saisie, généralement utilisée pour accepter l’entrée de l’utilisateur.

Exemple :

1
    let name = prompt("Veuillez entrer votre nom :", '');
2
    alert(name);

Effet :

Outils de développement

Les outils de développement JavaScript sont un ensemble d’outils intégrés au navigateur qui aident les développeurs à déboguer, analyser et optimiser le code JavaScript. Différents navigateurs fournissent différents outils de développement. Voici les outils de développement JavaScript des navigateurs courants :

Outils de développement Chrome

Ouvrez le navigateur Chrome, appuyez sur Ctrl + Shift + I (Windows/Linux) ou Cmd + Option + I (Mac) pour ouvrir les outils de développement Chrome.

Faites un clic droit dans le navigateur, sélectionnez “Inspecter” dans le menu contextuel pour ouvrir les outils de développement Chrome.

Comme dans l’image :

Cliquez sur l’icône “Paramètres et plus” dans le navigateur, sélectionnez “Plus d’outils” — “Outils de développement” pour ouvrir les outils de développement Chrome.

Comme dans l’image :

Fonctions principales et panneaux :

• Console (Console) : Utilisée pour exécuter et déboguer du code JavaScript, afficher les sorties, les erreurs et les informations d’avertissement.
• Sources (Sources) : Fournit un éditeur de code, la définition de points d’arrêt, des expressions de surveillance et d’autres fonctions pour déboguer le code source JavaScript.
• Network (Réseau) : Afficher les requêtes réseau initiées par la page, vérifier les détails de la requête et de la réponse.
• Performance (Performance) : Analyse les performances de la page, affiche les temps de chargement, l’utilisation du CPU, etc.
• Application (Application) : Afficher et déboguer le stockage local, Session Storage, Cookies, etc.
• Elements (Éléments) : Afficher et modifier l’arbre DOM, modifier les styles CSS.

Mots-clés

Les mots-clés JavaScript sont des mots réservés dans le langage de programmation JavaScript qui ont un but spécial. Ils sont utilisés pour identifier des variables, des fonctions, des instructions, etc. Ces mots-clés ne peuvent pas être utilisés comme identificateurs (par exemple, noms de variables, noms de fonctions, etc.).

Voici quelques mots-clés JavaScript :

1. Mots-clés de base :

• break
• case
• catch
• continue
• debugger
• default
• delete
• do
• else
• false
• finally
• for
• function
• if
• in
• instanceof
• new
• null
• return
• switch
• this
• throw
• true
• try
• typeof
• undefined
• var
• void
• while
• with

2. Mots-clés réservés (ont une utilisation spéciale en mode strict) :

• implements
• interface
• package
• private
• protected
• public
• static
• yield

3. Mots-clés introduits avec ECMAScript 6 (ES6) :

• class
• const
• export
• extends
• import
• super