Next we will write a series about JavaScript learning. I hope to learn JavaScript with you. Why should I learn JavaScript? We can program without using JavaScript, right, but what will it do if we learn it? I will give it to you:
Javascript is a prototype inherited from Netscape livescript prototype. It is a case-sensitive client scripting language of the object-oriented dynamic type. The main purpose is to solve server-side languages, such as Perl, the speed issues left over to provide customers with smoother browsing results. At that time, the server needed to verify the data. Because the network speed was quite slow and only 28.8 Kbps, the verification process was too time-consuming. As a result, the browser navigator of Netscape has added JavaScript to provide basic data verification functions. In short, JavaScript is a language that improves user experience.
Now let's take a look at common JavaScript problems, so that we can easily implement our code later. The content of this part is mainly described as follows:
Case Sensitive:
In fact, this part of content is mainly used to distinguish us from other languages. The language we used earlier: VB is not case sensitive, and the Javascript we are talking about is case sensitive.
JS methods and variables are case sensitive. Therefore, function myfunction {} and function myfunction () are different.
This rule applies to JavaScript core objects such as array and object. when defining an array, the array must start with uppercase. When you write the array in lowercase, you will find that the font color of the array changes.
Single quotation marks and double quotation marks:
Single quotation marks and double quotation marks can be used to create strings without special differences in Js. But as a general rule, most JS developers prefer to use single quotes instead of double quotes, but because the XHTML specification requires that all attribute values be enclosed in double quotes. In this way, the single quotation marks are used in JS, and the use of double quotation marks on the XHTML attribute makes the code of the two more convenient and clearer.
Single quotation marks can contain double quotation marks. Otherwise, double quotation marks can also contain single quotation marks.
Let's look at an example:
In this Code segment, because a is an attribute value, double quotation marks are used. Then, our single quotation marks can contain double quotation marks. Therefore, the whole single quotation mark is a string, then + is a connector, so this entire part is connected. So we can see the second part of the code. Because a transfer character is added next to a, if this escape character is not found, it will end when the code runs to class =. We can clearly see that the following code is obviously not clear and comfortable.
However, escape characters are required for the following scenarios:
var temp='<p class="a"> What\'s this?';
If a single quotation mark contains a single quotation mark, escape the character.
Brackets:
Note that the brackets in Javascript contain two types of semantics, which can be a separator or expression.
Separators are very familiar to everyone. Here is an example to illustrate: (1 + 3) * 3 equals 12.
The expression is of this type. Let's take a look:
(function(){})();
Here, a pair of parentheses before the function is used as the separator, And the parentheses below indicate that this method is executed immediately. For example:
First:
<Title> meaning of parentheses </title>
Second:
<Title> meaning of parentheses </title>
The two results are the same, and we can see the differences between the two codes. The first code is loaded directly in onload. However, the second code uses parentheses to indicate the effect of immediate execution, and we simply use the anonymous effect to immediately execute this function. So we achieved the same effect. There is another way of writing:
<Title> meaning of parentheses </title>
This is actually the same as the first method. Here I want to say: when will onload start loading? It is called only after the whole page is loaded. The whole page includes image loading. Sometimes, when there are many images, we call this onload function very slowly. Of course, there is another way to load the text first, then call onload in parallel, and then load other images. We can do this. Let's briefly mention it.
Function call and reference:
We just wrote two forms, one with parentheses, in the body. Then we write directly in the window without parentheses; this involves the issue of function calling and reference. Let's take a look:
var foo=example(); var foo1=example;
We can see that the parentheses in the front are the meaning of immediate execution. This means that we call example and pay the return value of the function to foo. The second one is to point the example function pointer to foo1. Therefore, parentheses indicate the return values of a function. Without parentheses, they indicate the reference of a function.
Line feed: We can use backslash escape characters to connect or use + to connect.
Optional:
In JS, each line of statements does not end with a semicolon. So we can see:
Alert ();
And
Alert ()
There is no difference.
But for the following code, such:
if(a==b)alert(b)alert(a)
Not translated
if(a==b);alert(b);alert(a);
It is translated:
if(a==b){alert(b)}alert(a);
Overload:
JS does not support overloading. Therefore, the overload mentioned here is more similar to replacement. For example:
Function myfunction (a, B ){}
Function myfunction (){}
Because the above statement is not overloaded, the following myfunction function will overwrite the above function. For example:
<Title> overload </title>
The result is:
In fact, the first one is replaced. Note that JavaScript calls are only related to the function name and function parameters. For example:
<Title> overload </title>
The displayed result is the same as that shown in the previous step.
When writing Javascript methods, you must note that do not use reserved words for names, unless you say that I must overwrite the reserved methods, otherwise, your code overwrites the JS core functions, such:
<Title> overload </title>
Nothing is displayed, but no error is reported.
Scope and closure:
Scope refers to the code space that has access permissions to a property or method.
Function myfunction (){
VaR temp = "ABC ";
}
The above temp cannot be accessed outside the function.
A closure is a concept related to the scope. It refers to the internal function that can still access the attributes of its external function even after the external function is executed and terminated. For example:
<Title> closure </title> <SCRIPT type = "text/JavaScript"> function newaa () {for (VAR I = 1; I <= 3; I ++) {var anchor = document. getelementbyid ("anchor" + I); anchor. onclick = function () {alert ("My anchor is anchor" + I) ;}} window. onload = newaa; </SCRIPT>
Let's take a look at the effect:
This is the case no matter which ABC we click. Why? Let's take a look at it. When the click event happens, our onload event is loaded, so I becomes 4. This is the case. Let's take a look at how we can solve this problem:
<Title> closure </title> <SCRIPT type = "text/JavaScript"> function newaa () {for (VAR I = 1; I <= 3; I ++) {var anchor = document. getelementbyid ("anchor" + I); registerlistener (anchor, I) ;}} function registerlistener (anchor, I) {anchor. onclick = function () {alert ("My anchor is anchor" + I) ;}} window. onload = newaa; </SCRIPT>
In this way, we can achieve what we want. This is a function of the closure.