JavaScript: explorando a linguagem

Introdução a linguagem - Introdução

Olá!

Neste curso, começaremos a aprender os fundamentos da linguagem JavaScript, a mais utilizada no mundo. Nosso editor será o Visual Studio Code e também utilizaremos o NodeJs, embora apenas como interpretador da linguagem e não suas funções específicas.

Diferente de outros cursos, não utilizaremos o navegador para aprender JavaScript, pois essa não é a única associação possível com a linguagem. A proposta é criarmos programas que serão interpretados pelo nosso próprio computador.

Trabalharemos com condicionais, loops, variáveis, listas e utilizaremos o debugger do próprio Visual Studio Code para compreendemos com clareza o fluxo de execução do nosso código.

Como trata-se de um curso introdutório, apresentaremos conceitos básicos e boas práticas de programação. Não é exatamente pensado para profissionais que já conhecem a fundo à linguagem e trabalham com orientação de objetos, mas sim para aqueles que querem ter um contato inicial.

Vamos começar?

Introdução a linguagem - Instalando requisitos

Foi mencionado na introdução, que não queremos associar a linguagem JavaScript ao browser, apesar de ser o formato em que ela é mais utilizada. Uma das ferramentas que usaremos para interpretar a linguagem e desenvolver nosso programa será o NodeJs.

Ao acessarmos o navegador conseguimos utilizar o console para digitar pequenos códigos e realizar alguns comandos, pois existe um auxiliador para interpretação do JavaScript.

Como não utilizaremos o browser neste curso, precisaremos instalar o NodeJs na versão 13.5.0 Current. Uma vez que a instalação for concluída, abriremos nosso PowerShell ou terminal do computador.

Ao escrevermos o comando:

node -v

Teremos como retorno a versão do NodeJs instalada em nosso computador para fazermos verificação. Limparemos a tela com o comando clear e então escreveremos node para abrir o interpretador no PowerShell.

Dessa forma,conseguimos realizar operações simples e escrever nosso código, como por exemplo:

const idade = 26

const é um termo reservado do JavaScript, e ao longo do curso entenderemos mais sobre isso e como conseguimos salvar valores dentro de palavras. Também conseguiremos realizar operações matemáticas, como 2+2 e obter o resultado correto.

Podemos escrever também o console.log() com uma mensagem dentro para exibir na tela:

console.log("Meu primeiro programa JS")

Teremos como retorno o texto e a palavra "undefined", e também estudaremos esse termo ao longo do curso.

O JavaScript não precisa de um ambiente muito carregado para desenvolvermos, e se fecharmos o PowerShell todo nosso código desaparece, isto é, não é salvo. Em ambiente de produção, nossos arquivos são salvos, editados e testados. O PowerShell e o interpreatador - chamado Repl - é uma ferramenta interessante para testarmos pequenas operações.

O que usaremos para de fato criar arquivos será o Visual Studio Code, que também precisará ser instalado na máquina. Trata-se de um editor gratuito que possui muitas funcionalidades interessantes.

No Visual Studio, criaremos um novo arquivo que chamaremos de 1-meuPrimeiroPrograma.js, já que se trata de um arquivo JavaScript, utilizamos a extensão .js.

Nosso arquivo ainda está completamente vazio, poderemos escrever nosso código a partir de agora, e começaremos com o uma declaração simples:

console.log("Meu primeiro programa");

Toda linguagem tem seu nível de formalidade e sua sintaxe, perceba que a inserção ";" toda a vez que terminarmos uma instrução é opcional no caso do JavaScript, mas é uma regra em outras linguagens.

Nosso código, diferentemente do PowerShell, está salvo em arquivo e pode ser aberto posteriormente. Podemos acessar o resultado do programa que escrevemos no PorwerShell, para isso navegaremos até a pasta em que se encontra nosso projeto: escrevermos o comando cd e então digitaremos o endereço da pasta:

cd "D:\HD Estudio Preto\Documentos\Bugan\1617-jsintro\projeto-atual"

Conseguiremos então visualizar o que há dentro da pasta, que será 1-meuPrimeiroPrograma.js. Para de fato vermos o resultado do programa, primeiramente limparemos a tela por meio do comando clear.

Feito isso, escreveremos o comando node, mais caminho do arquivo em que está nosso programa.

node .\1-meuPrimeiroPrograma.js

Ao acionarmos a tecla "Enter" teremos impresso na tela "Meu primeiro programa" exatamente como escrevemos no Visual Studio Code.

Este é o fluxo que seguiremos em nosso curso, ora no Visual Studio ora no PowerShell para testar e executar nosso código.

Introdução a linguagem - Guardando Valores na memória do computador

Ao retornarmos para nosso arquivo 1-meuPrimeiroPrograma.js , começaremos a explorar a ideia de guardar valores dentro de uma palavra, isto é, uma variável.

Mudaremos a mensagem do nosso programa para trabalhando com variáveis. Inseriremos um valor para idade.

console.log("Meu Primeiro programa: trabalhando com variáveis");

const idade = 26;

Quando utilizamos o Rapl, ao escrevermos idade, na próxima linha era impresso o valor que atribuímos a esta variável, no caso, 26. Contudo, desta vez trabalhamos com um arquivo completo, e para vermos a variável impressa iremos ao PowerShell e executaremos nosso programa como fizemos anteriormente. Porém, só será exibido na tela os elementos vinculados ao console.log(), portanto só conseguiremos visualizar Meu primeiro programa: trabalhando com variáveis.

Para imprimirmos idade e seu valor no PowerShell, poderemos tentar escrever em nosso arquivo:

console.log("idade");

Veremos que apenas a palavra idade foi impressa, e não seu valor. idade é uma variável, uma espécie de repositório de dados e ela precisa ser acessada. Para que esse acesso seja realizado, não podemos utilizar as aspas ("), afinal elas caracterizam tipos de texto, e não variáveis. Para imprimirmos de fato o valor de idade, deveremos escrever:

console.log(idade);

Podemos fazer muitas manipulações com dados armazenados em variáveis, como por exemplo operações matemáticas.

console.log(idade+2);

Teremos impresso no PowerShell o resultado da soma do valor de idade mais o dois, isto é 28. Podemos, inclusive, criar uma variável específica para armazenar esta operação:

const idadeSomada = idade+2;
console.log(idadeSomada);

É importante nos atentarmos para a convenção de escrita para variáveis compostas, isto é, que contém duas palavras: a primeira palavra com letra minúscula e a segunda com maiúscula. Esta convenção é conhecida como Cammel Case.

O nome da variável deve facilitar o entendimento do código, principalmente para outros desenvolvedores que farão a sua manutenção, portanto idadeSomada explica sucintamente o dado armazenado.

Podemos, também, realizar operações aritméticas com esta variável, como subtrações e divisões:

console.log(idade);
console.log(idade+2);
console.log(idade-2);
console.log(idade/2);

Os valores serão impressos no PowerShell de acordo com o esperado.

Sobre o curso JavaScript: explorando a linguagem

O curso JavaScript: explorando a linguagem possui 149 minutos de vídeos, em um total de 39 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Variáveis
• Trabalhando com muitos elementos
• Condicionais e fluxo de execução
• Laços de Repetição
• Entendendo o fluxo do código