Guide Ultra Détaillé JavaScript
Ce guide explique JavaScript depuis les bases jusqu’aux concepts importants utilisés dans les vrais projets web
modernes.
1. Qu’est-ce que JavaScript ?
JavaScript est un langage de programmation utilisé pour rendre les sites web interactifs.
Exemples :
- menus interactifs
- animations
- formulaires dynamiques
- jeux web
- applications modernes
2. Ajouter JavaScript dans HTML
JavaScript peut être ajouté directement dans une page HTML avec la balise script.
<script>
[Link]("Bonjour");
</script>
3. Variables
Les variables servent à stocker des données.
let nom = "Mahamadi";
const age = 20;
var ville = "Ouagadougou";
[Link](nom);
4. Différence entre let, const et var
let peut changer, const est constant, var est l’ancienne méthode.
let prix = 100;
prix = 200;
const pays = "Burkina Faso";
5. Les types de données
JavaScript possède plusieurs types de données.
String -> "Bonjour"
Number -> 25
Boolean -> true / false
Array -> [1,2,3]
Object -> {nom:"Ali"}
6. Les opérateurs
Les opérateurs servent à faire des calculs et comparaisons.
+ addition
- soustraction
* multiplication
/ division
% modulo
=== égalité stricte
!== différent
7. Conditions
Les conditions permettent d’exécuter du code selon une situation.
let age = 18;
if(age >= 18){
[Link]("Majeur");
}else{
[Link]("Mineur");
}
8. Les boucles
Les boucles répètent du code automatiquement.
for(let i = 0; i < 5; i++){
[Link](i);
9. Fonctions
Les fonctions regroupent du code réutilisable.
function saluer(){
[Link]("Bonjour");
saluer();
10. Paramètres et arguments
Les fonctions peuvent recevoir des données.
function addition(a,b){
return a + b;
[Link](addition(5,3));
11. Les tableaux (Arrays)
Les tableaux stockent plusieurs valeurs.
let fruits = ["mangue","orange","banane"];
[Link](fruits[0]);
12. Les objets
Les objets stockent des informations organisées.
let utilisateur = {
nom:"Ali",
age:20,
pays:"Burkina Faso"
};
[Link]([Link]);
13. DOM
Le DOM permet à JavaScript de modifier le HTML.
<h1 id="title">Bonjour</h1>
<script>
const titre = [Link]("title");
[Link] = "red";
</script>
14. querySelector
Permet de sélectionner des éléments HTML.
const button = [Link]("button");
const box = [Link](".box");
15. Events
Les événements réagissent aux actions de l’utilisateur.
[Link]("click", function(){
[Link]("Bouton cliqué");
});
16. Manipuler le CSS avec JavaScript
JavaScript peut modifier le style des éléments.
[Link] = "black";
[Link] = "white";
17. Créer des éléments HTML
JavaScript peut créer des éléments dynamiquement.
const p = [Link]("p");
[Link] = "Bonjour";
[Link](p);
18. setTimeout et setInterval
Permettent d’exécuter du code après un délai.
setTimeout(function(){
[Link]("Bonjour");
},2000);
19. Les fonctions fléchées
Syntaxe moderne des fonctions.
const saluer = () => {
[Link]("Bonjour");
};
20. Promises
Les Promises gèrent les opérations asynchrones.
fetch("[Link]")
.then(response => [Link]())
.then(data => [Link](data));
21. Async / Await
Méthode moderne pour gérer l’asynchrone.
async function charger(){
const response = await fetch("[Link]");
const data = await [Link]();
[Link](data);
22. Local Storage
Permet de sauvegarder des données dans le navigateur.
[Link]("nom","Ali");
[Link]([Link]("nom"));
23. Modules JavaScript
Permettent de séparer le code.
export const nom = "Ali";
import { nom } from "./[Link]";
24. Mini projet : compteur
Petit projet interactif.
<button id="btn">Clique</button>
<p id="number">0</p>
<script>
let count = 0;
const btn = [Link]("btn");
const number = [Link]("number");
[Link]("click", ()=>{
count++;
[Link] = count;
});
</script>
Après JavaScript, les prochaines étapes sont : Git, APIs, React, [Link] et les projets réels.