Começando no Javascript pela sua sintaxe

Javascript é uma das principais linguagens de programação em 2021. Grande parte dos sites utiliza dela para deixar seu conteúdo interativo.

Como toda linguagem, começaremos estudando sua sintaxe. Como devemos escrever para o computador entender algo? Este guia para entender a sintaxe foi escrito tomando como base as explicações fornecidas pelo Mozilla, um dos principais navegadores atuais.

Você precisará testar seu código enquanto aprende!! Para isso recomendando qualquer plataforma online com foco em Javacript. A Repl criou um site bem bacana que pode escrever seu código em Javascript e na hora já pode ver os resultados, pode acessá-lo aqui, recomendamos.

Vamos então começar a escrever em Javascript?

Uma variável é um objeto capaz de reter um dado. Elas são associadas a "nomes", chamados identificadores. Geralmente as variáveis ficam guardadas na memória RAM do seu computador, que pode ser acessado extremamente rápido.

Para criar uma variável em Javascript basta pensar em um nome bem bonito e fazer ele seguido das palavras: var, let ou const. Como exemplo:

| var professor_leon;

O exemplo acima cria a variável "professor_leon". Neste momento eu não igualei ela a nada, ela é uma variável que não está definida, apenas existe. Vamos entender:

var -> Declara uma variável, opcionalmente, inicializando-a com um valor.

let -> Declara uma variável local de escopo do bloco, opcionalmente, inicializando-a com um valor.

const -> Declara uma constante de escopo de bloco, apenas de leitura.

"Escopo de bloco" é um termo um pouco avançado, ele informa aonde sua variável será usada: se usará ela durante toda execução ou poderá descartar a variável ao mudar de função. Por enquanto, vamos apenas iniciar variáveis do jeito mais tradicional: usando var.

Algumas variáveis já existem automaticamente mesmo sem você tê-las iniciado. Essas variáveis fazem parte do sistema do Javascript e você pode acessá-las. Logo, estes nomes estão proibidos para se criar novas variáveis por já estarem sendo usados:

Existem mais nomes que esses e conforme o Javascript cresce provavelmente haverá mais ainda, mas esses são exemplo dos mais comuns.

No exemplo anterior, vimos um ponto e vírgula ao final da frase que chamou a variável (";"). Cada instrução dado ao Javascript é preferencialmente separada por ponto e vírgula (";"), então ela simboliza o fim da instrução que foi de criar uma variável.

JavaScript também é case-sensitive e usa o conjunto de caracteres Unicode. Por exemplo, professor_leon e professor_Leon são duas variáveis distintas e as duas serão guardadas na memória. O Unicode refere-se a gama de letras que pode usar, emojis estão proibidos, mas caracteres alemães ou latinos estão permitidos (professor_leão).

Ao programar algo muito importante é acompanhar seu código e verificar se tudo está indo conforme você estava planejando. Para isso, o Javascript tem uma função chamada "console.log". Essa função irá informar na tela o valor da variável ou o que por como input. Exemplo:

| var professor_leon;

| console.log(professor_leon);

As instruções acima farão informar na tela ao final o valor "undefined", que significa "indefinido". O valor da variável professor_leon de fato não foi definido e foi isso que foi pedido para ser informado já que serviu como input na função "console.log".

Códigos podem ser muito complicados e para não nos perdermos podemos escrever comentários no meio dele. Comentários podem ser escritos de 2 formas.

A primeira forma é usar 2 barras ao contrário ("//") para ignorar qualquer texto na mesma linha após ela.

| var professor_leon; // oi

A segunda forma é abrir e fechar com barra e asterístico ("/" e "/") e o Javascript ignorará qualquer texto dentro dele, mesmo tendo diversas linhas entre eles.

| /*

| Tudo aqui será ignorado

| */

Em JavaScript há diversos tipos de objetos disponíveis, tais como:

- Indefinido

- Número inteiro

- Número de ponto flutuante

- String

- Booleano

- Array

- Objeto ou dicionários

Existem várias formas de armazenar números no computador. Na maior parte do seu tempo você irá utilizar dois tipos de armazenamento de números para variáveis: int e float.

Int são os números inteiros:

| var numero_int = 0;

| var numero_int = new Number(0);

Float são os números racionais e são acessados colocando um "ponto" logo após o número para denotar a vírgula (no sistema decimal internacional se usa ponto enquanto no Brasil se usa vírgula):

| var numero_float = 10. ;

Você pode transformar um número float em int usando a fórmula parseInt:

| var numero_int = parseInt( numero_float );

O contrário com a fórmula parseFloat:

| var numero_float = parseInt( numero_int );

String é usado para armazenar e manipular caracteres e textos. Ele pode ser iniciado das seguintes formas:

| var texto = 'Leon';

| var texto = String('Leon');

| var texto = new String('Leon');

Precisamos fechar o texto com aspas tanto no começo quanto no final. As aspas podem ser duplas também: " ou '; o importante é fechar o texto da mesma forma que começou.

Caso precise usar aspa e não quer terminar ainda a String, você pode usar caracteres de escape para informar ao sistema que aquele caracter é literal:

| var texto = "Leon\"";

Retorna Leon".

Você pode juntar duas variáveis do tipo String somando elas.

| var primeiro_nome = 'Leon';

| var segundo_nome = 'Diniz';

| var nome_inteiro = primeiro_nome + segundo_nome;

Irá retornar "LeonDiniz" tudo junto. Você pode somar um espaço entre:

| var nome_inteiro = primeiro_nome + " " + segundo_nome;

Irá retornar "Leon Diniz", mais correto.

Você também pode adicionar variáveis de escopo diferente, isso fará com que sejam convertidas automaticamente para String.

| var juntar = 'Leon' + 2;

Irá retornar 'Leon2'.

| var juntar = '2' + 2;

Irá retornar '22'.

Para converter de String para Número, você deve usar as fórmulas parseInt e parseFloat.

O Boolean pode assumir dois valores, true e false (verdadeiro e falso). Você pode definir a variável de forma manual como Boolean ou adotar uma comparação matemática:

| var primeira_boolean = true;

| var segunda_boolean = false;

| var terceira_boolean = 4 > 2; // irá retornar verdadeiro

| var quarta_boolean = 1 > 2; // irá retornar falso

Um array literal é uma lista de zero ou mais expressões, onde cada uma delas representam um elemento do array, inseridas entre colchetes ([]). Quando você cria um array usando um array literal, ele é inicializado com os valores especificados como seus elementos, e seu comprimento é definido com o número de elementos especificados.

| var array_de_string = ["French Roast", "Colombian", "Kona"];

| var array_de_numero = [2, 3, 3];

Uma array é muito boa para guardarmos muita informação em um só lugar. Para chamar uma dessas informações, você pode usar a posição do item na array. A Array começa do zero, isto é, o primeiro item está na posição zero.

| array_de_numero[0]; // irá retornar 2

| array_de_string[2]; // irá retornar "Kona"

Um objeto literal é uma lista de zero ou mais pares de nomes de propriedades e valores associados entre, colocados entre chaves ({}).

| var objeto_dicionario = {

| 'L': 'Leão',

| 'G':'Girafa'

| };

Este objeto funcionará igual um dicionário. Ao procurar pela letra L, irá retornar 'leão'. Ao procurar pela letra G, irá retornar 'Girafa'. Muito bom para se jogar STOP ou para quando você tem diversas características de um cliente e quer armazená-las (CPF, Telefone, Nome etc...).

Para pegar os valores armazenados, há duas formas:

| objeto_dicionario.L // irá retornar 'Leão'

| objeto_dicionario['L'} // irá retornar 'Leão'

| objeto_dicionario.G // irá retornar 'Girafa'

| objeto_dicionario['G'] // irá retornar 'Girafa'

1. Verifique o tipo das seguintes variáveis:

var a = 10, b = 4.50, c = "Água", d = true, e;

2. Crie 5 variáveis do tipo String e some elas ao final para fazer um texto.

3. Crie uma array do número 1 ao número 30. Acesse o item na posição 25. Qual é este número?

4. Crie um dicionário da sua vida:

(a) Escreva as seguintes informações nele: CPF, Primeiro Nome, Nome Familiar, Telefone, Email, Data de Nascimento, Quantos anos possui, Texto sobre o que está achando de Javascript.

(b) Concatene o Primeiro Nome com o Nome Familiar para resultar no seu Nome Completo.