โก MiltonMarketing.comย Powered by Rocket.net โ Managed WordPress Hosting
Approx. read time: 3.1 min.
Post: Learn more about JavaScript Operators
๐ง 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.
๐ Resources
Related Posts
About the Author: Bernard Aybout (Virii8)
