一:为何学习 JavaScript?
JavaScript 是 web 开发者必学的三种语言之一:
- HTML 定义网页的内容
- CSS 规定网页的布局
- JavaScript 对网页行为进行编程
二:基础知识
2.1 显示数据
JavaScript 能够以不同方式“显示”数据:
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
2.2 注释
单行注释以 // 开头。
多行注释以 /* 开头,以 */ 结尾。
2.3 变量
2.3.1 命名
- 名称可包含字母、数字、下划线和美元符号
- 名称必须以字母开头
- 名称也可以 $ 和 _ 开头(但是在本教程中我们不会这么做)
- 名称对大小写敏感(y 和 Y 是不同的变量)
- 保留字(比如 JavaScript 的关键词)无法用作变量名称
2.3.2 声明变量
使用 var 或者 let 来定义变量,无需在意变量类型。
其中var的作用域为全局,而 let 的作用域只在代码块内。
var x = '3' + 2 // 结果是 '32' var y = 3 + 2 + '9' //结果是 '79'
2.4 运算符
2.4.1 算数运算符
‘+ - * / % ++ – ‘
2.4.2 赋值运算符
‘ = += -= *= /= %= ‘
2.4.3 字符串运算符
+ 运算符也可用于对字符串进行相加(concatenate,级联)
2.4.4 比较运算符
运算符 | 描述 |
---|---|
== | 等于 |
=== | 等值等型 |
!= | 不相等 |
!== | 不等值或不等型 |
> | 大于 |
< | 小于 |
>= | 大于或等于 |
<= | 小于或等于 |
? | 三元运算符 |
2.4.5 逻辑运算符
运算符 | 描述 |
---|---|
&& | 逻辑与 |
|| | 逻辑或 |
! | 逻辑非 |
2.4.6 类型运算符
运算符 | 描述 |
---|---|
typeof | 返回变量的类型。 |
instanceof | 返回 true,如果对象是对象类型的实例。 |
2.5 函数
JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。
圆括号可包括由逗号分隔的参数:
(参数 1, 参数 2, ...)
由函数执行的代码被放置在花括号中:{}
function name(参数 1, 参数 2, 参数 3) { 要执行的代码 }
函数参数(Function parameters)是在函数定义中所列的名称。
函数参数(Function arguments)是当调用函数时由函数接收的真实的值。
2.6 事件
HTML 事件可以是浏览器或用户做的某些事情。
下面是 HTML 事件的一些例子:
- HTML 网页完成加载
- HTML 输入字段被修改
- HTML 按钮被点击
通常,当事件发生时,用户会希望做某件事。
JavaScript 允许您在事件被侦测到时执行代码。
通过 JavaScript 代码,HTML 允许您向 HTML 元素添加事件处理程序。
常见的 HTML 事件
下面是一些常见的 HTML 事件:
事件 | 描述 |
---|---|
onchange | HTML 元素已被改变 |
onclick | 用户点击了 HTML 元素 |
onmouseover | 用户把鼠标移动到 HTML 元素上 |
onmouseout | 用户把鼠标移开 HTML 元素 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已经完成页面加载 |
2.7 字符串
通常,JavaScript 字符串是原始值,通过字面方式创建:
var firstName = "Bill"
但是字符串也可通过关键词 new 定义为对象:
var firstName = new String("Bill")
2.7.1 查找字符串中的字符串
indexOf() 方法返回字符串中指定文本首次出现的索引(位置):如果未找到文本, indexOf() 和 lastIndexOf() 均返回 -1。
2.7.2 lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引:
2.7.3 slice() 方法
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
该方法设置两个参数:起始索引(开始位置),终止索引(结束位置)。
这个例子裁剪字符串中位置 7 到位置 13 的片段:
2.7.4 替换字符串内容
replace() 方法用另一个值替换在字符串中指定的值:
2.7.5 转换大小写
通过 toUpperCase() 把字符串转换为大写:
通过 toLowerCase() 把字符串转换为小写:
2.7.6 连接字符串
concat() 连接两个或多个字符串:
2.7.7 去两边空格
trim() 方法删除字符串两端的空白符:
2.7.8 提取字符
charAt() 方法返回字符串中指定下标(位置)的字符串:
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码:
2.7.9 把字符串转换为数组
可以通过 split() 将字符串转换为数组:
var txt = "a,b,c,d,e"; // 字符串 txt.split(","); // 用逗号分隔 txt.split(" "); // 用空格分隔 txt.split("|"); // 用竖线分隔 txt.split(""); // 分隔为字符
2.8 数字方法
2.8.1 转换字符串为数值
toString() 以字符串返回数值。
2.8.2 转变量为数值
Number() 可用于把 JavaScript 变量转换为数值:
parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字:
parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字:
2.9数组方法
2.8.1 数组遍历
遍历数组的最安全方法是使用 “for” 循环:
您也可以使用 Array.foreach() 函数:
2.8.2 添加数组元素
向数组添加新元素的最佳方法是使用 push() 方法:
2.8.3 创建数组
没有必要使用 JavaScript 的内建数组构造器 new Array()。
请使用 [] 取而代之!
2.8.4 判别数组对象
为了解决这个问题,ECMAScript 5 定义了新方法 Array.isArray()
:
假如对象由给定的构造器创建,则 instanceiof 运算符返回 true:
2.8.5 把数组转换为字符串
JavaScript 方法 toString() 把数组转换为数组值(逗号分隔)的字符串。
join() 方法也可将所有数组元素结合为一个字符串。它的行为类似 toString(),但是您还可以规定分隔符:
2.8.6 删除添加元素
pop() 方法从数组中删除最后一个元素:
push() 方法(在数组结尾处)向数组添加一个新的元素:push() 方法返回新数组的长度:
shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引。shift() 方法返回被“位移出”的字符串:
unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素:unshift() 方法返回新数组的长度。
2.8.7 更改元素
通过使用它们的索引号来访问数组元素:length 属性提供了向数组追加新元素的简易方法:
2.8.8 删除元素
既然 JavaScript 数组属于对象,其中的元素就可以使用 JavaScript delete 运算符来删除:改为 undefined
2.8.9 拼接数组
splice() 方法可用于向数组添加新项:第一个参数(2)定义了应添加新元素的位置(拼接)。
第二个参数(0)定义应删除多少元素。
其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组:
2.8.10 合并数组
concat() 方法通过合并(连接)现有数组来创建一个新数组:
var arr1 = ["Cecilie", "Lone"]; var arr2 = ["Emil", "Tobias", "Linus"]; var arr3 = ["Robin", "Morgan"]; var myChildren = arr1.concat(arr2, arr3);
2.8.11 裁剪数组
slice() 可接受两个参数,比如 (1, 3)。
该方法会从开始参数选取元素,直到结束参数(不包括)为止。
2.8.12 自动 toString()
如果需要原始值,则 JavaScript 会自动把数组转换为字符串。
2.9 数组排序
2.9.1 sort()
sort() 方法以字母顺序对数组进行排序:
2.9.2 反转数组
reverse() 方法反转数组中的元素。
2.9.3 比值函数
比较函数的目的是定义另一种排序顺序。
比较函数应该返回一个负,零或正值,这取决于参数:
function(a, b){return a-b}
当 sort() 函数比较两个值时,会将值发送到比较函数,并根据所返回的值(负、零或正值)对这些值进行排序。
2.9.4 查找最高(或最低)的数组值
JavaScript 不提供查找数组中最大或最小数组值的内建函数。
不过,在对数组进行排序之后,您能够使用索引来获得最高或最低值。
var points = [40, 100, 1, 5, 25, 10]; points.sort(function(a, b){return a - b}); // 现在 points[0] 包含最低值 // 而 points[points.length-1] 包含最高值
您可以使用 Math.max.apply 来查找数组中的最高值:
您可以使用 Math.min.apply 来查找数组中的最低值:
2.10 数组迭代
2.10.1 Array.forEach()
forEach() 方法为每个数组元素调用一次函数(回调函数)。
注释:该函数接受 3 个参数:
- 项目值
- 项目索引
- 数组本身
2.10.2 Array.map()
map() 方法通过对每个数组元素执行函数来创建新数组。
请注意,该函数有 3 个参数:
- 项目值
- 项目索引
- 数组本身
2.10.3 Array.filter()
filter() 方法创建一个包含通过测试的数组元素的新数组。
2.10.4 Array.reduce()
reduce() 方法在每个数组元素上运行函数,以生成(减少它)单个值。
2.10.5 Array.reduceRight()
reduceRight() 方法在每个数组元素上运行函数,以生成(减少它)单个值。
2.10.6 Array.indexOf()
indexOf() 方法在数组中搜索元素值并返回其位置。
注释:第一个项目的位置是 0,第二个项目的位置是 1,以此类推。
array.indexOf(item, start)
item | 必需。要检索的项目。 |
---|---|
start | 可选。从哪里开始搜索。负值将从结尾开始的给定位置开始,并搜索到结尾。 |
如果未找到项目,Array.indexOf() 返回 -1。
如果项目多次出现,则返回第一次出现的位置。
2.10.7 Array.lastIndexOf()
Array.lastIndexOf() 与 Array.indexOf() 类似,但是从数组结尾开始搜索。
2.11 日期
2.11.1 创建日期
Date 对象由新的 Date() 构造函数创建。
有 4 种方法创建新的日期对象:
- new Date()
- new Date(year, month, day, hours, minutes, seconds, milliseconds)
- new Date(milliseconds)
- new Date(date string)
2.11.2 输入格式
有四种 JavaScript 日期输入格式:
类型 | 实例 |
---|---|
ISO 日期 | “2018-02-19” (国际标准) |
短日期 | “02/19/2018” 或者 “2018/02/19” |
长日期 | “Feb 19 2018” 或者 “19 Feb 2019” |
完整日期 | “Monday February 25 2015” |
2.11.3 日期获取方法
获取方法用于获取日期的某个部分(来自日期对象的信息)。下面是最常用的方法(以字母顺序排序):
方法 | 描述 |
---|---|
getDate() | 以数值返回天(1-31) |
getDay() | 以数值获取周名(0-6) |
getFullYear() | 获取四位的年(yyyy) |
getHours() | 获取小时(0-23) |
getMilliseconds() | 获取毫秒(0-999) |
getMinutes() | 获取分(0-59) |
getMonth() | 获取月(0-11) |
getSeconds() | 获取秒(0-59) |
getTime() | 获取时间(从 1970 年 1 月 1 日至今) |
2.11.4 日期设置方法
设置方法用于设置日期的某个部分。下面是最常用的方法(按照字母顺序排序):
方法 | 描述 |
---|---|
setDate() | 以数值(1-31)设置日 |
setFullYear() | 设置年(可选月和日) |
setHours() | 设置小时(0-23) |
setMilliseconds() | 设置毫秒(0-999) |
setMinutes() | 设置分(0-59) |
setMonth() | 设置月(0-11) |
setSeconds() | 设置秒(0-59) |
setTime() | 设置时间(从 1970 年 1 月 1 日至今的毫秒数) |
2.12 Math方法
方法 | 描述 |
---|---|
abs(x) | 返回 x 的绝对值 |
acos(x) | 返回 x 的反余弦值,以弧度计 |
asin(x) | 返回 x 的反正弦值,以弧度计 |
atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度 |
ceil(x) | 对 x 进行上舍入 |
cos(x) | 返回 x 的余弦 |
exp(x) | 返回 Ex 的值 |
floor(x) | 对 x 进行下舍入 |
log(x) | 返回 x 的自然对数(底为e) |
max(x,y,z,…,n) | 返回最高值 |
min(x,y,z,…,n) | 返回最低值 |
pow(x,y) | 返回 x 的 y 次幂 |
random() | 返回 0 ~ 1 之间的随机数 |
round(x) | 把 x 四舍五入为最接近的整数 |
sin(x) | 返回 x(x 以角度计)的正弦 |
sqrt(x) | 返回 x 的平方根 |
tan(x) | 返回角的正切 |
2.13 循环
JavaScript 支持不同类型的循环:
- for - 多次遍历代码块
- for/in - 遍历对象属性
- while - 当指定条件为 true 时循环一段代码块
- do/while - 当指定条件为 true 时循环一段代码块
2.14 类型转换
JavaScript 中有五种可包含值的数据类型:
- 字符串(string)
- 数字(number)
- 布尔(boolean)
- 对象(object)
- 函数(function)
有三种对象类型:
- 对象(Object)
- 日期(Date)
- 数组(Array)
同时有两种不能包含值的数据类型:
- null
- undefined
如果 JavaScript 尝试操作一种“错误”的数据类型,它会试图将该值转换为“正确”的类型。
结果并不总是你所期望的:
5 + null // 返回 5 因为 null 被转换为 0 "5" + null // 返回 "5null" 因为 null 被转换为 "null" "5" + 2 // 返回 52 因为 2 被转换为 "2" "5" - 2 // 返回 3 因为 "5" 被转换为 5 "5" * "2" // 返回 10 因为 "5" 和 "2" 被转换为 5 和 2
2.15 正则表达式
语法
/pattern/modifiers;
使用字符串方法
在 JavaScript 中,正则表达式常用于两个字符串方法:search() 和 replace()。
search() 方法使用表达式来搜索匹配,然后返回匹配的位置。
replace() 方法返回模式被替换处修改后的字符串。在 JavaScript 中,正则表达式常用于两个字符串方法:search() 和 replace()。
search() 方法使用表达式来搜索匹配,然后返回匹配的位置。
replace() 方法返回模式被替换处修改后的字符串。
2.16 错误处理
try 语句使您能够测试代码块中的错误。
catch 语句允许您处理错误。
throw 语句允许您创建自定义错误。
finally 使您能够执行代码,在 try 和 catch 之后,无论结果如何。