Criando seu primeiro código de programação em JS

Vimos em outros textos, que programação é sobre resolver problemas com uma série de ações para o computador. Cada solução pode ser representada com um Fluxograma, mas nesse texto vamos criar nosso primeiro código.

Linguagens de programação

Quando falamos em escrever códigos de programação, precisamos escolher uma linguagem de programação. Essas linguagens são como Inglês, Português, Italiano, Japonês… Algumas se parecem e outras têm um estilo totalmente diferente, mas que conseguem, por exemplo, fazer você escrever menos pra resolver um mesmo problema.

Geralmente em universidades e cursos de Computação ensina-se linguagens como: C, Java, ou Python. São boas linguagens pra se começar, mas nós vamos para um caminho não tão comum escolhendo Javascript (ou JS) para escrever nossos primeiros códigos.

Apesar do nome, Javascript não tem nada a ver com Java, deram esse nome pra linguagem pois Java estava se tornando muito popular, e era uma promessa de mercado. O Javascript apenas queria pegar carona nesse sucesso.

Geralmente para começar a escrever código numa linguagem, você precisa de um programa pra interpretar o código que você escreveu. Uma das grandes vantagens de começar com Javascript é que. se você está lendo esse texto, muito provavelmente já possui o necessário para começar, pois o próprio navegador a interpreta.

Em outros textos podemos falar mais sobre os problemas e características da linguagem, mas uma coisa importante a se dizer é que esse e os próximos textos não te farão um programador JS. O foco não é ser um expert da linguagem e sim aprender a resolver problemas com lógica de programação.

 

O que podemos fazer com Javascript

Nos anos 90, quando a internet estava nascendo, tínhamos sites muito estáticos. Depois que você carregava uma página, não existia muito o que fazer nela a não ser coisas como preencher algum formulário ou ir para outra página.

O Javascript veio para dar dinamismo. Se hoje você consegue ver uma popup/alerta no meio da tela ou se, a medida que você digita uma senha para cadastrar uma conta, o site já diz que ela é muito fraca (antes mesmo de você terminar de preencher o formulário), então você pode ter certeza que códigos Javascript estão trabalhando.

Resultado de imagem para strong password checker gif

 

Onde escrever os códigos

Nesse, e em próximos textos dessa série sobre primeiros passos com Javascript, vamos utilizar o navegador Mozilla Firefox para testar nossos programas. Caso você não o tenha instalado, sugerimos que baixe-o no site da Mozilla.

Todos os nossos códigos vão ser escritos num editor de texto que o próprio Firefox possui, chamado Scratchpad, veja as imagens abaixo para acessa-lo ou acesse o site da Mozilla.

Um submenu irá se abrir, clique em Scratchpad (o atalho mais comum é o Shift + F4) para abrir o editor de texto.

 

 

Você verá que o editor de texto não tem aparentemente nada de diferente de um bloco de notas comum. O mais importante a se notar primeiramente é que já há algo escrito no campo de texto. É apenas um comentário explicando como você pode rodar seu comando usando Ctrl + R (ou outro atalho do seu Sistema Operacional). Se você tentar rodar o programa, nada irá acontecer pois tudo que você escreve entre /* e */ é considerado um comentário em Javascript e deve ser ignorado como programa. É apenas uma anotação para seres humanos 😀 .

Criando nosso primeiro programa

Vamos fazer nosso primeiro comando para o computador, que será mostrar a mensagem “Olá Mundo” dentro de um popup ou alerta.

Para se criar um alerta


/*

Isso é um comentário de código, o computador ignora tudo isso

*/

alert("Olá Mundo");

 

Para executar/rodar o programa, utilize o atalho Ctrl + R ou vá no menu “Execute” > “Run”. Se você for até a aba aberta do seu Firefox, vai perceber que um alerta com o texto Olá Mundo aparecerá, e só irá desaparecer quando você fechá-lo.

Vamos entender o que escrevemos, passo a passo:

  • alert() é um comando que diz para o navegador criar um alerta na tela. Existem alguns tipos de comandos na linguagem, esse tipo em específico, é chamado de função (mesmo conceito matemático que estudamos sobre f(x), tanto que possui a mesma forma de escrita).
  • “Olá Mundo” é um texto puro, ele serve como parâmetro do comando alerta, ou seja, você pode executar o comando alert() passando o texto que quiser. Apenas não se esqueça das aspas duplas no início e final do texto.
  • ; é usado geralmente para marcar o final de um comando. Imagine que você queira fazer dois alertas na tela. Sem o ; ficaria um pouco confuso para o Scratchpad entender se estamos trabalhando com um com dois comandos.

Pode parecer muita coisa a princípio, mas não se assuste com a quantidade de termos e conceitos da matemática. No futuro você entenderá tudo sobre esses assuntos.

Erros de código

Assim como estudamos gramática no português para entender se uma palavra é com M ou N, em Javascript também temos regras gramaticais. Algumas delas citamos logo acima como o uso de parênteses depois do nome de função, aspas para definir textos e etc.

E o que acontece se você não respeitar essas regras? Vamos ver o exemplo a seguir:


/*

Isso código possui um erro.

O texto está faltando aspas depois da palavra Mundo

*/

alert("Olá Mundo);

Veja, o resultado abaixo mostra que o Scratchpad adicionou um comentário no código apenas sinalizando que um SyntaxError aconteceu, ou seja, algum erro sintático foi encontrado baseado na gramática da nossa linguagem.

Os programadores têm contato com a língua inglesa o tempo todo, mas caso você ainda não saiba muito sobre, tenha calma. A mensagem “unterminated string literal” quer dizer que um texto (string) não foi terminado.

Experiências!

Vamos brincar com o pouco que sabemos sobre o Javascript e o Scratchpad?

  1.  Mostre na tela da sua aba, um alerta com a frase “Quero ser programador, e já dei meu primeiro passo!”
  2. Coloque um comentário no seu código explicando o porquê de você querer ser programador.
  3. Rode o programa novamente a certifique-se de que está tudo ok.
  4. Crie um fluxograma para o programa escrito acima, se necessário, leia nosso texto sobre Fluxogramas antes de realizar a tarefa.

 

Uau! Criamos nosso primeiro código, e agora estamos prontos para nos aprofundar um pouco mais no mundo da programação. Em caso de dúvidas ou sugestões, deixe um comentário ou entre em contato.

  • Rodrigo Zan

    Bacana a ideia de ensinar lógica com JS… parabéns pela iniciativa!