Méthodes de base JavaScript

🔤 Variables

let, const – déclarer des variables
typeof – connaître le type

let nom = "user";
const age = 30;
console.log(typeof nom); // string

📦 Tableaux – Méthodes de base

push(), pop() – ajouter/enlever à la fin
shift(), unshift() – début du tableau
slice(), splice() – couper/modifier

let fruits = ["🍎", "🍌", "🍇"];
fruits.push("🍍");
console.log(fruits); // ["🍎", "🍌", "🍇", "🍍"]
fruits.pop(); // retire 🍍

📊 Tableaux – Méthodes avancées

forEach() – exécute une fonction pour chaque élément
map() – retourne un nouveau tableau transformé
filter() – retourne les éléments qui respectent une condition
reduce() – réduit un tableau à une seule valeur
find() – retourne le premier élément qui respecte une condition
some(), every() – vérifient si des éléments (ou tous) respectent une condition

let nombres = [1, 2, 3, 4, 5];

nombres.forEach(n => console.log("Nombre :", n));

let doublés = nombres.map(n => n * 2);
console.log(doublés); // [2, 4, 6, 8, 10]

let pairs = nombres.filter(n => n % 2 === 0);
console.log(pairs); // [2, 4]

let somme = nombres.reduce((acc, n) => acc + n, 0);
console.log(somme); // 15

let premierPair = nombres.find(n => n % 2 === 0);
console.log(premierPair); // 2

console.log(nombres.some(n => n > 4)); // true
console.log(nombres.every(n => n > 0)); // true

🧵 Chaînes de caractères

split(), replace(), includes()
toUpperCase(), toLowerCase(), trim()
indexOf(), substring()

let phrase = "  Bonjour user  ";
console.log(phrase.trim()); // "Bonjour user"
console.log(phrase.includes("user")); // true
let mots = phrase.trim().split(" ");
console.log(mots); // ["Bonjour", "user"]

🔢 Nombres

parseInt(), parseFloat()
toFixed() – nombre avec x décimales
Math.round(), floor(), ceil()

let prix = "19.99";
let num = parseFloat(prix);
console.log(num.toFixed(1)); // 20.0
console.log(Math.floor(num)); // 19

🔁 Structures de contrôle

if / else / else if – exécute du code selon une condition
switch – alternative à plusieurs if
for, while, do...while – boucles classiques
for...of, for...in – itérations sur objets/collections

// Condition simple
let age = 20;
if (age >= 18) {
  console.log("Majeur");
} else {
  console.log("Mineur");
}

// Switch
let jour = "lundi";
switch (jour) {
  case "lundi":
    console.log("Début de semaine");
    break;
  case "vendredi":
    console.log("Presque le week-end !");
    break;
  default:
    console.log("Jour quelconque");
}

// Boucle for
for (let i = 0; i < 3; i++) {
  console.log("i vaut", i);
}

// Boucle while
let compteur = 0;
while (compteur < 3) {
  console.log("compteur", compteur);
  compteur++;
}

// Boucle do...while
let j = 0;
do {
  console.log("j vaut", j);
  j++;
} while (j < 3);

// for...of (tableaux)
let fruits = ["🍎", "🍌", "🍇"];
for (let fruit of fruits) {
  console.log("Fruit :", fruit);
}

// for...in (objets)
let user = { nom: "user", age: 39 };
for (let cle in user) {
  console.log(cle, "=", user[cle]);
}

🗺️ Map et Set en JavaScript

Map : dictionnaire avec des clés de n'importe quel type
Set : collection d'éléments uniques

// MAP
let capitales = new Map();
capitales.set("France", "Paris");
capitales.set("Italie", "Rome");
console.log(capitales.get("France")); // Paris
console.log(capitales.has("Espagne")); // false
capitales.delete("Italie");

// SET
let nombres = new Set();
nombres.add(1);
nombres.add(2);
nombres.add(1); // Ignoré car doublon
console.log(nombres); // Set(2) {1, 2}

📦 Objets

Object.keys(), Object.values(), Object.entries()

let user = {
  nom: "user",
  age: 30
};

console.log(Object.keys(user)); // ["nom", "age"]
console.log(Object.values(user)); // ["user", 30]
console.log(Object.entries(user)); // [["nom", "user"], ["age", 30]]

🏗️ Classes en JavaScript

class – pour créer un objet modèle
constructor() – initialise les propriétés
méthode() – fonctions intégrées dans la classe

class Utilisateur {
  constructor(nom, age) {
    this.nom = nom;
    this.age = age;
  }

  sePresenter() {
    return \`Bonjour, je suis \${this.nom} et j'ai \${this.age} ans.\`;
  }
}

let user1 = new Utilisateur("user", 30);
console.log(user1.sePresenter()); // Bonjour, je suis user et j'ai 30 ans.

📍 Le mot-clé `this`

this fait référence à l’objet courant dans une fonction ou une classe

let utilisateur = {
  nom: "user",
  direBonjour: function() {
    console.log("Bonjour, je suis " + this.nom);
  }
};

utilisateur.direBonjour(); // Bonjour, je suis user

// Attention avec les fonctions fléchées :
let test = {
  nom: "JS",
  dire: () => {
    console.log(this.nom); // undefined, car this ne pointe pas sur test
  }
};

test.dire();

👨‍👦‍👦 Héritage avec `super`

super() appelle le constructeur de la classe parente
Permet d’hériter de propriétés et méthodes

class Animal {
  constructor(nom) {
    this.nom = nom;
  }

  parler() {
    return this.nom + " fait du bruit.";
  }
}

class Chien extends Animal {
  constructor(nom, race) {
    super(nom); // Appelle le constructeur de Animal
    this.race = race;
  }

  parler() {
    return super.parler() + " Wouf wouf !";
  }
}

let rex = new Chien("Rex", "Berger");
console.log(rex.parler()); // Rex fait du bruit. Wouf wouf !

🍪 Cookies en JavaScript

document.cookie – lire, écrire et modifier les cookies
expires= – définir une date d’expiration
path=/ – rendre le cookie accessible à tout le site

// Écrire un cookie
document.cookie = "utilisateur=user; expires=Fri, 31 Dec 2025 23:59:59 UTC; path=/";

// Lire tous les cookies
console.log(document.cookie);

// Exemple : fonction pour lire un cookie par nom
function getCookie(nom) {
  let cookies = document.cookie.split(';');
  for (let c of cookies) {
    let [cle, valeur] = c.trim().split('=');
    if (cle === nom) return valeur;
  }
  return null;
}

console.log(getCookie("utilisateur")); // user

// Supprimer un cookie (en mettant une date passée)
document.cookie = "utilisateur=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

💾 Stockage local (localStorage)

localStorage.setItem("clé", valeur) – enregistrer une donnée
localStorage.getItem("clé") – récupérer une donnée
localStorage.removeItem("clé") – supprimer une donnée
localStorage.clear() – tout effacer

// Stocker une valeur simple
localStorage.setItem("utilisateur", "user");

// Lire la valeur stockée
let nom = localStorage.getItem("utilisateur");
console.log(nom); // user

// Supprimer une donnée spécifique
localStorage.removeItem("utilisateur");

// Vider tout le stockage local
localStorage.clear();

// ➕ Stocker un objet (nécessite JSON)
let user = { nom: "user ", age: 30 };
localStorage.setItem("profil", JSON.stringify(user));

// Récupérer et reconvertir en objet
let profil = JSON.parse(localStorage.getItem("profil"));
console.log(profil.nom); // user

⏱️ Fonctions asynchrones (async / await)

async – rend une fonction asynchrone
await – attend la résolution d'une promesse
fetch() – méthode native pour appeler une API

// Simuler une requête asynchrone avec setTimeout
function attendre(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demoAsync() {
  console.log("Début...");
  await attendre(1000); // attend 1 seconde
  console.log("1 seconde plus tard...");
}

demoAsync();

// Exemple avec fetch() vers une API
async function chargerUtilisateur() {
  try {
    const reponse = await fetch("https://jsonplaceholder.typicode.com/users/1");
    const data = await reponse.json();
    console.log("Nom de l'utilisateur :", data.name);
  } catch (erreur) {
    console.log("❌ Erreur lors du chargement :", erreur);
  }
}

chargerUtilisateur();

    function delai(ms){
    return new Promise(resolve =>{
        setTimeout(() => {
            resolve() ;
        },ms) ;
    });
}

async function afficherMessage() {
    console.log('Chargement ...') ;
     await delai(3000) ;
  
    console.log('Message recu') ;    
}
afficherMessage();

   
async function bonjourPromesse() {
    return new Promise((resolve)=>{
        resolve('bonjour user');
    });
}
async function bonjourAsyn() {
    return 'bonjour user';
    }; 

    

bonjourPromesse().then(msg=>{console.log(msg)}) ;
 bonjourAsyn().then(msg =>{console.log(msg)});





 function attendre(ms) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(`⏱ Attendu ${ms} ms`);
    }, ms);
  });
}

async function tester() {
  console.log("Début");
  
  const resultat = await attendre(2000); // attend 2 secondes
  
  console.log(resultat);
  console.log("Fin");
}

tester();

📬 Promesses (Promise)

new Promise() – crée une promesse manuellement
.then() – exécute du code en cas de succès
.catch() – exécute du code en cas d’erreur
.finally() – s’exécute dans tous les cas

// Exemple de promesse simple
let maPromesse = new Promise((resolve, reject) => {
  let réussite = true;

  setTimeout(() => {
    if (réussite) {
      resolve("✅ Succès !");
    } else {
      reject("❌ Échec...");
    }
  }, 1000);
});

// Consommer la promesse
maPromesse
  .then(resultat => {
    console.log("Résultat :", resultat);
  })
  .catch(erreur => {
    console.log("Erreur :", erreur);
  })
  .finally(() => {
    console.log("Opération terminée.");
  });

  // Bonjour avec délai
function direBonjour(){
    return new Promise((resolve ) =>{
        setTimeout(()=>{
            resolve("bonjour user") ;
        },2000) ;
    })
}

direBonjour().then(msg => console.log(msg)) ;

 //Vérification d’âge
 function verifierAge(age) {
    return new Promise((resolve ,reject)=> {
        if(age >= 18) {
            resolve('Acces autorisé') ;
        }
        else{
            reject('Acces refusé') ;
        }
    }) ;
}

verifierAge(22).then(msg => console.log(msg))
.catch(msg => console.log(msg)) ;

//Chronomètre simplifié
function attendre(ms) {
    return new Promise((resolve)=>{
        setTimeout(()=>{
            resolve(`resolu ${ms}sec`)
        },ms);
    }) 
}
attendre(5000).then(msg=>{console.log(msg)}) ;



function verifierMotDePasse(mdp) {
    return new Promise((resolve , reject) =>{
        setTimeout(() => {
            const contientChiffre = /\d/.test(mdp) ;
            const contientMajuscule = /[A-Z]/.test(mdp);
            const longueurOk = mdp.length >= 8 ;

            if(contientChiffre && contientMajuscule && longueurOk) {
                resolve('mot de passe securisé' ) ;
            }
            else{
                reject('Mot de passe trop faible : minimum 8 caracter ,une majuscule ,et 1 chiffre');
        }
        }, 1000);
    })
}

verifierMotDePasse("Allouser123").then(msg =>{
    console.log(msg) ;
})
.catch(msg =>{
    console.log(msg) ;
});

⏱️ setInterval() et clearInterval()

setInterval() : exécute du code toutes les x millisecondes
clearInterval() : stoppe l’intervalle

let compteur = 0;

let intervalle = setInterval(() => {
  console.log("⏰ Compteur :", ++compteur);
  if (compteur === 5) clearInterval(intervalle);
}, 1000);

🔁 Fonctions Callback

Un callback est une fonction passée en argument à une autre fonction
Elle est appelée après l'exécution de l'action principale
Très utile pour le code asynchrone ou réutilisable

// Fonction avec callback
function traiterUtilisateur(nom, callback) {
  console.log("Utilisateur :", nom);
  callback(); // appel de la fonction passée
}

// Appel avec une fonction anonyme en callback
traiterUtilisateur("user", function() {
  console.log("✅ Traitement terminé !");
});

// Callback avec setTimeout
setTimeout(() => {
  console.log("⏱️ Callback exécuté après 1 seconde");
}, 1000);

⚠️ Gestion des exceptions (try / catch / finally)

try – bloc de code à tester
catch – capture les erreurs en cas d'échec
finally – exécuté dans tous les cas (facultatif)
throw – permet de déclencher une erreur personnalisée

try {
  let utilisateur = JSON.parse('{"nom":"user"}');
  console.log(utilisateur.nom); // user

  // Générer une erreur volontaire
  if (!utilisateur.age) {
    throw new Error("L'âge est manquant !");
  }

} catch (erreur) {
  console.log("🚨 Une erreur a été capturée :", erreur.message);

} finally {
  console.log("✅ Bloc finally exécuté, quoi qu'il arrive.");
}

📆 Dates en JavaScript

new Date() – crée un objet date
getFullYear(), getMonth(), getDate()
toLocaleDateString() – format lisible

let maintenant = new Date();
console.log(maintenant.toLocaleDateString()); // Ex: 07/07/2025
console.log(maintenant.getFullYear()); // 2025

🧮 Objet Math en JavaScript

Math.round(), Math.floor(), Math.ceil() – arrondir
Math.max(), Math.min() – valeur la plus grande/petite
Math.random() – nombre aléatoire entre 0 et 1
Math.sqrt(), Math.pow() – racine carrée, puissance
Math.abs() – valeur absolue
Math.PI, Math.E – constantes mathématiques

// Arrondir
console.log(Math.round(4.7));  // 5
console.log(Math.floor(4.7));  // 4
console.log(Math.ceil(4.1));   // 5

// Valeurs extrêmes
console.log(Math.max(1, 5, 3));  // 5
console.log(Math.min(1, 5, 3));  // 1

// Aléatoire entre 0 et 1
console.log(Math.random()); // ex: 0.5312...

// Nombre aléatoire entier entre 1 et 10
let aleatoire = Math.floor(Math.random() * 10) + 1;
console.log(aleatoire);

// Puissance et racine
console.log(Math.pow(2, 3));  // 8
console.log(Math.sqrt(16));   // 4

// Valeur absolue
console.log(Math.abs(-42));   // 42

// Constantes
console.log(Math.PI);  // 3.1415926535...
console.log(Math.E);   // 2.7182818284...

📦 Modules JavaScript (import/export)

export – exporter une fonction/valeur
import – importer dans un autre fichier

// fichier utils.js
export function addition(a, b) {
  return a + b;
}

// fichier main.js
import { addition } from "./utils.js";
console.log(addition(2, 3)); // 5

⚙️ Opérateurs logiques & conditionnels

&&, ||, !
=== vs ==
condition ? vrai : faux – opérateur ternaire

let age = 20;
let statut = age >= 18 ? "majeur" : "mineur";
console.log(statut); // majeur

🌐 DOM (Document Object Model)

document.querySelector(), getElementById()
innerHTML, textContent, classList
addEventListener() – écouter des événements

document.querySelector("h1").textContent = "Nouveau titre";
document.getElementById("btn").addEventListener("click", () => {
  alert("Bouton cliqué !");
});

🔧 Fonctions en JavaScript

function nom() – fonction classique
= () => {} – fonction fléchée
Paramètres par défaut

// Fonction classique
function direBonjour(nom = "inconnu") {
  return "Bonjour " + nom;
}

console.log(direBonjour("user"));

// Fonction fléchée
const carre = x => x * x;
console.log(carre(4)); // 16

📚 Méthodes de base JavaScript

🤖 TensorFlow JS

🔤 Variables

📦 Tableaux – Méthodes de base

📊 Tableaux – Méthodes avancées

🧵 Chaînes de caractères

🔢 Nombres

🔁 Structures de contrôle

🗺️ Map et Set en JavaScript

📦 Objets

🏗️ Classes en JavaScript

📍 Le mot-clé `this`

👨‍👦‍👦 Héritage avec `super`

🍪 Cookies en JavaScript

💾 Stockage local (localStorage)

⏱️ Fonctions asynchrones (async / await)

📬 Promesses (Promise)

⏱️ setInterval() et clearInterval()

🔁 Fonctions Callback

⚠️ Gestion des exceptions (try / catch / finally)

📆 Dates en JavaScript

🧮 Objet Math en JavaScript

📦 Modules JavaScript (import/export)

⚙️ Opérateurs logiques & conditionnels

🌐 DOM (Document Object Model)

🔧 Fonctions en JavaScript

📚 Méthodes de base JavaScript

🤖 TensorFlow JS

🔤 Variables

📦 Tableaux – Méthodes de base

📊 Tableaux – Méthodes avancées

🧵 Chaînes de caractères

🔢 Nombres

🔁 Structures de contrôle

🗺️ Map et Set en JavaScript

📦 Objets

🏗️ Classes en JavaScript

📍 Le mot-clé this

👨‍👦‍👦 Héritage avec super

🍪 Cookies en JavaScript

💾 Stockage local (localStorage)

⏱️ Fonctions asynchrones (async / await)

📬 Promesses (Promise)

⏱️ setInterval() et clearInterval()

🔁 Fonctions Callback

⚠️ Gestion des exceptions (try / catch / finally)

📆 Dates en JavaScript

🧮 Objet Math en JavaScript

📦 Modules JavaScript (import/export)

⚙️ Opérateurs logiques & conditionnels

🌐 DOM (Document Object Model)

🔧 Fonctions en JavaScript

📍 Le mot-clé `this`

👨‍👦‍👦 Héritage avec `super`