1. Vérifier l'activation des cookies

Pour déterminer si les cookies sont activés dans le naviagteur, utilisez la propriété navigator.cookieEnabled.

if (navigator.cookieEnabled) {
    console.log("Les cookies sont activés");
} else {
    console.log("Les cookies sont désactivés");
}

2. Extraire les paramètres de l'URL

Pour obtenir la valeur d'un paramètre spécifique à partir de l'URL, on peut utiliser une expression régulière. Voici une fonction refactorisée :

function extraireParametreURL(nom) {
    const regexParam = new RegExp(`(^|&)${nom}=([^&]*)(&|$)`);
    const chaineRecherche = window.location.search.substring(1);
    const correspondance = chaineRecherche.match(regexParam);
    if (correspondance !== null) {
        return decodeURIComponent(correspondance[2]);
    }
    return null;
}

Exemple d'utilisation : pour récupérer le paramètre "age" dans une URL comme page.html?id=123&age=10&sb=1, on appelle extraireParametreURL("age") qui retourne "10".

3. Utilisation des expressions régulières

Les expressions régulières sont utiles pour analyser des chaînes. Par exemple, l'expression régulière /(^|&)age=([^&]*)(&|$)/ correspond aux motifs où "age" apparaît dans une requête URL.

4. Gestion du redimensionnement de la fenêtre

Pour ajuster dynamiquement le contenu lors du redimensionnement de la fenêtre, on peut écouter l'événement resize avec jQuery.

function configurerRedimensionnement() {
    $(window).on('resize', function() {
        const largeurFenetre = $(this).width();
        const elementCible = document.getElementById('conteneur');
        if (elementCible) {
            elementCible.className = largeurFenetre > 1366 ? 'classe-large' : 'classe-étroite';
        }
    }).trigger('resize');
}
configurerRedimensionnement();

5. Chargement dynamique de scripts et de feuilles de style

On peut charger des fichiers JavaScript ou CSS de manière asynchrone en créant des éléments DOM. Voici un exemple pour charger un script :

function chargerScript(url, rappel) {
    const elementScript = document.createElement('script');
    elementScript.type = 'text/javascript';
    elementScript.src = url;
    document.head.appendChild(elementScript);
    
    elementScript.onload = function() {
        if (typeof rappel === 'function') {
            rappel();
        }
    };
}

// Charger une feuille de style
function chargerFeuilleStyle(url) {
    const elementLien = document.createElement('link');
    elementLien.rel = 'stylesheet';
    elementLien.href = url;
    document.head.appendChild(elementLien);
}

6. Détection du système d'exploitation

Pour identifier le système d'explotiation du client, on analyse la chaîne navigator.userAgent. Voici une fonction améliorée :

function detecterSystemeExploitation() {
    const agentUtilisateur = navigator.userAgent.toLowerCase();
    const plateforme = navigator.platform;
    
    if (/android/.test(agentUtilisateur)) {
        const versionAndroid = agentUtilisateur.match(/android\s([\d.]+)/)[1];
        return `Android ${versionAndroid}`;
    }
    if (/iphone|ipad|ipod/.test(agentUtilisateur)) {
        const versionIOS = agentUtilisateur.match(/os\s([\d_]+)/)[1].replace(/_/g, '.');
        return `iOS ${versionIOS}`;
    }
    if (plateforme.startsWith('Win')) {
        if (/windows nt 10/.test(agentUtilisateur)) return 'Windows 10';
        if (/windows nt 6.1/.test(agentUtilisateur)) return 'Windows 7';
        // Ajouter d'autres conditions pour les versions Windows
        return 'Windows';
    }
    if (plateforme.startsWith('Mac')) return 'macOS';
    if (plateforme.startsWith('Linux')) return 'Linux';
    return 'Autre';
}

7. Identification du navigateur et de sa version

Pour déterminer le navigateur utilisé, on peut se baser sur navigator.userAgent. Voici une méthode structurée :

function identifierNavigateur() {
    const agent = navigator.userAgent;
    let navigateur = 'Inconnu';
    let version = '';
    
    if (/chrome/i.test(agent) && !/edge/i.test(agent)) {
        navigateur = 'Chrome';
        version = agent.match(/chrome\/([\d.]+)/)[1];
    } else if (/firefox/i.test(agent)) {
        navigateur = 'Firefox';
        version = agent.match(/firefox\/([\d.]+)/)[1];
    } else if (/safari/i.test(agent) && !/chrome/i.test(agent)) {
        navigateur = 'Safari';
        version = agent.match(/version\/([\d.]+)/)[1];
    } else if (/edge/i.test(agent)) {
        navigateur = 'Edge';
        version = agent.match(/edge\/([\d.]+)/)[1];
    }
    return { navigateur, version };
}

8. Obtenir la source du site (referrer)

Pour savoir de quel site l'utilisateur provient, on utilise la propriété document.referrer.

function obtenirSourceSite() {
    const referrer = document.referrer;
    if (referrer) {
        const urlSource = new URL(referrer);
        return urlSource.origin;
    }
    return 'Direct';
}

9. Génération d'un identifiant unique (UID)

Pour créer un UID basé sur l'horodatage et un nombre aléatoire :

function genererUID() {
    const horodatage = Date.now();
    const aleatoire = Math.random().toString(36).substring(2, 8);
    return `${horodatage}${aleatoire}`;
}

10. Requêtes AJAX avec JSONP

JSONP permet de contourner les restrictions CORS pour les requêtes cross-origin. Exemple avec jQuery :

function effectuerRequeteJSONP(url, rappelSucces) {
    $.ajax({
        type: 'GET',
        url: url,
        dataType: 'jsonp',
        jsonp: 'callback',
        timeout: 5000,
        success: function(donnees) {
            rappelSucces(donnees);
        },
        error: function(jqXHR, statut, erreur) {
            console.error(`Erreur : ${statut}`);
        }
    });
}

11. Exemple de bouton "retour en haut"

Pour implémenter un bouton qui ramène l'utilisateur en haut de la page avec animasion :

$(document).ready(function() {
    $(window).scroll(function() {
        const positionScroll = $(this).scrollTop();
        if (positionScroll > 300) {
            $('#bouton-retour').fadeIn();
        } else {
            $('#bouton-retour').fadeOut();
        }
    });
    
    $('#bouton-retour').click(function() {
        $('html, body').animate({ scrollTop: 0 }, 600);
        return false;
    });
});

12. Comparaison de tableaux

Pour vérifier si deux tableaux sont identiques en contenu, on peut les trier puis les comparer :

function comparerTableaux(tableau1, tableau2) {
    if (tableau1.length !== tableau2.length) return false;
    
    const copie1 = [...tableau1].sort();
    const copie2 = [...tableau2].sort();
    
    return copie1.every((valeur, index) => valeur === copie2[index]);
}