Javascript

● Variáveis

// let é uma variável que o valor pode ser alterado

let nome = “valor”;

// const é uma variável onde o valor não pode ser alterado

const nome = “valor”;

● Arrvys
let família = [28,48,29,80];

console.log (familia); // [28,48,29,80]

console.log (familia[3]); // 80

console.log (familia.length); // 4 quantidade de elementos do Array

● Funções
// funções Verbo + substantivo

let corSite='azul';

function resetaCor(cor){
corSite = cor;
}

resetaCor('vermelho')
console.log(corSite);

function resetaCo(cor,tonalidade){
corSite = cor+' '+tonalidade;
}

resetaCo('vermelho','claro')
console.log(corSite)
function resetaC(cor,tonalidade){
corSite = cor+tonalidade;
}

resetaC('vermelho',' claro')
console.log(corSite)

● Tipos de Funções

// Realiza uma tarefa, mas nao devolve nada

function dizerNome(){
console.log("Andre")
};

dizerNome();

// Resolve uma tarefa e devolve algo

function MultiplicarPorDois(valor){
return valor*2;
}

let resultado= MultiplicarPorDois(5) + 2

console.log(resultado)

//Retorno de funções

let gato = multiplacarSoma(4,2);

console.log(gato)

function multiplacarSoma (val1, val2){

const cat = nag(val1, val2)
return cat*2;
}

function somar(val1, val2){

return val1+val2;
}

function nag (val1, val2){

const pato= somar(val1, val2)
return pato-2;
}
 ● Atributos
//Atribuiçao

let valo r= 100;

valor+=valor
console.log(valor) //200

//Iguldade
// Estrita compara tipo e valor

console.log (1===1); //true

console.log ('1'===1); //false

// Solta compara apenas valores

console.log (1==1); //true

console.log ('1'==1); //true

// Ternario

let pontosdocliente= 100;

let tipodocliente= pontosdocliente > 100 ? 'premium':'comum';
console.log(tipodocliente)

● Logicos
// E "&&" : retorna true se os dois forem true

let maior = true;

let vip = true;
let pode = maior && vip;
console.log(pode);

// OU "||" : retorna true se pelo menos um for true

let veterano = false;

let clube = true;
let pode2 = veterano || clube;
console.log(pode2);

// Not "!" : do contra

let recusado = !pode2;

console.log(recusado);
 ● Comparações não boleanas
// Falsy;

//Undefined
//null
//0
//false
//""
//NaN- not a number

//Truthy

let corPersonalizada="vermelho";
let corPadrao="Azul";
let corPerfil = corPersonalizada || corPadrao;

console.log (corPerfil)

// obs; se o primeiro valor nao esta contido em Falsy, ele vai ser o
resultado, // independente do segundo valor. se o primeiro valor esta contido
em Falsy, ele vai ser // a resposta.

● if..Else
// if (condicao) {codigo a ser executadado}
// else if (outra condicao) {codigo a ser executadado}
// else (condicao) {codigo a ser executadado}

// se for 06:00 até 12:00 = Bom dia!

// se for 12:00 até 18:00 = Boa tarde!
// caso contrario= Boa Noite!

let hora= 19
if(hora>6 && hora<12){
console.log("Bom dia!")
}

else if(hora>12 && hora<18){

console.log("Boa tarde!")
}

else {
console.log("Boa Noite!")
}
 ● Switch.Case
//Switch.Case

let permissao = 'comum'; // comum, gerente, diretor

switch(permissao){

case 'comum':
console.log ('usuário comum!')
break;

case 'gerente':
console.log ('usuário gerente!')
break;

case 'diretor':
console.log ('usuário diretor!')
break

default:
console.log ('usuário não identificado!')
}
 ● LOOPS
//Loop.For

for (let i=0; i<5 ; i++){

console.log (i,'isso aí');
}

// ou i=1; i<=5 ; i++

// se quiser só impar

for (let i=0; i<10 ; i++){

if ( i%2 !== 0) // operador modulos

console.log(i)

}l

//ordem decrescente

for (let i=5; i>=1; i--){

if ( i%2 !== 0) //modulos

console.log(i)

//while loop

let i=5;

while(i>=1){

if(i%2 !==0){
console.log(i);

i--

}
//Do..while

let p=0;

do{
console.log('digitando',p);
p++;
}

while(p<10);

● For-in e For-of
//for-in

const pessoa={
nome:'Andre',
idade: 20
}
for(let chave in pessoa){
console.log (chave, pessoa.nome)
}

//

const cores =['vermelho','verde','azul'];

for (let indice in cores){
console.log(indice,cores[indice])
}

//for-of

for(let cor of cores){

console.log(cor)
}

● Exemplos de loop for

let g = 10
for( let i = 0; i < g ; i++ ){
console.log ('bom',i)
}

let l = 10
for( let i = l; i >= 0 ; i-- ){
console.log (i)
}

for( let i = 0 ; i < 5 ; i++ ){

console.log (i)
}

let m = 10
for( let i = 1 ; i <= m ; i++ ){
console.log (i)
}

let o = 10
for( let i = o ; i >= 1 ; i-- ){
console.log (i)
}

let p = 10
for( let i = p ; i >= 0 ; i-- ){
console.log (i)
}

● Trocando variaveis
// troca de duas variáveis

let z=1
let x=2

let w=z
z=x
x=w

console.log(z)
console.log(x)

// trocando o 'a' com o 'c', o 'b' com o 'a', o 'c' com o 'a'.

let a=10
let b=5
let c=3

let d=a
let e=b
a=c
b=d
c=e

console.log(a)
console.log(b)
console.log(c)

//crescente

let l=10
let m=5
let n=3

let p=l
l=n
n=p

console.log(l)
console.log(m)
console.log(n)

● Qual o maior número

//Escreva uma função que usa 2 numeos e retorna o maior entre eles
let valorMaior = max(5,10);
console.log (valorMaior);

function max (numero1,numero2){

if(numero1>numero2)
return numero1;
else return numero2;
}

// Usando ternario
let valorM = maximo(2,5)
console.log(valorM)

function maximo (x,y){

return x>y ? x:y;
}

● FizzBuzz
//Divisivel por 3 => Fizz
//Divisivel por 5 => Buzz
//Divisivel por 3 e 5 => FizzBuzz
//Não divisivel por 3 ou 5 => a entrada
//Não é um número => 'Não é um número'

const resultado = fizzBuzz(15)

console.log(resultado);

function fizzBuzz(entrada){

if (typeof entrada !== 'number')

return 'Não é um número';

if (entrada % 3 === 0 && entrada % 5 === 0)

return 'FizzBuzz';

if (entrada % 3 === 0)
return 'Fizz';

if (entrada % 5 === 0)
return 'Buzz';

return entrada;
}
● Velocimetro
//velocidade máxima de até 70
//a cada 5Km acima do limite ganha um ponto
//Main.floor() arredonda o resultado pra baixo
//Caso pontos maior que 12 => 'Carteira Suspensa'

verificarVelocidade(80);

function verificarVelocidade(velocidade){

const velocidadeMaxima = 70;

const Kmpontos = 5;

if(velocidade <= velocidadeMaxima)

console.log ('ok')
else{
const pontos = Math.floor(((velocidade-velocidadeMaxima)/Kmpontos));

if(pontos >= 12)

console.log('Carteira Suspensa');
else
console.log('pontos',pontos)
}
}

● Determinar se cada valor de 0 a ‘x’ é par ou impar

//Receber uma quantidade de valores para avaliar
//função exibe se cada valor é par ou impar

exibirTipo(5);
function exibirTipo(limite){

for (let i = 0 ; i <= limite ; i++){

if(i%2 === 0)
console.log(i,'Par');
else
console.log(i,'impar')
}
}

● Determinar se o número é par ou impar

let ponto = 543

eparouimpar(ponto)
function eparouimpar(valor){
if(valor%2===0)
console.log ('par');
else{console.log('impar')}
}

//ou

let eparouimpa = ponto

let caso = eparouimpa%2 === 0 ? 'par':'impar';
console.log(caso)

● Método para ler propriedades de um objeto

//Criar um metodo para ler propriedades de um objeto

//Exibir somente propriedades do tipo string que estao nesse objeto

const filme={
título:'Vingadores',
ano:2018,
diretor: 'Gustavo'
}

exibir(filme);
function exibir(obj){
for(prop in obj)
if(typeof obj [prop]==='string'){
console.log (prop,obj[prop])}
}

● Somar os múltiplos de 3 e de 5 de um número

//Criar funcao somar que rtorna

// soma de todos os multiplos de 3 e 5
//mulilos de 3
//3,6,9
//mulilos de 5
//5,10,

//armazenar mulilos de 3
//armazenar mulilos de 5
//Somando os multiplos

somar(10)
function somar (limite) {
let multiplosde3=0;
let multiplosde5=0;

for(i=0 ; i<=limite ; i++) {

if( i%3 === 0)
multiplosde3 += i;
if( i%5 === 0)
multiplosde5 += i;
}
console.log (multiplosde3 + multiplosde5);
}

● Exibir asteriscos por linha

//criar um funcao para dizer quantos * possui em cada linha

exibirAsteriscos(3)

function exibirAsteriscos(linhas){
let padrao = " ";

for(let linha=1; linha <= linhas; linha++){

padrao += '*';
console.log(padrao)
}
}

//ou

exibirAsteriscos(3)

function exibirAsteriscos(linhas){

for (let linha=1; linha <= linhas; linha++) {

let padrao = ' ';

for (let i=1; i<= linha ; i++) {

padrao += '*';

}
console.log(padrao);
}
}

● Analisar médias escolares

// Exercicio Nota Escolar
// obter a media a partir de um array
// 0-59 : f
// 60-69 : d
// 70-79 : c
// 80-89 : b
// 90-100 : a

const notasEscolare=[70,80,90];
console.log(mediaEcolares(notasEscolare));

function mediaEcolares(notas){
let soma = 0;
for (let nota of notas){
soma += nota
}
const media = soma/notas.length ;

if(media<59) return 'f';

if(media<69) return 'd';
if(media<79) return 'c';
if(media<89) return 'b';
return 'a'
}

//ou

const notasEscolar=[70,80,90];
console.log(mediaEcolare(notasEscolar));

function mediaEcolare(notas){
const media= calcularMedia(notas);

if(media<59) return 'f';

if(media<69) return 'd';
if(media<79) return 'c';
if(media<89) return 'b';
return 'a'
}

function calcularMedia(notasEscolar){
let soma =0;
for (let valor of notasEscolar){
soma += valor;
}
return soma/(notasEscolar.length); }
● Função para mostrar os primos
//Função para mostrar os numeros primos

exibirNumeroPrimo(15);
function exibirNumeroPrimo(limite){
for (let numero=1; numero<= limite; numero++){
let eprimo= true;

for (let divisor=2; divisor<numero; divisor ++){

if(numero % divisor === 0){
eprimo= false;
break;
}
}
if (eprimo) console.log (numero)
}
}

● O que são objetos ?

// Chave-valor (key-value pair)

const celular ={
marcaCelular: ‘ASUS’,
tamanhoTela:{
vertical: 155,
horizontal: 75
},
capacidadedaBateria: 5000,
ligar:function() {
console.log(“Fazendo ligação…”)
}
}

celular.capacidadeBateria=10;

console.log( celular.capacidadeBateria);

celular.ligar();

● Factory Funtions (Função de Fabrica)

function criarCelular (marcaCelular,tamanhodatela,capaciddedeBateria){

return {
 marcaCelular,
tamanhodatela,
capaciddedeBateria,
ligar(){
console.log("Fazendo ligacao...")
}
}
}

const celular1 = criarCelular('Zefone',5.5,5000);

console.log(celular1);

● Constructur function

//Pascal Case - UmDoisTres

function Celular (marcaCelular,tamanhoTela,capacidade,){

this.marcaCelular = marcaCelular,
this.tamanhoTela = tamanhoTela,
this.capacidade = capacidade,
this.ligar = function(){
console.log('Fazendo Ligacao')
}

const celular = new Celular ('asus',5.5,5000);

console.log (celular);

● Natureza Dinâmica dos Objetos

//Natureza dinâmica

const mouse = {
 cor: 'red',
marcar: 'daze'
}

mouse.velocidade = 5000;
mouse.trocarDPI = function (){ console.log('mudando DPI');}

delete mouse.velocidade;

console.log(mouse)

● Clonando Objetos
//Clonando Ojetos

const celular = {
marcaCelular: 'Asus',
tamanho: {
vertical: 155,
horizontal: 75,
},
ligar: function (){
console.log("Fazendo Ligação...");
}
}

const novoObjeto = Object.assign({bateria:5000},celular);

console.log(novoObjeto);

const objeto2 = {...celular};

console.log(objeto2)

● Math
//Math
Math.random()
console.log(Math.random())
//
Math.max(3,6,8,9)
console.log(Math.max(3,6,8,9))

//
Math.min(3,6,8,9)
console.log(Math.min(3,6,8,9))

● String
// Tipo primitivo
const mensagem = ‘minha primeira mensagem’;

// Tipo objeto
const outraMensagem = new String(“bom dia”);

console :

typeof mensagem // ”string”

typeof outraMensagem // “object”

outraMensagem.length // 7

outraMensagem.[2] // “m”

mensagem.includes(‘primeira’) // true esta palavra estar inclusa

mensagem.includes(‘vermelho’) // false

mensagem.startsWith(‘verde’) // false inicia com ?

mensagem.endsWith(‘mensagem’) // true termina com ?

mensagem.indexOf(‘primeira’) // 6

mensagem.replace(‘minha’ , ‘sua’) // “sua primeira mensagem”

mensagem.trim() // tira os espaços excedentes no inicio ou final

mensagem.split(‘ ‘) // “minha”, “primeiro”, “mensagem”

● Template Literal

// Template literal
const mensagem = 'oi isso \'é\' minha \n primeira mensagem'

//

const outra = `oi isso é a minha 'primeira' mensagem `;

const nome = 'Rafael'

const email =
`Olá ${nome} ${2+2}

Obrigado por se inscrever no canal

para acompanhar os vídeos não se ativar o sino.

Obrigado,
${nome}. ` ;

console.log(email)

● Date
const data1 = new Data(); // data1

const data2 = new Data(‘march 06 2019 09:30’);

const data3 = new Data( 2019, 03, 06, 9, 30); // data3

data3.setFullYear(2030);

console :

data2.toDateString() // “wed mar 06 2019”

data2.toTimeString() // diz o fuso-horário

data2.toISOString() // formato para o servidor

● Exemplo: Criando objeto endereco
let endereco ={
rua: “a”,
cidade: “b”,
cep: “c”
};

function exibirEndereco(endereço) {
for ( let chave in endereço )
console,log(chave, endereço[chave]);
}

exibirEndereco(endereco);

● Exemplo: Igualdade de Objetos

function Endereco(rua,cidade,cep){
this.rua = rua,
this.cidade = cidade
this.cep = cep
}

const endereco1 = new Endereco (“a”,”b”,”c”);

const endereco2 = new Endereco (“a”,”b”,”c”);

// const endereco3 = endereco1 ;

function saoIguais(endereco1,endereco2){
// comparar se as propriedades são iguais

return endereco1.rua === endereco2 &&

endereco.cidade === endereco2 &&
endereco1.cep === endereco2.cep
}

function temEnderecoMenoriaIguais(endereco1,endereco2){
// comprando se a referenria do objeto aponta para o mesmo local na memória

return endereco1 === endereco2;

} 3

console.log(saoIguais(endereco1,endereco2));

console.log(temEnderecoMenoriaIguais(endereco1,endereco2))

● Objeto Postagem de Blog

// com as seguintes propriedades

// postagem
/*
titulo
mensagem
autor
vizualizações
comentarios
(autor, mensagem)
esta AoVivo
*/

let postagem = {
titulo: “a”,
mensagem: “b”,
autor: “c”,
visualização:10,
comentarios:[
{autor: ‘a’, mensagem: ‘b’}
{autor: ‘a’, mensagem: ‘b’}
],
estaAoVivo:true
}

console.log(postagem)

● Exemplo de Constructor Function

// Criar um objeto postagem
// titulo, mensagem, autor ,visualizações , comentarios, estaaovivo

function Postagem (titulo, mensagem, autor){

this.titulo= titulo,
this.mensagem= mensagem,
this.autor = autor,
this.visualizações = 0,
this.comentarios = [],
this.estaAoVivo = false
}

let postagem = new Postagem (‘a’, ‘b’, ‘c’);

console.log ( postagem )

● Exemplo de Faixa de Preço

// Um array de objetos de faixa de preço para que ela possa ser usado em um site.

// Primeira opção
let faixas = [
{tooltip : ‘até R$ 700’, mínimo:0, maximo:700 }
{tooltip : ‘de R$ 700 a R$ 1000’, mínimo:700, maximo:1000 }
{tooltip : ‘R$ 1000 ou mais’, mínimo:1000, maximo:999999 }
]

// Segunda opção (Factory Function)

function criarFaixaPreço(tooltip, mínimo, máximo){

return{
tooltip,
minimo,
maximo
}
}

let faixas2 = [
criarFaixaPreço(‘a’,1,100),
criarFaixaPreço(‘b’,100,1000),
criarFaixaPreço(‘c’,1000,10000)
]

console.log(faixas);
console.log(faixas2);

// Terceira Opção (Constructor function)

function FaixasPreco (Tooltip, minimo, maximo){

this.Tooltip = Tooltip,
this.minimo = minimo,
this.maximo = maximo
}

let faixas 3 = [
new FaixaPreço (‘d’,10,20),
new FaixaPreço (‘e’,20,30),
new FaixaPreço (‘f’,30,40)
];

console.log(faixas3);

● Introdução a Arrays
// Adicionando Elementos
const numeros= [1,2,3,];

// Início

numeros.unshift(0);
console.log(numeros);

// Meio

numeros.splice(1,0,’a’);
console.log(numeros);

// Final

numeros.push(s);
console.log(numeros);

// Econtrando Elementos (Primitivos)

const numeros = [1,2,3,4];

console.log(numeros.indexof(2));

// Se o elemento estiver no array ele retorna o índice se não retorna o ‘-1’.

// Se usar .lastindexof vai mostrar o indice do último valor.

console.log(numeros.indexof(2) !== -1)

console.log(numeros.includes(2));

// Encontramos Elementos (Tipos de Referência)

const marcas= [
{ id:1 , nome:’a’},
{ id:2 , nome:’b’}
];

const marca = marcas.find(function(marca){

return marca.nome === ‘a’;
});

console.log(marca);

const numerozinhos=[1,2,10,4,20];
const selection = numerozinhos.find( function () {return selection > 10;});

console.log(selection);

// Arrow functions

const marcas = [
{id:1, nome:’a’},
{id:2, nome:’b’}
];

console.log(marcas.find(function(marca){ return marca.nome === ‘a’; } ));

//

console.log(marcas.find((marca) => {return marca.nome === ‘a’;}));

console.log(marcas.find((marca) => marca.nome === ‘a’));

// Removendo Elementos

const numeros = [1,2,3,4,5,6];

// Inicio

const primeiros = numeros.shift();

console.log(primeiros);
console,log(numeros);

// Meio

const meio = numeros.splice(2,1);

console.log(meio);

// Final

const ultimo = numero.pop();

console.log(ultimo);;
console.log (numeros);

// Esvaziando um Array
let numeros = [1,2,3,4,5,6];

// Solução 1

numeros = [];

// let outros = numeros;

// numeros = [];
// console.log(outros);
// nesse caso não funcionaria

// Solução 2

numeros.length=0;
console.log (numeros);
console.log(outros);

// Solução 3

numeros.splice(0,numeros.length);
console.log(numeros);
console.log(outros);

// Solução 4

while(numeros.length>0)
numeros.pop();

● Combinando e Cortando Arrays

const primeiro = [1,2,3];

const segundo = [4,5,6];

// Combinar

const combinado = primeiro.concat(segundo);

console.log(combinado);

// Dividir

const cortado = combinado.slice(); // (1,3) o ultimo – 1

console.log(cortado); // (1)
// Spread

const combinado = { … primeiro, … segundo};

console.log(combinado);

const clonado = [... combinado];

console.log(clonado);

● Interando um Array

const numeros =[1,2,3,4,5];

for (numeros of numeros)

console.log(numeros);

// forEach

numeros.forEach(function(numeros){console.log(numeros);})

E6S

numeros.forEach((numeros) => console.log (numeros))

// ,indice ,indice

● Combinando Arrays
const numeros = [1,2,3,4,5];

const combinado = numeros.Join (‘.’);

console.log(combinado);

const frase = ‘olá bem vindo ao curso’;

const resultado = frase.split (‘ ‘);
console.log(resultado);

console.log(resultado.Join(‘-’);

// slug
 ● Retorno de Funções
let gato = multiplacarSoma(4,2);
console.log(gato)

function multiplacarSoma (val1, val2){

const cat = nag(val1, val2)
return cat*2;
}

function somar(val1, val2){

return val1+val2;
}

function nag (val1, val2){

const gy= somar(val1, val2)
return gy-2;
}

// Receber uma quantidade de valores para avaliar

e uma função exibe se cada valor é par ou ímpar

exibirTipo(5);

function exibirTipo(limite){

for (let i = 1 ; i <= limite ; i++) {

let h = i%2 === 0 ? 'par':'impar';

console.log(i+" "+h)

}
}

● Exemplo Console

> prompt (‘Olá, qual é a sua cor favorita?’)

< “vermelho”
> let corFavorita = prompt (‘Olá, qual é a sua cor ‘)
<

> CorFavorita
< “vermelho”

> if (corFavorita=’vermelho’) {alert (‘Essa é minha cor também’);}

 ● DOM
● Acessando os elementos

// tag

var titulo = document.getElementsByTagName(“h1”)[0];

console.log(título);

var lis = document.getElementsByTagName(“li”);

console.log(lis.[3]);

//id

var parágrafo = document.getElementById("paragrafo");

console.log(parágrafo);

//class

var itensDaLista = document.getElementsByClassName("item");

console.log(itensDaLista);

● querySelector e querySelectorAll

//querySelectorAll
var itensjQuery = document.querySelectorAll(‘#lista li’);

console.log(itensjQuery);

var itensjQuery2 = document.querySelectorAll(‘#lista .item’);

console.log(itensjQuery2);

//querySelector

var lista = document.querySelector(‘#lista’);

console.log(lista);

var primeiralista = document.querySelector(‘ul’);

console.log (primeira lista);

var span = document.querySelector(‘#paragrafo span’);

console.log(span);

● Alterando o conteúdo

// selecionar elemento

var title = document.querySelector(‘#title’);

// innerHTML

title.innerHTML = “Testando o texto alterado!”

// textContent mais recomendado

var subtitle = document.qerrySelector(“.subtitle”);

subtitle.textContent = “Testando o textContnt

● Criando elementos
// inserindo elemento no body

1- var novoParagrafo = document.createElement(“p”)

console.log(novoPragrafo);

2- var texto = document.createTextNode(“Esse é o conteúdo do paragrafo”)

3- novoParagrafo.appendChild(texto)

console.log(novoParagrafo)

4- var body = document.querySelector(“body”);

console.log(body)

5- body.appendChild(novoParagrafo);

// inserir em um container

var container = document.getElementById(“conteiner”)

console,log(container);

var el = document.createElement(“spam”);

el.appendChild(document.createTextNode("texto do spam”);

console,log(el);

container.appendChild(el);

● Removendo elemento

// removendo o elemento filho

var container = document.querySelector(“#container”);

var p = document.querySelector(“#container p”);

container.removeChild(p);

// remover o elemento
var subtitle = document.querySelctor(“.suctitle”);

subtitle.remove();

● Adicionando elemento

// criar elemento

var el = document.createElement(“div”);

el,classList =”div-criada”;

console.log(el);

var container = document.querySlector(“#container”)

// inserindo elemento filho

container.appendChild(el);

// inserBefore - insere antes

var el2 =document,createElement(“div”);

el2.classList = “div-before”;

var el3 = document.querySelector(#container .div-before“)

console.log(el3);

container.inserBefore(el2,el3);

● Trocando elemento

//criar um elemento

var el = document.creteElement(“h3” );

el.classList = “testando-classe”;

var texto = document.createTextNode(“Este é o testo do h3”);

el.appendChild(texto);

console.log(el);

// selecionando o elemento que quero trocar

var title = document.querySelector(#title”);

console.log(title);

// selecionar o pai do el

var body = documet.querySelector(“”body”);

ou
var pai = title.parentNode;

// trocar os elemento

pai.replaceChild(el, title);

● Alterando atributos

// adicionando atributo

var title = document.querySelector (“#title”)

title.setAttribute(“class”, “testando-atributo”);

console.log(title);

var btn = document.querySelector(“#btn”);

btn.setAttribute(“disabled”,”disabled”);

var subtitle = document.querySelector(“.subtitle”)

subtitle.setAttribute(“id”, “titulo-2”);

// remover atributos
var lista = document.querySelector(“#lista”);

lista.removeAttribute(“id”);

● Adicionando CSS pelo DOM

// Seleciona o elemento

var title = document.querySelector(“#title”);

// adicionando o estilo

title.style.color = “red”;

// background-color

title.style.bakgroundColor = “yellow”;

// selecionando elemento

var subtitle = document.querySelector(“.subtitle”);

// adicionando vários estilos

subtitle.style.cssText = “color: blue; backgroundcolor: pink; font-size:50 px; ”

● Propriedades de document

// propriedades document

console.log(document.body);

console.log(document.head);

console.log(document.link[0]);

document.links[0].textContent = “Twitter”;
console.log(document.URL);

console.log(document.title);

document.title = “Aula 42”;

console.log(document.title);

● Callback functions

- Permite executar uma função depois de uma determinada ação;

function exibir(num) {
console.log(“A operação resultou em: “ + num);
}

function soma(a, b, callback){

var op = a + b;
callback(op);
}

function multiplicando(a, b, cb){

var op = a * b;
cb(op);
}

soma(2 , 2 , exibir);

multiplicando(2 , 4 , exibir);

● setTimeout e setlnterval

- Podemos com estas funções criar on software que executam depois de um tempo
ou de tempos em tempos;

- Um dos argumentos destas funções é uma callback function;

// setTimeout
console.log(“Antes do setTimeout”);

setTimeout ( function(){

console.log(“Testando o setTimeout”);

}, 2000 );

console.log(“Depois do setTimeout”);

// setInterval

setInterval(function() {

console.log(“Testando o setInterval”);

}, 1000 );

● clearTimeout e clearInterval

- Podemos por um fim em setTimeout e setInterval por meio destes dois métodos;
- Então após determinada condição os timers não serão mais executados;

// clearTimeout na prática

var x = 0;

var myTimer = setTimer(function() {

console.log(“0 x é 0”)
},1500);

x = 5;

if (x > 0) {
clearTimeout(myTimer);
console.log(“0 x passou de 0”);
}
// clearInterval na prática

var myInterval = setInterval ( function() {

console.log(“Imprimindo interval”);

}, 500 );

setTimeout ( function () {

console.log(“Não precisamos mais repetir!”);

clearInterval(myInterval);

}, 1500);

● O que são eventos ?

- Por meio de JavaScript podemos mapear algumas ações dos usuários, que
chamamos de eventos;
- como: moimento do mouse, click, mouse entrando ou saindo de um elemento,
carregamento da página e etc;

//

window.onload = function() {

console.log(“Carregou o Dom”);

var title2 = document.querySelector(‘#title’);

console.log(title2);

console.log(“carregou o JS”)

var title = document.querySelector(‘#title’);

console.log(title);

// inserir click
var btn = document.querySelector(“#btn”);

console.log(btn);

btn.addEventListener(“click”, function () {

console.log(“cliclou”);

console.log(“cliclou”);

this.style.color = “red”;

});

// click afetando outros elementos

var title = document.querySelector(“#title”);

title.addEventListener( “click”, function() {

var subtitle = document.querySelector(“.subtitle”);

subtitle.style.display = “none” ;

});

// double click

var subtitle = document.querySelector(“.subtitle”);

subtitle.addEventListener(“dblclick”, function() {

console.log(“click duplo”);

});

// Evento mouseover
var title = document.querySelector(“#title”);

title.addEventListener(“mouseover”, function() {

this.style.backgroundColor = “yellow”;
});

// Evento mouseout

title.addEventListener(“mouseout”, function() {

this.style.backgroundColor = “white”;
});

// afetar outro elemento com mouseover

var subtitle = document.querySelector(“.subtitle”);

subtitle.addEventListener(“mouseover”, function(){

var legenda = document.querySelector(“#legenda”);

legenda.classList.remove(“hide”);
});

subtitle.addEventListener(“mouseout”, function(){

var legenda = document.querySelector(“#legenda”);

legenda.classList.add(“hide”);
});

● Evento keydown e keyup

// Keydown
document.addEventListener(“keydown”, function(event) {

console.log(event.key);

if(event.key === “Enter”) {

 console.log(“Apertou Enter”);
}
});

// Keyup

document.addEventListener(“keyup”, function(e) {

if(event.key === “Enter”) {

console.log(“Soltou Enter”);
}

});