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”);
}
});