S01 - Atividade de Aprendizagem: Revisão de JavaScript
Visão Geral
Esta atividade é uma revisão de alguns conceitos básicos de JavaScript, sua aplicação e manipulação do DOM
(Modelo de Objeto de Documento). JavaScript é uma tecnologia web essencial no design e desenvolvimento frontend,
juntamente com HTML e CSS. Este curso exigirá a utilização de JavaScript para atingir resultados funcionais e de
desenvolvimento.
Instruções da Atividade
À medida que você trabalha nesta atividade de aprendizagem sobre JavaScript, será solicitado que você faça uma
cópia (chamada de fork) de um CodePen parcialmente concluído. A aba JS desse CodePen tem uma
série de comentários, começando na linha 22, onde você adicionará ou alterará o JavaScript para concluir as etapas
4 a 10 desta tarefa.
Qual é a marcação HTML correta para referenciar um arquivo JavaScript externo chamado app.js
localizado na pasta scripts?
Avalie Seu Conhecimento
<script src="scripts/app.js"></script>
<script src="scripts/app.js" defer></script>
Onde essa referência de script deve ficar no documento HTML?
Se você fizer referência a esse script no cabeçalho, head, do documento, deverá usar o
atributo defer, pois o script pode conter referências ao objeto do documento que precisam ser
renderizadas primeiro. O primeiro exemplo dado aqui é uma referência usada no final do documento, logo
antes da tag de fechamento </body>.
Botão Fork no CodePen
Se você ainda não criou, crie sua própria conta
CodePen. Ela é gratuita. Isso permitirá que você faça um fork do conteúdo e construa seus próprios pens
(snippets) para consulta pessoal.
Altere a saída de data fornecida para este formato: dd de mm de aaaa (por exemplo, "04 de
abril de 2024")
Avalie Seu Conhecimento
Modifique as configurações do objeto options de variáveis fornecidas.
Altere o parâmetro local de "es-ES" para "pt-br" no método
toLocaleDateString.
Substitua essa string concatenada por uma template strings (strings formatadas).
"<strong>Volume</strong>: " + volume + " litros"
Avalie Seu Conhecimento
`<strong>Volume</strong>: ${volume} litros`
Declare uma variável chamada quantidade e atribua a ela o value do elemento de
input HTML com um id de qtd usando o método querySelector.
Avalie Seu Conhecimento
let quantidade = document.querySelector('#qtd').value;
Exiba a string "Bem-vindo ao <em>nosso</em> bairro!" no primeiro
<aside> no documento.
Avalie Seu Conhecimento
document.querySelector('aside').innerHTML = 'Boas-vindas ao <em>nosso</em> bairro!';
Por que usar innerHTML em vez de textContent neste caso específico? Experimente.
É aceitável usar aspas duplas para a string que será exibida?
É aceitável usar acento grave (`) para a string que será exibida?
Exiba o valor retornado de uma função chamada obterCelsius para um elemento de entrada HTML
com um id de temp. Alimente o valor literal obterCelsius com 33 (que representa
33°F). A função obterCelsius já está incluída no código CodePen fornecido.
Avalie Seu Conhecimento
Um elemento de entrada HTML, <input>, não tem uma propriedade innerHTML
nem textContent. Em vez disso, você pode alterar a propriedade de value que é
exibida no elemento de entrada.
Selecione todos os elementos div em um documento e atribua o resultado a uma variável
const chamada divs, usando querySelectorAll. Exiba no elemento div com um id de divs no
CodePen.
Avalie Seu Conhecimento
const divs = document.querySelectorAll('div');
O NodeList resultante é uma coleção de nós do documento controlado por querySelectorAll. Ele tem um comprimento e usa indexação base zero (0,1,2,...).
Filtre um array chamado nomesdecidades para retornar
apenas nomes de cidades no array que começam com a letra "C", depois armazene o array resultante em uma
variável chamada filtroC. Exiba no elemento div no CodePen.
Avalie Seu Conhecimento
let filtroC = nomesdecidades.filter(cidade => cidade.charAt(0) === 'C');
