javaScript（一）ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

一、JavaScript简介

　　1.1 、JavaScript组成

　　　　A：ECMAScript 描述了该语言的语法和基本对象，如类型、运算符、保留着、流程控制、面向对象、异常等。

　　　　B：文档对象模型（DOM） 描述处理页面内容的方法和接口。

　　　　C：浏览器对象模型（BOM）描述与浏览器进行交互的方法和接口。

　　1.2、JavaScript脚本语言特点

　　　　a）、解释型的脚本语言：JavaScript是一种解释型的脚本语言，C、C++、java等语言先编译后执行，而JavaScript是在程序的运行过程中进行解释；基于对象，JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

　　　　b）、简单：JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于java基本语言和控制的脚本语言，其设计简单紧凑。

　　　　c）、动态性：JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

　　　　d）、跨平台：JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

二、JavaScript核心与语法

　　2.1、数据类型

　　　　在JS中使用var关键词声明变量，变量的类型会根据其所赋值来决定（动态类型）。

　　　　a）、原始数据类型（5种）：Undefined、Null、Number、string、boolean

　　　　　　  引用数据类型：Object类型

　　　　b）、typeof运算符：查看变量类型。

　　　　　　返回值如下：1、undefined 变量为 Undefined 类型。

　　　　　　　　　　　　2、boolean 变量为 Boolean 类型。

　　　　　　　　　　　　3、Number 变量为 Number 类型。

　　　　　　　　　　　　4、string 变量为 string 类型。

　　　　　　　　　　　　5、Object 变量是一种引用类型或 Null 类型。

　　　　c）、通过instanceof 运算符解决引用类型判断问题。

　　　　d）、原始数据类型和引用数据类型变量在内存中的存放位置：　

　　　　　　　　　

　　　　e）、JS中对类型的定义：一组值的集合。如Boolean类型的值有两个：true、false。Undefined和Null 类型都只有一个值，分别是undefined和null。

　　　　f）、boolean类型的特殊性

　　　　

　　　　g)、== 与 ===

　　　　　　1、JavaScript 中有两个判断值是否相等的操作符，== 与 === 。

　　　　　　2、两者相比，== 会做一定的类型转换；而 === 不做类型转换，所接受的相等条件更加严格。

　　　　　　3、当然与之对应的就是!=与!==

　　　　　　4、尽量使用===而不要使用==

　　2.2、局部变量和全局变量：

　　　　a）、局部变量：在函数内定义，只能在函数内使用，退出函数，变量释放失效。

　　　　b）、全局变量：在函数外定义，页面的所有函数都可调用，页面关闭后释放失效。

　　2.3、数组（Array）

　　　　2.3.1 创建： var arrayObj = new Array();

　　　　　　　　　　var arrayObj = new Array(size);

　　　　　　　　　　var arrayObj = new Array([element0[, element1[, ...[, elementN]]]])

例：
var array11 = new Array();  //空数组
var array12 = new Array(5);  //指定长度，可越界
var array13 = new Array("a","b","c",1,2,3,true,false);  //定义并赋值
var array14=[];  //空数组，语法糖
var array15=[1,2,3,"x","y"];  //定义并赋值

　　　　2.3.2 访问与修改

　　　　　　var arrayObj = new Array("a", "b", ...);

　　　　　　var text =  arrayObj[0];  //访问

　　　　　　arrayObj[1] = "ccccc";  //修改

　　　　2.3.3 添加元素

　　　　　　（1）arrayObj.push(val1, val2, ......); // 将一个或多个添加到数组末尾，返回新数组的长度。

　　　　　　（2）arrayObj.unshift(val1, val2, .....); // 将一个或多个添加到数组起始，返回新数组的长度。

　　　　　　（3）arrayObj.splice(startNum,deleteCount, newVal); //从startNum位置开始，删除deleteCount数量内容，所删除的内容用newVal替换。

　　　　2.3.4 删除

　　　　　　 （1）arrayObj.pop();  // 移除最后一个元素并返回该元素值

 　　　　　　（2）arrayObj.shift(); // 移除最前一个元素并返回该元素值，数组内容自动前移

　　　　　　 （3）arrayObj.splice(startDel, delCount); //从startDel位置开始，删除delCount数量元素

　　　　2.3.5 截取和合并

　　　　　　（1）arrayobj.slice(start, [end]); //从start开始截取，到end位置（不包括end）结束。若无end，则截取至最后。返回新数组。

　　　　　　（2）arrayObj.concat(item1, item2, .....); // 将多个数组（字符串，或者数组和字符串的混合）进行合并，返回新数组

　　　　2.3.6 排序

　　　　　　（1）arrayObj.reverse();  // 反转元素，将元素内容反转排列。

　　　　　　（2）arrayObj.sort();

　　　　　　　　  arrayObj.sort(function(obj1, obj2){});  // 对数组元素排序，返回数组地址

　　　　2.3.7 合并成字符串

　　　　　　（1）arrayObj.join(separator); //将数组每个元素连接一起，中间用separator隔开，返回字符串

　　　　

数组常用方法：
Array.concat( )    连接数组
Array.join( )    将数组元素连接起来以构建一个字符串
Array.length    数组的大小
Array.pop( )    删除并返回数组的最后一个元素
Array.push( )    给数组添加元素
Array.reverse( )    颠倒数组中元素的顺序
Array.shift( )    将元素移出数组
Array.slice( )    返回数组的一部分
Array.sort( )    对数组元素进行排序
Array.splice( )    插入、删除或替换数组的元素
Array.toLocaleString( )    把数组转换成局部字符串
Array.toString( )    将数组转换成一个字符串
Array.unshift( )    在数组头部插入一个元素

　　2.4 正则表达式RegExp

　　　　2.4.1 RegExp对象：该对象代表正则表达式，用于字符串匹配

　　　　　　① 两种RegExp对象创建方式：
　　　　　　　　方式一，new 一个RegExp对象：var regExp = new RegExp(“[a-zA-Z0-9]{3,8}”);
　　　　　　　　方式二，通过字面量赋值：var regExp = /^[a-zA-Z0-9]{3,8}$/;

　　　　　　② 正则表达式的具体写法使用时查询文档。
　　　　　　③ 常用方法：var b = regExp .test(string); //返回true或false。

　　　　2.4.2 RegExp对象的语法：var reg = new RegExp（pattern, attributes）;

　　　　　　（1） pattern参数：正则表达式字符串

　　　　　　　  attributes参数：可选字符串，可选值"g"全局匹配, "i"区分大小写匹配, "m"多行匹配

　　　　　　（2）抛出：

　　　　　　　　SyntaxError - 如果 pattern 不是合法的正则表达式，或 attributes 含有 "g"、"i" 和 "m" 之外的字符，抛出该异常。
　　　　　　　　TypeError - 如果 pattern 是 RegExp 对象，但没有省略 attributes 参数，抛出该异常。

　　　　　　（3）修饰符

　　　　　　　　　　　

a). 关于全局匹配所有的正则表达式都有一个lastIndex属性，用于记录上一次匹配结束的位置。如果不是全局匹配模式，那lastIndex的值始终为0，
　　在匹配过一次后，将会停止匹配。
b). 正则表达式的全局匹配模式，就是在创建正则表达式的时候使用g标识符或者将global属性设置为true，在全局匹配模式下，正则表达式会对指定
　　要查找的字符串执行多次匹配。每次匹配使用当前正则对象的lastIndex属性的值作为在目标字符串中开始查找的起始位置。
　　如果找不到匹配的项lastIndex的值会被重新设置为0。

　　　　2.4.3 RegExp 对象方法

 

 

 

　　　　2.4.4 string字符串正则方法

　　　　　　（1）string.search(regExp); // 检索匹配的值，返回匹配值的索引位置

  　　　　　　　　console.log("kjds23s2".search(/\d[2]/igm));  //4 第一次匹配成功的索引

　　　　　　（2）string.match(regExp); //找到匹配内容所有符合正则的值，返回数组。　　　　　

　　　　　　　　　console.log("kjds23sd9we56sdoi1we780we98sd".match(/\d[2]/igm)); //["23", "56", "78", "98"]

 　　　　　　（3）string.replace(regExp，newVal); //将匹配的内容，替换成新的内容。返回替换之后的字符串。（其实就是替换字符串，当然也可以用正则匹配替换）

　　　　　　 （4）string.split(regExp); //把字符串分割字符串数组。正则可以作为分割符。

方括号：方括号用于查找某个范围内的字符
表达式    描述
[abc]            查找方括号之间的任何字符。
[^abc]    查找任何不在方括号之间的字符。
[0-9]    查找任何从 0 至 9 的数字。
[a-z]        查找任何从小写 a 到小写 z 的字符。
[A-Z]    查找任何从大写 A 到大写 Z 的字符。
[A-z]        查找任何从大写 A 到小写 z 的字符。
[adgk]    查找给定集合内的任何字符。
[^adgk]    查找给定集合外的任何字符。
(red|blue|green)    查找任何指定的选项。

元字符：元字符（Metacharacter）是拥有特殊含义的字符
.    查找单个字符，除了换行和行结束符。
\w    查找单词字符。
\W    查找非单词字符。
\d    查找数字。
\D    查找非数字字符。
\s    查找空白字符。
\S    查找非空白字符。
\b    匹配单词边界。
\B    匹配非单词边界。
\0    查找 NUL 字符。
\n    查找换行符。
\f    查找换页符。
\r    查找回车符。
\t    查找制表符。
\v    查找垂直制表符。
\xxx    查找以八进制数 xxx 规定的字符。
\xdd    查找以十六进制数 dd 规定的字符。
\uxxxx    查找以十六进制数 xxxx 规定的 Unicode 字符。

量词
n+    匹配任何包含至少一个 n 的字符串。
n*    匹配任何包含零个或多个 n 的字符串。
n?    匹配任何包含零个或一个 n 的字符串。
n{X}    匹配包含 X 个 n 的序列的字符串。
n{X,Y}    匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}    匹配包含至少 X 个 n 的序列的字符串。
n$    匹配任何结尾为 n 的字符串。
^n    匹配任何开头为 n 的字符串。
?=n    匹配任何其后紧接指定字符串 n 的字符串。
?!n    匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp：对象属性
global            RegExp 对象是否具有标志 g。
ignoreCase    RegExp 对象是否具有标志 i。
lastIndex            一个整数，标示开始下一次匹配的字符位置。
multiline            RegExp 对象是否具有标志 m。
source            正则表达式的源文本。            

 

　　2.5 字符串对象string

　　　　2.5.1 string对象属性

　　　　

 

 

 　　　　2.5.2 string对象方法

　　　　

 

 

　　2.6 时间日期对象Date

　　　　2.6.1 创建语法： var myDate = new Date();

　　　　2.6.2 对象属性

 

 

 

 　　　　2.6.3 Date对象常用方法　

Date()  返回当前的时间和日期
getDate() 从Date对象返回一个月的某一天1 - 31
getDay() 从Date对象返回一周的某一天0 - 6
getMonth() 从Date对象返回月份 0 -11
getFullYear() 从Date对象以四位数字返回年份
getHours() 返回Date对象的小时（0 - 23）
getMinutes() 返回Date对象的分钟（0 59）
getSeconds() 返回Date对象的秒数（0 59）
getMillisecinds() 返回Date对象的毫秒数（0  999）
getTimes() 返回1970年1月1日至今的毫秒数
getTimezoneOffset() 返回本地时间与格林威治标准时间（GMT）的分钟差

setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setYear()	请使用 setFullYear() 方法代替。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	以毫秒设置 Date 对象。

toSource()	返回该对象的源代码。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toDateString()	把 Date 对象的日期部分转换为字符串。

valueOf()

返回 Date 对象的原始值。

 

 　　2.7 数学对象Math

　　　　2.7.1 描述

　　　　　　Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

　　　　2.7.2 Math对象属性

　　　　　　

 

 　　　　2.7.3 Math对象方法

　　　　　　

 

 　　2.8 JavaScript全局对象

　　　　2.8.1 描述　　　　　　

　　　　　　全局对象是预定义的对象，作为 JavaScript 的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他所有预定义的对象、函数和属性。全局对象不是任何对象的属性，所以它没有名称。
　　　　　　在顶层 JavaScript 代码中，可以用关键字 this 引用全局对象。但通常不必用这种方式引用全局对象，因为全局对象是作用域链的头，这意味着所有非限定性的变量和函数名都会作为该对象的属性来查询。例如，当JavaScript 代码引用 parseInt() 函数时，它引用的是全局对象的 parseInt 属性。全局对象是作用域链的头，还意味着在顶层 JavaScript 代码中声明的所有变量都将成为全局对象的属性。
　　　　　　全局对象只是一个对象，而不是类。既没有构造函数，也无法实例化一个新的全局对象。
　　　　　　在 JavaScript 代码嵌入一个特殊环境中时，全局对象通常具有环境特定的属性。实际上，ECMAScript 标准没有规定全局对象的类型，JavaScript 的实现或嵌入的 JavaScript 都可以把任意类型的对象作为全局对象，只要该对象定义了这里列出的基本属性和函数。例如，在允许通过 LiveConnect 或相关的技术来脚本化 Java 的 JavaScript 实现中，全局对象被赋予了这里列出的 java 和 Package 属性以及 getClass() 方法。而在客户端 JavaScript 中，全局对象就是 Window 对象，表示允许 JavaScript 代码的 Web 浏览器窗口。

　　　　2.8.2 顶层函数（全局函数）

　　　　

 

 　　　　2.8.3 顶层属性（全局属性）

　　　　

 三、BOM

　　3.1 BOM概要

　　　　BOM(Browser Object Model) 即浏览器对象模型，主要是指一些浏览器内置对象如：window、location、navigator、screen、history等对象，用于完成一些操作浏览器的特定API。

　　　　用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

　　　　BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

　　　　

BOM是browser object model的缩写，简称浏览器对象模型
BOM提供了独立于内容而与浏览器窗口进行交互的对象
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
BOM最初是Netscape浏览器标准的一部分

　　3.1.1 BOM结构

　　　　

 

 

 从图可以看出：DOM是属于BOM的一个属性。

 window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。

由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象。

 

 

　　3.2  BOM导图　　

BOM部分主要是针对浏览器的内容，其中常用的就是window对象和location
window是全局对象很多关于浏览器的脚本设置都是通过它。
location则是与地址栏内容相关，比如想要跳转到某个页面，或者通过URL获取一定的内容。
navigator中有很多浏览器相关的内容，通常判断浏览器类型都是通过这个对象。
screen常常用来判断屏幕的高度宽度等。
history访问浏览器的历史记录，如前进、后台、跳转到指定位置。

 

 

 3.3 BOM对象

　　3.3.1 window对象

　　　　3.3.1.1  window.open();  //导航和打开窗口, 既可以导航到特定的URL，也可以打开一个新的浏览器窗口。

　　　　3.3.1.2 定时器

　　　　　　1）setTimeout（code，millisec）;  //code 必需，调用的函数后要执行的 JavaScript 代码串。millisec 必需，执行前需等待的毫秒数。

　　　　　　2）clearTimeout(对象)；  // 清楚已设置的setTimeout对象

　　　　　　3）setInterval(code,millisec);  // 按照指定的周期（以毫秒计）来调用函数或计算表达式

　　　　　　4）clearInterval(对象)； //清除已设置的setInterval对象

　　　　3.3.1.3 系统对话框

　　　　　　1）alert(); //带一个确定按钮

　　　　　　2）confirm(); //带有一个确定和取消按钮

　　　　　　3） prompt(); //OK和cannel按钮  还会有一个文本输入域

　　　　3.3.1.4 scroll系列方法

　　　　　　1）scrollHeight和scrollWidth 对象内部的实际内容的高度/宽度（不包括border）

　　　　　　2）scrollTop和scrollLeft 被卷去部分的顶部/左侧 到 可视区域 顶部/左侧 的距离

　　　　　　3）onscroll() 事件 滚动条滚动触发的事件

　　3.3.2 document对象

　　　　1）write() 函数
　　　　2）writeln() 函数
　　　　3）document.open() 函数
　　　　4）document.close() 函数

　　3.3.3 location对象

　　　　location对象提供了当前窗口加载的文档的相关信息，还提供了一些导航功能。事实上，这是一个很特殊的对象，location既是window对象的属性，又是document对象的属性。

 

 

 　　3.3.4 history对象

　　　　history对象保存着用户上网的历史记录，使用go()实现在用户的浏览记录中跳转

　　　　

 

 

 　　3.3.5 navigator对象　　　

　　　　这个对象代表浏览器实例，其属性很多，但常用的不太多。如下：

　　　　navigator.userAgent：用户代理字符串，用于浏览器监测中、
　　　　navigator.plugins:浏览器插件数组，用于插件监测
　　　　navigator.registerContentHandler 注册处理程序，如提供RSS阅读器等在线处理程序。

3.4 DOM对象

　　DOM（文档对象模型）是针对HTML和XML文档的一个API，通过DOM可以去改变文档。

 

 

 DOM模型将整个文档（XML文档和HTML文档）看成一个树形结构，并用document对象表示该文档。

DOM规定文档中的每个成分都是一个节点（Node）：
文档节点（Document）：代表整个文档
元素节点（Element）：文档中的一个标记
文本节点（Text）：标记中的文本
属性节点（Attr）：代表一个属性，元素才有属性

　　3.4.1 节点类型 

　　　　

 

 

 　　3.4.2 节点关系

　　　　

　　　　

 

 

     节点关系方法：

　　hasChildNodes() 包含一个或多个节点时返回true
　　contains() 如果是后代节点返回true
　　isSameNode()、isEqualNode() 传入节点与引用节点的引用为同一个对象返回true
　　compareDocumentPostion() 确定节点之间的各种关系

 

 

 　　3.4.3 选择器

　　　　

 　　　　通过文档节点（document）调用以上方法，获取元素节点（Element）

 

 　　3.4.4 样式操作方法style

　　　　

 

 

 　　  3.4.5、文档节点 Document

　　　　

　　3.4.6、 元素节点ELEMENT

　　　　

 

 

 　　3.4.7 、属性节点attributes

　　　　

 

 

 　　3.4.8、文本节点TEXT