Front end 3 Flashcards
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”
