Noções básicas de JavaScript. Parte 2 Curso de JavaScript do Iniciante ao Avançado

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

Noções básicas de JavaScript – índice:

1. Noções básicas de JavaScript
2. Execução linha a linha
3. Duas maneiras de encerrar as instruções
4. Comentários

Nesta postagem do blog, continuaremos de onde paramos desde a primeira postagem do blog. Nesta fase, você deve ter seu navegador Google Chrome aberto e, mais especificamente, ter seu console JavaScript aberto. Se você por algum motivo os fechou, seria um bom momento para abri-los novamente. Vamos começar a aprender o básico do JavaScrip

Se você estiver em um Mac, o atalho de teclado para abrir o console é pressionar “option + command + J”, depois de abrir o Chrome. Se você estiver usando um dispositivo Windows, poderá usar o atalho de teclado de “Control + Shift + J”, para abrir o Console JavaScript, assim que abrir o Chrome. Ou você também pode ir ao menu na parte superior e ir para View -> Developer -> JavaScript Console.

Noções básicas de JavaScript

JavaScript, como todas as outras linguagens de programação, é uma linguagem que você usa para se comunicar com computadores. Assim como uma linguagem 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 mecanismo 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 colocava entre parênteses logo após . No nosso caso, escrevemos “Hello, World!” então recebemos um alerta que dizia “Hello, World!”.

Existem também outras palavras-chave reservadas em JavaScript que devemos estar cientes para que possamos nos comunicar efetivamente com o computador usando as palavras e a gramática corretas. Também assim como a gramática que temos em linguagem natural, também existe uma gramática em linguagens de programação. Essa gramática é comumente chamada de “sintaxe” em 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 à medida que começamos a aprender sobre o básico de JavaScript. Vamos ver algumas das principais coisas que devemos saber sobre JavaScript.

Execução linha a linha

Quando se trata do básico do 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 é conhecido como JavaScript sendo uma “linguagem de programação interpretada”.

Pelo contrário, 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 uma única peça 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 aos parênteses em seu código. Ter essa característica pode não fazer uma grande diferença em determinadas 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 encerrar as instruções

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

Dependendo do tipo de instrução que escrevemos, geralmente usaremos um para finalizar ou empacotar um conjunto de instruções. Usaremos diferentes tipos de parênteses para diferentes funcionalidades e tipos de dados. Por exemplo, no alert(“Olá, Mundo”); código que executamos anteriormente, os parênteses que cercam a escrita hello world informam ao computador o que o alerta deve dizer, e o ponto e vírgula no final da instrução informa 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 terminar as frases em inglês.

Comentários

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

Adicionar comentários não apenas torna muito mais fácil entender seu código para você no futuro, mas também torna muito mais fácil para qualquer pessoa com quem você trabalha entender o código também. Também pode ajudá-lo a desenvolver melhor sua compreensão sobre o problema com o qual está trabalhando, pois geralmente é muito mais fácil resolver problemas dividindo-os em pedaços 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: JavaScipt. A primeira é adicionar um comentário simples de “linha única” com duas barras como esta:

// this is a comment

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

// this is a comment.
// this is another comment.
// you can keep commenting like this.

Outra razão pela qual usamos comentários é comentar um pedaço de código para experimentar 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 código a seguir no console JavaScript que você abriu no Chrome.

// greet user
alert("Hello, User!");
alert("Hi, User!");

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

Depois de copiá-lo e colá-lo ou escrever o código você mesmo, vá em frente e pressione “enter” para executar o código. O resultado deve fornecer dois alertas separados. Também 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 depois de 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 por vez? Bem, você sabe exatamente o que fazer neste caso porque já falamos sobre isso. Vá em frente e comente uma das linhas depois de colar ou escrever o código para que apenas a segunda implementação de “Oi, usuário!” é executado.

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

Observe que quando você comenta uma linha de código, ela fica da mesma cor da linha comentada anterior. Essa diferença de cor aqui 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ê comentar erroneamente uma linha de código, pois as cores a tornarão óbvia.

Outra maneira de comentar o código é com o uso da barra e do caractere asterisco. Dessa forma, podemos criar comentários de linha única ou de várias linhas em nosso código.

/* a single line comment */
/* the commenting starts when we put a forward slash and an asterisk
and the commented areas ends
when we close of the comment with an asterisk and the forward slash
like this */

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

Autor: Robert Whitney

Especialista e instrutor em JavaScript que treina departamentos de TI. Seu principal objetivo é aumentar a produtividade da equipe, ensinando outras pessoas a cooperar efetivamente durante a codificação.

Ver todas as postagens

Curso de JavaScript do iniciante ao avançado em 10 posts:

1. Como começar a codificar em JavaScript?
2. Noções básicas de JavaScript
3. Variáveis ​​e diferentes tipos de dados em JavaScript
4. Trechos e estruturas de controle
5. loops while e loops for
6. Matriz Java
7. Funções JavaScript
8. Objetos JavaScript
9. Métodos JavaScript e muito mais
10. Resumo do curso de JavaScript