JavaScript核心对象详解-优快云博客

本文链接：https://blog.youkuaiyun.com/huang2009303513/article/details/17096211

本文详细介绍了JavaScript中window、history、location、navigator、screen等核心对象的使用方法，并提供了丰富的示例代码，帮助读者掌握如何利用这些对象进行网页交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

window的status属性可以设置页面的状态栏，代码如下：

在最后面显示世界你好!:

 <script  language="javascript" type="text/javascript">
	var space_num = 0;
	var dir = 1;
	function myScroll()
	{
		var space_my = "";
		space_num = space_num + 1*dir;
		if(space_num>50 || space_num<0){
			dir =dir* -1;
		}
		for(var i=0;i<space_num;i++){
			space_my = space_my + " ";
		}
		window.status = space_my + "世界你好！";
	}
	function startIt()
	{
		setInterval("myScroll()",100);
	}
    </script>
  </head> 
  <body onload="startIt()">

history对象的用法：

该对象包含客户端访问过的url信息。history对象是window对象的成员属性。它是由javascript run engine自动创建的。我们也可以认为history对象时一个js对象。

它最重要的用处就是可以返回到访问过的页面去。浏览历史就是通过history来实现的。

两个页面之间的访问代码：

a.html如下：

<script  language="javascript" type="text/javascript">
    </script>
  </head> 
  <body>
   <a href="b.html">goto b</a>
  </body>

b.html的代码如下：

 <script  language="javascript" type="text/javascript">
	function goback()
	{
		//back()方法可以加载历史前一个页面。
		//go（）方法可以返回到访问过的指定的页面。他们都是history的方法。
		//history.back()=history.go(-1)
		history.back();
	}
    </script>
  </head> 
  <body>
    <a href="#" onclick="goback();">返回上级页面</a>
  </body>

location对象包含当前url的信息，是window对象的一个属性。它对应于页面的url。它最主要的方法是reload()表示重新加载当前页面。

它也可以通过属性返回当前页面的主机，端口，协议等等。

案例：

 <script  language="javascript" type="text/javascript">
	function test()
	{
		location.reload(); //刷新页面。
		//得到url，主机，端口。
		document.write(location.href+"||"+location.hostname+"||"+location.port);
	}
    </script>
  </head> 
  <body>
    <input type="button" value="刷新页面" onclick="test()">
  </body>

navigator用法：该对象包含浏览器本身的信息。

 <script  language="javascript" type="text/javascript">
	document.write("<p>Name: ");
	//打印浏览器的名称,平台
	document.write(navigator.appName+"</p>"+navigator.platform+);
    </script>
  </head> 
  <body>
  </body>

screen对象：主要包括屏幕的相关信息。

<script  language="javascript" type="text/javascript">
	//打印出当前屏幕的高度和宽度。从而判断分辨率
	document.write(screen.width+" "+screen.height);
    </script>
  </head> 
  <body>
    
  </body>

Event对象事件：

关于绑定事件用法：

(1) 直接和某个html控件绑定，比如：

(2)通过getElementById()获取到元素后再绑定监听事件，比如：

 <script  language="javascript" type="text/javascript">
	function test()
	{
		document.write("hello");
	}
    </script>
  </head> 
  <body>
    <input type="button" id="but1" value="刷新页面" >
	<script  language="javascript" type="text/javascript">
	//绑定方法事件。
	document.getElementById("but1").onclick=test;
    </script>
  </body>

(3)如果我们有一个投票系统，但是只能让一个人投一次票。（使用attachEvent和detachEvent方法来绑定）

  <script  language="javascript" type="text/javascript">
	function test()
	{
		alert("你投了一次票");
		//解除方法绑定
		document.getElementById("but1").detachEvent("onclick"，test);
	}
    </script>
  </head> 
  <body>
    <input type="button" id="but1" value="投票" >
	<script  language="javascript" type="text/javascript">
	//绑定方法事件。
	document.getElementById("but1").attachEvent("onclick",test);
    </script>
  </body>

案例：用户输入数字，如果输入的不是数字，则提示。

代码如下：

<script  language="javascript" type="text/javascript">
	function test(event)
	{
		//用户每按下建都判断
		if(event.keyCode<48 || event.keyCode>57)
		{
		alert("对不起，你输入的不是一个数字");
		return false;
		}
	}
    </script>
  </head> 
  <body>
    <input type="text"  onkeypress="return test(event)" id="text1"/>
    <input type="button"  value="提交"  onclick="test()">
  </body>