./adote-um-dev.sh

Nível: n00b_m4st3r

Agenda

JavaScript
- Tipos e Operadores;
- Condicionais;
- Loops;
- Arrays;
- Objetos;
- Funções;

Antes de mais nada...

Embarcamos na parte principal desse estudo: JavaScript. Até agora, tudo que vimos pode ser aplicado para qualquer outro tipo de framework front-end que não utilize JavaScript. Do próximo slide até o final do material desse repositório, vamos focar na linguagem que utilizaremos para desenvolver com React.

Tipos e Operadores

No JavaScript, temos 6 tipos básicos de valores. Eles são:

número = 123;
strings = "Essa é uma string" | 'Essa é uma string' | `Essa é uma string`;
booleans = true | false;
objetos = { };
funções = function() | () => {};
valores_indefinidos = undefined;

Tipos e Operadores

Também temos nossos operadores (que são muitos, rs). Mas os mais importantes por agora são:

// Atribuição
x = 1;

// Igualdade
1 == "1" // true

// Extritamente Igual
1 === "1" // false
1 === 1   // true

// Diferente
1 != 2 // true

// Extritamente Diferente
1 !== "1" // true

// Maior que / Menor que
1 > 0 // true
1 < 2 // true

// Maior ou igual // Menor ou igual
1 >= 1 // true
2 <= 4 // true

// Aritméticos
Soma = +;
Substração = -;
Divisão = /;
Multiplicação = *;

// Lógicos
&& = AND;
|| = OR;
! = NOT;

Estruturas de Condição

// IF e ELSE

if (validação) {
  return "validação foi true"
} else {
  return "validação foi false"
}

if (validação === 1) {
  return "validação foi igual a 1"
} else if (validação === 2) {
  return "validação foi igual a 2"
} else {
  return "validação foi diferente de 1 ou 2"
}

// Ternário

validação ? "se for true" : "se for falso"

1 < 2 ? 
  "sim, 1 é menor que 2" 
: 
  "não, 1 é maior que dois"

Estruturas de Repetição

// FOR
for (iterador; condição; alteração_do_iterador) {
  // bloco de código a ser executado
}

// FOR-IN (itera nas propriedades de um objeto)
for (indice in objeto) {
  console.log(objeto[indice]);
}

// FOR-OF (itera em um array)
for (item of items) {
  console.log(item);
}

// WHILE
while (condição) {
  // bloco de código
}

// DO-WHILE
do {
  // bloco de código
}
while (condição);

Arrays

// Array de frutas
let frutas = ["Banana", "Maça", "Kiwi"];

//Array com mais de um tipo
let mistura = [
  frutas,
  "Frase motivacional",
  12345,
  true
];

Objetos

// Objeto
let pessoa = {
  nome: "Catarino",
  idade: 100,
  telefone: "+5511999887766",
  habilidade: tocarMusica(),
  vivo: false,
  filhos: ["Xucrute", "Adelina"],
  herança: {
    carro: {
      marca: "cansei",
      modelo: "to sem criatividade por hj zzz",
      ano: 2500,
    },
    casa: {
      ///
    }
  }
}

Funções

// Função nomeada
function hiroshimaTravazap(nome) {
  return console.log("travei kkk")
}

// Função anônima
const patatiPassazap = () => {
  return console.log("Oi, sumida.");
}

// Função anônima com retorno implícito
const salve = nome => console.log(`Salve, ${nome}.`);

Conclusão

Hoje foi dia de começar light, vendo a sintaxe básica do JavaScript e passeando pelas tipagens de valores, operadores, funções, objetos, aprendendo a iterar com estruturas de repetição e a utilizar condicionais.

Adote um Dev - Nível n00b_m4st3r: JavaScript

Adote um Dev - Nível n00b_m4st3r: JavaScript

Pedro Mello

Adote um Dev - Nível n00b_m4st3r: JavaScript

More from Pedro Mello