Começando a programar com JavaScript

Olá, devs e futuros devs!

Aprender programação não é uma tarefa trivial, principalmente se você está fazendo isso por conta própria. No início, você precisa aprender lógica de programação, mas também tem que estudar uma linguagem para escrever e executar o seu programa. Além disso, é necessário configurar um ambiente de programação no seu computador, para que você possa executar os códigos que escrever. Essa configuração pode ser difícil para alguém que ainda não tem experiência na área, o que pode causar uma desistência precoce. Pensando nisso, a Lanne resolveu criar esse tutorial para ajudar iniciantes na programação, e para isso vamos usar a linguagem de programação JavaScript.

Uma breve observação/curiosidade

Uma observação importante para iniciantes. Existem duas linguagens de programação com nomes semelhantes: Java e JavaScript. Porém, a semelhança está só no nome. Você deve estar pensando “Ué, mas ambas tem Java no nome, devem ser parentes ou algo do tipo!”. Eu sei, é estranho, mas é apenas uma coincidência ou uma jogada de marketing de quem criou o JavaScript. Aliás, JavaScript é JS para os íntimos :D

Por que JavaScript?

Como dito anteriormente, realizar a configuração de ambiente pode ser difícil, mesmo seguindo um tutorial. Visto que, por exemplo: seu sistema operacional pode estar desatualizado, ou talvez seja necessário instalar outros programas que uma determinada linguagem precisa (a JVM do Java, por exemplo) e outros problemas que podem eventualmente ocorrer durante uma instalação. Daí entra o JavaScript. Agora você deve estar pensando: “Ah Caio, entendi, então o ambiente do JavaScript é fácil de configurar, né?”. Mais do que isso meu caro leitor, não é necessário configuração e, por essa razão, eu indico JS pra quem está iniciando e quer saber como é programar.

Bom, mas se não é necessário fazer qualquer tipo de configuração, isso quer dizer que o JS vem instalado em todas as máquinas? Mais ou menos, o JavaScript é uma linguagem de programação de script (como o próprio nome já diz), ou seja, é necessário que um software leia o script (código que você vai escrever) e execute-o. Esse software é chamado de interpretador. Então eu preciso desse interpretador instalado no meu computador? Sim! E o melhor, você já tem. O JS foi criado para ser usado pelos sites na Internet para adicionar diversas funcionalidades às páginas, como por exemplo fazer cálculos, mudar o conteúdo da página e várias outras coisas. Isso significa que todo software que é usado para abrir sites da Internet, possui um interpretador JavaScript, ou seja, o navegador que você está usando nesse momento para acessar esse tutorial tem um interpretador JS. Legal demais, não é?

Então chegamos na conclusão que, qualquer script/código JavaScript pode ser executado pelo navegador! Por isso é tão simples começar pelo JS, você só precisa de um navegador no seu computador, seja ele o Chrome, Firefox, Edge, Opera ou até mesmo o InternetExplorer (espero, de coração, que você não use esse ainda haha). Então bora ver como funciona!

Hello, world (Olá, mundo) em JavaScript

Se você é novo no mundo da programação, vou te apresentar o “Hello, world” (“Olá, mundo”, em português). Você vai ouvir muito esse termo na área de desenvolvimento. Basicamente, o “Hello, world” é o programa mais simples que você pode fazer em uma linguagem de programação. É muito utilizado para demonstrar como é a sintaxe de uma linguagem de programação e testar se seu ambiente está funcionando corretamente. Agora chega de conversa e vamos colocar a mão na massa!

Existem várias formas de fazer o “Hello, world!” em JS usando o navegador, mas vamos pela mais simples primeiro. Vou mostrar o passo a passo pelos navegadores Firefox e Chrome:

  1. Abra seu navegador favorito;

  2. Abra o console de desenvolvimento do seu navegador:
    • No Firefox, você pode usar o atalho de teclado ctrl + shift + k ou procurar nos menus por “Console web” (Ferramentas > Web Developer > Console web):

      Como abrir o console web no Firefox

    • No Chrome, você pode usar o atalho de teclado ctrl + shift + j ou procurar nos menus por “Console JavaScript” (Ferramentas > Console JavaScript):

      Como abrir o console web no Chrome

    • O console de desenvolvimento é assim no Firefox (é bem semelhante no Chrome):

      Console de desenvolvimento no Firefox

    • OBS: o seu console pode exibir algumas mensagens de erro (em vermelho) ou alerta (em amarelo), ignore-as, são mensagens referentes ao site que você está acessando e, quase todos os sites tem alguma mensagem para exibir. Se você abrir o console enquanto acessa esse post verá uma mensagem deixada por nós da Lanne pra você!

  3. Agora, com o console aberto, vamos escrever nossa primeira linha de código. Dentro do console, digite console.log("Hello, world!"); e aperte a tecla enter. Pronto, você deu seu primeiro comando como programador! Mas você deve estar se perguntando: “o que isso faz???”. Quando você usa comando console.log, você está solicitando para o navegador mostrar no console de desenvolvimento uma mensagem, no nosso caso, mostrar a mensagem “Hello, world!”. Você deve ter percebido que logo depois de apertar o enter, a mensagem “Hello, world!” apareceu no seu console:

    Como abrir o console web no Firefox

Alguns pontos que gostaria de comentar antes de avançarmos:

  • Você deve ter percebido que uma linha antes do “Hello, world!” apareceu o texto “<- undefined”, não se preocupe com isso agora, assim que nós avançarmos no tutorial, você não verá este texto mais.

  • Já se perguntou qual o motivo de colocarmos o texto Hello, world! dentro de aspas duplas ("") no comando console.log("Hello, world!");? Esse é um padrão de quase todas linguagens de programação e serve para diferenciar texto puro de um comando da linguagem. Confuso? Vamos ver um exemplo, imagina que no lugar de “Hello, world!” nós queremos que o navegador mostre a mensagem “Estou fazendo o navegador exibir mensagens através do seu console! Legal, né?”. Percebeu que dentro dessa nova frase tem a palavra console? Essa palavra faz parte do comando que nós estamos usando para exibir mensagens (console.log). Se não colocarmos as aspas em volta da frase, o interpretador vai achar que essa palavra console no meio da frase faz parte do comando console.log, então, por padrão, sempre que você quiser colocar um texto no meio do código você precisa usar as aspas duplas!
    • Vamos, faça o teste aí, remova as aspas de “Hello, world!” console.log(Hello, world!);. Com certeza você recebeu uma mensagem de erro, algo do tipo SyntaxError: ..., né? Bom, agora você já sabe que realmente não dá certo usar o texto sem aspas haha.
  • E sobre o ; no final do comando? É um padrão de várias linguagens, também. Porém, em algumas linguagens o uso do ; é opcional, isto é, você pode ou não usar. Inclusive, esse é o caso do JavaScript, você pode omitir o ; no final e vai funcionar. Faz o teste aí! Então por que estamos adicionando o ;? Apenas por estilo haha. Parece brincadeira, mas não é. Quando você faz um programa que tem apenas uma linha, o ; não faz diferença, mas quando você tem um programa com muitas linhas, o uso do ; pode ajudar muito na legibilidade dele. Ficou curioso pra saber mais sobre o assunto? Comenta com a gente, quem sabe não fazemos um post só sobre isso!

Se você chegou até aqui, parabéns, você fez seu primeiro comando como programador! Ok, ele não é muito útil, eu sei, mas é apenas o começo hehe. Pra ele ficar mais legal, você pode substituir o comando console.log pelo alert. A diferença é que o console.log mostra a mensagem no console e o alert abre uma janelinha para mostrar a mensagem. Bora testar? Digite o código alert("Hello, world!"); no console, aperte enter e veja a mágica acontecer:

Como abrir o console web no Firefox

Agora que você já fez seu primeiro “Hello, world”, vamos avançar.

Criando seu primeiro programa

Um programa é um conjunto de instruções que resolvem algum problema. Na maioria dos casos, o problema que deve ser resolvido é complexo e precisa de centenas ou milhares de linhas de código para ser resolvido (ou pelo menos pra tentar resolver hehe). Porém, existem programas simples, como o que nós vamos fazer agora. O nosso programa vai se chamar “soma_prog” (super criativo) e, para surpresa de 0 pessoas, vai ter como objetivo somar 2 números e mostrar o resultado. Então bora codar!

A primeira coisa que vamos precisar para criar nosso programa é de um editor de texto, se você estiver usando o Windows, você pode usar o bloco de notas que vem por padrão nele. Caso esteja no Linux, você deve ter acesso ao Gedit ou algum semelhante. Nós não vamos precisar escrever muito código, então o editor pode ser simples.

Com seu editor aberto, vamos colocar o nosso “Hello, world!” dentro do arquivo, apenas para testar se está tudo funcionando corretamente. Agora que estamos escrevendo o código em um arquivo, você vai precisar de mais alguns comandos pra fazer o seu “Hello, world!” funcionar. Esse arquivo vai ser aberto e executado pelo navegador, então a primeira coisa que vamos ter que fazer é “explicar” para o navegador que aquilo que ele está abrindo é um script, para isso, basta adicionar o que nós chamamos de tag de script no seu arquivo: <script></script>. Repare que existem duas tags de script, primeiro uma <script> sem barra e depois uma </script> com barra. A primeira tag (sem barra) significa que você está começando um script e a segunda tag (com barra) diz que você está finalizando o script, isto é, todo código que você quer que o navegador execute, tem que ficar entre as duas tags, ou seja, seu arquivo deve ficar assim:

<script>console.log("Hello, world!");</script>

Agora salve esse arquivo com o nome soma_prog.html em qualquer pasta de sua preferência. Atenção especial para a extensão do arquivo .html, ela é importante para o funcionamento do nosso código, mas não entraremos em detalhe no momento, pois é um assunto extenso e merece um post dedicado.

Com seu arquivo salvo no seu computador, você está pronto para executar seu programa. Vamos aos passos:

  1. Abra a pasta onde você salvou seu arquivo;
  2. Clique com o botão direito no arquivo soma_prog.html;
  3. Selecione a opção “Abrir com outro programa”, o texto pode variar dependendo do seu sistema operacional;
  4. Na janela que abriu, procure o navegador que você está usando (Chrome, Firefox, Edge…);
    • Caso não apareça o seu navegador ao abrir a janela, tente encontrar algum botão do tipo “Mostrar todos os programas”, e então ache seu navegador.

Feito os passos, o seu navegador deve abrir uma nova aba/janela em branco, certo? Agora vamos ver se seu programa funcionou, na página em branco que foi aberta no navegador, abra o console de desenvolvimento (ctrl + shift + k no Firefox e ctrl + shift + j no Chrome) e voilà, a mensagem “Hello, world!” deve estar escrito no console. Além dela, você deve ter outras mensagens de erros e/ou alertas, novamente ignore-as, vamos focar no nosso programa.

Agora que sabemos que o nosso programa funciona, vamos alterá-lo para que ele faça a soma de 2 números. Para isso, basta alterar o conteúdo dentro do comando console.log, colocando a soma dos 2 números que deseja somar, por exemplo: 2 + 2. Então, nosso código deve ficar assim:

<script>console.log(2 + 2);</script>

Vamos ver se funcionou? Você tem duas opções para testar a alteração, se você ainda estiver com a página em branco aberta, basta recarrega-la (usando o botão ou apertando F5) e olhar o console novamente (se ele estiver aberto ainda, você nem precisa abri-lo de novo). Caso, você já tenha fechado, basta abrir o arquivo no navegador novamente, da mesma forma que fizemos antes. De qualquer maneira, ao atualizar a página ou abrir o arquivo novamente, você deve ver o resultado da soma no console de desenvolvimento, ou seja, o número 4:

Como abrir o console web no Firefox

Você também pode testar outros valores e operações matemáticas, por exemplo: 1 + 11, 12 - 5, 7 * 8 e 9 / 3. Sendo que o * é a multiplicação e o / é a divisão. Inclusive, você pode testar todos ao mesmo tempo:

<script>
	console.log(2 + 2);
	console.log(1 + 11);
	console.log(12 - 5);
	console.log(7 * 8);
	console.log(9 / 3);
</script>

Se quiser, você pode trocar o console.log pelo alert e ver várias janelas seguidas haha.

Seu primeiro programa está pronto. Ele soma dois números e mostra o resultado no console do navegador, mas esse programa pode ser ainda melhor! Sabendo disso, a Lanne já está preparando uma continuação para esse post, onde nós vamos melhorar esse programa e, consequentemente, ensinar mais técnicas de programação pra você!

Espero que você tenha gostado do que aprendemos até aqui :)

Tem alguma dúvida ou sugestão? Nos conte o que achou nos comentários, vai ser um prazer ler e responder!

Abraços!