Skip to content

1.2 Variables

Some practice

Let's create a JavaScript pop-up with a message containing your name. Add the following to the script.js:

alert('Your Name here');

Open index.html in the browser. A pop-up with your name shows up. My name is Nawras so my alert would look like this:

alert('Nawras');

My friend, Ali, asked me to display his name in a pop-up as well, so I changed the pop-up message to include his name:

alert('Ali');

Great! my other friend, Ola, wanted me to display her name as well, so I wrote in my script.js:

alert('Ola');

This message changing can go forever, instead I can use a variable to make my life easier.

What is a variable?

A variable is a container of data. We can put the name in a container, and call it whenever we need it. JavaScript variables are declared with the word var:

var name;

var name means that let's create a new container of data with a name name. The variable name has no value. Let's put a value in this container.

var name = "Nawras";

We use the equal sign to give the variable a value. The equal sign is also called the assignment operator because it assigns a value to the variable.

Notice that we enclosed the name value Nawras in double quotations "". We also can use single quotation marks ''. Let's try it:

var name = 'Nawras';

How do I know whether it works or not?

You are right, we can use alert again.

var name = "Nawras";
alert(name);

Notice that now we did not use the name directly in the alert message. However, we used the variable name name. Save the file, and open index.html in the browser. A pop-up shows up with the value Nawras. Let's use single quotations now:

var name = 'Nawras';
alert(name);

The same result will be displayed in the pop-up.

Alerts are ugly

Alerts are ugly and annoying. Let's use console logging instead, how does it work?

var name = "Nawras";
console.log(name);

console.log("") works the very same way as alert does. It displays the message you provide, however, it displays the message in the console.

  1. Right-click anywhere on the web page index.html in the browser.

  2. Select inspect.

  3. Select the console tab.

  4. Nawras is displayed. Great!

Exercises

Let's do some practice. Okay?! Read the tasks attentively and try to do them on your own.

Task 1: Write a JavaScript Program that displays a greeting message in the console. Example: "Welcome to my world".

console.log("Welcome to my world!");

Well done!

Task 2: Change the message in Task 1 to "Welcome to our world!"

console.log("Welcome to our world!");

Okay! Good!

Task 3: Display the message "Welcome to our world!" 3 times.

console.log("Welcome to our world!");
console.log("Welcome to our world!");
console.log("Welcome to our world!");

Task 4: Now change to message back to "Welcome to my world!" and repeat it 3 times. Hint: Write less code!

var message = "Welcome to my world!";
console.log(message);
console.log(message);
console.log(message);

Task 5: Change the message to "This is my beautiful world", and repeat it 3 times.

var message = "This is my beautiful world";
console.log(message);
console.log(message);
console.log(message);

Great! We did not need to change the message 3 times. We only changed it in the variable once. Then, we called the variable name 3 times. This is the advantage of the variables.

Task 6: Display the number 5 in the console.

console.log("5");

Task 7: Add 7 to the number 5. Display the result in the console.

var num = 5 + 7;
console.log(num);

Notice that we created a variable that contains the value 5 plus 7. Then, we logged the num variable in the console (num=12).

Task 8: Display the result of 10-7 in the console.

var num = 10 - 7;
console.log(num);

In this case, num has a value of 3.

Task 9: Display the result of 5 multiplied by 10 in the console.

var num = 5 * 10;
console.log(num);

We used the operator * for the multiplication. The result will be 50.

Task 11: Divide 100 by 20 and display the result in the console.

var num = 100/20;
console.log(num);

We used the operator / for the division. The result will be 5. Well done!

Project: Unit Converter

Let's build a converter! What is a converter? A converter converts a number from one unit to another. For example, to convert 5 kilograms to grams, we need to use a KG to G converter. How does it work?

Well, we know that 1 kilogram is equal to 1000 grams, right? What if we have 5 kilograms, how many grams are 5 kilograms? You would say 5kg * 1000, which indeed is equal to 5000 grams. Let's implement this in JavaScript code.

Task 1: Convert 5 Kilograms to grams. Display the result in the console.

console.log(5 * 1000);

That is right! You also can save the value of kilograms in a variable:

var kilograms = 5;
console.log(kilograms * 1000);

That is also right! You can save the value of resulting grams in a variable:

var kilograms = 5;
var grams = kilograms * 1000;
console.log(grams);

How does this code work?

  1. The JavaScript engine reads the code line by line.

  2. It creates a variable named kilograms and assigns 5 to it.

  3. It creates a variable named grams and assigns the value of kilograms variable multiplied by 1000 to it. So the variable grams has a value of 5000 now.

  4. It displays the value of the variable grams, which is 5000, in the console.

Great! We created KG to G converter. Let's try to convert 10 kilograms to grams using the same procedure.

var kilograms = 10;
var grams = kilograms * 1000;
console.log(grams);

We will get 10000 in the console.

Task 2: Convert 7 pounds to kilograms. Given that: 1 pound = 0.453592 kilograms.

var pounds = 7;
var kilograms = pounds * 0.453592;
console.log(kilograms);

You will get 3.17515 in the console.

Task 3: Convert 2 meters to feet. Given that: 1 meter = 3.28084 feet.

var meters = 2;
var feet = meters * 3.28084;
console.log(feet);

You will get 6.56168 in the console.