一、在Html中使用JavaScript有两种方式:内嵌和外部引入
大量的HTML代码中不应该被嵌在HTML文件中
1、安全性,只要查看页面的源代码,任何人都可以知道在页面重做了什么。如果是外部文件引入js的话就可以通过加入版权和其他知识产权的通告来防止
2、代码维护,如果js代码散布于多个页面的话,代码不好维护
3、缓存:浏览器会根据特定的设置缓存所有外部链入的js文件,如果两个页面使用的是同一个js文件,浏览器只下载一次
注意:js大代码是从上向下载入的
二、BOM对象
可见BOM对象的核心是window对象
1、window对象
window对象表示的是整个浏览器窗口,但是不必包含其中的内容,如果页面使用框架集合,每个框架都会有自己的window对象
<frameset rows="100,*"> <frame src="atop.html" name="topFrame"/> <frameset> <frame src="bbxia.html" name="leftFrame"> <frame src="ccxia.html" name="rightFrame"> </frameset> </frameset>这段代码将创建一个框架集,其中包括一个顶层的框架和两个底层框架这里可以用window.frames[0]或者window.frames["topFrame"]
窗口的操作
1、移动窗口
movedBy(dx,dy)
movedTo(x,y)可以传入负数这样就会把窗口移到看不到的地方
resizeBy(dw,dy)相对于当前浏览器窗口的大小,宽度调整dw个像素,高度调整dy个像素
resizeTo(w,h)把窗口宽度调整为w,把高度调整为h
2、导航和打开新窗口
用javaScript可以导航到指定的URL,并用window.open()方法打开新窗口。该方法接受四个参数1、要载入新窗口的url地址2、新窗口的名字3、特性字符串4、是否用当前页面来替换即将载入的页面
特性字符的花酒包括新打开的这个浏览器有多高?多宽?在哪?
3、系统对话框
利用window对象的alert(),confirm(),prompt()方法
confirm()方法确认对话框,在这个对话框中有OK按钮和cancel按钮,调用confirm来判断点击了哪个按钮()
window.confirm("shau"); if(confirm("shau")){ console.log(1); } else{ console.log(2); }prompt()对话框提示用户输入某些信息,除了ok按钮和cancel按钮外,这个对话框上还有文本框
var name=prompt("请输入您的名字","Bill Gates"); if (name!=null && name!="") { document.write("你好," + name + "!今天过得好吗?") }4、状态栏
状态栏是底部边界内的区域
一般来说,状态栏告诉用户何时载入页面,何时完成载入页面,但是可以用status和defaultStatus属性,status可以是状态栏的文本暂时改变,defaultStatus则可以在用户离开当前页面前一直改变该文本
5、时间间隔和暂停
使用window对象的setTime()方法设置暂停,该方法接受两个参数,要执行的代码,和执行它之前要等待的毫秒数,调用setTime()时,创建一个数字暂停ID,与操作系统中的进程ID相似,暂停ID本质上是要延迟进程的ID,在调用setTime()后,就不应该再执行它的代码,要取消还未执行的暂停,使用ClearTimeout()方法,并将ID传递给它
var iTimeID=setTimeout(aa,2000); function aa(){ console.log(1) } clearTimeout(iTimeID);//取消执行setTimeOut里的函数在大多数应用程序中可见的工具提示:当把鼠标移动到一个按钮上,停留一会,等待出现黄色的提示,如果用户只是短暂的把鼠标放在这个按牛牛一会,一会就移走了,那么这时就需要取消这个暂停执行的方法
使用SetInterval()
var iTimeID=setInterval(aa,1000); clearTimeout(iTimeID);//取消执行setInterval里的函数6、历史
可以访问浏览器窗口的历史,所谓历史就是用户访问过的站点
window中history的go()方法只有一个参数,就是前进或者后退的页面数,如果是负数,就在浏览器中后退,如果是整数就在浏览器中前进。
可以使用history的length属性可以查看历史中的页面数
7、document对象
这个对象的特点就是唯一一个即属于BOM又属于DOM
BOM中document对象的一些属性
window.document.title="这是新改的一个"; window.document.url="http://www.baidu.com";document的集合
forms 页面中所有表单的集合
images 页面中所有的图像的集合
links 页面中所有的连接的集合
<script> window.onload =function(){ console.log(document.links[0]); console.log(document.images["ss"]); console.log(document.forms[0]); }; </script> <body> <p>Welcome tomy<a href="home.html">home</a>away from home</p> <img src="" name="ss"> <form method="post" name="skao"> <input type="text" name="aa"> <input type="submit" name="aa"> </form> </body> </html>DOM对象的另外几个方法
write()
<body> <h1><script>document.write("this is a test")</script></h1> </body>使用write()方法动态引入外部js文件
document.write("<script src=\"js/eternal.js\">"+"</scr"+"ipt");值得注意的是必须把后边结尾的script分开写,
write()方法和open()和close()方法结合,用来显示的是无需返回服务器的页面时
var oo=window.open("about:blank","newwindow","height=150,width=200,top=10,left=10"); oo.document.open(); oo.document.write("<html><head><title>New title</title></head></html>"); oo.document.write("<body>This skaoskaos</body>"); oo.document.close();8、location对象
console.log(location.host); //返回的是服务器的名字 console.log(location.hostname); //返回的是主机的名字 console.log(location.href); //返回的是当前页面的完整的url地址 console.log(location.pathname); //返回的是url中主机名后的部分 console.log(location.port); //返回的是占用的端口 console.log(location.protocol); //返回的是使用的协议 // location.href="http://www.baidu.com"; //改变当前页面的url值,使页面跳转到百度 location.assign("http://www.baidu.com"); //改变当前页面的url值,使页面跳转到百度 location.reload();//这两个方法有两个参数,从浏览器缓存中重载false,从服务器端重载true不传参数的话默认就是falselocation对象是window对象和document对象的属性,所以window.location和document.location是等价的
10、navigator对象一般用来检测时什么浏览器
11、screen对象
虽然出于安全原因,有关用户的大多数的信息都被屏蔽了,但是但是通过screen对象来获取关于用户屏幕的信息
console.log(screen.width); //窗口的总的宽 console.log(screen.height); console.log(screen.availHeight); console.log(screen.availWidth); //窗口可用的宽