Synthèse - JavaScript OpenClassRooms

Explore

Synthèse JavaScript OpenClassrooms

APPRENDRE A PROGRAMMER AVEC JAVASCRIPT

🕒 durée annoncée du cours : 15h

⁠

Apprenez à programmer avec JavaScript Maîtrisez les bases de la programmation JavaScript et sa logique de programmation en réalisant un site web dynamique. openclassrooms.com⁠

⁠

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.

⁠
Mozilla MDN⁠
⁠

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,

cliquez ici⁠

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 » :

3 types “standard” :

Numbers ;

var myVar = 4; // a number

String ;

var myVar = "hello world"; // a string

Boolean.

let myVar = true; // a boolean

3 types supplémentaires

Null ;

Undefined ;

Symbol.

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

String interpolation⁠

(voir

https://youtu.be/Mus_vwhTCq0?t=252⁠

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

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

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

Les types d’erreurs de développement

Les erreurs de syntaxe ;

Les erreurs de logique ;

Les erreurs d’exécution.

Try / catch et la gestion des erreurs

try {

// code susceptible à l'erreur ici

} catch (error) {

// réaction aux erreurs ici

}

Les types de tests

💡Un cours OpenClassrooms dédié aux tests pour JavaScript existe. Pour en savoir plus,

cliquez ici⁠

Il est utile de régulièrement tester la bonne exécution du code source. On distingue 3 types de tests.

Test unitaire

Un test unitaire vérifie le comportement d'une unité de logiciel dans le système. Il vérifie si un petit morceau isolé de la base de code appelé "unité" se comporte comme le développeur l'a prévu.

Test d’intégration

Les tests d’intégration ont une portée (ou scope, en anglais) un peu plus grande que les tests unitaire. Ils testent l’ensemble d’une fonctionnalité.

Test fonctionnels

Les tests fonctionnels (ou end-to-end) vérifient l’intégralité d’une application, du début, par exemple l’arrivée sur la page d’accueil et la phase de connexion, jusqu’à la fin.

Fonctions récursives

💡Un cours OpenClassrooms dédié aux fonctions récursives existe. Pour en savoir plus,

cliquez ici⁠

Une fonction récursive est fonction qui s'appelle elle-même.

const binarySearch = (array, thingToFind, start, end) => {

let mid = Math.floor((start + end) / 2);

if (array[mid] === thingToFind) {

return true;

}

if (thingToFind < array[mid]) {

// il faut rechercher dans la première moitié

return binarySearch(array, thingToFind, start, mid - 1); // on utilise (mid - 1) car on sait que l'on n'a pas besoin de l'élément mid, il a déjà été vérifié !

} else {

// il faut rechercher dans la deuxième moitié

return binarySearch(array, thingToFind, mid + 1, end);

}

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.