JavaWeb03-轻松理解JS（Java真正的全栈开发）

一.js常用对象

ljs中的常见对象有以下几个:

Boolean

Number

String

Array 数组

Date 日期

Math 数学

RegExp 正则

Global 全局

1．Boolean

Ø Boolean对象描述

在 js中，布尔值是一种基本的数据类型。Boolean 对象是一个将布尔值打包的布尔对象。Boolean 对象主要用于提供将布尔值转换成字符串的 toString() 方法。

Ø Boolean对象创建

Boolean 对象表示两个值："true" 或 "false"。

创建 Boolean 对象的语法：

new Boolean(value); //构造函数

Boolean(value); //转换函数

Ø 参数

参数 value 由布尔对象存放的值或者要转换成布尔值的值。

Ø 返回值

当作为一个构造函数（带有运算符 new）调用时，Boolean() 将把它的参数转换成一个布尔值，并且返回一个包含该值的 Boolean 对象。

如果作为一个函数（不带有运算符 new）调用时，Boolean() 只将把它的参数转换成一个原始的布尔值，并且返回这个值。

Ø 注意：

如果省略 value 参数，或者设置为 0、-0、null、""、false、undefined 或 NaN，则该对象设置为 false。否则设置为 true（即使 value 参数是字符串 "false"）。

2．Number

Ø Number对象描述

在 js中，数字是一种基本的数据类型。js还支持 Number 对象，该对象是原始数值的包装对象。在必要时，js会自动地在原始数据和对象之间转换。

Ø Number对象创建

Number 对象是原始数值的包装对象。

创建 Number 对象的语法：

new Number(value);//返回一个对象

Number(value);//返回一个值

Ø 参数

参数 value 是要创建的 Number 对象的数值，或是要转换成数字的值。

Ø 返回值

当 Number() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 Number 对象。如果不用 new 运算符，把 Number() 作为一个函数来调用，它将把自己的参数转换成一个原始的数值,并且返回这个值（如果转换失败，则返回 NaN）。

Ø 注意:

如果省略 value 参数，或者设置为null、""、””、+0、-0、0、false，则返回0;参数为true则返回1;字符串形式的数字,则返回为转换后的数字,其余的则为NaN.

3．String

Ø String 对象描述

字符串是 js的一种基本的数据类型。String 对象的 length 属性声明了该字符串中的字符数。String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。需要注意的是，js的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。

Ø String对象创建

String 对象用于处理文本（字符串）。

创建 String 对象的语法：

new String(s);

String(s);

Ø 参数

参数 s 是要存储在 String 对象中或转换成原始字符串的值。

Ø 返回值

当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。

当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。

Ø 方法:

只列举常用方法,其余方法参考api

获取指定字符

charAt(索引) 返回在指定位置的字符。

charCodeAt(索引) 返回在指定的位置的字符的 Unicode 编码。

获取索引号

indexOf(检索字符串) 检索字符串。若找到则返回目标字符的索引,否则返回-1

lastIndexOf(检索字符串) 从后向前搜索字符串。返回目标字符串最后出现位置的索引值,否则返回-1

连接字符串

concat(要连接的字符串) 连接接字符串

截取字符串

substring(开始的索引,结束的索引) 提取字符串中两个指定的索引号之间的字符。

substr(开始的索引,个数) 从起始索引号提取字符串中指定数目的字符。

slice(开始的位置,结束的位置) 提取字符串的片断，并在新的字符串中返回被提取的部分.参数可以为负数.

正则用到的方法(正则对象再讲)

match() 找到一个或多个正在表达式的匹配。

replace() 替换与正则表达式匹配的子串。

search() 检索与正则表达式相匹配的值

split() 把字符串分割为字符串数组。

4．Array

Array 对象用于在单个的变量中存储多个值。

Ø Array对象创建：

new Array();

new Array(size);

new Array(element0, element1, ..., elementn);

Ø 参数

参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。

参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

Ø 返回值

返回新创建并被初始化了的数组。

如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。

当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined 的数组。

当其他参数调用 Array() 时，该构造函数将用参数指定的值初始化数组。

当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。

Ø 方法

只列举常用方法,其余方法参考api

打印数组

join(指定分隔符) 把数组的所有元素通过指定的分隔符进行分隔,以字符串形式输出。

链接数组

concat() 连接两个或更多的值或数组，并返回结果

对结构操作

reverse() 颠倒数组中元素的顺序。

sort() 对数组的元素进行排序

对内容操作

pop() 删除并返回数组的最后一个元素

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

shift() 删除并返回数组的第一个元素

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

5．Date

Ø Date 对象描述

Date 对象用于处理日期和时间。

Ø 创建 Date 对象的语法：

var myDate=new Date();

Ø 注意

Date 对象会自动把当前日期和时间保存为其初始值。

Ø 方法

只列举常用方法,其余方法参考api

getFullYear() 从 Date 对象以四位数字返回年份。

getMonth() 从 Date 对象返回月份 (0 ~ 11)。

getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。

getHours() 返回 Date 对象的小时 (0 ~ 23)。

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。

getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。

getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。

6．Math

Ø Math对象语法

Math 对象用于执行数学任务。直接使用 Math 的属性和方法的语法：

var pi_value=Math.PI;

var sqrt_value=Math.sqrt(15);

Ø 注意

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

Ø 方法

只列举常用方法,其余方法参考api

ceil(x) 对数进行上舍入。

floor(x) 对数进行下舍入。

round(x) 把数四舍五入为最接近的整数。

random() 返回 0 ~ 1 之间的随机数。

7．RegExp

Ø RegExp对象描述

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

Ø RegExp对象创建:

直接量语法

/pattern/attributes

创建 RegExp 对象的语法：

new RegExp(pattern, attributes);

Ø 参数

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。

参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

Ø 返回值

一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。

如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。

Ø 方法:

RegExp 对象方法

test 检索字符串中指定的值。返回 true 或 false。

compile 编译正则表达式。

exec 检索字符串中指定的值。返回找到的值，并确定其位置。

支持正则表达式的 String 对象的方法

split() 把字符串分割为字符串数组。

replace() 替换与正则表达式匹配的子串。

match() 找到一个或多个正在表达式的匹配。

search() 检索与正则表达式相匹配的值

8．Global

顶层的函数:

编码:

encodeURI() 把字符串编码为 URI。

decodeURI() 解码某个编码的 URI。

encodeURIComponent() 把字符串编码为 URI 组件。

decodeURIComponent() 解码一个编码的 URI 组件。

强转

Number() 把对象的值转换为数字。

String() 把对象的值转换为字符串。

数字处理

parseFloat() 解析一个字符串并返回一个浮点数。

parseInt() 解析一个字符串并返回一个整数。

eval执行函数

eval() 将函数参数字符串，当成js程序执行

二.函数

创建函数

在ECMAScript中函数有以下几种创建方式

第一种:

function 函数名称(参数列表){

函数体;

}

第二种:

var 函数名称=function(参数列表){

函数体;

}

第三种:

var 函数名称=new Function(参数列表,函数体);//注意,参数和函数体用引号引起来

调用函数

函数可以通过其名字加上括号中的参数进行调用。

注意:

调用函数的时候参数个数可以不一样.

javascript中有一个特殊的对象arguments,我们可以通过它来获取所有函数中的参数.

函数返回值:

对于javascript来说，我们不必须在创建函数时，来声明其返回值类型，无返回值也不需要使用void来声明,但是，如果一个函数要想返回结果，我们在函数中必须使用return来返回结果,return后面的语句不再执行.如果函数无明确的返回值，或调用了没有参数的 return 语句，那么它真正返回的值是 undefined。

三.事件

事件通常与函数配合使用，这样我们可以通过发生的事件来驱动函数执行.

常见事件:

onblur 元素失去焦点

onfocus 元素获得焦点

onclick 鼠标点击某个对象

ondblclick 鼠标双击某个对象

onmousedown 某个鼠标按键被按下

onmouseup 某个鼠标按键被松开

onmousemove 鼠标被移动

onmouseout 鼠标从某元素移开

onmouseover 鼠标被移到某元素之上

onkeydown 某个键盘的键被按下

onkeypress 某个键盘的键被按下或按住

onkeyup 某个键盘的键被松开

onselect 文本被选定

onchange 用户改变域的内容

onsubmit 提交按钮被点击

onload 某个页面或图像被完成加载

事件绑定

在javascript中事件经常与函数一起使用，那么我们介绍一下怎样将一个事件与函数绑定到一起，简单说，就是某个事件被触发后，函数如果被调用。

1.html事件属性

<input type=”button” value=”点击” onclick="dianJi()"/>

2.html dom分配事件

<script>

document.getElementById("myBtn").onclick=ddianJi;

</script>

阻止默认事件(兼容所有浏览器)

if(event&&event.stopPropagation){

event.preventDefault();

}else{

window.event.returnValue = false;

}

阻止事件传播(兼容所有浏览器)

if(event&&event.stopPropagation){

event.stopPropagation();//firefox

}else{

window.event.cancelBubble = true;//ie

}

四.BOM

介绍

IE 3.0 和 Netscape Navigator 3.0 提供了一种特性 - BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的标准。

BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

弹出新的浏览器窗口

移动、关闭浏览器窗口以及调整窗口大小

提供 Web 浏览器详细信息的定位对象

提供用户屏幕分辨率详细信息的屏幕对象

对 cookie 的支持

IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象,由于没有相关的 BOM 标准，每种浏览器都有自己的 BOM 实现。有一些事实上的标准，如具有一个窗口对象和一个导航对象，不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。

BOM的五个对象:Window History Location Navigator Screen

1. Window

Window 对象表示浏览器中打开的窗口,所有浏览器都支持该对象

如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象

常用属性:

top 最顶层的先辈窗口。

parent 父窗口。

self 自己

opener 返回对创建此窗口的窗口的引用。

常用方法:

消息框

alert("文本") ，警告框

confirm("文本")，确认框

如果用户点击确认，那么返回值为 true。

如果用户点击取消，那么返回值为 false。

prompt("文本","默认值")，提示框。

如果用户点击确认，那么返回值为输入的值。

如果用户点击取消，那么返回值为 null。

定时器

setInterval(代码或者函数,间隔时间) 按照指定的周期（以毫秒计）来调用函数或计算表达式。

clearInterval() 取消由 setInterval() 设置的 timeout。

setTimeout(代码或者函数,间隔时间) 在指定的毫秒数后调用函数或计算表达式。

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

注意:参数如果是函数的,两种写法,

1.直接写函数名,不带括弧,例如setInterval(show,1000);

2.用引号引起来函数名加扩花,例如setInterval(“show()”,1000);

窗体

window.open(URL,name,features,replace) 打开一个新的浏览器窗口或查找一个已命名的窗口

2. History

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

常用方法:

back() 加载 history 列表中的前一个 URL。

forward() 加载 history 列表中的下一个 URL。

go() 加载 history 列表中的某个具体页面。

3. Location

Location 对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

对于Location对象，我们只需要掌握href这个属性就可以，它的作用是设置或返回完整的URL。

五.DOM

DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。

什么是DOM

DOM 是 W3C（万维网联盟） 的推荐标准。

DOM 定义了所有文档元素的对象和属性，以及访问它们的方法（接口）。

DOM 定义了访问诸如 XML 和 XHTML 文档的标准。

“W3C 文档对象模型（DOM）是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。”

W3C DOM 被分为 3 个不同的部分/级别（parts / levels）：

核心 DOM，用于任何结构化文档的标准模型

XML DOM，用于 XML 文档的标准模型

HTML DOM，用于 HTML 文档的标准模型

HTML DOM 定义了访问和操作HTML文档的标准方法。

HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。

XML DOM与HTML DOM的关系

XML DOM 定义了访问和处理 XML 文档的标准方法

HTML文档格式 符合XML语法标准，所以可以使用XML DOM API

在XML DOM每个元素 都会被解析为一个节点Node，而常用的节点类型又分为

元素节点 Element

属性节点 Attribute

文本节点 Text

文档节点 Document

HTML DOM定义了针对 HTML文档的对象,可以说是一套更加适用于js技术开发 的API

HTML DOM是对XML DOM的扩展

进行 JavaScript DOM开发 可以同时使用 XML DOM和 HTML DOM

常用的方法:

getElementById <xxx id="...">

getElementsByTagName <xxx>

getElementsByName <xxx name="...">

getElementsByClassName() <xxx class="...">

常用的属性:

innerHtml 获取元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。