The language basics of JavaScript

Listing 10. Using comparison operators

(10 == 1);
Logical operators

Logical operators are usually used to combine comparison operators in conditional statements. Table 5 lists and describes all available logical operators in the JavaScript language.

Table 5. Logical operators

Operator description

&&and

||or

! No

Now that you have some experience with variables and operators, it's time to learn how to create a mechanism that has more storage content than simple variables.

Array

Arrays are similar to variables, but the difference is that they can put multiple values ​​and expressions under one name. Saving multiple values ​​in a variable makes arrays powerful. There is no limit on the type and quantity of data you can store in JavaScript arrays. After declaring the array in a script, you can access any data of any item in the array at any time. Although arrays can hold any data type in the JavaScript language, including other arrays, the most common practice is to store similar data in the same array and give it a name associated with the array item. The examples provided in Listing 11 use two separate arrays to store similar data each.

Listing 11. Store similar values ​​in an array

As you can see, it is possible to save all these data items in an array, but this is irrational and may cause problems for the script in the future, such as when identifying what data is stored in the array.

It's easy to access values ​​in an array, but there's a trap here. The array's ID always starts from 0 instead of 1, and you may be a little confused when you use it for the first time. ID starts to increment from 0, such as 0, 1, 2, 3, etc. To access an array item, you must use its ID, which points to the location of the child item in the array (Listing 12).

Listing 12. Save similar values ​​in an array

You can also assign a value to a certain position in the array, or update the value of an item in the array, just like the previous method of accessing items in the array (Listing 13).

Listing 13. Assign values ​​to specific positions in the array

Now that you have a good understanding of variables, operators, and arrays, then apply what you have learned to practice and start creating some logic.

Conditional statements

Conditional statements are the skeletons for creating various types of logic in scripting languages ​​or programming languages, and JavaScript language is no exception. Conditional statements determine the behavior to be taken based on the conditions you write. There are four ways to write conditional statements in JavaScript, which is described in Table 6.

Table 6. Conditional Statements

Statement description

If a specific condition is true, execute the script

if...else If a specific condition is true, execute a script.

If the condition is false, execute a script

if...else if...else If one of the multiple conditions that are not limited to the number is true, execute a script.

If all conditions are false, execute other scripts

switch Execute one of many scripts

If you just want to execute a script when a certain condition is true, use the if statement. Listing 14 shows how to use an if statement with a comparison operator to execute a script when the condition is true.

Listing 14. Using if statements

If you plan to execute a script when a certain condition is true and another script statement when the condition is false, then use the if...else statement, as shown in Listing 15.

Listing 15. Using if...else statement

If you want to execute different scripts based on different conditions, use the if...else if...else statement, as shown in Listing 16.

Listing 16. Using if...else if...else statement

Switch statements are different from if statements, and they cannot be used to determine whether the value of a variable is greater or less than another value. The examples given in Listing 17 illustrate the appropriate time to use a switch statement to determine the script to be executed.

Listing 17. Using switch statements

You may have noticed that Listing 17 uses case clauses, break statements and default clauses. These clauses and statements are very important parts for switch statements. The case clause determines whether the value of the switch is equal to the data value used in the clause; the break statement breaks - or stops - the rest of the switch statement execution statement; and the default clause indicates the default script to run without the case statement or the case statement that has been executed without the break statement. For example, Listing 18 illustrates how multiple case statements and default statements are executed if there is no break statement in an executed case statement.

Listing 18. Execute multiple lines of code without break

The result of this script is first the sentence "num is equal to 10", followed by the sentence "num is: 10". This situation is sometimes called switch straight.

As mentioned at the beginning of this section, conditional statements are the skeleton of all logic in any scripting language or programming language, but without using functions, the code you get will be like a tangled mess.

function

There are many reasons to prove that functions are useful. Functions are containers of scripts that can only be executed by events or function calls, so when the browser initially loads and executes scripts contained in a web page, the function is not executed. The purpose of a function is to include scripts that want to complete a task so that you can execute the script and run the task at any time.

It's easy to build a function, starting with the keyword function, followed by a space, and then the name of the function. You can choose any string as the name of the function, but it is important to have some correlation between the name of the function and the task it is about to perform. Listing 19 gives an example of a function that modifies the value of an existing variable.

Listing 19. Building a simple function

The examples in Listing 19 not only illustrate how to build a function, but also how to call a function to modify the value of a variable. In this example, you can modify the value of a variable because the variable is declared in the main script scope, and the same is true for the function, so the function knows the existence of the variable. However, if the variable is declared inside the function, then you cannot access the variable outside the function.

Functions can also accept data through the parameters of the function. The function can have one or more formal parameters. The number of formal parameters based on the function call can have one or more actual parameters. Formal parameters (formal parameters, parameters) and actual parameters (real parameters, arguments) are often confused; formal parameters are components of function definitions, while actual parameters are expressions used when calling functions. Listing 20 gives an example of a function that has a tangible parameter and a function call uses real parameters.

Listing 20. Using function parameters

The function in this example increments the value of any actual parameter passed to it, the actual parameter in this example is a variable you have predeclared. By passing it as an actual parameter to the function, you increment its value to 11.

Return statements are also commonly used in functions. They return a value after executing the script in the function. For example, you can assign the value returned by the function to a variable. The example in Listing 21 illustrates how to return a value from a function after the script is executed.

Listing 21. Using return statement in a function

The result of this script is "num is: 20". The advantage of this function is that it adds any two numbers you pass to it and returns the added value, which you can assign to any variable instead of always changing the value of the same variable like Listing 20.

cycle

As you've already seen, arrays are a great way to store lots of reusable data. But this is just the beginning; for and while loops provide the functions of traversing these arrays, accessing their values, and using them to execute scripts.

The most commonly used loop type in JavaScript language is for loop. This is usually done by a variable with a numeric value, then the variable is compared with another value using a comparison operator, and finally the numeric value is incremented or decremented. Comparison in a for loop is usually to determine whether the value of the initial variable is less than or greater than another value, and then the loop runs during this time when the condition is true, the variable is incremented or decreased until the calculation result of the condition is false. The example given in Listing 22 illustrates how to write a for loop that runs when the value is less than the length of the array.

Listing 22. Building a for loop and traversing an array

The length property of the array provides a numeric value equal to the number of child items in the array. Once again, the point that makes you mistake here is that the ID of the array starts from 0. Therefore, if there are 4 child items in the array, the length is 4, but the indexes in the array are 0, 1, 2 and 3 - there are no 4.

Another loop type is while loop, which execute faster than for loops, but is suitable for some cases where it is not traversing arrays, such as executing a script when a certain condition is true. Listing 23 shows how to write a while loop, which is to execute a script when the numeric variable is less than 10.

Listing 23. Building a while loop

It can be noted that the script in the while loop contains a line of code that superimposes numeric variables until the condition in the while loop is false. Without this line of code, all you get is an infinite loop.

in conclusion

JavaScript is arguably one of the most popular languages, and now you understand why. This simple and rich scripting language brings so many possibilities, and it provides tools that allow website visitors to interact with downloaded web pages, which is very powerful. This article lays the foundation for understanding the basic principles of the JavaScript language. Now it should be easier for you to understand how JavaScript library functions work and how to use them to simplify the writing process of web client logic. The next thing to do is put these concepts into practice and start exploring JavaScript objects.