Home > Developer > JavaScript
The order may be messy. If you write more words, some terms may not be used properly. You are welcome to criticize and correct them. The following sample programs have been verified by myself and are compatible with various browsers. OK.
1. Variable declaration and reference
Variables must be explained first and then referenced. We all know this, but we still need to talk about it, because we will discuss a related issue later.
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
2. function declaration and call
JavaScript is a descriptive scripting language that is dynamically parsed and executed by browsers. There are two methods to define a function. The browser has different resolution sequence for different methods.
Copy codeThe Code is as follows:
// Define the "defined" function
Function Fn1 (){
Alert ("Hello World! ");
}
// "Value assignment" Function Definition
Var Fn2 = function (){
Alert ("Hello wild! ");
}
During page loading, the browser scans every js code block (or file) on or loaded on the page. If a defined function is encountered, the browser performs preprocessing (similar to C compilation ), after the processing is complete, start to execute from top to bottom. When a value-assignment function is encountered, the function is only assigned to a variable, do not pre-process (similar to the principle that variables must be defined first and then referenced. The following is a simple example:
Copy codeThe Code is as follows:
// Define the "defined" function
Fn1 ();
Function Fn1 (){
Alert ("Hello World! ");
}
Normal execution. "Hello World!" is displayed !", The browser pre-processes Fn1 and then starts from Fn1.
Copy codeThe Code is as follows:
// "Value assignment" Function Definition
Fn2 ();
Var Fn2 = function (){
Alert ("Hello wild! ");
}
Firebug error: Fn2 is not a function. The browser does not pre-process Fn2 and runs it in sequence. Therefore, the error Fn2 is not defined.
3. Processing of code blocks and js files
"Code block" refers to a pair of javascript code wrapped in the <script type = "text/javascript"> </script> label. A file refers to a file. Nonsense: D
The browser scans each block or file independently, and then executes the global code in sequence (as mentioned in 2 ). Therefore, in a block (file), a function can be defined after being called. However, in the two blocks, the block where the function is defined must be before the block where the function is called.
This is a great detour. Let's take a look at the example:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Fn ();
</Script>
<Script type = "text/javascript">
Function Fn (){
Alert ("Hello World! ");
}
</Script>
// Error: Fn is notdefined. The two blocks are correct.
4. The repeated definition function will overwrite the previous definition.
This is the same as the repeated definition of variables. Code:
Copy codeThe Code is as follows:
Function fn (){
Alert (1 );
}
Function fn (){
Alert (2 );
}
Fn ();
// Pop-up: "2"
If so:
Copy codeThe Code is as follows:
Fn ();
Function fn (){
Alert (1 );
}
Function fn (){
Alert (2 );
}
// Still pop up: "2"
Or "2" is displayed. Why? I have told you everything...
5. Execution of the onload function and the internal function of the body
The internal function of the body is executed before the onload function. The test code is as follows:
Copy codeThe Code is as follows:
// Html head...
<Script type = "text/javascript">
Function fnOnLoad (){
Alert ("I am outside the Wall! ");
}
</Script>
<Body onload = "fnOnLoad ();">
<Script type = "text/javascript">
Alert ("I am inside the Wall ..");
</Script>
</Body>
// "I am inside the Wall..." is displayed first ..";
// "I am outside the Wall!" is displayed !"
The onload event trigger condition of the body is that the body content is loaded completely, and the js Code in the body will run before this event is triggered (why? 6 tell you ..)
6. Is JavaScript multi-threaded or single-threaded?
Strictly speaking, JavaScript does not have the concept of multithreading. All programs are executed in a "single thread" order.
Here is an inappropriate example:
Copy codeThe Code is as follows:
Function fn1 (){
Var sum = 0;
For (var ind = 0; ind <1000; ind ++ ){
Sum + = ind;
}
Alert ("the answer is" + sum );
}
Function fn2 (){
Alert ("I knew it, but I did not say it ");
}
Fn1 ();
Fn2 ();
// The following message is displayed: "The answer is 499500 ",
// The prompt is displayed: "I knew it, but I did not say it"
Are you sure you want to ask: Isn't it a multi-thread process for delayed execution and asynchronous Ajax loading? Yes, the following program does look like "multithreading ":
Copy codeThe Code is as follows:
Function fn1 (){
SetTimeout (function (){
Alert ("call first ")
},1000 );
}
Function fn2 (){
Alert ("call me later ");
}
Fn1 ();
Fn2 ();
// First pop up: "Call after ",
// One second later: "I will call it first"
It seems that fn2 () and the latency program are two separate processes, but in fact, this is the "Callback" mechanism in JavaScript, similar to the "interrupt and Response" in the operating system-the latency Program sets an "interrupt" and then executes fn2 (). After 1000 milliseconds, the system calls back and executes fn1 ().
Similarly, the onload event called by the body in step 5 also uses the callback mechanism-after the body is loaded, the callback executes the fnOnLoad () function.
The same is true for data processing functions in Ajax requests.
For a more in-depth discussion on the JavaScript thread issue, let's take a look at the threads in this javascript article and the introduction to JavaScript multithreading programming on infoQ.
Sleepy. Let's talk about the callback function.
7. Callback Function
Why is the callback function used? Is the callback execution function, and nonsense: D
As stated in figure 6, the most common callback functions are browser events such as onclick, onmouseover, onmousedown, and onload, and Ajax asynchronous request data processing functions; setTimeOut delayed execution, setInterval cyclic execution functions, and so on.
Simply write a pure callback function:
Copy codeThe Code is as follows:
Function onBack (num ){
Alert ("I am late ");
// Execute num.
}
Function dating (hours, callBack ){
Var SP = 0; // SP, angry Value
// Female pig stood in the snow for hours
// Starts the loop ..
SP ++;
// Loop ends...
CallBack (SP );
}
Dating (1, onBack );
After running dating, run the callback function onBack -- the appointment is over, and the storm starts.
I will write it here today. Some more in-depth things are to be sorted out, and more things need to be learned. You are welcome to correct and supplement them.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
