JavaScript basics page 1/2

JavaScript is becoming more and more popular. It can be said that it is one of the most prominent languages on the Internet. You can use it across platforms and Browsers without rejecting backend languages. There are many different development libraries -- some of which are great -- these libraries are very helpful for development, such as speeding up development. The problem is that sometimes these libraries have some distance from the original language, which makes beginners lack a basic understanding of the language.

This article describes the basic principles of the language by comprehensively listing the basic JavaScript concepts, so as to provide beginners with a basic understanding of the language, code examples that are everywhere are used to demonstrate how all these concepts are embodied in the language.

Understanding JavaScript Language

JavaScript is a free client scripting Language that allows you to add interaction behavior to the Hypertext Markup Language (HTML) page. Client-side means that JavaScript runs in the browser, rather than on the server. After the webpage is delivered by the server and loaded by the browser, the client script allows users to interact with the webpage. For example, Google Maps uses JavaScript to support interaction between users and Maps. The interaction methods include moving Maps, enlarging and narrowing down. Without the JavaScript language, the webpage needs to refresh the interaction behavior with each user each time, unless the page uses Adobe Flash or Microsoft®Silverlight plug-ins. The JavaScript language does not require plug-ins.

Because the JavaScript language provides user interaction for the loaded webpage, developers usually use it to implement the following functions:

1. dynamically add, edit, and delete HTML elements and their values.

2. Verify the form before submission.

3. Create cookies on your computer to store and retrieve data for future access.

Before you start, you only need to know the basic principles of the language:

1. to include JavaScript code in an HTML file, you must put the code inside the script tag and add the text/javascript type (type) attribute (List 1 ).

2. All JavaScript statements end with a semicolon.

3. The language is case sensitive.

4. All variable names must start with letters or underscores.

5. You can use comments to describe certain rows in the script. The comments are written starting with a double slash (//) and followed by comments.

6. You can also use annotations to comment out the script. To comment out multiple lines of the script, a good way is to use/* your script here */. Any script within the asterisk will not run during execution.

Listing 1. The script tag and type attribute must be used to include JavaScript code in the HTML file.

<Script type = "text/javascript"> </script>
To hide the JavaScript code not supported by the browser, or to disable the code, you only need to use the annotation label before and after the commit Crip Statement (List 2 ).

Listing 2. Using annotations to hide JavaScript code not supported by the browser
Copy codeThe Code is as follows:
<Script type = "text/javascript">
<! --
Example statement here
// -->
</Script>

The most common method to include JavaScript code into a webpage is to use the src attribute in the script tag to load the code from an external JavaScript file (listing 3 ).

Listing 3. Adding external JavaScript files to an HTML file
<Script type = "text/javascript" src = "path/to/javascript. js" kesrc = "path/to/javascript. js"> </script>
External JavaScript files are the most common way to include JavaScript code. There are some very real reasons:

1. If your HTML page contains less code, the search engine can crawl and index your website at a faster speed.

2. Keep JavaScript code and HTML separated so that the code is clearer and easier to manage.

3. because you can include multiple JavaScript files in HTML code, you can separate JavaScript files and place them in different file directory structures on the web server. This is similar to storing images, this is an easier way to manage code. Clear and organized code is always the key to making website management easier.

Variable

Variable storage data, which will be retrieved later or updated using new data. The data stored in the variable can be a value or expression. The JavaScript language has three types of expressions, which are described in table 1.

Table 1. JavaScript expressions

Expression description

The result of arithmetic calculation is a numerical value.

Returns a string.

The result of logical calculation is a Boolean value (true or false)

There are two types of variables: local and global. Local variables are declared using the var keyword. If you declare a global variable, you do not need to use the var keyword. Variables that use the var keyword are considered local, because they cannot be accessed anywhere except where you declare them. For example, if you declare a local variable in a function (which I will talk about at the end of this Article), the variable cannot be accessed outside the function, this makes it part of this function. If you do not use the var keyword to declare the same variable, it will be accessible throughout the script, not only limited to being accessed in that function.

Listing 4 provides an example of a local variable named num and assigned 10 values.

Listing 4. Declaring a local variable

Var num = 10;
To access the value of the num variable at another location in the script, you only need to reference the variable by name, as shown in listing 5.

Listing 5. Access variable values
Copy codeThe Code is as follows:
Document. write ("The value of num is:" + num );

The result of this statement is "The value of num is: 10 ". This document. write function writes data to the web page. In the rest of this article, you use this function to write the example to the web page.

To store an arithmetic expression in a variable, you only need to assign the variable to the calculated value, as shown in Listing 6. The calculation result is stored in the variable instead of the formula itself. Therefore, we obtain The result "The value of num is: 10" again ".

Listing 6. Store arithmetic expressions
Copy codeThe Code is as follows:
Var num = (5 + 5 );
Document. write ("The value of num is:" + num );

To change the value of a variable, reference the variable by the name you assign to the variable, and assign a new value to it by using the equal sign (listing 7 ). The difference this time is that you do not need to use the var keyword because the variable has been declared.

Listing 7. Changing the value of an existing variable
Copy codeThe Code is as follows:
Var num = 10;
Document. write ("The value of num is:" + num );

// Update the value of num to 15.
Num = 15;
Document. write ("The new value of num is:" + num );

The result of this script is "The value of num is: 10", followed by "The new value of num is: 15 ". In addition to variables, this section also introduces the next topic, that is, operators. The equal sign (=) that you assign a value to a variable is a value assignment operator, and the plus sign (+) that you use in 5 + 5 is an arithmetic operator. The next section describes all variable operators in JavaScript and their usage.

Operator

You need operators when executing any operations in JavaScript. Operations include addition, subtraction, and comparison. There are four operators in JavaScript.

1. Arithmetic

2. Assignment

3. Comparison

4. Logic

Arithmetic Operators

Arithmetic Operators perform basic mathematical operations, such as addition, subtraction, multiplication, division, and so on. Table 2 lists and describes all available arithmetic operations in the JavaScript language.

Table 2. Arithmetic Operators

Operator description

+ Addition

-Subtraction

* Multiplication

/Division

% Modulo (finding the remainder)

++ Increment

-- Decrease
Value assignment operator

Arithmetic Operators perform basic mathematical operations, while the value assignment operator assigns values to JavaScript variables. When you assign a value to a variable in the previous section, you have seen the most commonly used value assignment operator. Table 3 lists and describes all available value assignment operators in JavaScript.

Table 3. assignment operators

Operator description

= Equal

+ = Assign the addition value (the result value of the value added to the variable) to the variable

-= Assign the subtraction value (the result value of the variable minus the value) to the variable

* = Assign the multiplication value (the result value of the variable multiplication value) to the variable

/= Assign the Division value (the result value of the variable divided by the value) to the variable

% = Assign the modulo value (result of Modulo of the variable pair value) to the variable

You have seen how to use equal signs to assign values or expressions to variables, but now I will show you how to use a slightly confusing value assignment operator. Assigning an addition value to a variable may be a strange concept, but it is actually very simple (listing 8 ).

Listing 8. Assigning an addition value to a variable
Copy codeThe Code is as follows:
Var num = 10;
Document. write ("The value of num is:" + num );

// Update the value of num to 15.
Num + = 5;
Document. write ("The new value of num is:" + num );

The result of this script is "The value of num is: 10" followed by "" The new value of num is: 15 ". As you can see, the operator in this script assigns the addition value to the variable. This can also be considered as a short writing of the script written in listing 9.

Listing 9. A longer way to assign an addition value to a variable.
Copy codeThe Code is as follows:
Var num = 10;
Document. write ("The value of num is:" + num );

// Update the value of num to 15.
Num = (num + 5 );
Document. write ("The new value of num is:" + num );

Comparison Operators

Comparison operators determine the relationship between variables or their values. You can use a comparison operator in a condition statement to compare variables or their values and calculate whether the statement is true or false to create the logic. Table 4 lists and describes all available comparison operators in the JavaScrpit language.

Table 4. Comparison Operators

Operator description

= Equal

=== Full, used for values and Object Types

! = Not equal

> Greater

<Less

> = Greater than or equal

<= Less than or equal

When writing any type of logic, the comparison of variables and values is the most basic. The example in listing 10 shows how to use the equal comparison operator (=) to determine whether 10 is equal to 1.