Introduction à JavaScript

Introduction

Le JavaScript est un langage de programmation accessible et très utilisé dans un grand nombre d'applications, voire omniprésent pour les sites web.

Ce module va permettre, en découvrant l'environnement de développement de Repl.it, d'introduire les différents concepts du langage, sa syntaxe et les bonnes pratiques de code pour débuter et coder ses premiers scripts.

Exécuter des programmes JavaScript avec un navigateur web

Objectif

Découvrir les fondements de JavaScript.

Mise en situation

JavaScript est un langage de programmation de script largement utilisé pour animer les sites web.

Un langage de script est un langage interprété.
Sa syntaxe est dite de haut niveau, plus proche du langage naturel que du langage machine : par conséquent, il est relativement simple à apprendre et est indépendant de l'aspect matériel de la machine sur lequel il est lancé.

Origine

À l'origine de JavaScript se trouve ECMAScript. ECMAScript est un standard constitué d'un ensemble de règles mises en pratique dans plusieurs langages de script. À ses débuts, le JavaScript est utilisé dans les navigateurs web : les navigateurs étant des clients web (car ils demandent des services à des serveurs web), JavaScript devient populaire pour le développement web dit orienté client (associé au HTML et CSS pour la réalisation de pages web).

Définition : Langage interprété

Un langage interprété est un langage qui est exécuté par un autre programme : l'interpréteur.

Celui-ci lit une ligne de code, l'analyse, l'exécute si elle est correcte et passe à la suivante ; il répète ce processus pour chaque instruction du programme. Un programme en langage interprété est donc exécuté au fur et à mesure de sa lecture.

Complément : Interpréteur vs compilateur

À la différence d'un langage interprété, un langage compilé est traduit une seule fois du code source vers le langage machine, et c'est ce code machine qui sera ensuite exécuté. L'étape de traduction n'est pas répétée à chaque exécution ce qui est en général plus performant.

Méthode : Exécuter du JavaScript dans un navigateur

On peut exécuter du JavaScript dans la console web du navigateur :

sur Chrome : Clic droit > Inspecter ou Ctrl+Shift+i, puis onglet Console,
sur Firefox : Clic droit > Examiner l'élément ou Ctlr+Shift+k, puis onglet Console.

On peut alors exécuter du code dans le champ de la console.

Complément : Repl.it

Il existe des interpréteur JavaScript en ligne, comme Repl.it.

Complément : Node.js

Node.js est un environnement logiciel permettant de créer des applications en exécutant du JavaScript du côté serveur.

Depuis l'apparition de Node.js, JavaScript est devenu multi-usages et est désormais utilisé comme langage côté serveur, comparable aux langages traditionnels comme le PHP, le Ruby, le C, etc.

À retenir

JavaScript est un langage interprété polyvalent d'abord popularisé par le web et devenu multi-usage depuis Node.js.

Exercice

On dispose du code suivant, qui calcule le volume d'une sphère de rayon 12 :

4 * Math.PI * Math.pow(12, 3) / 3

Copier le code dans la console JavaScript d'un navigateur web et l'exécuter. Quelle est la valeur calculée ?

7238

Exécuter à présent une seconde version du code qui utilise la fonction Math.trunc. Que fait Math.trunc ?

Math.trunc(4 * Math.PI * Math.pow(12, 3)) / 3

Math.trunc réalise une troncature d'un nombre : elle coupe la partie décimale (trunc vient de l'anglais truncate).

Exécuter des programmes JavaScript avec Repl.it

Objectifs

Créer son environnement de travail sur Repl.it ;
Créer son premier programme JavaScript.

Mise en situation

Lorsque l'on commence à développer, il est nécessaire de mettre en place ce que l'on appelle un environnement de développement. Pour commencer, cela signifie installer les dépendances nécessaires à l'exécution du langage sur la machine. Ensuite, il est préférable d'installer et d'utiliser un IDE, c'est à dire un logiciel permettant d'écrire notre code, généralement adapté au langage utilisé. Celui-ci peut par exemple proposer des fonctionnalités de détection et corrections de fautes dans le code.

Pour faciliter cette mise en place, le site Repl.it permet d'avoir un environnement de développement complet en ligne directement dans son navigateur, pour une large variété de langages.

Rappel :

Repl.it

Méthode : Créer un programme JavaScript sur Repl.it

Grâce à Repl.it, il est possible de créer des environnements de développement selon le langage que l'on veut utiliser.

Sur Repl.it:

Cliquer sur « + new repl » pour ouvrir la fenêtre de création.
Dans « Language », sélectionner « JavaScript » et donner un nom au Repl.

Écrire et lancer du code

Le code JavaScript s'écrit dans des fichiers dont le nom se termine par .js (c'est l'extension du fichier).

À gauche, on voit la liste des fichiers existants. Les deux icônes permettent de créer des fichiers et des dossiers. Un fichier index.js a déjà été créé.
Le bouton « Run » permet de lancer le programme.
La partie principale au centre est l'éditeur de texte où est tapé le code.
La partie de droite est la console où le résultat s'affiche quand le programme est lancé par « Run ».

Exemple : Hello World

Copier le code ci-après dans le fichier index.js et cliquer sur « Run ».

Ce premier programme affiche dans la console le texte entre parenthèses.

console.log('Hello World')

Complément :

Il en existe d'autres interpréteurs JavaScript en ligne :

À retenir

Un repl est créé pour un langage donné, le code écrit dans l'éditeur de texte peut être exécuté grâce au bouton Run. Le résultat s'affiche dans la console située à droite de l'écran.

Exercice

Exécuter ce programme avec Repl.it. Quel est le résultat obtenu ?

const languageJs = '...'
const languageC = '...'
console.log(languageC + ' est un langage compilé.')
console.log(languageJs + ' est un langage interprété.')

... est un langage compilé.

... est un langage interprété.

Modifier le code pour qu'il affiche :

C est un langage compilé.

JavaScript est un langage interprété.

Il faut modifier la valeur des variables languageJS et languageC, située entre apostrophes ou simple quote.

const languageJs = 'JavaScript'
const languageC = 'C'
console.log(languageC + ' est un langage compilé.')
console.log(languageJs + ' est un langage interprété.')

Syntaxe du JavaScript

Objectifs

Apprendre les bases de la syntaxe du JavaScript.

Mise en situation

La syntaxe d'un langage est l'ensemble des règles d'écritures à respecter pour rédiger un code source valide. La manière de définir des variables ou des fonctions, le format d'écriture d'une opération, ou encore le respect ou non de la casse sont des exemples de règles de syntaxe dans un langage.

JavaScript est un langage dit de haut niveau, c'est à dire que sa syntaxe est plus proche du langage naturel que du langage machine. C'est entre autres ce qui le rend simple à prendre en main.

Définition : Instruction

Une instruction est une ligne de code qui effectue une action : un affichage, un calcul, etc.

Les instructions sont exécutées séquentiellement, c'est-à-dire dans l'ordre et une par une.

Définition : Variables et constantes

Une instruction peut utiliser des variables, des objets auxquels on peut attribuer une valeur (un nom, une date, un nombre, etc.) et que l'on déclare avec le mot clé let. Sa valeur peut changer au cours du programme.

Une constante ressemble à une variable sauf qu'elle doit forcément contenir une valeur dès sa création et que celle-ci ne peut plus être changée par la suite. On la déclare avec le mot clé const.

Syntaxe : Déclaration de variables en JavaScript

// Déclaration et affectation d'une variable nommée month
let month = 'Avril'
// Changement de la valeur de la variable month
month = 'Mai' 
// Déclaration et affectation d'une variable constante nommée NB_MONTH
const NB_MONTH = 12

Définition : Expression

Une expression est un morceau de code qui produit un résultat, par exemple une addition. Le résultat d'une expression peut être stockée dans une variable.

Exemple : Instruction avec expression

La ligne représente une instruction. La partie de droite, 5 + 6, est une expression.

let sum = 5 + 6 

Définition : Fonctions

En JavaScript, certaines actions nécessitent de faire appel à des fonctions prédéfinies. Une fonction est un morceau de code ré-utilisable.

Les fonctions servent notamment à ne pas réécrire le code si on l'utilise plusieurs fois dans le programme : à la place, il suffit d'appeler la fonction en utilisant son nom, et les instructions qu'elle contient s'exécuteront.

Exemple : Fonction d'affichage

Pour afficher des choses dans la console, on utilise la fonction prédéfinie console.log().

Entre les parenthèses, il faut indiquer la ou les informations à afficher.

// Affiche Hello World dans la console
console.log('Hello World')
// Affiche 4 dans la console
console.log(4)

Fondamental : Règles de syntaxe

Pour que les instructions soient exécutées, elles doivent être écrites dans une syntaxe correcte. Le JavaScript impose :

De respecter la casse, c'est à dire les majuscules et minuscules. console.Log() n'équivaut pas à console.log().
Les espaces doivent être respectées : le nom d'une variable ne peut pas en contenir, en revanche elles sont nécessaires après des mots clés comme let.
Il faut aller à la ligne entre deux instructions.

Exemple :

const hello = 'Hello'
const world = 'World'
console.log(hello, world)

Attention : Standard

Dans des versions antérieures, les instructions JavaScript devaient se terminer par un point-virgule. Avec l'évolution du langage, le point-virgule n'est plus utile. On peut tout de même encore voir les deux écritures.

À retenir

Le JavaScript permet d'utiliser des variables, des fonctions, des opérations et les instructions. Leur écriture doit respecter des règles de syntaxe prédéfinies.

Exercice

On dispose du programme suivant, qui devrait afficher deux phrases :

console.log('Bogota est la capitale de la Colombie') console.log('Séoul est la capitale de la Corée du Sud')

Tester le programme. Que se passe-t-il ?

Le programme ne fonctionne pas : une erreur est retournée, affichée en rouge.

Trouver et corriger l'erreur du programme.

Les instructions doivent être séparées correctement par un retour à la ligne.

console.log('Bogota est la capitale de la Colombie.')
console.log('Séoul est la capitale de la Corée du Sud.')

Ajouter une instruction permettant d'afficher la capitale de la Norvège.

console.log('Bogota est la capitale de la Colombie.')
console.log('Séoul est la capitale de la Corée du Sud.')
console.log('Oslo est la capitale de la Norvège.')

La casse

Objectif

Passer en revue les différentes conventions de casses.

Mise en situation

Lorsque l'on développe, on est amené à nommer différents éléments de notre code, comme les variables ou les fonctions.

Selon les langages, la différenciation des noms en fonction des majuscules et des minuscules, c'est à dire la casse, n'est pas toujours la même.

Comme les espaces ne sont pas utilisables dans des noms, différentes conventions se sont mises en place pour séparer différents mots dans un même nom.

Fondamental : Sensibilité

JavaScript est sensible à la casse ; il faut donc faire attention aux majuscules/minuscules (mots clés, variables, fonctions, etc.).

Par exemple, le mot clé let (qui crée une variable) ne peut pas être remplacé par Let (qui n'existe pas).

Attention :

On peut créer deux variables contenant les mêmes caractères mais avec une casse différente.

Syntaxe : Casse

Les espaces servant à séparer les mots du langages, on ne peut pas les utiliser pour les variables. Pour les remplacer, on accole plusieurs mots et on utiliser une convention pour marquer leur séparation :

camel case : première lettre du premier mot en minuscule, les premières lettres des mots suivants en majuscule (ex : albumName, parseInput).
pascal case : identique à la casse camel, sauf que la toute première lettre est en majuscule aussi (ex : AlbumName, ParseInput).
snake case : les espaces sont remplacés par des underscores « _ » (ex : album_name, parse_input).
kebab case : les espaces sont remplacés par des tirets - (ex : album-name, parse-input).

Le choix d'une convention doit être fixée pour le programme entier : on choisira un type de convention pour le nommage des variables et fonctions, une convention pour le nom des fichiers, etc.

Remarque : Variations des conventions

Certaines conventions sont plus populaires pour certains langages : snake case en Python, camel case en JavaScript, etc.

Exemple : Camel case en JavaScript

let firstPlayer = 'Leo'

Exemple : Snake case en Python

first_player = 'Leo'

À retenir

Le choix de la convention de casse permet d'uniformiser les programmes ainsi que d'écrire des noms plus détaillés et lisibles.

Exercice

On dispose du programme suivant :

const goodnight_french = 'Bonne nuit'
const goodnight_japanese = 'Oyasuminasai'
console.log(goodnight_french, goodnight_japanese)

Quel est la convention de casse utilisée ?

La convention snake_case est utilisée.

Modifier le code pour qu'il utilise la convention camelCase.

const goodnightFrench = 'Bonne nuit'
const goodnightJapanese = 'Oyasuminasai'
console.log(goodnightFrench, goodnightJapanese)

Indentation du code

Objectif

Connaître les conventions d'indentation du code.

Mise en situation

Le métier de développeur ne consiste pas simplement à écrire du code. Il arrive régulièrement qu'il soit nécessaire d'en lire, par exemple pour comprendre le fonctionnement d'un programme. Il est donc important de donner une bonne lisibilité à son code, pour permettre aux autres ou à soi-même de le relire facilement. Pour cela différentes règles doivent être respectées, comme par exemple l'indentation. Elle consiste à ajouter des espaces au début des lignes, pour identifier clairement les différents blocs de code.

Fondamental : Indentation

La lecture d'un code doit être facilitée visuellement par une bonne indentation : c'est une manière de formater les lignes et d'arranger les blocs de code en utilisant un nombre spécifique d'espaces et de tabulations. Le résultat doit permettre d'identifier d'un simple coup d’œil les différents niveaux du code, en particulier lorsque l'on imbrique des blocs dans d'autres.

L'indentation est la plupart du temps esthétique : elle ne fait que mettre en forme le code.

Néanmoins, dans certains langage comme Python elle modifie le sens du contenu.

Exemple : Code non-indenté VS code indenté

// Code mal indenté
let surname = 'First'
let firstname = 'Alexander'
if (surname && firstname) {
console.log('Name :')
console.log(firstname, surname)
}

// Code correctement indenté
let surname = 'First'
let firstname = 'Alexander'
if (surname && firstname) {
  console.log('Name :')
  console.log(firstname, surname)
}

Grâce à l'indentation on perçoit mieux que les deux affichages console.log dépendent de la condition (if).

Méthode : Règles générales

Bien que le style d'indentation puisse légèrement varier, il existe des conventions populaires :

Utiliser des espaces (qui espaceront de manière identique partout) plutôt que des tabulations (qui pourront rendre un résultat différent selon les environnements).
Utiliser deux espaces pour l'indentation.
À chaque fois qu'un bloc est imbriqué dans un autre, l'indenter avec les 2 espaces supplémentaires.
Ne pas sauter plusieurs lignes entre des instructions.

Méthode : Auto-format

Sur Repl.it, une option permet rapidement de corriger l'indentation du code. Pour cela, cliquer sur l’icône « auto-format » à droite du nom du fichier.

À retenir

L'indentation ne doit pas être négligée car, sans elle, un code peut rapidement devenir difficile à lire et donc à comprendre.

Exercice

On dispose du programme suivant, qui est peu lisible du fait d'une mauvaise indentation :

const number = 10
if (number > 0) {
console.log('Le numéro est positif')
if (number < 9) {
console.log('Le numéro est un chiffre')}
}

Corriger l'indentation du programme.

Remarquer que le code contient deux blocs imbriqués, et non deux blocs l'un à la suite de l'autre. Il y a aura donc deux niveaux d'indentation.

const number = 10
if (number > 0) {
  console.log('Le numéro est positif')
  if (number < 9) {
    console.log('Le numéro est un chiffre')
  }
}

On utilise des espaces pour l'indentation. Si la convention classique est respectée, combien d'espaces précèdent la deuxième instruction « console.log » ?

4 espaces : 2 espaces pour le premier bloc, 2 autres espaces pour le deuxième bloc.

Les commentaires

Objectif

Comprendre l'utilité des commentaires.

Mise en situation

Un programme qui s'allonge peut rapidement devenir difficile à relire, à comprendre et à modifier.

Fondamental : Commentaires

Commenter son code est une bonne pratique à adopter pour conserver un code explicite : préciser le rôle d'une fonction, expliquer une opération réalisée sur plusieurs instructions, etc.

Les commentaires sont indispensables en particulier pour des programmes complexes, destinés à être réutilisés ou modifiés par plusieurs personnes ; ils permettent de rendre un programme ou un bloc de code plus clair en utilisant la langue naturelle (français, anglais, etc.).

Il existe trois types de commentaires en JavaScript :

Les commentaires en bloc ;
Les commentaires en ligne ;
Les commentaires de fin de ligne.

Syntaxe : Commentaires en JavaScript

/*
  Commentaire en bloc
*/
// Commentaires en ligne
console.log('Hello World') // Commentaire de fin de ligne

Méthode :

Pour être efficaces, les commentaires doivent donner suffisamment d'informations sans être trop détaillés. Pour cela :

Ne pas commenter chaque ligne mais plutôt un ensemble d'instructions qui effectuent une opération spécifique ou plutôt complexe.
Ne pas expliciter tous les détails comme le rôle des variables : pour cela, il est préférable de judicieusement choisir leur nom. Cela aidera à la compréhension sans alourdir de commentaires.
Les instructions commentées doivent en revanche être supprimées si elles ne sont pas vouées à être utilisées : les laisser ajoute inutilement des lignes et nuit à la compréhension.

Complément : Supprimer temporairement des instructions

Les commentaires servent aussi à masquer temporairement des lignes de code que l'on souhaite temporairement ignorer, par exemple à des fins de tests ou pour isoler un problème. Cette méthode permet d'éviter de les supprimer de les réécrire ces même lignes.

À retenir

Les commentaires doivent expliciter ce qui ne l'est pas dans le code et ne doivent pas alourdir le code.

Exercice

On dispose d'un programme, qui ne contient aucun commentaire, et d'une liste de commentaires désordonnés.

const day = 4
const month = 'Mai'
const year = '2020'
console.log('Jour J: ' + day + ' ' + month + ' ' + year)
const nextDay = day + 1
console.log('Jour J+1: ' + day + ' ' + month + ' ' + year)

// Affichage de la date du lendemain
// Incrémentation d'un jour
// Affichage de la date
// Définition des constantes

Insérer les commentaires à leur place dans le programme.

// Définition des constantes
const day = 4
const month = 'Mai'
const year = '2020'
// Affichage de la date
console.log('Jour J : ' + day + ' ' + month + ' ' + year)
// Incrémentation d'un jour
const nextDay = day + 1
// Affichage de la date du lendemain
console.log('Jour J+1 : ' + nextDay + ' ' + month + ' ' + year)

De quel type sont ces commentaires ?

Ce sont tous des commentaires en ligne.

Bonnes pratiques

Objectif

Connaître les bonnes pratiques d'écriture de code JavaScript.

Mise en situation

Il existe des bonnes pratiques pour chaque langage de programmation. Les bonnes pratiques sont des règles d'écriture du code qui ne sont pas imposées par le langage. Elles sont considérées comme importantes par la communauté. Il est fortement recommandé de se renseigner et de suivre les bonnes pratiques des langages qu'on utilise, qui servent généralement à améliorer la lisibilité du code source. De plus, cela permet d'avoir un style de code commun au sein d'une équipe, ou même d'une communauté, et ainsi de faciliter la collaboration.

Fondamental : Référence

Des bonnes pratiques populaire de JavaScript sont regroupées ici : https://standardjs.com/rules-fr.html#javascript-standard-style.

Méthode : Chaînes de caractère

Les chaînes de caractères doivent être entourées d'apostrophes. Les guillemets ne sont utilisés que si la chaîne contient elle-même une apostrophe.

Exemple :

console.log("Hello World") // ✗ non
console.log('Hello World') // ✓ ok
console.log("Sans l'apostrophe") // ✓ ok

Méthode : Variables

Toutes les variables doivent être déclarées.
On privilégie const à let si la variable est une constante.
Toutes les variables qui sont déclarées doivent forcément être utilisées à un moment dans le programme.

Exemple :

const useless = 'Null' // ✗ non
const useful = 'Hi' // ✓ ok
console.log(useful)

Méthode : Espacements

Les mots clés, les opérateurs, les accolades, les virgules, etc., doivent être espacés.

Exemple :

// ✗ mauvaises pratiques
const color1='blanc'
let flower1='jasmin'
if(color1==='rose'){flower1='rose'}
console.log(flower1)
// ✓ bonnes pratiques
const color2 = 'rouge'
let flower2 = 'tulipe'
if (color2 === 'jaune') {
  flower2 = 'mimosa'
}
console.log(flower2)

Méthode : Casse

La convention camelCase est privilégiée en JavaScript.

Méthode : Anglais

Le nom des variables, des fonctions, etc., doit être en anglais.
Les commentaires doivent de préférence être en anglais (sauf si tous les développeurs préfèrent une autre langue).
Les valeurs (chaînes de caractères) sont bien entendu dans la langue requise par le programme.

À retenir

Il est important de se référer aux bonnes pratiques qui permettent de produire un code propre et lisible par tous.

Appliquer la notion

On dispose du programme suivant :

const year =2020
const days_in_week =7
const hours_in_day =24
console.log('Une semaine contient ' +days_in_week+ " jours")
console.log('Un jour contient ' +hours_in_day+ " heures")

Corriger le code pour qu'il suive les bonnes pratiques du JavaScript.

Il faut corriger la casse des variables, l'espacement entre les opérateurs, les variables inutilisées et les délimiteurs de chaînes de caractères.

const daysInWeek = 7
const hoursInDay = 24
console.log('Une semaine contient ' + daysInWeek + ' jours')
console.log('Un jour contient ' + hoursInDay + ' heures')

Quiz

Quiz - Culture

JavaScript est un langage :

Notamment utilisé pour le Web

Uniquement utilisé pour le Web

Compilé

Interprété

ECMAScript est :

Une variante du JavaScript

Une convention de l'usage de JavaScript

Une spécification qui standardise JavaScript

L'ancêtre de JavaScript

Qu'est-ce qu'un IDE ?

Un ensemble d'outils pour le développement

Une plate-forme en ligne pour partager du code

Un logiciel dédié au développement JavaScript

Quel nom est écrit en pascal case ?

nomFamille

Nom_Famille

nom_famille

nom-famille

NomFamille

Quiz - Méthode

Quelles affirmations sont vraies ?

Une expression est une instruction en JavaScript.

La valeur d'une constante ne peut pas être modifiée dans le programme.

ECMAScript est un langage qui descend du JavaScript.

Le point-virgule à la fin des instructions est issu d'une ancienne syntaxe et il n'est plus utile de le mettre.

Il peut être utile de commenter son code pour :

Expliquer le rôle de chaque variable

Expliciter la logique globale du programme

Désactiver temporairement des instructions

Expliquer une instruction complexe

Quelles règles sont des bonnes pratiques ?

Ne jamais utiliser de majuscule dans le nom d'une variable

Utiliser une casse différente pour les fonctions et pour les variables

Déclarer les variables sur une même ligne

Insérer un espace après une virgule

Utiliser en priorité des apostrophes plutôt que des guillemets

Quiz - Code

Quel(s) code(s) produi(sen)t une erreur ?

variable age = 17 ;

console.log(age) ;

const AGE = "17" ;

console.log(AGE) ;

const AGE = 17 ;

console.log(AGE) ;

age = 17 ;

console.log(age) ;

Quel(s) code(s) respecte(nt) les bonnes pratiques syntaxiques du JavaScript ?

const nomFamille="Charlie";

const nom_deFamille = 'Charlie';

const nomFamille = 'Charlie'

let nom = 'Charlie';

Quelle fonction permet d'afficher des informations dans la console JavaScript ?

screen.print()

console.print()

console.log()

window.log()

Quiz - Culture

JavaScript est un langage :

Notamment utilisé pour le Web

Uniquement utilisé pour le Web

Compilé

Interprété

ECMAScript est :

Une variante du JavaScript

Une convention de l'usage de JavaScript

Une spécification qui standardise JavaScript

L'ancêtre de JavaScript

Qu'est-ce qu'un IDE ?

Un ensemble d'outils pour le développement

Une plate-forme en ligne pour partager du code

Un logiciel dédié au développement JavaScript

Quel nom est écrit en pascal case ?

nomFamille

Nom_Famille

nom_famille

nom-famille

NomFamille

Quiz - Méthode

Quelles affirmations sont vraies ?

Une expression est une instruction en JavaScript.

La valeur d'une constante ne peut pas être modifiée dans le programme.

ECMAScript est un langage qui descend du JavaScript.

Le point-virgule à la fin des instructions est issu d'une ancienne syntaxe et il n'est plus utile de le mettre.

Il peut être utile de commenter son code pour :

Expliquer le rôle de chaque variable

Expliciter la logique globale du programme

Désactiver temporairement des instructions

Expliquer une instruction complexe

Expliquer le rôle de chaque variable

Il est préférable que le nom de la variable explique directement son rôle.

Expliciter la logique globale du programme

Il est courant de rencontre un bloc de commentaires détaillant le rôle global d'un programme.

Désactiver temporairement des instructions

Expliquer une instruction complexe

Quelles règles sont des bonnes pratiques ?

Ne jamais utiliser de majuscule dans le nom d'une variable

Utiliser une casse différente pour les fonctions et pour les variables

Déclarer les variables sur une même ligne

Insérer un espace après une virgule

Utiliser en priorité des apostrophes plutôt que des guillemets

Quiz - Code

Quel(s) code(s) produi(sen)t une erreur ?

variable age = 17 ;

console.log(age) ;

const AGE = "17" ;

console.log(AGE) ;

const AGE = 17 ;

console.log(AGE) ;

age = 17 ;

console.log(age) ;

variable age = 17 ;

console.log(age) ;

Le bon mot clé pour déclarer une variable est var.

const AGE = "17" ;

console.log(AGE) ;

const AGE = 17 ;

console.log(AGE) ;

age = 17 ;

console.log(age) ;

Même si c'est une bonne pratique, age n'a pas besoin d'être créé avec let ou const pour lui donner une valeur.

Quel(s) code(s) respecte(nt) les bonnes pratiques syntaxiques du JavaScript ?

const nomFamille="Charlie";

const nom_deFamille = 'Charlie';

const nomFamille = 'Charlie'

let nom = 'Charlie';

const nomFamille="Charlie";

Le symbole = devrait être espacé et la chaîne de caractères être entre apostrophes.

const nom_deFamille = 'Charlie';

La variable ne respecte pas la convention camelCase.

const nomFamille = 'Charlie'

let nom = 'Charlie';

Les points-virgules ne sont plus utilisés à la fin des instructions.

Quelle fonction permet d'afficher des informations dans la console JavaScript ?

screen.print()

console.print()

console.log()

window.log()

Défi

On dispose d'un programme permettant de décider, pour une personne donnée, si elle peut faire une attraction à sensations fortes. Pour cela, il effectue une suite de tests et affiche un résultat en fonction des conditions remplies.

La structure if/else permet de tester si une expression est vraie ou fausse et d'exécuter des blocs de code différents en fonction de ce résultat.

const age=17
const taille = 152
let prixbillet
let entree_autorise = false
if (age>8) {
  if (taille > 150) {
  entree_autorise = true
  prixbillet = 40 + age
  } else {
    console.log('Vous êtes trop petit.')
  }
} else {
console.log('Vous êtes trop jeune.')
}
if (entree_autorise) {
if (age<18) {
  prixbillet = prixbillet-10
}
  console.log('Vous pouvez avoir une place pour ' + prixbillet + '$')
}

Tester le code. Quel est le résultat obtenu ?

Vous pouvez avoir une place pour 47 $.

Ajuster la casse du code pour respecter les bonnes pratiques JavaScript.

La convention de casse utilisée en JavaScript est le camelCase.

const age=17
const taille = 152
let prixBillet
let entreeAutorise = false
if (age>8) {
  if (taille > 150) {
  entreeAutorise = true
  prixBillet = 40 + age
  } else {
    console.log('Vous êtes trop petit.')
  }
} else {
console.log('Vous êtes trop jeune.')
}
if (entreeAutorise) {
if (age<18) {
  prixBillet = prixBillet-10
}
  console.log('Vous pouvez avoir une place pour ' + prixBillet + '$')
}

Corriger l'indentation et les espaces dans le code pour respecter les bonnes pratiques JavaScript.

const age = 17
const taille = 152
let prixBillet
let entreeAutorise = false
if (age > 8) {
  if (taille > 150) {
    entreeAutorise = true
    prixBillet = 40 + age
  } else {
    console.log('Vous êtes trop petit.')
  }
} else {
  console.log('Vous êtes trop jeune.')
}
if (entreeAutorise) {
  if (age < 18) {
    prixBillet = prixBillet - 10
  }
  console.log('Vous pouvez avoir une place pour ' + prixBillet + '$')
}

Placer les commentaires, là où ils sont pertinents, en remplissant les parties manquantes si besoin.

// Déclaration des constantes
// Déclaration des ...
// Tests des critères d'admission selon l'age et la taille
// Application de la réduction pour les moins de ... ans

// Déclaration des constantes
const age = 17
const taille = 152
// Déclaration des variables
let prixBillet
let entreeAutorise = false
// Tests des critères d'admission selon l'age et la taille
if (age > 8) {
  if (taille > 150) {
    entreeAutorise = true
    prixBillet = 40 + age
  } else {
    console.log('Vous êtes trop petit.')
  }
} else {
  console.log('Vous êtes trop jeune.')
}
if (entreeAutorise) {
  // Application de la réduction pour les moins de 18 ans
  if (age < 18) {
    prixBillet = prixBillet - 10
  }
  console.log('Vous pouvez avoir une place pour ' + prixBillet + '$')
}

Traduire le nom des variables en anglais.

En faisant un clic-droit sur le nom d'une variable dans Repl.it, il est possible de modifier d'un coup toutes les occurrences de cette variable (Change All Occurrences).

// Déclaration des constantes
const age = 17
const size = 152
// Déclaration des variables
let ticketPrice
let entranceAllowed = false
// Tests des critères d'admission selon l'age et la size
if (age > 8) {
  if (size > 150) {
    entranceAllowed = true
    ticketPrice = 40 + age
  } else {
    console.log('Vous êtes trop petit.')
  }
} else {
  console.log('Vous êtes trop jeune.')
}
if (entranceAllowed) {
  // Application de la réduction pour les moins de 18 ans
  if (age < 18) {
    ticketPrice = ticketPrice - 10
  }
  console.log('Vous pouvez avoir une place pour ' + ticketPrice + '$')
}

Conclusion

JavaScript est un langage simple et polyvalent. Historiquement très utilisé dans le Web, il permet de dynamiser les sites depuis des années. Plus récemment, ses caractéristiques ont favorisé son adoption importante pour tous types d'usages et sa popularité pour l'apprentissage de la programmation. Comme tous les langages, il nécessite qu'une syntaxe soit respectée, et il est recommandé de suivre différentes bonnes pratiques de programmation.