Javasceipt Index
Where's Javasceipt, 2?
Where to place JavaScript 2
Script in the head section: 2
Scripts located in the body section: 2
Script in the Body and Head section: 2
Using external JavaScript 3
Data Type 3
Variable 4
Declare (CREATE) JavaScript variable 4
Assign a value of 4 to a JavaScript variable
Assign a value of 4 to an undeclared JavaScript variable
Re-declare JavaScript variable 4
JavaScript Arithmetic 5
Operator 5
Array 5
Loop Statement 7
Function 7
Event 7
Objects in the Javasceipt 8
Instance 9
1. Form Verification 9
2. Timer 13
3. Serial Number Verification 14
Where is Javasceipt put?
Where to place JavaScript
The script in the page executes immediately after the page is loaded into the browser. We don't always want this. Sometimes we want the script to execute when the page is loaded, and at the other time we want to execute the script when the user triggers the event.
Scripts located in the head section:
The script is executed when the script is invoked, or when the event is triggered. Once you have placed the script in the Head section, you can ensure that it is loaded before you need to use the script.
<script type= "Text/javascript" >
....
</script>
....
Scripts located in the body section:
The script is executed when the page is loaded. When you place the script in the body section, it generates the contents of the page.
<body>
<script type= "Text/javascript" >
....
</script>
</body>
Script in the Body and head section:
You can place any number of scripts in the document so that you can place the script in the body and into the head section.
<script type= "Text/javascript" >
....
</script>
<body>
<script type= "Text/javascript" >
....
</script>
</body>
Using external JavaScript
Sometimes, you might want to run JavaScript on several pages without writing the same script on every page.
To achieve this, you can write JavaScript to an external file. Then save the file with a. js suffix.
Note: External files cannot contain <script> tags.
Then assign the. js file to the "src" attribute in the <script> tag, and you can use this external file:
<script src= "Xxx.js" >....</script>
<body>
</body>
Tip: You can place the. js file in a subdirectory of the site directory that usually holds the script, which makes it easier to manage and maintain.
Data type
| Data type |
Description |
Example |
| String type |
One or more characters enclosed in single or double quotes |
such as "PHP", "I like study php" and so on |
| Numeric type |
Include an integer or floating-point number that contains a decimal point
Number or number of scientific notation) |
such as-128, 12.9, 6.98E6, etc. |
| Boolean type |
Boolean constants have only two states, that is, true or false |
such as Event.returnvalue=false |
| Object type |
Used to specify an object to use in a JavaScript program |
such as page form elements |
| Null value |
You can clear the contents of a variable by assigning a null value to a variable |
such as A=null |
| Undefined |
Indicates that the variable has not been assigned a value |
such as Var a |
Variable
declaring (creating) a JavaScript variable
Creating a variable in JavaScript is often referred to as a "declaration" variable.
You can declare JavaScript variables by using the VAR statement:
var x; var carname;
After the above declaration, the variables do not have a value, but you can assign values to the variables when you declare them:
var x=5; var carname= "Volvo";
Note: When assigning a text value to a variable, enclose the value in quotation marks.
Assigning values to JavaScript variables
To assign a value to a JavaScript variable by an assignment statement:
x=5; Carname= "Volvo";
The variable name is to the left of the = symbol, and the value you want to assign to the variable is to the right of =.
After the above statement is executed, the value saved in the variable x is 5, and the value of Carname is Volvo.
Assigning values to an undeclared JavaScript variable
If the variable you are assigning has not been declared, the variable is declared automatically.
These statements:
x=5; Carname= "Volvo";
The same effect as these statements:
var x=5; var carname= "Volvo";
Re-declaring JavaScript variables
If you declare a JavaScript variable again, the variable will not lose its original value.
var x=5; var x;
After the above statement is executed, the value of the variable x is still 5. When the variable is re declared, the value of x is not reset or cleared.
JavaScript arithmetic
As with algebra, you can use JavaScript variables to do arithmetic:
y=x-5; z=y+5;
Operator
| == |
Equals |
X==8 to False |
| === |
Congruent (value and type) |
X===5 is true;x=== "5" to False |
Array
Defining arrays
An array object is used to store a series of values in a separate variable name.
We use the keyword new to create an array object. The following code defines an array object named MyArray:
var myarray=new Array ()
There are two ways to assign values to an array (you can add as many values as you want, like you can define any number of variables you need).
1:
var mycars=new Array ()
mycars[0]= "Saab"
mycars[1]= "Volvo"
mycars[2]= "BMW"
You can also use an integer argument to control the size of an array:
var mycars=new Array (3)
mycars[0]= "Saab"
mycars[1]= "Volvo"
mycars[2]= "BMW"
2:
var mycars=new Array ("Saab", "Volvo", "BMW")
Note: If you need to specify numeric or logical values within an array, the variable type should be either a numeric variable or a Boolean variable, not a character variable.
accessing arrays
You can access a particular element by specifying the array name and the index number.
Here is the line of code:
document.write (Mycars[0])
Here is the output:
Saab
To modify a value in an existing array
If you want to modify the values in an existing array, add a new value to the specified bottom label:
Mycars[0]= "Opel";
Now, the above code:
document.write (Mycars[0]);
Will output:
Opel
Loop statement
Function
Event
JavaScript gives us the ability to create dynamic pages. Events are behaviors that can be detected by JavaScript.
Each element in a Web page can produce events that can trigger JavaScript functions. For example, we can trigger a function by creating an OnClick event when a user clicks on a button. Events are defined in an HTML page.
Examples of events:
· Mouse click
· Page or image load
· Hover over a hotspot on the page
· Select an input box in the form
· Confirm the form
· Keyboard keys
Note: Events are usually used in conjunction with functions that are executed when an event occurs.
If you need more knowledge about JavaScript-aware events, please read our JavaScript event reference manual.
OnLoad and OnUnload
The onload and OnUnload events are triggered when the user enters or leaves the page.
The onload event is commonly used to detect the browser type and version of a visitor and then load a specific version of the page based on that information.
The onload and OnUnload events are also often used to process cookies created by users entering or leaving the page. For example, when a user enters the page for the first time, you can use a message box to ask the user's name. The name is saved in the cookie. When the user enters this page again, you can use another message box to greet the user: "Welcome John doe!".
Onfocus, OnBlur and OnChange.
Onfocus, OnBlur, and onChange events are often used in conjunction with each other to validate a form.
The following is an example of using the OnChange event. Once the user changes the contents of the domain, the Checkemail () function is invoked.
<input type= "text" size= "id=" email "onchange=" checkemail () ">
OnSubmit
OnSubmit is used to validate all form fields before submitting the form.
The following is an example of using the OnSubmit event. The Checkform () function is invoked when the user clicks the confirmation button in the form. This commit will be canceled if the value of the field is invalid. The return value of the Checkform () function is true or FALSE. If the return value is true, the form is submitted, whereas the commit is canceled.
<form method= "POST" action= "xxx.htm" onsubmit= "return Checkform ()" >
OnMouseOver and onmouseout
OnMouseOver and onmouseout are used to create "dynamic" buttons.
The following is an example of using the OnMouseOver event. When the OnMouseOver event is detected by the script, a warning box pops up:
<a href= "http://www.w3school.com.cn"
onmouseover= "alert (" an onmouseover event "), return False" >
</a>
Objects in the Javasceipt
1. Built-in objects (math, date, string, built-in functions)
Data Object
Timer
2. Browser object (Window object)
Window method
Location method
History method
3. Text Object
4. Custom Objects
Instance
1. Form validation
<HTML>
<HEAD>
<TITLE> forms and Forms Application </TITLE>
<meta name= "generator" content= "EditPlus" >
<script>
function Validate ()
{
var Username=document.getelementbyid ("username");
var Password=document.getelementbyid ("PSW1");
var Conpassword=document.getelementbyid ("Psw2");
var gender=document.getelementsbyname ("Gender");
var interest=document.getelementsbyname ("hobby");
var n=0;
var Comment=document.getelementbyid ("info");
if (username.value.length<1)
{alert ("User name cannot be empty!") ");
return false;
}
if (username.value.length<4username.value.length>10)
{Alert ("username length should be between 4-10!") ");
return false;
}
if (password.value.length<1)
{Alert (password cannot be empty!) ");
return false;
}
if (password.value.length<4password.value.length>10)
{Alert ("Password length should be between 4-10!") ");
return false;
}
if (Password.value!=conpassword.value)
{Alert ("Confirm password does not match password!") ");
Conpassword.value= "";
return false;
}
if (!gender[0].checked&&!gender[1].checked)
{alert ("Sex must be chosen first!") ");
return false;
}
for (Var i=0;i<interest.length;i++)
{
if (interest[i].checked)
{n++;}
}
if (n<1)
{Alert ("Choose at least one!") ");
return false;
}
if (n>3)
{alert ("More than three interests selected!") ");
return false;
}
if (comment.value.length<1)
{Alert ("Resume must be filled out!") ");
return false;
}
return true;
}
</script>
</HEAD>
<body >
<CENTER><H2> fill in the User Information page <H2></CENTER>
<form action= "http://www.jianqiao.com/bbs/login.jsp" enctype= "Multipart/form-data" "method=" POST "onsubmit=" return validate () ">
<table border=2 height=400 width=400 bgcolor=pink align=center>
<TR>
<TD> User name:
</TD>
<td><input type= "text" name= "username" >
</TD>
</TR>
<TR>
<TD> Password:
</TD>
<td><input type= "Password" name= "PSW1" >
</TD>
</TR>
<TR>
<TD> Confirm Password:
</TD>
<td><input type= "Password" name= "PSW2" >
</TD>
</TR>
<TR>
<TD> Sex:
</TD>
<TD>
<input type= "Radio" name= "Gender" value= "male" > Male
<input type= "Radio" name= "Gender" value= "female" > Female
</TD>
</TR>
<TR>
<TD> Hobbies:
</TD>
<td><input type= "checkbox" name= "Hobby" value= "Sport" > Sports
<input type= "checkbox" name= "Hobby" value= "drawing" > Painting
<input type= "checkbox" name= "hobby" value= "photography" > Photography
<input type= "checkbox" name= "hobby" value= "Travel" > Tourism
</TD>
</TR>
<TR>
<TD> Your education:
</TD>
<TD>
<select name= "Education Background" >
<option value= "Choice" >--Please choose-
<option value= "Middle School" > Junior High School
<option value= "Height School" > High School
<option value= "University" University of >
<option value= "Master" > Master
Dr. <option value= "Doctor" >
</select>
</TD>
</TR>
<TR>
<TD> your CV:
</TD>
<td><textarea name= "info" cols = "Rows" = "5" ></textarea>
</TD>
</TR>
<TR>
<TD> Upload accessories: </TD>
<td><input type= "file" name= "F1" ></TD>
</TR>
<tr align=center>
<TD colspan=2><input type= "Submit" value= "submitted" >
<input type= "reset" value= "reset" ></TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML> |
2. Timer
<script type= "Text/javascript" >
var c=0
var t
function Timedcount ()
{
document.getElementById ("TXT"). Value=c
C=c+1
T=settimeout ("Timedcount ()", 1000)
}
function Stopcount ()
{
Cleartimeout (t)
}
</script>
<body>
<form>
<input type= "button" value= "Start the timer!" "Onclick=" Timedcount () >
<input type= "text" id= "TXT" >
<input type= "button" value= "Stop timing!" "Onclick=" Stopcount () >
</form>
<p>
Please click on the "Start Timer" button above. The input box is timed from 0 onwards. Click "Stop Timer" to stop timing.
</p>
</body>
3. Serial Number Verification
<HTML>
<HEAD>
<TITLE>link</TITLE>
<script type= "Text/javascript" >
function MoveNext (object,index)
{
if (object.value.length==4)
{Document.forms[0].elements[index+1].focus ();}
}
function Showresult ()
{
var f=document.forms[0];
var result= "";
for (Var i=0;i<4;i++)
{
Result+=f.elements[i].value;
}
Alert ("Serial number is:" +result);
}
</script>
</HEAD>
<body onload= "Document.forms[0].elements[0].focus ();" >
<form>
<input type= "Text" size= "4" maxlength= "4" onkeyup= "MoveNext (this,0);" >-
<input type= "Text" size= "4" maxlength= "4" onkeyup= "MoveNext (this,1);" >-
<input type= "Text" size= "3" maxlength= "4" onkeyup= "MoveNext (this,2);" >-
<input type= "Text" size= "4" maxlength= "4" onkeyup= "MoveNext (this,3);" >
<input type= "button" value= "shows" onclick= "Showresult ();" >
</BODY>
</HTML>
This article links http://www.cxybl.com/html/wyzz/JavaScript_Ajax/20121211/34877.html
