您的位置：首页 > Web前端 > JavaScript

浏览器中的javaScript

2016-03-13 20:36 633 查看
一、在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不传参数的话默认就是false

location对象是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);   //窗口可用的宽
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航