COURS JAVASCRIPT ESSENTIEL

1. Variables et Types de Données

- Déclaration de Variables : En JavaScript, vous pouvez déclarer des

variables en utilisant les mots-clés `var`, `let`, ou `const`. Par exemple
:
```javascript
var x = 10;
let y = "Hello";
const PI = 3.14159;
```

- Types de Données : JavaScript prend en charge différents types de

données, tels que les nombres, les chaînes de caractères, les booléens,
les tableaux, les objets, etc.
```javascript
var num = 42; // Number
var str = "Hello"; // String
var bool = true; // Boolean
```

- Conversion entre Types de Données : Vous pouvez convertir des

données d'un type à un autre en utilisant des fonctions comme
`parseInt`, `parseFloat`, `String`, etc.
```javascript
 var numStr = "42";
var num = parseInt(numStr); // Convertit la chaîne en nombre
```

2. Opérations Logiques et Arithmétiques

- Opérateurs Arithmétiques : Les opérateurs arithmétiques de base

sont `+`, `-`, `*`, `/`, et `%` (modulo).
```javascript
var sum = 10 + 5; // Addition
var diff = 10 - 5; // Soustraction
```

- Opérateurs Logiques : Les opérateurs logiques sont `&&` (et), `||`

(ou), et `!` (non).
```javascript
var isTrue = true;
var isFalse = !isTrue; // false
```

3. Structures de Contrôle

- Instructions Conditionnelles : Vous pouvez utiliser des instructions

`if`, `else if`, et `else` pour prendre des décisions basées sur des
conditions.
```javascript
 var x = 10;
if (x > 5) {
console.log("x est plus grand que 5");
} else {
console.log("x est plus petit ou égal à 5");
}
```

- Boucles : JavaScript prend en charge les boucles `for`, `while`, et

`do while` pour l'itération.
```javascript
for (var i = 0; i < 5; i++) {
console.log(i);
}
```

4. Fonctions

- Déclaration de Fonctions : Vous pouvez déclarer des fonctions en

utilisant le mot-clé `function`.
```javascript
function add(x, y) {
return x + y;
}
```
 - Paramètres de Fonctions : Les fonctions peuvent prendre des
paramètres qui sont des valeurs passées à la fonction lors de son
appel.
```javascript
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("Alice"); // Affiche "Hello, Alice!"
```

5. Objets

- Objets Natifs : JavaScript propose des objets natifs tels que

`Array`, `String`, `Math`, etc.
```javascript
var fruits = ["Apple", "Banana", "Orange"];
var strLength = fruits.length; // 3
```

- Création d'Objets : Vous pouvez créer vos propres objets en

utilisant des fonctions constructeurs ou la syntaxe littérale d'objet.
```javascript
var person = { name: "John", age: 30 };
```
6. Gestion du DOM avec JavaScript

- Introduction au DOM : Le DOM (Document Object Model)

représente la structure d'une page web sous forme d'un arbre d'objets.
- Accès aux Éléments du DOM : Vous pouvez accéder aux éléments
du DOM en utilisant des méthodes telles que `getElementById`,
`getElementsByClassName`, etc.
- Manipulation du DOM : Vous pouvez ajouter, supprimer et
modifier des éléments du DOM pour mettre à jour l'interface
utilisateur.
- Événements : Vous pouvez utiliser des gestionnaires d'événements
pour détecter et réagir aux actions de l'utilisateur.

7. Utilisation des Fonctionnalités du Navigateur

- Stockage Local : Utilisation de `localStorage` ou `sessionStorage`

pour stocker des données localement.
- Géolocalisation : Utilisation de l'API de géolocalisation pour
obtenir la position de l'utilisateur.
- Notifications : Utilisation de l'API de notifications pour afficher
des notifications à l'utilisateur.
- Historique de Navigation : Utilisation de l'API de navigation pour
accéder à l'historique de navigation de l'utilisateur.

8. Communication entre le Frontend et les Serveurs

- Requêtes HTTP : Vous pouvez utiliser les fonctions `fetch` ou

`XMLHttpRequest` pour envoyer des requêtes HTTP au serveur.
 - Fonctions Asynchrones : Les fonctions asynchrones, telles que les
Promises et `async/await`, permettent d'effectuer des opérations
asynchrones de manière plus lisible et maintenable.

VOICI UN DÉTAIL SUR L'INTRODUCTION AU DOM,

L'ACCÈS AUX ÉLÉMENTS DU DOM, LA
MANIPULATION DU DOM ET LES ÉVÉNEMENTS EN
JAVASCRIPT :

---

1. Introduction au DOM (Document Object Model)

Le DOM est une représentation hiérarchique de la structure d'une

page web sous forme d'un arbre d'objets. Chaque élément de la page
(comme des paragraphes, des images, des formulaires, etc.) est
représenté par un nœud dans cet arbre. Le DOM permet de manipuler
dynamiquement le contenu, la structure et le style d'une page web en
utilisant JavaScript.

2. Accès aux Éléments du DOM

- `getElementById` : Permet de récupérer un élément du DOM en

utilisant son identifiant unique.
```javascript
var element = document.getElementById("monElement");
```
- `getElementsByClassName` : Permet de récupérer une liste
d'éléments du DOM ayant la même classe.
```javascript
var elements = document.getElementsByClassName("maClasse");
```

- `getElementsByTagName` : Permet de récupérer une liste

d'éléments du DOM ayant le même nom de balise.
```javascript
var elements = document.getElementsByTagName("div");
```

- `querySelector` et `querySelectorAll` : Permettent de sélectionner

des éléments du DOM en utilisant des sélecteurs CSS.
```javascript
var element = document.querySelector("#monId");
var elements = document.querySelectorAll(".maClasse");
```

3. Manipulation du DOM

- Ajout d'éléments : Vous pouvez ajouter de nouveaux éléments au

DOM en utilisant des méthodes telles que `createElement` et
`appendChild`.
```javascript
var newElement = document.createElement("div");
 newElement.textContent = "Nouvel élément";
document.body.appendChild(newElement);
```

- Suppression d'éléments : Vous pouvez supprimer des éléments du

DOM en utilisant la méthode `removeChild`.
```javascript
var elementASupprimer =
document.getElementById("elementASupprimer");
elementASupprimer.parentNode.removeChild(elementASupprimer);
```

- Modification d'éléments : Vous pouvez modifier le contenu ou les

attributs des éléments du DOM en accédant à leurs propriétés.
```javascript
var elementAModifier =
document.getElementById("elementAModifier");
elementAModifier.textContent = "Nouveau contenu";
elementAModifier.setAttribute("class", "nouvelleClasse");
```

4. Événements

Les événements permettent de détecter les actions de l'utilisateur sur

la page web, comme un clic de souris, une pression de touche, etc.
Vous pouvez utiliser des gestionnaires d'événements pour réagir à ces
actions.
- Ajout d'un gestionnaire d'événements :
```javascript
var element = document.getElementById("monElement");
element.addEventListener("click", function() {
alert("Élément cliqué !");
});
```

- Types d'événements courants : `click`, `mouseover`, `keydown`,

`submit`, etc.

---

Ces concepts sont fondamentaux pour interagir dynamiquement avec

les éléments d'une page web en JavaScript.

VOICI UN DÉTAIL SUR L'UTILISATION DU

STOCKAGE LOCAL, DE LA GÉOLOCALISATION,
DES NOTIFICATIONS ET DE L'HISTORIQUE DE
NAVIGATION EN JAVASCRIPT :

---

1. Stockage Local avec `localStorage` et `sessionStorage`

- `localStorage` : Permet de stocker des données de manière
persistante dans le navigateur, même après la fermeture et la
réouverture de l'application.
```javascript
localStorage.setItem("cle", "valeur");
var valeur = localStorage.getItem("cle");
```

- `sessionStorage` : Stocke des données de manière temporaire

pendant la session de navigation de l'utilisateur, ce qui signifie que les
données sont effacées une fois que l'utilisateur ferme l'onglet ou le
navigateur.
```javascript
sessionStorage.setItem("cle", "valeur");
var valeur = sessionStorage.getItem("cle");
```

2. Géolocalisation avec l'API de Géolocalisation

L'API de géolocalisation permet d'obtenir la position géographique de

l'utilisateur.

- Vérifier si le navigateur prend en charge la géolocalisation :

```javascript
if ("geolocation" in navigator) {
// Géolocalisation disponible
} else {
 // Géolocalisation non disponible
}
```

- Obtenir la position de l'utilisateur :

```javascript
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
console.log("Latitude : " + latitude + ", Longitude : " + longitude);
});
```

3. Notifications avec l'API de Notifications

L'API de notifications permet d'afficher des notifications à

l'utilisateur.

- Vérifier si les notifications sont autorisées :

```javascript
if (Notification.permission === "granted") {
// Notifications autorisées
}
```
- Demander la permission pour afficher des notifications :
```javascript
Notification.requestPermission().then(function(permission) {
if (permission === "granted") {
// Notifications autorisées
}
});
```

- Afficher une notification :

```javascript
var notification = new Notification("Titre de la notification", {
body: "Corps de la notification"
});
```

4. Historique de Navigation avec l'API de Navigation

L'API de navigation permet d'accéder à l'historique de navigation de

l'utilisateur.

- Accéder à l'historique de navigation :

```javascript
window.history.length; // Nombre d'entrées dans l'historique
window.history.back(); // Revenir à la page précédente
 window.history.forward(); // Aller à la page suivante dans
l'historique.
Voici un détail sur l'envoi de requêtes HTTP au serveur en
JavaScript, ainsi que sur l'utilisation des fonctions asynchrones
pour gérer les opérations asynchrones de manière plus efficace :

---

1. Requêtes HTTP avec `fetch`

La méthode `fetch` permet d'effectuer des requêtes HTTP

asynchrones vers des ressources, telles que des API web, et de gérer
les réponses de manière asynchrone.

- Exemple de requête GET avec `fetch` :

```javascript
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Erreur :', error));
```

- Exemple de requête POST avec `fetch` :

```javascript
fetch('https://api.example.com/data', {
method: 'POST',
 body: JSON.stringify({ key: 'value' }),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Erreur :', error));
```

2. Requêtes HTTP avec `XMLHttpRequest`

`XMLHttpRequest` est un objet JavaScript utilisé pour effectuer des

requêtes HTTP asynchrones vers le serveur.

- Exemple de requête GET avec `XMLHttpRequest` :

```javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status
=== 200) {
console.log(JSON.parse(xhr.responseText));
}
};
 xhr.send();
```

- Exemple de requête POST avec `XMLHttpRequest` :

```javascript
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status
=== 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send(JSON.stringify({ key: 'value' }));
```

3. Fonctions Asynchrones avec Promises et `async/await`

Les fonctions asynchrones permettent d'exécuter du code de manière

asynchrone, ce qui est utile pour les opérations telles que les requêtes
HTTP.

- Exemple d'utilisation de Promises :

```javascript
 function fetchData() {
return new Promise((resolve, reject) => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => resolve(data))
.catch(error => reject(error));
});
}

fetchData()
.then(data => console.log(data))
.catch(error => console.error('Erreur :', error));
```

- Exemple d'utilisation de `async/await` :

```javascript
async function fetchData() {
try {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
return data;
} catch (error) {
console.error('Erreur :', error);
}
}

fetchData().then(data => console.log(data));