O Javascript é uma das linguagens que mais cresce no mercado de TI e é uma peça fundamental para o desenvolvimento Front-end. Portanto, nesse post introdução ao JavaScript vou abordar alguns conceitos básicos que você pode usar para iniciar sua jornada também!
Se você está iniciando a sua carreira de desenvolvedor front-end, não se esqueça que esse post faz parte de uma série aqui do site que ensina conceitos de front-end do zero. Clique aqui e acesse agora!
Configuração
Como vocês já devem saber, antes de começar qualquer tutorial você deve ter certeza que seu ambiente foi configurado corretamente. Primeiro, você precisa ter um navegador instalado e configurado em sua máquina (pode ser qualquer um: Mozilla, Chrome, Opera, Safari). Mas eu presumo que se você está lendo esse post, existe uma grande chance de você já ter feito isso!
Além disso, você precisa também instalar um editor de texto para escrever seus códigos. Vou deixar abaixo algumas opções:
Depois que você já instalou tudo, basta você criar uma pasta no seu computador e um arquivo com a extensão “.html”. Dessa forma, você pode abrir esse arquivo no seu editor e começar a escrever seus códigos!
Primeiros comandos
Para escrever linhas de código em JS dentro do HTML, é necessário usar a tag <script>. Vejamos como fica nosso arquivo html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
// Aqui já estamos no universo JS
</script>Também é possível abrir um novo documento com a extensão .js (usei “functions.js” como exemplo) e fazer um link para ele, semelhante ao que fazemos para o CSS, ou na head do HTML ou antes do fechamento da tag html no fim do documento:
<script src="functions.js"></script>Para abrir uma caixa pop up no navegador, usamos:
alert("mensagem");Para imprimir algo na tela, usamos:
document.write("mensagem");Declaração de variáveis
Para declarar uma variável, usamos letra minúscula e através das expressões var, let e const:
var ano = 2022; // um número
let nome = "Vanessa"; // uma string
const encontrou = true; // um booleano
// Se a variável for composta, escrevemos segundo o camelCase:
var idadeVanessa = (2022 - 1989);
let consumoDeEtanol = 8;
Mas qual a diferença entre essas expressões? As palavras var e let são muito semelhantes, exceto pelo escopo, uma propriedade que determina onde uma variável pode ser utilizada dentro de um programa. Ambas tem escopo global (fora de qualquer função) mas só let tem escopo de bloco (como estruturas condicionais, estruturas de repetição etc.). Então se uma variável for declarada com let dentro de um bloco if, por exemplo, ela não é acessível fora desse bloco, mas com var, ela se torna acessível. Ja a const é bem diferente, ela é imutável, então uma vez declarada, seu valor não pode ser alterado.
Arrays
Para inserirmos um conjunto de valores dentro de uma lista, escrevemos entre colchetes, como da forma abaixo. E se quisermos ler essas variáveis, é preciso dizer sua posição. Nesse caso, o JS inicia sempre na posição zero.
let idades = [12, 17, 23];
idades [0] == 12;
// Se quisermos saber o tamanho desse array, usamos: idades.length;
// Para adicionar um item ao final do vetor usamos: idades.push(32);
// Para remover o último item do vetor, usamos: idades.pop();
// Para adicionar um item no início do vetor, usamos: idades.unshift(19);
// Para remover o primeiro item do vetor, usamos: idades.shift();Objetos
Para inserirmos um conjunto de valores com propriedades diferentes, por exemplo, os funcionários de uma empresa (nome, telefone, CPF, data de contratação, familiares), criamos o objeto ‘funcionarios’ e dentro dele, colocamos essas propriedades, que podem receber tanto string, quanto inteiros, como booleanos ou até arrays.
const funcionarios = {
nome:"Vanessa",
telefone:"0000000",
cpf:"000000",
dataDeContratacao:"20/12/2018",
familiares: ["Sueli", "Nelson", "Gustavo", "Vinicius"],
}
// Para visualizar uma propriedade, por exemplo, nome, usamos funcionarios.nome;Funções
Para inserir uma função (como um atalho), usamos sempre um verbo e sempre no início do código. Tudo que estiver dentro dos ( ) serão os parâmetros e dentro das { } são um bloco de instruções que serão executadas:
// Função sem parâmetro:
function pulaLinha() {
document.write("<br><br>");
}
// Se eu quiser que a função seja executada, é preciso chamá-la. Então é só digitar:
pulaLinha ();
// Função com parâmetro:
function mostra(frase) {
document.write(frase);
pulaLinha();
}
// Para chamar essa função com parâmetro, você precisa digitar:
mostra("A idade da Vanessa é " + (2022-1989) + " anos.");Input de dados
Para abrir uma pop up que permite que o usuário digite dados, usamos o prompt. É preciso fazer uso de uma variável porque a função prompt é uma função de retorno, e o valor precisa ser armazenado em alguma variável. Vale lembrar que se o usuário digitar um número, ele será lido como texto e não como número, impedindo o sistema de fazer uma soma, por exemplo, porque ele acaba fazendo uma concatenação. Para resolver isso, usamos o parseInt para número inteiros ou o parseFloat para número com casas decimais (vale lembrar que números decimais serão apresentados com ponto e não com vírgula).
let nome = prompt ("Informe o seu nome");
// Exemplo de como converter string em número inteiro:
var vitorias = parseInt (prompt ("Digite o número de vitórias do seu time."));
// Exemplo de como converter string em número decimal:
var peso = parseFloat (prompt ("Digite o seu peso"));Outro jeito de inserirmos dados, é através da tag HTML <input/>. Mas para usá-la dentro do JS, buscamos essa tag no HTML através do document.querySelector, da forma a seguir. Ao usarmos somente “input” no alert, isso corresponde apenas à tag do HTML e não ao seu valor. Para isso, precisamos usar o input.value.
<input/>
<script>
let input = document.querySelector ("input");
alert(input.value);
</script>Estruturas condicionais
Agora para entrarmos nas condicionais, a sintaxe é a seguinte:
let senha = prompt("Entre com sua senha");
if (senha == "calopsitaazul") {
alert ("Acesso liberado!");
} else {
alert("Acesso negado!");
}
// Usando agora o E (&&):
if (idade >= 18 && sexo == "feminino") {
document.write("Você pode participar");
}
// E usando o OU (||):
if (sexo == "F" || sexo == "f") {
document.write("Você pode participar");Laços de repetição
No caso dos laços de repetição, a sintaxe é a seguinte:
let contador = 2;
while (contador <= 100) {
document.write (contador);
contador = contador + 1;
}No caso do repetidor for, a sintaxe é escrita (variável inicializada, condição de repetição, incremento da variável):
for (var multiplicador = 1; multiplicador <= 10; multiplicador = multiplicador + 1;){
document.write (7 * multiplicador);
}
// Para facilitar, o incremento da variável de 1 em 1, pode ser escrito dessa forma:
multiplicador++;Operações com números
Para arredondar um valor, usamos o método Math.round:
let media = ((45 + 26 + 46) / 3);
document.write("A média das idades é " + Math.round(media));Para gerar um número aleatório, usamos o método Math.random:
Math.round(Math.random ( ) * 35)
// Gera um número inteiro de 0 a 35.
