Começando com JavaScript

Se você é novo na programação ou simplesmente deseja aprender mais sobre JavaScript, este guia é para você! Então pegue o seu café e bora explorar os conceitos fundamentais da linguagem.

Vale a pena aprender?

Antes de começarmos, eu quero te apresentar algumas informações que podem te motivar no aprendizado e para que você tenha cada vez mais certeza de que está no caminho certo:

• De acordo com a pesquisa feita pelo Código Fonte TV na edição de 2023, um programador JavaScript junior pode receber um salário de quase 4 mil reais enquanto o salário de um sênior ultrapassa os 16 mil reais.

• Outra pesquisa importante feita pelo Stack Overflow em 2023 mostra que o JavaScript está entre as linguagens mais populares e amadas pelos desenvolvedores.

• E por último, mas não menos importante, está o relatório Octoverse de 2023 feito pelo GitHub onde apresenta o JavaScript como a linguagem de programação mais popular do ano, posição que vem se mantendo desde 2014.

Essas são apenas algumas informações que acredito serem relevantes para quem está iniciando. Acredito que com a motivação certa você conseguirá adquirir conhecimento suficiente para se sentir confiante. Então, vamos começar?

O que é JavaScript?

JavaScript (as vezes abreviado como JS) é uma linguagem de programação de alto nível, interpretada e orientada a objetos. Ela é usada principalmente para criar interatividade em páginas da web, ou seja, ela permite criar conteúdo que se atualiza dinamicamente por meio de eventos. O JavaScript também é amplamente utilizado em aplicações que executam no lado do servidor. Portanto, JavaScript é uma linguagem que pode ser utilizada no front-end (a página que você vê) e também no back-end (os serviços que executam sem você ver).

Como começar?

Para começar você só precisa de um navegador e um editor de texto (recomendo utilizar o VS Code). Mas nesse momento não vamos utilizar o editor, só com o navegador já conseguimos fazer muita coisa, pode confiar. É recomendado que vive tenha uma noção de lógica de programação, isso vai te ajudar muito, mas não se preocupe, o objetivo desse guia é ensinar os conceitos fundamentais da linguagem para que você tenha condições de começar com JavaScript. Então vamos para a prática?

Aprendendo na prática

Como eu já disse, apenas o navegador é o suficiente para conseguirmos ter o primeiro contato com o JavaScript. Se você estiver no computador é possível abrir o console do navegador (geralmente pressionando a tecla F12) é nele onde vamos escrever alguns códigos para praticarmos.

#1 Caixas de diálogo

Existem algumas caixas de diálogo nativas em JavaScript que permitem exibir mensagens de aviso (alert), confirmação (confirm) e outra que solicita alguma entrada de texto (prompt).
Vamos então ver como cada uma delas funciona. Com o console do navegador aberto, vamos criar uma interação com o usuário (com você). Escreva esse código no console e em seguida pressione a tecla enter:

let nome = prompt('Qual é o seu nome?');
alert('Olá, ' + nome + '! Bem-vindo ao guia de aprendizado do JavaScript.');
confirm(nome + ', deseja continuar com os estudos?');

Esse código fará com que uma caixa de diálogo se abra no navegador para que você escreva seu nome e em seguida você verá uma saudação com o nome informado, por fim uma simples mensagem de confirmação, legal né =D

#2 Variáveis e Tipos de Dados

Em JavaScript, você pode declarar variáveis usando as palavras-chave var, let ou const.

Exemplo:

var nome = "Thiago";
let idade = 32;
const PI = 3.14;

Todas essas formas são usadas para declarar variáveis, mas têm diferenças importantes em termos de escopo e mutabilidade.

var

• var foi a forma tradicional de declarar variáveis em JavaScript antes do ES6 (ECMAScript 2015).
• As variáveis declaradas com var têm escopo de função ou global, o que significa que elas podem ser acessadas de qualquer lugar dentro da função em que foram declaradas ou no escopo global, se declaradas fora de uma função.
• As variáveis var podem ser redeclaradas e atualizadas dentro do mesmo escopo.

Exemplo:

var x = 10;
var y = 20;
var x = 30; // Re-declaração permitida
x = 40; // Atualização permitida

let

• let foi introduzido no ES6 e é preferido sobre var na maioria dos casos.
• As variáveis declaradas com let têm escopo de bloco, o que significa que elas só são acessíveis dentro do bloco em que foram declaradas (por exemplo, dentro de uma instrução if, for, while, etc.).
• As variáveis let não podem ser redeclaradas no mesmo escopo, mas podem ser atualizadas.

Exemplo:

let x = 10;
if (true) {
  let y = 20;
  x = 30; // Atualização permitida
}
console.log(x); // Saída: 30
console.log(y); // Erro: y não está definido (fora do escopo)

const

• const também foi introduzido no ES6 e é usado para declarar variáveis com valores constantes, ou seja, cujo valor não pode ser alterado após a inicialização.
• As variáveis declaradas com const também têm escopo de bloco.
• As variáveis const não podem ser reatribuídas ou redeclaradas no mesmo escopo.

Exemplo:

const PI = 3.14;
PI = 3.14159; // Erro: Tentativa de reatribuição de uma constante

Tipos de Dados

JavaScript possui vários tipos de dados, incluindo números, strings, booleanos, arrays e objetos.

Exemplo:

let numero = 10;
let texto = "Olá";
let verdadeiroOuFalso = true;
let lista = [1, 2, 3];
let objeto = { nome: "Maria", idade: 30 };

#3 Estruturas de Controle

As estruturas de controle em JavaScript são usadas para controlar o fluxo de execução do seu código. Elas permitem que você execute blocos de código com base em condições específicas, execute loops para repetir tarefas e muito mais. Aqui estão algumas das estruturas de controle em JavaScript:

if...else

A estrutura condicional if...else permite que você execute um bloco de código se uma condição for verdadeira e outro bloco de código se a condição for falsa.

Exemplo:

let idade = 18;

if (idade >= 18) {
  console.log("Você é maior de idade.");
} else {
  console.log("Você é menor de idade.");
}

Você também pode encadear várias condições usando else if, que são verificadas se as condições anteriores forem falsas. A palavra-chave else if é usada após um bloco if e é seguida por outra condição e um bloco de código.

Exemplo:

let hora = 14;

if (hora < 12) {
  console.log("Bom dia!");
} else if (hora < 18) {
  console.log("Boa tarde!");
} else {
  console.log("Boa noite!");
}

switch

Semelhante ao else if, a estrutura switch é usada quando você tem várias condições possíveis e quer executar diferentes blocos de código com base em cada condição.

Exemplo:

let diaDaSemana = 1;

switch (diaDaSemana) {
  case 1:
    console.log("Hoje é domingo.");
    break;
  case 2:
    console.log("Hoje é segunda-feira.");
    break;
    // Outros casos...
  default:
    console.log("Dia inválido.");
}

Loop for

O loop for é usado para executar um bloco de código várias vezes, com base em uma condição.

Exemplo:

for (let i = 0; i < 5; i++) {
  console.log("O valor de i é: " + i);
}

Loop while

O loop while executa um bloco de código enquanto uma condição especificada for verdadeira.

Exemplo:

let contador = 0;

while (contador < 5) {
  console.log("O contador é: " + contador);
  contador++;
}

Loop do...while

O loop do...while é semelhante ao loop while, mas a condição é verificada após a execução do bloco de código, o que garante que o bloco de código seja executado pelo menos uma vez.

Exemplo:

let contador = 0;

do {
  console.log("O contador é: " + contador);
  contador++;
} while (contador < 5);

Essas são algumas das estruturas de controle em JavaScript. Elas são fundamentais para controlar o fluxo de execução do seu código e são amplamente utilizadas em todas as aplicações JavaScript.

#4 Funções

As funções em JavaScript são blocos de código reutilizáveis que executam uma tarefa específica quando chamadas. Elas são essenciais para organizar e modularizar o código, permitindo que você o divida em partes menores e mais gerenciáveis. Aqui estão alguns conceitos importantes sobre funções em JavaScript:

Declaração de Função

Você pode declarar uma função usando a palavra-chave function, seguida pelo nome da função e, opcionalmente, uma lista de parâmetros entre parênteses. O corpo da função é colocado entre chaves {} e contém o código que será executado quando a função for chamada.

Exemplo:

function saudacao(nome) {
  console.log("Olá, " + nome + "!");
}

Chamada de Função

Para chamar uma função e executar seu código, você simplesmente escreve o nome da função seguido por parênteses e, opcionalmente, passa argumentos para os parâmetros da função, se houver.

Exemplo:

saudacao("Thiago"); // Saída: Olá, Thiago!

Parâmetros e Argumentos

Os parâmetros são variáveis listadas na definição da função, enquanto os argumentos são os valores que são passados para a função quando ela é chamada. Os parâmetros permitem que você generalize a função para trabalhar com diferentes valores.

Exemplo:

function somar(a, b) {
  return a + b;
}

const resultado = somar(3, 5); // Passando os argumentos 3 e 5 para a função
console.log(resultado); // Saída: 8

Retorno de Valor

As funções podem retornar um valor usando a palavra-chave return. Isso permite que a função calcule um resultado e o retorne para onde a função foi chamada.

Exemplo:

function somar(a, b) {
  return a + b;
}

const resultado = somar(3, 5);
console.log(resultado); // Saída: 8

Esses são conceitos fundamentais sobre funções em JavaScript. Elas desempenham um papel crucial no desenvolvimento de aplicativos JavaScript, permitindo a modularidade, reutilização de código e organização mais eficiente do seu programa.

#5 Eventos

Os eventos são ações que ocorrem em elementos HTML, como cliques de mouse, pressionamentos de tecla, carregamento da página, entre outros. Os eventos permitem que você responda a essas ações e execute código JavaScript em resposta a elas. Aqui estão alguns conceitos importantes sobre eventos em JavaScript:

Adicionando Event Listeners

Você pode usar o método addEventListener() para adicionar um ouvinte de eventos a um elemento HTML. Este método recebe dois argumentos: o tipo de evento que você deseja ouvir e uma função que será executada quando o evento ocorrer.

Exemplo:

document.getElementById("meuBotao").addEventListener("click", function() {
  console.log("O botão foi clicado!");
});

Tipos de Eventos

Existem muitos tipos de eventos em JavaScript, incluindo eventos de mouse, eventos de teclado, eventos de formulário, eventos de janela, eventos de documento, entre outros. Alguns exemplos comuns incluem click, mouseover, keydown, submit, load, DOMContentLoaded, entre outros.

Objeto de Evento

Quando um evento ocorre, o navegador cria um objeto de evento que contém informações sobre o evento, como o tipo de evento, o elemento alvo, coordenadas do mouse, tecla pressionada, etc. Você pode acessar esse objeto dentro da função de ouvinte de eventos usando o parâmetro da função.

Exemplo:

document.getElementById("meuInput").addEventListener("keydown", function(event) {
  console.log("Tecla pressionada: " + event.key);
});

Removendo Event Listeners

Você também pode remover ouvintes de eventos usando o método removeEventListener(). Isso é útil quando você não precisa mais ouvir um evento em particular em um elemento.

Exemplo:

const meuBotao = document.getElementById("meuBotao");

function meuEvento() {
  console.log("O botão foi clicado!");
}

meuBotao.addEventListener("click", meuEvento);

// Removendo o ouvinte de eventos
meuBotao.removeEventListener("click", meuEvento);

Os eventos em JavaScript são poderosos e flexíveis, permitindo que você crie interatividade dinâmica em suas páginas da web. Compreender como funcionam os eventos é fundamental para o desenvolvimento de aplicativos web modernos e responsivos.

Conclusão

À medida que você se torna mais confortável com os conceitos básicos, pode explorar tópicos mais avançados, como manipulação do DOM (Document Object Model), AJAX, frameworks como React, Angular e Vue.js, e muito mais. A prática é fundamental para o aprendizado de programação, então não tenha medo de experimentar e criar seus próprios projetos!

Comments

[Anderson Oliveira Bezerra]

Muito legal o conteúdo, e bem completo, parabéns!

[Thiago Honorato]

Valeu Anderson!