Fundamentos de JavaScript. Parte 2 Curso de JavaScript do Iniciante ao Avançado

Esta é a segunda parte da série de postagens do blog sobre JavaScript que o levará de iniciante a avançado. Ao final desta série, você conhecerá todos os conceitos básicos que precisa saber para começar a programar em JavaScript. Sem mais delongas, vamos começar com o segundo tutorial.

Conceitos básicos de JavaScript – índice:

1. Conceitos básicos de JavaScript
2. Execução linha por linha
3. Duas maneiras de finalizar instruções
4. Comentários

Nesta postagem do blog, continuaremos de onde paramos na primeira postagem do blog. Neste estágio, você deve ter seu navegador Google Chrome aberto e, mais especificamente, ter sua console JavaScript aberta. Se por algum motivo você a fechou, seria um bom momento para reabri-la. Vamos começar a aprender os conceitos básicos de JavaScript.

Se você estiver em um Mac, o atalho de teclado para abrir a console é pressionar “option + command + J”, após abrir o Chrome. Se você estiver usando um dispositivo Windows, pode usar o atalho de teclado “Control + Shift + J” para abrir a Console JavaScript, assim que abrir o Chrome. Ou você também pode ir ao menu no topo e acessar Visualizar -> Desenvolvedor -> Console JavaScript.

Conceitos básicos de JavaScript

JavaScript, como todas as outras linguagens de programação, é uma linguagem que você usa para se comunicar com computadores. Assim como uma língua natural tem gramática e palavras conhecidas para formar frases adequadas, as linguagens de programação também têm certas regras que você deve seguir para se comunicar efetivamente com o computador.

Por exemplo, certas palavras significam certas coisas para o motor JavaScript que executa nosso código, como a palavra-chave “alert” que usamos no tutorial anterior tinha o significado de exibir um alerta ao usuário com as palavras específicas que ele colocou dentro dos parênteses logo em seguida. No nosso caso, escrevemos “Hello, World!” e recebemos um alerta que dizia “Hello, World!”.

Existem também outras palavras-chave reservadas em JavaScript das quais devemos estar cientes para que possamos nos comunicar efetivamente com o computador usando as palavras e a gramática corretas. Assim como a gramática que temos em uma língua natural, também existe uma gramática nas linguagens de programação. Essa gramática é comumente chamada de “sintaxe” nas linguagens de programação e JavaScript não é exceção a isso. É por isso que é uma boa ideia entender as principais palavras-chave e a gramática que temos em JavaScript enquanto começamos a aprender sobre os conceitos básicos de JavaScript. Vamos ver algumas das principais coisas que devemos saber sobre JavaScript.

Execução linha por linha

Quando se trata de conceitos básicos de JavaScript, uma das primeiras coisas que você deve saber é que o código que você escreve será executado linha por linha, de cima para baixo. Esse estilo de execução de código também é referido como JavaScript sendo uma “linguagem de programação interpretada”.

Por outro lado, algumas linguagens de programação são “linguagens de programação compiladas”. Alguns exemplos de linguagens compiladas seriam: C, C++, C#, Swift, Java e assim por diante. A principal diferença é que, com linguagens de programação compiladas, todo o código que você escreve será “compilado” e será executado em um único bloco pelo computador. É também por isso que pode ser mais difícil começar a aprender uma linguagem de programação compilada, pois pode ser mais difícil identificar onde você cometeu um erro em seu programa.

Alguns exemplos de linguagens de programação interpretadas seriam JavaScript, Python, Bash e Matlab. Com linguagens de programação interpretadas, você tem o benefício inerente de ver em qual linha você cometeu o erro, por exemplo, esquecendo um ponto e vírgula ou não correspondendo parênteses em seu código. Ter essa característica pode não fazer uma grande diferença em certas aplicações, mas quando estamos tentando carregar um site com uma conexão de internet lenta, você prefere que cada linha de JavaScript seja executada o mais rápido possível.

Duas maneiras de finalizar instruções

Um programa de computador, no final do dia, é um conjunto de instruções para o computador. Mas onde um programa termina e onde a próxima instrução começa? Existem diferentes abordagens para esse problema. JavaScript usa duas coisas principais, o ponto e vírgula e os parênteses.

Dependendo do tipo de instrução que escrevemos, geralmente usaremos um ou outro para finalizar ou agrupar um conjunto de instruções. Usaremos diferentes tipos de parênteses para diferentes funcionalidades e tipos de dados. Por exemplo, no código alert(“Hello, World!”); que executamos anteriormente, os parênteses que cercam a frase “hello world” dizem ao computador o que o alerta deve dizer, e o ponto e vírgula no final da instrução diz ao computador que esta instrução termina aqui, você pode passar para a próxima instrução. Isso é muito semelhante a como usamos um ponto “.” para finalizar as frases em inglês.

Comentários

Adicionar comentários ao código é uma parte essencial da programação. Pode ser fácil entender o que você escreve enquanto está escrevendo, mas dependendo da complexidade do código, você pode ter muito pouca ideia seis meses depois, quando voltar ao código.

Adicionar comentários não apenas torna muito mais fácil entender seu código para o seu futuro eu, mas também torna muito mais fácil para qualquer pessoa com quem você trabalha entender o código também. Isso também pode ajudá-lo a desenvolver melhor sua compreensão sobre o problema com o qual você está lidando, uma vez que geralmente é muito mais fácil resolver problemas dividindo-os em partes menores. As partes comentadas do seu código serão ignoradas pelo interpretador e não serão executadas.

Existem duas maneiras de adicionar comentários em JavaScript. A primeira é adicionar um simples comentário de “uma linha” com duas barras para frente assim:

// este é um comentário

Dessa forma, tudo o que você escrever após as duas barras para frente será ignorado na linha específica em que você colocou as barras. Você pode repetir isso quantas vezes quiser para ter várias linhas cobertas com comentários assim:

// este é um comentário.
// este é outro comentário.
// você pode continuar comentando assim.

Outra razão pela qual usamos comentários é para comentar um pedaço de código para experimentar com o código. Por exemplo, você pode escrever a mesma funcionalidade de várias maneiras e pode querer comentar uma versão do mesmo código para comparar seu desempenho ou resultados individuais. Vamos ver isso com um exemplo também.

Vá em frente e copie e cole o seguinte código na console JavaScript que você abriu no Chrome.

// cumprimentar usuário
alert("Olá, Usuário!");
alert("Oi, Usuário!");

Se você quiser praticar escrevendo todo o código você mesmo, pode fazer isso também. Uma coisa que você deve saber sobre escrever várias linhas de código na console é que, para ir para a próxima linha sem executá-la, você pode pressionar “shift + enter” para fazer isso. Caso contrário, após escrever uma única linha de código, se você apenas pressionar enter, ela executará essa linha de código. Neste exemplo, isso não é um grande problema e na verdade é aceitável executá-lo linha por linha também, porque temos um exemplo simples que também pode funcionar nesse estilo.

Depois de copiar e colar ou escrever o código você mesmo, vá em frente e pressione “enter” para executar o código. O resultado deve lhe dar dois alertas separados. Além disso, para dispensar os alertas, você pode clicar em “OK”, neste caso eles não farão nada porque este é um alerta simples e não aciona nada após mostrar a mensagem que queremos exibir.

Quando executamos o código assim, estamos executando a mesma funcionalidade duas vezes. Mas o que você deve fazer se quiser ver apenas uma implementação de cada vez? Bem, você sabe exatamente o que fazer neste caso porque já falamos sobre isso. Vá em frente e comente uma das linhas após colar ou escrever o código para que apenas a segunda implementação de “Oi, Usuário!” seja executada.

Uma vez que você complete o desafio, ou se você ficar preso durante o desafio, pode ver o código de solução para o desafio abaixo. Antes de dar uma olhada na solução, eu sempre recomendo tentar você mesmo, pois você aprenderá melhor quando realmente praticar. Se você completou o desafio com sucesso, deve estar olhando para uma tela como esta:

Note que quando você comenta uma linha de código, ela se torna da mesma cor que a linha comentada anterior. Essa diferença de cor não faz diferença para o computador, mas é um recurso bastante útil para nós quando estamos escrevendo código. Dessa forma, é muito mais fácil se você acidentalmente comentar uma linha de código, pois as cores deixarão isso óbvio.

Outra maneira de comentar código é usando a barra para frente e o caractere asterisco. Dessa forma, podemos criar comentários de uma linha ou de várias linhas em nosso código.

/* um comentário de uma linha *//* o comentário começa quando colocamos uma barra para frente e um asterisco
e as áreas comentadas terminam
quando fechamos o comentário com um asterisco e a barra para frente
assim */

Agora você conhece os conceitos básicos de JavaScript. No próximo tutorial, veremos um conceito extremamente comum em programação chamado “variáveis” junto com os tipos de dados básicos em JavaScript.