JavaScript

Introduction :

Avons-nous même besoin d'introduire JavaScript ? C’est l’un des langages de programmation les plus populaires au monde !

Avez-vous déjà visité un site Web qui vous a fait penser… "Hé, ce site Web est vraiment cool et interactif» ? Eh bien, JavaScript était probablement en train de le faire.

C'est donc juste utile pour les sites Web, n'est-ce pas ? Faux ! Traitez les données, les applications mobiles et de bureau, les jeux, le monde est votre huître avec JavaScript.

 

            

Variables :

Les variables sont des conteneurs pour stocker les valeurs de données. La valeur d'une variable peut changer tout au long du programme.

Déclarer une variable est aussi simple que d'utiliser le mot-clé var. Ce qui ressemblerait à ceci :

        Dans cet exemple, nous avons attribué une valeur de 10 à la variable x.

Nous avons utilisé le mot assigné délibérément ici, car en JavaScript, le signe égal (=) est en fait appelé l'opérateur "affectation", plutôt que l'opérateur "égal à".

Ce qui signifie qu'en JavaScript, x = y attribuera la valeur de y à la variable x.

     

Utilisation des variables :

Que diriez-vous d'attribuer une valeur à une variable et de la publier dans le navigateur. Nous avons ceci !

Mais à quoi servent les variables de toute façon ? Eh bien, imaginez que votre programme comporte 1000 lignes de code qui incluent la variable x. Avec les variables, vous pouvez modifier la valeur des variables et les utiliser plusieurs fois dans votre code :

 

Nommer les variables :

Il est très important de se rappeler que les noms de variables JavaScript sont sensibles à la casse.

     Erreur car x = 100 mais X est indéfini

Commentaires :

Nous connaissons donc les instructions, ce sont les instructions de notre programme qui sont «exécutées» lorsque le programme s'exécute.

Mais ! Toutes les instructions JavaScript ne sont pas "exécutées".

Tout code après une double barre oblique //, ou entre / * et * /, est traité comme un commentaire, et sera ignoré et non exécuté.

Pour écrire un commentaire sur une seule ligne, nous utilisons des doubles barres obliques. Comme ça :

Si nous voulons créer un commentaire multi-lignes, nous l'écrivons entre /*et*/ 

Comme ça :

Types de données :

Le terme type de données fait référence aux types de valeurs avec lesquels un programme peut travailler. Le ciel est la limite avec les variables JavaScript, qui peuvent contenir un tas de types de données différents - nombres, chaînes, tableaux, vous le nommez.

Les nombres peuvent être écrits avec ou sans décimales. Comme ça :

Chaines de caractères (Strings) :

En JavaScript, nous pouvons utiliser des chaînes pour stocker et manipuler du texte.

Une chaîne peut être n'importe quel texte entouré de guillemets. Guillemets simples ou doubles, peu importe, tant que vous êtes cohérent avec eux. Comme ça :

Et si nous voulons utiliser des guillemets dans une chaîne ? Aucun problème ! Vous pouvez utiliser des guillemets dans une chaîne, tant qu'ils ne correspondent pas aux guillemets entourant la chaîne elle-même. Comme cela :

Backslashes :

Code	Outputs
\’	Single quote
\ ‘’	Double quote
\\	Backslash
\n	New line
\r	Carriage return
\t	Tab
\b	Backspace
\f	Form feed

 

Booléens / Booléennes (true/false) :

Pas seulement amusant à dire, les booléens en JavaScript remplissent une fonction utile en vous laissant avoir l'une des deux valeurs, vraie ou fausse.

Ainsi, lorsque vous avez besoin d'un type de données qui ne peut avoir qu'une des deux valeurs possibles, comme Oui / Non, on / off ou true / false, ne cherchez pas plus loin que Mr Boolean. Prenons un exemple :

Les Opérateurs arithmétiques :

Le nom est peut-être un peu un cadeau, mais les opérateurs arithmétiques exécutent assez bien des fonctions arithmétiques sur les nombres (à la fois littéraux et variables).

Operateur	Description	Exemple
+	Addition	5 + 5 = 10
-	Soustraction	20 – 18 = 2
*	Multiplication	5 * 4 = 20
/	Division	15 / 3 = 5
%	Module	56 % 3 =2
++	Incrémentation	Var a =10 ; a++ ; a =11
--	Décrémentation	Var a =10 ; a-- ; a =9

Incrémentation ++ : L'opérateur d'incrémentation augmente la valeur numérique de son opérande de 1. Lorsqu'il est placé avant l'opérande, il renvoie la valeur incrémentée. Lorsqu'il est placé après, il renvoie la valeur d'origine, puis incrémente l'opérande.

Décrémentation -- : L'opérateur de décrémentation diminue la valeur numérique de son opérande de 1. Lorsqu'il est placé avant l'opérande, il renvoie la valeur décrémentée. Lorsqu'il est placé après l'opérande, il renvoie la valeur d'origine, puis décrémente l'opérande.

Explication :

Operateur	Description	Exemple	Résultat
Var++	Post incrément	Var a = 0, b=10 Var a = b++ ;	a = 10 et b = 11
++Var	Pré incrément	Var a = 0, b=10 Var a = ++b ;	a = 11 et b = 11
Var --	Post Décrément	Var a = 0, b=10 Var a = b-- ;	a = 10 et b = 9
--Var	Pré Décrément	Var a = 0, b=10 Var a = --b ;	A = 9 et b = 9

Les Opérateurs d’affectation :

  On Utilise ces opérateurs pour affecter des valeurs aux des variables JavaScript.

Opérateur	Exemple	Est équivalent à
=	x= y	x = y
+=	x+=y	x = x +y
-=	x-=y	x = x- y
*=	x*=y	x = x * y
/=	x/=y	x = x / y
%=	x%=y	x = x %y

Les Opérateurs de comparaison :

Nous pouvons utiliser des opérateurs de comparaison dans les instructions logiques pour savoir si les variables ou les valeurs sont différentes.

Opérateur	Description	Exemple
==	Egal à	5 == 10 Faux
===	Identique (même type et valeur)	5===10 Faux
!=	Pas Egal à	5 !=10 Vrai
!==	Pas Identique	10 !== ‘10’ Vrai
>	Plus grand que	10 > 5 Vrai
<	Moins que	10 < 8 Faux
>=	Grand que ou égal	10 >= 5 Vrai
<=	Moins que ou égal	10 <= 5 Faux

Les Opérateurs de logique :

Les opérateurs logiques, également appelés opérateurs booléens, évaluent une expression et renvoient vrai ou faux.

Opérateur	Description
&&	renvoie true si les deux opérandes sont vrais
!!	renvoie vrai si l'un des opérandes est vrai
!	Renvoi true,si l’opérande est faux et vice versa

Conditionnel et boucles :

                    If Statement :

Souvent, lorsque nous écrivons du code, nous voulons effectuer différentes actions en fonction de différentes conditions.

Et c'est là qu'interviennent les déclarations conditionnelles.

Il y a un tas de conditions différentes, à couvrir, mais nous commençons par l'une des plus utiles : "if"

Nous utilisons "if" pour spécifier un bloc de code que nous voulons exécuter si une condition spécifiée est vraie.

Exemple :

                        Résultat: 

else Statement:

 On utilise else statment lorsque on a plusieurs block de code a exécuté.

Exemple:

Résultat:

                    Switch:

Imaginons que vous devez tester plusieurs conditions, Dans ces cas, écrire des instructions if else pour chaque condition n'est peut-être pas la meilleure solution.

Au lieu de cela, nous pouvons utiliser l'instruction switch pour effectuer différentes actions en fonction de différentes conditions.

Exemple:

    

                    Résultat:

   

                   For

Les boucles peuvent exécuter un bloc de code plusieurs fois. Ils sont pratiques lorsque vous souhaitez exécuter le même code à plusieurs reprises, en ajoutant une valeur différente à chaque fois.

JavaScript a trois types de boucles : for, while et do while.

                                Statement 1 è est exécuté avant le début de la boucle (le bloc de code).

    Statement 2 èdéfinit la condition d'exécution de la boucle (le bloc de code).

Statement 3 èest exécuté à chaque fois que la boucle (le bloc de code) a été exécutée.

Exemple:

Les Fonctions :

 Une fonction JavaScript est un bloc de code conçu pour effectuer une tâche particulière. Les principaux avantages de l'utilisation des fonctions :

Réutilisation du code : définissez le code une fois et utilisez-le plusieurs fois.

Utilisez le même code plusieurs fois avec des arguments différents, pour produire des résultats différents.

Comment définir une fonction JavaScript

Pour définir une fonction JavaScript, utilisez le mot-clé function, suivi d'un nom, suivi d'un jeu de parenthèses ().

Comment appeler une fonction

Pour exécuter la fonction, vous devez l'appeler. Pour appeler une fonction, commencez par le nom de la fonction, puis suivez-la avec les arguments entre parenthèses.

Les paramètres de fonction

Après avoir défini les paramètres, vous pouvez les utiliser dans la fonction.

Cette fonction prend un paramètre, qui est appelé name. Lors de l'appel de la fonction, indiquez la valeur du paramètre (argument) entre parenthèses.

Vous pouvez définir une seule fonction et lui transmettre différentes valeurs de paramètres (arguments).

Une fonction peut avoir une instruction de retour (return statement) facultative.

Il est utilisé pour renvoyer une valeur de la fonction.

Les tableaux:

Les tableaux stockent plusieurs valeurs dans une seule variable.Pour stocker trois noms de cours, vous avez besoin de trois variables:

Mais que faire si vous aviez 500 cours? La solution est un tableau :

Vous faites référence à un élément de tableau en vous référant au numéro d'index écrit entre crochets.

Cette instruction accède à la valeur du premier élément dans les cours et modifie la valeur du deuxième élément.

         [0] est le premier élément d'un tableau. [1] est le deuxième. Les index de tableau commencent par 0.

Tentative d'accès à un index en dehors du tableau, renvoie la valeur indéfinie :

Les Objets JavaScript :

Les variables JavaScript sont des conteneurs pour les valeurs de données. Les objets sont également des variables, mais ils peuvent contenir de nombreuses valeurs.

Considérez un objet comme une liste de valeurs écrites sous forme de pair nom : valeur, avec les noms et les valeurs séparés par des deux-points.

Ces valeurs sont appelées propriétés.

Propriété	La valeur de la propriété
Name	John
Age	31
favColor	Green
Height	183

Propriétés de l'objet

Vous pouvez accéder aux propriétés des objets de deux manières.

Cet exemple montre comment accéder à l'âge de notre objet personne.

    

Méthodes d'objet :

Une méthode objet est une propriété qui contient une définition de fonction.

Utilisez la syntaxe suivante pour accéder à une méthode objet.

Comme vous le savez déjà, document.write () génère des données. La fonction write () est en fait une méthode de l'objet document.

Création de nos objets :

Le constructeur :

Chaque objet contient un constructeur dans le but que ce dernier peut initialiser ces propriétés.

La fonction ci-dessus est un constructeur d'objet, qui prend des paramètres et les assigne aux propriétés de l'objet.

Création d’objets :

Une fois que vous avez un constructeur d'objet, vous pouvez utiliser le mot-clé new pour créer de nouveaux objets du même type. 

            

Création de fonctions : 

Les méthodes sont des fonctions stockées en tant que propriétés d'objet. 

Pour Accéder à notre fonction on utilise la syntaxe ci-dessous :

Une méthode est une fonction appartenant à un objet. Il peut être référencé à l'aide du mot-clé this.

Le mot-clé this est utilisé comme référence à l'objet courant, ce qui signifie que vous pouvez accéder aux propriétés des objets et aux méthodes qui l'utilisent.

La définition des méthodes se fait à l'intérieur de la fonction constructeur. 

 Dans l'exemple ci-dessus, nous avons défini une méthode nommée changeName pour notre person, qui est une fonction, qui prend un nom de paramètre et l'assigne à la propriété name de l'objet. this.name fait référence à la propriété name de l'objet.

Une autre méthode pour utiliser les fonctions : 

 

 DOM(Document Object Model)

 

Lorsque vous ouvrez une page Web dans un navigateur, le code HTML de la page est chargé et rendu visuellement à l'écran.

Pour ce faire, le navigateur crée le modèle d'objet de document de cette page, qui est un modèle orienté objet de sa structure logique.

Le DOM d'un document HTML peut être représenté sous la forme d'un ensemble imbriqué de boîtes :

 Pour l'exemple ci-dessus :

<html> a deux enfants (<head>, <body>) ;

<head> a un enfant (<title>) et un parent (<html>) ;

<title> a un parent (<head>) et aucun enfant ;

<body> a deux enfants (<h1> et <a>) et un parent (<html>) ;

L’objet document :

Il existe un objet document prédéfini en JavaScript, qui peut être utilisé pour accéder à tous les éléments du DOM.

En d'autres termes, l'objet document est le propriétaire (ou la racine) de tous les objets de votre page Web.

Ainsi, si vous souhaitez accéder aux objets dans une page HTML, vous commencez toujours par accéder à l'objet document.

body : c’est un élément de DOM on peut y accéder en utilisant l’objet document et aussi on peut changer de contenu en utilisant innerHTML.

La sélection des éléments : 

Tous les éléments HTML sont des objets. Et comme vous savez un objet a ces propriétés et méthodes.

L’objet document a ces méthodes et propriétés qui nous permettent de sélectionner les éléments HTML voulu.

Voici quelque méthode utilisées pour sélectionner les éléments HTML voulu.

Dans l’exemple ci-dessous, la fonction getElementById () est utilisée pour sélectionner l’élément ayant un id = demo et on change son contenu à Hello World.

 La méthode getElementsByClassName () retourne une collection de tous les éléments du document avec le nom de classe spécifié.

Par exemple, si notre page HTML contenait trois éléments avec class = "demo", le code suivant renverrait tous ces éléments sous forme de tableau :

De même, la méthode getElementsByTagName () renvoie tous les éléments du nom de balise spécifié sous forme de tableau.

L'exemple suivant récupère tous les éléments de paragraphe de la page et modifie leur contenu :

Résultat:    

Travaillant avec DOM:

Chaque élément du DOM possède un ensemble de propriétés et de méthodes qui fournissent des informations sur leurs relations dans le DOM :

element.childNodes è renvoie un tableau des nœuds enfants d'un élément.

element.firstChild è renvoie le premier nœud enfant d'un élément.

Element.lastChild è renvoie le dernier nœud enfant d'un élément.

element.hasChildNodes è renvoie true si un élément a des nœuds enfants, sinon false.

element.nextSibling è renvoie le nœud suivant au même niveau de l'arborescence.

element.previousSibling è renvoie le nœud précédent au même niveau de l'arborescence.

element.parentNode è renvoie le nœud parent d'un élément.

Le code suivants changes le contenu de deux paragraphe à « new text » :

Changement des attribues :

Lorsque vous avez sélectionné les éléments que vous voulez manipuler, vous pouvez changer leurs attribues :

Comme nous avons vu précédent, on peut changer le contenu d’un élément en utilisant innerHTML.

Do même, on peut changer les attribues d’un élément.

Dans l'exemple ci-dessus on change l’attribues src

 

Dans l'exemple ci-dessus on change l’attribues href

Changement de style :

Le style des éléments HTML peut également être modifié à l'aide de JavaScript.

Le code ci-dessous on change la couleur (color) et la largeur (width) du text.

Création des éléments :

Dans JavaScript on peut aussi crée des nouveaux éléments :

document.createElement () è Pour crée un nouveau élément.

document.createTextNode () è Pour ajouter un text.

document.appendChild (new node) è ajoute un nouveau nœud enfant à un élément.

Cela crée un nouveau paragraphe et l'ajoute à l'élément div existant sur la page.

Suppression des éléments :

Pour supprimer un élément HTML, vous devez sélectionner le parent de l'élément et utiliser la méthode removeChild (node).

Le code ci-dessus supprimer le paragraphe avec id = « p1».

Remplacement des éléments :

Pour remplacer un élément HTML on utilise la méthode element.replaceChild().

Le code ci-dessus crée un nouvel élément de paragraphe qui remplace le paragraphe p1 existant.

EVENTS

Vous pouvez écrire du code JavaScript qui s'exécute lorsqu'un événement se produit, par exemple lorsqu'un utilisateur clique sur un élément HTML, déplace la souris ou soumet un formulaire.

Lorsqu'un événement se produit sur un élément cible, une fonction de gestionnaire est exécutée.

 

Evenement	Description
onclick	Se produit quand l’utilisateur clics sur un élément
onload	Se produit quand un objet a chargé sur la page
onchange	Se produit quand l’utilisateur a écrit sur un <input> <textarea>…
onfocus	Se produit quand un élément est obtient le focus
onmouseover	Se produit quand la souris est ci-dessus un élément
onmouseout	Se produit quand la souris est ne plus ci-dessus un élément

Manipulation des éléments :

Affiche une fenêtre contextuelle d'alerte lorsque l'utilisateur clique sur un bouton spécifique :

Egalement les événements (events) peuvent être attribués aux éléments HTML.

Il y des événements (events) sont déclenchés lorsque l’utilisateur entre ou quitte la page.

De même, l’événement window.onload peut être utilisé pour exécuté un code après la page est chargée.

L’événemant onchange est pricipalement utilisé sur les textboxes. Onchange est applée lorsque le texte à l‘intérieur du textboxe change et que lorsque le focus est perdu.

Events listeners :

La méthode addEventListener () est une méthode qui attache un event avec un élément HTML, sans écraser les événements (events) existants. Vous pouver ajouter plusieurs events à un élément HTML.

 Le 1^er Argument c’est le type d’événement (comme onclick,onchange ).

Le 2eme Argument c’est la fonction à éxécutée.

Le 3eme Argument c’est optionnel je vais le traiter prochainement.

Le code ci-dessus ajoute deux événements à un seul élémen HTML.

De même, on peut supprimer un événement :

ES6 (ECMAScript6)

Introduction:

ES6 ou ECMASCRIPT : est une spécification de langage de script créée pour standardiser JavaScript.

Cette 6éme édition, nommée ECMAScript 6 (ES6), en utilisant cette édition pour créer des nouvelles syntaxes et des applications compliqués comme :

classes, modules, Arrow fonctions, collections (maps,sets), promises…etc

La raison pour laquelle ES6 est devenu populaire car il a introduit de nouvelle conventions et concepts de POO tels que les classes.

Les variables et les chaînes de caractères d’ES6 :

Var et let :

Dans ES6 il existe trois méthodes pour déclarer un variable.

Le type de déclaration utilisé est dépends sur scope. Scope est le concept fondamental dans tous les langages de programmation qui définit la visibilité d’une variable dans le code.

On utilise var pour déclarer une variable globalement ou localement.

On utilise let pour déclarer une variable qui est limité dans un bloque. 

 

Dans le code ci-dessus le variable name est accessible seulement dans le bloque if, car on a déclaré ce variable comme let.

Pour bien différencier entre var et let considérant l’exemple ci-dessous :

L’une meilleurs utilisation de let est dans les boucles.

const :

Les variables déclaré comme const ont la même scope comme les variables déclaré comme let la seul différence est les variables const sont unchangeable.

Le code ci-dessous va générer une erreur.

Template literals dans ES6 :

Template literals c’est une méthode pour afficher les variable sous forme une chaîne de caractères.

ES6 présente une nouvelle méthode pour afficher les valeurs des variables dans les chaînes de caractères.

Notez que la tempalte literals sont entouré par (``), ${expression} est un espace réservé, et peut inclure n’importe quelle expression, qui sera évaluée.

Les boucles et les fonctions dans ES6 :

Les boucles :

Dans JavaScript on utilise la boucle for pour itérer les valeurs d’une liste.

La boucle for..in a pour but de parcourir les clés énumérable d’un objet.

Aussi ES6 présente la boucle for..of qui a pour but de parcourir des objets.

Lors l’itération la variable val prend l’élément correspondant dans la liste.

Autres utilisation de la boucle for..of, les chaînes de caractère sont inclus.

Les Fonctions :

Les fonctions dans JavaScript sont définies comme cela :

ES6 présente une autre façon pour crée des fonctions. La même fonction ci-dessus peut-être écrit comme cela :

Cette syntaxe est très flexible, car quand vous voulez une fonction avec un seul argument.

Vous pouvez ignorer de créer le mot function and return et des parenthèses.

Le code ci-dessus définir une fonction nommée great avec un argument x et qui renvoie un message.

Mais s’il n’y a pas d’arguments, on va utiliser une paire de parenthèses comme ci-dessous :

Les classes dans ES6 :

Pour créer une classe ou utilise le mot-clé class et aussi qui contient un constructeur pour l’initialisation.

On peut créer multiple objets en utilisant seulement une seul classe comme ci-dessous :

Les méthodes de classe:

ES6 a introduit une nouvelle forme pour crée les fonctions sans utiliser le mot-clé function.

Dans le code ci-dessus, area est un getter, calcArea une fonction.

Il existe un autre type de méthode est la méthode statique qui ne peut pas être appelée à travers une instance de classe.

L’héritage :

On utilise l’héritage pour éviter la redondance des données, pour réaliser la notion de l’héritage entre les classes ou utilise le mot-clé extends.

(Dans l’héritage on réalise la relation est un, dans le code ci-dessous le chien est un animal).

Dans le code ci-dessus la classe Chien un enfant de la classe mère (Animal), la classe enfant hérite tous les propriétés et les méthodes de la class mère.

MAP

Un objet MAP peut être utilisé pour contenir des (clé-valeur).Une clé ou une valeur dans une carte peut être n’importe quoi (Objets et valeur primitives).

La syntaxe new Map([iterable]) crée un objet Map dont iterable c’est un array ou un objet itérable dont les éléments sont des tableaux ( clé-valeur ).

Un objet est similaire à Map, mais il y a des différences qui rendre l’utilisation de Map est préféré :

 Les clés peuvent être de n'importe quel type, y compris des fonctions, des objets et n'importe quelle primitive.

Vous pouvez obtenir la taille d'une Map.

Vous pouvez parcourir directement la Map.

Les performances de la carte sont meilleures dans les scénarios impliquant l'ajout et la suppression fréquents de paires clé / valeur.

La propriété size renvoie le nombre de paires clé / valeur dans une Map :

Méthodes :

Méthode	Description
set (key,value)	Ajoute une paire clé / valeur spécifique à la Map.
get (key)	Obtient la valeur correspondant à une clé spécifique dans la Map.
has (key)	Renvoie true si une clé spécifiée existe dans la Map et false dans le cas contraire.
delete (key)	Supprime la paire clé / valeur avec une clé spécifique de la Map.
clear ()	Supprime toutes les paires clé / valeur de la Map.
keys ()	Renvoie un itérateur de clés dans la Map pour chaque élément.
values ()	Renvoie un itérateur de valeurs dans la Map pour chaque élément.

Exemple :

SET

Un objet Set peut être utilisé pour contenir des valeurs uniques (aucune répétition n'est autorisée).

Une valeur dans un ensemble peut être n'importe quoi (objets et valeurs primitives).

La syntaxe new Set ([iterable]) crée un objet de type Set dont iterable est un array ou un objet itérable de valeurs.

La propriété size renvoie le nombre de paires clé / valeur dans une Set :

 

Méthodes :

Méthode	Description
add (value)	Ajoute un nouvel élément avec la valeur donnée à Set.
delete (value)	Supprimer une valeur spécifique de Set.
has (value)	Renvoie true si une valeur spécifiée existe dans Set et false dans le cas contraire
clear ()	Supprimer tout le Set
values ()	Renvoie un itérateur de valeurs dans Set.

Exemple :

Promises

Promise est un meilleur moyen pour la programmation asynchrone par rapport à la manière courante d'utiliser une méthode de type setTimeout ().

Exemple :

Résultat :

Le code est exécuté de manière asynchrone, mais supposons qu’on a plusieurs fonctions à exécuté, le code devient très complexe.

C’est pour cela il existe ES6. On peut créer un Promise comme cela :

resolve è pour tout est allé bien.

Reject è pour traiter une erreur

Lorsqu’une fonction retourne un Promise, on doit appeler la fonction then qui prend 2 arguments le 1^er est pour le succès et la 2éme pour l’erreur.

Le code ci-dessus a le même résultat que le code précédent, c'est clairement plus lisible que l'exemple précédent et dans des situations plus complexes, il est plus facile de travailler avec.