(4) JavaScript enhancement (two parts: BOM programming, event programming)

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> 

Tags: Programming Javascript Attribute

Posted on Tue, 05 May 2020 17:33:31 -0400 by sachin_wal