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 7. Formulários

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

Introdução

Formulários recolhe a entrada do utilizador que é submetida a um URL remoto ou ponto de extremidade da API. Os navegadores modernos têm muitos tipos de entrada de formulário incorporados para texto, números, cores e muito mais. Um formulário é uma das principais formas de obteres informações do teu utilizador.

Dados do formulário

A API FormData fornece um modelo de dados para aceder a dados de formulários. Poupa-te o trabalho de ter de procurar elementos DOM individuais e obter os seus valores.

Melhor ainda, quando tiveres um objeto FormData, podes passá-lo diretamente para a API Fetch para submeter o formulário. Antes do envio, podes alterar ou adicionar dados ao objetoFormData objeto.

Validação

Para evitar que os utilizadores enviem dados inválidos, podes (e deves) adicionar validação do lado do cliente aos teus formulários. Isso pode ser algo tão simples como marcar um campo como obrigatório ou uma lógica de validação mais complexa que envolva a coordenação de vários valores de formulário ou a chamada de uma API.

No passado, um programador teria normalmente de recorrer a uma biblioteca JavaScript para efetuar a validação de formulários. Isso poderia causar dores de cabeça devido à duplicação de dados; ela existe nos dados do formulário e em um objeto na memória usado pela biblioteca de validação.

O HTML5 adicionou mais ...