![\"Um](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nEle tamb\u00e9m conta caracteres e palavras, o que \u00e9 uma boa introdu\u00e7\u00e3o ao tratamento de strings (texto). Claro, o aplicativo \u00e9 muito simples: esse \u00e9 o prop\u00f3sito! Mas com este tutorial, voc\u00ea aprender\u00e1 os conceitos b\u00e1sicos do desenvolvimento de um aplicativo web e, ent\u00e3o, o mundo ser\u00e1 seu. \ud83e\uddaa\ud83d\udcbb<\/p>\n
Como voc\u00ea vai construir isso?<\/h2>\n
Embora os aplicativos da web sejam muito diversos, eles normalmente envolvem tr\u00eas tecnologias principais: HTML, CSS e JavaScript. \u00c9 essencial que voc\u00ea entenda o papel deles antes de come\u00e7ar. \ud83d\udcda<\/p>\n
- \n
- HTML: Hypertext Markup Language permite que voc\u00ea defina a estrutura do seu conte\u00fado. Com ele, voc\u00ea pode marcar um texto de acordo com seu significado, indicando se \u00e9 um par\u00e1grafo, um t\u00edtulo ou um item de uma lista, por exemplo.<\/li>\n
- CSS: Folhas de Estilo em Cascata permitem que voc\u00ea estilize seu conte\u00fado. Usando essa linguagem, voc\u00ea pode colorir um par\u00e1grafo de verde, deixar todos os seus links em negrito ou posicionar uma barra lateral ao lado do seu artigo principal. \ud83c\udfa8<\/li>\n
- JavaScript: Com esta linguagem de programa\u00e7\u00e3o, voc\u00ea pode adicionar funcionalidades ao seu site. Voc\u00ea pode fazer com que bot\u00f5es mostrem ou ocultem partes do seu documento quando clicados, ou implementar um processador de texto ou videogame completo. \ud83c\udfae<\/li>\n<\/ul>\n
Ele site.dev<\/a> (escrito por miembros del equipo de Chrome) y MDN, la Red de Desarrolladores de Mozilla, son dos excelentes fuentes de informaci\u00f3n sobre tecnolog\u00edas web fundamentales.<\/p>\n
![\"A](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_798_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nA estrutura do aplicativo<\/h2>\n
O aplicativo que voc\u00ea criar\u00e1 consistir\u00e1 em tr\u00eas arquivos simples: index.html, styles.css e script.js. \ud83d\uddc2\ufe0f<\/p>\n
N\u00e3o h\u00e1 requisitos especiais para executar o aplicativo, voc\u00ea s\u00f3 precisa de um navegador da web. N\u00e3o h\u00e1 funcionalidade de backend, ent\u00e3o voc\u00ea n\u00e3o precisa de uma linguagem de script como PHP ou de um servidor web local. Quando terminar, voc\u00ea pode abrir o arquivo index.html diretamente no seu navegador<\/a> e tudo dar\u00e1 certo. \ud83d\ude0a<\/p>\n
\u00c9 importante observar que este aplicativo salva seu texto sem grav\u00e1-lo em um arquivo espec\u00edfico no disco, j\u00e1 que o JavaScript n\u00e3o consegue acessar o sistema de arquivos. Utiliza a Web Storage API, uma alternativa poderosa aos cookies. \ud83c\udf6a\ud83d\udcbe<\/p>\n
Como construir o anotador<\/h2>\n
Crie os tr\u00eas arquivos a seguir no mesmo diret\u00f3rio e abra index.html em um navegador da web. Alternativamente, voc\u00ea pode baixar os arquivos de este reposit\u00f3rio GitHub<\/a>. \ud83d\udce5<\/p>\n
Construindo a estrutura com HTML<\/h3>\n
O arquivo index.html define a estrutura do conte\u00fado do seu aplicativo em HTML. Inclua refer\u00eancias aos outros dois arquivos para que um navegador possa combin\u00e1-los para o produto final.<\/p>\n
Como todos os documentos HTML, a estrutura de n\u00edvel superior inclui uma se\u00e7\u00e3o de cabe\u00e7alho contendo metadados e uma se\u00e7\u00e3o de corpo contendo o conte\u00fado real que aparecer\u00e1 na p\u00e1gina:<\/p>\n
HTML<\/span>>\r\n<HTML<\/span>><\/span>\r\n<cabe\u00e7a<\/span>><\/span>\r\n ...\r\ncabe\u00e7a<\/span>><\/span><\/code><\/pre>\n<corpo<\/span>><\/span>
\n…
\ncorpo<\/span>><\/span>
\nHTML<\/span>><\/span><\/p>\n<\/code><\/pre>\n<\/code><\/pre>\nOs metadados no cabe\u00e7alho s\u00e3o muito breves, com apenas um t\u00edtulo de p\u00e1gina (que aparece na barra de t\u00edtulo do seu navegador) e uma refer\u00eancia ao arquivo styles.css:<\/p>\n
<t\u00edtulo<\/span>><\/span>Textot\u00edtulo<\/span>><\/span>\r\n <link<\/span> rel<\/span>="folha de estilo"<\/span> href<\/span>="estilos.css"<\/span> \/><\/span>\r\n<\/code><\/pre>\nO corpo \u00e9 mais complicado, mas existem apenas algumas partes importantes:<\/p>\n
<divis\u00e3o<\/span> eu ia<\/span>="contador"<\/span>><\/span>\r\n palavras: <extens\u00e3o<\/span> eu ia<\/span>="palavras"<\/span>><\/span>0extens\u00e3o<\/span>><\/span>\r\n \/ caracteres: <extens\u00e3o<\/span> eu ia<\/span>="caracteres"<\/span>><\/span>0extens\u00e3o<\/span>><\/span>\r\n divis\u00e3o<\/span>><\/span><\/code><\/pre>\n<\u00e1rea de texto<\/span> eu ia<\/span>="texto"<\/span> foco autom\u00e1tico<\/span>=\u00ab1\u00bb<\/span>><\/span>\u00e1rea de texto<\/span>><\/span><\/p>\n
<\/code><\/pre>\n<roteiro<\/span> src<\/span>=\u00abscript.js\u00bb<\/span>><\/span>roteiro<\/span>><\/span><\/p>\n
<\/code><\/pre>\n<\/code><\/pre>\nO elemento div cont\u00e9m a contagem de palavras e caracteres do aplicativo. Ele estar\u00e1 localizado na parte superior do aplicativo web e ser\u00e1 atualizado sempre que o texto for alterado.<\/p>\n
Observe os atributos id, que s\u00e3o vitais para a opera\u00e7\u00e3o. O valor de um id deve ser \u00fanico, para que o aplicativo possa us\u00e1-lo para identificar um item espec\u00edfico. Fazer isso pode nos ajudar a estilizar esses elementos e tamb\u00e9m direcion\u00e1-los ao adicionar funcionalidades.<\/p>\n
A textarea \u00e9 um elemento de formul\u00e1rio integrado que permite digitar texto simples em um navegador. Com o atributo de foco autom\u00e1tico, voc\u00ea estar\u00e1 pronto para escrever assim que a p\u00e1gina carregar. Por fim, a p\u00e1gina faz refer\u00eancia ao arquivo javascript, script.js.<\/p>\n
Neste ponto, voc\u00ea pode abrir o arquivo index.html em um navegador. Ele n\u00e3o far\u00e1 nada agora e nem ficar\u00e1 bonito, mas \u00e9 \u00fatil testar seu aplicativo em cada est\u00e1gio para garantir que o b\u00e1sico funcione conforme o esperado.<\/p>\n
![\"Uma](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_678_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nDeixando-os bonitos com CSS<\/h3>\n
O CSS permite que voc\u00ea estilize partes da sua p\u00e1gina da web direcionando essas partes e especificando valores para propriedades como font-size e background-color. Este aplicativo de exemplo n\u00e3o precisa de um design muito refinado porque sua interface \u00e9 muito b\u00e1sica. No entanto, podemos suavizar as arestas com um toque de estilo. \ud83c\udfa8\u2728<\/p>\n
Primeiro, estilize o corpo para definir o design geral:<\/p>\n
corpo<\/span> {\r\n margem<\/span>: 0;\r\n preenchimento<\/span>: 0;\r\n mostrar<\/span>: grade<\/span>;\r\n altura m\u00ednima<\/span>: 100vh<\/span>;\r\n linhas de modelo de grade<\/span>: conte\u00fado m\u00ednimo<\/span> 1fr<\/span>;\r\n}\r\n<\/code><\/pre>\nEste CSS utiliza la disposici\u00f3n en cuadr\u00edcula para posicionar los conteos de palabras y caracteres en una fila estrecha sobre el textarea. La propiedad grid-template-rows especifica que la fila del conteo debe ser lo m\u00e1s corta posible (min-content) y el textarea debe llenar el espacio restante (1fr).<\/p>\n
A linha do contador tem um estilo b\u00e1sico para diferenci\u00e1-la do restante do texto, principalmente pelo seu fundo:<\/p>\n
Contador #<\/span> {\r\n fam\u00edlia de fontes<\/span>: sem serifa<\/span>;\r\n cor de fundo<\/span>: #f7f7f7<\/span>;\r\n alinhamento de texto<\/span>: centro<\/span>;\r\n largura<\/span>: 100%;\r\n preenchimento<\/span>: 0.5em<\/span> 0;\r\n}\r\n<\/code><\/pre>\nPor fim, a textarea \u00e9 estilizada para exibir texto leg\u00edvel com espa\u00e7o suficiente para respirar. A linha que separa as contagens do texto \u00e9, na verdade, a borda superior desta \u00e1rea de texto.<\/p>\n
\u00e1rea de texto<\/span> {\r\n largura<\/span>: 100%;\r\n altura<\/span>: 100%;\r\n tamanho da fonte<\/span>: 16pt<\/span>;\r\n preenchimento<\/span>: 1em<\/span>;\r\n dimensionamento de caixa<\/span>: caixa de borda<\/span>;\r\n contorno<\/span>: 0;\r\n fronteira<\/span>: nenhum<\/span>;\r\n topo da borda<\/span>: 1px<\/span> s\u00f3lido<\/span> #999<\/span>;\r\n}<\/code><\/pre>\n![\"O](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_152_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nAdicionando funcionalidade com JavaScript<\/h3>\n
Com a estrutura e o estilo definidos, voc\u00ea est\u00e1 pronto para adicionar funcionalidade: o c\u00f3digo que faz esse aplicativo simples realmente fazer alguma coisa. \ud83d\udee0\ufe0f<\/p>\n
Antes de come\u00e7ar a escrever at\u00e9 mesmo o c\u00f3digo mais simples, \u00e9 uma boa ideia entender o que voc\u00ea quer que ele fa\u00e7a. Neste caso, h\u00e1 apenas alguns requisitos gerais:<\/p>\n
- \n
- Salve o texto inserido e recarregue-o quando necess\u00e1rio.<\/li>\n
- Atualize a contagem de caracteres e palavras para fornecer estat\u00edsticas em tempo real. \ud83d\udcca<\/li>\n<\/ul>\n
Ambos os requisitos envolvem a atualiza\u00e7\u00e3o de elementos no documento. Ent\u00e3o o script come\u00e7a obtendo refer\u00eancias a esses n\u00f3s usando o m\u00e9todo getElementById:<\/p>\n
constante<\/span> palavras = documento<\/span>.obterElementoPorId("palavras"<\/span>);\r\nconstante<\/span> caracteres = documento<\/span>.obterElementoPorId("caracteres"<\/span>);\r\nconstante<\/span> \u00e1rea de texto = documento<\/span>.obterElementoPorId("texto"<\/span>);\r\n<\/code><\/pre>\nObserve que palavras, caracteres e texto s\u00e3o os IDs de seus respectivos elementos no documento, atribu\u00eddos no arquivo HTML com o atributo id.<\/p>\n
Em seguida, precisamos que o aplicativo reaja quando o texto for alterado:<\/p>\n
textarea.addEventListener("entrada"<\/span>, fun\u00e7\u00e3o<\/span>(ev<\/span>) <\/span>{ localStorage.setItem("texto"<\/span>, ev.target.value); update_counts(ev.target.value); });\r\n<\/code><\/pre>\nUm ouvinte de eventos \u00e9 uma fun\u00e7\u00e3o que o JavaScript executar\u00e1 automaticamente quando um determinado evento ocorrer. Neste caso, anexamos um ouvinte ao n\u00f3 textarea, que \u00e9 executado quando o evento "input" ocorre. Ou seja, quando algu\u00e9m interage com a textarea.<\/p>\n
Em seguida, usamos a API de armazenamento da Web para salvar o conte\u00fado atual da textarea, que vem de ev.target.value. Nessa estrutura, ev \u00e9 um objeto que representa o evento que disparou o ouvinte, ev.target \u00e9 o n\u00f3 que recebeu o evento e ev.target.value \u00e9 o texto dessa textarea.<\/p>\n
O m\u00e9todo setItem usa dois par\u00e2metros: um nome de chave para associar aos dados e os dados reais a serem armazenados.<\/p>\n
Em seguida, chamamos update_counts(), passando o mesmo texto. Explicaremos esse recurso em breve.<\/p>\n
Agora que estamos salvando o texto, voc\u00ea vai querer carreg\u00e1-lo novamente quando o aplicativo for aberto ou recarregado. Podemos cuidar disso usando outro ouvinte:<\/p>\n
janela<\/span>.addEventListener("carregar"<\/span>, fun\u00e7\u00e3o<\/span>(ev<\/span>) <\/span>{\r\n var<\/span> texto = localStorage.getItem("texto"<\/span>); textarea.value = texto; update_counts(texto); });\r\n<\/code><\/pre>\nEste ouvinte manipula o evento de carregamento que ocorre no objeto de janela, uma representa\u00e7\u00e3o de n\u00edvel superior da janela do navegador. Quando a janela \u00e9 carregada, uma chamada para getItem() retorna o valor de texto armazenado no armazenamento local. Este c\u00f3digo ent\u00e3o define o valor da textarea para o texto carregado e, como o listener acima, chama update_counts() com este texto.<\/p>\n
O trabalho restante \u00e9 feito na fun\u00e7\u00e3o update_counts() que se parece com isto:<\/p>\n
fun\u00e7\u00e3o<\/span>\u00a0contagens_de_atualiza\u00e7\u00e3o<\/span>(texto<\/span>) <\/span>{ chars.innerHTML = texto.comprimento; palavras.innerHTML = texto.split(' '<\/span>).comprimento; }\r\n<\/code><\/pre>\nDiferentemente de uma textarea, o texto normal n\u00e3o tem uma propriedade value, ent\u00e3o definimos a propriedade innerHTML. A propriedade length de uma string \u00e9 uma propriedade simples somente leitura que nos fornece o n\u00famero de caracteres.<\/p>\n
text.split(' ') divide a string nos caracteres de espa\u00e7o, retornando o resultado como uma matriz de strings. Assim como as strings, os arrays t\u00eam uma propriedade de comprimento que nos fornece o n\u00famero de elementos em um array.<\/p>\n
No entanto, se voc\u00ea testar esse c\u00f3digo, poder\u00e1 notar alguns erros:<\/p>\n
- \n
- Ele n\u00e3o contar\u00e1 corretamente uma palavra sozinha em uma linha, pois n\u00e3o h\u00e1 caracteres de espa\u00e7o ao redor dela.<\/li>\n
- Sem nenhum texto, ele reportar\u00e1 uma \u00fanica palavra devido ao funcionamento da divis\u00e3o.<\/li>\n<\/ol>\n
Para resolver o primeiro problema, voc\u00ea pode dividir em uma express\u00e3o regular (\\s significa "um caractere em branco") em vez de um espa\u00e7o. Para resolver o segundo, filtre as strings vazias do resultado:<\/p>\n
palavras.innerHTML = texto.split(\/\\s\/<\/span>).filtro(fun\u00e7\u00e3o<\/span>(n<\/span>) <\/span>{ retornar<\/span> n != ''<\/span>; }).comprimento;\r\n<\/code><\/pre>\nSe voc\u00ea n\u00e3o entende completamente essa linha, verifique as p\u00e1ginas do MDN para dividir<\/a> e filtro<\/a>.<\/p>\n
![\"O](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_129_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\n
\n