Artigo original: https://www.freecodecamp.org/news/creating-a-bare-bones-quote-generator-with-javascript-and-html-for-absolute-beginners-5264e1725f08/
Escrito por: Sophanarith Sok
Este tutorial é destinado a iniciantes que querem aprender como criar uma aplicação para a web simples usando o JavaScript. Ela o ajudará a entender a interação entre o JavaScript e um documento em HTML, bem como o funcionamento dos dois juntos para exibir algo no navegador da web para que os usuários possam ver.
Se você não tem experiência alguma em HTML e JavaScript, não se preocupe. Vou orientar você através de cada linha de código, explicando tudo em detalhes. Quando chegar ao final dessa lição, você deve ter uma compreensão muito melhor de como o JavaScript funciona em conjunto com o HTML para tornar as páginas da web interativas.
Neste projeto, construiremos um gerador de citações aleatórias, que exibirá uma citação aleatória para o usuário toda vez que ele pressionar um botão. Para começar, você precisará de três coisas essenciais que, quase sempre, são usadas para todos os projetos da web:
- um navegador
- um editor de texto
- o desejo de criar
Para este tutorial, usarei o navegador Google Chrome, o editor Sublime Text e, logicamente, minha vontade de criar e de ensinar. Você, porém, pode usar as ferramentas com as quais se sentir mais confortável.
Nota da tradução: no momento da tradução deste artigo, já foi lançada a versão 4 do editor Sublime Text. Você pode baixar a versão mais recente. Isso não influenciará em seu projeto.
Vamos começar!
A primeira coisa que faremos é criar a pasta que conterá todos os arquivos que compõem o projeto. Crie uma pasta vazia em sua área de trabalho e dê a ela um nome como "quote generator" (em português, "gerador de citações"). Abra o Sublime Text e arraste a pasta para o Sublime. Agora, a pasta deve estar acessível através da barra lateral.
A maioria dos projetos da web consiste em pelo menos um arquivo HTML, JavaScript e CSS. Vamos criar esses arquivos dentro da pasta "quote generator".
No Sublime Text, clique com o botão direito do mouse na pasta "quote generator" na barra lateral e clique em "Create new file" (criar arquivo). Uma barra de entrada aparecerá na parte inferior para nomear o arquivo. Digite "index.html" e pressione Enter. Você criou o arquivo index.html. Repita essa etapa mais duas vezes, mas crie um arquivo chamado javascript.js e outro chamado style.css. É importante certificar-se de que, ao nomear um arquivo, as letras estejam sempre em minúsculas para evitar complicações.
Agora que temos todos os nossos arquivos prontos, vamos criar nosso arquivo HTML que funcionará como base para o projeto para a web. Começaremos com um código HTML básico dentro do nosso arquivo de index.html antes de podermos adicionar qualquer coisa.
Abaixo está o nosso arquivo HTML sem nada nele. Você pode pensar nele como sendo o esqueleto do HTML, que sustentará todos os músculos (conteúdo), que adicionaremos mais tarde.
Agora, teremos que associar nosso arquivo JavaScript ao nosso documento HTML para que nosso código em JavaScript possa interagir com o documento HTML. Também adicionaremos texto dentro das tags <title>, um elemento <h1>, criaremos um elemento <div>, com um id quoteDisplay e um elemento <button> com um atributo onclick recebendo a função "newQuote()".
Dividindo em partes
Se você ficou confuso a respeito de como cada parte do código HTML serve ao seu propósito, então vou explicar isso aqui. Se você sabe exatamente o que cada elemento faz e por que ele está lá, então, pode pular para a próxima seção para continuar.
Primeiro, adicionamos "Quote Gen" (em português, gerador de citações) entre as tags <title>. A tag title pega o texto dentro dela e o exibe na guia do navegador da web quando ela é aberta.
Durante a primeira etapa, também precisamos nos certificar de associar o arquivo javascript.js na parte inferior do documento HTML logo antes da tag de fechamento do elemento <body>.
Em segundo, criamos um elemento <h1> com a frase "Simple Quote Generator" (em português, gerador de citações simples). Ele servirá para exibir um título/cabeçalho dentro de nossa página da web.
Em seguida, criamos um elemento <div> com um atributo id definido como "quoteDisplay". Um elemento <div> funciona como um divisor para documentos HTML. Elementos <div> ajudam a organizar o conteúdo em uma página da web. O atributo id funciona como um identificador para que o JavaScript possa facilmente pegá-lo e manipulá-lo. Nesse caso, usaremos o JavaScript para pegar o elemento com o id "quoteDisplay" para colocar citações dentro do elemento <div>.
Depois disso, criamos um elemento <button> com um atributo onclick com "newQuote()" passado como parâmetro. O elemento <button>, como você deve ter adivinhado, é um botão que fará algo quando você clicar nele. O atributo onclick é usado para definir uma função para o botão, de modo que, toda vez que você clicar no botão, ele executará a função que foi passada para o atributo onclick desse <button>.
Neste caso, toda vez que você clicar no botão, ele executará a função newQuote(). Ainda não definimos a função newQuote(). Se você abrir o projeto dentro de um navegador e pressionar o botão, ele lançará um erro dentro do console, já que a função não existe no momento.
Vamos revisar rapidamente, mostrando o conteúdo completo do arquivo index.html no momento e mostrando o que ele produz no navegador. Para abrir o projeto, use um navegador e abra o arquivo index.html.
Pensar logicamente usando código
Finalmente, é hora de começar a trabalhar no JavaScript em nosso arquivo javascript.js para que possamos desenvolver nossa própria funcionalidade de geração de citações.
Antes de começarmos a programar, vamos pensar logicamente sobre como podemos criar uma máquina geradora de citações com código. Não podemos simplesmente começar a programar sem pensar primeiro.
Precisamos descobrir o que queremos e quando queremos. Para este projeto, queremos citações! Quando queremos? Queremos já... Quero dizer, queremos sempre que o usuário pressionar o botão.
Respondida a primeira pergunta, precisamos fazer a segunda. O que são citações? Quer dizer, o que elas são de fato?
Obrigado, Jaden! Sim! As citações são compostas por letras, que, por sua vez, compõem palavras. No mundo da programação, as palavras são classificadas como strings. Assim sendo, nossas citações precisam ser strings!
Como sabemos que vamos querer várias citações, não apenas uma, e que as citações serão selecionadas aleatoriamente, a melhor maneira de armazenar essas várias strings será usando um array.
Se você ainda não está familiarizado, elementos dentro de um array são obtidos chamando o número de índice do elemento no array. Os detalhes técnicos disso estão além do escopo deste tutorial, mas, de modo simplificado, cada elemento em um array é representado por números inteiros em ordem cronológica. O primeiro elemento de um array tem o índice de número 0 e cada elemento depois dele tem o valor anterior mais um.
Para obter uma citação aleatória em um array, sabemos que precisamos produzir um número aleatório toda vez que o usuário clicar no botão. Em seguida, usaremos esse número aleatório para obter a citação no array e a colocaremos no documento HTML, que, por sua vez, exibirá a citação no navegador para o usuário.
É isso! Descobrimos como criar o gerador de citações aleatórias pensando logicamente em código! Aqui vai um resumo da lógica que usamos para nosso projeto:
- As citações são várias strings que precisam ser armazenadas em um array.
- Sempre que um botão é pressionado, um número inteiro aleatório precisa ser gerado.
- O número será usado como a representação do número de índice no array dentro do array de citações.
- Ao obter a citação selecionada aleatoriamente no array usando o número inteiro gerado aleatoriamente, colocaremos a citação no documento HTML.
Hora de programar!
Uau! Chegamos até aqui e nem começamos a programar ainda! Boas-vindas ao mundo da programação!
Calma, é brincadeira!
Bem... não, não é.
Você vai passar muito tempo programando nessa carreira (ou nesse passatempo). O que quero dizer é que você vai passar ainda mais tempo pensando na lógica de programação e de como resolver problemas. Programação não é digitar cem palavras por minuto durante 20 minutos no teclado. Isso não vai acontecer.
Agora que resolvemos o problema da lógica, é hora de começar a programar. É hora de começar a mexer no arquivo javascript.js.
Precisamos criar nossas próprias citações ou copiá-las de uma fonte on-line.
Eu procurei "Melhores citações" no Google e copiei 10 delas de um site. Depois, eu as coloquei em um array, separadas por vírgulas. Não se esqueça de colocar suas citações entre aspas simples ou duplas. Se a citação tiver apóstrofos (em inglês, usa-se o apóstrofo para contrações, por exemplo), é preciso usar barras invertidas (\) antes de cada apóstrofo para "escapar" esses caracteres (texto em inglês) para que o JavaScript saiba que o símbolo é parte da string, não é parte da sintaxe da programação.
Como se pode ver na figura abaixo, defini uma variável chamada "quotes" (em português, citações) e a defini como sendo um array com várias citações retiradas da internet.
Agora, precisamos criar nossa função newQuote(), que mencionei anteriormente na seção do HTML deste tutorial. Para nossa função newQuote(), precisamos gerar um número inteiro aleatório, que varia de 0 ao comprimento de nosso array de cotações. Explicarei mais abaixo.
Primeiro, chamamos a função Math.floor(). Ela recebe um parâmetro e arredonda o número para baixo até o número inteiro mais próximo. Por exemplo, se chamarmos Math.floor(5.7), ela retornará 5.
Em segundo lugar, passaremos a função Math.random() como um parâmetro para Math.floor(). A função Math.random() gerará um número decimal aleatório entre 0 e 1.
Então, digamos que seja isto o que temos:
Se pedirmos para randomNumber ser mostrado no console, usando console.log, neste momento, o resultado retornado será sempre 0. Isso ocorre porque Math.random() gerará sempre um número decimal entre 0 e 1, como 0,4, 0,721, 0,98 e assim por diante. Como passamos Math.random() dentro de Math.floor() como parâmetro, e como Math.floor() sempre é arredondado para baixo para o número inteiro mais próximo, qualquer número decimal entre 0 e 1 sempre será revertido para 0.
Para que fazemos isso, então? Bem, para criar nossos números de índice de array, precisamos de números inteiros, mas precisamos de números inteiros aleatórios. Para gerar números inteiros aleatórios e deixar de retornar apenas 0, precisaremos pegar nosso decimal aleatório e multiplicá-lo por um número inteiro.
Vamos tentar, então, algo assim:
Se pedirmos para randomNumber ser mostrado no console novamente, desta vez, os resultados ficarão entre 1 e 19. Agora, é possível usar esse estado atual do retorno de randomNumber para extrair uma citação do array quotes, mas que funcionará apenas se o número do índice do array existir dentro do array. Do contrário, teremos um erro.
Por exemplo:
undefined.De momento, temos apenas 10 strings no array quotes. Números acima de 9 retornarão undefined, pois esses índices não existem no array.
Para resolver esse problema, precisamos apenas multiplicar Math.random() pelo comprimento do nosso array quotes. Ao fazer isso, podemos adicionar ou remover quantas strings quisermos do array e nossa variável randomNumber sempre retornará um número válido, pois usaremos usando o método quotes.length para sempre obter o comprimento atual do array.
Agora, precisamos de uma maneira de usar o valor de randomNumber para recuperar aleatoriamente uma citação do array quotes, colocar a citação em nosso documento HTML e exibi-la para nossos usuários.
Você se lembra de que eu mencionei que usamos o ID do HTML para permitir que o JavaScript obtivesse e manipulasse elementos do HTML? Bem, é isso que faremos com o ID de quoteDisplay que criamos anteriormente.
quoteDisplay()Usando document.getElementById(), podemos passar qualquer string e o JavaScript procurará em nosso documento HTML e recuperará o elemento que tiver esse id para fazermos o que quisermos com ele. Vamos passar 'quoteDisplay' como parâmetro para recuperar o elemento HTML com o id "quoteDisplay".
Agora, usaremos o método .innerHTML para passar uma citação obtida aleatoriamente em nosso array como o valor a ser adicionado ao elemento quoteDisplay do HTML.
quoteDisplayDefinimos .innerHTML como sendo o número do índice no array quotes, obtido por meio de nossa variável randomNumber. A função newQuote() está concluída!
Missão cumprida!
Se você chegou a esta parte do tutorial, você concluiu o projeto! Parabéns! Você praticamente terminou de criar o gerador de citações aleatórias.
Agora, tudo o que você precisa fazer é abrir o projeto em seu navegador e ver se ele funciona! Faça isso arrastando o arquivo index.html para a janela do navegador.
Pressione o botão e ele deve exibir uma citação aleatória na tela. Pressione o botão quantas vezes quiser. Em cada situação, uma nova citação deve substituir a atual na tela.
Você pode adicionar quantas citações quiser ao seu array quotes.
Dê uma olhada nos arquivos do projeto completos, lado a lado. Eles são os arquivos que compõem o gerador de citações aleatórias.
E agora?
Você criou um gerador de citações aleatória totalmente funcional e provavelmente está se perguntando para onde você vai a partir daqui.
Você provavelmente está pensando que este gerador de citações aleatórias parece muito chato – e que ninguém provavelmente o usaria. Você tem toda razão. Este projeto parece bastante simples e cabe a você mudar isso.
Você pode melhorar o projeto adicionando suas próprias funcionalidades e estilo a ele.
No início deste tutorial, criamos um arquivo de estilo chamado style.css que não usamos. O CSS é usado para tornar as páginas da web bonitas e coloridas. Cabe a você adicionar ao arquivo CSS para estilização, se desejar.
Você pode procurar alguns tutoriais de CSS para obter algumas orientações adicionais. Deixe sua imaginação correr solta e faça desse projeto o seu! Faça o que quiser! Programar é mágico e você é um bruxo, Harry!
Se estiver curioso para ver o quanto um projeto pode mudar com CSS e com algumas linhas a mais de código em JavaScript, confira minha própria versão do gerador de citações aleatórias, a qual chamei de "Epiphany Clock" (em português, relógio das epifanias) aqui.