Usando o JavaScript, você pode transformar radicalmente os documentos HTML, adicionando funcionalidade às páginas estáticas da Web e até criando aplicativos da Web completos. Na sua essência, o JavaScript pode fazer qualquer coisa que qualquer outra linguagem de programação possa. No entanto, além disso, os navegadores da Web implementam várias APIs da Web que fornecem suporte poderoso para vários recursos.
1
Acesse e modifique HTML com o DOM
Todas as APIs da Web (interface de programação de aplicativos) Código de fornecimento para que você não precise. Eles lidam com os complexos detalhes de baixo nível, permitindo que os desenvolvedores se concentrem na criação de seu aplicativo ou Adicionando pequenos aprimoramentos dinâmicos para o site deles.
Relacionado
Muitas dessas APIs têm como alvo tecnologias específicas, como entrada ou notificação na tela de toque. Essa primeira API, no entanto, é fundamental para toda a programação da Web que envolve um documento, como uma página da web escrita no HTML.
O Dom (Modelo de objeto Document) é uma representação padrão de uma página da web que o JavaScript pode usar para inspecionar seu conteúdo ou modificar certas partes. Reflete a natureza hierárquica do HTML e lida com conceitos principais, como nós, elementos, eventos e texto.
Se você deseja alterar algum texto em uma página da web, remover todos os parágrafos ou destacar erros de ortografia, o DOM estará no coração. Por exemplo, aqui está um trecho curto que mudará a cor de cada parágrafo em uma página:
document.querySelectorAll("p").forEach(function(element) {
element.style.color = "orange";
});
O DOM fornece o método Document.QuerySelectorAll () e a propriedade htmlelement.style. Respectivamente, eles recuperam elementos correspondentes e acessam o CSS embutido.
Você pode executar este snippet em qualquer site, usando o recurso Ferramentas de desenvolvedor do seu navegador. É uma boa maneira de verificar o quão bem estruturada é uma página da web: se as coisas que você espera ser parágrafos não giram laranja, pode haver erros no HTML.
2
Criar e manipular URLs mais facilmente
Algumas APIs da Web têm um escopo enorme, mas outras são muito mais limitadas. Esta API é uma dessas últimas. O URL API Inclui métodos convenientes para trabalhar com URLs.
O suporte da URL costumava ser irregular na programação da Web JavaScript, mas a API URL facilitou muito.
let addr = new URL("https://example.com/this/is/just?an=example");
console.log(addr.pathname);
console.log(addr.searchParams.get("an"));
Analisando um URL, através do construtor Window.url (), retorna um objeto com propriedades que representam diferentes partes desse URL. Isso inclui coisas como Hash para o identificador de fragmento, hospedar para o domínio e porto do URL, e SearchParams que dá acesso a parâmetros de consulta.
3
Buscar conteúdo da web
Se você está processando o Href Valores dos links em uma página ou gerenciamento de URLs para serviços remotos, o busca é um recurso fácil e útil. O Buscar API Permite escrever código que age um pouco como um navegador sem cabeça.
Você pode buscar conteúdo remoto e injetar -o em uma página ou buscar dados e processá -los. Se um site fornecer previsões meteorológicas ou dados do mercado de ações, você poderá usar o busca para obter esses dados e integrá -los ao seu próprio aplicativo.
Um único método – Window.Fetch () – fornece toda a funcionalidade da API busca. Aqui está um exemplo simples de como usá -lo:
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => console.log(json))
Se você executar isso no console do seu navegador, ele deve imprimir os detalhes do objeto que você verá se vai diretamente para https://jsonplaceholder.typicode.com/todos/1. Nos bastidores, a API busca envia uma solicitação para o site de destino e retorna a resposta ao código de chamada, pronto para um processamento adicional.
4
Inspecione e modifique o histórico de navegação do navegador
Grande parte do trabalho envolvido ao criar aplicativos da web envolve combater as restrições impostas por Http. O protocolo foi projetado para atender a documentos distintos, carregados e exibidos por meio de solicitações individuais. A programação de JavaScript complica as coisas; Em particular, os aplicativos da Web podem poluir a história do navegador e quebrar o botão de volta se você não tomar cuidado.
Para lidar com esses problemas, a API do histórico permite navegar e modificar o histórico do usuário. O uso mais prático desse recurso é injetar entradas úteis na história que, de outra forma, iria ignorar. Por exemplo, você pode ter um botão que atualize seu documento usando JavaScript:
<button id="b" data-page="page2.html">Page 2button>
Em seguida, você pode adicionar uma entrada ao histórico do navegador quando esse botão pressiona faz com que o conteúdo da página seja atualizado:
button.addEventListener("click", function(ev) {
let page = ev.target.getAttribute("data-page"),
data = fetch_page(page); history.pushState(data, "", page);
});
O método pushState () adiciona uma entrada ao histórico do navegador, completo com um registro de dados que você pode recuperar se o usuário navegar para esta página. Como resultado, seu aplicativo da web pode ser muito mais responsivo, evitando viagens desnecessárias ao servidor, mas ainda apresentando histórico útil de navegação.
5
Substitua os cookies por armazenamento acessível a JavaScript
A maneira antiga de armazenar o estado nas solicitações HTTP era usar cookies. Esses pequenos pacotes de dados foram salvos no cliente e transmitidos ao servidor nos cabeçalhos HTTP, mas isso significava que o JavaScript não poderia acessá -los.
Para suportar um mecanismo semelhante para JavaScript, a API de armazenamento da Web permite salvar dados, seja para a sessão atual ou permanentemente. É um sistema de pares de chave/valor simples:
localStorage.setItem("Theme", "Dark");
...
let theme = localStorage.getItem("Theme");
Esta API é perfeita para aplicativos da Web que não precisam de funcionalidade do servidor. Você pode atualizar facilmente um site estático armazenando preferências ou dados do usuário sobre as páginas visualizadas.
Os valores que você economiza usando a API de armazenamento da Web devem ser strings. Para armazenar outros tipos de dados, você pode convertê -los em json usando json.stringify () antes de salvá -los e ligue para JSON.PARSE () na carga.
6
Descubra onde seus usuários estão usando a geolocalização
Historicamente, se você precisasse trabalhar com a localização física de um visitante, precisará de um aplicativo nativo. A API de geolocalização fornece essa funcionalidade aos navegadores da Web, desde que o usuário conceda permissão.
Os detalhes de localização podem ser usados por muitos motivos: para mostrar lojas próximas, fornecer conteúdo específico do local ou determinar o fuso horário do usuário, por exemplo. Trabalhar com a localização do usuário é tão simples quanto chamar o método getCurrentPosition () do objeto Navigator.geolocation:
navigator.geolocation.getCurrentPosition(success, error);
Você precisará definir as funções de erro e sucesso; Este último é aprovado em um objeto de geolocaçãoPosition com uma propriedade Coords. Não há sinos e assobios aqui, então você precisará buscar informações como país ou fuso horário separadamente. Mas as coordenadas que você volta podem ser muito precisas e a API é simples de usar.
7
Leia e escreva arquivos no disco local
Tradicionalmente, os aplicativos da Web não conseguiam acessar arquivos locais, por razões de segurança. Isso é uma pena, pois impede um conjunto de aplicativos interessantes, como programas de pintura, editores de texto e assim por diante. Felizmente, a API do sistema de arquivos permite esses usos.
async function getFile() {
const (fileHandle) = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
console.log(file.name + " is a " + file.type);
return file;
}
Você pode usar o objeto de arquivo resultante para ler os dados do arquivo, diretamente do disco. A escrita é um processo semelhante, envolvendo o método ShowsAveFilePicker () e o método CreateWrable () do FileHandle.
Usando as classes do sistema de arquivos, a leitura e a gravação de dados agora é amplamente transparente, permitindo uma integração mais rígida com o armazenamento de disco local. Esta API é uma das mais importantes para alinhar os aplicativos da Web com aplicativos nativos.
8
Servir notificações úteis e oportunas
Os aplicativos móveis foram pioneiros que informem aos usuários sobre eventos importantes automaticamente. É útil quando um aplicativo fala sobre algo para que você não precise procurar por si mesmo.
Relacionado
Os aplicativos da web estão se atualizando, no entanto. Você pode ter visto aplicativos da web oferecendo suas próprias notificações, e estas são ativadas pelo API de notificações.
Existem várias etapas para o fluxo de trabalho de notificação, começando com a solicitação de permissão:
Notification.requestPermission().then((result) => {
console.log(result);
});
Este é um passo vital que a API aplica, pois ninguém quer sites criando notificações contra sua vontade. Com permissão, porém, enviar uma notificação é bem fácil:
new Notification("Do something important!");
Se as configurações do seu navegador permitirem, isso mostrará imediatamente uma notificação. Para um aplicativo da web de longa duração, como um site de mídia social, você pode pesquisar um novo conteúdo intermitentemente e criar uma notificação se uma postagem correspondente aparecer no feed.
9
Desenhe para a tela usando tela
O API de tela Fornece funções de baixo nível para desenhar gráficos em um elemento de tela. Você pode usar isso para criar imagens dinâmicas, criar um jogo ou desenvolver um aplicativo gráfico completo.
Comece com um elemento de tela em sua página da web:
<canvas id="c">canvas>
Com este elemento no lugar, é fácil desenhar um retângulo:
document.getElementById("c").getContext("2d").fillRect(10, 10, 100, 60);
A API completa tem suporte para muitas formas, cores e estilos diferentes. Ele permite desenhar texto, transformar imagens e até criar animações complexas.
Relacionado
10
Suporte controladores de gamepad conectados
Outra API que você pode se surpreender ao ver: sim, os aplicativos da web podem suportar gamepads e outros controladores de jogo!
Para detectar pressionamentos de botões, você precisará usar a pesquisa em vez de manuseio de eventos, e isso pode ser menos conveniente. A abordagem padrão é assim:
requestAnimationFrame(updateStatus);function updateStatus() {
let gamepad = navigator.getGamepads()(0);
const GAMEPAD_BUTTON_LEFT = 14;
if (gamepad) {
gamepad.buttons.entries().forEach(function (btn) {
if (btn(0) === GAMEPAD_BUTTON_LEFT && btn(1).pressed) {
console.log("LEFT is pressed");
}
});
}
requestAnimationFrame(updateStatus);
}
Você precisará lidar com os mapeamentos de botões, e esse código pode ser bastante complexo, mas vale a pena adicionar suporte para gamepads aos seus jogos baseados na Web.
Relacionado
Essas APIs da Web – e muito mais – são Documentado em MDN. A melhor maneira de aprender sobre eles é experimentar o código de amostra, como os trechos acima. Experimente o console JavaScript do seu navegador e descubra novos tipos de aplicativo que você pode criar usando apenas HTML, CSS e JavaScript.
Deixe um comentário