Começar sua jornada de codificação pode parecer assustador em meio a uma escolha esmagadora de linguagens e frameworks. Você pode até pensar em deixar uma IA cuidar de tudo! No entanto, programar para a web pode ser emocionante, acessível e completamente gratuito!
O que você vai construir
Neste tutorial, você criará um aplicativo web simples projetado para armazenar notas de texto enquanto conta os caracteres e palavras dentro dessas notas.
Este aplicativo salva dados persistentemente, permitindo que ele recupere texto mesmo após atualizar a página ou reabri-la. É uma solução prática para manter acesso rápido a texto importante, seja endereços, URLs ou qualquer outra coisa.
Além disso, o aplicativo rastreia contagens de caracteres e palavras, fornecendo uma excelente introdução à manipulação de strings. Embora o aplicativo seja básico em design, este tutorial capacita você com habilidades fundamentais de desenvolvimento de aplicativos da web, desbloqueando vastas possibilidades em codificação.
Como você vai construir isso
Embora os aplicativos da web possam variar significativamente, eles normalmente integram três tecnologias essenciais: HTML, CSS e JavaScript. Cada um desses componentes tem uma função crucial no desenvolvimento da web:
- HTML: Esta é a estrutura do seu aplicativo web, estabelecendo como o conteúdo é organizado. HTML define se o texto é um parágrafo, título ou um item de lista.
- CSS: Cascading Style Sheets adicionam estilo ao seu conteúdo, permitindo que você altere cores, fontes e layout. Você pode usar CSS para deixar elementos em negrito, ajustar bordas e posicionar elementos na tela.
- JavaScript: Esta linguagem de programação é essencial para infundir funcionalidade em seu aplicativo web. JavaScript pode criar experiências interativas, como mostrar/ocultar elementos ou construir aplicativos complexos como jogos.
A estrutura do aplicativo
O aplicativo que você está prestes a criar é composto por três arquivos simples: index.html, styles.csse script.js.
Não há requisitos avançados para executar este aplicativo — apenas um navegador da web é suficiente. Como este é um aplicativo front-end, não há necessidade de linguagens de script de back-end como PHP ou servidores locais. Após a conclusão, basta abrir index.htmlno seu navegador para ver seu aplicativo em ação.
Este aplicativo utiliza a API de armazenamento da Web para salvar texto, permitindo reter informações sem precisar gravar em arquivos de disco, já que o JavaScript não tem acesso ao sistema de arquivos.
Como construir o Note Taker
Comece criando os três arquivos necessários no mesmo diretório. Como alternativa, você pode baixar os arquivos deste repositório do GitHub .
Construindo a estrutura com HTML
O index.htmlarquivo define a estrutura de conteúdo do seu aplicativo. Ele inclui referências aos arquivos CSS e JavaScript, permitindo que o navegador os mescle em uma experiência perfeita.
Assim como qualquer documento HTML, a estrutura principal consiste em uma seção head com metadados e um body contendo o conteúdo:
<!DOCTYPE html>
<html>
<head>
...</head>
<body>
...</body>
</html>
A seção principal contém metadados breves, incluindo o título da página (visível na barra de título do navegador) e um link para o styles.cssarquivo:
<title>Text</title>
<link rel="stylesheet"href="styles.css"/>
O corpo é mais detalhado, incluindo componentes principais:
<div id="counter">
words: <span id="words">0</span>
/ characters: <span id="chars">0</span>
</div>
<textarea id="text"autofocus="1"></textarea>
<script src="script.js"></script>
O divelemento, identificado como “counter”, abriga as contagens de palavras e caracteres. Ele permanece no topo e atualiza dinamicamente conforme o texto muda.
É fundamental observar o uso de idatributos — seus valores exclusivos ajudam a estilizar esses elementos e direcioná-los para funcionalidade.
O textareafornece uma área para os usuários inserirem texto com o autofocusatributo, garantindo que ele esteja pronto para digitação após o carregamento da página. Finalmente, o HTML faz referência ao script.jsarquivo.
Neste ponto, abra index.htmlem um navegador. Ele não funcionará ainda e pode não parecer muito certo, mas verificar seu progresso em cada estágio é útil.
Fazendo as coisas parecerem boas com CSS
Embora este aplicativo básico não exija grandes ajustes de design, podemos melhorar seu layout com algum estilo.
Primeiro, estabelecemos o estilo do corpo para delinear a aparência geral:
body {
margin: 0;
padding: 0;
display: grid;
min-height: 100vh;
grid-template-rows: min-content 1fr;
}
Este CSS emprega layout de grade para organizar contagens de palavras e caracteres em uma linha estreita acima da textarea. A grid-template-rowspropriedade determina que a linha de contagem deve ocupar o menor espaço possível (min-content) enquanto a textarea preenche o espaço restante (1fr).
A linha do contador recebe um estilo básico para distingui-la da textarea, principalmente por meio do seu plano de fundo:
#counter {
font-family: sans-serif;
background-color: #f7f7f7;
text-align: center;
width: 100%;
padding: 0 0.5em 0;
}
A textarea é estilizada para garantir que o texto seja legível, permitindo espaço em branco adequado:
textarea {
width: 100%;
height: 100%;
font-size: 16pt;
padding: 1em;
box-sizing: border-box;
outline: 0;
border: none;
border-top: 1px solid #999;
}
Adicionando funcionalidade com JavaScript
Com a base definida, é hora de infundir funcionalidade em seu aplicativo — o código que lhe dá vida!
Antes de mergulhar na codificação, é essencial delinear a funcionalidade pretendida. Para esta aplicação, você se concentrará em dois objetivos principais:
- Persistir e recarregar o texto inserido.
- Atualize a contagem de caracteres e palavras dinamicamente.
Essas funções exigem atualizações para certos elementos do documento. Portanto, comece obtendo referências para esses nós usando o getElementByIdmétodo:
const words = document.getElementById("words");
const chars = document.getElementById("chars");
const textarea = document.getElementById("text");
Aqui, words, chars, e textareacorrespondem às suas respectivas seções no documento, identificadas por seus atributos de ID.
Em seguida, introduza a interatividade configurando o aplicativo para responder quando o texto for alterado:
textarea.addEventListener("input", function(ev) {
localStorage.setItem("text", ev.target.value);
update_counts(ev.target.value);
});
O addEventListenermétodo vincula uma função para disparar quando um evento especificado ocorre. Neste caso, uma vez que o usuário interage com a textarea, o evento “input” dispara a função.
Em seguida, a Web Storage API é usada para preservar o conteúdo atual da textarea, acessado via ev.target.value. O setItemmétodo associa uma chave aos dados a serem armazenados.
Para garantir que o texto seja carregado quando o aplicativo for inicializado ou atualizado, adicione outro ouvinte:
window.addEventListener("load", function(ev) {
var text = localStorage.getItem("text");
textarea.value = text;
update_counts(text);
});
Este listener responde ao evento load da janela. Ao carregar a janela, ele recupera o texto salvo e define o valor da textarea de acordo, enquanto invoca update_counts()para atualizar as contagens de palavras e caracteres.
A funcionalidade restante reside na update_counts()função, que se parece com isto:
function update_counts(text) {
chars.innerHTML = text.length;
words.innerHTML = text.split(' ').length;
}
Diferentemente de uma textarea, texto simples não tem um atributo value; assim, a innerHTMLpropriedade é usada em vez disso. A lengthpropriedade de uma string recupera a contagem total de caracteres.
Para quebrar o texto em palavras, usamos text.split(' '), que divide a string em cada caractere de espaço, produzindo um array de palavras. A propriedade length do array resultante fornece o número de palavras.
No entanto, você pode encontrar alguns desafios com este código:
- Ele não contará corretamente palavras isoladas em uma linha sem caracteres de espaço ao redor.
- Se nenhum texto estiver presente, ele reportará imprecisamente uma única palavra devido ao modo como
splitopera.
Para resolver o primeiro problema, considere dividir em uma expressão regular para contabilizar caracteres de espaço em branco: \s. Para resolver o segundo problema, filtre quaisquer strings vazias:
words.innerHTML = text.split(/\s/).filter(function(n) { return n! = ''; }).length;
Criar aplicativos web úteis pode ser feito com apenas alguns arquivos básicos! Você pode estender esse aplicativo simples de anotações integrando recursos adicionais, como empregar a propriedade window.location para acessar URLs ou permitir que várias notas sejam salvas variando os nomes passados para localStorage.setItem.
Insights adicionais
1. Quais são os pré-requisitos para este tutorial de aplicativo web?
Tudo o que você precisa é de um entendimento básico de HTML, CSS e JavaScript. Ferramentas como um editor de texto (por exemplo, VSCode) e um navegador da web também serão úteis.
2. Posso modificar este aplicativo web para adicionar mais recursos?
Absolutamente! Este tutorial fornece uma base. Você pode adicionar funcionalidades como salvar várias notas, categorizar notas ou até mesmo implementar um recurso de pesquisa!
3. Como funciona a API de armazenamento na Web?
A Web Storage API permite que aplicativos da web armazenem dados no navegador. Ela armazena dados em pares de chave-valor que persistem mesmo depois que o navegador é fechado, facilitando a recuperação posterior.
Artigos relacionados:
Escolhendo um guarda-chuva solar em vez de painéis solares adicionais para soluções de energia
14:33
Guia passo a passo para espelhamento de tela usando AirPlay em um Mac
14:20
Como transmitir Plex ou Jellyfin diretamente do seu terminal
14:05
Deixe um comentário