JavaScript tutorials-from Getting started to mastering (3)

javascript| Tutorial

JavaScript program composition

The basic composition of JavaScript scripting language is programmed by control statements, functions, objects, methods, attributes, etc.

first, program control flow
in any language, program control flow is necessary, it can make the whole program reduce confusion, make it execute in a certain way smoothly. The following are commonly used program control flow structures and statements for JavaScript:
1, if conditional statement
Basic Format
if (expression)
Statement 1;
...
Else
Statement paragraph 2;
...
Feature: If the expression is true, the statement segment 1 is executed, otherwise the statement segment 2 is executed.
Description:
The If-else statement is the most basic control statement in JavaScript, by which you can change the order in which statements are executed. The
expression must use a relational statement to implement the judgment, which is evaluated as a Boolean value.
It converts 0 and nonzero numbers to false and true, respectively.
If the statement after if has more than one line, you must enclose it with curly braces.

If statement nested
if (Boolean) statement 1;
Else (Boolean) statement 2;
Else if (Boolean) statement 3;
...
Else statement 4;

In this case, each level of the Boolean expression is evaluated, and if true, executes its corresponding statement, otherwise the statement after the else is executed.

2, for Loop statement
Basic format
for (initialization; condition; increment)
statement set;
Function: Implement conditional loop, execute statement set when condition is set, or jump out of loop body.
Description:
The initialization parameter tells the starting position of the loop, and the initial value of the variable must be given;
Condition: is the condition that is used to determine the cycle stop. If the condition satisfies, then executes the circulation body, otherwise jumps out.
Increment: The primary definition of how the loop control variable changes in each loop. A comma must be used to separate the
three primary statements.

3, while loop
Basic format
while (condition)
statement set;
This statement, like a for statement, repeats the loop when the condition is true, or exits the loop. The
for and while statements
Two statements are circular statements that are easier to understand and compact when working with numbers, while the while loop works more specifically on complex statements.

4. Break and Continue statements
As with the C + + language, use the break statement to make the loop jump out of a for or while, continue to skip the remaining statements in the loop and into the next loop.

Second, function
function provides a common and convenient ability for program designers. Usually in a complex program design, always according to the function to be completed, the program is divided into some relatively independent parts, each part of the writing a function. Thus, make each part fully independent, the task is single, the procedure is clear, understandable, easy to read, easy to maintain. JavaScript functions can encapsulate modules that may be used more than once in a program. And a program that can be invoked as an event-driven result. To implement a function to associate it with event-driven. This is a place that is not like other languages.

1. JavaScript function definition
Function name (parameter, variable) {
function body;.
return expression;
}
Description
When a function is invoked, the variable or literal can be passed as a variable.
The function is defined by the keyword function.
Function Name: Defines the name of its own functions.
A parameter table is a value that is passed to a function's use or action, and its value can be a constant, a variable, or another expression.
Call a function by specifying the function name (argument).
The value must be returned using return.
The function name is sensitive to case.
　
2, the function of the formal parameters:
In the definition of a function, we see the parameter table after the function name, which may be one or several. So how do you determine the number of parameter variables? In JavaScript, you can pass arguments. Length to check the number of parameters.
Cases:
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 (object-based) language. This differs from Java in that Java is an object-oriented language. And based on the basic characteristics of the object is the use of event-driven (Event-driven). It is in the interface with the environment, making all the input changes to simplify. Usually the action of a mouse or hotkey is what we call an event, and the action of a sequence of programs triggered by a mouse or hotkey is called an event-driven Driver. The event handler or function, which we call an event handler, is Handler.

2. Event Handling Program
The handling of object events in JavaScript is usually performed by functions (function). The basic format is the same as the function, and you can use all the functions described earlier as event handlers.
The format is as follows:
Function event handler name (parameter table) {
Event-handling statement set;
......
}

3. Event-driven
Events in JavaScript event drivers are triggered by the action of a mouse or hotkey. It mainly has the following several events:
(1) Click event onclick
The onclick event is generated when the user clicks the mouse button. The event handler or code specified by the onclick is invoked to execute. Typically generated in the following basic objects:
button (Buttons object)
CheckBox (check box) or (Check list box)
Radio (radio buttons)
Reset buttons (important button)
Submit buttons (submission button)

Example: You can activate the change () file by using the following buttons:
<Form>
<input type= "button" value= "" >
</Form>

After the onclick equals sign, you can use a function that you write as an event handler, or you can use internal functions in JavaScript. You can also use JavaScript code directly, and so on. Cases:
<input type= "button" value= "" Onclick=alert ("This is an example");
(2) onchange Change events
This event is sent when the character value is entered with the text or Texturea element, and the event is raised when an option state changes in the Select table item.
Cases:
<Form>
<input type= "text" name= "test" value= "Test" oncharge= "Check (' This.test ') >
</Form>

(3) Selected event Onselect
This event is raised when the text in the text or textarea object is highlighted.
(4) Get focus event onfocus
This event occurs when the user clicks text or textarea and a select object. The object becomes the foreground object at this time.
(5) Loss of focus onblur
When the text object or TextArea object and the Select object no longer have the focus and fall back to the background, the file is raised, and he is a corresponding relationship to the Onfocas event.
(6) Loading file onload
This event occurs when the document is loaded. OnLoad one role is to detect the value of a cookie at the first load of a document, and assign it to a variable, so that it can be used by the source code.
(7) Uninstall file OnUnload
Raises the OnUnload event when the Web page exits and updates the status of the cookie.

Iv. Examples
Example 1: The following example program is an example of automatic loading and unloading. That is, when the HTML document is loaded, the Loadform () function is invoked, and the Unloadform () function is invoked before exiting the document into another HTML document, confirming that the rear is accessible.
Test3_1.htm
<HTML>
<HEAD>
<script language= "JavaScript" >
<!--
function Loadform () {
Alert ("This is an automatic loading example!");
}
function Unloadform () {
Alert ("This is an uninstall example!");
}
-->
</Script>
</HEAD>
<body onunload= "Unloadform ()" >
<a href= "test.htm" > Call </a>
</BODY>
</HTML>

　
Example 2: This is a program that gets the browser version number. The program first displays a wave-tip message. Information about the version number of the browser is then displayed.
Test3_2.htm
<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 <) {return num;}
else {
if (num = =) {return "A"}
if (num = =) {return "B"}
if (num = =) {return "C"}
if (num = =) {return "D"}
if (num = =) {return "E"}
if (num = =) {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><BR>")
document.write ("This is a program to get a Web browser") (Sizefont)
document.write ("</CENTER></font>")
document.write ("Browser name:" +navigator.appname+ "<br>");
document.write ("Version number:" +navigator.appversion+ "<br>");
document.write ("code Name:" +navigator.appcodename+ "<br>");
document.write ("User agent Identification:" +navigator.useragent);
</script>
<body>
</body>

The output is shown in Figure 1.

Figure 1

This paper introduces the content of JavaScript programming. program flow, functions, events are the focus of our learning to master JavaScript programming.