This module is a review of some basic JavaScript concepts, application, and DOM (Document
Object Model) manipulation. JavaScript is a core web technology in web frontend design and
development along with HTML and CSS. This course will require the application of JavaScript to
meet
functional and developmental specifications.
(The Mozilla Development Network) is the official, reference documentation source for the
course. Search results from MDN are recommended as the first reference to consider when
seeking references and examples.
What is the difference between 📃 var,
let, and const declarations of variables in JavaScript?
Why should we consider declaring variables with
1️⃣const, and then 2️⃣let, and avoid using var?
What does variable scope mean?
Watch 🎦 Demonstration: JavaScript
Behavior - A basic demonstration of manipulating the HTML document with JavaScript by
placing the
current date, formatted into a footer.
It is recommended that you watch this and all videos in 1.5x or 2x
speed.
What is the correct HTML markup to reference an external JavaScript file named app.js located
in the scripts folder?
Answer
<script src="scripts/app.js"></script>
Where should this script reference be located in the HTML document?
Answer
Even though we could reference this script in the head and in other places within the
HTML document, we reference the script tag right before the closing
</body> tag as a standard in this course in order to allow the HTML
to load first for performance reasons and to avoid run-time errors.
Screenshot of Fork button in CodePen
Create your own, free CodePen account, if you
have not already done so, in order for you to
be able to fork content and build your own pens (code snippets) for your own reference.
Declare a variable named quantity and assign it the value of the HTML input
element with an id of q using the querySelector method.
Answer
let quantity = document.querySelector('#q').value;
Output this string, "Welcome to <mark>our</mark> neighborhood!",
to the first <aside> in the document.
Answer
document.querySelector('aside').innerHTML = 'Welcome to <em>our</em> neighborhood!';
Why use innerHTML versus textContent in this specific case? Try It. Is is OK to use
double quotes
to contain the output string? 👍🏽 Is it OK to use backticks (`) to contain the
output
string? 👍🏽
Output the returned value of a function named getCelsius to an HTML input
element with an id of temp. Feed the getCelsius literal value of 33 (which
represents 33°F). The getCelsius function is already included in the provided CodePen
code.
Answer
An HTML input element does not have an innerHTML nor textContent
property. Instead we can change the value property which is displayed in
the input element.
💪🏽Stretch
Format the output to include only one decimal place and label it with
the Celsius symbol, e.g., "0.6°C".
Select all the div elements in a document and assign the result to a const variable named
divs using querySelectorAll. Output to the provided
div element with an id of divs in the CodePen.
Answer
const divs = document.querySelectorAll('div');
The resulting NodeList is a collection of nodes from the document driven by querySelectorAll. It has a length and is zero-based
indexed.
💪🏽Stretch
Format the output like this (assuming the result was 10): "There are 10
div elements on the page."
Filter an array named citynames to return
only city names in the array that start with the letter "C" and store the resulting array
into a variable named filterC. Output to the provided div element
with an id of c-names
in the CodePen.
Answer
let filterC = citynames.filter(city => city.charAt(0) === 'C');
Example Solution
⚙️ CodePen with
expanded output examples.
Submission
Be sure to save your changes and record the CodePen URL. You can always pull it up again
from your CodePen account and listing of Pens.
