book

Livro de receitas da API da Web

by Joe Attardi

March 2025

Intermediate to advanced

286 pages

5h 46m

Portuguese (Portugal, Brazil)

O'Reilly Media, Inc.

Read now

Unlock full access

O poder dos browsers modernosDesvantagens das bibliotecas de terceirosA quem se destina este livroO que contém este livroRecursos adicionaisCanIUse.comMDN Web DocsEspecificaçõesConvenções utilizadas neste livroUtilizar exemplos de códigoAprendizagem em linha da O'ReillyComo contactar-nosAgradecimentos
IntroduçãoFunções de retornoEventosPromessasTrabalhar com promessasProblemaSoluçãoDebateCarregar uma imagem com um FallbackProblemaSoluçãoDebateEncadeamento de promessasProblemaSoluçãoDebateUtilizar as palavras-chave async e awaitProblemaSoluçãoDebateUsando Promessas em ParaleloProblemaSoluçãoDebateAnimar um elemento com requestAnimationFrameProblemaSoluçãoDebateEnvolvendo uma API de evento em uma promessaProblemaSoluçãoDebate
IntroduçãoObter e definir itensDesvantagensVerificação do suporte para armazenamento na WebProblemaSoluçãoDebatePersistência de dados de cadeiaProblemaSoluçãoDebatePersistência de objectos simplesProblemaSoluçãoDebatePersistência de objectos complexosProblemaSoluçãoDebateEscuta as modificações no armazenamentoProblemaSoluçãoDebateEncontrar todas as chaves conhecidasProblemaSoluçãoDebateRemoção de dadosProblemaSoluçãoDebate
IntroduçãoPartes de um URLResolver um URL relativoProblemaSoluçãoDebateRemoção de parâmetros de consulta de um URLProblemaSoluçãoDebateAdicionar parâmetros de consulta a um URLProblemaSoluçãoDebateLeitura de parâmetros de consultaProblemaSoluçãoDebateCriando um roteador simples do lado do clienteProblemaSoluçãoDebateCorrespondência de URLs com padrõesProblemaSoluçãoDebate
IntroduçãoEnvio de um pedido com XMLHttpRequestProblemaSoluçãoDebateEnvio de um pedido GET com a API FetchProblemaSoluçãoDebateEnvio de um pedido POST com a API FetchProblemaSoluçãoDebateCarregamento de um ficheiro com a API FetchProblemaSoluçãoDebateEnviar um sinalizadorProblemaSoluçãoDebateEscuta de eventos remotos com eventos enviados pelo servidorProblemaSoluçãoDebateTroca de dados em tempo real com WebSocketsProblemaSoluçãoDebate
IntroduçãoArmazenamento de objetos e índicesChavesTransacçõesPedidosCriação, leitura e eliminação de objectos numa base de dadosProblemaSoluçãoDebateAtualização de uma base de dados existenteProblemaSoluçãoDebateConsulta com índicesProblemaSoluçãoDebatePesquisa de valores de cadeia de caracteres com cursoresProblemaSoluçãoDebatePaginando um grande conjunto de dadosProblemaSoluçãoDebateUsando promessas com a API IndexedDBProblemaSoluçãoDebate
IntroduçãoMutaçãoObservadorRedimensionarObservadorIntersectionObserverCarregamento lento de uma imagem quando se desloca para a vistaProblemaSoluçãoDebateEnvolvendo IntersectionObserver com uma promessaProblemaSoluçãoDebatePausa e reproduz automaticamente um vídeoProblemaSoluçãoDebateAnimar alterações na alturaProblemaSoluçãoDebateAltera o conteúdo de um elemento com base no tamanhoProblemaSoluçãoDebateAplicar uma transição quando um elemento se desloca para a vistaProblemaSoluçãoDebateUtilizar o scrolling infinitoProblemaSoluçãoDebate
IntroduçãoDados do formulárioValidaçãoPreenchimento de um campo de formulário a partir do armazenamento localProblemaSoluçãoDebateSubmeter um formulário com Fetch e a API FormDataProblemaSoluçãoDebateSubmeter um formulário como JSONProblemaSoluçãoDebateTornar um campo de formulário obrigatórioProblemaSoluçãoDebateRestringir uma entrada de númeroProblemaSoluçãoDebateEspecificar um padrão de validaçãoProblemaSoluçãoDebateValidação de formuláriosProblemaSoluçãoDebateUtilizar a lógica de validação personalizadaProblemaSoluçãoDebateValidando um grupo de caixas de seleçãoProblemaSoluçãoDebateValidando um campo de forma assíncronaProblemaSoluçãoDebate
IntroduçãoAnimação baseada em keyframesAnimação de keyframes com JavaScriptObjectos de animaçãoAplicar um efeito "Ripple" no cliqueProblemaSoluçãoDebateIniciar e parar animaçõesProblemaSoluçãoDebateAnimação da inserção e remoção de DOMProblemaSoluçãoDebateInverter animaçõesProblemaSoluçãoDebateMostrar um indicador de progresso de deslocamentoProblemaSoluçãoDebateFazer um elemento saltarProblemaSoluçãoDebateExecuta várias animações ao mesmo tempoProblemaSoluçãoDebateMostrar uma animação de carregamentoProblemaSoluçãoDebateRespeitar as preferências de animação do utilizadorProblemaSoluçãoDebate
IntroduçãoReconhecimento de falaSíntese de falaSuporte do navegadorAdicionar ditado a um campo de textoProblemaSoluçãoDebateCriar um Promise Helper para o reconhecimento de vozProblemaSoluçãoDebateObter as vozes disponíveisProblemaSoluçãoDebateSintetizar o discursoProblemaSoluçãoDebatePersonalizar os parâmetros da síntese de falaProblemaSoluçãoDebatePausa automaticamente a falaProblemaSoluçãoDebate

IntroduçãoCarregar texto de um ficheiroProblemaSoluçãoDebateCarregar uma imagem como um URL de dadosProblemaSoluçãoDebateCarregar um vídeo como um URL de objetoProblemaSoluçãoDebateCarregar uma imagem com arrastar e largarProblemaSoluçãoDebateVerificar e solicitar permissõesProblemaSoluçãoDebateExportação de dados API para um ficheiroProblemaSoluçãoDebateExportação de dados de API com um link de downloadProblemaSoluçãoDebateCarregamento de um ficheiro com Arrastar e LargarProblemaSoluçãoDebate
IntroduçãoFormatar uma dataProblemaSoluçãoDebateObtendo as partes de uma data formatadaProblemaSoluçãoDebateFormatar uma data relativaProblemaSoluçãoDebateFormatação de númerosProblemaSoluçãoDebateArredondamento de casas decimaisProblemaSoluçãoFormatar um intervalo de preçosProblemaSoluçãoDebateFormatação de unidades de medidaProblemaSoluçãoDebateAplicar as regras de pluralizaçãoProblemaSoluçãoDebateContagem de caracteres, palavras e frasesProblemaSoluçãoDebateFormatação de listasProblemaSoluçãoDebateOrdenar uma matriz de nomesProblemaSoluçãoDebate
IntroduçãoCriar um componenteRegistar um elemento personalizadoModelosCaça-níqueisDOM SombraLuz DOMCriar um componente para mostrar a data de hojeProblemaSoluçãoDebateCriar um componente para formatar uma data personalizadaProblemaSoluçãoDebateCriar um componente de feedbackProblemaSoluçãoDebateCriar um componente de cartão de perfilProblemaSoluçãoDebateCriar um componente de imagem de carregamento lentoProblemaSoluçãoDebateCriar um componente de divulgaçãoProblemaSoluçãoDebateCriar um componente de botão com estiloProblemaSoluçãoDebate
IntroduçãoDiálogosDetalhesPopoversNotificaçõesCriar uma caixa de diálogo de alertaProblemaSoluçãoDebateCriar uma caixa de diálogo de confirmaçãoProblemaSoluçãoDebateCriar um componente Web de diálogo de confirmaçãoProblemaSoluçãoDebateUtilizar um elemento de divulgaçãoProblemaSoluçãoDebateMostrar um PopoverProblemaSoluçãoDebateControlar manualmente um PopoverProblemaSoluçãoDebatePosicionando um Popover em relação a um elementoProblemaSoluçãoDebateMostrar uma dica de ferramentaProblemaSoluçãoDebateMostrar uma notaProblemaSoluçãoDebate
IntroduçãoLer o estado da bateriaProblemaSoluçãoDebateLer o estado do Network+ProblemaSoluçãoDebateObter a localização do dispositivoProblemaSoluçãoDebateMostrar a localização do dispositivo num mapaProblemaSoluçãoDebateCopiar e colar textoProblemaSoluçãoDebatePartilhar conteúdo com a API Web ShareProblemaSoluçãoDebateFazer vibrar o dispositivoProblemaSoluçãoDebateObter a orientação do dispositivoProblemaSoluçãoDebate
IntroduçãoMedir o desempenho do carregamento da páginaProblemaSoluçãoDebateMedição do desempenho dos recursosProblemaSoluçãoDebateEncontrar os recursos mais lentosProblemaSoluçãoDebateProcurar horários para um recurso específicoProblemaSoluçãoDebateCriação de perfil do desempenho de renderizaçãoProblemaSoluçãoDebateCriação de perfis de tarefas de várias etapasProblemaSoluçãoDebateEscuta as entradas de desempenhoProblemaSoluçãoDebate
IntroduçãoEstilizar a saída da consolaProblemaSoluçãoDebateUtilização de níveis de registoProblemaSoluçãoDebateCriando registradores nomeadosProblemaSoluçãoDebateExibição de uma matriz de objetos em uma tabelaProblemaSoluçãoDebateUtilizar os temporizadores da consolaProblemaSoluçãoDebateUtilizar grupos de consolasProblemaSoluçãoDebateUtilizar contadoresProblemaSoluçãoDebateRegistrando uma variável e seu valorProblemaSoluçãoDebateRegistar um Stack TraceProblemaSoluçãoDebateValidação de valores esperadosProblemaSoluçãoDebateExaminar as propriedades de um objetoProblemaSoluçãoDebate
IntroduçãoDestacar intervalos de textoProblemaSoluçãoDebateEvitar um flash de texto sem estiloProblemaSoluçãoDebateAnimar transições DOMProblemaSoluçãoDebateModificando folhas de estilo em tempo de execuçãoProblemaSoluçãoDebateDefinindo condicionalmente uma classe CSSProblemaSoluçãoDebateCorrespondência de consultas multimédiaProblemaSoluçãoDebateObter o estilo computado de um elementoProblemaSoluçãoDebate
IntroduçãoGravar o ecrãProblemaSoluçãoDebateCapturar uma imagem da câmara do utilizadorProblemaSoluçãoDebateCapturar um vídeo a partir da câmara do utilizadorProblemaSoluçãoDebateDeterminação das capacidades de media do sistemaProblemaSoluçãoDebateAplicar filtros de vídeoProblemaSoluçãoDebate
IntroduçãoEm defesa das bibliotecas de terceirosDetecta funcionalidades, não versões de browsersPolyfillsOlhando para o futuroAPI Web BluetoothAPI Web NFCAPI do conta-gotasAPI de deteção de código de barrasAPI do armazenamento de cookiesAPIs de pagamentoDescobre o que se segue

Content preview from Livro de receitas da API da Web

Capítulo 4. Pedidos de Network+

Este trabalho foi traduzido com recurso a IA. Agradecemos o teu feedback e comentários: translation-feedback@oreilly.com

Introdução

Seria difícil encontrar uma aplicação Web hoje em dia que não enviasse pedidos de rede. Desde o início da Web 2.0 e da nova abordagem conhecida como Ajax (Asynchronous JavaScript and XML), as aplicações Web têm enviado pedidos assíncronos para obter novos dados sem recarregar a página inteira. A API XMLHttpRequest iniciou uma nova era de aplicações JavaScript interactivas. Apesar do nome, XMLHttpRequest (ou XHR, como às vezes é conhecido) também pode trabalhar com JSON e cargas de dados de formulário.

O XMLHttpRequest foi um divisor de águas, mas a API pode ser difícil de trabalhar. Eventualmente, bibliotecas de terceiros, como Axios e jQuery, adicionaram APIs mais simplificadas que envolviam a API XHR principal.

Em 2015, uma API mais recente baseada em Promise chamada Fetch tornou-se um novo padrão, e os navegadores começaram gradualmente a adicionar suporte a ela. Hoje, o Fetch é a maneira padrão de fazer solicitações assíncronas de seus aplicativos Web.

Este capítulo explora o XHR e o Fetch, bem como algumas outras APIs paracomunicação em rede:

Balizas: Um simples pedido POST unidirecional ideal para enviar dados analíticos
Eventos enviados pelo servidor: Uma ligação persistente unidirecional com um servidor para receber eventos em tempo real
WebSockets: Uma ligação persistente bidirecional para comunicação bidirecional ...