Manipulando o DOM (JavaScript + Lógica de programação)

Question 1

Math

Answer 1

Operações matemáticas

console.log(Math.pow(5,3))
125 (Elevado)

Quando lidamos com circunferência
console.log(Math.PI)

Question 2

Date

Answer 2

Manipulação de data

let myBirthaday = new Date(2001, 7, 20)
console.log(myBirthday)

Question 3

O que é evento

Answer 3

São ações que ocorrem no sistema
“Pode ocorrer por uma ação do usuário: Um clique ou uma mudança de um valor no campo.

Ou simplesmente como um fluxo do próprio sistema: Como a página conclui seu carregamento.

Question 4

HTML

onclick
onfocus
onblur
onchange
onmouseover

Answer 4

JAVASCRIPT

function clickMe() {
console.log(“Fui clicado”)
}

function focusMe() {
console.log(“Fui focado!”)
}

function blurMe() {
console.log(“Fui desfocado!”)
}

function changeMe() {
console.log(“Fui alterado!”)
}

function overMe() {
console.log(“Mouse aqui”)
}

Question 5

Introdução ao DOM

Answer 5

Significa: Document object Model.
Ele representa os objetos da pagina HTMl em forma de arvore.

Question 6

selecionando elementos no DOM

function show() {

}

acrescente .value para ver o valor do elemento.

Answer 6

seleciona os elementos pelo id
let element = document.getElementById(“name”)

seleciona os elementos que foram atribuídos no name.
let element =document.getElementsByName(“phone”)

Seleciona todos os campos input de nome phone que estão dentro da div phones.
let element = document.querySelectorAll(“div#phones input[name=’phone’]”)

Seleciona todos os elementos tipo input.
let element = document.getElementsByTagName(“input”)

Question 7

Manipulando o Dom
(Gera nova lista de telefone)

Answer 7

HTML

<button> Novo telefone</button>
<button>Imprimir telefones</button>

<br>

<form id="phones">
    <p>
        <label>Telefone 1:</label>
        <input type="text" name="phone">
    </p>
</form> ------------------------------------------------------------------------

JAVASCRIPT

function addNewPhone() {
const phoneForm = document.querySelector(“form#phones”)
const newPhone = phoneForm.children[0].cloneNode(true)
const phonePosition = phoneForm.children.length + 1
newPhone.querySelector(“label”).innerText = “Telefone “ + phonePosition + “: “
phoneForm.appendChild(newPhone)
console.log(phoneForm.children)
}

function printPhones() {
let message = “”
const phones = document.querySelectorAll(“input[name=’phone’]”)
phones.forEach((phone, index) =>{
message += “Telefones “ + (index + 1) + “:” + phone.value + “\n”
})

alert(message) }

/*
querySelect pega o primeiro elemento da posição 0
queryselectAll seleciona a lista inteira
cloneNode clona(no caso o p) (deep) true clona todos os filhos do p, false clona somente o p
criando um filho para um elemento já existente
*/

Question 8

Enviando o DOM para a função

Answer 8

HTML

.<form>
.<p>
.<label>Nome:</label>
.<input type=”text” name=”first-name” .onchange=”sayMyFirstName(this)”>
.</p>

   .<p>
        .<label>SobreNome:</label>
        .<input type="text" name="first-name" .onchange="sayMyLastName()">
    .</p>
.</form>

JavaScript

function sayMyFirstName(element) {
alert(“Meu primeiro nome é “ + element.value)
}

function sayMyLastName() {
console.log(event)
alert(“Meu ultimo nome é “ + event.target.value)

}

Question 9

Criando um botão em que você clica e aparece mais botões.
createElement(“ “) e innerHTML e appendChild( )

Answer 9

HTML
<button>clique</button>

JAVASCRIPT

function fun() {
const btn = document.createElement(“button”);
btn.innerHTML = “cliqueMe”;
document.body.appendChild(btn)
}

Question 10

Criando uma div com class com filhos dentro.

deve ter um elemento no HTML.

Answer 10

const elemento = document.createElement(“div”)

elemento.setAttribute(“class”, “container”)

const titulo = document.createElement(“h1”)

const apresentacao = document.createTextNode(“Criando uma div com class e dentro possui h1 e um paragrafo”)

titulo.appendChild(apresentacao)

const paragrafo = document.createElement(“p”)

const texto = document.createTextNode(“Aprendedo a mexer com JAvaScript”)

paragrafo.appendChild(texto)

elemento.appendChild(titulo)
elemento.appendChild(paragrafo)

const secao = document.getElementsByTagName(“section”)[0]

secao.appendChild(elemento)

Question 11

Criar um elemento filho <li> e um nó de texto e colocar dentro da ul.

Answer 11

//Criar um elemento <li> e um nó de texto.

/*
caso der appendchild é necessario escrever defer dentro do script do js no html.
Ou colocar o script dentro do body.

var elemento = document.createElement(“li”);

var texto = document.createTextNode(“Item da lista adicionado”);

elemento.appendChild(texto);

// Recuperando o elemento lista e
// anexando o elemento <li> no final da lista

var lista = document.getElementsByTagName(“ul”)[0];

lista.appendChild(elemento);

*/

// InserBefore

var lista = document.getElementsByTagName(“ul”)[0];
var itens = document.getElementsByTagName(“li”);

// Criando o elemento

var elemento = document.createElement(“li”);

elemento.textContent = “Outro item”;

// Inserindo valor na posição especifica

lista.insertBefore(elemento, itens[1])

// removechild

lista.removeChild(itens[4])

Question 12

Registration

Answer 12

HTML
.<h1>Registração</h1>

.<form>
.<p>
. <label>Area</label>.
<input></input>.
.</p>

.<button oncl.ick="saveI.nfo()" .type="butto.n">.Salvar</button>. .</form> .<ul id="resultado"></ul>

JAVASCRIPT

function saveInfo() {
const area = document.querySelector(“input[name=’area’]”).value
const numero = document.querySelector(“input[name=’numero’]”).value
const bairro = document.querySelector(“input[name=’bairro’]”).value
const cidade = document.querySelector(“input[name=’cidade’]”).value

let newValue = document.createElement("li")
newValue.innerText = area + "m² " + "  " + "Numero: " + numero + " (" + bairro + "-" + cidade + ") " + " "

let removeButton = document.createElement("button")
removeButton.innerText = "Remover"
removeButton.type = "button"
removeButton.setAttribute("onclick", "removeButton(this)")

newValue.appendChild(removeButton)

document.getElementById("resultado").appendChild(newValue) }

function removeButton(button) {
var liToRemove = button.parentNode
document.getElementById(“resultado”).removeChild(liToRemove)

Question 13

Seletores para formulário

Answer 13

HTML

.<form>
.<p>
. <label>Nome: </label>
. <input></input>
.</p>

.    <p>
   .     <label>Cor primária: </label>
     .   <select name="color">
            <option value="yellow">Amarelo</option>
            <option value="blue">Azul</option>
            <option value="red">Vermelho</option>
        </select>
    </p>

    <p>
        <label>Gosta de programar? </label>
        <input type="radio" value="Sim" name="like" />Sim 
        <input type="radio" value="Não" name="like" />Não
    </p>

    <p>
        <label>Conhecimentos em programação web: </label><br />

        <input type="checkbox" value="HTML" name="developer-options" />HTML

        <input type="checkbox" value="Javascript" name="developer-options" />Javascript

        <input type="checkbox" value="CSS" name="developer-options" />CSS

        <input type="checkbox" value="Express" name="developer-options" />Express
    </p>

    <button type="button" onclick="showInfo()">Mostrar informações</button>
</form>

JAVASCRIPT

function showInfo() {
let name = document.querySelector(“input[name=’name’]”).value

let favoriteColor = document.querySelector("select[name='color'] option:checked").text

let likeProgramming = document.querySelector("input[name='like']:checked").value

let developOption = document.querySelectorAll("input[name='developer-options']:checked")

let optionValue = []
developOption.forEach(element => {optionValue.push(element.value) })

let optionsChecked = optionValue.join(",")
alert("Nome: " + name + "\nCor primária: " + favoriteColor + "\nGosta de programar: " + likeProgramming +
"\nConhecimento em quais linguagens: " + optionsChecked)     }

// O método join une todos os elementos de uma matriz em uma string e retorna esta string.
//para o select e option aparecer no alert, dever ter option:checked e).text

Question 14

Evento para formulário
(reinicia)

Answer 14

HTML

.<form onsubmit="save()">
.<p>
.<label>Nome: </label>
.<input></input>
</p>

    <p>
      <label>Programa em:</label>
      .<select name="programming-lang">
       .<option value="Javascript">Javascript</option>
        <option value="Ruby">Ruby</option>
        .select>
    </p>

    .<button type="submit">Salvar</button>
  </form>

JAVASCRIPT

function save() {
.event.preventDefault()
let name = document.querySelector(“input[name=’name’]”).value
let programmingLang = document.querySelector(“select[name=’programming-lang’]”).value

alert ("Seu nome é: " + name + "\nVocê programa em: " + programmingLang) }

Question 15

Manipulando estilos

Answer 15

bg {

HTML

.<div id="bg">
.<h1 id="h1">
.Novidade da semana
.</h1>
.</div>

.<button type="button" onclick="seatBgColor()">Fundo azul</button>

.<button type="button" onclick="seatTransparent()">Fundo transparente</button>

.<button type="button" onclick="seatLetterColorRed()">Letra vermelha</button>

.<button type="button" onclick="seatLetterRemove()">Letra normal</button>

CSS

width: 30%;
height: 70px;
background-color: white;
border: 2px solid black;
margin-bottom: 40px; }

color: red; }

JAVASCRIPT

function seatBgColor() {
let element = document.getElementById(“bg”)
element.style.backgroundColor = “blue”
}

function seatTransparent() {
document.getElementById(“bg”).style.backgroundColor = “transparent”
}

function seatLetterColorRed() {
let element = document.getElementById(“h1”)
element.classList.add(“red-color”)
}

function seatLetterRemove() {
let element = document.getElementById(“h1”)
element.classList.remove(“red-color”)
}

Question 16

Manipulando atributos

Answer 16

HTML

.<p>
.<select>
.<option>Habilitado</option>
<option>Disabilitado</option>
.</select>
.</p>

. <p>
. <label>Algum texto:</label>
.<input></input>
.</p>

<p></p>

JAVASCRIPT

function VerefyEnable() {
let selectValue = document.querySelector(“select”).value
if(selectValue === “disabled”){
document.querySelector(“input[name=’some-text’]”).disabled = true
let pElement = document.getElementById(“message”)
pElement.innerHTML = “disabilitado”
pElement.style.color = “white”
pElement.style.backgroundColor = “red”

}else {
    document.querySelector("input[name='some-text']").disabled = false
    let pElement = document.getElementById("message")
    pElement.innerHTML = ""
    pElement.style.color = "black"
    pElement.style.backgroundColor = "transparent"
} }