Colt Steele Most Important Notes

-
Selectors:
- elementos {}
- #id {}
- .classes {}
- li a {} --> para elementos dentro de outro elemento
- h1 + ul {} --> para elementos ul adjacentes(logo após) ao h1
- input[type="text"] {} --> seletor de atributos
- ul:nth-of-type() {} --> selecionar apenas elementos de acordo com o número
entre (), podendo ser também even. Ex. 3, todos os ul na 3° posição serão afetados.
- a:visited {} --> para elementos a onde se clica e visita o link
- a:hover {} --> para elementos a onde se passa o mouse

Specificity:
- Selectors universais (ex: *)
- Type selectors (ex: h1, p, label)
- classes, atributos e pseudo-classes (ex: .highlight)
- IDs (ex: #special)

CSS VARIABLES

- Salva um valor numa variável e pode ser reutilizada no CSS com o var():
EX.: body {
--main-bg-color: coral;
}
p {
background-color: var(--main-bg-color, corReservaOpcional);
}
// elas tem escopo, logo, se fizer numa div, só será acessível em outras divs ou
elementos dentro de divs.
// para faze-la variável global, adicione ao elemento :root{}

As propriedades «background» são as listadas abaixo:

# background-color – cor do fundo;

# background-image – imagem de fundo;
# background-repeat – maneira como a imagem de fundo é posicionada;
# background-attachment – se a imagem de fundo faz scroll ou não;
# background-position – como e onde a imagem de fundo é posicionada;
# background – maneira abreviada para todas as propriedades;

PROPRIEDADES DAS FLEXBOXs:

# flex-direction: # row, row-reverse, column, column-reverse.

# justify-content: # flex-start, flex-end, center, space-around, space-between.
HORIZONTAL
# align-items: # flex-start, flex-end, center, baseline, stretch. VERTICAL
# order:
# align-self: # flex-start, flex-end, center, baseline, stretch. P/ ELEMENTO
INDIVIDUAL
# flex-wrap: # nowrap, wrap, wrap-reverse.
# flex-flow: # combina direction e wrap num só.
# align-content: # flex-start, flex-end, center, baseline, stretch. ESPAÇO ENTRE
LINHAS.
# há mais propriedades
Retirar espaços entre elementos no CSS: float: left

JS: AND: &&

OR: ||
NOT: !

for(var i = x; i <=100; i++) {

console.log(i);
}

havendo uma var j: while (j <= 100) {

FUNÇÃO REPLACE
var.replace(/antigocaracter/g, "novocaracter");

CONDIÇÃO TERNÁRIA
condição ? expressão1 : expressão2;

CRIAR INTERVALO E DELAY DE EXECUÇÃO, EM MILISEGUNDOS

setInterval(minhaFunção, 1000); // executa a funcao a cada 1s
setTimeout(minhaFunção, 1000); // executa a funcao depois de 1s

MÉTODOS DE ARRAYS
array.push("red"); // add ao final
array.pop(); // remove o último elemento
array.shift("red"); // add ao início
array.unshift(); // remove o primeiro elemento
array.indexOf("red"); // encontra o índice do item procurado
array.slice(1, 3); // (de, até) copia partes de um array
array.splice(, ); // (começo, quantos) remove item do array

ITERAÇÃO MELHOR QUE O FOR > FOREACH

array.forEach(minhaFunção){
conteúdo da função aqui
}

Ex.: array.forEach(function(animal){
// animal vai representar cada slot do array.
console.log("palavras" + animal)
});

// usando outra função já criada, ela já associa os parâmetros a cada elemento

do array.
// além da função o forEach pode receber um segundo parâmetro de índice.

CRIAR SEU PRÓPRIO FOREACH

function myForEach(array, outfunction){

for (var i = 0; i < array.length; i++){
outfunction();
}
}

OBJETOS
 // Pode-se criar objeto vazio e adicionar elementos usando person.name =
"Thales";

------------------------------------------------

DOM MANIPULATION

console.dir(elemento) // mostra elemento como objeto

DOM SELECTORS

document.getElementById("nomedoid")
document.getElementByClassName("nomedaclasse") // representado num HTMLCollection,
não array.
document.getElementByTagName("nomedatag")
document.querySelector("li.class"); // sintaxe do css. Só seleciona o primeiro
elemento correspondente.
document.querySelectorAll("h1"); igual ao anterior, mas seleciona todos os
elementos correspondentes.

MANIPULANDO STYLES

tag.classList // mostra a classe da tag

tag.classList.add(); // adiciona classe
tag.classList.remove(); // remove classe
tag.classList.toggle(); // on/off classe

MANIPULANDO TEXTO

tag.textContent // mostra texto puro

tag.innerHTML // mostra texto com tags editáveis

MANIPULANDO ATRIBUTOS

tag.getAttribute("srcset") // mostra atributo

tag.setAttribute("srcset", "http://") // muda atributo

EVENTOS NO DOM

element.addEventListener(type, functionCall);

NÚMERO ALEATÓRIO

Math.random(); // entre 0 e 1
Math.floor(Math.random()) // aproxima o número

JQUERY

$("selectorAqui") // funciona como se fosse um querySelectorAll. Mesmo que só

exista um elemento selecionado, virá como array.

.css(propriedade, valor) // usa-se pra mudar o css.

Ex.: $(".square").css("border", "2px solid red");

var styles = {
backgroundColor: "pink",
fontWeight: "bold"
}; // é possível passar um objeto com estilos.
MÉTODOS DO JQUERY

$("div").text("novotextoaqui"); // basicamente é o textContent do jQuery.

$("div").html(); // é o innerHTML do jQuery.

$("div").attr("alt", "Photo by Thales"); // mudar atributo. Vazio vê atributo

atual.

$("div").val(); // retorna valor do elemento, pode adicionar escrevendo dentro

entre aspas.

$("div").addClass(); // adiciona
$("div").removeClass(); // remove
$("div").toggleClass(); // on/off

$("div").first.metodo(); // pega primeiro elemento

$("div").last.metodo(); // pega último elemento.
// metodo é generico aqui. Pode ser addClass ou qualquer método.

JQUERY CLICK EVENTS

$(".square").click(function(){
// conteudo da função aqui
});

this em jQuery é substituído por $(this)

$(".square").keypress(function(event){
if(event.which === 13){
alert("You hit enter!")
}
}); // which é o número da tecla no glossário do jQuery.

$("div").on("click", funcion(){
// conteudo da função aqui
}); // evento mais usado do jQuery. É a versão addEventListener do jQuery.

DIFERENÇA CLICK / ON

click() // add Listeners apenas para elementos já existentes

on() // add listeners para todos potenciais elementos que surgirem

EFEITOS DO JQUERY

.fadeOut() // Sumir
.fadeIn() // Aparecer
.fadeToggle() // fade on/off

.slideDown // esconde descendo

.slideUp // esconde subindo
.slideToggle // slide on/off

GIT FIRST OVERVIEW (FROM LEARN GIT IN 15min BY COLT STEELE)