Back to Top

How JavaScript was created

JavaScript is currently the most popular programming language in the world, according to Github and StackOverflow. Created in just 10 days, JavaScript has gained enormous popularity and is currently used by virtually every company in the world, both as a front-end and back-end technology.

In 1995, Brendan Eich created in a record-breaking amount of time a language that enables the creation of interactive sites. The name has been changed several times - the initial Mocha and LiveScript were eventually replaced by JavaScript. However, it should be remembered that despite similarities in names, JavaScript is not the same as Java. Although the first one drew inspiration from the other, JavaScript is a completely separate programming language.


Today's versatility has contributed to the popularity of JavaScript. Every serious website uses JavaScript. More and more often programmers use its framework versions, such as React.js created by Facebook, or Angular.js written by Google programmers. JavaScript is no longer just a front-end language (i.e. responsible for displaying web pages and user interactions), but it is also a back-end environment (i.e. used to process data on the server side) in the form of Node.js whose popularity has been increasing each year.  

Let's get to know the basics of this most popular language and see how easy it is to program in it.

About variables

A variable is the basic unit for storing data in JavaScript. It is declared by entering the keyword var (short from variable) followed by a name. Then, after the equality sign (the assignment operator "="), you give the value you want to store in it.

Example:
var number1 = 5;
var number2 = 2;
var number3 = number1 + number2;

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. In other words - it has a value that we can easily change:

 

 

var apple = "apple"; // now the variable apple stores the word "apple"
apple = "pineapple"; // now the variable apple stores the word "pineapple"

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.
// variable numberOfChild stores the number of children in the class
var numberOfChild = 12;
string – words or strings of characters, e.g.
// variable loggedIn stores information if a user is logged in (true = yes, false = no)
var loggedIn = true;

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: https://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.

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:

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.

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

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.

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:

var array = ["pineapple", 5, "mirabelle"];
//The index 0 contains the string "pineapple", index 1 – number 5, and index 2 – "mirabelle".

Check the link below: 

 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.