JavaScript Challenge

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">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.
<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">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.&nbsp;&nbsp;

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Let's get to know the basics of this most popular language and see how easy it is to program in it.

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.

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

In this example
&bull; the variable named number1 stores the value 5,
&bull; the variable named number2 stores the value 2,
&bull; 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:
&nbsp;
&nbsp;

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).
&nbsp;

<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Variables in JavaScript:
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; may contain letters, digits, underscores and a dollar sign,
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; should start with a letter,
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; can start with $ or _,
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; are case sensitive - they distinguish between uppercase and lowercase letters (a and A are two different variables),
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; if after declaring a variable we do not assign any value to it, then it will take the value <span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: italic; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">undefined<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.
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:

// variable numberOfChild stores the number of children in the class
var numberOfChild = 12;

// variable loggedIn stores information if a user is logged in (true = yes, false = no)
var loggedIn = true;

<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Remember that string (words) variables should always be in quotes. Take a look at the following differences:
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; 22 - variable of the numeric type (number),
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; "22" - string variable (word),
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; true - boolean (logical) variable,
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; "true" - string variable (word).

<span style="font-size: 12pt; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Before you begin, go to: <a style="text-decoration: none;" href="https://repl.it/"><span style="font-size: 12pt; color: #fbbb21; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">https://repl.it/</a><span style="font-size: 12pt; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> and create an account by clicking on the &ldquo;Sign Up&rdquo; button in the upper right corner. Then, follow the instructions on the page to verify your account.
<span style="font-size: 12pt; font-family: arial, helvetica, sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Did you succeed? Great! Now you can proceed to the exercises.

<span style="font-size: 12pt; font-family: arial, helvetica, sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">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.

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Take a look at exercise 1 in the link below:
<a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS1variables1EN#index.html"><span style="font-size: 12pt; font-family: Arial; color: #0563c1; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 1</a>
<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">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 <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">document.getElementById ('ex1').innerText<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. It is for the variable to be visible immediately after the text "Result of exercise 1:".&nbsp;
<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Look at the variable after the "+=" sign and the variable declaration line up. Can you tell why the text underneath does not display<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">? Correct the code so that everything works properly.<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> 
Tip: If you are stuck, read the paragraph with variable names, look at the code from exercise 1 and compare both lines.

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">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).
<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">In the code for exercise 2 you will find a variable named <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">favoriteLanguage.<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Assign a text (string) to it with your favorite programming language (e.g. JavaScript). If everything is fine, it will be displayed below.

<a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS1variables2EN"><span style="font-size: 12pt; font-family: Arial; color: #0563c1; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 2</a>

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">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 <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">result<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, 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.
<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">5 + 12 = NaN
<a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS1variables3EN"><span style="font-size: 12pt; font-family: Arial; color: #1155cc; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 3</a>

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tip:<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> 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.

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">In JavaScript code, exercise<a style="text-decoration-line: none;" href="https://repl.it/@CodersLab/JS1variables4"><span style="font-size: 12pt; font-family: Arial; color: #0563c1; font-variant-numeric: normal; font-variant-east-asian: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;"> 4</a> has another type of variables - boolean, which takes only two values:<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">true or false<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. Typically, variables of this type are used to control our program and tell it whether it has to do something or not.
<a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS1variables4EN"><span style="font-size: 12pt; font-family: Arial; color: #0563c1; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Excercise 4</a>
<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">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.
&nbsp;
<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tip:<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Remember to put only text (strings) in quotes. We leave logical values without such signs.

<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">The next type of variables are <span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">arrays<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. 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.

<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> <span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">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".

<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Check the link below:&nbsp;
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&nbsp;<a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS1variables5EN"><span style="font-size: 12pt; font-family: Arial; color: #1155cc; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 5</a>
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Find the array. Fill it in accordance with the following requirements:
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; the array should have exactly five elements,
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; in index 0 there should be a number (e.g. your favorite),
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; in index 1 there should be a text string (e.g. your name),
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; in index 2 there should be a logical value,
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; in index 3 there should be any text,
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; in index 4 there should be a number.

<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">This is not all that you can learn about arrays. You will learn more advanced topics later.

Variables

9 % 2; // will return 1, because 9/2 is 4, and 1 is the remainder

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Here's an example on which you can experiment:

<a style="text-decoration: none;" href="https://repl.it/@CodersLab/JS2moduloExample"><span style="font-size: 12pt; font-family: Arial; color: #0563c1; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">An example of modulo</a>

<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">In the JavaScript code you will find several variables containing the result of comparison of numbers, i.e. logical values (boolean) known to you from the previous lesson. For better readability, comparison operations are in brackets. Replace equality signs with the appropriate operators so that the results below return true in each case. Go to the first exercise:
<a style="text-decoration: none;" href="https://repl.it/@CodersLab/JS2operators1"><span style="font-size: 12pt; font-family: Arial; color: #0563c1; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 1</a>

<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tip:

var exN = (5 <= 8); // returns true, because 5 is less than or equal to 8
var exN = (5 >= 8); // returns false, because 5 is not greater than nor equal to 8

<span class="textContent-normal" style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Result of example 1: false
<span class="textContent-normal" style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Result of example 2: false
<span class="textContent-normal" style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Result of example 3: false

<span class="textContent-normal" style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Result of example 4: false

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">This task is analogous to the previous one. Replace signs of inequality in variables with appropriate operators so that the equations below return false in each case.

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Proceed to the second exercise: <a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS2operators2EN"><span style="font-size: 12pt; font-family: Arial; color: #0563c1; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 2</a>

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Result of example 1: true <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Result of example 2: true <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Result of example 3: true <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Result of example 4: true

<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Moving on to more complicated topics, we introduce logical operators. Let's discuss the example below:

<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">The value in the exN variable will be false. Why? Because the computer will do the following:
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; First, it will calculate the result of the equation (5 &lt;= 8). The result will be true. This value will be remembered for a while.
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; Then it will calculate the result of the equation (1 &gt; 3). This time, the result will be false. This value will be remembered for a while.
<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; At the end, it will calculate the result of the equation true &amp;&amp; false (logical values have been remembered in previous steps). The result will be false, and this value will be saved to the variable.

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Let's get to the exercise: <a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS2operators3EN"><span style="font-size: 12pt; font-family: Arial; color: #0563c1; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 3</a><span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. In the JavaScript code replace the equality or inequality signs with appropriate operators, so that the equations return true in each case. Do not change logical operators!

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Result of example 1: false <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Result of example 2: false <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Result of example 3: false

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">This task is analogous to the previous one. In JavaScript code, replace the operators with appropriate ones so that the results below return false in each case.

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Go to the exercise: <a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS2operators4EN"><span style="font-size: 12pt; font-family: Arial; color: #0563c1; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 4</a>

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Result of example 1: true <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Result of example 2: true <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Result of example 3: true

Operators

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">For a program to work, it must be able to make a decision. How? The so-called conditional statements are needed, such as <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">if<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.&nbsp;
It is based on the fact that a given piece of code will be executed if a given condition occurs or if it is true.

<a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS3if1EN"><span style="font-size: 12pt; font-family: Arial; color: #0563c1; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Code for exercise 1</a><span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. The JavaScript file should display a paragraph with the text "I am working" inside. Nevertheless, nothing is displayed. Why? The variable <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">ex1<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> is <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">false<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, and we said that the <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">if statement<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> is executed when the condition given in parentheses is true, which means that it returns <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">true<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Correct the code so that it works correctly.

Sometimes it happens that in the case of not having fulfilled the condition we also want to trigger some action. Then what?
An else clause comes to the rescue. It works in such a way that if the if statement does not return true, the else part is performed. Its looks like this:

if (condition) {
// follow if the condition returns true
}
else {
// follow if the condition does not occur, or returns false
}

Try to correct the code from <a style="text-decoration-line: none;" href="https://replit.com/@CodersLab/Js3if2EN"><span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #0563c1; font-variant-numeric: normal; font-variant-east-asian: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">task 2</a> so that the code stored in <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #000000; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">else is executed.

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">The conditions we give do not always have to be true or false. You can also save them as logical conditions (mathematical operations). Here's an example:

2 == 2 //true
5 > 3 //true
3 - 5 == 12 //false
5 < 5 //false

Remember that the equality sign is written as "==" because the single "=" sign is used to assign a value.
<a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS3if3EN"><span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #0563c1; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">See the JavaScript code of exercise 3.</a>
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">There is an expression there that determines whether it is time for food depending on the level of hunger (the variable <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">hungerLevel<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">). This variable will take a random value (in the range from 1 to 10). This means that each time you start the program, its value will be different.
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Complete the code. Use logical operators to make the condition come true if the hunger level is lower than 5, and then the program will display the text "I will eat later". In the condition, use a variable instead of the numbers themselves.

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tip:<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> If there is a number stored in the variable, we can use it the same way as numbers.

var variable = 3;
... // the rest of the code
if(variable < 10){} // returns true, because the variable stores the value 3, so 3<10

And if we want to have more than two answers in response to a condition? We can write the <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">if / else condition several times, but it would be very uncomfortable. In such case <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">else if is used, which takes the condition in parentheses, just like the <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">if statement<span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">, and is fulfilled only if the condition from <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">if is not fulfilled. If there are multiple <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">else if conditions, they are performed from top to bottom until one of them is fulfilled.

if(condition) { // If the condition is not fulfilled, the code will not be executed and the program will go further
// code to perform
}
else if(condition2) { // If the condition2 is not fulfilled, the code will not be executed and the program will go further
 
//code to perform
}
else if(condition3) { // If the condition3 is met, the code will be executed and the program will ignore the rest
 
//code to perform
}
else {
//code to perform
}

<a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS3if4EN"><span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #1155cc; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Look at code for exercise 4.</a>

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">There is an <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">if<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, which checks the given color of the traffic light and decides whether it is possible to go further. Fill it with a condition that will cause that when the variable <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">color<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> stores the value 'yellow', the text 'Watch out' will be displayed, and then change the value of the variable <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">color<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> to 'yellow' and check if everything works well. If you want to, you can test the <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">if<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> statement by entering different colors.

<span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Tip: If there is a string in the variable's value, we can compare it with other strings in the same way as numbers.

var variable = "eggplant";
variable == "eggplant"; // returns true, because "eggplant" == "eggplant"

Conditional statements (if)

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">You can use loops to work on data sets in JS. They allow multiple execution of a given code with different values. It is like an employee assigned to perform constantly repeated tasks. The operation of a loop is interrupted by a specific termination condition. It looks like this:

for (start, end condition, jump) {
// code executed for each iteration (jump) of the loop
}

Imagine that you want to list a few elements from an array. Without using a loop it would look like this:

var ourTable = ["Martin", "Anne", "Agnes", "Albert", "Michael", "Barbra"];
ourTable[0] // => "Martin";
ourTable[1] // => "Anne";
ourTable[2] // => "Agnes";
ourTable[3] // => "Albert";
ourTable[4] // => "Michael";
ourTable[5] // => "Barbra";

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">With the use of a loop, it looks like this:

for (var i=0; i<6; i=i+1) {
ourTable[i] // the loop will list all the names in turn, because each time
 // variable i will increased by 1
 
}

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull;&nbsp;<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">for&nbsp;<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&ndash; loop declaration,<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull;&nbsp;<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">var i = 0<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&nbsp;&ndash; loop execution counter, initially 0,<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull;&nbsp;<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">i &lt; 6<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&nbsp;&ndash;&nbsp; the end point, and therefore the loop will be performed from 0 to 5, because<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> i<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> is to be smaller than 6,<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull;<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&nbsp;i = i + 1&nbsp;<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&ndash; we told the loop that it should be done from 0 to 5, at an increment of 1. This means that the loop will be performed when <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">i<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> will be equal to 0, 1, 2, 3, 4, or 5 (it will be performed 6 times, jump every 1). If it was <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">i = i + 2<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, the loop would be executed for i equal to 0, 2, and 4 (it would be executed 3 times, at an increment of 2).
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">The jump increases the counter by the given value. This can be explained in the example with an employee. Imagine that you give someone the task of putting 10 pens into boxes. Thanks to the <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">i = i + 1<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> declaration, you tell him to put a pen in each of them, while <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">i = i + 2<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> means that the employee has to put a pen into every other box.
&nbsp;
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">In the <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">for loop<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> we define a variable that will be a loop counter (start). In the following case it is the<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> i<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> variable, but it can have any name, e.g. counter, j, etc. However, we usually use <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">i<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. What will happen when we write such a loop:

for (var i=0; i<=5; i=i+1) {
example += i;
}

&nbsp;
Take a look at how it works here: <a style="text-decoration-line: none;" href="https://replit.com/@CodersLab/Js4forExampleEN#index.html"><span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #0563c1; font-variant-numeric: normal; font-variant-east-asian: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Example of the loop</a>
The loop counter starts at position <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">0. The next condition is whether<span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;"> i is less than or equal to 5, if yes, the code is executed. The variable <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">i is added to the variable <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">example, which is larger each time. At the end there is a jump, so <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">i increases its value by 1 (such procedure is called iteration and it can also be written this way: <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">i ++), and the loop is executed again until it reaches the value 6. For the whole loop it looks like this:
<div dir="ltr" style="margin-left: -0.5pt;" align="left">
<table style="border-collapse: collapse; border: initial none initial;"><colgroup><col width="21" /><col width="161" /><col width="131" /><col width="187" /></colgroup>
<tbody>
<tr style="height: 0pt;">
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 0.5pt; overflow: hidden; overflow-wrap: break-word;">
<span style="font-size: 11pt; font-family: Calibri, sans-serif; color: #000000; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">i
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 0.5pt; overflow: hidden; overflow-wrap: break-word;">
<span style="font-size: 11pt; font-family: Calibri, sans-serif; color: #000000; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">what the condition returns
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 0.5pt; overflow: hidden; overflow-wrap: break-word;">
<span style="font-size: 11pt; font-family: Calibri, sans-serif; color: #000000; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Performed operation
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 0.5pt; overflow: hidden; overflow-wrap: break-word;">
<span style="font-size: 11pt; font-family: Calibri, sans-serif; color: #000000; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">value of the example variable
</td>
</tr>
<tr style="height: 0pt;">
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
0
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
0 &lt;= 5 / true
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
0+0
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
0
</td>
</tr>
<tr style="height: 0pt;">
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
1
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
1 &lt;= 5 / true
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
0+1
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
1
</td>
</tr>
<tr style="height: 0pt;">
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
2
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
2 &lt;= 5 / true
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
1+2
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
3
</td>
</tr>
<tr style="height: 0pt;">
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
3
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
3 &lt;= 5 / true
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
3+3&nbsp;
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
6
</td>
</tr>
<tr style="height: 0pt;">
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
4
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
4 &lt;= 5 / true
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
6+4
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
10
</td>
</tr>
<tr style="height: 0pt;">
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
5
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
5 &lt;=5 / true
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
10+5
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
15
</td>
</tr>
<tr style="height: 0pt;">
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
6
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
6 &lt;= 5 / false
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
none
</td>
<td style="border-width: 0.75pt; border-color: #000000; vertical-align: middle; padding: 3.75pt; overflow: hidden; overflow-wrap: break-word;">
15
</td>
</tr>
</tbody>
</table>
</div>

&nbsp;

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Change the variables <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">num1 <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">and <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">num2 <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">into numbers so that the loop is performed only 5 times. The line underneath shows how many times a loop has been executed.
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Go to the first exercise: <a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS4for1EN"><span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #0563c1; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 1</a><span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&nbsp;

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tip:<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Remember that loops are usually counted from 0, so when using the character "&lt;=" the loop will be done once more than the number after the sign, e.g.

for(var i = 0; i <= 3; i++) { // The loop will be executed 4 times, when i = 0, 1, 2, 3
//code to perform
}
for(var i = 0; i < 3; i++) { // The loop will be executed 3 times, when i = 0, 1, 2
//code to perform
}

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Change the variables <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">num1<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> and <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">num2<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> into numbers so that the counter below counts from 0 to 10.
<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Once you have done this, try changing the condition and start value of the variable so that the counter goes down from 10 to 0.

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Go to the second exercise: <a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS4for2EN"><span style="font-size: 12pt; font-family: Arial; color: #0563c1; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 2</a>

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">In place of the variable <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">condition<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, fill the loop so that it displays numbers from <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">0<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> to <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">100<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, but each jump is made every <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">10<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, that is 0, 10, 20, 30, etc.
<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tip:<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> In case of problems, return to the section with the description of the <span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">for<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> structure and compare it with another sample loop. The last condition of the statement is responsible for the jump of the loop.
Go to the third exercise:&nbsp;<a style="text-decoration-line: none;" href="https://replit.com/@CodersLab/JS4for3EN"><span style="font-size: 12pt; font-family: Arial; color: #0563c1; font-variant-numeric: normal; font-variant-east-asian: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 3</a>

A programmer often uses loops when working with arrays. Look at the JavaScript code for exercise 4. There is a <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">for loop in it, with an array method <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">.length which returns the number of elements in an array.

var array = ["a","b",12, true];
array.length //returns 4

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">This is useful because we do not have to manually count how many elements an array has and enter that number into the condition. Perhaps its advantages are not clear in an array of four elements, but if there were 500 or more, the difference would be much more noticeable. When using this method, only remember that it returns the length of the array counting from 1, and the indexes themselves are counted from 0. Looking at the variable above, the last element of the array is its fourth element, but it has index 3.&nbsp;
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Complete the conditions of the given loop so that all elements of the array are displayed underneath.
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Go to the fourth exercise: <a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS4for4EN">Exercise 4</a>

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tip:<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> If you do not know how to use the <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">length<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> method, look at the pattern in the comment in this exercise.

Loops

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">You can use arrays to store multiple variables in JavaScript. We have the following three variables:

var fruit1 = "pineapple";
var fruit2 = "peach";
var fruit3 = "watermelon";

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">... we can as well put them in an array:

var fruitsArray = ["pineapple", "peach", "watermelon"];

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">We get to certain elements of the array by entering their index (position). The pineapple will be at index 0, so to get to it, we use the syntax:

fruitsArray[0]; // the index is given in square brackets

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Try to assign an array with a few titles of your favorite series to the declared variable, so that the titles appear in subsequent lines.
<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Go to the first exercise:&nbsp;<a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS5array1EN"><span style="font-size: 12pt; font-family: Arial; color: #0563c1; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 1</a>

<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tip:<span style="font-size: 12pt; font-family: Arial; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Remember that the array must be enclosed in square brackets and its values separated by commas.

In the JavaScript file for exercise 2 you will find an array with years and two auxiliary variables. Declare these variables, use the appropriate elements of the array (do not enter numerical values manually), so that underneath the age range in which you are is displayed correctly.&nbsp;
Go to the second exercise: <a href="https://replit.com/@CodersLab/JS4array2EN">Exercise 2</a>
Tip: This way you can assign a specific array value to a variable.

var index = 9;
var variable = array[index];
// or
var variable2 = array[4];

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">In the third exercise, determine the length of the array.
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Go to the third exercise:&nbsp;<a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS5array3EN"><span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #0563c1; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 3</a><span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&nbsp;

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tip:<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Array methods are used by specifying the array name, followed by a period, then name of the method and, if the method requires this, one or more values in brackets.

var someNumbers = [5,2,9];
someNumbers.sort(); // there is an array stored in the someNumbers variable [2,5,9]

<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">In the JavaScript file you will find an array with vegetables and a second variable, which is displayed below. Use appropriate methods to add a new vegetable at the beginning and at the end.
<span style="font-size: 12pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Go to the fourth exercise:&nbsp;<a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS5array4EN"><span style="font-size: 12pt; font-family: Arial; color: #1155cc; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 4</a>
Tip: If you do not know what methods to use, return to the table with array methods.

Nothing prevents you from inserting other arrays into the arrays. This is called multidimensional arrays and they look like this:

var array = [5, "xyz", [33,29,"abc"], true];

To get to the value inside the inner array, first enter the index on which the array itself is located, and then the index of values inside. To get to the value 29 you should use the following structure:

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">First, you choose the name of the array, then the index on which the internal array is located ([2]), and finally the index of the value you are interested in inside the second array ([1]).
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">In the code for the exercise there is a multidimensional array with brands and car models, try to assign the value "Juke" to the variable below, so that it displays correctly.
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Go to the fifth exercise: <a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS5array5EN"><span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #1155cc; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 5</a>
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Do you know what you should do? Try to place another array inside the array with car models (e.g. with the date of production) so that they will gain another dimension. Next, modify the variable so that it displays one of the values entered by you.
<span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Tip: the variable value will then look something like this: <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">array [x] [y] [z]

Arrays

It's time for the next dose of knowledge. We present the function, or block of code used to perform a specific task. What is important, it should be called. Look at the example to understand what it means. Let's start with the syntax of a function.

function name(parameter) {
// code to perform
}

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Discover the features of functions:
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; keyword <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">function
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; name of the function (can be any name, but it is recommended that it consists of verbs, e.g. checkName),
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; one parameter or many parameters, written in brackets (note that a function may also not accept any parameters),
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">&bull; code to be executed, written in curly brackets.

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">In the parameter you can pass, among others, any word, e.g. "pineapple", and the function is to perform a specific task, e.g. change the size of characters, reverse the order of letters or check how many times the character "a" is repeated. In our example, we will pass two numeric variables, and the aim of the function will be to multiply them.

function multiply(num1, num2) { // you can specify more than one parameter
return num1*num2;
}

Our function is named <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">multiply. To call it, we enter its name, and then parameters in place of <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">num1 and <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">num2, therefore, we enter the numbers that we want to multiply - in our case <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">4 and<span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #4a4a49; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;"> 5. Time to call the function:

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Look at the code:<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> <a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS6functionexampleEN"><span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #0563c1; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Example of multiply function</a>

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">What happened? We called the previously declared <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">multiply<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> function and substituted the <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">num1<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> and <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">num2<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> parameters for two numbers. The inside of the function during such a call looks like this: return 4 * 5, and the result of this multiplication is 20. Remember to always use round brackets, even if the function does not accept any parameters, which is also possible.
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">return 

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Functions<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> must always return something. If they did not do so, they would be working inside themselves, but nothing would be noticeable outside. Imagine a craftsman working in the comfort of his workshop. If he does not bring out the effects of his work outside of the workshop, no one will be able to use them. The <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">return<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> keyword is used to transmit the function's result. The code in the following lines will not be executed, so remember that this keyword should always be the last one.

function multiply(num1, num2) {
num1*num2;
}
multiply(4, 5);

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">This function will not return anything. Our craftsman will do the job, but he will keep the result for himself.

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">It is very convenient to assign the result of a function to a variable (as we did in the above example), thanks to which we will be able to use the result of this work many times, e.g.

var result = <span style="font-size: 11pt; font-family: Consolas, sans-serif; color: #9a050f; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">multiply(4, 5);

The result of the function is now in the <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #000000; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">result variable, from which we will be able to use it later.

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Look at the code in the JavaScript file. You will find there a function that prints the text. Call it.
Go to the first exercise:&nbsp;<a style="text-decoration-line: none;" href="https://replit.com/@CodersLab/JS6function1EN"><span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #1155cc; font-variant-numeric: normal; font-variant-east-asian: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 1</a>
<span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #000000; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Tip: The function is called by giving its name with round brackets, without parameters.

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Look at the JS file. You will find there a function and a variable to which its result is assigned. Then the variable itself is displayed below. This function takes two parameters and returns the result of their multiplication. Correct the call of the function so that the equation (5 * 12 = NaN) is correct.
Go to the second exercise:&nbsp;<a style="text-decoration-line: none;" href="https://replit.com/@CodersLab/JS6function2EN"><span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #1155cc; font-variant-numeric: normal; font-variant-east-asian: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 2</a>

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tip:<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> In case of problems, compare the parameters at the declaration of the function and its call in the variable and read again the section on the parameters of the function.

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Look at the code in the JavaScript file. Call the function there in such a way that a greeting with your name appears underneath.
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Go to the third exercise:&nbsp;<a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS6function3EN"><span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #1155cc; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 3</a>
<span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #000000; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Tip: Next to the function declaration, replace the <span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #000000; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">name parameter with a value.

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Look at the code for exercise 4 in the JavaScript file. There is a function that converts degrees Fahrenheit to Celsius. Add the temperature you want to convert to the <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">fahrenheit<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> variable. Assign the result of this function to the variable <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">result2<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, and give the variable <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">fahrenheit<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> in parentheses.
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Go to the fourth exercise:&nbsp;<a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS6function4EN"><span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #0563c1; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 4</a>
<span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #000000; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Tip: If everything is correct, the result for 50 &deg; Fahrenheit should be 10 &deg; Celsius.

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Time to write your own function. In the JS file you have space to write your own function. Give it any name, but remember about good practices. The function is to take a parameter with any name: your age (e.g. 27), and return the year of birth (e.g. 1990). How to write the code? <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">You should subtract the given parameter from the current year and return the result (e.g. <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">return 2017 - parameter;<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">).
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Then call the function and save its result to the already prepared <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">birthYear<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> variable. If everything has been done correctly, the year of your birth should be displayed.
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Go to the fifth exercise:&nbsp;<a style="text-decoration: none;" href="https://replit.com/@CodersLab/JS6function5EN"><span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #1155cc; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Exercise 5</a>

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tip:<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> If you are not sure how to write a function, then look at the example from the theoretical part and then replace its parts.

Functions

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">So what is the task...
Using the already acquired knowledge, we can create a simple, but useful application. If you do not remember the order of planets in the Solar System, our application will remind you. When the user starts it, they will be able to enter the number of the planet, in other words its place in order from the Sun. Then the user presses 'search' and finds out what planet it is. For example, the user enters the number 3 and we display the information that the Earth is the third planet from the Sun. Simple, isn't it?
<a style="text-decoration: none;" href="https://repl.it/@CodersLab/JS7task"><span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #0563c1; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Do the exercise here.</a>
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">1) <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Let's first build an array consisting of the names (strings) of planets.<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Planets should be in the same order as in the Solar System. For the record, the order of planets is:
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">2) We assign our array to the variable <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">planets<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">3) Next, we will create a function that will ultimately display the appropriate planet. Let's call it <span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">searchPlanet<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.
<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">We do not have to worry about connecting this function to the "Search" button (part of HTML and CSS is already prepared at this stage).

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">4) We c<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">opy the two following lines of code and paste them at the beginning of our function.<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #4a4a49; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> They are used to connect our JS with HTML - to read the digit entered by the user of the application and to display the result to the user.

var userInput = document.getElementById("userText").value;
 
var result = document.getElementById("result");

5) Under the lines above (still in our function) we create a loop.
Why do we need a loop? Thanks to it, we can automatically check and assign planets to a given digit. Remember about the right number of iterations.&nbsp;
Tip: the number of iterations depends on the length of our array. If you can not do this part, take a look at the lesson about loops, especially the example in which we associate the number of repetitions of the loops with the length of the array.&nbsp;
6) In our loop we will check if the number entered by the user corresponds to one of the planets in the array.&nbsp;
Therefore, we will use the conditional statement if. Our logic is as follows: if the number entered by the user (remember that we have assigned it to the userInput variable) equals the counter of our loop, i.e. i (actually i + 1, which is shown below), we assign the right planet to our result (remember that we&nbsp;assigned it to variable&nbsp;result).
Tip: pay attention to the condition that we construct, and more specifically, the equation operator. As a reminder, the single equation "=" assigns a value, the double equation "==" checks whether the given elements are equal in value and ignores the differences in the data type (e.g. 2 == '2' will return true), triple equation "===" additionally checks if given elements are of the same type (e.g. 2 === '2' will return false). By typing a number in the field, does the user enter a string or a number?
Tip 2: note that if the counter of our loop is initially 0, then our equation must be adjusted. Therefore, we will not compare what the user entered with the counter, but with counter + 1, because we do not want the user to count the planets from 0.&nbsp;
Tip 3: if we use our result variable to display the planet, we should give it an additional innerText (or result.innerText) method.

<span style="font-size: 12pt; font-family: 'Open Sans',sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">If you got stuck somewhere, click on the link below and look at the code:

<a style="text-decoration-line: none;" href="https://replit.com/@CodersLab/JS7tasksolvedEN#index.html"><span style="font-size: 12pt; font-family: 'Open Sans', sans-serif; color: #1155cc; font-variant-numeric: normal; font-variant-east-asian: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Solution of the exercise</a>

Your first program

Online

Beograd

Klett је izdavač sa dugogodi&scaron;njom tradicijom u izdavanju &scaron;kolskih udžbenika i nastavnih sredstava, te jedna od najvećih izdavačkih grupa na svetu, sa zavidim renomenom u mnogim državama. U saradnji sa Coders Lab, međunarodnom kompanijom koja posluje u osam država Evrope, od nedavno smo uveli obuke iz oblasti IT-a koje vam omogućavaju da brzo promenite svoju profesiju i efikasno pro&scaron;irite svoje digitalne kompetencije. Fokusiramo se na preno&scaron;enje praktičnih ve&scaron;tina, korisnih budućim poslodavcima na&scaron;ih polaznika.

logo-lg-klett.svg

JavaScript image

JavaScript Developer React Course

tester-icon.png

Manual Tester Course

data-scientist-kurs-mobile-icon.png

automation-tester.png

python-developer.png

Product&Project IT Manager

For Beginners Courses

home page image

Home page

our_courses_logo

our_contact logo

<noscript><iframe src="https://gtm.coderslab.rs/ns.html?id=GTM-NB6MW672" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) →

<script>
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
 event: "generate_lead",
 form_name: "Newsletter Popup/Unique name", 
 lead_source: "Website", 
 customer: [{
	id: 'UserID',//If available
email: 'EmailVariable',
sha256_email_address: 'EmailVariable',
phone_number: 'PhoneNumberVariable',
sha256_phone_number: 'PhoneNumberVariable',//If available
}],

});

</script>