javascript的组成及BOM简单介绍

一、js的组成：

javascript由：ECMAScript ，BOM，DOM，三个部分组成，根据浏览器不同，具体的表现形式也会有所差异。

二、什么是BOM？

1.BOM是Browser Object Model的简写，也称为浏览器对象模型

2.BOM提供了独立于内容而与浏览器窗口进行交互的对象

3.BOM是与浏览器窗口交互的对象结构

4.BOM是 W3C 的标准

三、浏览器对象模型

1.window 窗口对象（全局变量）

• 作用：可以用来控制当前窗口，或打开新的窗口，默认可省略
• 大部分都省略的window对象 例如：alert警告，comfirm确认，prompt弹输入框，setlnterval间隔调用，setTimeout延迟调用，isNaN是否为数字，doument文档
• script中var声明变量没有用var声明的变量都是window全局变量
• 有id命名的html节点也是全局变量对象可以通过window.id名访问

例如：

window.alert("你好");

var a = 12;
    b = 35;
alert(window.a);
alert(window.b);

alert(myp.innerText);

2.screen 屏幕对象

• 作用：获取屏幕相关信息
• width：屏幕宽
• height：屏幕高
• avialWidth：除任务栏宽
• availHeight：除任务栏高
• window.innerWdith：浏览器的可视区域宽
• window.innerHeight：浏览器的可视区域高

例如：

//屏幕的宽高
document.write("<br/>屏幕的宽"+screen.width);
document.write("<br/>屏幕的高"+screen.height);

//移除状态的屏幕宽高
document.write("<br/>可用屏幕的宽"+screen.availWidth);
document.write("<br/>可用屏幕的高"+screen.availHeight);

//浏览器可视区域的宽高
document.write("<br/>可视区域的宽"+innerWidth);
document.write("<br/>可视区域的高"+innerHeight);

3.navigator 浏览器对象

• 作用：通过这个对象可以判定用户所使用的浏览器
• 最重要的UA浏览器的头信息，通常判断是什么浏览器（pc，手机，ios，安卓，谷歌，Edg）
• 检测浏览器是否为手机 includes包含 查则浏览器的头信息是否包含Mobile字符串

例如：

var ua = nacigator.userAgent;
document.write("<br/>"+ua);


if(ua.includes("Mobile")){
    document.write("<br/>手机浏览器")
}else{
    document.write("<br/>pc浏览器")
}

4.history 历史对象

• 作用：可以用来前进或后退一个页面（相对于浏览器的前进与后退按钮）
• forward() / go(1)  前进
• back() / go(-1)     后退

例如：

function goForward(){
    history.go(1);
}

function goBack(){
    history.go(-1);
}

5.location 地址对象

• 作用：可以用来获取当前URL的信息
• reload()：刷新
• reload(ture)：刷新并强制更新缓存
• href：地址信息
• protocol：协议
• hostnam：域名
• port：端口号
• pathname：地址
• search：查询
• hash：哈希值（锚点）

例如：

//普通刷新
function reload(){
    locatio.reload();
}

//解析地址栏信息
document.write("<br/>地址信息"+location.href);
document.write("<br/>协议:"+location.protocol);
document.write("<br/>域名:"+location.hostname);
document.write("<br/>路径:"+location.pathname);
document.write("<br/>端口号:"+location.port);
document.write("<br/>查询:"+location.search);
document.write("<br/>哈希(锚点):"+location.hash);

6.open方法

• win = window.open(wrl,name,feature)
• url 打开文件的地址
• name 名字
• feature 特性 "width=400,height=400,top=200,left200"
• win.close() 关闭打开的窗口

7.事件

• onload事件：窗口，图片加载完毕触发
• onscroll：滚动时候触发
• document.documentElement.scroolTop：滚动距离
• resize：当窗口发生大小变化