Let's get to know the basics of this most popular language and see how easy it is to program in it.
Variables
A variable is the basic unit for storing data in JavaScript. It is declared by entering the keyword var (shortcut from variable) followed by a name of the variable. Then, after the equality sign (the assignment operator „=“), you give the value you want to store in it.
Example:
In this example:
- the variable named
number1
stores the value 5,
- the variable named
number2
stores the value 2,
- the variable named
number3
stores the value 7 (number1 + number2, so 5 + 2).
A variable stores a value. This value can be also changed:
You can imagine a variable as a box. With the use of var, we create it, and after the equality sign we state what we want to put into it. If we want to put a new thing in it, then we do not create it all over again. We simply point it out and declare what we put in this time.
It should be remembered that the name of each variable should be unique. It can be a short name (x or y) or - which is in accordance with good practice - more descriptive (name, city, age).
Variables in JavaScript:
- may contain letters, digits, underscores and a dollar sign,
- should start with a letter,
- can start with $ or _,
- are case sensitive - they distinguish between uppercase and lowercase letters (a and A are two different variables),
- if after declaring a variable we do not assign any value to it, then it will take the value undefined.
In JavaScript, the "=" sign is an assignment operator, which means that we do not use it as a normal equality sign. If you want to compare two variables and thus find out if they are the same, use "==", the double equal sign (this will return true or false).
Variables can store different types of data. The most important of them are:
Number - all numbers, e.g.
String – words or strings of characters, e.g.
Boolean – true of false, e.g.
Remember that string (words) variables should always be in quotes. Take a look at the following differences:
- 22 - variable of the numeric type (number),
- "22" - string variable (word),
- true - boolean (logical) variable,
- "true" - string variable (word).
Exercises
Before you begin, go to repl.it and create an account by clicking on the “Sign Up” button in the upper right corner. Then, follow the instructions on the page to verify your account.
Setup an account on repl.it
Did you succeed? Great! Now you can proceed to the exercises.
Remember to click "Fork" each time you go to a page with an exercise. This will allow you to make changes to the code. Always select the file "index.js" (in the menu on the left), unless the instruction tells you otherwise.
Exercise 1
Take a look at exercise 1 in the link below:
Run exercise #1
Before you start: select the index.js file (in the menu on the left) and press "Run" (above the code window) to generate the code. Do not change the statement document.getElementById ('ex1').innerText. It is for the variable to be visible immediately after the text "Result of exercise 1:".
Look at the variable after the "+=" sign and the variable declaration line up. Can you tell why the text underneath does not display? Correct the code so that everything works properly.
Tip: If you are stuck, read the paragraph with variable names, look at the code from exercise 1 and compare both lines.
Excercise 2
As we said earlier, variables are declared using the keyword "var" followed by the name and then followed by its value after the assignment operator (sign =). If the value is in quotes, it means it contains a word/text (string).
In the code for exercise 2 you will find a variable named favoriteLanguage. Assign a text (string) to it with your favorite programming language (e.g. JavaScript). If everything is fine, it will be displayed below.
Run exercise #2
Excercise 3
In variables, we can also store numbers on which we can then perform arithmetic operations (+, -, *, /). In the code for exercise 3 you will find a variable named result, which adds variables number1 and number2 and is displayed below the equal sign. Give variable number1 and number2 numeric values so that the result of the equation underneath is correct.
5 + 12 = NaN
Run exercise #3
Tip: If numbers do not add up correctly, they stick together - that means they are unnecessarily surrounded by quotes. In this case, the computer treats them as strings/ text rather than numbers.
Excercise 4
In JavaScript code, exercise 4 has another type of variables - boolean, which takes only two values: true or false. Typically, variables of this type are used to control our program and tell it whether it has to do something or not.
Run excercise #4
Complete the variables so that the program knows what the weather is like. If you complete everything with true or false values, you will see below how you should prepare before leaving the house. One of the given variables has no logical value.
Tip: Remember to put only text (strings) in quotes. We leave logical values without such signs.
Excersise 5
The next type of variables are arrays. In a simplified way, we can say that these are sets of other variables (string, number, boolean, etc.). They are created in the same way as other variables, except that after the equality sign we write a square bracket in which we insert values separated by a comma. The variables in the array can be accessed by specifying the name of the array and the index number in which the particular value is. Remember that arrays are numbered according to the American standard, that is from zero and not from one.
This is an example of an array:
Check the link below:
Run exercise #5
Find the array. Fill it in accordance with the following requirements:
- the array should have exactly five elements,
- in index 0 there should be a number (e.g. your favorite),
- in index 1 there should be a text string (e.g. your name),
- in index 2 there should be a logical value,
- in index 3 there should be any text,
- in index 4 there should be a number.
This is not all that you can learn about arrays. You will learn more advanced topics later.
Next chapter: Operators »