Javascript in the browser

Question 1

Cite um exemplo de programa que a partir de uma pasta irá gerar um servidor para que seja possível acessar os arquivos a partir do navegador?

Answer 1

npm install -g live-server

//Para rodar, usar “live-server “

Question 2

Como selecionar um parágrafo do html?

Answer 2

const p = document.querySelector('p')
//"querySelector" retorna o primeiro 'p' encontrado

Question 3

Como remover um parágrafo?

Answer 3

//Primeiro seleciona o elemento 'p'
const p = document.querySelector('p')
//Então chamar o método "remove"
p.remove()

Question 4

Como selecionar todos os parágrafos de um documento html?

Answer 4

const p = document.querySelectorAll('p')
//Um Array é retornado, então é possível iterar usando método forEach

Question 5

Como obter o conteúdo em texto de uma tag?

Answer 5

const p = document.querySelector('p')
p.textContent
//É uma propriedade e não um método

Question 6

Como criar um novo elemento, modificar o conteúdo e adicionar no DOM?

Answer 6

const p = document.createElement(‘p’)

p. textContent = ‘teste’
document. querySelector(‘body’).appendChild( p )

Question 7

Como adicionar um event listener?

Answer 7

const p = document.querySelector('button').addEventListener('click',
    function( e ) { 
    //O "e" é o evento que é enviado para a função. É possível obter várias informações a partir do evento.
    e.target.textContent = 'Novo nome botão'
    //Isso modifica o label do botão

Question 8

Como selecionar um elemento pelo id?

Answer 8

document.querySelector(‘#id’)

Question 9

Como selecionar elementos pela classe?

Answer 9

document.querySelector(.nome-da-classe)

Question 10

Como obter o texto de um elemento input?

Answer 10

const p = document.querySelector('input').addEventListener('input',
    function( e ) { 
    e.target.value
})
//O evento "input" é chamado cada vez que o conteúdo do "input" for alterado

Question 11

Como limpar os elementos filhos de uma div?

Answer 11

Usando a propriedade “innerHTML”

documento.querySelector(#notes).innerHTML = ‘’

Question 12

Como obter os dados de um input que está dentro de um form?

Answer 12

O input dentro do form deve conter o atributo “name”.

//Para obter o valor usa-se:
document.querySelector(‘#id_form’).addEventListener(‘submit’, function(e) {
e.preventDefault( )
e.target.elements.nomeCamelCase.value
})

Question 13

Como definir um checkbox com label?

Answer 13

Label do checkbox

//O bom de usar este formato é que dá pra clicar na parte do label que irá selecionar o checkbox

Question 14

Como obter o valor de um checkbox?

Answer 14

Adicionar um listener do tipo “change”.

Obter o valor através de:
e.target.checked

Question 15

Como definir um menu dropdown em html?

Answer 15

Opção A
Opção B
Opção C

Question 16

Qual tipo de evento se usa com menu dropdown?

Answer 16

Evento “change”. Igual ao evento do checkbox

Question 17

Como obter o valor de um menu dropdown?

Answer 17

Adicionar um listener do tipo “change”.

Obter o valor através de:
e.target.value