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 11. Internacionalização

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

Introdução

Os navegadores modernos incluem uma API de internacionalização robusta. Esta é uma coleção de APIs centradas em tarefas específicas de idioma ou local, tais como:

Formatar datas e horas
Formatar números
Moeda
Regras de pluralização

Antes de esta API estar disponível, poderias ter tido de recorrer a uma biblioteca de terceiros como Moment.js (para datas e horas) ou Numeral.js (para números). No entanto, os browsers actuais suportam muitos dos mesmos casos de utilização, pelo que poderás já não precisar destas bibliotecas na tua aplicação.

A maioria destas APIs utiliza o conceito de locale, que é normalmente uma combinação de uma língua e de uma região. Por exemplo, o locale para o inglês dos EUA é en-US, e o locale para o inglês do Canadá é en-CA. Pode utilizá-las com o locale predefinido, que é o que está a ser utilizado pelo browser, ou pode especificar um locale específico para formatar os dados adequadamente para a região pretendida.

Nota

Há uma nova API de data e hora em JavaScript em desenvolvimento chamada Temporal. No momento em que escrevo este livro, ela é atualmente uma proposta do ECMAScript. Pode tornar-se parte da linguagem num futuro próximo, mas, por enquanto, este livro cobrirá a API Date padrão.