book

Livre de recettes de l'API Web

by Joe Attardi

November 2024

Intermediate to advanced

286 pages

6h 6m

French

O'Reilly Media, Inc.

Read now

Unlock full access

La puissance des navigateurs modernesInconvénients des bibliothèques tiercesÀ qui s'adresse ce livreCe que contient ce livreRessources supplémentairesCanIUse.comDocs Web MDNCaractéristiquesConventions utilisées dans ce livreUtiliser des exemples de codeApprentissage en ligne O'ReillyComment nous contacterRemerciements
IntroductionFonctions de rappelÉvénementsPromessesTravailler avec des promessesProblèmeSolutionDiscussionChargement d'une image avec un repliProblèmeSolutionDiscussionEnchaîner les promessesProblèmeSolutionDiscussionUtilisation des mots-clés async et awaitProblèmeSolutionDiscussionUtiliser les promesses en parallèleProblèmeSolutionDiscussionAnimer un élément avec requestAnimationFrameProblèmeSolutionDiscussionEnvelopper une API d'événement dans une promesseProblèmeSolutionDiscussion
IntroductionObtention et réglage des élémentsInconvénientsVérification de la prise en charge du stockage WebProblèmeSolutionDiscussionPersistance des données de chaîneProblèmeSolutionDiscussionPersistance d'objets simplesProblèmeSolutionDiscussionPersistance d'objets complexesProblèmeSolutionDiscussionÀ l'écoute des changements de stockageProblèmeSolutionDiscussionTrouver toutes les clés connuesProblèmeSolutionDiscussionSuppression des donnéesProblèmeSolutionDiscussion
IntroductionParties d'une URLRésoudre une URL relativeProblèmeSolutionDiscussionSupprimer les paramètres de requête d'une URLProblèmeSolutionDiscussionAjouter des paramètres de requête à une URLProblèmeSolutionDiscussionLecture des paramètres de la requêteProblèmeSolutionDiscussionCréation d'un routeur simple côté clientProblèmeSolutionDiscussionCorrespondance entre les URL et les modèlesProblèmeSolutionDiscussion
IntroductionEnvoi d'une requête avec XMLHttpRequestProblèmeSolutionDiscussionEnvoi d'une requête GET avec l'API FetchProblèmeSolutionDiscussionEnvoi d'une requête POST avec l'API FetchProblèmeSolutionDiscussionTélécharger un fichier avec l'API FetchProblèmeSolutionDiscussionEnvoi d'une baliseProblèmeSolutionDiscussionÉcoute des événements distants avec les événements envoyés par le serveurProblèmeSolutionDiscussionÉchanger des données en temps réel avec les WebSocketsProblèmeSolutionDiscussion
IntroductionMagasins d'objets et indexClésTransactionsDemandesCréer, lire et supprimer des objets dans une base de donnéesProblèmeSolutionDiscussionMise à jour d'une base de données existanteProblèmeSolutionDiscussionInterroger avec des indexProblèmeSolutionDiscussionRecherche de valeurs de chaînes avec des curseursProblèmeSolutionDiscussionPaginer un grand ensemble de donnéesProblèmeSolutionDiscussionUtiliser les promesses avec l'API IndexedDBProblèmeSolutionDiscussion
IntroductionObservateur de mutationRedimensionner l'observateurObservateur d'intersectionChargement paresseux d'une image lorsqu'elle est affichée par défilementProblèmeSolutionDiscussionEnvelopper l'IntersectionObserver avec une promesseProblèmeSolutionDiscussionPause et lecture automatiques d'une vidéoProblèmeSolutionDiscussionAnimer les changements de hauteurProblèmeSolutionDiscussionModifier le contenu d'un élément en fonction de sa tailleProblèmeSolutionDiscussionAppliquer une transition lorsqu'un élément défile dans la vueProblèmeSolutionDiscussionUtiliser le défilement infiniProblèmeSolutionDiscussion
IntroductionFormDataValidationRemplir un champ de formulaire à partir du stockage localProblèmeSolutionDiscussionSoumettre un formulaire avec Fetch et l'API FormDataProblèmeSolutionDiscussionSoumettre un formulaire en JSONProblèmeSolutionDiscussionRendre un champ de formulaire obligatoireProblèmeSolutionDiscussionContrainte d'un nombre EntréeProblèmeSolutionDiscussionSpécifier un modèle de validationProblèmeSolutionDiscussionValidation des formulairesProblèmeSolutionDiscussionUtilisation d'une logique de validation personnaliséeProblèmeSolutionDiscussionValider un groupe de cases à cocherProblèmeSolutionDiscussionValider un champ de manière asynchroneProblèmeSolutionDiscussion
IntroductionAnimation basée sur les images clésAnimation d'images clés avec JavaScriptObjets d'animationAppliquer un effet d'entraînement sur les clicsProblèmeSolutionDiscussionDémarrer et arrêter les animationsProblèmeSolutionDiscussionAnimer l'insertion et la suppression de DOMProblèmeSolutionDiscussionInverser les animationsProblèmeSolutionDiscussionAfficher un indicateur de progression du défilementProblèmeSolutionDiscussionFaire rebondir un élémentProblèmeSolutionDiscussionExécuter plusieurs animations simultanémentProblèmeSolutionDiscussionAfficher une animation de chargementProblèmeSolutionDiscussionRespecter les préférences de l'utilisateur en matière d'animationProblèmeSolutionDiscussion
IntroductionReconnaissance de la paroleSynthèse vocalePrise en charge des navigateursAjouter une dictée à un champ de texteProblèmeSolutionDiscussionCréation d'une aide à la promesse pour la reconnaissance vocaleProblèmeSolutionDiscussionObtenir les voix disponiblesProblèmeSolutionDiscussionSynthèse de la paroleProblèmeSolutionDiscussionPersonnaliser les paramètres de la synthèse vocaleProblèmeSolutionDiscussionMise en pause automatique de la paroleProblèmeSolutionDiscussion

IntroductionChargement de texte à partir d'un fichierProblèmeSolutionDiscussionChargement d'une image en tant qu'URL de donnéesProblèmeSolutionDiscussionChargement d'une vidéo en tant qu'objet URLProblèmeSolutionDiscussionChargement d'une image par glisser-déposerProblèmeSolutionDiscussionVérifier et demander des autorisationsProblèmeSolutionDiscussionExporter les données de l'API vers un fichierProblèmeSolutionDiscussionExporter les données de l'API avec un lien de téléchargementProblèmeSolutionDiscussionTélécharger un fichier par glisser-déposerProblèmeSolutionDiscussion
IntroductionFormatage d'une dateProblèmeSolutionDiscussionObtenir les parties d'une date formatéeProblèmeSolutionDiscussionFormatage d'une date relativeProblèmeSolutionDiscussionFormatage des nombresProblèmeSolutionDiscussionArrondir les décimalesProblèmeSolutionFormatage d'une fourchette de prixProblèmeSolutionDiscussionFormatage des unités de mesureProblèmeSolutionDiscussionAppliquer les règles de pluralisationProblèmeSolutionDiscussionCompter les caractères, les mots et les phrasesProblèmeSolutionDiscussionFormatage des listesProblèmeSolutionDiscussionTrier un tableau de nomsProblèmeSolutionDiscussion
IntroductionCréation d'un composantEnregistrer un élément personnaliséModèlesMachines à sousOmbre DOMLéger DOMCréation d'un composant pour afficher la date du jourProblèmeSolutionDiscussionCréation d'un composant pour formater une date personnaliséeProblèmeSolutionDiscussionCréation d'un composant de rétroactionProblèmeSolutionDiscussionCréation d'un composant de carte de profilProblèmeSolutionDiscussionCréation d'un composant d'image à chargement paresseuxProblèmeSolutionDiscussionCréation d'un composant de divulgationProblèmeSolutionDiscussionCréation d'un composant de bouton styléProblèmeSolutionDiscussion
IntroductionDialoguesDétailsPopoversNotificationsCréation d'une boîte de dialogue d'alerteProblèmeSolutionDiscussionCréation d'une boîte de dialogue de confirmationProblèmeSolutionDiscussionCréation d'un composant Web de dialogue de confirmationProblèmeSolutionDiscussionUtilisation d'un élément de divulgationProblèmeSolutionDiscussionAfficher un PopoverProblèmeSolutionDiscussionContrôler manuellement un popoverProblèmeSolutionDiscussionPositionnement d'un Popover par rapport à un élémentProblèmeSolutionDiscussionAfficher une infobulleProblèmeSolutionDiscussionAfficher une notificationProblèmeSolutionDiscussion
IntroductionLire l'état de la batterieProblèmeSolutionDiscussionLecture de l'état du réseauProblèmeSolutionDiscussionObtenir l'emplacement de l'appareilProblèmeSolutionDiscussionAfficher l'emplacement de l'appareil sur une carteProblèmeSolutionDiscussionCopier et coller du texteProblèmeSolutionDiscussionPartager du contenu avec l'API Web ShareProblèmeSolutionDiscussionFaire vibrer l'appareilProblèmeSolutionDiscussionObtenir l'orientation de l'appareilProblèmeSolutionDiscussion
IntroductionMesurer les performances de chargement des pagesProblèmeSolutionDiscussionMesurer la performance des ressourcesProblèmeSolutionDiscussionTrouver les ressources les plus lentesProblèmeSolutionDiscussionTrouver des horaires pour une ressource spécifiqueProblèmeSolutionDiscussionProfilage des performances de renduProblèmeSolutionDiscussionProfilage des tâches en plusieurs étapesProblèmeSolutionDiscussionÀ l'écoute des entrées de performanceProblèmeSolutionDiscussion
IntroductionStyle de la sortie de la consoleProblèmeSolutionDiscussionUtilisation des niveaux de journalisationProblèmeSolutionDiscussionCréation d'enregistreurs nommésProblèmeSolutionDiscussionAffichage d'un tableau d'objets dans un tableauProblèmeSolutionDiscussionUtilisation des minuteries de la consoleProblèmeSolutionDiscussionUtilisation des groupes de consolesProblèmeSolutionDiscussionUtilisation des compteursProblèmeSolutionDiscussionEnregistrer une variable et sa valeurProblèmeSolutionDiscussionEnregistrer une trace de pileProblèmeSolutionDiscussionValidation des valeurs attenduesProblèmeSolutionDiscussionExaminer les propriétés d'un objetProblèmeSolutionDiscussion
IntroductionMise en évidence des plages de texteProblèmeSolutionDiscussionEmpêcher l'apparition d'un flash de texte non styliséProblèmeSolutionDiscussionAnimer les transitions du DOMProblèmeSolutionDiscussionModifier les feuilles de style au moment de l'exécutionProblèmeSolutionDiscussionDéfinition conditionnelle d'une classe CSSProblèmeSolutionDiscussionCorrespondance entre les requêtes des médiasProblèmeSolutionDiscussionObtenir le style calculé d'un élémentProblèmeSolutionDiscussion
IntroductionEnregistrement de l'écranProblèmeSolutionDiscussionCapturer une image à partir de l'appareil photo de l'utilisateurProblèmeSolutionDiscussionCapture une vidéo à partir de l'appareil photo de l'utilisateurProblèmeSolutionDiscussionDéterminer les capacités du système en matière de médiasProblèmeSolutionDiscussionAppliquer des filtres vidéoProblèmeSolutionDiscussion
IntroductionPour la défense des bibliothèques tiercesDétecter les caractéristiques, pas les versions du navigateurPolyfillsEnvisager l'avenirAPI Bluetooth WebAPI NFC WebAPI EyeDropperAPI de détection de codes-barresCookie Store APIAPI de paiementTrouver ce qui va suivre

Overview

Cet ouvrage a été traduit à l'aide de l'IA. Tes réactions et tes commentaires sont les bienvenus : translation-feedback@oreilly.com

JavaScript donne aux développeurs web une grande puissance pour créer de riches expériences interactives dans le navigateur, et une grande partie de cette puissance est fournie par le navigateur lui-même. Les API web modernes permettent aux applications web de prendre vie comme jamais auparavant, en prenant en charge des actions qui nécessitaient autrefois des plug-ins de navigateur. Certaines sont encore au stade expérimental, mais beaucoup sont prêtes à être utilisées aujourd'hui.

Avec ce livre de recettes pratiques, l'auteur Joe Attardi t'aide à explorer les puissantes API disponibles dans les navigateurs modernes et te guide dans les tâches spécifiques qu'elles débloquent. Comme ces fonctionnalités sont des standards du Web, une documentation complète est disponible dans des ressources de confiance telles que MDN Web Docs. Les connaissances que tu vas acquérir sont transférables à différentes entreprises et à différents projets.

Apprends l'étendue des fonctionnalités disponibles dans les API des navigateurs modernes.
Explore les futures API qui en sont encore au stade expérimental.
Découvrir des éléments plus récents, tels que le dialogue qui remplace le besoin d'une bibliothèque tierce.
Construire des applications web plus puissantes et plus interactives en utilisant les API natives.
Comprendre le modèle de permissions utilisé par le navigateur pour débloquer des fonctionnalités telles que la géolocalisation et les notifications push.