JavaScript e jQuery

===== VARIÁVEIS =====
var nome = "UB Social";
var peso = 80.5;
var humano = true;
var alunos = ["UB Social","UB Social2"];
var aluno = {
    nome: alunos[0],
    peso: 36.5
};
console.log(alunos[1]);
console.log(aluno.nome);


===== OP MATEMÁTICAS =====
var x = 10, y = 5;
var r1 = x%y, r2 = x+=3; r3 = x*=2;


===== FUNÇÕES =====
function soma(a,b) {
    var r = a+b;
    return r;
}
soma(5,5);


===== CONDICIONAIS =====
sexo = 'M';
if (sexo=='M') {return "Masculino";}
else if (sexo=='F') {return "Feminino";}
else {return "Outro";}

switch (sexo) {
    case 'M':
        return "Masculino";
        break;
    default:
        return "Feminino";
        break;
}


===== OP LÓGICOS =====
AND: &&
OR: ||
NOT: !=


===== COND TERNÁRIA =====
var r = (sexo=='M')?"Masc":"Fem";


===== REPETIÇÃO =====
for (var i=0; i<=100; i++) {
    console.log(i);
}

var j=200000;
while (j>=100) {
    console.log(j);
    j/=5;
}


===== INTERVALO & TIMEOUT =====
function exibeAlgo() {console.log("Olá");}
setInterval(exibeAlgo,1000); //executa a cada 1seg
setTimeout(exibeAlgo,5000); //executa apenas 1vez, delay 5seg


===== EVENTOS INLINE =====
function mostraAlerta() {alert("Botão clicado");}
<button onclick="mostraAlerta()">Aperte</button>
<button onmouseover="mostraAlerta()">Aperte</button>


===== REFERENCIAÇÃO DOM =====
<input type="text" name="nome" id="nome"/>
<button class="botao">Adicionar</button>
var inputElement = document.getElementById("nome");
var inputElement2 = document.getElementsByTagName("input")[0];
var inputElement3 = document.getElementsByClassName("botao")[0];
var inputElement4 = document.querySelector("body button.botao"); //percorre dom até achar o elemento
var inputElement4 = document.querySelector("input[name=nome]");
var inputElement5 = document.querySelectorAll("input"); //tds os inputs

var btnElement = document.querySelector("button.botao");
var inputElement = document.querySelector("input[name=nome]");

btnElement.onclick = function() {
    var texto = inputElement.nodeValue;
    alert("Clicou");
}


===== MANIPULAÇÃO DOM =====
<div id="app"><input id="nome"/></div>
var linkElement = document.createElement('a');
linkElement.setAttribute('href','https://google.com');
var textElement = document.createTextNode('Acesse!');
linkElement.appendChild(textElement);

var containerElement = document.querySelector('#app');
containerElement.appendChild(linkElement);

var inputElement = document.querySelector('#nome');
containerElement.removeChild(inputElement);


===== ALTERANDO ESTILOS =====
<div class="box"></div>
var boxElement = document.querySelector('.box');
boxElement.style.width = 100;
boxElement.style.height = 100;
boxElement.style.backgroundColor = '#f00';

Fazer chamada jQuery(ex: versão 3.3.1):
<script src="pasta/jquery-3.3.1.js"></script>
<script>Códigos aqui...</script>


SELETORES
<p class="p1">Lorem2.</p>
<p>Lorem.</p>
<p id="p2"></p>
<p data-aula="p3"></p>

<script src="pasta/jquery-3.3.1.js"></script>
<script>
    // Javascript
    var p1 = document.querySelector(".p1");

    // jQuery
    var p1 = $('.p1');
    var p1 = $('#p2');
    var p1 = $('p[data-aula="p3"]');
    console.log(p1);

    var p1 = $('.p1').remove(); //apaga o elemento
    var p1 = $('.p1').get(0); //acessar item índice
    var p1 = $('.p1')[0]; //idem acima
</script>


EFEITOS
<style>
    body {background-color: #efefef;}
    .box {position:relative; left:0; width:100px; height:100px; background-color:pink;}
</style>

<div class="box"></div>
<hr>

<script src="pasta/jquery-3.3.1.js"></script>
<script>
    var box = $('.box');
    box.animate({width:"200px", height:"200px"},1000) //estilo,tempo de animação(em milisegundos)
    box.show();
    box.hide();
    box.fadeIn(1000); //aparecer(tempo)
    box.fadeOut(2000); //desaparecer(tempo)
</script>


EVENTOS
<style>
    body {background-color: #efefef;}
    .box {position:relative; left:0; width:100px; height:100px; background-color:pink;}
</style>

<div class="box"></div>
<hr>
<button id="starting">Go!</button>

<script src="pasta/jquery-3.3.1.js"></script>
<script>
    var box = $('.box');
    var starting = $('#starting');

    // forma menos usual
    starting.click(function() {
        console.log("Clicou");
    });

    // forma mais indicada
    starting.on("click", function() {
        console.log("Clicou!");
    });

    starting.on("hover", function() {
        console.log("Passou sob!");
    });

    starting.on("click", function() {
        box.animate({
            left: "800"
        }, 1500);
    });
</script>


DELAY
Exemplo clicar no botão e esconder a mensagem com delay

<button>Click</button>
<div class="mensagem">Olá!</div>

<script>
    var button = $("button");
    var mensagem = $(".mensagem");

    button.on("click", function() {
        mensagem.delay("slow").fadeOut(); //ou "fast" ou 1000 milisegundos
    });
</script>


ADDCLASS & REMOVECLASS
Remover todos os links actives existentes e ativar active no link que cliquei. Suponhamos, para o exemplo, um css com classe .active

<ul>
    <li><a class="link active" href="#">Home</a></li>
    <li><a class="link" href="#">Empresa</a></li>
    <li><a class="link" href="#">projetos</a></li>
    <li><a class="link" href="#">Contato</a></li>
</ul>

<script>
    var link = $(".link");

    link.on("click", function(){
        //remover todos as .actives nos links
        link.removeClass("active");

        //adicionar a .active no link que cliquei
        $(this).addClass("active");
    });
</script>


SERIALIZE & SERIALIZEARRAY
Serializar dados: toda vez que preenche fomulário de Ajax, precisamos dizer quais as informações ao servidor. Enviar dados Serializados, 'em formato get, no metodo post'
ex: cep = 0330 & logradouro = Rua x

<form action="#">
    <label for="cep">CEP</label>
    <input type="text" name="cep">
    <label for="logradouro">Logradouro</label>
    <input type="text" name="logradouro">
    <button>Submit</button>
</form>
<div class="resultado"></div>

<script>
    var form = $("form");
    var resultado = $(".resultado");

    form.on("submit", function(event){
        //travar o recarregamento da página ao submeter (Ajax permite!)
        event.preventDefault();

        //Serializar dados
        var data = $(this).serialize();
        resultado.text(data);

        //Serializar e convertê-los em objetos (no caso só no console)
        var data = $(this).serializeArray();
        console.log(data);
    });
</script>


POSITION & OFFSET
Intentificar coordenadas de posicionamento.
Exemplo: Saber o espaço entre um container e um item / relação entre ele e tela inteira

<div class="container">
    <div class="item"></div>
</div>

<script>
    var container = $(".container");
    var item = $(".item");

    //espaço entre item e container
    var posicao = item.position();
    console.log(posicao.left, posicao.top);

    //espaço entre item e tela toda (geralmente usado com drag & drop)
    var posicao = item.offset();
    console.log(posicao.left, posicao.top);
</script>


SCROLL & SCROLLTOP
Cliques com rolagem mais suave. Ex: voltar ao topo, de forma suave.
Obs: No caso do exemplo, abstrairemos o conteudo css, deixando somente o Html!

<ul class="menu">
    <li><a href="#empresa">Empresa</a></li>
    <li><a href="#projetos">Projetos</a></li>
    <li><a href="#contato">Contato</a></li>
</ul>

<div class="item">
    <h2 id="empresa">Empresa</h2>
</div>
<div class="item">
    <h2 id="projetos">projetos</h2>
</div>
<div class="item">
    <h2 id="contato">Contato</h2>
</div>
<button class="btn">Subir</button>

<script>
    //realizar scroll clicando no menu
    var link = $(".menu li a");
    var subir = $(".btn");

    //toda vez que tiver scroll, fazer monitoramento
    $(window).scroll(function {
        //botão subir aparecer somente qndo o menu desaparecer (1200 altura do menu)
        var minhaposicao = $(this).scrollTop();
        if(minhaposicao >= 1200) {
            subir.fadeIn();
        } else {
            subir.fadeOut();
        }
    });

    link.on("click", function(){
        //quebrar a forma nativa do âncora (#empresa), tornando-a manual
        //pegar valor do atributo href
        var seletor = $(this).attr("href");

        //para fazer o scroll, preciso saber a posição de destino (ex: projetos)
        var posicao = $(seletor).offset().top;
        $("html, body").animate({scrollTop: posicao-60},1000); //60 posição do menu, 1000 milisegundos

        //scroll no botão subir
        subir.on("click", function(){
            $("html, body").animate({scrollTop: 0},500);
        });
    });
</script>


===== jQuery com Ajax =====

--- index.php ---
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<form id="login" method="post">
    <input type="text" placeholder="Nome" name="nome">
    <input type="password" placeholder="Senha" name="senha" id="senha">
    <input type="submit" name="loginBtn" value="Login">
</form>

<script>
$(document).ready(function() {
    $('#login').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: 'login.php',
            data: $(this).serialize(),
            success: function(response) {
                var jsonData = JSON.parse(response);
                if (jsonData.success == "1") {location.href = 'logado.php';}
                else {alert('Login incorreto!');}
           }
       });
     });
});
</script>


--- login.php ---
<?php
if ((!empty($_POST['nome'])) and (!empty($_POST['senha']))) {echo json_encode(array('success' => 1));}
else {echo json_encode(array('success' => 0));}