JavaScript核心概念
本文详细介绍了JavaScript的基础知识，包括ECMAScript规范、DOM和BOM的基本概念。解释了ECMAScript的特性，DOM如何操作HTML和XML文档，以及BOM提供的浏览器交互API。
[size=large][b]1.什么是JavaScript[/b][/size]
JavaScript 是一门脚本语言，主要由 ECMAScript 规范（与任何的宿主无关），DOM，BOM组成。
[url=http://www.ecmascript.org/]ECMAScript[/url] 是一种规范，定义语言的属性、语法、对象，该规范由具体语言实现，如Javascript、ActionScript、ScriptEase等；
[url=http://www.w3.org/DOM/]DOM[/url]（Document Object Model 文档对象模型）是Html和Xml的应用程序接口（API），DOM将页面规划成由节点层级构成的文档；
BOM（Browser Object Model 浏览器对象模型），提供对浏览器进行访问和操作的统一接口API。BOM相关API处理浏览器窗口window和document，包含：window.open弹出新的窗口，移动，关闭浏览器，cookie支持等。
[size=large][b]2.ECMAScript[/b][/size]
严格来说ECMAScript才是JavaScript语言，它以任何的宿主环境无关
（1）、语法
区分大小写
弱类型
注释，函数与java近似（java 7以后有闭包）
（2）、变量定义
弱类型
下划线，字母，$起头
Pascal记法
（3）、数据类型
原始值：存储于栈空间，易于操作，共有五种：Number、Null、Undefined、String、Boolean，五种类型可以通过typeof来判断，如typeof(a) 返回”number”,”object”,”undefined”,”string”,”boolean”
注意：
null和undefined区别，undefined声明了变量但未对变量的赋初值，null 表示尚未存在的对象，但typeof(null)返回值也为object，null属于一个空的object
isNaN(num)方法判断 num 是否为数值型，NaN == Not a Number，若 num 是数字，返回值为 false，若 num 是非数字，则返回值为true
转换：数值转字符串，使用toString()方法，注意Num.toString(2)可以选择使用多少进制来转换；字符串转数值，parseInt、parseFloat函数；强制类型转换，Boolean(‘true’), var s1=String(23);
引用值：
var o = new Object(); var num = new Number(5);
调用对象的valueOf()返回原始值，注意各个对象中的属性和方法；Number，String采用 instanceof来判断一个特定对象为某特定类型
JavaScript对象：
本地对象：Object Function Array String Boolean Number Date RegExp 一批Error类
内置对象：Global Math
宿住对象：由具体的宿主环境提供，所有的BOM和DOM都是宿主对象
（4）、操作符
基本的语言操作符都近似的操作符：
数值操作 （Arithmetic Operations）: + ++ – — * / %
字符串操作 （String Operations）: + +=
逻辑操作 （Logical Operations）: && || !
位操作 （Bitwise Operations）: & ^ | ~ << >> >>> 注意： 3 << 2 == 12 自动转换成10进制
分配操作 （Assignment Operations）: = += -= *= /= %= &= ^= |= <<= >>= >>>=
比较操作 （Comparison Operation）: == != === !== > >= < <=
注意：
负数的表示形式为“正数取反再加1”
左移时右边补0,保留符号位(也就是第31位的1不变)
右移时左边补0,保留符号位
（5）、语法
与Java，C++基本类似，些许不同：
在width内部可以直接使用object的属性及方法，而不用通过object.fn(**);可以直接使用fn(**)
（6）、函数，对象的定义
每个对象都有共同的prototype属性，prototype可添加方法。JavaScript语言与其他高级语言的最大不同点体现在prototype属性，使用prototype可用于模拟高级语言中的对象继承！
（7）、对象
创建对象的三种方式：
（8）、闭包
总结在另一章里面：JavaScript闭包 。
（9）、正则表达式
正则表达式我喜欢abruzzi 写的JavaScript内核系列 第6章 正则表达式
[size=large][b]3.DOM模型[/b][/size]
页面上的每个HTML元素，都作为一个DOM对象，拥有属性和方法，参考[url=http://www.w3school.com.cn/htmldom/index.ASP]w3school dom[/url]。
document是重要的对象，默认document属于windows的属性对象，表示整个DOM文档，包含对DOM元素的操作API。
document查找API包括：getElementById(elemId)，查找页面内唯一id的元素，若有多个id相同的对象，只返回第一个，速度最快的查找方法。若查找到，返回单个对象。
getElementsByName(elemName)，按name属性查找，同一页面中可以包含多个相同name属性的对象，返回值数组类型。
getElementsByTagName(tagName)，按元素标签查找元素，匹配元素的标签名。
现代浏览器还增加了一getElementsByClassName(className)，在firefox上测试，里面若包含了className，同时包含其他的样式，可以被匹配出来，免去了以前用正则表达式来做处理，减少代码量。帮助用户更快的进行元素的选择。这种方法的使用使得手机端的选择器可以大大减少代码量。document还包含对body的直接访问：document.body，可以调用到body.onready函数，装载DOM元素完成时对body内的元素进行操作。cookie也属于document的属性对象，对cookie的内容进行获取并访问。title也属于document的属性对象，可直接更改页面的title。其余的div，table等元素的介绍，可参考 [url=http://www.w3school.com.cn/htmldom/index.ASP]w3school dom[/url]。
[size=large][b]4.BOM模型[/b][/size]
window
所有的浏览器都应该支持window对象，window对象包含了宿主对象提供JavaScript操作的接口。
参考：[url=http://www.w3school.com.cn/htmldom/dom_obj_window.asp]w3school window 对象[/url]的属性和方法，分类：
弹出窗口提示： alert(), confirm(), prompt()
定时器相关：setTimeout(), setInterval(), clearTimeout(), clearInterval()
打开关闭相关：open(), close() （注意：open函数，控制窗口的特征：位置，大小，模式，菜单栏等）
浏览器大小相关：resizeBy(width, height), resizeTo(x, y)
浏览器位置相关：moveBy(x, y), moveTo(x, y), scrollBy(xnum, ynum), scrollTo(xpos, ypos)
窗口打印：print()
注意 ：要读取outterHeight, outterWidth, innerHeight, innerWidth，可以从document.body属性读取，即通过dom对象来读取，而不是直接操作window对象
常用属性：
父子关系：parent, opener, top
屏幕大小：screenLeft, screenTop, screenX, screenY （screen 相关有浏览器兼容问题，这个属性原本应该不是在这里的，所以才导致各个不统一）
状态：name, defaultStatus, status
window对象还包含location, history, screen, navigator, 和 document对象， document 已在 DOM小节说明，下面解析其他对象。
location
location控制当前页面 url 链接，如hash表示#号锚点，search表示?及其后的所有数据。一个链接可以表示为：href = protocol + “//” + hostname + “:” port + path
涉及到链接改变需刷新页面，location中添加了reload()方法，用于刷新当前页面：
[img]http://dl.iteye.com/upload/attachment/0069/8546/239874a1-df07-394c-95b1-7eed059cd0b9.jpg[/img]
history
go(url | num) 跳转到第几个历史页面
forward() 前进
back() 后退
navigator
浏览器版本信息等，区分浏览器非常有用，最常用userAgent属性，包含版本非常详尽的信息，然后再通过正则找出想要的浏览器信息如：chrome控制台输入navigator.userAgent，输出：Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4
screen
浏览器的宽高，相素等信息：
availHeight: 1056
availLeft: 66
availTop: 24
availWidth: 1854
colorDepth: 24
height: 1080
pixelDepth: 24
width: 1920
JavaScript 是一门脚本语言，主要由 ECMAScript 规范（与任何的宿主无关），DOM，BOM组成。
[url=http://www.ecmascript.org/]ECMAScript[/url] 是一种规范，定义语言的属性、语法、对象，该规范由具体语言实现，如Javascript、ActionScript、ScriptEase等；
[url=http://www.w3.org/DOM/]DOM[/url]（Document Object Model 文档对象模型）是Html和Xml的应用程序接口（API），DOM将页面规划成由节点层级构成的文档；
BOM（Browser Object Model 浏览器对象模型），提供对浏览器进行访问和操作的统一接口API。BOM相关API处理浏览器窗口window和document，包含：window.open弹出新的窗口，移动，关闭浏览器，cookie支持等。
[size=large][b]2.ECMAScript[/b][/size]
严格来说ECMAScript才是JavaScript语言，它以任何的宿主环境无关
（1）、语法
区分大小写
弱类型
注释，函数与java近似（java 7以后有闭包）
（2）、变量定义
弱类型
下划线，字母，$起头
Pascal记法
（3）、数据类型
原始值：存储于栈空间，易于操作，共有五种：Number、Null、Undefined、String、Boolean，五种类型可以通过typeof来判断，如typeof(a) 返回”number”,”object”,”undefined”,”string”,”boolean”
注意：
null和undefined区别，undefined声明了变量但未对变量的赋初值，null 表示尚未存在的对象，但typeof(null)返回值也为object，null属于一个空的object
isNaN(num)方法判断 num 是否为数值型，NaN == Not a Number，若 num 是数字，返回值为 false，若 num 是非数字，则返回值为true
转换：数值转字符串，使用toString()方法，注意Num.toString(2)可以选择使用多少进制来转换；字符串转数值，parseInt、parseFloat函数；强制类型转换，Boolean(‘true’), var s1=String(23);
引用值：
var o = new Object(); var num = new Number(5);
调用对象的valueOf()返回原始值，注意各个对象中的属性和方法；Number，String采用 instanceof来判断一个特定对象为某特定类型
JavaScript对象：
本地对象：Object Function Array String Boolean Number Date RegExp 一批Error类
内置对象：Global Math
宿住对象：由具体的宿主环境提供，所有的BOM和DOM都是宿主对象
（4）、操作符
基本的语言操作符都近似的操作符：
数值操作 （Arithmetic Operations）: + ++ – — * / %
字符串操作 （String Operations）: + +=
逻辑操作 （Logical Operations）: && || !
位操作 （Bitwise Operations）: & ^ | ~ << >> >>> 注意： 3 << 2 == 12 自动转换成10进制
分配操作 （Assignment Operations）: = += -= *= /= %= &= ^= |= <<= >>= >>>=
比较操作 （Comparison Operation）: == != === !== > >= < <=
注意：
负数的表示形式为“正数取反再加1”
左移时右边补0,保留符号位(也就是第31位的1不变)
右移时左边补0,保留符号位
（5）、语法
与Java，C++基本类似，些许不同：
width(object){
// do something here
}
在width内部可以直接使用object的属性及方法，而不用通过object.fn(**);可以直接使用fn(**)
（6）、函数，对象的定义
每个对象都有共同的prototype属性，prototype可添加方法。JavaScript语言与其他高级语言的最大不同点体现在prototype属性，使用prototype可用于模拟高级语言中的对象继承！
（7）、对象
创建对象的三种方式：
// 直接新建Object对象
var obj = new Object();
obj.name = "zl";
obj.age = 23;
// 使用new 对象方式访问对象
var obj1 = new Array();
// 直接使用JSON数据
var obj2 = {"name":"zl","age":23};
（8）、闭包
总结在另一章里面：JavaScript闭包 。
（9）、正则表达式
正则表达式我喜欢abruzzi 写的JavaScript内核系列 第6章 正则表达式
[size=large][b]3.DOM模型[/b][/size]
页面上的每个HTML元素，都作为一个DOM对象，拥有属性和方法，参考[url=http://www.w3school.com.cn/htmldom/index.ASP]w3school dom[/url]。
document是重要的对象，默认document属于windows的属性对象，表示整个DOM文档，包含对DOM元素的操作API。
document查找API包括：getElementById(elemId)，查找页面内唯一id的元素，若有多个id相同的对象，只返回第一个，速度最快的查找方法。若查找到，返回单个对象。
getElementsByName(elemName)，按name属性查找，同一页面中可以包含多个相同name属性的对象，返回值数组类型。
getElementsByTagName(tagName)，按元素标签查找元素，匹配元素的标签名。
现代浏览器还增加了一getElementsByClassName(className)，在firefox上测试，里面若包含了className，同时包含其他的样式，可以被匹配出来，免去了以前用正则表达式来做处理，减少代码量。帮助用户更快的进行元素的选择。这种方法的使用使得手机端的选择器可以大大减少代码量。document还包含对body的直接访问：document.body，可以调用到body.onready函数，装载DOM元素完成时对body内的元素进行操作。cookie也属于document的属性对象，对cookie的内容进行获取并访问。title也属于document的属性对象，可直接更改页面的title。其余的div，table等元素的介绍，可参考 [url=http://www.w3school.com.cn/htmldom/index.ASP]w3school dom[/url]。
[size=large][b]4.BOM模型[/b][/size]
window
所有的浏览器都应该支持window对象，window对象包含了宿主对象提供JavaScript操作的接口。
参考：[url=http://www.w3school.com.cn/htmldom/dom_obj_window.asp]w3school window 对象[/url]的属性和方法，分类：
弹出窗口提示： alert(), confirm(), prompt()
定时器相关：setTimeout(), setInterval(), clearTimeout(), clearInterval()
打开关闭相关：open(), close() （注意：open函数，控制窗口的特征：位置，大小，模式，菜单栏等）
浏览器大小相关：resizeBy(width, height), resizeTo(x, y)
浏览器位置相关：moveBy(x, y), moveTo(x, y), scrollBy(xnum, ynum), scrollTo(xpos, ypos)
窗口打印：print()
注意 ：要读取outterHeight, outterWidth, innerHeight, innerWidth，可以从document.body属性读取，即通过dom对象来读取，而不是直接操作window对象
常用属性：
父子关系：parent, opener, top
屏幕大小：screenLeft, screenTop, screenX, screenY （screen 相关有浏览器兼容问题，这个属性原本应该不是在这里的，所以才导致各个不统一）
状态：name, defaultStatus, status
window对象还包含location, history, screen, navigator, 和 document对象， document 已在 DOM小节说明，下面解析其他对象。
location
location控制当前页面 url 链接，如hash表示#号锚点，search表示?及其后的所有数据。一个链接可以表示为：href = protocol + “//” + hostname + “:” port + path
涉及到链接改变需刷新页面，location中添加了reload()方法，用于刷新当前页面：
[img]http://dl.iteye.com/upload/attachment/0069/8546/239874a1-df07-394c-95b1-7eed059cd0b9.jpg[/img]
history
go(url | num) 跳转到第几个历史页面
forward() 前进
back() 后退
navigator
浏览器版本信息等，区分浏览器非常有用，最常用userAgent属性，包含版本非常详尽的信息，然后再通过正则找出想要的浏览器信息如：chrome控制台输入navigator.userAgent，输出：Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4
screen
浏览器的宽高，相素等信息：
availHeight: 1056
availLeft: 66
availTop: 24
availWidth: 1854
colorDepth: 24
height: 1080
pixelDepth: 24
width: 1920
扫一扫
9803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
