1 BOM programming
1.1 INTRODUCTION
(in the previous section (3), we introduced the basic syntax of JavaScript, and in this section, we introduced BOM programming.)
BOM is the programming of browser object model. The four browser objects provided by javascript engine operate browser, which is called BOM programming.
1.2 window object (important: master the attributes and methods)
Window represents a window.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window object</title>
<script type="text/javascript">
/*
open(): Open page in a window
setInterval(): Set timer (execute n times)
setTimeout(): Set timer (only once)
clearInterval(): Clear timer
clearTimeout(): Clear timer
alert(): prompt box
confirm(): Confirmation prompt box
propmt(): Input prompt box
be careful:
Because of the frequent use of window objects, when calling the methods of window objects in js, the object name can be omitted.
*/
function testOpen(){
/*
Parameter 1: open page
Parameter 2: open mode. _self: this window _blank: new window (default)
Parameter 3: set window parameters. For example, window size, whether to display the taskbar
*/
window.open("02.Advertising page.html","_blank","width=300px;height=300px;toolbar=0");
}
var taskId;
function testInterval(){
/*
Timer: call the specified task (function) every n milliseconds
Parameter 1: specified task (function)
Parameter 2: milliseconds
*/
taskId = window.setInterval("testOpen()",3000);
}
function testClearInterval(){
/*Clear task
Parameter 1: task ID to be cleared
*/
window.clearInterval(taskId);
}
var toId;
function testTimeout(){
/*Set scheduled tasks*/
toId = window.setTimeout("testOpen()",3000);
}
function testClearTimeout(){
window.clearTimeout(toId);
}
function testAlert(){
window.alert("prompt box");
}
function testConfirm(){
/*
The return value is the user action
true: Click OK
false: Click Cancel
*/
var flag = window.confirm("Are you sure to delete? Once deleted, please be careful!");
if(flag){
alert("OK to delete, deleting....");
}else{
alert("Operation cancelled");
}
}
function testPrompt(){
/*
Input prompt box
*/
var flag = window.prompt("Please enter your U Dun code");
if(flag){
alert("Correct password, transferring...");
}else{
alert("Operation cancelled");
}
}
</script>
</head>
<body>
<input type="button" value="open()" onclick="testOpen()"/>
<input type="button" value="setInteval()" onclick="testInterval()"/>
<input type="button" value="clearInteval()" onclick="testClearInterval()"/>
<input type="button" value="setTimeout()" onclick="testTimeout()"/>
<input type="button" value="clearTimeout()" onclick="testClearTimeout()"/>
<input type="button" value="alert()" onclick="testAlert()"/>
<input type="button" value="confirm()" onclick="testConfirm()"/>
<input type="button" value="prompt()" onclick="testPrompt()"/>
</body>
</html>
1.3 location object
The location object represents the address bar in a window
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>location object</title>
<script type="text/javascript">
/*
href Property: represents the URL of the address bar. You can get and set the URL. URL represents uniform resource locator
reload Method: refresh the current page
*/
function testHref(){
//alert(window.location.href);
/*
Realize page Jump by modifying the location object's href attribute
*/
window.location.href="02.Advertising page.html";
}
function testReload(){
//Refresh current page
window.location.reload();
}
//function testRefresh(){
//Timed refresh
window.setTimeout("testReload()",1000);
//}
</script>
</head>
<body>
<a href="02.Advertising page.html">Hyperlinks</a>
<input type="button" value="Jump" onclick="testHref()"/>
<input type="button" value="Achieve scheduled refresh" onclick="testRefresh()"/>
</body>
</html>
1.4 history object
The history object represents the history bar of the window
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>history object</title>
<script type="text/javascript">
/*
forward(): Go to next page
back(): Back to previous page
go(): Jump to a page (positive integer: forward negative integer: backward) 1 - 2
*/
function testForward(){
//window.history.forward();
window.history.go(1);
}
</script>
</head>
<body>
<a href="04.history Object 2.html">Jump to the next page</a>
<br/>
<input type="button" value="Forward" onclick="testForward()"/>
</body>
</html>
1.5 screen object
The screen object represents a screen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>screen object</title> <script type="text/javascript"> /* availHeight And availWidth are the height and width after excluding the taskbar */ document.write(window.screen.availWidth + "<br/>"); document.write(window.screen.availHeight + "<br/>"); document.write(window.screen.width + "<br/>"); document.write(window.screen.height + "<br/>"); </script> </head> <body> </body> </html>
2 event programming
2.1 review event programming of javase
There are three elements of GUI programming events:
Event source: button JButton JFrame
Event: KeyEvent WindowEvent
Listener: KeyListener WindowListener
Specific steps of GUI Programming:
1) create event source
2) programming monitor
3) register the listener on the event source
There are three elements of javascript event programming:
1) event source: html tag
2) event: click dblclick mouseover....
3) listener: function
javascript event classification:
Click related:
Click: onclick
Double click: ondbllick
Focus related:
Focus: onfocus
Losing focus: onblur
Options related:
Change option: onchange
Mouse related:
Mouse over: onmouseover
Mouse removal: onmouseout
Page load related:
Page load: onload
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Event programming</title>
<!-- 2)Programming listener (function) -->
<script type="text/javascript">
function test(){
alert("Event triggered");
}
</script>
</head>
<body>
<!-- 1)Event source-->
<input type="button" value="Button" onclick="test()"/><!-- 3)Register listeners (functions)-->
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Event programming case</title>
<style type="text/css">
#div1{
width:100px;
height:100px;
background:#00F;
}
</style>
<script type="text/javascript">
/*
Click related:
Click: onclick
Double click: ondbllick
Focus related:
Focus: onfocus
Losing focus: onblur
Options related:
Change option: onchange
Mouse related:
Mouse over: onmouseover
Mouse removal: onmouseout
Page load related:
Page load: onload this event is triggered after loading the tag. It is commonly used in the body tag, so the content of the loaded body tag is triggered.
*/
function testClick(){
alert("Click event triggered");
}
function testDblClick(){
alert("Double click event triggered");
}
function testFocus(){
//Clear the contents of the input box
var userName = document.getElementById("userName");
userName.value="";
}
function testBlur(){
//Get user input
var userName = document.getElementById("userName").value;
//Check if the user exists
//Display content to span
//Get span
var userNameTip = document.getElementById("userNameTip");
if(userName=="eric"){
userNameTip.innerHTML = "User is already occupied, please change!".fontcolor("red");
}else{
userNameTip.innerHTML = "Congratulations, this user is available!".fontcolor("green");
}
}
function testChange(){
//alert("option changed")
//Get selected content
var jiguan = document.getElementById("jiguan").value;
//alert(jiguan);
var city = document.getElementById("city");
//Clear the content of city select first each time
city.innerHTML = "";
if(jiguan=="Guangdong"){
//Put some option options into City select
var arr = ["Guangzhou","Zhuhai","Shenzhen"];
for(var i=0;i<arr.length;i++){
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
if(jiguan=="Guangxi"){
//Put some option options into City select
var arr = ["city in Guangxi","Guilin","Nanning"];
for(var i=0;i<arr.length;i++){
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
if(jiguan=="Hunan"){
//Put some option options into City select
var arr = ["Changsha","Xiangtan","Chenzhou"];
for(var i=0;i<arr.length;i++){
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
}
function testOver(){
alert("Mouse over div");
}
function testOut(){
alert("Mouse removed dvi");
}
function testLoad(){
alert("Triggered onload Method");
}
</script>
</head>
<body onload="testLoad()">
<input type="button" value="Single click" onclick="testClick()"/>
<input type="button" value="double-click" ondblclick="testDblClick()"/>
<hr/>
//Please enter the user name: < input type = "text" id = "username" value = "4-12 letters or numbers" onfocus = "testfocus()" onblur = "testblur()" / > < span id = "usernametip" ></span>
<hr/>
//Please choose your native place
<!--onchange :For this select Options in send changes -->
<select onchange="testChange()" id="jiguan">
<option value="Guangdong">Guangdong</option>
<option value="Guangxi">Guangxi</option>
<option value="Hunan">Hunan</option>
</select>
//City
<select id="city">
</select>
<hr/>
<div id="div1" onmouseover="testOver()" onmouseout="testOut()"></div>
</body>
</html>