O (?) é uma interface de linguagem neutra que permite que o documento HTML seja atualizado dinamicamente.
DOM
DOM significa (?). Isso porque nosso HTML é um documento o navegador para ler ele transforma em objeto, manipulável na estrutura do JavaScript.
Document Object Model
Porque podemos digitar:
document.title > ‘Robotron 2000’
E não:
document.producao?
O title é padrão (tal como o body, head) e producao não, pois nós criamos tal método. Devemos usar document.getElementById ou class, ou queryselector!
Métodos para (?) elementos no HTML
document.getElementByID(id) - Recupera um elemento pelo ID.
document.getElementsByTagName(name) - Recupera um elemento pelo nome.
document.getElementsByClassName(name) - Recupera um elemento pelo nome da classe.
Selecionar
Propriedades e métodos para (?) elementos no HTML
element.innerHTML - Esta propriedade obtém ou altera qualquer elemento no HTML, inclusive tags.
element.innerText - Esta propriedade permite inserir textos no HTML.
element.value - Esta propriedade altera o valor de um elemento HTML
element.setAttribute(atributo, valor) - Este método altera o valor de um atributo de um elemento HTML.
Alterar/modificar
(?) e (?) elementos
document.write() - Escreve no fluxo de saída do HTML.
document.appendChild() - Adiciona um elemento HTML.
document.removeChild() - Remove um elemento HTML.
document.replaceChild() - Substitui um elemento HTML.
document.createElement() - Cria um elemento HTML.
Adicionando e excluindo
Como modifico o texto dentro da tag “p” usando o DOM?
Atenção: quero alterar texto, e não o conteúdo!
<section class="container"> <div class="trono"></div> <p id="texto">O inverno está chegando</p> </section>
document.getElementById(“texto”).innerTEXT = “O inverno passou”
Qual a forma correta de importar o arquivo JS no meu index.html?
<script src="js/main.js"></script>
ou<link src="js/main.js"></link>
E em qual parte da página importamos? E por que?
Usando script
Colocamos na última linha possível, para evitar que impeça o carregamento da página (após o main)
Como selecionamos o ID robotron utilizando o querySelector (selecionando pelo ID)?
section class=”robotron”
document.querySelector("#robotron")
Explique o código abaixo ponto a ponto:
const robotron = document.querySelector(“#robotron”)
robotron.addEventListener(“click”, dizOi)
function dizOi() {
console.log(“oi”);
}
Foi criada a constante robotron, que corresponde ao id #robotron
O robotron recebeu um addEventListener (escutador de eventos) com função click (ou seja, clicou, disparou) que dispara a função “dizOi”
A função “dizOi” dispara um console.log no nosso DOM cada vez que é clicado
O código a seguir funcionaria?
A técnica presente aqui é o (?): é um comportamento presente no JavaScript que faz com que declarações de variáveis e funções sejam “elevadas” para o topo do escopo em que são definidas.
function myFunction() {
document.querySelector(“#retorna”).innerHTML = “Confirma”;
}
const elemento = document.querySelector(“#botao”);
elemento.addEventListener(“click”, myFunction);
Sim
Hoisting (içamento)
As (?) são basicamente armazenadoras de códigos. Elas permitem que os códigos sejam “chamados” mais de uma vez.
Funções
Exemplo de função (?): ela só será disparada aqui nesse caso
robotron.addEventListener(“click”, function() {
console.log(“Cliquei no robô”)
})
Exemplo de função de (?): nova forma, funciona do mesmo da anterior
robotron.addEventListener(“click”, () => {
console.log(“Cliquei no robô”)
})
Exemplo de função (?): ela pode ser disparada em outros casos (basta chamar):
function dizOi() {
console.log(“oi”);
console.log(“Welcome to Robotron 2000 (two thousand)”);
}
Anônima
Arrow
Nominada(denominada)
What’s the difference between:
1 - const controle = document.querySelectorAll(".controle-ajuste");
2 - const controle = document.querySelector(".controle-ajuste");The querySelectorAll will choose all of the “.controle-ajuste” classes. The another one just catch the first element (with that class).
Explain this code:
const controle = document.querySelectorAll(".controle-ajuste");
controle.forEach((elemento) => {
elemento.addEventListener("click", () => {
console.log("funcionou");
})
})The “forEach” works in the array context. When we select all of the elements with “.controle-ajuste” class we create a array for each!
When we click (“addEventListener(“click”…) we start the arrow function with console.log(“funcionou”). That happens everytime we click an element with that class “.controle-ajuste”
Quando colocamos o parâmetro “evento” e pedimos que o console.log apresente ele, o que queremos saber?
controle.forEach((elemento) => {
elemento.addEventListener("click", (evento) => {
console.log(evento);
})
})Buscamos saber o que aconteceu com o clique. O evento vai trazer no console (F12) diversas informações.
Qual o nosso objetivo com o código abaixo, considerando o HTML em seguida?
const controle = document.querySelectorAll(".controle-ajuste");
controle.forEach((elemento) => {
elemento.addEventListener("click", (evento) => {
console.log(evento.target.textContent);
})
})<section class="equipamentos">
<form action="" class="montador">
<div class="box montador-conteudo">
<div class="peca">
<label for="" class="peca-titulo">Braços</label>
<div class="controle">
<buttom class="controle-ajuste" id="subtrair">-</buttom>
<input type="text" class="controle-contador" value="00" id="braco">
<buttom class="controle-ajuste" id="somar">+</buttom>
</div>
</div> (...)Ao clicar, quero que exiba o conteúdo textual (que é “+” ou “-“) do target (buttom). Ao clicarmos o console (F12) vai disparar o output + ou -
Como o código a seguir funciona?
Para que serve o data attributes?
<div class="peca">
<label for="" class="peca-titulo">Braços</label>
<div class="controle">
<buttom class="controle-ajuste" data-controle="-">-</buttom>
<input type="text" class="controle-contador" value="00" data-contador id="braco">
<buttom class="controle-ajuste" data-controle="+">+</buttom>
</div>
</div>const controle = document.querySelectorAll("[data-controle]");
controle.forEach((elemento) => {
elemento.addEventListener("click", (evento) => {
manipulaDados(evento.target.dataset.controle, evento.target.parentNode);
})
})
function manipulaDados(operacao, controle) {
const peca = controle.querySelector("[data-contador]")
console.log(peca)
if(operacao === "+") {
peca.value = parseInt(peca.value) + 1;
} else if (peca.value > 0){
peca.value = parseInt(peca.value) - 1;
}
}
O data attributes serve para desvincular o código JS do HTML, são utilizados para guardar valores em elementos HTML.
Nos braços, eu coloco “data-“ que armazenará + ou -.
No JS eu crio a constante com querySelecttorAll selecionando todos os data-controle.
Para cada data-controle tenho o gatilho eventListener de clique, que vai buscar (target) o “dataset” do meu controle e o nódulo pai e assim em diante.
Data-attributes não devem ser utilizados para dados visíveis, pois tecnologias de acessibilidade podem não identificar seus valores.
Como faço para pegar (no JS) o atributo data do HTML abaixo?
<h1>Lista de tintas:</h1>
<ul id="lista">
<li data-cor="laranja" data-tipo="tinta-exterior" onclick="mudaCores(this)" class="item">Tinta laranja</li>
<li data-cor="vermelho" data-tipo="tinta-interior" onclick="mudaCores(this)" class="item">Tinta vermelha</li>
</ul>Código JS
function mudaCores(elementos){
var cores = elementos.xxxxxxxx("[data-cor]");
var tipoElemento = elementos.xxxxxxxx("[data-tipo]");
}function mudaCores(elementos){
var cores = elementos.getAttribute("[data-cor]");
var tipoElemento = elementos.getAttribute("[data-tipo]");
}Observe o código.
Como se classificam “cor” e tipo?
O código JS funcionaria?
<h1>Lista de tintas:</h1>
<ul id="lista">
<li cor="laranja" tipo="tinta" onclick="mudaCores(this)" class="item">Tinta laranja</li>
<li cor="vermelho" tipo="tinta" onclick="mudaCores(this)" class="item">Tinta vermelha</li>
</ul>JS
function mudaCores(elementos){
var cores = elementos.getAttribute("[cor]");
var tipoElemento = elementos.getAttribute("[tipo]");
}Sim, está usando data attribute personalizado. O prefixo data- não é obrigatório.
1 - Como acesso o atributo “autor” do segundo objeto da lista “livros” (console.log)?
2 - Como altero o atributo “genero” do segundo objeto da lista para “Ficção”?
3 - Como acrescento o atributo “estoque” do segundo objeto da lista para “10”?
4 - Como eu deleto o atributo “editora” do segundo objeto da lista?
var livros = [
{titulo: "Cangaceiro JavaScript",
autor: "Flávio Almeida",
genero: "Front-end",
editora: "Casa do código",
preco: 31.92},
{titulo: "Introdução e boas práticas em UX Design",
autor: "Fabricio Teixeira",
genero: "UX & UI",
editora: "Casa do código",
preco: 31.92},
{titulo: "Scrum",
autor: "Rafael Sabbagh",
genero: "Métodos Ágeis",
editora: "Casa do código",
preco: 31.92},
]1 - console.log(livros[1].autor)
2 - livros[1].genero = “Ficção”
3 - livros[1].estoque = 10
4 - delete livros[1].editora
Qual será o retorno do código?
var livros = {
titulo: “Cangaceiro JavaScript”,
autor: “Flávio Almeida”,
genero: “Front-end”,
editora: “Casa do código”,
preco: 31.92,
chamaLivro: function() {
return this.autor;
}
}
console.log(‘O autor do livro se chama ‘ + livros.chamaLivro())
O autor do livro se chama Flávio Almeida
O que a tag “controls” permite?
<audio></audio>
Permite tocar, alterar volume, avançar e recuar áudio (player de áudio)
Como se chama esse recurso com cifrão?
Aqui está um nome comum: ${nome}
Template string
