contenant qui enregistre et manipule des données, elle a un nom indiquant ce qui se trouve à l'intérieur.
Pour le nom il faut être précis et éviter le camelcase, c'est à dire coller les éléments et marquer une majuscule au début du deuxième mot
et des suivants. On crée une variable en la déclarant avec le mot "let". exemple:
Code : Tout sélectionner
let numberOfCats = 2;
let numberOfDogs = 4;
MODIFIER LA VALEUR D'UNE VARIABLE
On peut modifier la valeur d'une variable en la réaffectant exemple:
Code : Tout sélectionner
let numberOfCats = 3;
numberOfCats = 4;
On peut additionner, soustraire, multiplier ou diviser des variables:
exemple:
Code : Tout sélectionner
let cookiesInJar = 10;
let cookiesRemoved = 2;
let cookiesLeftInJar = cookiesInJar - cookiesRemoved;
+= et -= idem pour la multiplication et la division *= et /=
exemple:
Code : Tout sélectionner
let cookiesInJar = 10;
/* manger deux cookies */
cookiesInJar -= 2; //il reste 8 cookies
/* cuisson d'un nouveau lot de cookies */
cookiesInJar += 12; // il y a maintenant 20 cookies dans la boîte
Les variables peuvent changer au cours du temps. exemple:
On crée un compteur à 0. Et, à chaque fois qu’on clique sur un bouton on augmente la valeur de 1 pour connaître à tout instant le nombre de clics réalisés, depuis le débutde l'exécution du code.
Code : Tout sélectionner
let compteur = 0;
compteur++;
compteur = 10;
LES CONSTANTES
Ce sont des variables qui ne sont pas mutables.
exemple:
Code : Tout sélectionner
const nombrePostParPage = 20;
nombrePostParPage = 30; // Retournera une erreur dans la console car on ne peut plus changer sa valeur
Le type d'une variable ou d'une constante est tout simplement le genre des données qu'elle enregistre. En JavaScript, il y a trois types primitifs principaux :
- Number (nombre) ;
- String (chaîne de caractères) à mettre entre guillemets double ou simple ;
On peut les concaténer grâce au signe + ou les interopler
- Boolean (valeur logique true ou false).
Il exist trois autre types de données primitifs: null ,undefined et symbol
Il y a aussi des typages faibles qui signifie que l'on peut initialiser une variable dansun type et la réaffecter dans une autre
conclusion, utilisez des constantes des que possible.
LES OBJETS
Les objets JavaScript sont écrits en JSON (JavaScript Object Notation).
Ce sont des séries de paires clés-valeurs séparées par des virgules, entre des accolades.
Les objets peuvent être enregistrés dans une variable :
Code : Tout sélectionner
let myBook = {
title: 'The Story of Tau',
author: 'Will Alexander',
numberOfPages: 250,
isAvailable: true
};
et les valeurs associées peuvent avoir tout type de données (nombre, chaîne, etc.).
ACCEDER AUX DONNES D'UN OBJET
grâce à la notation pointé. ex:
Code : Tout sélectionner
let myBook = {
title: "L'Histoire de Tao",
author: "Will Alexander",
numberOfPages: 250,
isAvailable: true
};
let bookTitle = [b]myBook.title[/b]; // "L'Histoire de Tao"
let bookPages = [b]myBook.numberOfPages[/b] // 250
[b]
Il y a aussi la notation bracket (entre accolade)[/b]
Code : Tout sélectionner
let myBook = {
title: "L'Histoire de Tao",
author: "Will Alexander",
numberOfPages: 250,
isAvailable: true
};
let bookTitle = myBook[b]["title"][/b]; // "L'Histoire de Tao"
let bookPages = myBook[b]["numberOfPages"][/b]; // 250
La classe est un modèle pour un objet dans le code. Permet de construire plusieurs objets du même
type appellé instances.
On crée la class puis le constructor qui donnera des éléments de détails sur cette class
exemple:
on crée
Code : Tout sélectionner
class Book { }
Code : Tout sélectionner
class Book {
[b]constructor(title, author, pages)[/b] {
}
}
this et la notation dot.
Code : Tout sélectionner
class Book {
constructor(title, author, pages) {
[b] this.title[/b] = title;
[b]this.author[/b] = author;
[b]this.pages[/b] = pages;
}
}
Code : Tout sélectionner
let myBook = [b]new Book[/b]("L'Histoire de Tao", "Will Alexander", 250);
//Cette ligne crée l'objet suivant :
{
title: "L'Histoire de Tao",
author: "Will Alexander",
pages: 250
}
length : indique le nombre d'élément qu'il contient
exemple:
let guests = ["Will Alexander", "Sarah Kate", "Audrey Simon"];
let howManyGuests = guests.length; // 3
Push: ajoute un élément à la fin du tableau
exemple: guests.push("Tao Perkington"); // ajoute "Tao Perkington" à la fin de notre tableau guests
unshift: ajoute un élément au début du tableau
pop: supprime le dernier élément du tableau
IF/ELSE
En JavaScript, si on utilise des boolean (bouléens, en français) simples pour les instructions if / else , la syntaxe se présente comme suit :
Code : Tout sélectionner
if (myBoolean) {
// réaction à la valeur vraie de myBoolean
} else {
// réaction à la valeur faux de myBoolean
}
Code : Tout sélectionner
let UserLoggedIn = true;
if (UserLoggedIn) {
console.log("Utilisateur connecté!");
} else {
console.log("Alerte, intrus!");
}
userLoggedIn a la valeur true. S'il avait la valeur false, vous obtiendriez à la place "Alerte, intrus!" .
EXPRESSIONS DE COMPARAISON
Les expressions de comparaison vous permettent de comparer deux valeurs par les opérateurs suivants :
< inférieur à ;
<= inférieur ou égal à ;
== égal à ;
>= supérieur ou égal à ;
> supérieur à ;
!= différent de.
Vous pouvez aussi chaîner les instructions if / else pour réagir à des conditions potentielles multiples :
Code : Tout sélectionner
if (numberOfGuests == numberOfSeats) {
// tous les sièges sont occupés
} else if (numberOfGuests < numberOfSeats) {
// autoriser plus d'invités
} else {
// ne pas autoriser de nouveaux invités
}
ÉGALITÉ : == ou ===
Il y a deux façons de vérifier si deux valeurs sont égales en JavaScript : == et ===, aussi appelées égalité simple et égalité stricte :
l'égalité simple vérifie la valeur, mais pas le type. Donc ceci renvoie la valeur true :
5 == "5"
par contre, l'égalité stricte vérifie à la fois la valeur et le type. Donc :
5 === "5"
renvoie false , car on compare un number à une string .
De même, il y a deux opérateurs d'inégalité, != et !== , avec la même distinction.
CONDITIONS MULTIPLES
&& – ET logique – pour vérifier si deux conditions sont toutes les deux vraies ;
|| – OU logique – pour vérifier si au moins une condition est vraie ;
! – NON logique – pour vérifier si une condition n'est pas vraie.
Switch
Remplace if/else, peut générer autant d’issu que l’on souhaite, les issus sont appelés case. Attention, ne peut traité que l’égalité des valeurs et non l’inégalité.
Exemple :
Code : Tout sélectionner
let heure= 10 ;
switch(heure) {
case 8 :
alert (« il est 8 heure ») ;
break ;
case 9:
alert (« il est 9 heure ») ;
break ;
case 10 :
alert (« il est 10 heure ») ;
break ;
case 11 :
alert (« il est 11 heure ») ;
break ;
case 12 :
alert (« il est 12 heure ») ;
break ;
default :
alert ( « Rien à afficher pour cette valeur ») ;
}
qui ne sera exécuté que si la variable que vous vérifiez ne correspond à aucune des valeurs répertoriées.
FOR
crée une boucle tant que la condition n'a pas été rempli. exemple:
Code : Tout sélectionner
const numberOfPassengers = 10;
for (let i = 0; i < numberOfPassengers; i++) {
console.log("Passager embarqué !");
}
1- valeur qui va s’incrémenter , déclarer le i dans le for.
2 – sorti de la boucle.
3- de combien i doit augmenter à chaque tour.
FOR ... IN
La boucle for… in est très comparable à l'exemple de boucle for normale, mais elle est plus facile à lire, et effectue tout le travail d'itération pour vous :
Code : Tout sélectionner
const passengers = [
"Will Alexander",
"Sarah Kate'",
"Audrey Simon",
"Tao Perkington"
]
for (let i in passengers) {
console.log("Embarquement du passager " + passengers[i]);
}
Pour les cas où l'indice précis d'un élément n'est pas nécessaire pendant l'itération, vous pouvez utiliser une boucle for… of :
En reprenant l'exemple précédent et en utilisant à la place une boucle for… of , vous obtenez :
Code : Tout sélectionner
const passengers = [
"Will Alexander",
"Sarah Kate",
"Audrey Simon",
"Tao Perkington"
]
for (let passenger of passengers) {
console.log("Embarquement du passager " + passenger);
}
Exemple, compter les lettres d’une phrase avec la boucle While.
Code : Tout sélectionner
Const = « je suis un padawan ! »
le i = 0 ;
let taille = phrase.lenght ;
while (i < taille)
{
console.log(phrase[i] )
i++ ;
}
Si c'est le cas, la boucle se poursuit ; sinon elle s'arrête.
TROIS TYPES D'ERREUR
Il y a trois types d'erreurs de programmations :
les erreurs de syntaxe – erreurs dans l'utilisation de JavaScript : fautes d'orthographe, crochets manquants, nombre de guillemets incorrect, etc. ;
les erreurs logiques – erreurs dans l'application du déroulement du programme, par exemple erreurs dans les conditions des instructions if ou oubli d'incrémentation de l'indice d'une boucle, pouvant potentiellement conduire à une boucle infinie ;
les erreurs d'exécution – erreurs souvent causées par des ressources externes telles que réseaux, bases de données ou utilisateurs ; elles peuvent être traitées en sachant où elles peuvent survenir, et par des techniques de traitement d'erreur telles que les blocs try / catch .
LES FONCTIONS
Une fonction est un bloc de code auquel on attribue un nom exemple: console.log ()
Les fonctions ont besoin de variables pour effectuer leur travail.
Quand on crée ou déclare une fonction, on défini ses paramètres (liste de variables dont elle a besoin pour effectuer son travail). On lui attribue
des valeurs pour ses paramètres, ce sont les arguments d'appel.
Elle donne un résultat: une valeur retour.
exemple: fonction qui compte le nombre de mots dans une chaîne.
- paramètre= chaine dont on compte les mots
- argument = toute chaîne attribué à la fonction
- valeur = nombre de mots.
METHODE D'INSTANCE DE CLASS
Exemple d'instance de class:
Code : Tout sélectionner
// définition de la class
class Livre {
constructor(livre,auteur,nbrePages){
this.titre= titre;
this.auteur= auteur;
this.nbrePages= nbrePages;
}
//appelle d'un instance de class pour créer un nouvel objet livre
le monLivre= new Livre(
"La Tour Sombre 1 - Le Pistolero",
" Stephen King",
254);
let livre2 = new Livre(
"La Tour Sombre 2 - Les Trois Cartes",
"Stephen King",
498
);
let livre3 = new Livre (
"La Tour Sombre 3- Les Terres Perdues",
"Stephen King",
528
);
console.log(monLivre);
console.log(livre2);
console.log(livre3);
La méthode de la balance:
Prenons l’exemple d’une classe qui représenterait un compte bancaire, et que l’on appellerait du coup BankAccount . On pourrait trouver comme propriétés owner (permettant d’identifier le propriétaire du compte) et balance (permettant de connaître le montant disponible sur le compte). Ainsi, lorsque que l’on crée une instance de BankAccount avec un propriétaire et un montant initial en argument, on pourra exploiter par la suite ces propriétés pour afficher leurs valeurs, les utiliser pour des calculs, les modifier, etc.
Tirez parti des classes avec des méthodes d'instance
Si vous revenez au chapitre sur les classes, nous les avons utilisées pour créer des objets ayant certaines propriétés. Maintenant que vous avez commencé à découvrir les fonctions, vous pouvez ajouter des méthodes d'instance à ces classes, pour augmenter leur puissance et leur utilité.
Une méthode d'instance est une fonction faisant partie d'une classe, et qui agit sur une instance de cette classe. Reprenons notre exemple de classe BankAccount (compte bancaire) :
Code : Tout sélectionner
class BankAccount {
constructor(owner, balance) {
this.owner = owner;
this.balance = balance;
}
}
const newAccount = new BankAccount("Will Alexander", 500);
N'oubliez pas qu'un objet (une instance d'une classe est un objet) est un type par référence, donc vous pouvez toujours apporter des modifications à l'instance de newAccount – la partie constante désigne une référence à cette instance.
Telle quelle, l'instance n'est pas très utile. Vous pourriez afficher son solde à la console par newAccount.balance , mais si on pensait plutôt à ajouter une mise en forme ? Vous pouvez pour cela ajouter une méthode à la classe !
Code : Tout sélectionner
class BankAccount {
constructor(owner, balance) {
this.owner = owner;
this.balance = balance;
}
showBalance() {
console.log("Solde: " + this.balance + " EUR");
}
}
Code : Tout sélectionner
const newAccount = new BankAccount("Will Alexander", 500);
newAccount.showBalance(); // imprime "Solde: 500 EUR" à la console
Code : Tout sélectionner
class BankAccount {
constructor(owner, balance) {
this.owner = owner;
this.balance = balance;
}
showBalance() {
console.log("Solde: " + this.balance + " EUR");
}
deposit(amount) {
console.log("Dépôt de " + amount + " EUR");
this.balance += amount;
this.showBalance();
}
withdraw(amount) {
if (amount > this.balance) {
console.log("Retrait refusé !");
} else {
console.log("Retrait de " + amount + " EUR");
this.balance -= amount;
this.showBalance();
}
}
}
Dans le corps d'une classe, le mot clé this fait référence à l'instance créée de la classe. Dans cet exemple, il fait référence à newAccount .
La méthode withdraw() vérifie si le montant demandé est supérieur au solde actuel. Si c'est le cas, il refuse le retrait ; sinon, il l'autorise, en soustrayant le montant du solde et en affichant le nouveau solde sur la console.
METHODE STATIQUE
Il existe un type spécial de méthode pouvant être ajouté à une classe : statique. Elle est différente des méthodes d'instance parce qu'elle n'est pas liée à une instance particulière d'une classe, mais à la classe elle-même. Par exemple, en JavaScript, l'objet Math contient beaucoup de méthodes utiles :
Code : Tout sélectionner
const numAleatoire = Math.random(); // crée un nombre aléatoire sur l'intervalle [0, 1]
const arrondie = Math.floor(495.966); // arrondit vers le bas à l'entier le plus proche, renvoie 495
Vous pouvez créer vos propres méthodes statiques par le mot clé static !
Code : Tout sélectionner
class BePolite {
static sayHello() {
console.log("Hello!");
}
static sayHelloTo(name) {
console.log("Hello " + name + "!");
}
static add(firstNumber, secondNumber) {
return firstNumber + secondNumber;
}
}
BePolite.sayHello(); // imprime "Hello!""
BePolite.sayHelloTo("Will"); // imprime "Hello Will!""
const sum = BePolite.add(2, 3); // sum = 5