生僻概念与规范
JavaScript 是属于 HTML 和 Web 的编程语言。
为何学习 JavaScript？
JavaScript 是 web 开发者必学的三种语言之一：
- HTML 定义网页的内容
- CSS 规定网页的布局
- JavaScript 对网页行为进行编程
提示：JavaScript 同时接受双引号和单引号：
JavaScript 能够改变 HTML 内容
JavaScript 能够改变 HTML 属性
JavaScript 能够改变 HTML 样式 (CSS)
改变 HTML 元素的样式，是改变 HTML 属性的一种变种。
JavaScript 能够隐藏 HTML 元素
可通过改变 display 样式来隐藏 HTML 元素。
元素的显示与隐藏：
display：block/none（不占位置）
visibility：visible/hidden（占有原来位置）
JavaScript 能够显示 HTML 元素
可通过改变 display 样式来显示隐藏的 HTML 元素
JavaScript 函数和事件
JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。
例如，当发生事件时调用函数，比如当用户点击按钮时。
<head> 或 <body> 中的 JavaScript
您能够在 HTML 文档中放置任意数量的脚本。
脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。
提示：把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。
注释：旧的 JavaScript 例子也许会使用 type 属性：<script type="text/javascript">。
注释：type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。
外部脚本
脚本可放置与外部文件中：
外部文件：myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}外部脚本很实用，如果相同的脚本被用于许多不同的网页。
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本，请在 <script> 标签的 src (source) 属性中设置脚本的名称：
实例
<script src="myScript.js"></script>可以在 <head> 或 <body> 中放置外部脚本引用。
该脚本的表现与它被置于 <script> 标签中是一样的。
注释：外部脚本不能包含 <script> 标签。
外部 JavaScript 的优势
在外部文件中放置脚本有如下优势：
- 分离了 HTML 和代码
- 使 HTML 和 JavaScript 更易于阅读和维护
- 已缓存的 JavaScript 文件可加速页面加载
如需向一张页面添加多个脚本文件 - 请使用多个 script 标签：
实例
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>外部引用
可通过完整的 URL 或相对于当前网页的路径引用外部脚本：
本例使用完整的 URL 来链接至脚本：
实例
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>本例使用了位于当前网站上指定文件夹中的脚本：
实例
<script src="/js/myScript1.js"></script>本例链接了与当前页面相同文件夹的脚本：
实例
<script src="myScript1.js"></script>JavaScript输出
JavaScript 不提供任何内建的打印或显示函数。
JavaScript 显示方案
JavaScript 能够以不同方式“显示”数据：
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
提示：更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。
出于测试目的，使用 document.write() 比较方便
注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ：
实例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<button onclick="document.write(5 + 6)">试一试</button>
</body>
</html>提示：document.write() 方法仅用于测试。
JavaScript语句
在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”。
JavaScript 程序
计算机程序是由计算机“执行”的一系列“指令”。
在编程语言中，这些编程指令被称为语句。
JavaScript 程序就是一系列的编程语句。
注释：在 HTML 中，JavaScript 程序由 web 浏览器执行。
JavaScript 语句
JavaScript 语句由以下构成：
值、运算符、表达式、关键词和注释。
大多数 JavaScript 程序都包含许多 JavaScript 语句。
这些语句会按照它们被编写的顺序逐一执行。
注释：JavaScript 程序（以及 JavaScript 语句）常被称为 JavaScript 代码。
代码规范
分号 ;
分号分隔 JavaScript 语句。
请在每条可执行的语句之后添加分号，如果有分号分隔，允许在同一行写多条语句。
提示：以分号结束语句不是必需的，但仍然强烈建议这么做。
JavaScript 空白字符
JavaScript 会忽略多个空格。您可以向脚本添加空格，以增强可读性。
在运算符旁边（ = + - * / ）添加空格是个好习惯。
JavaScript 行长度和折行
为了达到最佳的可读性，程序员们常常喜欢把代码行控制在 80 个字符以内。
如果 JavaScript 语句太长，对其进行折行的最佳位置是某个运算符。
JavaScript 代码块
JavaScript 语句可以用花括号（{...}）组合在代码块中。
代码块的作用是定义一同执行的语句。
JavaScript 关键词
JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。
| 关键词 | 描述 |
|---|---|
| break | 终止 switch 或循环。 |
| continue | 跳出循环并在顶端开始。 |
| debugger | 停止执行 JavaScript，并调用调试函数（如果可用）。 |
| do ... while | 执行语句块，并在条件为真时重复代码块。 |
| for | 标记需被执行的语句块，只要条件为真。 |
| function | 声明函数。 |
| if ... else | 标记需被执行的语句块，根据某个条件。 |
| return | 退出函数。 |
| switch | 标记需被执行的语句块，根据不同的情况。 |
| try ... catch | 对语句块实现错误处理。 |
| var | 声明变量。 |
注释：JavaScript 关键词指的是保留的单词。保留词无法用作变量名。
JavaScript语法
JavaScript 语法是一套规则，它定义了 JavaScript 的语言结构。
JavaScript 值
JavaScript 语句定义两种类型的值：混合值和变量值。
混合值被称为字面量（literal）。变量值被称为变量。
JavaScript 字面量
书写混合值最重要的规则是：
写数值有无小数点均可。
字符串是文本，由双引号或单引号包围。
JavaScript 变量
在编程语言中，变量用于存储数据值。
JavaScript 使用 var 关键词来声明变量。
= 号用于为变量赋值。
JavaScript 运算符
JavaScript 使用算数运算符（+ - * /）来计算值，使用赋值运算符（=）向变量赋值。
JavaScript 表达式
表达式是值、变量和运算符的组合，计算结果是值。
表达式也可包含变量值。
值可以是多种类型，比如数值和字符串。
JavaScript 关键词
JavaScript 关键词用于标识被执行的动作。
var 关键词告知浏览器创建新的变量。
JavaScript 注释
并非所有 JavaScript 语句都被“执行”。
双斜杠 // 或 /* 与 */ 之间的代码被视为注释。
注释会被忽略，不会被执行。
JavaScript 标识符
标识符是名称。
在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。
在大多数编程语言中，合法名称的规则大多相同。
在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。
连串的字符可以是字母、数字、下划线或美元符号。
提示：数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值。
JavaScript 对大小写敏感
所有 JavaScript 标识符对大小写敏感。
变量 lastName 和 lastname，是两个不同的变量。
JavaScript 不会把 VAR 或 Var 译作关键词 var。
JavaScript 与驼峰式大小写
历史上，程序员曾使用三种把多个单词连接为一个变量名的方法：连字符、下划线、驼峰式大小写（Camel Case）。
注释：JavaScript 中不能使用连字符。它是为减法预留的。
JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写。
JavaScript 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆盖世界上几乎所有的字符、标点和符号。
JavaScript注释
JavaScript 注释用于解释 JavaScript 代码，增强其可读性。
JavaScript 注释也可以用于在测试替代代码时阻止执行。
单行注释
单行注释以 // 开头。
任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。
多行注释
多行注释以 /* 开头，以 */ 结尾。
任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。
注释：使用单行注释最为常见。
提示：注释块常用于官方声明。
使用注释来阻止执行
使用注释来防止代码执行很适合代码测试。
在代码行之前添加 // 会把可执行的代码行更改为注释。
JavaScript变量
JavaScript 变量是存储数据值的容器。
类似代数
JavaScript 标识符
所有 JavaScript 变量必须以唯一的名称的标识。
这些唯一的名称称为标识符。
标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。
构造变量名称（唯一标识符）的通用规则是：
- 名称可包含字母、数字、下划线和美元符号
- 名称必须以字母开头
- 名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
- 名称对大小写敏感（y 和 Y 是不同的变量）
- 保留字（比如 JavaScript 的关键词）无法用作变量名称
提示：JavaScript 标识符对大小写敏感。
JavaScript 数据类型
在编程中，文本值被称为字符串。
JavaScript 可处理多种数据类型，但是现在，我们只关注数值和字符串值。
字符串被包围在双引号或单引号中。数值不用引号。
如果把数值放在引号中，会被视作文本字符串。
声明（创建） JavaScript 变量
在 JavaScript 中创建变量被称为“声明”变量。
以通过 var 关键词来声明 JavaScript 变量
声明之后，变量是没有值的。（技术上，它的值是 undefine），如需赋值给变量，请使用等号。
可以在声明变量时向它赋值。
一条语句，多个变量
您可以在一条语句中声明许多变量。
以 var 作为语句的开头，并以逗号分隔变量。
声明可横跨多行。
Value = undefined
在计算机程序中，被声明的变量经常是不带值的。值可以是需被计算的内容，或是之后被提供的数据，比如数据输入。
不带有值的变量，它的值将是 undefined。
重复声明 JavaScript 变量
如果再次声明某个 JavaScript 变量，将不会丢它的值。
JavaScript 算术
与代数类似，您能够通过 JavaScript 变量进行算术运算，使用 = 和 + 之类的运算符。
字符串也可以使用加号，但是字符串将被级联。
提示：如果把要给数值放入引号中，其余数值会被视作字符串并被级联。
JavaScript 算数运算符
算数运算符用于对数字执行算数运算：
| 运算符 | 描述 |
|---|---|
| + | 加法 |
| - | 减法 |
| * | 乘法 |
| / | 除法 |
| % | 系数 |
| ++ | 递加 |
| -- | 递减 |
JavaScript 赋值运算符
赋值运算符向 JavaScript 变量赋值。
| 运算符 | 例子 | 等同于 |
|---|---|---|
| = | x = y | x = y |
| += | x += y | x = x + y |
| -= | x -= y | x = x - y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
加法赋值运算符（+=）向变量添加一个值。
JavaScript 字符串运算符
+ 运算符也可用于对字符串进行相加（concatenate，级联）。
+= 赋值运算符也可用于相加（级联）字符串。
提示：在用于字符串时，+ 运算符被称为级联运算符。
字符串和数字的相加
相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串。
JavaScript 比较运算符
| 运算符 | 描述 |
|---|---|
| == | 等于 |
| === | 等值等型 |
| != | 不相等 |
| !== | 不等值或不等型 |
| > | 大于 |
| < | 小于 |
| >= | 大于或等于 |
| <= | 小于或等于 |
| ? | 三元运算符 |
JavaScript 逻辑运算符
| 运算符 | 描述 |
|---|---|
| && | 逻辑与 |
| || | 逻辑或 |
| ! | 逻辑非 |
JavaScript 类型运算符
| 运算符 | 描述 |
|---|---|
| typeof | 返回变量的类型。 |
| instanceof | 返回 true，如果对象是对象类型的实例。 |
JavaScript 位运算符
位运算符处理 32 位数。
该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。
| 运算符 | 描述 | 例子 | 等同于 | 结果 | 十进制 |
|---|---|---|---|---|---|
| & | 与 | 5 & 1 | 0101 & 0001 | 0001 | 1 |
| | | 或 | 5 | 1 | 0101 | 0001 | 0101 | 5 |
| ~ | 非 | ~ 5 | ~0101 | 1010 | 10 |
| ^ | 异或 | 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |
| << | 零填充左位移 | 5 << 1 | 0101 << 1 | 1010 | 10 |
| >> | 有符号右位移 | 5 >> 1 | 0101 >> 1 | 0010 | 2 |
| >>> | 零填充右位移 | 5 >>> 1 | 0101 >>> 1 | 0010 | 2 |
上例使用 4 位无符号的例子。但是 JavaScript 使用 32 位有符号数。
因此，在 JavaScript 中，~ 5 不会返回 10，而是返回 -6。
~00000000000000000000000000000101 将返回 11111111111111111111111111111010。
JavaScript 算术
处理数值的典型情景是算数。
JavaScript 算数运算符
算术运算符对数值（文字或变量）执行算术运算。
| 运算符 | 描述 |
|---|---|
| + | 加法 |
| - | 减法 |
| * | 乘法 |
| ** | 幂（ES2016） |
| / | 除法 |
| % | 系数 |
| ++ | 递增 |
| -- | 递减 |
算数运算符
典型的算术运算会操作两个数值。
这两个数可以是字面量，也可以是变量或表达式。
运算符和操作数
在算术运算中，数被称为操作数。
（两个操作数之间执行的）运算由运算符定义。
系数
系数运算符（%）返回除法的余数。
幂
取幂运算符（**）将第一个操作数提升到第二个操作数的幂。
实例
var x = 5;
var z = x ** 2; // 结果是 25x ** y 产生的结果与 Math.pow(x,y) 相同。
运算符优先级
运算符优先级（Operator precedence）描述了在算术表达式中所执行操作的顺序。
乘法（*）和除法（%）比加法（+）和减法（-）拥有更高的优先级。
同时，（就像在学校的数学中那样）能够通过使用括号来改变优先级。
当使用括号时，括号中的运算符会首先被计算。
当多个运算拥有相同的优先级时（比如加法和减法），对它们的计算是从左向右的。
JavaScript 运算符优先级值
| 值 | 运算符 | 描述 | 实例 |
|---|---|---|---|
| 20 | ( ) | 表达式分组 | (3 + 4) |
| 19 | . | 成员 | person.name |
| 19 | [] | 成员 | person["name"] |
| 19 | () | 函数调用 | myFunction() |
| 19 | new | 创建 | new Date() |
| 17 | ++ | 后缀递增 | i++ |
| 17 | -- | 后缀递减 | i-- |
| 16 | ++ | 前缀递增 | ++i |
| 16 | -- | 前缀递减 | --i |
| 16 | ! | 逻辑否 | !(x==y) |
| 16 | typeof | 类型 | typeof x |
| 15 | ** | 求幂 (ES7) | 10 ** 2 |
| 14 | * | 乘 | 10 * 5 |
| 14 | / | 除 | 10 / 5 |
| 14 | % | 模数除法 | 10 % 5 |
| 13 | + | 加 | 10 + 5 |
| 13 | - | 减 | 10 - 5 |
| 12 | << | 左位移 | x << 2 |
| 12 | >> | 右位移 | x >> 2 |
| 12 | >>> | 右位移（无符号） | x >>> 2 |
| 11 | < | 小于 | x < y |
| 11 | <= | 小于或等于 | x <= y |
| 11 | > | 大于 | x > y |
| 11 | >= | 大于或等于 | x >= y |
| 11 | in | 对象中的属性 | "PI" in Math |
| 11 | instanceof | 对象的实例 | instanceof Array |
| 10 | == | 相等 | x == y |
| 10 | === | 严格相等 | x === y |
| 10 | != | 不相等 | x != y |
| 10 | !== | 严格不相等 | x !== y |
| 9 | & | 按位与 | x & y |
| 8 | ^ | 按位 XOR | x ^ y |
| 7 | | | 按位或 | x | y |
| 6 | && | 逻辑与 | x && y |
| 5 | || | 逻辑否 | x || y |
| 4 | ? : | 条件 | ? "Yes" : "No" |
| 3 | = | 赋值 | x = y |
| 3 | += | 赋值 | x += y |
| 3 | -= | 赋值 | x -= y |
| 3 | *= | 赋值 | x *= y |
| 3 | %= | 赋值 | x %= y |
| 3 | <<= | 赋值 | x <<= y |
| 3 | >>= | 赋值 | x >>= y |
| 3 | >>>= | 赋值 | x >>>= y |
| 3 | &= | 赋值 | x &= y |
| 3 | ^= | 赋值 | x ^= y |
| 3 | |= | 赋值 | x |= y |
| 2 | yield | 暂停函数 | yield x |
| 1 | , | 逗号 | 7 , 8 |
注意：淡红色指示实验性或建议性的技术（ECMASScript 2016 或 ES7）
提示：括号中的表达式会在值在表达式的其余部分中被使用之前进行完全计算。
JavaScript赋值
JavaScript 赋值运算符
赋值运算符向 JavaScript 变量赋值。
| 运算符 | 例子 | 等同于 |
|---|---|---|
| = | x = y | x = y |
| += | x += y | x = x + y |
| -= | x -= y | x = x - y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
| <<= | x <<= y | x = x << y |
| >>= | x >>= y | x = x >> y |
| >>>= | x >>>= y | x = x >>> y |
| &= | x &= y | x = x & y |
| ^= | x ^= y | x = x ^ y |
| |= | x |= y | x = x | y |
| **= | x **= y | x = x ** y |
提示：**= 运算符属于 ECMAScript 2016 proposal (ES7) 的实验部分。它的跨浏览器表现并不稳定。请勿使用。
JavaScript 数据类型
字符串值，数值，布尔值，数组，对象。
数据类型的概念
在编程过程中，数据类型是重要的概念。
为了能够操作变量，了解数据类型是很重要的。
JavaScript 从左向右计算表达式。不同的次序可能会产生不同的结果。
JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同变量可用作不同类型：
实例
var x; // 现在 x 是 undefined
var x = 7; // 现在 x 是数值
var x = "Bill"; // 现在 x 是字符串值可以在字符串内使用引号，只要这些引号与包围字符串的引号不匹配：
实例
var answer = "It's alright"; // 双引号内的单引号
var answer = "He is called 'Bill'"; // 双引号内的单引号
var answer = 'He is called "Bill"'; // 单引号内的双引号JavaScript 数值
JavaScript 只有一种数值类型。
写数值时用不用小数点均可
超大或超小的数值可以用科学计数法来写：
实例
var y = 123e5; // 12300000
var z = 123e-5; // 0.00123JavaScript 数组
JavaScript 数组用方括号书写。
数组的项目由逗号分隔。
数组索引基于零，这意味着第一个项目是 [0]，第二个项目是 [1]，以此类推。
JavaScript 对象
JavaScript 对象用花括号来书写。
对象属性是 name:value 对，由逗号分隔。
typeof 运算符
可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型。
typeof 运算符返回变量或表达式的类型。
typeof 运算符对数组返回 "object"，因为在 JavaScript 中数组属于对象。
Undefined
在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。
任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。
空值
空值与 undefined 不是一回事。
空的字符串变量既有值也有类型。
实例
var car = ""; // 值是 ""，类型是 "string"Null
在 JavaScript 中，null 是 "nothing"。它被看做不存在的事物。
不幸的是，在 JavaScript 中，null 的数据类型是对象。
您可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。
您可以通过设置值为 null 清空对象：
实例
var person = null; // 值是 null，但是类型仍然是对象Undefined 与 Null 的区别
Undefined 与 null 的值相等，但类型不相等：
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
原始数据
原始数据值是一种没有额外属性和方法的单一简单数据值。
typeof 运算符可返回以下原始类型之一：
- string
- number
- boolean
- undefined
复杂数据
typeof 运算符可返回以下两种类型之一：
- function
- object
typeof 运算符把对象、数组或 null 返回 object。
typeof 运算符不会把函数返回 object。
JavaScript 函数
JavaScript 函数是被设计为执行特定任务的代码块。
JavaScript 函数会在某代码调用它时被执行。
JavaScript 函数语法
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数：
(参数 1, 参数 2, ...)由函数执行的代码被放置在花括号中：{}
function name(参数 1, 参数 2, 参数 3) {
要执行的代码
}
函数参数（Function parameters）是在函数定义中所列的名称。
函数参数（Function arguments）是当调用函数时由函数接收的真实的值。
在函数中，参数是局部变量。
在其他编程语言中，函数近似程序（Procedure）或子程序（Subroutine）。
函数调用
函数中的代码将在其他代码调用该函数时执行：
- 当事件发生时（当用户点击按钮时）
- 当 JavaScript 代码调用时
- 自动的（自调用）
函数返回
当 JavaScript 到达 return 语句，函数将停止执行。
如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。
函数通常会计算出返回值。这个返回值会返回给调用者。
为何使用函数？
您能够对代码进行复用：只要定义一次代码，就可以多次使用它。
您能够多次向同一函数传递不同的参数，以产生不同的结果。
实例
把华氏度转换为摄氏度：
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);() 运算符调用函数
使用上面的例子，toCelsius 引用的是函数对象，而 toCelsius() 引用的是函数结果。
实例
访问没有 () 的函数将返回函数定义：
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;用作变量值的函数
函数的使用方法与变量一致，在所有类型的公式、赋值和计算中。
实例
使用变量来存储函数的值：
var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";您能够把函数当做变量值直接使用：
var text = "The temperature is " + toCelsius(77) + " Celsius";局部变量
在 JavaScript 函数中声明的变量，会成为函数的局部变量。
局部变量只能在函数内访问。
由于局部变量只能被其函数识别，因此可以在不同函数中使用相同名称的变量。
局部变量在函数开始时创建，在函数完成时被删除。
JavaScript 对象
JavaScript 变量是数据值的容器。
对象也是变量。但是对象包含很多值。
值以名称:值对的方式来书写（名称和值由冒号分隔）。
JavaScript 对象是被命名值的容器。
对象方法
对象也可以有方法。
方法是在对象上执行的动作。
方法以函数定义被存储在属性中。
访问对象属性
您能够以两种方式访问属性：
objectName.propertyName或者
objectName["propertyName"]访问对象方法
您能够通过如下语法访问对象方法：
objectName.methodName()如果您不使用 () 访问，则将返回函数定义。
请不要把字符串、数值和布尔值声明为对象！
如果通过关键词 "new" 来声明 JavaScript 变量，则该变量会被创建为对象：
var x = new String(); // 把 x 声明为 String 对象
var y = new Number(); // 把 y 声明为 Number 对象
var z = new Boolean(); // 把 z 声明为 Boolean 对象请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。
JavaScript 事件
HTML 事件是发生在 HTML 元素上的“事情”。
当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。
HTML 事件
HTML 事件可以是浏览器或用户做的某些事情。
下面是 HTML 事件的一些例子：
- HTML 网页完成加载
- HTML 输入字段被修改
- HTML 按钮被点击
通常，当事件发生时，用户会希望做某件事。
JavaScript 允许您在事件被侦测到时执行代码。
通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。
使用单引号：
<element event='一些 JavaScript'>使用双引号：
<element event="一些 JavaScript">在下面的例子中，onclick 属性（以及代码）被添加到 <button> 元素：
实例
<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>在上面的例子中，JavaScript 代码改变了 id="demo" 的元素的内容。
在接下来的例子中，代码（使用 this.innerHTML）改变了其自身元素的内容：
实例
<button onclick="this.innerHTML=Date()">现在的时间是？</button>JavaScript 代码通常有很多行。事件属性调用函数更为常见：
实例
<button onclick="displayDate()">现在的时间是？</button>常见的 HTML 事件
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素已被改变 |
| onclick | 用户点击了 HTML 元素 |
| onmouseover | 用户把鼠标移动到 HTML 元素上 |
| onmouseout | 用户把鼠标移开 HTML 元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已经完成页面加载 |
JavaScript 能够做什么？
事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：
- 每当页面加载时应该做的事情
- 当页面被关闭时应该做的事情
- 当用户点击按钮时应该被执行的动作
- 当用户输入数据时应该被验证的内容
- 等等
让 JavaScript 处理事件的不同方法有很多：
- HTML 事件属性可执行 JavaScript 代码
- HTML 事件属性能够调用 JavaScript 函数
- 您能够向 HTML 元素分配自己的事件处理函数
- 您能够阻止事件被发送或被处理
- 等等
JavaScript 字符串
JavaScript 字符串用于存储和操作文本。
JavaScript 字符串是引号中的零个或多个字符。
内建属性 length 可返回字符串的长度。
反斜杠转义字符把特殊字符转换为字符串字符：
| 代码 | 结果 | 描述 |
|---|---|---|
| \' | ' | 单引号 |
| \" | " | 双引号 |
| \\ | \ | 反斜杠 |
转义字符（\）也可用于在字符串中插入其他特殊字符。
其他六个 JavaScript 中有效的转义序列：
| 代码 | 结果 |
|---|---|
| \b | 退格键 |
| \f | 换页 |
| \n | 新行 |
| \r | 回车 |
| \t | 水平制表符 |
| \v | 垂直制表符 |
这六个转义字符最初设计用于控制打字机、电传打字机和传真机。它们在 HTML 中没有任何意义。
长代码行换行
为了最佳可读性， 程序员们通常会避免每行代码超过 80 个字符串。
如果某条 JavaScript 语句不适合一整行，那么最佳换行位置是某个运算符之后。
实例
document.getElementById("demo").innerHTML =
"Hello Kitty.";您也可以在字符串中换行，通过一个反斜杠即可：
实例
document.getElementById("demo").innerHTML = "Hello \
Kitty!";\ 方法并不是 ECMAScript (JavaScript) 标准。
某些浏览器也不允许 \ 字符之后的空格。
对长字符串换行的最安全做法（但是有点慢）是使用字符串加法：
实例
document.getElementById("demo").innerHTML = "Hello" +
"Kitty!";您不能通过反斜杠对代码行进行换行：
实例
document.getElementById("demo").innerHTML = \
"Hello Kitty!";字符串可以是对象
通常，JavaScript 字符串是原始值，通过字面方式创建，但是字符串也可通过关键词 new 定义为对象。
请不要把字符串创建为对象。它会拖慢执行速度。
new 关键字使代码复杂化。也可能产生一些意想不到的结果：
当使用 == 相等运算符时，相等字符串是相等的：
实例
var x = "Bill";
var y = new String("Bill");
// (x == y) 为 true，因为 x 和 y 的值相等当使用 === 运算符时，相等字符串是不相等的，因为 === 运算符需要类型和值同时相等。
实例
var x = "Bill";
var y = new String("Bill");
// (x === y) 为 false，因为 x 和 y 的类型不同（字符串与对象）甚至更糟。对象无法比较：
实例
var x = new String("Bill");
var y = new String("Bill");
// (x == y) 为 false，因为 x 和 y 是不同的对象实例
var x = new String("Bill");
var y = new String("Bill");
// (x === y) 为 false，因为 x 和 y 是不同的对象请注意 (x==y) 与 (x===y) 的区别。
JavaScript 对象无法进行对比，比较两个 JavaScript 将始终返回 false。
JavaScript 字符串方法
字符串方法和属性
原始值，比如“Bill Gates”，无法拥有属性和方法（因为它们不是对象）。
但是通过 JavaScript，方法和属性也可用于原始值，因为在执行方法和属性时 JavaScript 将原始值视为对象。
字符串长度
length 属性返回字符串的长度。
查找字符串中的字符串
indexOf() 方法返回字符串中指定文本首次出现的索引（位置）。
JavaScript 从零计算位置。
0 是字符串中的第一个位置，1 是第二个，2 是第三个 ...
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引。
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
两种方法都接受作为检索起始位置的第二个参数。
实例
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China", 18);lastIndexOf() 方法向后进行检索（从尾到头），这意味着：假如第二个参数是 50，则从位置 50 开始检索，直到字符串的起点。
实例
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China", 50);检索字符串中的字符串
search() 方法搜索特定值的字符串，并返回匹配的位置：
实例
var str = "The full name of China is the People's Republic of China.";
var pos = str.search("locate");注意到了吗？
两种方法，indexOf() 与 search()，是相等的。
这两种方法是不相等的。区别在于：
- search() 方法无法设置第二个开始位置参数。
- indexOf() 方法无法设置更强大的搜索值（正则表达式）。
将在正则表达式的章节学习到这些更强大的检索值。
提取部分字符串
有三种提取部分字符串的方法：
- slice(start, end)
- substring(start, end)
- substr(start, length)
slice() 方法
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。
如果某个参数为负，则从字符串的结尾开始计数。
这个例子裁剪字符串中位置 -12 到位置 -6 的片段：
实例
var str = "Apple, Banana, Mango";
var res = str.slice(-13,-7);res 的结果是：
Banana如果省略第二个参数，则该方法将裁剪字符串的剩余部分。
提示：负值位置不适用 Internet Explorer 8 及其更早版本。
substring() 方法
substring() 类似于 slice()。
不同之处在于 substring() 无法接受负的索引。
如果省略第二个参数，则该 substring() 将裁剪字符串的剩余部分。
substr() 方法
substr() 类似于 slice()。
不同之处在于第二个参数规定被提取部分的长度。
如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分。
如果首个参数为负，则从字符串的结尾计算位置。
第二个参数不能为负，因为它定义的是长度。
替换字符串内容
replace() 方法用另一个值替换在字符串中指定的值：
实例
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School");replace() 方法不会改变调用它的字符串。它返回的是新字符串。
默认地，replace() 只替换首个匹配：
实例
str = "Please visit Microsoft and Microsoft!";
var n = str.replace("Microsoft", "W3School");默认地，replace() 对大小写敏感。因此不对匹配 MICROSOFT。
如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）：
实例
str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");请注意正则表达式不带引号。
如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）：
实例
str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");转换为大写和小写
通过 toUpperCase() 把字符串转换为大写。
通过 toLowerCase() 把字符串转换为小写。
concat() 方法
concat() 连接两个或多个字符串。
实例
var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);concat() 方法可用于代替加运算符。下面两行是等效的：
实例
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");所有字符串方法都会返回新字符串。它们不会修改原始字符串。
正式地说：字符串是不可变的：字符串不能更改，只能替换。
String.trim()
trim() 方法删除字符串两端的空白符。
实例
var str = " Hello World! ";
alert(str.trim());警告：Internet Explorer 8 或更低版本不支持 trim() 方法。
如需支持 IE 8，您可搭配正则表达式使用 replace() 方法代替：
实例
var str = " Hello World! ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));您还可以使用上面的 replace 方案把 trim 函数添加到 JavaScript String.prototype：
实例
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
var str = " Hello World! ";
alert(str.trim());
提取字符串字符
这是两个提取字符串字符的安全方法：
- charAt(position)
- charCodeAt(position)
charAt() 方法
charAt() 方法返回字符串中指定下标（位置）的字符串。
charCodeAt() 方法
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：
实例
var str = "HELLO WORLD";
str.charCodeAt(0); // 返回 72属性访问（Property Access）
ECMAScript 5 (2009) 允许对字符串的属性访问 [ ]：
实例
var str = "HELLO WORLD";
str[0]; // 返回 H使用属性访问有点不太靠谱：
- 不适用 Internet Explorer 7 或更早的版本
- 它让字符串看起来像是数组（其实并不是）
- 如果找不到字符，[ ] 返回 undefined，而 charAt() 返回空字符串。
- 它是只读的。str[0] = "A" 不会产生错误（但也不会工作！）
实例
var str = "HELLO WORLD";
str[0] = "A"; // 不产生错误，但不会工作
str[0]; // 返回 H提示：如果您希望按照数组的方式处理字符串，可以先把它转换为数组。
把字符串转换为数组
可以通过 split() 将字符串转换为数组：
实例
var txt = "a,b,c,d,e"; // 字符串
txt.split(","); // 用逗号分隔
txt.split(" "); // 用空格分隔
txt.split("|"); // 用竖线分隔如果省略分隔符，被返回的数组将包含 index [0] 中的整个字符串。
如果分隔符是 ""，被返回的数组将是间隔单个字符的数组：
实例
var txt = "Hello"; // 字符串
txt.split(""); // 分隔为字符
扫一扫
254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
