APIs

// Vérifier si le navigateur supporte la géolocalisation
if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
} else {
    console.log("Géolocalisation non supportée");
}

function successCallback(position) {
    const lat = position.coords.latitude;
    const lng = position.coords.longitude;
    console.log(`Latitude : ${lat}, Longitude : ${lng}`);
}

function errorCallback(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED: console.log("Permission refusée"); break;
        case error.POSITION_UNAVAILABLE: console.log("Position indisponible"); break;
        case error.TIMEOUT: console.log("Délai dépassé"); break;
    }
}

navigator.geolocation.getCurrentPosition(
    (position) => {
        document.getElementById('lat').textContent = position.coords.latitude;
        document.getElementById('lng').textContent = position.coords.longitude;
        document.getElementById('accuracy').textContent = position.coords.accuracy;
    },
    (error) => {
        document.getElementById('geo-error').textContent = "Erreur : " + error.message;
    }
);

// watchPosition suit les déplacements
const watchId = navigator.geolocation.watchPosition(
    (position) => {
        // Mise à jour de l'affichage à chaque déplacement
        updatePosition(position);
    },
    (error) => handleError(error),
    { enableHighAccuracy: true }
);

// Pour arrêter le suivi
navigator.geolocation.clearWatch(watchId);

<select id="theme">
    <option value="clair">Clair</option>
    <option value="sombre">Sombre</option>
</select>

<script>
    // Charger le thème sauvegardé
    const savedTheme = localStorage.getItem('theme') || 'clair';
    document.getElementById('theme').value = savedTheme;
    applyTheme(savedTheme);

    // Sauvegarder le choix
    document.getElementById('theme').addEventListener('change', (e) => {
        localStorage.setItem('theme', e.target.value);
        applyTheme(e.target.value);
    });
</script>

// Sauvegarder une liste de tâches
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

function addTask(task) {
    tasks.push(task);
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

function getTasks() {
    return JSON.parse(localStorage.getItem('tasks')) || [];
}

function removeTask(index) {
    tasks.splice(index, 1);
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

<div draggable="true" ondragstart="dragStart(event)">Élément déplaçable</div>
<div ondrop="drop(event)" ondragover="allowDrop(event)">Zone de dépôt</div>

<script>
    function dragStart(event) {
        event.dataTransfer.setData("text/plain", event.target.id);
    }
    function allowDrop(event) {
        event.preventDefault();
    }
    function drop(event) {
        event.preventDefault();
        const data = event.dataTransfer.getData("text/plain");
        const draggedElement = document.getElementById(data);
        event.target.appendChild(draggedElement);
    }
</script>

<ul id="taskList">
    <li draggable="true" ondragstart="dragStart(event)">Tâche 1</li>
    <li draggable="true" ondragstart="dragStart(event)">Tâche 2</li>
</ul>

<script>
    let dragIndex = null;
    function dragStart(event) {
        dragIndex = event.target;
        event.dataTransfer.setData("text/plain", "move");
    }
    function drop(event) {
        event.preventDefault();
        const targetLi = event.target.closest('li');
        if (targetLi && dragIndex !== targetLi) {
            const parent = dragIndex.parentNode;
            const children = [...parent.children];
            const dragPos = children.indexOf(dragIndex);
            const targetPos = children.indexOf(targetLi);
            if (dragPos < targetPos) {
                parent.insertBefore(dragIndex, targetLi.nextSibling);
            } else {
                parent.insertBefore(dragIndex, targetLi);
            }
        }
    }
</script>

// worker.js (fichier séparé)
self.onmessage = function(e) {
    let result = 0;
    for(let i = 0; i < e.data; i++) {
        result += i;
    }
    self.postMessage(result);
};

// script principal
if (window.Worker) {
    const myWorker = new Worker('worker.js');
    myWorker.postMessage(1000000000);
    myWorker.onmessage = function(e) {
        console.log('Somme calculée : ' + e.data);
    };
}

// Fonction worker inline (Blob)
const workerCode = `
    self.onmessage = function(e) {
        let result = 0;
        for(let i = 0; i < e.data.iterations; i++) {
            result += Math.sqrt(i);
        }
        self.postMessage({ result, iterations: e.data.iterations });
    };
`;
const blob = new Blob([workerCode], {type: "application/javascript"});
const worker = new Worker(URL.createObjectURL(blob));

worker.postMessage({ iterations: 50000000 });
worker.onmessage = (e) => {
    console.log(`Terminé: ${e.data.result}`);
};

// Connexion WebSocket
const socket = new WebSocket('wss://echo.websocket.org');

// Ouverture de la connexion
socket.onopen = () => {
    console.log('Connecté');
    socket.send('Bonjour serveur !');
};

// Réception de messages
socket.onmessage = (event) => {
    console.log('Message reçu :', event.data);
};

// Erreur
socket.onerror = (error) => {
    console.error('Erreur :', error);
};

// Fermeture
socket.onclose = () => {
    console.log('Déconnecté');
};

// Envoyer un message
socket.send('Hello world');

const ws = new WebSocket('wss://echo.websocket.org');

document.getElementById('sendBtn').onclick = () => {
    const msg = document.getElementById('msgInput').value;
    ws.send(msg);
    addMessage(`Moi: ${msg}`, 'outgoing');
};

ws.onmessage = (event) => {
    addMessage(`Serveur: ${event.data}`, 'incoming');
};

function addMessage(msg, type) {
    const div = document.createElement('div');
    div.textContent = msg;
    div.style.padding = '5px 10px';
    div.style.margin = '5px';
    div.style.borderRadius = '15px';
    div.style.backgroundColor = type === 'outgoing' ? '#3498db' : '#ecf0f1';
    div.style.color = type === 'outgoing' ? 'white' : '#333';
    div.style.textAlign = type === 'outgoing' ? 'right' : 'left';
    messagesContainer.appendChild(div);
}