Começando com JavaScript
Tags: javascript, webdev, beginners, braziliandevs
Published: 2024-05-18 17:10:31

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](https://pesquisa.codigofonte.com.br/2023/linguagem/javascript) 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](https://stackoverflow.blog/2023/01/26/comparing-tag-trends-with-our-most-loved-programming-languages/) 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](https://github.blog/2023-11-08-the-state-of-open-source-and-ai/) 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:

```js
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:
```js
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:
```js
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:
```js
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:
```js
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:
```js
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:
```js
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:
```js
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:
```js
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:
```js
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:
```js
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:
```js
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:
```js
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:
```js
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:
```js
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:
```js
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:
```js
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:
```js
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:
```js
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!