Curso JavaScript

Curso Livre da Rocketseat

Índice

Introdução
Configurando ambiente
Variáveis e dados
Operações matemáticas
Funções
Condicionais
Operadores lógicos
Condição ternária
Estruturas de repetição
Intervalo e timeout
Desafio
Eventos inline
Trabalhando com a DOM
Lidando com elementos
Alterando estilos
Desafio
Estrutura do app
Iniciando aplicação
Renderizando todos
Criando todos
Excluindo todos
Salvando no storage
Requisições AJAX
Promises
Utilizando Axios
Desafio

1 - Introdução

2 - Configurando ambiente

3 - Variáveis e dados

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Curso JavaScript - Rocketseat</title>
</head>
<body>

    <script>
    let nome = "José";
    let idade = 34;
    let peso = 90.3;
    let humano = true;

    let alunos = ['jose','marcos','joão'];
    let aluno = {
        nome: alunos[0],
        idade: 20,
        peso: 80.8,
        humano: true,
    }
    console.log(alunos);
    console.log(alunos[1]);

    console.log(aluno.nome);
    console.log(aluno.peso);
    </script>
</body>
</html>

Voltar ao Índice

4 - Operações matemáticas

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Curso JavaScript - Rocketseat</title>
</head>

<body>

  <script>
    let x = 10, y = 5;

    let resultado = x % y;

    x += 3;

    console.log(resultado);
    console.log(x);
  </script>
</body>

</html>

Voltar ao Índice

5 - Funções

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Curso JavaScript - Rocketseat</title>
</head>

<body>

  <script>
    function soma(numero1, numero2) {
      let resultado = numero1 + numero2;
      return resultado;
    }
    let resultado = soma(10, 200);
    console.log(resultado);
  </script>
</body>

</html>

Voltar ao Índice

6 - Condicionais

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Curso JavaScript - Rocketseat</title>
</head>

<body>

  <script>
    function retornoSexo(sexo) {
      // M , F
      /*if(sexo === 'M'){
          return 'Masculino';
      }else if(sexo === 'F'){
          return 'Masculino';
      }else{
          return 'outro';
      }*/

      switch (sexo) {
        case 'M':
          return 'Masculino';
        case 'F':
          return 'Feminino';
        default:
          return 'outro';
      }
    }
    let resultado = retornoSexo('M');
    console.log(resultado);
  </script>
</body>

</html>

Voltar ao Índice

7 - Operadores lógicos

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Curso JavaScript - Rocketseat</title>
</head>

<body>

  <script>
  // AND(&&) , OR (||), NOT (!==)
  let sexo = 'M', idade = 23;

/*if (sexo === 'M' || idade >= 18){
    console.log('ok');
}*/

let masculino = sexo === 'M'; // true
console.log(masculino);
  </script>
</body>

</html>

Voltar ao Índice

8 - Condição ternária

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Curso JavaScript - Rocketseat</title>
</head>

<body>

  <script>
    let sexo = 'M';

    let retorno = (sexo === 'M') ? 'Masculino' : 'Feminino';

    console.log(retorno);
  </script>
</body>

</html>

Voltar ao Índice

9 - Estruturas de repetição

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Curso JavaScript - Rocketseat</title>
</head>

<body>

  <script>
        // for , while

        /*for (let i = 0; i <= 100 ;  i++){
            console.log(i);
        }*/

        let j = 12344141;
        while (j > 50){
            console.log(j);
            j /= 5;
        }
  </script>
</body>

</html>

Voltar ao Índice

10 - Intervalo e timeout

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Curso JavaScript - Rocketseat</title>
</head>

<body>

  <script>
    function exibeAlgo(){
            console.log("Vamo que vamo!");
        }
        // intervalos
        //setInterval(exibeAlgo(), 1000)

        // atrasa
        setTimeout(exibeAlgo, 2000)
  </script>
</body>

</html>