🧠 Learning Objectives
By the end of this lesson, learners will be able to:
-
Understand what variables and operators are in JavaScript.
-
Use assignment and arithmetic operators.
-
Write simple JavaScript inside an HTML file.
-
Display variable values using the
alert()function.
📋 Section 1: What are Variables?
Variables are containers used to store data such as numbers or strings (text).
Example
In the example:
-
myAgestores a number. -
myNamestores a string (text), which must be in double quotes.
🧮 Section 2: Assignment Operator (=)
The equals sign (=) assigns a value to a variable.
Example 1 (Number):
Example 2 (Text/String):
➕ Section 3: Arithmetic Operators
JavaScript allows you to perform basic math using arithmetic operators.
| Operator | Description | Example | Result |
|---|---|---|---|
+ |
Addition | var x = 2 + 3; |
5 |
- |
Subtraction | var y = 7 - 2; |
5 |
Example
💻 Section 4: HTML + JavaScript Example
Let’s create a simple HTML page that runs JavaScript using <script> tags.
Step-by-Step
-
Open any code editor (e.g., VS Code, Notepad++).
-
Create a file called
variables.html.
Code Example
When you open this file in a browser, it will display a popup with the value 300.
🔘 Section 5: Adding a Button to Run JavaScript
Create a button that triggers a script:
🧪 Final Assignment
Create your own interactive HTML page that:
-
Defines two numeric variables.
-
Adds them together using the
+operator. -
Shows the result in an alert box.
-
Bonus: Create a button that shows a message when clicked.
📝 Assignment Template
Create a file called assignment.html. Use this outline:
✅ Answer Key
Final Summary: Understanding JavaScript Variables and Operators
In this introductory JavaScript lesson, we explored one of the most fundamental aspects of programming—variables and operators. These building blocks are essential to nearly every piece of logic written in JavaScript, forming the foundation for creating dynamic and interactive web applications.
We began by understanding variables, which act as storage containers for different types of data like numbers or words. A variable must be given a unique name and can be assigned values using the assignment operator, represented by the equals sign (=). This operator doesn’t compare values like in math—it assigns the value on the right to the variable on the left.
Next, we introduced arithmetic operators, which are used to perform basic mathematical operations such as addition and subtraction. These tools allow developers to calculate and manipulate numeric values dynamically—whether you’re tracking user input, adjusting a product inventory count, or computing the total cost in a shopping cart.
To demonstrate real-world use, we created a simple HTML page and embedded JavaScript using the <script> tag. We then used a built-in browser function called alert to display the value of a variable, confirming that the code executed successfully. This not only taught us how variables work behind the scenes, but also how to present that data to users through pop-up alerts.
For those ready to go a step further, we added an interactive button that runs a JavaScript function when clicked—showing how HTML and JavaScript work together to bring websites to life.
Whether you’re building a simple calculator, validating user input, or designing a complex application, mastering variables and operators is a critical first step. They empower your scripts to be flexible, responsive, and interactive—key qualities in today’s modern web development landscape.
