韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程

原创 2016年02月23日 15:59:45

dom对象详解----window对象3

window 的 status 属性可以控制状态栏的信息
实现下面的案例:




案例代码:

<html>
<head>
<script 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()">
</body>
</html>


dom对象详解----history对象

History 对象实际上是javascript对象,而不是Html DOM对象。
History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
注释:没有应用于 History 对象的公开标准,不过所有浏览器都支持该对象。




dom对象详解----location对象

Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。




location对象的属性和方法如下:




dom对象详解----navigator对象

Navigator 对象包含有关浏览器的信息。
注释:没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象。




navigator对象的属性和方法




<html>
<body>
<script type="text/javascript">
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
document.write("浏览器名称:"+ browser);
document.write("<br />");
document.write("浏览器版本:"+ version);
document.write("<p>平台:");
document.write(navigator.platform + "</p>");
</script>
</body>
</html>



dom对象详解----screen对象

Screen 对象
Screen 对象包含有关客户端显示屏幕的信息。
注释:没有应用于 screen 对象的公开标准,不过所有浏览器都支持该对象。




screen对象的属性:




dom对象详解----event对象








event事件在前面都已经讲过了,这里就不再详细讲了

重点:关于绑定事件的细节

1. 直接和某个html控件绑定
2. 通过getElementById()获取到元素后,再绑定
3. 通过addEventListener() 或者是 attachEvent() 来绑定





案例1:

<html>
<head>
<script type="text/javascript">
		function test(){
			
			window.alert("绑定成功");	
		}
		
</script>
</head>
<body>
<input type="button" id = "but1" value="绑定">
<script type="text/javascript">
		document.getElementById("but1").onclick=test;
</script>
</body>
</html>


案例2:

<html>
<head>
<script type="text/javascript">
		function test(){
			
			window.alert("你投了一次票,投票成功");	
			//解除这个事件绑定
			document.getElementById("but1").removeEventListener('click',test);
		}
		
</script>
</head>
<body>
<input type="button" id = "but1" value="投票">
<script type="text/javascript">
		document.getElementById("but1").addEventListener("click",test);//注意这里是 click ,而不是 onclick
</script>
</body>
</html>


特别强调:
addEventListener() 方法的浏览器支持:




Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,Opera 7.0 及 Opera 更早版本也不支持。

如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。
以下实例演示了跨浏览器的解决方法:

<!DOCTYPE html>
<html>
<body>
 
<p> 所有主流浏览器都支持addEventListener()方法,除了 IE 8 及更早 IE 版本。</p>
 
<p>该实例演示了所有浏览器兼容的解决方案。</p>
 
<button id="myBtn">点我</button>
 
<script>
var x = document.getElementById("myBtn");
if (x.addEventListener) {
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
    x.attachEvent("onclick", myFunction);
}
 
function myFunction() {
    alert("Hello World!");
}
</script>
 
</body>
</html>







<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
		function test(event){
 
			//用户每按下一个键,就去判断是不是一个数
			if(event.keyCode>=48 && event.keyCode<=57){
				
			}else {
				
				window.alert("你输入的不是数");
				return false;  
				//window.event.returnValue=false; //这样也可以
			}
		
		}
		
</script>
</head>
<body>
<input type="text" id = "text1" onkeypress="return test(event)">
<input type="button" id = "but1" value="提交" onclick="test()">
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

韩顺平 javascript教学视频_学习笔记34_js正则表达式详解

内容介绍----正则表达式的详解 正则表达式对象: RegExp对象方法 我们来看一下RegExp对象都有哪些方法 ...
  • fuyizhonhong
  • fuyizhonhong
  • 2016年02月23日 16:49
  • 1797

韩顺平呕心沥血Java+PHP+linux+div+css等视频下载地址

这是我在淘宝上淘到的 ,拿来和大家共享一下!想好好学习IT的人一定不能错过!! 韩顺平全套教程下载地址,PHP,JAVA,终生可下载 传智播客_韩顺平ajax技术教程 http://dl.dba...
  • ItJavawfc
  • ItJavawfc
  • 2014年07月22日 19:53
  • 6266

韩顺平_Javascript 教学视频教程_学习笔记整理_目录

韩顺平_Javascript 教学视频教程_学习笔记整理_目录 韩顺平 javascript教学视频_学习笔记1_js课程介绍_js基本介绍 韩顺平 javascript教学视频_学习笔记2_...
  • fuyizhonhong
  • fuyizhonhong
  • 2016年01月26日 17:27
  • 1749

韩顺平 javascript教学视频_学习笔记20_多态经典案例_补讲闭包细节

多态经典案例 经典案例,看代码: function Master(){ //给动物喂食 this.feed=f...
  • fuyizhonhong
  • fuyizhonhong
  • 2016年01月26日 17:06
  • 1092

韩顺平html5课程分享:6小时编写经典坦克大战!

记起自己去年参加的一次面试,在做过Java多年的面试官面前发挥的并不好,但他一听说我会html5,立马眼睛发亮,不管不顾的想要和我签约。。。所以,现在为工作犯愁的朋友们,学好html5,绝对会为你找到...
  • cdczbk
  • cdczbk
  • 2014年06月30日 15:52
  • 3118

HTML5+javascript韩顺平坦克大战游戏教程笔记

虽然未知前面路在何方,也不想未来怎样,我只是一个普通人,但趁着目前对变成还有点热度,还是继续我的练习笔记。 这次练习,很多人都学习过,韩顺平老师的公开课视频,基础的,可对于我来说,学习压力不小...
  • wujimiao
  • wujimiao
  • 2016年09月19日 20:51
  • 1689

Linux学习笔记(观看韩顺平老师Linux视频的总结)

接触Linux是去年下半年,从那以后,我便一直使用ubuntu系列的操作系统。买了本《鸟哥的Linux私房菜》这本书和观看韩顺平老师的Linux视频,以及下载一个ubuntu系列的操作系统安装在自己的...
  • u013962600
  • u013962600
  • 2014年04月05日 17:28
  • 2088

韩顺平 javascript教学视频_学习笔记28_dom对象(document对象) 最重要的

dom对象详解----document对象 document对象代表的是整个html文档,因此可以访问到文档中的各个对象(元素)。 write()...
  • fuyizhonhong
  • fuyizhonhong
  • 2016年02月23日 16:04
  • 956

韩顺平Spring框架学习,学习笔记(五)

Bean工厂和ApplicationContext上下文 bean工厂介绍: 从applicationContext应用上下文容器获取bean和从bean工厂r容器中获取bean有什么区别:  a...
  • qq_32517251
  • qq_32517251
  • 2016年05月24日 15:15
  • 360

韩顺平 javascript教学视频_学习笔记26_dom对象(window对象2)

dom对象详解----window对象2 moveTo() 和 moveBy()方法 moveTo() 方法可把窗口的左上角移动到一个指定的坐标。 moveBy() 方法可...
  • fuyizhonhong
  • fuyizhonhong
  • 2016年02月23日 15:47
  • 698
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:韩顺平 javascript教学视频_学习笔记27_dom对象(window对象3.history.location.navigator.screen.event)_js事件驱动编程
举报原因:
原因补充:

(最多只允许输入30个字)