6  Lab 2: JS Exercises

This Unit’s lab focuses on building your JavaScript programming fundamentals through hands-on practice. You’ll work through a series of targeted exercises designed to reinforce the core concepts covered in this chapter.

6.1 Instructions

Let’s examine the contents of your Lab 2 folder. This lab contains multiple files to help you practice different JavaScript concepts systematically:

📂 L02
--  📄 index.html
--  📄 style.css
--  📄 ex01.js
--  📄 ex02.js
--  📄 ex03.js
--  📄 ex04.js
--  📄 ex05.js
--  📄 ex06.js
--  📄 ex07.js
--  📄 ex08.js
--  📄 ex09.js
--  📄 ex10.js
--  📄 ex11.js
--  📄 ex12.js
--  📄 bonus1.js
--  📄 bonus2.js
--  📄 bonus3.js
--  📄 bonus4.js
--  📄 bonus5.js

When you browse the files should see:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Puzzles</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <h1>Javascript Practice Exercises</h1>
        <p>To open the JavaScript console:</p>
        <ul>
            <li><strong>Chrome/Edge:</strong> Press F12 or right-click anywhere on a webpage and select "Inspect", then click the "Console" tab</li>
            <li><strong>Firefox:</strong> Press F12 or right-click and select "Inspect Element", then click "Console"</li>
            <li><strong>Safari:</strong> First enable developer tools in Safari &gt; Preferences &gt; Advanced &gt; "Show Develop menu", then press Option+Cmd+C</li>
            <li><strong>Any browser:</strong> Right-click on a webpage, select "Inspect" or "Inspect Element", then look for the "Console" tab</li>
        </ul>
    </div>

    <script src="ex01.js"></script>
    <script src="ex02.js"></script>
    <script src="ex03.js"></script>
    <script src="ex04.js"></script>
    <script src="ex05.js"></script>
    <script src="ex06.js"></script>
    <script src="ex07.js"></script>
    <script src="ex08.js"></script>
    <script src="ex09.js"></script>
    <script src="ex10.js"></script>
    <script src="ex11.js"></script>
    <script src="ex12.js"></script>
</body>
</html>
/* This is where your CSS rules would go */
body {
    font-family: "Courier New", monospace;
    margin: 25px;
    background-color: aliceblue;
}
// Note: This will print a header
console.log("%cExercise 1: Your First Variables", "font-size: 1.25rem; font-weight: bold; color:blue");

// Exercise 1: Your First Variables
//
// Goal: Get comfortable creating variables and seeing output
//
// 1. Create a variable called favoriteColor with your favorite color
// 2. Create a variable called age with any age
// 3. Create a variable called isStudent with the value true
// 4. Use console.log() to display each variable


// Expected Output:
// blue
// 22
// true

6.1.1 How to Complete the Exercises

  1. Open each JavaScript file (e.g., ex01.js) in your code editor
  2. Read the instructions provided as comments at the top of each file
  3. Write your code directly in the JavaScript file following the given instructions
  4. Save the file and refresh your webpage to see the results
  5. Check your output in the browser’s JavaScript console (not the webpage itself)

Important: Your code output will appear in the JavaScript console, not on the webpage. Make sure you have the developer tools open to see your results.

6.1.2 Exercise Format

Each exercise follows a consistent structure with clear instructions and expected output:

Instructions (as comments):

// 1. Create a variable called favoriteColor with your favorite color
// 2. Create a variable called age with any age
// 3. Create a variable called isStudent with the value true
// 4. Use console.log() to display each variable

Expected Output:

// Expected Output:
// blue
// 22
// true

6.1.3 Getting Help

Each exercise targets specific concepts from this Unit’s reading material. If you encounter difficulties:

  1. Review the relevant sections in the previous chapter
  2. Check that your syntax matches the examples provided
  3. Ensure you’re viewing the console output, not the webpage
  4. Verify that you’ve saved your changes before refreshing

Work through the exercises in order, as they build upon each other progressively. Good luck!