11.5 Programming Activity

Programming Activity

Objective:

Students will practice creating an HTML page with embedded JavaScript, declare variables using var, let, and const, and log their values using console.log(). They will also modify variable values and observe how the changes affect the output.

Task Instructions:

  1. Create an HTML file (e.g., variables.html) that contains JavaScript code to declare and log variables.

    Step-by-Step Instructions:

    1. Open your code editor and create a new file called variables.html.

    2. In the file, write the basic HTML structure:

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Variables Practice</title>
</head>
<body>
  <h1>JavaScript Variables Activity</h1>
  <p>Check the console for variable output!</p>
  
  <script>
    // Declare variables using var, let, and const
    
    // Using var
    var city = "Jeti Oguz";
    console.log("City (var): " + city);  // Outputs: City (var): New York
    
    // Using let
    let age = 25;
    console.log("Age (let): " + age);  // Outputs: Age (let): 25
    
    // Using const
    const birthYear = 1995;
    console.log("Birth Year (const): " + birthYear);  // Outputs: Birth Year (const): 1995

    // Try reassigning values to see what happens
    city = "San Francisco";
    console.log("Updated City (var): " + city);  // Outputs: Updated City (var): San Francisco

    age = 30;
    console.log("Updated Age (let): " + age);  // Outputs: Updated Age (let): 30

    // The following line will cause an error because const variables cannot be reassigned
    // birthYear = 2000;  // Uncommenting this will result in an error
  </script>
</body>
</html>

  2. Open the file in a web browser:

    • Right-click on the HTML file and open it in any modern browser (Chrome, Firefox, etc.).

    • Press F12 (or right-click and select Inspect) to open the browser's developer tools.

    • Navigate to the Console tab to see the output of the console.log() statements.

  3. Modify the variables and observe the output:

    • After viewing the initial output, experiment by changing the values of the variables in the JavaScript code.

      • Change the value of the city and age variables, and log them again to observe how their values update in the console.

      • Try uncommenting the line where const birthYear is reassigned to a new value. This will produce an error, demonstrating how const variables cannot be reassigned.

Challenge:

  • Task: Change the values of the variables and observe how they affect the output in the console.

    • After successfully running the initial code, modify the JavaScript variables in the following ways:

      1. Reassign the var and let variables with new values (e.g., var city = "Жалал-Абад" or let age = 35) and observe the changes in the console.

      2. Attempt to reassign the const variable. Observe the error message that appears in the console and discuss why it happens.

    Expected Output:

    • The var and let variables will update, while trying to reassign a const variable will cause a TypeError.

    Discussion Points:

    • After completing the challenge, discuss:

      • Why var allows redeclaration and reassignment.

      • How let allows reassignment but not redeclaration.

      • Why const does not allow reassignment or redeclaration, emphasizing the immutability of const.

Code Breakdown and Explanation:

  1. var:

    • Initially, the city variable is declared using var. The value is updated later, which is allowed with var.

    • Redeclaring a var variable is also allowed, but it can lead to unexpected results if not handled carefully.

  2. let:

    • The age variable is declared using let. This allows for updating the value (reassignment), but it cannot be redeclared within the same scope.

  3. const:

    • The birthYear variable is declared using const. This means its value cannot be changed (reassigned) later in the program, ensuring immutability.

Expected Output in the Console:

City (var): Jeti Oguz
Age (let): 25
Birth Year (const): 1995
Updated City (var): Жалал-Абад
Updated Age (let): 30
# If the const reassignment line is uncommented, the following error will appear:
TypeError: Assignment to constant variable.

Follow-up Questions for Students:

  1. What happens when you try to reassign a value to a const variable?

  2. What are the advantages of using let and const over var?

  3. Why do you think JavaScript introduced let and const when var already existed?

Expected Outcome:

Students will have hands-on experience declaring variables with var, let, and const, understand the differences between them, and learn how to use console.log() for debugging. They will also gain practical knowledge of variable reassignments and scope.

Previous11.4 Advanced console.logNext11.6 Homework Assignment

Last updated