[Reprint] JavaScript language (3)-Composition of javascript programs

Third, JavaScript Program Composition

The basic structure of the scripting language is to implement programming by control statements, functions, objects, methods, attributes, and so on.

I. Program Control Flow

In any language, the control flow of a program is required. It can reduce the entire program and make it run smoothly in a certain way. The following are the control flow structures and statements commonly used in javascript:

1. If Condition Statement

(1) Basic Format
If (expression)
Statement segment 1;
......
Else
Statement Segment 2;
.....

(2) function: If the expression is true, statement segment 1 is executed; otherwise, statement Segment 2 is executed.

(3) Description:
The IF-else statement is the most basic control statement in Javascript. It can be used to change the statement execution sequence.
The relational statement must be used in the expression for judgment. It is estimated as a Boolean value.
It converts zero and non-zero numbers to false and true, respectively.
If the statement after if has multiple rows, you must enclose it with curly brackets.
If statement nesting
If (Boolean) Statement 1;
Else (Boolean) Statement 2;
Else if (Boolean) Statement 3;
......
Else Statement 4;
In this case, the Boolean expression of each level is calculated. If it is true, the corresponding statement is executed. Otherwise, the else statement is executed.

2. For Loop statements

(1) Basic Format
For (initialization; condition; increment)
Statement set;

(2) function: implements a conditional loop. When the condition is set, the statement set is executed. Otherwise, the loop body jumps out.

(3) Description:
The initialization parameter indicates the starting position of the loop. The initial value of the variable must be assigned;
Condition: it is a condition used to determine when the loop is stopped. If the conditions are met, the system executes the loop body. Otherwise, the system jumps out.
Increment: mainly defines how the cyclic control variables change during each loop.
Separate the three main statements with commas.

3. While Loop

(1) Basic Format
While (condition)
Statement set;
This statement is the same as the for statement. If the condition is true, the loop is repeated. Otherwise, the loop is exited.

(2) For and while statements
Both statements are cyclic statements, which are easier to understand and compact when using for statements to process related numbers. While while statements have more special effects on complex statements.

4. Break and continue statements

Similar to the C ++ language, the break statement is used to make the loop jump out of the for or while clause. The continue skips the remaining statements in the loop and enters the next loop.

Ii. Functions

Functions provide a convenient capability for program designers. During a complex program design, the program is always divided into relatively independent parts based on the functions to be completed, and a function is written for each part. Thus, each part is fully independent, with a single task, clear procedures, easy to understand, easy to read, and easy to maintain. JavaScript Functions can encapsulate modules that may be used multiple times in a program. Programs that can be called as event-driven results. Thus, a function is implemented to associate it with event-driven. This is different from other languages.

1. JavaScript function definition

Function Name (parameter, variable ){
Function body;
Return expression;
}
Note:
When a function is called, the variables or literal values used can be passed as variable elements.
A function is defined by the keyword function.
Function Name: define the name of your function.
A parameter table is a value passed to a function for use or operation. It can be a constant, variable, or other expression. Call a function by specifying the function name (real parameter.
Return must be used.
The function name is case sensitive.

2. Form parameters in the function:

In the function definition, we can see that there is a parameter table after the function name. These parameter variables may be one or several. How can we determine the number of parameter variables? In JavaScript, you can use arguments. length to check the number of parameters. Example:
Function function_name (exp1, exp2, exp3, exp4)
Number = function _ name. Arguments. length;
If (number> 1)
Document. wrile (exp2 );
If (number> 2)
Document. Write (exp3 );
If (number> 3)
Document. Write (exp4 );
...

Iii. event-driven and event handling

1. Basic Concepts

Javascript is an object-based language. This is different from Java, where Java is an object-oriented language. The basic feature of objects is event-driven ). It simplifies all input changes in an interface. Generally, the mouse or hot key action is called an event, and the action of a series of programs triggered by the mouse or hot key is called an event driver ). We call it an event handler to process events or functions ).

2. Event Handler

In JavaScript, Object events are usually handled by functions. The basic format is the same as that of all functions. You can use all the functions described above as event handlers. The format is as follows:
Function event processing NAME (parameter table ){
Event Processing statement set;
......
}

3. event-driven

Javascript event-driven events are triggered by mouse or hot key actions. It mainly has the following events:

(1) Click Event onclick
An onclick event is generated when you click the mouse button. At the same time, the event handler or code specified by onclick will be called and executed. Usually generated in the following basic objects:
Button (Button Object)
Checkbox (check box) or (check list box)
Radio (single button)
Reset buttons (important button)
Submit buttons (submit button)
For example, you can use the following buttons to activate the change () file:
<Form>
<Input type = "button" value = "" onclick = "Change ()">
</Form>
After the onclick equal sign, you can use your own functions as the event processing program, or use internal functions in JavaScript. You can also directly use JavaScript code. Example:
<Input type = "button" value = "" onclick = alert ("this is an example ");

(2) onchange event
This event is triggered when the input character value of the text or texturea element is changed, and this event is also triggered when the status of an option in the Select Table item changes.
Example: <form>
<Input type = "text" name = "test" value = "test" oncharge = "check (this. Test)">
</Form>

(3) onselect event
This event is triggered when the text in the text or textarea object is highlighted.

(4) Get the focus event onfocus
This event is generated when you click Text, textarea, and select objects. In this case, the object becomes the foreground object.

(5) loss of focus onblur
When a Text object, textarea object, and select object no longer have the focus and return to the background, this file is triggered and corresponds to the onfocas event.

(6) load the file onload
This event is generated when a document is loaded. Onload is used to detect the cookie value when a document is loaded for the first time, and assign a value to it using a variable so that it can be used by the source code.

(7) uninstall the file onUnload
When the web page exits, the onUnload Event is triggered and the cookie status can be updated.

Iv. Examples

Example 1: The following Program is an example of automatic loading and uninstallation. That is, when an HTML document is loaded, the loadform () function is called, and the unloadform () function is called before exiting the document to enter another HTML document.

Test3_1.htm

<HTML>
<Head>
<Script language = "JavaScript">
<! --
Function loadform (){
Alert ("Have you seen me? I was automatically loaded! Click "Next" and I will be uninstalled ");
}
Function unloadform (){
Alert ("click" OK "and I will be uninstalled! ");
}
// -->
</SCRIPT>
</Head>
<Body onload = "loadform ()" onUnload = "unloadform ()">
<A href = "test.htm"> next </a>
</Body>
</Html>

Example 2: This is a program that obtains the browser version number. The program first displays a wave prompt. The browser version information is displayed.

Test3_2.htm

<HTML>
<Head>
<Script language = "JavaScript"> <! --
// -->
Function makearray (n ){
This. Length = N
Return this
}
Function hexfromdec (Num ){
Hex = new makearray (1 );
VaR hexstring = "";
VaR shifthex = 16;
VaR temp1 = num;
For (x = 1; x> = 0; X --){
Hex [x] = math. Round (temp1/shifthex-. 5 );
Hex [x-1] = temp1-hex [x] * shifthex;
Temp1 = hex [x-1];
Shifthex/= 16;
}
For (x = 1; x> = 0; X --) {hexstring + = getletter (hex [x]);}
Return (hexstring );
}
　
Function getletter (Num ){
If (Num <10) {return num ;}
Else {
If (num = 10) {return ""}
If (num = 11) {return "B "}
If (num = 12) {return "C "}
If (num = 13) {return "D "}
If (num = 14) {return "E "}
If (num = 15) {return "F "}
}
}
Function Rainbow (text ){
VaR color_d1;
VaR allstring = "";
For (I = 0; I <text. length; I = I + 2 ){
Color_d1 = 255 * Math. Sin (I/(text. Length/3 ));
Color_h1 = hexfromdec (color_d1 );
Allstring + = "<font color =" + color_h1 + "FF" + color_h1 + ">" + text. substring (I, I + 2) + "</font> ";
}
Return allstring;
}
　
Function sizefont (text ){
VaR color_d1;
VaR allstring = "";
VaR flag = 0;
For (I = 0, j = 0; I <text. length; I = I + 1 ){
If (flag = 0 ){
J ++;
If (j> = 7 ){
Flag = 1 ;}}
If (flag = 1 ){
J = J-1;
If (j <= 0 ){
Flag = 0 ;}}
Allstring + = "<font size =" + J + ">" + text. substring (I, I + 1) + "</font> ";
}
Return allstring;
}
Document. Write ("<font size = 8> <center> ")
Document. Write ("<br> ")
Document. Write (sizefont ("do you want to know the details of your browser? See below "))
Document. Write ("</center> </font> ")
Document. Write ("browser name:" + navigator. appname + "<br> ");
Document. Write ("version:" + navigator. appversion + "<br> ");
Document. Write ("code name:" + navigator. appcodename + "<br> ");
Document. Write ("User Agent ID:" + navigator. useragent );
</SCRIPT>
<Body>
</Body>
</Html>

 

This section describes the content of JavaScript programming. Program streams, functions, and events are the focus of JavaScript programming.