Explication Sur Le JavaScript
Explication Sur Le JavaScript
Bien sûr, je serais ravi de vous enseigner les bases de JavaScript. JavaScript est un
langage de programmation essentiel pour le développement web, permettant de rendre
les pages web interactives et dynamiques. Voici une introduction étape par étape à
JavaScript, couvrant les concepts fondamentaux.
JavaScript est un langage de programmation interprété, ce qui signifie que le code est
exécuté directement par le navigateur web. Il est principalement utilisé pour créer des
interactions dynamiques sur les sites web.
Vous pouvez inclure JavaScript dans une page HTML de plusieurs façons :
- **En ligne (inline) :** En utilisant l'attribut `onclick`, `onmouseover`, etc.,
directement dans les balises HTML.
- **Interne (internal) :** En ajoutant du code JavaScript dans une balise `<script>`
dans le fichier HTML.
- **Externe (external) :** En utilisant un fichier `.js` séparé et en le liant avec une
balise `<script>`.
Exemple :
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Introduction à JavaScript</title>
</head>
<body>
<h1>Bonjour, JavaScript!</h1>
<button onclick="afficherMessage()">Cliquez-moi</button>
<script>
function afficherMessage() {
alert('Bonjour, JavaScript!');
}
</script>
</body>
</html>
```
#### Variables
Les variables sont utilisées pour stocker des données. En JavaScript, vous pouvez
déclarer des variables en utilisant `var`, `let`, ou `const`.
```javascript
let nom = "Alice";
const age = 25;
var ville = "Paris";
```
- `let` est utilisé pour déclarer des variables dont la valeur peut changer.
- `const` est utilisé pour déclarer des variables constantes dont la valeur ne peut pas
changer.
- `var` est une façon plus ancienne de déclarer des variables et est rarement utilisé
dans les nouvelles versions de JavaScript.
Exemples :
```javascript
let nom = "Alice"; // String
let age = 25; // Number
let estMajeur = true; // Boolean
let utilisateur = { // Object
prenom: "Alice",
age: 25,
ville: "Paris"
};
let fruits = ["Pomme", "Banane", "Orange"]; // Array
```
### 3. Opérateurs
Les opérateurs sont utilisés pour effectuer des opérations sur des variables et des
valeurs.
Exemples :
```javascript
let x = 10;
let y = 5;
console.log(x + y); // 15
console.log(x > y); // true
console.log(x === y); // false
console.log(x !== y); // true
console.log(x > 5 && y < 10); // true
```
```javascript
let age = 18;
if (age < 18) {
console.log("Vous êtes mineur.");
} else if (age === 18) {
console.log("Vous avez exactement 18 ans.");
} else {
console.log("Vous êtes majeur.");
}
```
```javascript
// Boucle for
for (let i = 0; i < 5; i++) {
console.log("i est égal à " + i);
}
// Boucle while
let j = 0;
while (j < 5) {
console.log("j est égal à " + j);
j++;
}
```
### 5. Fonctions
Les fonctions sont des blocs de code réutilisables qui effectuent une tâche spécifique.
```javascript
function saluer(nom) {
return "Bonjour, " + nom + "!";
}
console.log(saluer("Alice")); // "Bonjour, Alice!"
```
```javascript
// Sélectionner un élément par son id
let element = document.getElementById("monElement");
```javascript
let titre = document.getElementById("titre");
titre.textContent = "Nouveau Titre";
```
```javascript
let bouton = document.getElementById("monBouton");
bouton.addEventListener("click", function() {
alert("Bouton cliqué!");
});
```
Bien sûr, poursuivons l'exploration de JavaScript avec des concepts plus avancés et
des pratiques courantes.
```javascript
// Fonction classique
function ajouter(a, b) {
return a + b;
}
// Fonction fléchée
const ajouter = (a, b) => a + b;
console.log(ajouter(2, 3)); // 5
```
Les fonctions anonymes sont des fonctions sans nom, souvent utilisées comme
arguments dans d'autres fonctions.
```javascript
// Fonction de callback
setTimeout(function() {
console.log("Cette fonction est exécutée après 2 secondes.");
}, 2000);
```javascript
let utilisateur = {
nom: "Alice",
age: 25,
direBonjour: function() {
return "Bonjour, " + this.nom;
}
};
```javascript
function Utilisateur(nom, age) {
this.nom = nom;
this.age = age;
}
Utilisateur.prototype.direBonjour = function() {
return "Bonjour, " + this.nom;
};
```javascript
class Utilisateur {
constructor(nom, age) {
this.nom = nom;
this.age = age;
}
direBonjour() {
return "Bonjour, " + this.nom;
}
}
```javascript
let image = document.querySelector("img");
image.setAttribute("src", "nouvelle_image.jpg");
```
```javascript
let paragraphe = document.querySelector("p");
paragraphe.parentNode.removeChild(paragraphe);
```
```javascript
let promesse = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("Opération réussie");
} else {
reject("Opération échouée");
}
});
promesse
.then(resultat => console.log(resultat))
.catch(erreur => console.log(erreur));
```
Async/Await est une syntaxe plus moderne pour les opérations asynchrones.
```javascript
async function fetchData() {
try {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
} catch (error) {
console.log(error);
}
}
fetchData();
```
**module.js**
```javascript
export function direBonjour(nom) {
return `Bonjour, ${nom}!`;
}
```
**main.js**
```javascript
import { direBonjour } from './module.js';
console.log(direBonjour('Alice')); // "Bonjour, Alice!"
```
#### jQuery
```javascript
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
});
```
#### React.js
**App.js**
```javascript
import React from 'react';
- **Écrire du code propre et lisible :** Utilisez des noms de variables et de fonctions
significatifs.
- **Modularité :** Divisez votre code en modules réutilisables.
- **Gestion des erreurs :** Toujours gérer les erreurs dans votre code asynchrone.
- **Commentaires :** Commentez votre code pour expliquer les parties complexes.
- **Tests :** Écrivez des tests pour vérifier que votre code fonctionne correctement.