This activity 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.
As you work through this JavaScript Learning Activity assignment, you will be asked (in step 3) to make a copy
(called a fork) of a partially completed CodePen. The JS tab of this CodePen has a series of
comments starting around line 22 where you will add or alter JavaScript to finish steps 4 through 10 of this
assignment. It's a lot of fun to try and figure them out on your own but if you get really stuck, there are "Check
Your Understanding" hints to help you out.
What is the correct HTML markup to reference an external JavaScript file named app.js located
in the scripts folder?
Check Your Understanding
<script src="scripts/app.js"></script>
<script src="scripts/app.js" defer></script>
Where should this script reference be located in the HTML document?
If we reference this script in the head of the document, we should use the defer attribute
given that the script may contain references to the document object that need to be rendered first. The
first example given here is a reference that is used at the end of the document, right
before the closing
</body> tag.
Figure 1: Fork button in CodePen
If you haven't already, establish your own CodePen
account at no cost. This will enable you to fork content and construct your own pens (code snippets) for
personal 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.
Check Your Understanding
let quantity = document.querySelector('#q').value;
Output this string, "Welcome to <mark>our</mark> neighborhood!",
to the first <aside> in the document.
Check Your Understanding
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.
Check Your Understanding
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.
Seek Mastery
Full credit consideration or "A" level work is defined as representing outstanding understanding,
application, and integration of subject material and extensive evidence of original thinking, skillful use
of concepts, and ability to analyze and solve complex problems. Students should demonstrate diligent
application of Learning Model principles, including initiative in serving other students.
Format the output to include only one decimal place and label it with
an appropriate temperature symbol, e.g., "0.6°C" for Celsius.
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.
Check Your Understanding
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.
Seek Mastery
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.
Check Your Understanding
let filterC = citynames.filter(city => city.charAt(0) === 'C');
Example SolutionCodePen 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.
