O que é Front-End?

É a área de um software com que o usuário interage. No nosso caso na Web, o Front-End (também chamado de client-side) é tudo o que o usuário acessa, o visual do site, botões, texto são o front-end. Entretanto ele não é interativo, ele não faz nada, só apresenta informação, para adicionarmos interação em nossa página, nós usamos o Javascript ou pros íntimos, o JS.

O que é Javascript

É uma linguagem de programação. Ela é linguagem de programação oficial da Web, sendo usada para adicionar interação e dinamicidade em páginas Web. Com JS podemos calcular, manipular e validar dados.

Como a usar em uma página Web

Basta usar a tag <script> dentro do HTML

<script>
    //aqui você já pode escrever o seu código Javascript, mas não é o ideal...
</script>

<!-- Ou o ideal, salvar o seu Javascript em um arquivo com a extensão .js e o importar na sua página com a tag <script> -->
<script src="algumaCoisa.js"></script>

Variáveis

Para criar uma variável basta usar a palavra chave var e então definir o valor dela:

var abobrinha = "alguma coisa";

Não foi necessário dizer o tipo da variável em sua definição, como string ou number. Isso porque como o JS é uma linguagem dinâmica, a definição do tipo de variável é feito durante a execução, o que significa na prática, que não precisamos definir o tipo de nossas variáveis e podemos colocar um novo valor de outro tipo quando quisermos:

var texto = "algum texto";
var umNumero = 1;
var booleano = true;

//E posso simplesmente fazer isso:
var texto = 2; //Embora em geral não faça muito sentido ¯\_(ツ)_/¯

Tipos de dados

String

Exatamente igual a várias outras linguagens, simplesmente um texto que pode ser definido com aspas duplas (“”) ou aspas únicas (‘’), ex:

var a = "alguma coisa";
var b = 'alguma outra coisa';

Number

Em Javascript não há vários tipos de números como em outras linguagens (por exemplo no C#: byte, int, float, double), apenas number que pode ser decimal ou não:

var a = 1;
var b = 2.5;
var c = -4250.5;

Boolean

Exatamente igual a outras linguagens:

var a = true;
var b = false;

Array

Esse tipo de dado nos permite criar listas que depois podemos manipular livremente:

var listaVazia = [];
var nomes = ["Jonathan", "Renan", 'Murillo'];
nomes[0] = "Jhow"; //usando colchete podemos selecionar itens específicos na lista

Objects

É uma coleção de propriedades e propriedade é uma relação entre uma chave e um valor. Praticamente é um tipo complexo que podemos customizar:

//objetos são definidos por uso de chaves, abrindo e fechando uma chave você criar um objeto
var umObjeto = {};

//para definir uma propriedade em um objeto você tem que dar um nome e um valor a ela
var outroObjeto = {
    umaPropriedade: "alguma coisa",
    outraPropriedade: 2
};

//cada propriedade é uma mini variável, permitindo que possamos economizar em variáveis
//Então, ao invés de guardar dados de uma pessoa em várias variáveis:
var nomePessoa = "João da rua de baixo";
var idadePessoa = 14;
var pessoaEUmaBobona = true;
//Podemos fazer de maneira mais efetiva com um objeto:
var pessoa = {
    nome: "João da rua de baixo",
    idade: 14,
    eUmaBobona: true
}

//E então podemos acessar as propridades depois:
console.log(pessoa.nome); //"João da rua de baixo"
console.log(pessoa.idade); //14

//Também é possível alterar o valor de uma propriedade depois
pessoa.idade = 15;
console.log(pessoa.idade); //15

Undefined

É o valor padrão de todas as variáveis no JS. Se você não der um valor para uma variável quando a define ela terá o valor undefined:

var a;
console.log(a); //undefined

Null

Significa vazio, ou seja, a ausência de um valor. De maneira prática você o usa pra dizer que o valor de uma variável ou propriedade está vazia, ex:

var a = null;
console.log(a); //null

Condicionais

Uso parecido com o de outras linguagens

if(condicao) {
    //...
} else if(outraCondicao) {
    //...
} else {
    //...
}

Loops

Igual a outras linguagens:

For

for(var i=0; i<10; i++) {
    //código que será executado 10 vezes
}

While e Do/While

while(condicao) {
    //código que será executado enquanto condicao for verdadeira
}

//ou

do {

} while(condicao);

Funções

Já usamos funções no javascript antes, por exemplo o console.log(). Existem várias funções já prontas no Javascript que podemos usar, por exemplo:

console.log(string); //Mostrará a string no console
alert(string); //Criará uma Modal com a string

Como criar nossas próprias funções

Para criar nossas próprias funções só precisamos usar a palavra chave function, parêntesis e o bloco de código que será executado:

function umaFuncao() {
    //código que será executado
}

//E para a usar:
umaFuncao();

Parâmetros

Para criar parâmetros em uma função, basta dar um nome a ela dentro dos parêntesis e a usar dentro da função:

function funcaoComParametros(umParametro) {
    console.log("O valor do parâmetro é: " + umParametro);
}

funcaoComParametros('batata'); //O valor do parâmetro é: batata

Funções em objetos

Sim, podemos colocar funções como propriedades em um objeto, mas para isso usamos uma função anônima (uma função anônima nada mais é que uma função sem um nome, ou seja, não podemos a chamar mais tarde, útil para algumas situações):

var cachorro = {
    nome: "José",
    idade: 1,
    eBonitinho: "Mas é claro que ele é bonitinho",
    latir: function() { //função anônima
        alert('au');
    }
};

//E então podemos usar a função latir de cachorro simplesmente acessando a propriedade e a usando como uma função:
cachorro.latir(); //au

//E antes que pergunte, sim, podemos usar parâmetros neste caso também

Tornando nossas páginas dinâmicas com AJAX

AJAX significa Asynchronous Javascript and XML, se refere a um uso metodológico de JS e XML para tornar páginas Web mais interativas pro usuário (e simplesmente mais úteis)

Manipulação de DOM

Com JS podemos modificar a nossa página Web da maneira que quisermos, basta selecionarmos um elemento e mexermos com ele do jeito que quisermos:

document.getElementById()

Para selecionar um elemento pelo ID (o método original):

//Se em uma página tem o elemento: <div id="alguma-coisa"></div>
document.getElementById("alguma-coisa");

document.querySelector()

Também podemos usar um seletor mais atual e poderoso, o querySelector. Ele funciona da mesma maneira que os seletores do CSS, permitindo que selecionemos elementos usando o próprio tipo (div, button, etc), um id (#alguma-coisa, #outra-coisa), com classes (.uma-classe, .outraclasse) e até usando seletores avançados do css (div button span.descricao):

document.querySelector("div"); //retorna um divs da página

document.querySelector("#alguma-coisa"); //retorna o elemento com o id alguma-coisa

document.querySelector(".alguma-coisa"); //retorna o elemento com a classe alguma-coisa na página

document.querySelector("div button span.descricao") //retorna o span com a classe descricao dentro de um button que por sua vez está dentro de um div

Modificando o HTML com JS

Ambos o document.getElementById() e document.querySelector() retornam um elemento HTML que podemos manipular com o javascript. De que maneira podemos o manipular você pode estar se perguntando? Bem, podemos modificar o conteúdo dentro dele e seus atributos:

//HTML: <button class="abobrinha">alguma coisa</button>
var botaoAbobrinha = document.querySelector(".abobrinha");
botaoAbobrinha.innerHTML = "alguma outra coisa";
botaoAbobrinha.className = "melancia";
//Agora no HTML esse botão seria assim: <button class="melancia">alguma outra coisa</button>

Pegando os dados do HTML

Também podemos pegar o conteúdo dentro de um elemento HTML, por exemplo, em um input em que o usuário digitou seu nome e queremos verificar se o nome desta pessoa é “jonathan”, pois se for precisamos a avisar que essa pessoa deveria trocar o nome para “jhow”, ficaria assim:

//<input type="text" class="nome"> <!-- usuário digitou o nome -->
var nome = document.querySelector("input.nome").value; //em inputs, o valor selecionado pelo usuário está em uma propriedade value

if(nome == "jonathan") {
    alert("rapaiz, você deveria trocar seu nome para Jhow");
}

Alterando CSS com JS

Também podemos alterar o estilo de um elemento (CSS). todo elemento HTML tem uma propriedade chamada style, que por sua vez possui as propriedades de estilo de um elemento (propriedades essas que nós alteramos no CSS), mas aqui no JS as utilizamos com o padrão camelCase, ou seja, se em CSS alteramos a cor de fundo assim: background-color: red; no JS altermos assim: element.style.backgroundColor = "red".:

var elemento = document.querySelector(".um-elemento");
                     
elemento.style.backgroundColor = "red";
elemento.style.height = "30px";
elemento.style.fontWeight = "bold";

Eventos

O que são Eventos? Bem eventos são quando alguma coisa acontece. Por exemplo, um aniversário é um evento, assim como a copa do mundo e a aula. Agora outra pergunta, quando uma pessoa tropeça em algo, seria isto um evento? A reposta é sim, tudo que de alguma forma foi alterado tecnicamente é um evento.

Então falando sobre páginas Web, quais eventos podem ocorrer em uma página? Um clique de um botão, um input sendo preenchido, uma tecla sendo pressionada, entre outros. Agora, como podemos nos aproveitar desses eventos para fazermos coisas? Vamos usar os famosos Event Handlers:

//É o seguinte, sua página Web tem um botão, que quando clicado, por algum motivo, deve trocar a própria cor para rosa, como fazer?
//O botão: <button class="botao-a-ficar-rosa">clique aqui</button>
var botao = document.querySelector(".botao-a-ficar-rosa");

//element.addEventListener(stringDoTipoDoEvento, funcaoASerExecutada)
//stringDoTipoDoEvento: representa que evento você quer pegar, por exemplo o clique do botão, se o mouse passou por cima, etc
//funcaoASerExecutada: função anônima ou não que será executada quando a função ocorrer, pode ter um parâmetro com o nome que quiser que contém as informações do evento, por exemplo, o elemento em que houve o evento, quando o evento ocorreu, se o botão CTRL estava pressionado quando o evento ocorreu, etc.
botao.addEventListener("click", function(e) {
    e.target.style.backgroundColor = "pink";
    //e.target: o elemento HTML daonde o evento originou, neste caso o botão
});

No event Handler (a função que é executada após o evento), podemos fazer o que quisermos, por exemplo, após um clique de botão podemos trocar todas as imagens do site por imagens de gatinhos, não sei porque alguém faria isso (mentira, eu sei exatamente o porque), mas você pode.

HTTP

HTTP é uma sigla e significa Hyper Text Transfer Protocol, basicamente é o protocolo ou padrão que define como conteúdo na internet deve ser transferido de um computador para outro, é a espinha dorsal da internet, já que ela é basicamente uma rede de computadores global.

Usando o padrão HTTP é possível transferir arquivos entre computadores, como: HTML, CSS, JS, Imagens (.png, .jpg, .webp), Vídeos (.mp4, .avi), música (.mp4), programas de computador (.exe, .app), aplicativos de celular (.apk, .ipa). Mas como sites pegam informação? Pois podemos baiar um .txt para um site, mas isso seria muito ineficiente. Então nós usamos o HTTP para pegar dados direto de outros computadores, para isso usamos o famoso XMLHttpRequest, pegando daddos de APIs.

API significa Application Programming Interface, nada mais é do que uma maneira de conectar uma aplicação á outra. Por exemplo, quando você está em algum site na internet e aparece um botão no próprio site para o compartilhar no twitter, e então o compartilha em seu twitter sem você precisar o abrir. Isso acontece porque o Twitter criou uma API pública que permite a sites que acessem o twitter aberto da pessoa que accessa o site delas e possam compartilhar algo no twitter do usuário.

Nós eventualmente criaremos nossas próprias APIs, mas por agora iremos usar APIs públicas para que possamos aprender a como usá-las. Aqui uma lista de APIs gratuitas.

XMLHTTPRequest- Retornando conteúdo da internet com APIs

Então né, APIs, como as usar? Com JS na Web nós usamos o XMLHttpRequest, mas antes nós precisamos de uma API, para isso nós usaremos a primeira API do site https://github.com/toddmotto/public-apis, a Cat Facts, se você acessar o site desta API, você descobrirá que é uma API que retorna fatos sobre gatos, justamente o que precisamos para o nosso dia a dia. Acessando o site de qualquer API, no nosso caso https://alexwohlbruck.github.io/cat-facts/, a primeira coisa que precisamos fazer é encontrar a sua documentação, neste caso https://alexwohlbruck.github.io/cat-facts/docs. Na documentação haverá exemplos e explicações sobre como usar a API em questão e os endpoints

No caso do Cat Facts, as informações que a Documentação nos dá é:

Bem, agora que sabemos tudo que precisamos de nossa API, podemos vir e a usar com o XMLHttpRequest:

var request = new XMLHttpRequest();
request.addEventListener("load", function(e) {
    if(request.status == 200) {
        alert(request.response);
    }
});
request.open("GET", "https://cat-fact.herokuapp.com/facts");
request.send();