Rendez votre première application Web incroyable avec ces 10 API Web de base

À l'aide de JavaScript, vous pouvez radicalement transformer des documents HTML, en ajoutant des fonctionnalités aux pages Web statiques et même en créant des applications Web complètes. À la base, JavaScript peut faire tout ce que tout autre langage de programmation peut. Cependant, au-delà de cela, les navigateurs Web implémentent plusieurs API Web qui fournissent une prise en charge puissante pour diverses fonctionnalités.

1

Accéder et modifier HTML avec le DOM

Toutes les API Web (interface de programmation d'application) fournissent du code pour que vous n'ayez pas à le faire. Ils gèrent les détails complexes de bas niveau, permettant aux développeurs de se concentrer sur la création de leur application ou d'ajouter de petites améliorations dynamiques à leur site.

Beaucoup de ces API ciblent des technologies spécifiques telles que l'entrée ou les notifications à écran tactile. Cette première API, cependant, est fondamentale pour toutes les programmes Web qui impliquent un document, comme une page Web écrite en HTML.

Le DOM (Document Object Model) est une représentation standard d'une page Web que JavaScript peut utiliser pour inspecter son contenu ou modifier certaines parties. Il reflète la nature hiérarchique du HTML et traite des concepts de base comme les nœuds, les éléments, les événements et le texte.

Si vous souhaitez modifier du texte sur une page Web, supprimez tous les paragraphes ou mettez en évidence les erreurs d'orthographe, le DOM sera au cœur de celui-ci. Par exemple, voici un extrait court qui changera la couleur de chaque paragraphe sur une page:

        document.querySelectorAll("p").forEach(function(element) {
    element.style.color = "orange";
});

    

Le DOM fournit la méthode document.QuerySelectorall () et la propriété htmlelement.style. Respectivement, ils récupèrent les éléments correspondants et accédent à CSS en ligne.

Vous pouvez exécuter cet extrait sur n'importe quel site Web, en utilisant la fonctionnalité des outils de développeur de votre navigateur. C'est un bon moyen de vérifier à quel point une page Web est bien structurée: Si les choses que vous attendez de paragraphes ne deviennent pas orange, il peut y avoir des erreurs dans le HTML.

2

Créer et manipuler les URL plus facilement

Certaines API Web ont une énorme portée, mais d'autres sont beaucoup plus limitées. Cette API est l'une de ces derniers. L'API URL comprend des méthodes pratiques pour fonctionner avec les URL.

La prise en charge de l'URL était utilisée pour la programmation Web JavaScript, mais l'API URL a rendu la tâche beaucoup plus facile.

        let addr = new URL("https://example.com/this/is/just?an=example");
console.log(addr.pathname);
console.log(addr.searchParams.get("an"));

    

Analyse d'une URL, via le constructeur Window.url (), renvoie un objet avec des propriétés représentant différentes parties de cette URL. Ceux-ci incluent des choses comme hacher pour l'identifiant des fragments, hôte pour le domaine et le port de l'URL, et SearchParams qui donne accès aux paramètres de requête.

3

Répondre au contenu Web

Si vous traitez le href Valeurs des liens sur une page ou gérant les URL pour les services distants, la récupération est une ressource facile et utile. L'API Fetch vous permet d'écrire du code qui agit un peu comme un navigateur sans tête.

Vous pouvez récupérer le contenu distant et l'injecter dans une page, ou récupérer des données et les traiter. Si un site fournit des prévisions météorologiques ou des données boursières, vous pouvez utiliser Fetch pour saisir ces données et l'intégrer à votre propre application.

Une seule méthode – window.fetch () – fournit toutes les fonctionnalités de l'API Fetch. Voici un exemple simple de la façon de l'utiliser:

        fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
    .then(json => console.log(json))

    

Si vous exécutez cela dans la console de votre navigateur, il devrait imprimer les détails de l'objet que vous voyez si vous allez directement sur https://jsonplaceholder.typicode.com/todos/1. Dans les coulisses, l'API Fetch envoie une demande au site Web Target et renvoie la réponse au code d'appel, prêt pour un traitement ultérieur.

4

Inspectez et modifiez l'historique de navigation du navigateur

Une grande partie du travail impliqué lors de la création d'applications Web consiste à s'attaquer aux restrictions imposées par HTTP. Le protocole a été conçu pour répondre à des documents distincts, chargés et affichés via des demandes individuelles. La programmation JavaScript complique les choses; En particulier, les applications Web peuvent polluer l'historique du navigateur et peuvent casser le bouton de dos si vous ne faites pas attention.

Pour gérer ces problèmes, l'API de l'historique vous permet de naviguer et de modifier l'historique de l'utilisateur. L'utilisation la plus pratique de cette fonctionnalité consiste à injecter des entrées utiles dans l'histoire qui autrement irait ignorer. Par exemple, vous pouvez avoir un bouton qui met à jour votre document à l'aide de JavaScript:

        <button id="b" data-page="page2.html">Page 2button>

    

Vous pouvez ensuite ajouter une entrée à l'historique du navigateur lorsque ce bouton appuyez sur la mise à jour du contenu de la page:

        button.addEventListener("click", function(ev) {
    let page = ev.target.getAttribute("data-page"),
        data = fetch_page(page);
    history.pushState(data, "", page);
});

    

La méthode pushstate () ajoute une entrée à l'historique du navigateur, avec un enregistrement de données que vous pouvez récupérer si l'utilisateur revient à cette page. En conséquence, votre application Web peut être beaucoup plus réactive, en évitant des voyages inutiles vers le serveur, mais en présentant toujours un historique de navigation utile.

5

Remplacez les cookies par un stockage accessible à JavaScript

L'ancienne façon de stocker l'état à travers les demandes HTTP était d'utiliser des cookies. Ces petits paquets de données ont été enregistrés sur le client et transmis au serveur dans des en-têtes HTTP, mais cela signifiait que JavaScript ne pouvait pas y accéder.

Pour prendre en charge un mécanisme similaire pour JavaScript, l'API de stockage Web vous permet d'enregistrer des données, soit pour la session en cours, soit en permanence. C'est un système de paire de clés / valeur simple:

        localStorage.setItem("Theme", "Dark");
...
let theme = localStorage.getItem("Theme");

    

Cette API est parfaite pour les applications Web qui n'ont pas besoin de fonctionnalités de serveur. Vous pouvez facilement mettre à niveau un site Web statique en stockant les préférences des utilisateurs ou les données sur les pages visualisées.

Les valeurs que vous enregistrez à l'aide de l'API de stockage Web doivent être des chaînes. Pour stocker d'autres types de données, vous pouvez les convertir en JSON à l'aide de JSON.StRingify () avant de les enregistrer, puis appelez JSON.Parse () sur Load.

6

Découvrez où vos utilisateurs utilisent la géolocalisation

Historiquement, si vous aviez besoin de travailler avec l'emplacement physique d'un visiteur, vous auriez besoin d'une application native. L'API Geolocation fournit cette fonctionnalité aux navigateurs Web, à condition que l'autorisation des subventions de l'utilisateur.

Les détails de l'emplacement peuvent être utilisés pour de nombreuses raisons: montrer les magasins à proximité, pour fournir un contenu spécifique à l'emplacement ou pour déterminer le fuseau horaire d'un utilisateur, par exemple. Travailler avec l'emplacement de l'utilisateur est aussi simple que d'appeler la méthode getCurrentPosition () de l'objet Navigator.Geolocation:

        navigator.geolocation.getCurrentPosition(success, error);

    

Vous devrez définir les fonctions d'erreur et de réussite; Ce dernier est transmis un objet GeolocationPosition avec une propriété Coords. Il n'y a pas de cloches et de sifflets ici, vous devrez donc récupérer des informations comme le pays ou le fuseau horaire séparément. Mais les coordonnées que vous récupérez peuvent être très précises, et l'API est simple à utiliser.

7

Lire et écrire des fichiers sur le disque local

Traditionnellement, les applications Web n'ont pas pu accéder à des fichiers locaux, pour des raisons de sécurité. C'est dommage car il empêche tout un ensemble d'applications intéressantes, comme les programmes de peinture, les éditeurs de texte, etc. Heureusement, l'API du système de fichiers permet ces utilisations.

        async function getFile() {
    const (fileHandle) = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();
    console.log(file.name + " is a " + file.type);
    return file;
}

    

Vous pouvez utiliser l'objet de fichier résultant pour lire les données du fichier, directement à partir du disque. L'écriture est un processus similaire, impliquant la méthode showAveFilePicker () et la méthode CreateWritable () de FileHandle.

L'utilisation des classes du système de fichiers, la lecture et l'écriture de données sont désormais largement transparentes, permettant une intégration plus stricte avec le stockage du disque local. Cette API est l'une des plus importantes pour mettre en ligne les applications Web avec les applications natives.

8

Servir les notifications utiles et opportunes

Les applications mobiles ont des fonctionnalités pionnières qui disent automatiquement aux utilisateurs des événements importants. C'est utile lorsqu'une application vous parle de quelque chose afin que vous n'ayez pas à aller à la recherche vous-même.

Cependant, les applications Web rattrapent leur retard. Vous avez peut-être vu des applications Web offrant leurs propres notifications, et celles-ci sont activées par l'API de notifications.

Il y a plusieurs étapes au workflow de notification, à commencer par demander l'autorisation:

        Notification.requestPermission().then((result) => {
    console.log(result);
});

    

Il s'agit d'une étape vitale que l'API applique car personne ne veut que des sites Web créent des notifications contre leur volonté. Avec la permission, cependant, l'envoi d'une notification est assez facile:

        new Notification("Do something important!");

    

Si les paramètres de votre navigateur le permettent, cela montrera immédiatement une notification. Pour une application Web de longue date, comme un site de médias sociaux, vous pouvez interroger pour un nouveau contenu par intermittence, puis créer une notification si un message correspondant apparaît dans le flux.

9

Dessinez sur l'écran à l'aide de toile

L'API Canvas fournit des fonctions de bas niveau pour dessiner des graphiques dans un élément de toile. Vous pouvez l'utiliser pour créer des images dynamiques, créer un jeu ou développer une application graphique à part entière.

Commencez par un élément de toile dans votre page Web:

        <canvas id="c">canvas>

    

Avec cet élément en place, il est facile de dessiner un rectangle:

        document.getElementById("c").getContext("2d").fillRect(10, 10, 100, 60);

    

L'API complète prend en charge de nombreuses formes, couleurs et styles différentes. Il vous permet de dessiner du texte, de transformer des images et même de créer des animations complexes.

10

Prise en charge des contrôleurs GamePad connectés

Une autre API que vous pourriez être surpris de voir: Oui, les applications Web peuvent prendre en charge GamePads et autres contrôleurs de jeu!

Pour détecter les pressions sur les bouton, vous devrez utiliser le sondage plutôt que la manipulation des événements, et cela peut être moins pratique. L'approche standard est comme ceci:

        requestAnimationFrame(updateStatus);
function updateStatus() {
    let gamepad = navigator.getGamepads()(0);
    const GAMEPAD_BUTTON_LEFT = 14;
    if (gamepad) {
        gamepad.buttons.entries().forEach(function (btn) {
            if (btn(0) === GAMEPAD_BUTTON_LEFT && btn(1).pressed) {
                console.log("LEFT is pressed");
            }
        });
    }
    requestAnimationFrame(updateStatus);
}

    

Vous devrez gérer les mappages de bouton, et ce code peut être assez complexe, mais cela vaut la peine d'ajouter la prise en charge des GamePads à vos jeux Web.

---

Ces API Web – et bien d'autres – sont documentées sur MDN. La meilleure façon de les apprendre est d'essayer un exemple de code, comme les extraits ci-dessus. Expérimentez dans la console JavaScript de votre navigateur et découvrez de nouveaux types d'applications que vous pouvez créer en utilisant uniquement HTML, CSS et JavaScript.