Variables

📚 What you'll learn

In this activity, you will:

• Declare and use variables in JavaScript
• Use console.log() to display output
• Create interactive user inputs with prompt()
• Show messages with alert()
• Link external JavaScript files to HTML
• Work with different data types (strings and booleans)

Total Time: ⏱️ 45-60 minutes

⚠️ IMPORTANT: Before You Start

⚠️ Warning DO NOT DELETE the existing files in the template:

• Package files
• Any other files you didn't create

ONLY EDIT the necessary files.

• In each exercise below, click the Stackblitz link and familiarize yourself with the interface.

💻 Demo - How to do?

Demo 1: Basic Variable Declaration

Time: ⏱️ 5 minutes

💡 Tip Alternative: You can download the source code template from Stackblitz Download Project button if you want to use your IDE.

1. Add a script to your project and link the script (just like in concept 1)
2. Declare a variable with the name myAge, with the value 15
3. Write console.log() with the message as myAge
4. Show in a new window, then press F12 to open the browser console

Demo 2: Interactive Variable Input

Time: ⏱️ 5 minutes

💡 Tip Alternative: You can download the source code template from Stackblitz Download Project button if you want to use your IDE.

1. Add a script to your project and link the script (just like in concept 1)
2. Declare a variable with the name yourAge, but the value is taken using prompt(), with the message "What is your age?"
3. Write console.log() with the message as yourAge
4. Show in a new window, then press F12 to open the browser console

💻 Steps to Create Your JavaScript Variable Projects

Exercise One: Variable Declaration and Console Output

Time: ⏱️ 10 minutes

1. Open StackBlitz and access the template:
   Exercise 1

   stackblitz-starters-q4zwghdf📋

   Open in StackBlitz
2. Create a new file called script.js in your project
3. Link the script file to your HTML with <script src="script.js"></script> before the closing </body> tag
4. In script.js, declare a variable called myName with your name as the value:
   javascript

   let myName = "Your Name Here";
   

5. Use console.log() to display the variable:
   javascript

   console.log(myName);
   

6. Open the preview and press F12 to check the console

💡 Tip Alternative: You can download the source code template from Stackblitz Download Project button if you want to use your IDE.

Exercise 2: Interactive Echo Exercise

Time: ⏱️ 10 minutes

🏔️ Scenario: Imagine you're on a mountain top, shouting a message and hearing your echo reflected back!

1. Open StackBlitz and access the template:
   Exercise 2

   stackblitz-starters-dtz7ndjp📋

   Open in StackBlitz
2. Create and link a script.js file (just like in Exercise 1)
3. Create a variable called shout:
   javascript

   let shout;
   

4. Set the value of shout using the prompt() method:
   javascript

   shout = prompt("You shouted:");
   

5. Use the alert() method to display the echo:
   javascript

   alert(shout);
   

6. Test your echo by refreshing the preview window

💡 Tip If the prompt() and alert() don't appear, refresh your website. Sometimes browsers block pop-ups, so make sure to allow them for Stackblitz.

💡 Tip Alternative: You can download the source code template from Stackblitz Download Project button if you want to use your IDE.

Exercise 3: Boolean Variables Practice

Time: ⏱️ 10 minutes

💡 Scenario: Control the lights with boolean values!

1. Open StackBlitz and access the template:
   Exercise 3

   stackblitz-starters-4xne7nhu📋

   Open in StackBlitz
2. Create and link a script.js file (just like in previous exercises)
3. Create a boolean variable called lightsOn and set it to false:
   javascript

   let lightsOn = false;
   

4. Log the current state to console:
   javascript

   console.log(lightsOn);
   

5. Change the value to true:
   javascript

   lightsOn = true;
   

6. Log the new state to console:
   javascript

   console.log(lightsOn);
   

7. Open the preview and check the console to see both values

💡 Tip Boolean values are true or false without quotes. Watch how the value changes in the console from false to true!

💡 Tip Alternative: You can download the source code template from Stackblitz Download Project button if you want to use your IDE.

Exercise 4: Variable Reassignment Exercise

Time: ⏱️ 10 minutes

❤️ Scenario: Learn about reassigning variables with a heartwarming message!

1. Open StackBlitz and access the template:
   Exercise 4

   stackblitz-starters-pjtwuurg📋

   Open in StackBlitz
2. Create and link a script.js file (just like in previous exercises)
3. Create a variable called favParent:
   javascript

   let favParent;
   

4. Set the value using prompt():
   javascript

   favParent = prompt("Who is your favourite parent?");
   

5. Reassign the variable with a new value:
   javascript

   favParent = "It doesn't matter. I love both my parents!";
   

6. Display the final message with alert():
   javascript

   alert(favParent);
   

7. Test your code and notice how the variable value changes

💡 Tip Notice how reassigning a variable completely replaces its original value. The user's input is replaced with the new message!

💡 Tip Alternative: You can download the source code template from Stackblitz Download Project button if you want to use your IDE.

✅ Required Elements

Make sure your JavaScript Variable projects include:

• Exercise 1: External script file properly linked with myName variable logged to console
• Exercise 2: Interactive prompt and alert showing echo functionality
• Exercise 3: Boolean variable demonstration showing true/false values in console
• Exercise 4: Variable reassignment showing how values can be changed

📤 Project Submission

ℹ️ Ready to submit? Make sure to test all your exercises first!

• Check that all console.log() outputs appear correctly
• Test all prompts and alerts
• Verify that your script files are properly linked

When you have completed your "Introduction to JavaScript" variable projects, submit them using the link below:

Submit Your Projects Here

🔧 Troubleshooting

Having issues? Here are common problems and solutions:

💡 Tip Script not working?

• Make sure your <script> tag is placed before the closing </body> tag
• Check that the file name in your src attribute matches exactly (including .js extension)
• Refresh the page if prompts or alerts don't appear

💡 Tip Console not showing output?

• Press F12 to open developer tools
• Click on the "Console" tab
• Make sure there are no red error messages
• Check your spelling of console.log()

Great job completing this activity! You've learned the basics of JavaScript variables, user interaction, and console output. 🎉