Skip to content
Synthèse JavaScript OpenClassrooms
APPRENDRE A PROGRAMMER AVEC JAVASCRIPT
🕒 durée annoncée du cours : 15h
C’est quoi JavaScript
JavaScript (souvent abrégé en « JS ») est un langage de script léger, orienté objet, principalement connu comme le langage de script des pages web.
C'est un langage à objets utilisant le concept de prototype, disposant d'un typage faible et dynamique qui permet de programmer suivant plusieurs paradigmes de programmation : fonctionnelle, impérative et orientée objet.
Constantes et variables
Comme beaucoup de langages, JavaScript utilise des constantes et des variables permettant de stocker des données. Une constante est immuable tandis que la variable peut changer.
✏️ Par convention, les variables et les constantes sont déclarée avec une notation en camelCase minuscule.
🚧 On considère que la bonne pratique est désormais de privilégier let pour déclarer une variable. Pour en savoir plus, .
const myConst = "toujours pareil";
var myVar = "pas toujours pareil"; // déclare une variable myVar globale ou locale à une fonction, pratique dépréciée
let myVarLet = "pas toujours pareil"; // déclare une variable myVarLet limitée à un bloc (block scope)
Typage faible
En JavaScript, le typage des données est qualifié de faible, ce qui signifie qu’il est possible d’initialiser une variable en tant que nombre puis de lui réattribuer une valeur comme string par ex.
let myVar = « hello »;
let myVar = 2;
console.log(myVar); // output 2
Typage dynamique
Le typage est également qualifié de dynamique : il est possible de changer les valeurs des variables même si celles-ci ont un type différent.
a = 42;
a = 'fezfe';
Types de valeurs primitives
Les données peuvent être de différents types. On distingue 6 types de valeurs « primitives » :
var myVar = 4; // a number
var myVar = "hello world"; // a string
let myVar = true; // a boolean
Types de valeurs complexes
Il existe 2 types de valeurs complexes (ou “composées”) en JavaScript : les objets et les tableaux.
Les objets
Les objets sont des types complexes écrits en JSON. Ils sont composé d’une série d’arguments contenant des données.
/*
On créé un objet myBook dont les arguments sont title, author, numberOfPages et isAvailable
*/
let myBook = {
title: 'Supernovas',
author: 'Caroline Desvaux',
numberOfPages: 260,
isAvailable: true
};
Notation pointée
La notation pointée permet de récupérer la donnée d’un argument spécifique.
let bookTitle = myBook.title; // output "Supernovas"
Le JSON
JSON est un format de données textuelles dérivé de la notation des objets du langage JavaScript.
{
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
}
Spread syntax (...)
La syntaxe suivante peut être utilisée pour manipuler des objets.
var obj = {key1: "value1", key2: "value2"};
var pair = {key3: "value3"};
obj = {...obj, ...pair}; // key1: "value1", key2: "value2", key3: "value3"
Les tableaux
Les tableaux (array en anglais) permettent de contenir une série de valeurs.
let myPeoples =
[
"Sarah Kate",
"Audrey Simon",
"Will Alexander"
]
Pour créer un tableau, on utilise la notation entre crochet.
let guests = [];
let guests = ["Sarah Kate", "Audrey Simon", "Will Alexander"];
Exemple
/*
Ici, on insère un objet artistProfile dans un tableau allProfiles, puis on modifie la propriété “available” de l’objet artistProfile avant d’imprimer dans la console le contenu du tableau contenant l’objet.
*/
let artistProfile = {
name: "Tao Perkington",
age: 27,
available: true,
};
let allProfiles = [artistProfile];
artistProfile.available = false; // modification de l'objet
console.log(allProfiles) // print { nom: "Tao Perkington", âge: 27, disponible: false }
Accéder aux éléments d’un tableaux
On peut accéder aux éléments d’un tableau en utilisant leur indice (nombre, attention commence à 0 et pas à 1).
let thirdGuest = guests[2];
// output = "Will Alexander"
Quelques méthodes utiles pour manipuler les tableaux
Compter les éléments d'un tableau avec la propriété length.
let guests = ["Will Alexander", "Sarah Kate", "Audrey Simon"];
let howManyGuests = guests.length; // 3
Ajouter un élément au tableau avec les propriétés push et unshit.
guests.push("Tao Perkington"); // ajouté à la fin du tableau guest
guests.unshift("Tao Perkington"); // ajouté au début du tableau guest
Supprimer le dernier élément du tableau avec la propriété pop.
guests.pop();
Concaténation
🚧 La pratique de la concaténation est dépréciée, privilégiez l’utilisation de (voir ).
La concaténation permet de concaténer des valeurs.
let firstName = "Will";
let lastName = 'Alexander';
let printCompleteName = "Le nom complet est " + firstName + " " + lastName; // output: Le nom complet est Will Alexander
String interpolation
let firstName = "Will";
let lastName = 'Alexander';
const {firstName, lastName} = name;
let wholeName = `Le nom complet est ${firstName} + ${lastName}`; // output: Le nom complet est Will Alexander
Les fonctions
Une fonction est un bloc de code qui peut être appelé plusieurs fois
La première règle des fonctions est qu'elles devraient être petites.
La deuxième règle des fonctions est qu'elles devraient être encore plus petites.
✏️ Par convention, les fonction sont déclarée avec une notation en camelCase commençant par une minuscule
function nomDeLaFunction(parametre1delafonction, parametre2delafonction) {
console.log('Première valeur:' + parametre1delafonction);
console.log('Deuxième valeur:' + parametre2delafonction);
}
Les arguments de la fonction
On appelle la fonction pour l'exécuter en remplaçant les paramètres par des "arguments".
myFunction(12, 'Bonjour'); // 12 et bonjour sont les 2 arguments de cette fonction
Les classes
Une classe JavaScript est un type de fonction. Les classes sont déclarées avec le mot-clé class. La syntaxe d’expression de fonction est utilisée pour initialiser une fonction et la syntaxe d’expression de classe pour initialiser une classe. Les classes sont des modèles pour les objets.
✏️ Par convention les classes sont nommées en CamelCase majuscule
class Book {
constructor(numberOfPage, title){
this.numberOfPage = numberOfPage;
this.title = title;
}
printNumberOfPage() {
console.log('Le livre' + this.title + 'contient' + this.numberOfPage);}
}
Le mot clé “new” est utilisé pour ajouter une nouvelle instance de la classe.
let Book = new Book(200, "Le Livre De La Jungle");}
Le constructeur d’une classe
Le constructeur d’une classe est la fonction qui est appelée pour créer et initialiser un objet lorsqu'on utilise le mot clé “class”.
class Rectangle {
constructor(hauteur, largeur) {
this.hauteur = hauteur;
this.largeur = largeur;
}
}
L’instance de la classe
Une instance est simplement un des objets de la classe. Une instance de classe est une fonction faisant partie d'une classe et qui agit sur une instance de cette classe. Pour attribuer des éléments à une instance, on utilise la notation pointée avec le mot clé “this”.
class Book {
constructor(title, author, pages) {
this.title = title;
this.author = author;
this.pages = pages;
}
}
Les méthodes
Les méthodes sont des fonctions qui sont appelées sur une instance de la classe.
class BankAccount {
constructor(owner, balance) {
this.owner = owner;
this.balance = balance;
}
showBalance() {
console.log("Solde: " + this.balance + " EUR"); // showBalance est une méthode de la classe BankAccount
}
}
Les méthodes statiques des classes
Il existe des méthodes dites "statiques" qui n'ont pas besoin d'être initialiser avec le mot clé “new”. Ce type d'instance permet de créer des méthodes dites "utilitaire" (helpers) vouées à être souvent réutilisées. Elles utilisent le mot clé “static” et n'ont pas besoin d'un constructeur.
class BePolite {
static sayHello() {
console.log("Hello!");
}
static sayHelloTo(name) {
console.log("Hello " + name + "!");
}
}
Les opérateurs de comparaison
Symbole
Signification
<
inférieur à
<=
inférieur ou égal à
==
égal à (valeur)
===
strictement égal à (valeur et type)
>=
supérieur ou égal à
>
supérieur à
!=
différent de (valeur)
!==
est strictement différent de (valeur et type)
There are no rows in this table
Les opérateurs logiques
Symbole
Signification
||
“ou” logique pour vérifier si au moins une condition est vraie
&&
“et” logique pour vérifier si deux conditions sont toutes les deux vraies
!
“non” logique pour vérifier si une condition n'est pas vraie
There are no rows in this table
Exemple
if (localStorage.theme === "theme-light" || localStorage.theme === undefined || localStorage.theme === null ) {
localStorage.theme = "theme-light";
html.dataset.theme = localStorage.theme;
lightButton.classList.add("-hidden");
}
Les instructions conditionnelles (if / else)
Les instructions de conditionnelles permettent d’exécuter ou non des portions du code en vérifiant si une ou plusieurs conditions sont vraies ou fausses.
let exampleVar = 8;
if (exampleVar < 10) {
console.log("exampleVar est inférieur à 10");
}
else {
console.log("hello world");
} // dans ce cas ci l'ouput de la console sera "exampleVar est inférieur à 10"
Instructions en cascade (switch / break / case)
Les instructions en cascade permettent la comparaison à une liste de valeur attendues.
const expr = 'Papayas';
switch (expr) {
case 'Oranges':
console.log('Oranges are $0.59 a pound.');
break;
case 'Mangoes':
case 'Papayas':
console.log('Mangoes and papayas are $2.79 a pound.');
// expected output: "Mangoes and papayas are $2.79 a pound."
break;
default:
console.log(`Sorry, we are out of ${expr}.`);
}
Les boucles
For
const numberOfPassengers = 10;
for (let i = 0; i < numberOfPassengers; i++) {
console.log("Passager embarqué !");
}
For in
const passengers = [
"Will Alexander",
"Sarah Kate'",
"Audrey Simon",
"Tao Perkington"
]
for (let i in passengers) {
console.log("Embarquement du passager " + passengers[i]);
}
For of
const passengers = [
"Will Alexander",
"Sarah Kate",
"Audrey Simon",
"Tao Perkington"
]
for (let passenger of passengers) {
console.log("Embarquement du passager " + passenger);
}
While
let seatsLeft = 10;
let passengersStillToBoard = 8;
let passengersBoarded = 0;
while (seatsLeft > 0 && passengersStillToBoard > 0) {
passengersBoarded++; // un passager embarque
passengersStillToBoard--; // donc il y a un passager de moins à embarquer
seatsLeft--; // et un siège de moins
}
console.log(passengersBoarded); // imprime 8, car il y a 8 passagers pour 10 sièges
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.