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 17. CSS

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

Introdução

Em o ambiente moderno do browser, o CSS não só te permite escrever regras de estilo, como também tem um conjunto de APIs que podes utilizar para melhorar a tua aplicação.

O CSS Object Model (CSSOM) permite-te definir estilos em linha de forma programática a partir do código JavaScript. Não só isso, como também podes alterar os valores das variáveis CSS em tempo de execução.

No Capítulo 8, viste um exemplo de utilização de window.matchMedia para verificar programaticamente uma consulta multimédia para ver se corresponde à página atual.

Este capítulo contém algumas receitas úteis que utilizam algumas destas APIs relacionadas com o CSS. No momento em que este artigo foi escrito, algumas dessas APIs não eram bem suportadas pelos navegadores. Verifica sempre a compatibilidade do browser antes de as utilizares.

Destacar intervalos de texto

Problema

Pretende aplicar um efeito de realce a um intervalo de texto no documento.

Solução

Cria um objeto Range à volta do texto pretendido e, em seguida, utiliza a API de realce personalizado CSS para aplicar os estilos de realce a esse intervalo.

O primeiro passo é criar um objeto Range. Este objeto representa uma região de texto dentro do documento. O Exemplo 17-1 mostra uma função utilitária de uso geral para criar um intervalo dado um nó de texto e o texto a destacar.