The JavaScript language is becoming more and more popular, and is one of the most prominent languages on the Internet. You can use it across platforms and browsers, and it doesn't repel back-end languages. There are many different development libraries--some very good--these libraries are helpful for development, such as speeding up development time, and so on. The problem is that sometimes there is a lot of distance between these libraries and the original language, which makes the novice developer lack a basic understanding of the language.
This article explains the basic principles of the language through a comprehensive enumeration of the basic JavaScript concepts to provide beginners with a rudimentary understanding of the language, and the ubiquitous code example is used to illustrate how all of these concepts are embodied in the language.
Understanding JavaScript Languages
The JavaScript language is a free client-side scripting language that lets you add interactive behavior to Hypertext Markup Language (hypertext Markup language,html) pages. The client (client-side) means that JavaScript is running in the browser instead of on the server side. After the Web page is delivered by the server and loaded by the browser, client script allows the user to interact with the Web page. Google maps, for example, uses JavaScript language to support the interaction between users and maps, moving maps, zooming in and out of the interactive way. Without JavaScript, Web pages need to refresh each and every user's interaction behavior, unless, of course, the page uses plug-ins such as Adobe Flash or microsoft®silverlight. JavaScript languages do not require plug-ins.
Because the JavaScript language provides user interaction for a loaded Web page, developers often use it to implement some of the following features:
1. Dynamically add, edit, and delete HTML elements and their values.
2. Verify the form before submitting it.
3. Create cookies on the user's computer for saving and retrieving data in future visits.
before you begin, just know a few basic principles of language:
1. To include the JavaScript code in an HTML file, you have to put the code inside the script tag, and add the Text/javascript type attribute (Listing 1).
2. All JavaScript statements end with semicolons.
3. Language is case sensitive.
4. All variable names must begin with a letter or underscore.
5. You can use annotations to describe some of the lines in the script, which are written in a double slash (//) and followed by a comment.
6. You can also use annotations to annotate the script. A good way to annotate multiple lines of a script is to use the/* your script here/*. Any script that is within the asterisk will not run during execution.
Listing 1. You need to use the script tag and type attribute to include JavaScript code in an HTML file
<script type= "Text/javascript" ></script>
To hide the JavaScript code that the browser doesn't support, or if the user wants to turn the code off, just use the Annotation tab before and after the Javascrip statement (Listing 2).
Listing 2. Use annotations to hide JavaScript code not supported by browsers
Copy Code code as follows:
<script type= "Text/javascript" >
<!--
Example statement here
-->
</script>
The most common way to include JavaScript code in a Web page is to use the SRC attribute in the Script tab to load the code from an external JavaScript file (listing 3).
Listing 3. Include an external JavaScript file in 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, and there are some very real reasons for this:
1. If you have less code in your HTML page, the search engine will be able to crawl and index your site at a faster rate.
2. Keep the JavaScript code and HTML separate so that the code becomes clearer and ultimately easier to manage.
3. Because you can include multiple JavaScript files in your HTML code, you can separate JavaScript files into different file directory structures on your Web server, which is similar to how images are stored, which is a much easier way to manage your code. Clear, methodical code is always the key to making Web site management easier.
Variable
Variables store data that will be retrieved later or updated with new data. The data stored in a variable can be a value or expression, and there are three types of expressions in the JavaScript language, as described in Table 1.
Table 1. JavaScript expressions
Description of expression
The result of arithmetic calculation is a numerical value
The result of a string calculation is a string
The result of the logical calculation is a Boolean value (True or FALSE)
There are two types of variables: local and global. Local variables are declared using the keyword VAR, and declaring global variables does not require the use of the VAR keyword. Variables that use the var keyword are considered partial, because it cannot be accessed anywhere else except in the range where you declare it. For example, if you declare a local variable inside a function (which I will talk about at the end of nearly the article), the variable cannot be accessed outside of the function, which makes it part of this function. If you do not use the VAR keyword to declare the same variable, it is accessible throughout the script and not limited to that function.
Listing 4 shows an example of a local variable named num and assigned a value of 10.
Listing 4. Declare a local variable
var num = 10;
To access the value of the NUM variable in another location in the script, you only need to refer to the variable by name, as shown in Listing 5.
Listing 5. Accessing the value of a variable
Copy Code code 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 the data to the Web page, and in the remainder of this article you use this function to write the example to the Web page.
To store an arithmetic expression in a variable, you simply assign the variable to the calculated value, as shown in Listing 6. The result of the calculation, rather than the formula itself, is stored in the variable. So again, we get this result "the value of Num is:10".
Listing 6. Store an arithmetic expression
Copy Code code as follows:
var num = (5 + 5);
document.write ("The value of num is:" + num);
To change the value of a variable, refer to the variable by the name you assign to the variable, and use the equal sign to assign it a new value (listing 7). The difference this time is that you don't need to use the var keyword, because the variable has already been declared.
listing 7. Changing the value of an existing variable
Copy Code code as follows:
var num = 10;
document.write ("The value of num is:" + num);
Update num's value to 15
num = 15;
document.write ("The new value of num is:" + num);
The result of this script is first "the value of num is:10" followed by "the new value of Num is:15". In addition to explaining variables, this section introduces the next topic, the operator. The equal sign (=) You use to assign a value to a variable is an assignment operator, and the plus sign (+) you use in 5+5 is an arithmetic operator. The next section discusses all the variable operators in the JavaScript language and their usage.
Operator
You need operators to perform any operation in the JavaScript language. Operations include addition, subtraction, comparison, and so on. There are four kinds of operators in the JavaScript language.
1. Arithmetic
2. Assigning value
3. Compare
4. Logical
Arithmetic operators
Arithmetic operators perform basic mathematical operations, such as subtraction. Table 2 lists and describes all the available arithmetic operations in the JavaScript language.
Table 2. Arithmetic operators
Operator description
+ Addition
-Subtraction
* Multiplication
/Division
% modulo (find remainder)
+ + Increment
--Diminishing
assignment operator
Arithmetic operators perform basic mathematical operations, whereas the 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 assignment operator. Table 3 lists and describes all the available assignment operators in the JavaScript language.
Table 3. Assignment operator
Operator description
= equals
= = Assign the addition value (the variable plus the result value of the value) to the variable
-= assigns a subtraction value (a variable minus the result value of a value) to a variable
*= assigns the multiplication value (the result value of the variable multiplier) to the variable
/= assigns the division value (the variable divided by the result value of the value) to the variable
%= assigns a modulus value (the result of a variable to a value modulo) to a variable
You've seen how to use the equals sign to assign a value or an expression to a variable, but now I'm going to show you how to use a slightly confusing assignment operator. Assigning an addition value to a variable may be a very strange concept, but it is actually very simple (listing 8).
Listing 8. Assign an additive value to a variable
Copy Code code as follows:
var num = 10;
document.write ("The value of num is:" + num);
Update num's value 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 used as a shorthand for the script written in Listing 9.
listing 9. A longer method of assigning an additive value to a variable.
Copy Code code as follows:
var num = 10;
document.write ("The value of num is:" + num);
Update num's value 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 use comparison operators in conditional statements to create logic by comparing variables or their values to calculate whether the statement is true or false. Table 4 lists and describes all the comparison operators available in the Javascrpit language.
Table 4. Comparison operators
Operator description
= = equals
= = congruent, for value and object type
!= is not equal to
> Greater than
< less than
>= is greater than or equal to
<= less than or equal to
When writing any type of logic, the comparison of variables and values is most basic. The example in Listing 10 shows how to use equal to this comparison operator (= =) to determine whether 10 is equal to 1.
Current 1/2 page
12 Next read the full text
