Cours de Javascript (A compléter )

Avatar de l’utilisateur
sandokan
Messages : 221
Inscription : mer. juin 17, 2020 10:09 pm
Localisation : Nîmes
Contact :

Cours de Javascript (A compléter )

Message par sandokan »

VARIABLE




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; 
Donnée placée dans une variable: valeur.


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;
OPERATEUR ARITHMETIQUE

On peut additionner, soustraire, multiplier ou diviser des variables:


exemple:

Code : Tout sélectionner

let cookiesInJar = 10;
let cookiesRemoved = 2;
let cookiesLeftInJar = cookiesInJar - cookiesRemoved;
Pour ajouter ou soustraire un nombre d'une variable, il faut utiliser les opérateurs
+= 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
MUTABILITÉ D'UNE VARIABLE


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


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
};
Chaque clé est une chaîne (title, author, numberOfPages...),
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
MANIPULEZ LES CLASSES




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 { }
et dedans on met le constructor pour préciser le titre l'auteur et le nombre de pages

Code : Tout sélectionner

class Book {
    [b]constructor(title, author, pages)[/b] {
    }
}
Pour attribuer le titre, l'auteur et le nombre de pages reçus à cette instance, utilisez le mot clé
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;
    }
}
Maintenant que la classe est terminée, vous pouvez créer des instances par le mot clé new :

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

}
LES TABLEAUX



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

}
Donc, pour vérifier si un utilisateur est connecté, vous pouvez procéder comme suit :

Code : Tout sélectionner

let UserLoggedIn = true;

if (UserLoggedIn) {

   console.log("Utilisateur connecté!");

} else {

   console.log("Alerte, intrus!");

}
Dans le cas ci-dessus, vous obtiendrez l'impression sur la console de "Utilisateur connecté!" , car le boolean
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

}
Le chaînage d'instructions permet de prévoir différents résultats en fonction des différentes situations.


É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 ») ;


}
On crée des « case » pour chacune des situations dans lesquelles on se trouve. Le premier cas = if les autres else if, le dernier, correspond à else. Le terme de break est obligatoire, pour bloquer le code et sortir du switch. On a pas besoin de break dans default car gère tout les cas en dehors des cas précisés. Après le code à exécuter dans chaque instruction case, ajoutez l'instruction break . Si vous ne le faites pas, JavaScript continuera l'exécution des cas suivants (en cascade) jusqu'à rencontrer une instruction break ou la fin de l'instruction switch . Comme vous pouvez le voir dans l'exemple, vous pouvez aussi ajouter un cas default
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é !");
}
Trois paramètres

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]);

}
FOR .. OF




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);

}
WHILE






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++ ;
}
Une boucle while vérifie si une condition est vraie.
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;

   }

}
Vous pouvez ensuite créer une instance de cette classe appelée newAccount (nouveau compte) :

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");

   }

}
La nouvelle méthode ci-dessus, déclarée par son nom suivi par (), utilise le mot clé this pour accéder à la propriété balance de l'instance, et l'afficher sur la console avec une mise en forme supplémentaire. Ceci signifie que vous pouvez utiliser la notation dot sur l'instance newAccount pour appeler sa méthode showBalance() :

Code : Tout sélectionner

const newAccount = new BankAccount("Will Alexander", 500);


newAccount.showBalance(); // imprime "Solde: 500 EUR" à la console
Vous pouvez aussi ajouter des méthodes capables de modifier les propriétés de l'instance. Dans ce cas, ajoutez les méthodes deposit() (dépôt) et withdraw() (retrait) à la classe, en n'oubliant pas que les deux ont besoin d'un paramètre amount (montant) (parce que vous devez savoir combien déposer ou retirer !) :

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();

        }

    }

}
La méthode deposit() affiche le montant du dépôt sur la console, ajoute le montant au solde de l'instance, puis appelle la méthode showBalance() de l'instance, imprimant ainsi le nouveau solde sur la console.

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 n'avez pas besoin de créer par new une instance de l'objet Math pour utiliser ces méthodes ; il suffit de les appeler sur l'objet Math global.

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
Dernière modification par sandokan le dim. oct. 30, 2022 4:52 pm, modifié 13 fois.
Mon site internet : https://sandokandamaio.com/
Avatar de l’utilisateur
miau
Messages : 5703
Inscription : mer. avr. 08, 2020 5:20 pm

Re: Cours de Javascript (A compléter )

Message par miau »

Merci pour le tuto Sandokan !
Avatar de l’utilisateur
sandokan
Messages : 221
Inscription : mer. juin 17, 2020 10:09 pm
Localisation : Nîmes
Contact :

Re: Cours de Javascript (A compléter )

Message par sandokan »

miau a écrit : sam. oct. 29, 2022 10:37 am Merci pour le tuto Sandokan !
Il n'est pas encore complet. Je le mets à jour régulièrement en fonction de mon avancé dans le cours de javascript. En fait, je fais surtout ça pour moi, pour que j'apprenne.
Mon site internet : https://sandokandamaio.com/
Répondre