🧠 Apprendre les Bases de JavaScript

Un Guide Étape par Étape pour le Développement Web Interactif

👨🏾‍💻 Présentation Professionnelle

📌 Qu'est-ce que JavaScript ?

JavaScript (JS) est un langage de programmation utilisé principalement dans les sites web.

Il sert à rendre les pages interactives :

Faire bouger des éléments
Répondre aux clics
Créer des jeux et formulaires

🧩 L'Analogie Web

🏗️ HTML = Le squelette (structure)

🎨 CSS = Les vêtements (style)

🧠 JavaScript = Le cerveau (interactivité)

🚀 Comment Écrire et Exécuter du JavaScript ?

✅ Méthode 1 : Console du Navigateur

Clic droit → Inspecter → Onglet Console

Étape 1 : Ouvrir Google

Étape 2 : Clic droit → Inspecter

Étape 3 : Onglet Console

Étape 4 : Écrire du code

✅ Méthode 2 : Fichier HTML

<script>
    console.log('Bonjour depuis JavaScript !');
</script>

✅ Méthode 3 : Éditeurs en Ligne

CodePen, JSFiddle, JSBin

🧺 Les Variables - Stocker des Valeurs

let nom = "Alex";           // Texte (string)
let age = 20;               // Nombre (number)
let estEtudiant = true;     // Booléen (boolean)

let = Variable modifiable

const = Constante (ne change pas)

var = Ancien mot-clé (à éviter)

🔢 Les Types de Données

Type	Exemple	Signification
String	`"Bonjour"`	Texte
Number	`10`, `3.14`	Nombres
Boolean	`true`, `false`	Vrai ou Faux
null	`null`	Vide volontairement
undefined	-	Pas encore défini

🔄 Fonctions de Conversion

🧮 parseInt()

Convertit texte en nombre entier

parseInt("42.8")  // 42

💧 parseFloat()

Convertit texte en nombre décimal

parseFloat("42.8")  // 42.8

⚠️ Attention : Si le texte ne commence pas par un nombre, le résultat sera NaN (Not a Number)

➕ Les Opérations de Base

Mathématiques

let a = 5 + 3;      // 8  (addition)
let b = 10 - 2;     // 8  (soustraction)
let c = 2 * 4;      // 8  (multiplication)
let d = 16 / 2;     // 8  (division)
let e = 2 ** 3;     // 8  (puissance)
let f = 10 % 3;     // 1  (modulo - reste)

Concaténation de Texte

let nom = "Lina";
let message = "Bonjour, " + nom;  // "Bonjour, Lina"

⚡ Les Fonctions Essentielles

Fonction	Rôle	Où ça s'affiche
`prompt()`	Pose une question à l'utilisateur	Fenêtre pop-up
`alert()`	Montre un message simple	Fenêtre pop-up
`console.log()`	Affiche un message caché (debug)	Console du navigateur
`confirm()`	Pose une question avec OK/Annuler	Fenêtre pop-up

let nom = prompt("Quel est ton nom ?");
alert("Bienvenue " + nom + " !");
console.log("Utilisateur : " + nom);

🔍 Opérateurs de Comparaison

Opérateur	Signification	Exemple	Résultat
`==`	Égal à (valeur seulement)	`5 == "5"`	✅ true
`===`	Strictement égal (valeur + type)	`5 === "5"`	❌ false
`!=`	Différent de	`5 != "6"`	✅ true
`>`, `<`	Supérieur / Inférieur	`8 > 6`	✅ true

💡 Bonne Pratique : Toujours utiliser === et !==

⚙️ Opérateurs Logiques

`&&` - ET Logique

Les deux conditions doivent être vraies

5 > 2 && 3 < 6  // true (les deux sont vrais)

`||` - OU Logique

Au moins une condition doit être vraie

5 > 2 || 3 > 6  // true (au moins un est vrai)

`!` - NON Logique

Inverse la valeur booléenne

!(5 > 3)  // false (inverse de true)

⚖️ Instructions Conditionnelles (if / else)

let score = 8;

if (score >= 10) {
    console.log("Excellent !");
} else if (score >= 5) {
    console.log("Pas mal !");
} else {
    console.log("Besoin d'entraînement !");
}

if = Si la condition est vraie

else if = Sinon si autre condition

else = Sinon (tous les autres cas)

🧩 Les Fonctions - Code Réutilisable

Une fonction est un bloc de code qui effectue une tâche spécifique

// Fonction pour additionner
function addition(x, y) {
    return x + y;
}

console.log(addition(2, 3));  // 5

// Fonction pour saluer
function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("Bob"));  // "Hello, Bob!"

💡 Une fonction = une recette : vous donnez des ingrédients, elle renvoie un résultat

⚠️ Attention : Toujours appeler (utiliser) une fonction pour qu'elle s'exécute

addition(2, 3) au lieu de addition

⚠️ Attention : Attention aux Récursions !

C'est quoi une fonction récursive ?

Une fonction récursive est une fonction qui s'appelle elle-même pour résoudre un problème.

Exemple :

function factorial(n) {
    if (n === 0) {
        return 1;
    }
    return n * factorial(n - 1);
}

Pour en savoir plus sur les fonctions récursives, consultez la documentation JavaScript suivante : Récursivité JavaScript

🔁 Les Boucles - Répéter des Actions

Boucle While (Tant que)

let i = 1;
while (i <= 5) {
    console.log("Compteur : " + i);
    i++;
}

Boucle For

for (let i = 0; i < 5; i++) {
    console.log(i);  // affiche 0, 1, 2, 3, 4
}

📦 Les Tableaux (Arrays)

Un tableau peut contenir plusieurs valeurs à la fois

let fruits = ["pomme", "banane", "mangue"];

console.log(fruits[0]);  // "pomme"
console.log(fruits[1]);  // "banane"
console.log(fruits.length);  // 3

// Ajouter un élément
fruits.push("orange");

// Modifier un élément
fruits[1] = "fraise";

💡 Important : L'index commence toujours à 0

📘 Méthodes de Tableau

Méthode	Action	Exemple
`push()`	Ajoute à la fin	`fruits.push("orange")`
`pop()`	Supprime le dernier	`fruits.pop()`
`unshift()`	Ajoute au début	`fruits.unshift("kiwi")`
`shift()`	Supprime le premier	`fruits.shift()`
`indexOf()`	Position d'un élément	`fruits.indexOf("banane")`
`includes()`	Vérifie présence	`fruits.includes("pomme")`

🧍 Les Objets

Un objet contient plusieurs informations liées entre elles

Nom : Félix Houphouët-Boigny
Fonction : Ancien Président
Dates : 1905 - 1993
Nationalité : Ivoirien
Vivant : Non

Nom : Cristiano Ronaldo
Fonction : Footballeur Pro
Âge : 39 ans
Nationalité : Portugais
Vivant : Oui

Traduction en code :

let personne = {
    nom: "Félix Houphouët-Boigny",
    fonction: "Ancien Président de la Côte d'Ivoire",
    dates: "1905 - 1993",
    nationalite: "Ivoirien",
    vivant: false
};

// Lire une propriété
console.log(personne.nom);

// Modifier une propriété
personne.fonction = "Père de la nation";

// Ajouter une propriété
personne.titre = "Président";

💡 Un objet = regrouper plusieurs infos sur une seule chose

🌐 DOM & Événements

DOM = Document Object Model (structure de la page web)

<button id="monBtn">Clique-moi</button>
<p id="msg">En attente...</p>

<script>
const btn = document.getElementById('monBtn');
const p = document.getElementById('msg');

btn.addEventListener('click', function() {
    p.textContent = "Bouton cliqué !";
});
</script>

💡 JavaScript peut modifier la page en temps réel !

💻 Projet Pratique : Calculatrice

<input id="n1" type="number" placeholder="Nombre 1">
<input id="n2" type="number" placeholder="Nombre 2">
<button id="add">Addition</button>
<div id="result">Résultat ici</div>

<script>
const n1 = document.getElementById('n1');
const n2 = document.getElementById('n2');
const res = document.getElementById('result');

document.getElementById('add').addEventListener('click', function(){
    const val = Number(n1.value) + Number(n2.value);
    res.textContent = "Résultat : " + val;
});
</script>

⚠️ Erreurs Fréquentes des Débutants

= au lieu de === pour comparer
Ne pas convertir les entrées en nombres avec Number()
Oublier que les tableaux commencent à l'index 0
Code exécuté avant le chargement de la page
Ne pas gérer undefined ou null
Oublier les parenthèses lors de l'appel de fonction

💡 Astuce : Mettez votre <script> à la fin du <body>

🔧 Astuces de Débogage

1. Utilisez console.log()

Vérifiez vos valeurs à chaque étape

2. Lisez les messages d'erreur

Ils indiquent souvent la ligne du problème

3. Testez morceau par morceau

Ne testez pas tout le code en même temps

4. Soyez patient

Les erreurs font partie de l'apprentissage ! 💪

🎓 Continuez à Coder !

📚 Points Clés à Retenir :

Pratiquez un peu chaque jour (même 20 minutes)
Les erreurs sont normales et utiles
Consultez la documentation (MDN, JavaScript.info)
Construisez des petits projets personnels

🚀 Prochaines Étapes :

JavaScript Asynchrone (async/await, Promises) En savoir plus
ES6+ (fonctions fléchées, destructuration) En savoir plus
Frameworks (React, Vue, Angular)

Merci ! 👏