Applied JavaScript
Overview
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.
Prepare
- Read through and reference: π JavaScript - MDN
(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.
- Reference Only: π JavaScript Notes & Reference - wesbos.com
- What is the π The Document Object Model (DOM)?
- 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 usingvar
?
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.
- Watch π¦ Debugging JavaScript - Chrome DevTools 101
Activity Instructions
- What is the correct HTML markup to reference an external JavaScript file named
app.js
located in thescripts
folder?Answer
Where should this script reference be located in the HTML document?<script src="scripts/app.js"></script>
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. - 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.
- Fork (copy) this βοΈ CodePen.
- In your forked Pen, change the given date output to this format:
mon dd, year (for example, Apr 04, 2024)
Hints
- Modify the given variable
options
object settings. - Change the locale parameter from
"en-UK"
to"en-US"
in thetoLocaleDateString
method.
- Modify the given variable
- Replace this concatenated string using a template literal.
"<strong>Volume</strong>: " + volume + " liters"
Answer
`<strong>Volume</strong>: ${volume} liters`
- Declare a variable named
quantity
and assign it the value of the HTML input element with an id ofq
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
Why use innerHTML versus textContent in this specific case? Try It.document.querySelector('aside').innerHTML = 'Welcome to <em>our</em> neighborhood!';
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 oftemp
. Feed the getCelsius literal value of 33 (which represents 33°F). The getCelsius function is already included in the provided CodePen code.Answer
document.querySelector('#temp').value = getCelsius(33);
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 provideddiv
element with an id ofdivs
in the CodePen.Answer
The resulting NodeList is a collection of nodes from the document driven by querySelectorAll. It has a length and is zero-based indexed.const divs = document.querySelectorAll('div');
πͺπ½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 namedfilterC
. Output to the provideddiv
element with an id ofc-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.
- There is no submission requirement at this point.