If you have focus, you must lose Focus. The onblur event and onfocus are relative events when the cursor leaves the current get poly
The onblur event is triggered while the calling program is Executed.
The following code, the page has a user and password two text boxes. The current cursor is within the user text box (that is, the focus
Text box), triggering the onblur event when the cursor leaves the text box (that is, when it loses focus), and invoking the message ()
<! DOCTYPE html>
<meta http-equiv= "content-type" content= "text/html;charset=utf-8" >
<title> Lost Focus Events </title>
<script type= "text/javascript" >
Function Message () {
Alert ("please Make sure you have entered the username and Leave!") ")}
</script>
<body>
<form>
User: <input name= "username" type= "text" value= "please Enter user name:" onblur= "message ()" >
Password: <input name= "password" type= "text" value= "please Enter password:" >
</form>
</body>
The event is selected and the Onselect event is triggered when text in a text box or text field is selected, while calling
Program will be Executed.
The following code, when the text in the User text box is selected, triggers the onselect event and calls the function message ()
<! DOCTYPE html>
<meta http-equiv= "content-type" content= "text/html;charset=utf-8" >
<title>onselect</title>
<script type= "text/javascript" >
Function Message () {
Alert ("you triggered the selected event");}
</script>
<body>
<form>
User: <input name= "username" type= "text" value= "please Enter user name! "onselect=" message () ">
<!--the onselect event is triggered when the text in the User text box is Selected. -
</form>
</body>
The onchange event is triggered by altering the contents of the text box, while executing the called Program. The following code,
When the user changes the text in the textbox, the dialog box pops up and you change the text content! "
<! DOCTYPE html>
<meta http-equiv= "content-type" content= "text/html;charset=utf-8" >
<title>onChange</title>
<script type= "text/javascript" >
Function message () {alert ("you changed the text Content!") ")}
</script>
<body>
<form>
User: <input name= "username" type= "text" value= "please Enter user name" onchange= "message ()" >
<!--the onchange event is triggered when the text in the User's text box is Changed. -
</form>
</body>
The event occurs immediately after the page is loaded and executes the called Program. Note: 1. Loading the page
, the onload event is triggered and the event is written inside the <body> Tag. 2. The load page of this section can be interpreted as opening
A new Page. The following code, when loading a new page, pop-up dialog box "load, please wait ..."
<! DOCTYPE html>
<meta http-equiv= "content-type" content= "text/html;charset=utf-8" >
<title>onLoad</title>
<script type= "text/javascript" >
Function Message () {
Alert ("load, Please wait ...");
</script>
<body onload= "message ()" >
Welcome to learn JavaScript
</body>
When the user exits the page (page close, page refresh, and so on), the OnUnload event is triggered while the call is executed
The Program.
Note: different browsers have different support for onunload Events.
The following code, when exiting the page, pops up the dialog box "are you sure you want to leave this page?" "
<! DOCTYPE html>
<meta http-equiv= "content-type" content= "text/html;charset=utf-8" >
<title>onUnload</title>
<script type= "text/javascript" >
window.onunload=onunload_message;
function Onunload_message () {
Alert ("are you sure you want to leave this page?");
}
</script>
<body>
Welcome to learn JavaScript
</body>
Leave a question:
Use JS to complete a simple calculator function. After you have entered an integer into the 2 input boxes, click on the third input box to give a subtraction of 2 integers.
Tip: get the value of the element set and get method for: example: assignment: document.getElementById ("id"). value = 1; var = document.getelementbyid ("id"). value;
The answers are as Follows:
<! DOCTYPE html>
<title> Events </title>
<script type= "text/javascript" >
function Count () {
Gets the value of the first input box
var a=parseint (document.getelementbyid ("txt1"). value);
Gets the value of the second input box
var b=parseint (document.getelementbyid ("txt2"). value);
Gets the value of the selection box
var C=document.getelementbyid ("select"). value;
Gets the value selected by the Drop-down box to change the subtraction algorithm
var d;
Switch (c) {case "+": d=a+b; Break Case "-": d=a-b; Break Case "*": d=a*b; Break Case "/": d=a/b; Break }//set the value of the result input box to document.getElementById ("fruit"). value=d;
}
</script>
<body>
<input type= ' text ' id= ' txt1 '/>
<select id= ' SELECT ' >
<option value= ' + ' >+</option>
<option value= "-" >-</option>
<option value= "*" >*</option>
<option value= "/" >/</option>
</select>
<input type= ' text ' id= ' txt2 '/>
<input type= ' button ' value= ' = ' onclick= ' Count () '/> <!--call the created function via the = button to get results--
<input type= ' text ' id= ' fruit '/>
</body>
What is an object? Everything in JavaScript is an object, such as: strings, arrays, numbers, functions
And so on, each object has properties and METHODS.
Object properties: reflect the object of certain specific properties, such as: string length of the image of the long width, etc.;
Object: an action that can be performed on an object. For example, the "submit" form, the time
"acquisition" (getYear), etc.;
JavaScript provides multiple built-in objects, such as string,date,array, and so on, defined before using objects,
Use the Array object as Follows:
var objectname=new Array ();//use The New keyword to define an object
Or
var objectname=[];
Syntax for accessing object properties:
Objectname.propertyname
If you use the Length property of the array object to get the lengths of the Arrays:
var myarray=new array (6);//define Array Object
var myl=myarray.length;//access array length Long property
When the above code executes, the value of MYL is 6
Methods for accessing Objects:
Objectname.methodname ()
Use the toUpperCase () method of the string object to convert the text to Uppercase:
var mystr= "Hello world!" Create a string
var request=mystr.touppercase ();//use The String object method
When the above code executes, the value of the request Is: HELLO world!
Date objects can store any date and can be accurate to the number of milliseconds (1/1000 Seconds)
Define a time Object:
var udate=new Date ();
Note: use the first letter of the keyword New,date () to capitalize
Make Udate a Date object and have an initial value: current time (current computer system Time)
If you want to customize the initial values, you can use the following methods:
var d=new Date (2012,10,1);//October 1, 2012
var d=new Date (' Oct 1,2012 ');//October 1, 2012
We'd better use the method described below to strictly define Time.
Access method syntax: "< Date Objects >,< methods >"
Common methods for processing time and dates in a date object:
Method Name Function Description
Get/setdate () Return/set Date
Get/setfullyear () Returns/sets The year, expressed in four-digit numbers
Get/setyear () return/set Year
Get/setmonth () Returns/sets the Month. 0: January ... 11:12 Months. So add a
Get/sethours () return/set hour, 24-hour System
Get/setminutes () returns/sets the number of minutes
Get/setseconds () returns/sets the number of seconds
Get/settime () returns/sets The event (in Milliseconds) below to describe Get/setfullyear () returns/sets the year, in four-digit notation
var mydate=new Date ();//current Event March 6, 2014
document.write (mydate+ "<br>");//output Current time
document.write (mydate.getfullyear () + "<br>");//output Current year
Mydate.setfullyear (81);//set Year
document.write (mydate+ "<br>");//the output year is set to 0081 years
Note: different browsers, mydate.setfullyear (81) result in different, year is set to 0081 or 812 kinds
Case
Results:
Thu 10:57:47 gmt+0800
2014
Thu Mar 0081 10:51:47 gmt+0800
Attention:
1. The result format is: week, month, day, year, time, minute, second, time zone (firefox browser)
2. Different browser, time format has difference.
Return Week Method:
GetDay () Returns a number of 0-6, 0 for Sunday, if you want to return a relative "week"
Complete the array with the following code:
<script type= "text/javascript" >
var mydate=new date ();//define Date Object
var weekday=["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "star
Period six "];//defines an array object, assigning values to each array item
var mynum=mydate.getday ();//the return value is stored in the variable Mynum
document.write (mydate.getday ());//output getDay () Get value
document.write ("today is:" +weekday[mynum]);//output Day of the week
</script>
Note: The above code is run on March 7, 2014, Friday.
Results:
5
Today is Friday.
Get/settime () returns/sets The number of milliseconds for the event, calculated from January 1, 1970 0 O'Clock to date object
The number of milliseconds to refer to the Date.
If the date referred to by the current object is postponed by 1 hours, the code is as Follows:
<script type= "text/javascript" >
var mydate=new Date ();
document.write ("current event:" +mydate+ "<br>");
Mydate.settime (mydate.gettime () +60*60*1000);
document.write ("delayed One hours:" +mydate);
</script>
Results:
Current Time: Thu Mar 6 11:46:27 utc+0800 2014
Delayed one hours: Thu Mar 6 12:46:27 utc+0800 2014
Note: 1. One hour, 60 minutes, 60 seconds, one second, 1000 milliseconds.
2. The delay of one hour is: "x.settime (x.gettime () +60*60*1000);"
JavaScript Advanced (v)
