JavaScript实现由三个不同部分组成:核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)。
- ECMAScript由ECMA-262定义,提供核心语言功能;
- 文档对象模型(DOM)提供访问和操作网页内容的方法和接口;
- 浏览器对象模型(BOM)提供与浏览器交互的方法和接口;
ECMAScript
ECMAScript规定的组成部分:语法、类型、语句、关键字、保留字、操作符、对象。ECMAScript就是对实现该标准规定的各方面内容的语言的描述。
什么是ECMAScript兼容:
-
支持ECMA-262描述的所有“类型、值、对象、属性、函数及程序句法和语义”。
-
支持Unicode字符标准。
-
此外,添加ECMA-262没有描述的“更多类型、值、对象、属性、和函数”,主要是指该标准中没有规定的新对象和对象的新属性。
-
支持ECMA-262没有定义的“程序和正则表达式语法”。
DOM
文档对象模型(DOM)是针对XML但经过扩展用于HTML的应用程序编程接口(API)。DOM把整个页面映射为一个多层节点结构。HTML或者XML页面中的每个组成部分都是某种类型的节点,这些节点又包含着不同类型的数据。
HTML文档标准模型中,所有内容都是节点:
-
整个文档都是一个文档节点
-
每个HTML元素都是元素节点
-
HTML元素内的文本是文本节点
-
每个HTML属性都是属性节点
-
注释为注释节点
<!DOCTYPE html>
<html>
<head>
<title>document object model</title>
</head>
<body>
<h1>文档对象模型</h1>
<p>元素<a href="http://www.baidu.com">百度一下</p>
</body>
</html>
BOM
- BOM缩写为Browser Object Model,简称为浏览器对象模型
- BOM提供了独立于内容而与浏览器进行交互的对象
- BOM主要用于管理窗口与窗口之间的通信,其核心对象是window,表示浏览器的一个实例 BOM由一系列相关对象构成,并且每个对象都提供了许多方法与属性
- BOM提供了一组访问窗口对象的方法,可用来移动窗口位置、改变窗口大小、打开新窗口和关闭窗口、弹出对话框、进行导航及获取客户的一些信息(如浏览器品牌版本、屏幕分辨率)
- BOM最强大的功能是它提供了一个访问HTML页面入口------document对象
Window对象:
window对象有双重角色: 通过JavaScript访问浏览器窗口的一个对象 ECMAScript规定的Global对象,意味着在网页中定义的任何一个对象、变量、函数都以window作为其Global对象,因此有权访问parseInt()等方法。
window对象同时扮演着ECMAScript和Global对象的角色,因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
window.setTimeout(expression,milliseconds):指定时间后执行一个函数,在超时期限到达前取消执行使用window.clearTimeout(id):接受一个id表示一个定时器。
window.setInterval(expression,milliseconds):每隔指定时间就执行一次代码,取消使用window.clearInterval(id)。
window.opn():可以导航到一个特定的URL还可以打开一个新的浏览器窗口,通常传递第一个参数,第二个参数是已有窗口或框架的名称,第三个参数是逗号分隔的字符串,用于设置新窗口的特征。
location对象:
location对象提供与当前窗口中加载的文档有关的信息,将URL解析为独立的片段。
示例:
URL:htpp://b.a.com:88/index.php?name=liu&age=20#first
属性 |
含义 |
值 |
protocol |
协议 |
“http:” |
hostname |
服务器名字 |
“b.a.com” |
port |
端口 |
“88” |
pathname |
url中主机后的部分 |
“/index.php” |
search |
“?”后的部分,又称为查询字符串 |
?name=liu&age=20 |
hash |
返回“#”之后的内容 |
“#first” |
host |
等于hostname+port |
“b.a.com:88” |
href |
当前页面完整URL |
“htpp://b.a.com:88/index.php?name=liu&age=20#first” |
- location.assign(url):将当前地址放到浏览器历史栈中,单击后退仍可回到该页面,相当于window.location和window.href
- location.replace(url):会从浏览器历史栈中删除本页面,点击后退按钮不能回到该页面
- location.reload(force):重新载入当前页面,force为true时从服务器端重载,为false则从浏览器缓存中重载,默认false
history、screen、navigator对象
history对象保存着用户上网的历史记录,使用go()方法可以在用户历史记录中任意调整,该方法接受一个参数,正数向前跳转,负数向后跳转,字符串跳转指定页面,还可用back()和forward()代替go(),如:
- history.go(-1)//后退一页
- history.go(2)//前进两页
- history.go(“jmi.edu.cn”)//跳转到最近的jmi.edu.cn页面
- history.back()//后退一页
- history.forward()//前进一页
screen对象包含信息与屏幕显示有关,包括宽度、高度及颜色或像素浓淡,支持以下属性:
- availTop(或top):窗口可放置的最顶部位置,以像素表示
- availLeft(或left):窗口可放置的最左边位置,以像素表示
- availWidth(或width):屏幕宽度,单位为像素
- availHeight(或height):屏幕高度,单位为像素
- colorDepth:屏幕颜色深度 pixelDepth:屏幕上每个像素的位元素
navigator对象包含与浏览器或其他访问该页面的用户代理相关信息,可以检查操作系统、浏览器、安全策略、语言及是否启用cookie,支持以下属性:
- appCodeName:浏览器代码基础名称
- appName:浏览器名称
- appVersion:浏览器的主版本号,如1.52主版本号为1.00,子版本号为52(appMinorVersion)
- cookieEnabled:cookie是否启用
- onLine:用户是否联机
- platFrom:浏览器运行的平台
- userLanguage:浏览器支持的语言