Types de données fondamentaux en JavaScript

Les types de données primitifs incluent chaîne de caractères, nombre, booléen, null, undefined, objet, symbole et BigInt. Les types primitifs sont stockés dans la pile mémoire, tandis que les types de référence comme les objets, tableaux et fonctions sont stockés dans le tas.

Utilisation d'Ajax

Ajax permet de mettre à jour des parties d'une page sans rechargement complet. Un exemple simplifié :

var requete = new XMLHttpRequest();
requete.open('GET', 'https://exemple.com/api/donnees', true);
requete.onreadystatechange = function() {
    if (requete.readyState === 4 && requete.status === 200) {
        console.log(requete.responseText);
    }
};
requete.send();

Différences entre Ajax, axios et fetch

Ajax est une technique basée sur XMLHttpRequest. Fetch est une API native moderne basée sur les promesses. Axios est une bibliothèque tierce avec intercepteurs et gestion automatique des données.

Détection de NaN

Utiliser typeof valeur === 'number' && isNaN(valeur) pour une vérification précise.

Différence entre null et undefined

null représente une valeur vide intentionnelle, tandis que undefined indique une absence de valeur. Number(null) donne 0, Number(undefined) donne NaN.

Fonctions de fermeture (closures)

Une closure est une fonction qui capture les variables de son environnement lexical. Exemple :

var creationFermeture = function() {
    var variablePrivee = 'donnée privée';
    return function() {
        console.log(variablePrivee);
    };
};
var fermeture = creationFermeture();
fermeture();

Modularisation en JavaScript

CommonJS utilise require/exports pour Node.js, tandis que ES6 utilise import/export pour les navigateurs.

Fuites de mémoire courantes

Les fuites incluent les intervalles non nettoyés, les écouteurs d'événements non supprimés, et les closures maintenant des références.

Propagation d'événements

Les événements se propagent du bas vers le haut (bubbling). Arrêter avec event.stopPropagation().

Délégation d'événements

Ajouter un écouteur à un élément parent, utiliser event.target pour identifier la source.

Stockage côté client

Cookie : petite capacité, envoyé avec les requêtes. localStorage : persistance. sessionStorage : durée de vie limitée à la session.

Nouveautés ES6

Incluent let/const, fonctions fléchées, chaînes de modèles, déstructuration, promesses, modules, et plus.

Boucles for...in et for...of

for...in itère sur les clés d'un objet, for...of itère sur les valeurs d'un itérable.

Déclarations var, let, const

var a une portée fonctionnelle, let/const ont une portée de bloc. const ne peut pas être réassigné.

Méthodes de tableau

Certaines modifient le tableau original (push, pop, splice), d'autres retournent un nouveau tableau (map, filter).

Manipulation de JSON

Convertir en objet avec JSON.parse(), en JSON avec JSON.stringify(). Ajouter ou supprimer des clés directement sur l'objet.

Contrôle du contexte this

bind retourne une nouvelle fonction, apply et call s'exécutent immédiatement avec des arguments différents.

var objet = { valeur: 10 };
function afficher() { console.log(this.valeur); }
var liee = afficher.bind(objet);
liee();

Implémentation de bind

Function.prototype.monBind = function(contexte) {
    var fonctionOriginale = this;
    var argumentsInitiaux = Array.from(arguments).slice(1);
    return function() {
        return fonctionOriginale.apply(contexte, argumentsInitiaux.concat(Array.from(arguments)));
    };
};

Relations entre window et document

document est la représentation du HTML chargé, accessible via window.document.

Programmation orientée objet

Basée sur l'encapsulation, l'héritage et le polymorphisme. Les classes ES6 fournissent une syntaxe claire.

Fonctions et constructeurs

Les constructeurs sont appelés avec new pour créer des instances. this pointe vers l'instance.

Prototypes et chaîne de prototypes

Chaque objet a un prototype. Les propriétés sont cherchées le long de la chaîne jusqu'à Object.prototype.

Opérateur new

Crée un objet vide, lie le prototype, exécute le constructeur et retourne l'objet.

Héritage avec ES6

class Animal {
    constructor(nom) { this.nom = nom; }
    parler() { console.log(this.nom + ' fait un bruit'); }
}
class Chien extends Animal {
    constructor(nom) { super(nom); }
}
var rex = new Chien('Rex');
rex.parler();

Comprendre les promesses

Les promesses gèrent l'asynchrone avec trois états : en attente, résolu, rejeté. Exemple :

var maPromesse = new Promise(function(resolve, reject) {
    setTimeout(function() { resolve('Succès'); }, 1000);
});
maPromesse.then(function(resultat) { console.log(resultat); });

Méthodes des promesses

Promise.all() attend toutes les promesses, Promise.race() attend la première.

async/await

Syntaxe pour écrire du code asynchrone de manière synchrone.

async function exemple() {
    try {
        var donnee = await fetch('https://api.exemple.com');
        console.log(await donnee.json());
    } catch (erreur) {
        console.error(erreur);
    }
}

Processus de chargement de page

DNS, poignée de main TCP, requête HTTP, analyse du DOM et rendu.

Flux d'événements

Capture phase puis bubbling phase. addEventListener avec troisième paramètre pour contrôler la phase.

Event Loop

Mécanisme qui gère l'asynchrone en JavaScript via des files d'attente de macro-tâches et micro-tâches.

Propriétés de dimensionnement

clientHeight inclut padding, offsetHeight inclut border, scrollHeight est la hauteur totale du contenu.

Position de la souris

clientX/Y relatif à la fenêtre, offsetX/Y relatif à l'élément cible.

Glisser-déposer

Utiliser l'API HTML5 Drag and Drop avec événements comme dragstart, dragover, drop.

Récupération de mémoire

JavaScript utilise le comptage de références et le marquage-suppression pour libérer la mémoire non utilisée.

DOM vs BOM

DOM représente le document HTML, BOM représente les objets du navigateur comme window.

Surveillance des propriétés d'objet

Utiliser Object.defineProperty ou Proxy pour intercepter les modifications.

Chargement séquentiel d'images

var urlsImages = ['img1.jpg', 'img2.jpg'];
function chargerImage(src) {
    return new Promise(function(resolve, reject) {
        var img = new Image();
        img.onload = function() { resolve(img); };
        img.onerror = reject;
        img.src = src;
    });
}
async function chargerImages() {
    for (var url of urlsImages) {
        await chargerImage(url);
    }
}

Copie superficielle vs profonde

La copie superficielle ne duplique pas les objets imbriqués, la copie profonde crée une copie indépendante.

Clonage profond

function clonageProfond(objet, vus) {
    if (objet === null || typeof objet !== 'object') return objet;
    if (!vus) vus = new WeakMap();
    if (vus.has(objet)) return vus.get(objet);
    var clone = Array.isArray(objet) ? [] : {};
    vus.set(objet, clone);
    for (var cle in objet) {
        if (objet.hasOwnProperty(cle)) {
            clone[cle] = clonageProfond(objet[cle], vus);
        }
    }
    return clone;
}

Caractéristiques de JavaScript

Typage dynamique, héritage prototypla, exécution côté client et serveur.

Politique de même origine

Empêche les requêtes entre domaines différents pour des raisons de sécurité.

Optimisation du chargement

Compression des ressources, chargement paresseux, utilisation de CDN.

JSONP

Technique de contournement des restricsions de même origine via des balises script.

Dédoublonnage de tableaux

Utiliser Set ou filter avec indexOf.

var unique = [...new Set(tableau)];

Fonctions fléchées vs classiques

Les fonctions fléchées n'ont pas de propre this, arguments ou prototype.

Codes de statut HTTP

200 OK, 404 Not Found, 500 Internal Server Error, etc.

Préchargement et chargement paresseux

Le préchargement anticipe les besoins, le chargement paresseux retarde le chargement des ressources non essentielles.

Throttling et debouncing

Throttling limite la fréquence d'exécution, debounding retarde l'exécution après la dernière invocation.

function debounce(fn, delai) {
    var minuterie;
    return function() {
        clearTimeout(minuterie);
        minuterie = setTimeout(fn, delai);
    };
}

Minuteries en JavaScript

setTimeout pour un délai unique, setInterval pour des répétitions. clear... pour annuler.

typeof et instanceof

typeof pour les types primitifs, instanceof pour vérifier le prototype.

Expressions régulières

Motifs pour la recherche et manipulation de texte. Exemple : /^[a-z]+@[a-z]+\.[a-z]+$/ pour les emails.

Arguments et objets pseudo-tableaux

arguments est accesisble dans les fonctions classiques, convertir avec Array.from(arguments).

Précision des nombres flottants

0.1 + 0.2 !== 0.3 dû à la représentation binaire. Utiliser toFixed() pour arrondir.

Vérification de tableau

Array.isArray() ou instanceof Array.

substring vs substr

substring(start, end), substr(start, longueur).

Mode strict

Active avec 'use strict'; pour un code plus sécurisé et moins tolérant aux erreurs.

Set et Map

Set stocke des valeurs uniques, Map stocke des paires clé-valeur avec des clés de tout type.

Map vs WeakMap

WeakMap accepte uniquement des objets comme clés et utilise des références faibles pour la récupération de mémoire.

Portée et chaîne de portée

Les variables sont cherchées dans les portées imbriquées jusqu'à la portée globale.

Redirection de page

window.location.href en JavaScript, wx.navigateTo en mini-programmes.