JavaScript内置对象的介绍和使用

酷酷滴Q

于 2023-02-26 16:44:23 发布

阅读量1.1k

点赞数 2

分类专栏： JavaWeb设计文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_65420451/article/details/129226975

版权

JavaWeb设计专栏收录该内容

4 篇文章 3 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

题目：JavaScript内置对象

（1）window：负责操作浏览器窗口，负责窗口的状态、开、闭等

（2）document：负责操作浏览器载入的文档（HTML文件），从属window。

（3）history:可以代替后退（前进）按钮访问记录，从属window。

（4）location：访问地址栏，也从属window。

一、window对象

window对象的主要作用：

1.出现提示框

window.alert("内容"):出现消息框
window.confirm("内容"):出现确认框
window.prompt("内容"):出现输入框

例题一：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window对象</title>
</head>
<body>
<script type="text/javascript">
//消息框
window.alert("消息框");
//确认框，根据result的值true或者false来判断
result=window.confirm("您确定要取消吗？");
//输入框，str为输入的值，如果取消，str的值为null
str=window.prompt("请您输入一个字符串","");

</script>
</body>
</html>

效果截图：

2.打开、关闭窗口

window对象还用于控制窗口的状态和开、闭。window.open()在网页制作中的使用非常广泛，参数有3个，第个是新窗口的地址，第2个是新窗口的名称，第3个是新窗口的状态，其中新窗口状态可设置如下属性。

toolbar:是否有工具栏，可选值为1和0。
location:是否有地址栏，可选值为1和0。
status:是否有状态栏，可选值为1和0。
menubar:是否有菜单栏，可选值为1和0。
scrollbars:是否有滚动条，可选值为1和0。
resizable:是否能改变大小，可选值为1和0。
width和height:窗口的宽度和高度，用像素表示。
left和top:窗口左上角相对于桌面左上角的x和y坐标。各属性值用逗号隔开，如下面的代码所示。

例题二：

提示：在项目的同一目录下，建一个2.html文件，用于测试打开新窗口。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window对象</title>
</head>
<body>
<h1>本页面窗口</h1>
<script type="text/javascript">
window.status="出现新窗口";
//打开新窗口
newWindow=window.open("2.html","new1","width=300,height=300top=500,left=500");
//可以通过返回值来控制新窗口
//newWindow.close();//关闭窗口
</script>
</body>
</html>

效果截图：

3.定时器

window对象负责管理和控制页面的定时器，定时器的作用是让某个函数隔一段时间运行一次。

格式：

timer=window.setTimeout("需要运行的函数“，”时间（用毫秒计）");

清除定时器：

clearTimeout(timer);

例题三：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window对象</title>
</head>
<body>
<script type="text/javascript">
timer=window.setTimeout("fun1()","1000");
var i=0;
function fun1()
{
	i++;
	window.status=i;
	//console.log(i);
	document.write(i);
	if(i==100)
		{
		window.clearTimeout(timer);
		return;//要有这一条语句，否则跳不出if语句。
		}
	timer=window.setTimeout("fun1()","1000");//重新创建，且是递归的形式
	}
</script>
</body>
</html>

效果截图：

提示：状态栏显示改为页面输出查看效果。

二、history对象

history对象包含用户的浏览历史等信息，使用这个对象是因为它可以代替后退(前进)按钮访问历史记录，该对象从属于window。
history对象最常用的函数如下。

history.back()：返回上一页，相当于单击浏览器上的后退按钮。
history.forward()：返回下一页，相当于单击浏览器的前进按钮。
window.history.go(n)：n为整数，正数表示向前进n格页面，负数表示向后退n格页面。

下面的history.html文件是history对象的应用实例，代码如下。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history对象</title>
</head>
<body>
<a onclick="history.forward()">前进</a>
<a onclick="history.back()">后退</a>
</body>
</html>

提示：如需验证结果，还需要立两三个页面，才能验证页面的前进和后退。

三、document对象

1.在网页上输出

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document对象</title>
</head>
<body>
<script type="text/javascript">
document.writeln("您好");
</script>
</body>
</html>

2.设置网页的属性

使用document对象可以进行一些简单网页属性的设置，例如网页的标题、颜色等，并且可以得到网页的某些属性，例如当前地址。其比较常用的设置包括通过document. tile来访问标题，通过document.location来获取当前网页的地址等。
下面的document2.huml文件是一个设置网页属性的应用实例，代码如下。

例题四：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document对象</title>
</head>
<body>
<script type="text/javascript">
function fun(){
	document.title="新的标题";//设置网页的标题
	window.alert(document.location);//打印当前的网页地址
}
</script>
<input type="button" onclick="fun()" value="按钮">
</body>
</html>

效果截图：

3.访问档元素，特别是表单元素

使用document对象可以访问文档中的元素（例如图片、表单、表单中的控件等），前提是元素name属性是确定的。

格式：document.元素名.子元素名...

下面的document3.html文件是访问表单元素的例子，其中有两个文本框、一个按钮，输入两个数字，进行求和。

例题五：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document对象</title>
</head>
<body>
<script type="text/javascript">
function add(){
	n1=Number(document.form1.text1.value);
	n2=Number(document.form1.text2.value);
	document.form1.text3.value=n1+n2;
}
</script>
<form name="form1">
   <input name="text1" type="text"><br>
   <input name="text2" type="text"><br>
   <input type="button" onclick="add()" value="求和"><br>
   <input name="text3" type="text"><br>
</form>
</body>
</html>

效果截图：

四、location对象

location对象还可以访问浏览器的地址栏，它也从属于window，其常见的功能就是跳转的另一个网页，跳转的方法是修改location对象的href属性。

例题六：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>location对象</title>
</head>
<body>
<script type="text/javascript">
function locationText(){
	window.location.href="2.html"
}
</script>
<input type="button" onclick="locationText()" value="按钮">
<a href="2.html">到2.html页面</a>
</body>
</html>

效果截图：

location和window中的定时器的结合使用：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>location对象</title>
</head>
<body>
<h1>欢迎登录，3秒钟跳转到2.html页面</h1>
<script type="text/javascript">
window.setTimeout("toIndex()","3000");
function toIndex(){
	window.location.href="2.html";
}
</script>
</body>
</html>

效果截图：

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了JavaScript的window、document、history、location四大内置内对象的属性和使用。

酷酷滴Q

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript内置对象的介绍和使用

JavaScript内置对象（1）window：负责操作浏览器窗口，负责窗口的状态、开、闭等（2）document：负责操作浏览器载入的文档（HTML文件），从属window。（3）history:可以代替后退（前进）按钮访问记录，从属window。（4）location：访问地址栏，也从属window。上就是今天要讲的内容，本文仅仅简单介绍了JavaScript的window、document、history、location四大内置内对象的属性和使用。
复制链接

扫一扫