JavaScript-⑥

BOM
1.ECMAScript 是JavaScript 的核心，但如果要在Web 中使用JavaScript，那么BOM（浏览器对象模型）则无疑才是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关.
BOM 的核心对象是window，它表示浏览器的一个实例。在浏览器中，window 对象有双重角色，它既是通过JavaScript 访问浏览器窗口的一个接口，又是ECMAScript 规定的Global 对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window 作为其Global 对象，因此有权访问parseInt()等方法。
2.由于window 对象同时扮演着ECMAScript 中Global 对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window 对象的属性和方法。
在这里插入图片描述

3.Window对象，处于文档对象模型的最顶层，代表当前浏览器窗口。
常用方法
open(url,name,features):打开一个新窗口
url:新窗口的URL地址
name:窗口的名字，是可选字段
features: 新窗口的特征列表，如高度、宽度等，可选字段。这些特性有
left、top：窗口左顶点的坐标
height：窗口的高度
width：窗口的宽度
menubar：是否有菜单
scrollbars：是否有滚动条
resizable：窗口大小是否可以改变
close()：关闭当前窗口
4.

<script language="JavaScript">
function creatwindow()
{
Var w=window.open(“js3.html","mywindow","menubar=no,height=200,width=3
00");
}
function closewindow()
{
w.window.close();
}
</script>
<body>
<form>
<input type="button" value="创建窗口" onclick="creatwindow() " >
<input type="button" value="关闭窗口" onclick="closewindow() " >
</form>
</body>

5.Windows对象其他方法
alert（message）:在对话框中显示message消息
confirm():在有OK和Cancle按钮的对话框中显示Message，并按照用户单击的按钮返回真或假。
prompt(message,response):在带有文本输入框的窗口中显示message，并用缺省的response返回用户在文本输入框中输入的字符串。
6.Windows三种对话框
alert()方法弹出一个显示信息的警示对话框
alert(“您好”)
confirm()方法弹出带有提示信息的确认对话框
confirm(“确认删除吗?”)
prompt()方法弹出一个带有输入信息的对话框
7.Windows失去焦点
如果需要将当前窗口变为非活动窗口，可以使用window对象的blur（）方法，本方法相当于将焦点从当前窗口移开。即让当前窗口失去焦点。语法格式为window.blur()
8.Windows得到焦点
window对象的focus（）方法可以让指定的窗口获得焦点，本方法与blur（）方法执行相反操作。本方法会将焦点从当前窗口转向指定的窗口
window.focus()
9.Windows关闭窗口
用户可以在javaScript中使用window对象的close（）方法关闭指定的已经打开的窗口。
winObj.close();
其中，winObj代表需要关闭的window对象，可以是当前窗口对象，也可以是用户指定的任何window对象。
10.延时程序
通过window对象的setTimeout（）方法可以指定页面中的某段JavaScript代码或者某个函数在指定的时间段后执行setTimeout（）方法的语法格式如下：
var timeid=window. setTimeout(funname，millisec)；
其中，timeId是用户指定的setTimeout（）方法的返回值，指定timeId之后可以在别的地方调用setTimeout。Funname代表需要执行的函数名，也可以是需要执行的JavaScript脚本字符串。Funname参数是必须指定的。Millisec代表时间间隔，单位是毫秒。例如，需要设定某个函数1秒后执行，可以设定millisec为1000；millisec参数是必须的。
setTimeout（）方法设定延时程序时，只是在页面加载完毕后执行一次。如果需要重复执行可以使用递归setTimeout（）的方法实现。
另一种可以重复执行的方法是使用window对象的setInterval（）方法，其使用方法如下：
var timeid=window.setInterval(“funcitoname”,millisec);
其中timeid是setInterval()方法的返回值； setInterval（）方法与setTimeout（）方法的语法相同，两者的区别在于，前者会在指定的时间间隔自动重复执行指定的函数或代码段，后者则在指定的时间间隔执行一次指定的函数或代码段。
11.Windows窗口位置
用来确定和修改window 对象位置的属性和方法有很多。IE、Safari、Opera 和Chrome 都提供了screenLeft 和screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在screenX 和screenY 属性中提供相同的窗口位置信息，Safari 和Chrome 也同时支持这两个属性。Opera虽然也支持screenX 和screenY 属性，但与screenLeft 和screenTop 属性并不对应。
12.Window常用的两个属性
location:表示网页的地址(url)，可以给location属性赋值实现网页的跳转
history:浏览历史，可以调用history的go方法实现网页的前翻和后退
在这里插入图片描述

<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
   function test_location()
   {
       window.location.href=“http://www.163.com";
   }
</SCRIPT>
</HEAD>
	<BODY>
	<FORM NAME="frm">
	<INPUT TYPE="BUTTON" VALUE="超级链接" ONCLICK="test_location()">
	</FORM>
	</BODY></HTML>

<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
   function test_location()
   {
       window.location.href=“http://www.163.com";
   }
</SCRIPT>
</HEAD>
	<BODY>
	<FORM NAME="frm">
	<INPUT TYPE="BUTTON" VALUE="超级链接" ONCLICK="test_location()">
	</FORM>
	</BODY></HTML>

13navigator对象的属性和方法
在这里插入图片描述
screen对象

代码部分

一.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
     function doAlert(){
         alert("你违规了");
     }
    </script>
</head>
<body>
    <button onclick="doAlert()">alert</button>
    <button onclick="let choice=confirm('删除吗')">confirm</button>
    <button onclick="prompt('请输入您的成绩','90')">prompt</button>
</body>
</html>

在这里插入图片描述
点击alert

点击confirm

点击prompt

二.open

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var win=null;
        function doOpen(){
         win=window.open("newWindow.html","","heigth=300,width=400")
        }
        function doClose(){
         window.close();
        }
    
    </script>
</head>
<body>
    <button onclick="doOpen()">打开</button>
    <button onclick="doClose()">关闭</button>
</body>
</html>

在这里插入图片描述
点击打开会弹出另一个窗口上面有“关闭”点击后两个窗口都消失。
点击关闭会直接关闭

三.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    function doClose(){
        if(window.opener){
            window.opener.close();
        }
    }
    </script>
</head>
<body>
    <button onclick="doClose()">关闭</button>
</body>
</html>

猜你喜欢