Exercises (Part 1): JavaScript for the Web

Part I

Exercise 0

Note: JavaScript normally loads and runs when a web page loads. All of our JavaScript code will go in 👉 script.js 👈, a file that has already been setup to load when our project loads. In your code editor, re-open script.js if you closed it. Starting on a new/blank line below the code that's already written:

1. Use the console object's log() method, console.log("..."), to log the message "Hello world!".
2. Open the console at the bottom of the preview pane and verify that your message was logged.
3. Modify your code from step 1 to log a new message of your choosing!

console.log('some message');

Exercise 1

document.querySelector('someSelector');

For this exercise, you will use console.log() and document.querySelector()☝ to select specific DOM elements and read their properties.

1. Select the main element. What is the value of its childElementCount property?
2. Select an element with the dark class. What is the value of its id property?
3. Select a p (paragraph) element that's inside an element with ID relaxing-images. What is the value of its innerText property?

Selector hints:

• Class selector: ._dotclassName
• Element selector: #_hashelementId

Exercise 2

Pre-made CSS classes to use: picked, hidden, fun.

document.querySelector('someSelector').classList;

An element's classList property contains a list of its classes.

• add('classToAdd')— adds classToAdd to the classList. If it is already there, nothing happens
• remove('classToRemove')— removes classToRemove from the classList. If it isn't there, nothing happens.
• toggle('classToToggle')— if classToToggle is in the classList, it is removed; if classToToggle isn't there, it is added.

document.querySelector('someSelector').classList.add('classToAdd');
document.querySelector('someSelector').classList.remove('classToRemove');
document.querySelector('someSelector').classList.toggle('classToToggle');

Exercise 3

Pre-made CSS classes to use: hidden, transparent, fun.

• Variables are created (declared) using the let keyword, followed by another word which beocmes the variable's name.
• Variables are start with an undefined value and are assigned values using the assignment operator, =.
• Using a single statement to both declare a variable and assign it a value is called initializing:

let newVariable = valueOfVariable;

Exercise 4

An array is an ordered collection of data. A NodeList isn't an array, but it behaves similarly enough for our purposes.

• document.querySelectorAll('someSelector')
• myArray[index]— retrieves an element from myArray in the position specified specified by index inside the square brackets ([])

Exercise 5

Pre-made CSS classes: message, reveal.

for loop syntax to loop through an array or list (e.g., myArray):

for (let index = 0; index < myArray.length; index = index + 1) {
 // code to repeat
}

In this exercise, we will use a for loop to reveal a HIDDEN MESSAGE on this web page! First, comment out any code from previous exercises. Now:

1. The words of the HIDDEN MESSAGE are spread through the page's section elements, but they all have the message class.
2. Use let to declare a variable named words.
3. Assign words the result of a querySelectorAll() that would match all the hidden words.
4. Using a for loop, add() the reveal class to each element in your words variable.
5. Read the HIDDEN MESSAGE! : )