Noções de Javascript

Para começar a desenvolver em JavaScript, você deve ter um bom conhecimento dos conceitos básicos da linguagem. Aqui estão alguns dos conceitos fundamentais que você precisa conhecer:

Variáveis: Existem três tipos de variáveis que você pode declarar usando as palavras-chave "var", "let" e "const". Aqui está uma descrição de cada um deles:

• var: tem escopo de função e pode ser redeclarado e atualizado em qualquer lugar da função em que foi declarado.
• let: tem escopo de bloco e não pode ser redeclarado dentro do mesmo escopo. No entanto, ele pode ser atualizado dentro do mesmo escopo.
• const: tem escopo de bloco e não pode ser redeclarado dentro do mesmo escopo.

Tipos de dados: Além desses três tipos de variáveis "var", "let" e "const", JavaScript também tem vários tipos de dados que podem ser atribuídos a essas variáveis como:

Números (numbers): são usados para representar valores numéricos, como inteiros e números decimais. Eles podem ser escritos com ou sem casas decimais e podem ser positivos ou negativos.

Ex:

• var idade = 30;
• var altura = 1.75;
• var salario = -2500;

Strings: são usados para representar texto. Eles devem ser escritos entre aspas simples ('...') ou aspas duplas ("..."). As strings também podem ser concatenadas usando o operador de adição (+).

Ex:

• var nome = "Jullia";
• var sobrenome = ‘Layne’;
• var frase = "Meu nome é " + nome ;

Booleanos (booleans): são usados para representar valores verdadeiros ou falsos. Eles podem ser úteis em expressões condicionais, onde uma ação é tomada com base no valor verdadeiro ou falso de uma variável booleana.

Ex:

• var ativo = true;
• var logado = false;

Objetos (objects): são usados para representar um conjunto de propriedades e métodos. Os objetos em JavaScript são coleções não ordenadas de pares chave/valor, onde a chave é uma string (também chamada de propriedade) e o valor pode ser de qualquer tipo de dados.

Ex:

• var pessoa = {
•   nome: "Jullia",
•   idade: 23,
•   endereco: {
•     rua: "Judas perdeu as botas",
•     numero: 123,
•     cidade: "Goiás"
•   }
• };

Arrays: são usados para representar uma coleção ordenada de valores. Eles podem conter qualquer tipo de dados e são úteis para armazenar listas de itens ou coleções de dados relacionados.

Ex:

• var numeros = [1, 2, 3, 4, 5];
• var frutas = ["banana", "maçã", "laranja", "uva"];

Null e undefined: são usados para representar valores nulos ou indefinidos. O valor "null" é usado quando um valor não está definido ou não existe, enquanto o valor "undefined" é usado quando uma variável foi declarada, mas ainda não foi atribuída a um valor.

Ex:

• var x;
• console.log(x); // undefined
• var y = null;
• console.log(y); // null

Operadores: são símbolos que permitem realizar operações matemáticas, lógicas e de comparação entre valores.

• Operadores Aritméticos:

Ex:

• var x = 5;
• var y = 2;
• console.log(x + y); // 7 (adição)
• console.log(x - y); // 3 (subtração)
• console.log(x * y); // 10 (multiplicação)
• console.log(x / y); // 2.5 (divisão)
• console.log(x % y); // 1 (resto da divisão)
• console.log(x++); // 5 (o valor de x é incrementado após a operação)
• console.log(x); // 6 
• console.log(y--); // 2 (o valor de y é decrementado após a operação)
• console.log(y); // 1

• Operadores de Atribuição:

Ex:

• var x = 5; // (atribuição)
• x += 3; // x é agora 8 (adição e atribuição)
• x -= 2; // x é agora 6 (subtração e atribuição)
• x *= 2; // x é agora 12 (multiplicação e atribuição)
• x /= 3; // x é agora 4 (divisão e atribuição)
• x %= 2; // x é agora 0 (resto da divisão e atribuição)

• Operadores de Comparação:

Ex:

• var x = 5;
• var y = "5";
• console.log(x == y); // true (os valores são iguais)
• console.log(x === y); // false (os valores são iguais, mas os tipos são diferentes)
• console.log(x != y); // false (os valores são iguais)
• console.log(x !== y); // true (os valores são iguais, mas os tipos são diferentes)
• console.log(x < 10); // true (5 é menor que 10)
• console.log(x > 3); // true (5 é maior que 3)
• console.log(x <= 5); // true (5 é menor ou igual a 5)
• console.log(x >= 5); // true (5 é maior ou igual a 5)

• Operadores Lógicos:

Ex:

• var x = 5;
• var y = 3;
• var z = 1;
• console.log(x > y && x > z); // true (x é maior que y e z)
• console.log(x > y || x < z); // true (x é maior que y ou menor que z)
• console.log(!(x > y))// false (negação lógica de x é maior que y)

Condicionais: são estruturas de controle que permitem executar determinadas ações com base em uma condição. Os mais comuns são o "if" e o "switch".

Ex:

• var x = 2;
• if (x > 3) {// se caso x é maior que 3 segue o fluxo
•    console.log("x é maior que 3");
• } else {// se caso x NÃO é maior que 3 segue o fluxo
•    console.log("x é menor ou igual a 3");
• }
• var diaDaSemana = 2; // atribui o valor em diaDaSemana 
• switch (diaDaSemana) { // compara diaDaSemana com cada caso
•   case 1: // caso diaDaSemana igual a 1, segue esse fluxo
•      console.log("Hoje é segunda-feira");
•      break; // parada
•   case 2:// caso diaDaSemana igual a 2, segue esse fluxo
•      console.log("Hoje é terça-feira");
• break;// parada
•   case 3:// caso diaDaSemana igual a 3, segue esse fluxo
•     console.log("Hoje é quarta-feira");
•     break;// parada
•   default:// caso diaDaSemana não exista nas opções acima, segue esse fluxo    
• console.log("Dia inválido");
• }

Loops: são estruturas de controle que permitem executar um bloco de código várias vezes. Os mais comuns são o "for" e o "while".

1. while (enquanto)

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

Ex:

• var i = 0;
• while (i < 5) {
• console.log(i);  
• i++;
• } //Este loop imprimirá os números de 0 a 4.

2. do-while (faça enquanto)

O loop do-while executa um bloco de código pelo menos uma vez e, em seguida, repete o loop enquanto uma condição especificada for verdadeira.

Ex:

• var i = 0;
• do {
• console.log(i);
•    i++;
• } while (i < 5); //Este loop também imprimirá os números de 0 a 4.

3. for (para)

O loop for executa um bloco de código um número específico de vezes.

Ex:

• for (var i = 0; i < 5; i++) {
• console.log(i);
• } //Este loop também imprimirá os números de 0 a 4

4. for...in (para cada item em um objeto)

O loop for...in é usado para percorrer as propriedades de um objeto.

Ex:

• var pessoa = {nome: "João", idade: 30, profissao: "programador"};
• for (var propriedade in pessoa) {
• console.log(propriedade + ": " + pessoa[propriedade]);
• } //Este loop imprimirá o nome, idade e profissão da pessoa.

5. for...of (para cada item em um array)

O loop for...of é usado para percorrer os itens em um array.

Ex:

• var numeros = [1, 2, 3, 4, 5];
• for (var numero of numeros) {
• console.log(numero);
• } //Este loop imprimirá os números de 1 a 5.

Funções: são blocos de código que podem ser chamados várias vezes e que podem receber parâmetros e retornar valores.

1. Funções com nome

As funções com nome são declaradas com a palavra-chave function, seguida pelo nome da função e pelos parênteses. Dentro dos parênteses, você pode listar os parâmetros que a função receberá. O corpo da função é definido entre chaves {}.

Ex:

• function soma(a, b) {
•    return a + b;
• }
• console.log(soma(2, 3)); // imprime 5

2. Funções anônimas

As funções anônimas são declaradas sem um nome e são geralmente atribuídas a uma variável.

Ex:

• var soma = function(a, b) {
•    return a + b;
• };
• console.log(soma(2, 3)); // imprime 5

3. Arrow functions

As arrow functions são uma forma mais curta de escrever funções anônimas, com uma sintaxe mais simplificada.

Ex:

• var soma = (a, b) => a + b;
• console.log(soma(2, 3)); // imprime 5

4. Funções callback

As funções callback são funções que são passadas como argumentos para outras funções. Elas são executadas quando uma ação é concluída em outra função.

Ex:

• function adicionar(x, y, callback) {
•    var resultado = x + y;
•   callback(resultado);
• }
• function mostrarResultado(resultado) {
•    console.log("O resultado é " + resultado);
• }
• adicionar(2, 3, mostrarResultado); // imprime "O resultado é 5"

/*Neste exemplo, a função adicionar recebe dois números e uma função callback como argumentos. Depois que a operação de adição é concluída, a função callback é executada com o resultado da operação como argumento. A função mostrarResultado é passada como a função callback e imprime o resultado no console.*/

Eventos: são ações que ocorrem em uma página da web, como o clique em um botão, que podem ser manipulados usando JavaScript.

1. click

O evento click é acionado quando o usuário clica em um elemento HTML.

Ex:

• var botao = document.querySelector("#botao");
• botao.addEventListener("click", function() {
•    console.log("O botão foi clicado!");
• });

2. mousemove

O evento mousemove é acionado quando o usuário move o mouse sobre um elemento HTML.

Ex:

• var caixa = document.querySelector("#caixa");
• caixa.addEventListener("mousemove", function(evento) {
• console.log("O mouse está em (" + evento.clientX + ", " + evento.clientY + ")");
• });

3. keydown

O evento keydown é acionado quando o usuário pressiona uma tecla do teclado.

Ex:

• document.addEventListener("keydown", function(evento) {
•    console.log("A tecla pressionada foi: " + evento.key);
• });

4. load

O evento load é acionado quando a página terminou de carregar.

Ex:

• window.addEventListener("load", function() {
• console.log("A página foi carregada!");
• });

5. submit

O evento submit é acionado quando um formulário é enviado.

Ex:

• var formulario = document.querySelector("#formulario");
• formulario.addEventListener("submit", function(evento) {
•    evento.preventDefault(); // impede o envio do formulário
•    console.log("O formulário foi enviado!");
• });

/*Neste exemplo, a função preventDefault() é usada para impedir o envio do formulário quando o evento é acionado.*/

Manipulação do DOM: o Document Object Model (DOM) é uma representação em árvore de uma página da web que pode ser manipulada usando JavaScript para modificar ou exibir elementos na página. É uma forma de criar elementos, alterar o conteúdo, estilos e eventos. Alguns dos principais métodos para manipulação do DOM são:

1. querySelector

O método querySelector é usado para selecionar um elemento HTML pelo seu seletor CSS.

Ex:

• var botao = document.querySelector("#botao");

2. createElement

O método createElement é usado para criar um novo elemento HTML.

Ex:

• var novoElemento = document.createElement("div");

3. appendChild

O método appendChild é usado para adicionar um novo elemento HTML como filho de outro elemento.

Ex:

• var pai = document.querySelector("#pai");
• var filho = document.createElement("div");
• pai.appendChild(filho);

4. innerHTML

O método innerHTML é usado para definir ou obter o conteúdo HTML de um elemento.

Ex:

• var elemento = document.querySelector("#elemento");
• elemento.innerHTML = "<h1>Novo conteúdo</h1>";

5. setAttribute

O método setAttribute é usado para definir o valor de um atributo de um elemento.

Ex:

• var elemento = document.querySelector("#elemento")
• elemento.setAttribute("class", "novo-estilo");

6. classList

O objeto classList é usado para adicionar, remover ou verificar classes em um elemento.

Ex:

• var elemento = document.querySelector("#elemento");
• elemento.classList.add("classe-nova");
• elemento.classList.remove("classe-antiga");
• if (elemento.classList.contains("classe-atual")) {
•   // faz algo se o elemento tiver a classe "classe-atual"
• }

Esses são apenas alguns dos métodos e propriedades mais comuns para manipulação do DOM. Existem muitos outros disponíveis, dependendo da necessidade e objetivo da manipulação.