![\"Um](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-example.webp\" "\\"Um")
<\/figure>\nAl\u00e9m disso, o aplicativo rastreia contagens de caracteres e palavras, fornecendo uma excelente introdu\u00e7\u00e3o \u00e0 manipula\u00e7\u00e3o de strings. Embora o aplicativo seja b\u00e1sico em design, este tutorial capacita voc\u00ea com habilidades fundamentais de desenvolvimento de aplicativos da web, desbloqueando vastas possibilidades em codifica\u00e7\u00e3o.<\/p>\n
Como voc\u00ea vai construir isso<\/h2>\n
Embora os aplicativos da web possam variar significativamente, eles normalmente integram tr\u00eas tecnologias essenciais: HTML, CSS e JavaScript. Cada um desses componentes tem uma fun\u00e7\u00e3o crucial no desenvolvimento da web:<\/p>\n
- \n
- HTML:<\/strong> Esta \u00e9 a estrutura do seu aplicativo web, estabelecendo como o conte\u00fado \u00e9 organizado. HTML define se o texto \u00e9 um par\u00e1grafo, t\u00edtulo ou um item de lista.<\/li>\n
- CSS:<\/strong> Cascading Style Sheets adicionam estilo ao seu conte\u00fado, permitindo que voc\u00ea altere cores, fontes e layout. Voc\u00ea pode usar CSS para deixar elementos em negrito, ajustar bordas e posicionar elementos na tela.<\/li>\n
- JavaScript:<\/strong> Esta linguagem de programa\u00e7\u00e3o \u00e9 essencial para infundir funcionalidade em seu aplicativo web. JavaScript pode criar experi\u00eancias interativas, como mostrar\/ocultar elementos ou construir aplicativos complexos como jogos.<\/li>\n<\/ul>\n
![\"A](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-dev-homepage.webp\" "\\"A")
<\/figure>\nA estrutura do aplicativo<\/h2>\n
O aplicativo que voc\u00ea est\u00e1 prestes a criar \u00e9 composto por tr\u00eas arquivos simples:
index.html<\/code>,styles.css<\/code>escript.js<\/code>.<\/p>\nN\u00e3o h\u00e1 requisitos avan\u00e7ados para executar este aplicativo \u2014 apenas um navegador da web \u00e9 suficiente. Como este \u00e9 um aplicativo front-end, n\u00e3o h\u00e1 necessidade de linguagens de script de back-end como PHP ou servidores locais. Ap\u00f3s a conclus\u00e3o, basta abrir
index.html<\/code>no seu navegador para ver seu aplicativo em a\u00e7\u00e3o.<\/p>\nEste aplicativo utiliza a API de armazenamento da Web para salvar texto, permitindo reter informa\u00e7\u00f5es sem precisar gravar em arquivos de disco, j\u00e1 que o JavaScript n\u00e3o tem acesso ao sistema de arquivos.<\/p>\n
Como construir o Note Taker<\/h2>\n
Comece criando os tr\u00eas arquivos necess\u00e1rios no mesmo diret\u00f3rio. Como alternativa, voc\u00ea pode baixar os arquivos deste reposit\u00f3rio do GitHub<\/a> .<\/p>\n
Construindo a estrutura com HTML<\/h3>\n
O
index.html<\/code>arquivo define a estrutura de conte\u00fado do seu aplicativo. Ele inclui refer\u00eancias aos arquivos CSS e JavaScript, permitindo que o navegador os mescle em uma experi\u00eancia perfeita.<\/p>\nAssim como qualquer documento HTML, a estrutura principal consiste em uma se\u00e7\u00e3o head com metadados e um body contendo o conte\u00fado:<\/p>\n
\n<!DOCTYPE html><\/span>
\n<html><\/span>
\n<head><\/span>
\n...<\/head><\/span>
\n<body><\/span>
\n...<\/body><\/span>
\n<\/html><\/span>
\n<\/code><\/p>\nA se\u00e7\u00e3o principal cont\u00e9m metadados breves, incluindo o t\u00edtulo da p\u00e1gina (vis\u00edvel na barra de t\u00edtulo do navegador) e um link para o
styles.css<\/code>arquivo:<\/p>\n
\n<title>Text<\/title><\/span>
\n<link rel=\"stylesheet\"href=\"styles.css\"\/><\/span>
\n<\/code><\/p>\nO corpo \u00e9 mais detalhado, incluindo componentes principais:<\/p>\n
\n<div id=\"counter\"><\/span>
\nwords: <span id=\"words\">0<\/span><\/span>
\n\/ characters: <span id=\"chars\">0<\/span><\/span>
\n<\/div><\/span>
\n<textarea id=\"text\"autofocus=\"1\"><\/textarea><\/span>
\n<script src=\"script.js\"><\/script><\/span>
\n<\/code><\/p>\nO
div<\/code>elemento, identificado como \u201ccounter\u201d, abriga as contagens de palavras e caracteres. Ele permanece no topo e atualiza dinamicamente conforme o texto muda.<\/p>\n\u00c9 fundamental observar o uso de
id<\/code>atributos \u2014 seus valores exclusivos ajudam a estilizar esses elementos e direcion\u00e1-los para funcionalidade.<\/p>\nO
textarea<\/code>fornece uma \u00e1rea para os usu\u00e1rios inserirem texto com oautofocus<\/code>atributo, garantindo que ele esteja pronto para digita\u00e7\u00e3o ap\u00f3s o carregamento da p\u00e1gina. Finalmente, o HTML faz refer\u00eancia aoscript.js<\/code>arquivo.<\/p>\nNeste ponto, abra
index.html<\/code>em um navegador. Ele n\u00e3o funcionar\u00e1 ainda e pode n\u00e3o parecer muito certo, mas verificar seu progresso em cada est\u00e1gio \u00e9 \u00fatil.<\/p>\n![\"Uma](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-no-style.webp\" "\\"Uma")
<\/figure>\nFazendo as coisas parecerem boas com CSS<\/h3>\n
Embora este aplicativo b\u00e1sico n\u00e3o exija grandes ajustes de design, podemos melhorar seu layout com algum estilo.<\/p>\n
Primeiro, estabelecemos o estilo do corpo para delinear a apar\u00eancia geral:<\/p>\n
\nbody {<\/span>
\n margin: 0;<\/span>
\n padding: 0;<\/span>
\n display: grid;<\/span>
\n min-height: 100vh;<\/span>
\n grid-template-rows: min-content 1fr;<\/span>
\n}<\/span>
\n<\/code><\/p>\nEste CSS emprega layout de grade<\/a> para organizar contagens de palavras e caracteres em uma linha estreita acima da textarea. A
grid-template-rows<\/code>propriedade determina que a linha de contagem deve ocupar o menor espa\u00e7o poss\u00edvel (min-content) enquanto a textarea preenche o espa\u00e7o restante (1fr).<\/p>\nA linha do contador recebe um estilo b\u00e1sico para distingui-la da textarea, principalmente por meio do seu plano de fundo:<\/p>\n
\n#counter {<\/span>
\n font-family: sans-serif;<\/span>
\n background-color: #f7f7f7;<\/span>
\n text-align: center;<\/span>
\n width: 100%;<\/span>
\n padding: 0 0.5em 0;<\/span>
\n}<\/span>
\n<\/code><\/p>\nA textarea \u00e9 estilizada para garantir que o texto seja leg\u00edvel, permitindo espa\u00e7o em branco adequado:<\/p>\n
\ntextarea {<\/span>
\n width: 100%;<\/span>
\n height: 100%;<\/span>
\n font-size: 16pt;<\/span>
\n padding: 1em;<\/span>
\n box-sizing: border-box;<\/span>
\n outline: 0;<\/span>
\n border: none;<\/span>
\n border-top: 1px solid #999;<\/span>
\n}<\/span>
\n<\/code><\/p>\n![\"O](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-with-style.webp\" "\\"O")
<\/figure>\nAdicionando funcionalidade com JavaScript<\/h3>\n
Com a base definida, \u00e9 hora de infundir funcionalidade em seu aplicativo \u2014 o c\u00f3digo que lhe d\u00e1 vida!<\/p>\n
Antes de mergulhar na codifica\u00e7\u00e3o, \u00e9 essencial delinear a funcionalidade pretendida. Para esta aplica\u00e7\u00e3o, voc\u00ea se concentrar\u00e1 em dois objetivos principais:<\/p>\n
- \n
- Persistir e recarregar o texto inserido.<\/li>\n
- Atualize a contagem de caracteres e palavras dinamicamente.<\/li>\n<\/ul>\n
Essas fun\u00e7\u00f5es exigem atualiza\u00e7\u00f5es para certos elementos do documento. Portanto, comece obtendo refer\u00eancias para esses n\u00f3s usando o
getElementById<\/code>m\u00e9todo:<\/p>\n
\nconst words = document.getElementById(\"words\");<\/span>
\nconst chars = document.getElementById(\"chars\");<\/span>
\nconst textarea = document.getElementById(\"text\");<\/span>
\n<\/code><\/p>\nAqui,
words<\/code>,chars<\/code>, etextarea<\/code>correspondem \u00e0s suas respectivas se\u00e7\u00f5es no documento, identificadas por seus atributos de ID.<\/p>\nEm seguida, introduza a interatividade configurando o aplicativo para responder quando o texto for alterado:<\/p>\n
\ntextarea.addEventListener(\"input\", function(ev) {<\/span>
\n localStorage.setItem(\"text\", ev.target.value);<\/span>
\n update_counts(ev.target.value);<\/span>
\n});<\/span>
\n<\/code><\/p>\nO
addEventListener<\/code>m\u00e9todo vincula uma fun\u00e7\u00e3o para disparar quando um evento especificado ocorre. Neste caso, uma vez que o usu\u00e1rio interage com a textarea, o evento \u201cinput\u201d dispara a fun\u00e7\u00e3o.<\/p>\nEm seguida, a Web Storage API \u00e9 usada para preservar o conte\u00fado atual da textarea, acessado via
ev.target.value<\/code>. OsetItem<\/code>m\u00e9todo associa uma chave aos dados a serem armazenados.<\/p>\nPara garantir que o texto seja carregado quando o aplicativo for inicializado ou atualizado, adicione outro ouvinte:<\/p>\n
\nwindow.addEventListener(\"load\", function(ev) {<\/span>
\n var text = localStorage.getItem(\"text\");<\/span>
\n textarea.value = text;<\/span>
\n update_counts(text);<\/span>
\n});<\/span>
\n<\/code><\/p>\nEste 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()<\/code>para atualizar as contagens de palavras e caracteres.<\/p>\nA funcionalidade restante reside na
update_counts()<\/code>fun\u00e7\u00e3o, que se parece com isto:<\/p>\n
\nfunction update_counts(text) {<\/span>
\n chars.innerHTML = text.length;<\/span>
\n words.innerHTML = text.split(' ').length;<\/span>
\n}<\/span>
\n<\/code><\/p>\nDiferentemente de uma textarea, texto simples n\u00e3o tem um atributo value; assim, a
innerHTML<\/code>propriedade \u00e9 usada em vez disso. Alength<\/code>propriedade de uma string recupera a contagem total de caracteres.<\/p>\nPara quebrar o texto em palavras, usamos
text.split(' ')<\/code>, que divide a string em cada caractere de espa\u00e7o, produzindo um array de palavras. A propriedade length do array resultante fornece o n\u00famero de palavras.<\/p>\nNo entanto, voc\u00ea pode encontrar alguns desafios com este c\u00f3digo:<\/p>\n
- \n
- Ele n\u00e3o contar\u00e1 corretamente palavras isoladas em uma linha sem caracteres de espa\u00e7o ao redor.<\/li>\n
- Se nenhum texto estiver presente, ele reportar\u00e1 imprecisamente uma \u00fanica palavra devido ao modo como
split<\/code>opera.<\/li>\n<\/ol>\nPara resolver o primeiro problema, considere dividir em uma express\u00e3o regular para contabilizar caracteres de espa\u00e7o em branco:
\\s<\/code>. Para resolver o segundo problema, filtre quaisquer strings vazias:<\/p>\n
\n words.innerHTML = text.split(\/\\s\/).filter(function(n) { return n! = ''; }).length;<\/span>
\n<\/code><\/p>\n![\"O](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-final.webp\" "\\"O")
<\/figure>\nCriar aplicativos web \u00fateis pode ser feito com apenas alguns arquivos b\u00e1sicos! Voc\u00ea pode estender esse aplicativo simples de anota\u00e7\u00f5es integrando recursos adicionais, como empregar a propriedade window.location<\/a> para acessar URLs ou permitir que v\u00e1rias notas sejam salvas variando os nomes passados \u200b\u200bpara
localStorage.setItem<\/code>.<\/p>\nInsights adicionais<\/h3>\n
1. Quais s\u00e3o os pr\u00e9-requisitos para este tutorial de aplicativo web?<\/strong><\/h4>\n
Tudo o que voc\u00ea precisa \u00e9 de um entendimento b\u00e1sico de HTML, CSS e JavaScript. Ferramentas como um editor de texto (por exemplo, VSCode) e um navegador da web tamb\u00e9m ser\u00e3o \u00fateis.<\/p>\n
2. Posso modificar este aplicativo web para adicionar mais recursos?<\/strong><\/h4>\n
Absolutamente! Este tutorial fornece uma base. Voc\u00ea pode adicionar funcionalidades como salvar v\u00e1rias notas, categorizar notas ou at\u00e9 mesmo implementar um recurso de pesquisa!<\/p>\n
3. Como funciona a API de armazenamento na Web?<\/strong><\/h4>\n
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 \u00e9 fechado, facilitando a recupera\u00e7\u00e3o posterior.<\/p>\n
- CSS:<\/strong> Cascading Style Sheets adicionam estilo ao seu conte\u00fado, permitindo que voc\u00ea altere cores, fontes e layout. Voc\u00ea pode usar CSS para deixar elementos em negrito, ajustar bordas e posicionar elementos na tela.<\/li>\n