一、JavaScript基础
1、JavaScript用法：
2、<script> 标签：
- 在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
- <script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
3、JavaScript使用限制：
- 在 HTML 文档中放入不限数量的脚本。
- 脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
- 通常的做法是把函数放入 <head> 部分中，或者放在页面底部，不会干扰页面的内容。
4、JavaScript输出
①JavaScript通常用来操作HTML
②文档输出：
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 window.alert() 弹出警告框。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
5、JavaScript语句：
①JavaScript 语句：
向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
②分号：
用于分隔 JavaScript 语句，通常我们在每条可执行的语句结尾添加分号，使用分号的另一用处是在一行中编写多条语句。
③JavaScript 代码
JavaScript 代码是 JavaScript 语句的序列。浏览器按照编写顺序依次执行每条语句。
④标识符：
标识符必须以字母、下划线或美元符号开始
语句标识符是保留关键字不能作为变量名使用。
⑤JavaScript对大小写敏感
⑥空格：JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。
⑦语句标识符是保留关键字不能作为变量名使用。如break、var、do ... while等
⑧换行：不允许在语句单词中换行。
6、注释
①单行注释以 // 开头。
②多行注释以 /* 开始，以 */ 结尾。
7、JavaScript 变量
变量是用于存储信息的"容器"。var x=5; var y=6; var z=x+y;
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
8、JavaScript 数据类型
字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。
二、JavaScript 语法
1、JavaScript运算符
①JavaScript 算术运算符
y=5，下面的表格解释了这些算术运算符：
| 运算符 | 描述 | 例子 | x 运算结果 | y 运算结果 |
|---|
| + | 加法 | x=y+2 | 7 | 5 |
| - | 减法 | x=y-2 | 3 | 5 |
| * | 乘法 | x=y*2 | 10 | 5 |
| / | 除法 | x=y/2 | 2.5 | 5 |
| % | 取模（余数） | x=y%2 | 1 | 5 |
| ++ | 自增 | x=++y | 6 | 6 |
| x=y++ | 5 | 6 |
| -- | 自减 | x=--y | 4 | 4 |
| x=y-- | 5 | 4 |
②JavaScript 赋值运算符
给定 x=10 和 y=5，下面的表格解释了赋值运算符：
| 运算符 | 例子 | 等同于 | 运算结果 |
|---|
| = | x=y | | x=5 |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
③用于字符串的 + 运算符
+ 运算符用于把文本值或字符串变量加起来（连接起来）。
2、JavaScript 比较 和 逻辑运算符
①比较运算符
比较运算符在逻辑语句中使用，以测定变量或值是否相等。
x=5，下面的表格解释了比较运算符：
| 运算符 | 描述 | 比较 | 返回值 |
|---|
| == | 等于（不限类型） | x==8 | false |
| x==5 | true |
| === | 绝对等于（值和类型均相等） | x==="5" | false |
| x===5 | true |
| != | 不等于 | x!=8 | true |
| !== | 不绝对等于（值和类型有一个不相等，或两个都不相等） | x!=="5" | true |
| x!==5 | false |
| > | 大于 | x>8 | false |
| < | 小于 | x<8 | true |
| >= | 大于或等于 | x>=8 | false |
| <= | 小于或等于 | x<=8 | true |
②逻辑运算符
逻辑运算符用于测定变量或值之间的逻辑。
给定 x=6 以及 y=3，下表解释了逻辑运算符：
| 运算符 | 描述 | 例子 |
|---|
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x==5 || y==5) 为 false |
| ! | not | !(x==y) 为 true |
③条件运算符
JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。
语法： variablename=(condition)?value1:value2；
3、条件语句
通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在 JavaScript 中，我们可使用以下条件语句：
- if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
- if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
- if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
if (condition1){ 当条件 1 为 true 时执行的代码}else if (condition2){ 当条件 2 为 true 时执行的代码}else{ 当条件 1 和 条件 2 都不为 true 时执行的代码}- switch 语句 - 使用该语句来选择多个代码块之一来执行
switch(n){ case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: 与 case 1 和 case 2 不同时执行的代码}4、JavaScript for 循环
JavaScript 支持不同类型的循环：
- for - 循环代码块一定的次数
for (语句 1; 语句 2; 语句 3){ 被执行的代码块}- for/in - 循环遍历对象的属性
var person={fname:"John",lname:"Doe",age:25}; for (x in person){ txt=txt + person[x];}- while - 当指定的条件为 true 时循环指定的代码块
while (条件){ 需要执行的代码}- do/while - 同样当指定的条件为 true 时循环指定的代码块
do{ 需要执行的代码}while (条件);
5、JavaScript 跳转语句 break 和 continue
- break 语句用于跳出循环。
- continue 用于跳过循环中的一个迭代。
6、JavaScript 标签
break 和 continue 语句仅仅是能够跳出代码块的语句。
语法：
break labelname;
continue labelname;
continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：
cars=["BMW","Volvo","Saab","Ford"];list: { document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); break list; document.write(cars[3] + "<br>"); document.write(cars[4] + "<br>"); document.write(cars[5] + "<br>");}7、JavaScript typeof, null, 和 undefined
①typeof 操作符
可以使用 typeof 操作符来检测变量的数据类型。
typeof "John" // 返回 string typeof 3.14 // 返回 numbertypeof false // 返回 booleantypeof [1,2,3,4] // 返回 objecttypeof {name:'John', age:34} // 返回 object 在JavaScript中，数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。
②null
在 JavaScript 中 null 表示 "什么都没有"。
null是一个只有一个值的特殊类型。表示一个空对象引用。
用 typeof 检测 null 返回是object。
设置为 null 来清空对象: var person = null; // 值为 null(空), 但类型为对象
③Undefined
在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。
var person; // 值为 undefined(空), 类型是undefined
任何变量都可以通过设置值为 undefined 来清空。 类型为 undefined.
④Undefined 和 Null 的区别
null 和 underfined 的值相等，但类型不等：typeof undefined // undefinedtypeof null // objectnull === undefined // falsenull == undefined // true
8、JavaScript 类型转换
Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。
JavaScript 变量可以转换为新变量或其他数据类型：
- 通过使用 JavaScript 函数
- 通过 JavaScript 自身自动转换
①将数字转换为字符串
全局方法 String() 可以将数字转换为字符串。
该方法可用于任何类型的数字，字母，变量，表达式：
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回
Number 方法 toString() 也是有同样的效果。
x.toString()
(123).toString()
(100 + 23).toString()
常用数字转换为字符串的方法：
方法 | 描述 |
toExponential() | 把对象的值转换为指数计数法。 |
toFixed() | 把数字转换为字符串，结果的小数点后有指定位数的数字。 |
toPrecision() | 把数字格式化为指定的长度。 |
②将布尔值转换为字符串
全局方法 String() 可以将布尔值转换为字符串。
String(false) // 返回 "false"String(true) // 返回 "true"Boolean 方法 toString() 也有相同的效果。false.toString() // 返回 "false"true.toString() // 返回 "true"
③将日期转换为字符串
Date() 返回字符串。
Date() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
全局方法 String() 可以将日期对象转换为字符串。
String(new Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
Date 方法 toString() 也有相同的效果。
obj = new Date()obj.toString() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
常用日期转换为字符串的函数：
方法 | 描述 |
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
④将字符串转换为数字
全局方法 Number() 可以将字符串转换为数字。
字符串包含数字(如 "3.14") 转换为数字 (如 3.14).
空字符串转换为 0。
其他的字符串会转换为 NaN (不是个数字)。
Number("3.14") // 返回 3.14Number(" ") // 返回 0 Number("") // 返回 0Number("99 88") // 返回 NaN 常用字符串转为数字的方法：
方法 | 描述 |
parseFloat() | 解析一个字符串，并返回一个浮点数。 |
parseInt() | 解析一个字符串，并返回一个整数。 |
⑤一元运算符 +
Operator + 可用于将变量转换为数字：
var y = "5"; // y 是一个字符串var x = + y; // x 是一个数字
如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字):
var y = "John"; // y 是一个字符串
var x = + y; // x 是一个数字 (NaN)
⑥将布尔值转换为数字
全局方法 Number() 可将布尔值转换为数字。
Number(false) // 返回 0
Number(true) // 返回 1
⑦将日期转换为数字
全局方法 Number() 可将日期转换为数字。
d = new Date();
Number(d) // 返回 1404568027739
日期方法 getTime() 也有相同的效果。
d = new Date();
d.getTime() // 返回 1404568027739
⑧自动转换类型
当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。
以下输出结果不是你所期望的：
5 + null // 返回 5 null 转换为 0"5" + null // 返回"5null" null 转换为 "null""5" + 1 // 返回 "51" 1 转换为 "1" "5" - 1 // 返回 4 "5" 转换为 5
⑨自动转换为字符串
当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法：
document.getElementById("demo").innerHTML = myVar;// if myVar = {name:"Fjohn"} // toString 转换为 "[object Object]"// if myVar = [1,2,3,4] // toString 转换为 "1,2,3,4"// if myVar = new Date() // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"数字和布尔值也经常相互转换：// if myVar = 123 // toString 转换为 "123"// if myVar = true // toString 转换为 "true"// if myVar = false // toString 转换为 "false" 9、JavaScript 正则表达式
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。
语法：
/正则表达式主体/修饰符(可选)
其中修饰符可选，如：
var patt = /runoob/i 解析：/runoob/i 是一个正则表达式。 runoob 是一个正则表达式主体 (用于检索)。 i 是一个修饰符 (搜索不区分大小写)。
①使用字符串方法
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
var str = "Visit Runoob!";
var n = str.search(/Runoob/i);//输出结果6
search 方法可使用字符串作为参数。字符串参数会转换为正则表达式。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/microsoft/i,"Runoob");//输出结果Visit Runoob!
replace() 方法将接收字符串作为参数
②正则表达式修饰符
修饰符 可以在全局搜索中不区分大小写:
修饰符 | 描述 |
i | 执行对大小写不敏感的匹配。 |
g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
m | 执行多行匹配。 |
正则表达式模式
方括号用于查找某个范围内的字符：
表达式 | 描述 |
[abc] | 查找方括号之间的任何字符。 |
[0-9] | 查找任何从 0 至 9 的数字。 |
(x|y) | 查找任何以 | 分隔的选项。 |
元字符是拥有特殊含义的字符：
元字符 | 描述 |
\d | 查找数字。 |
\s | 查找空白字符。 |
\b | 匹配单词边界。 |
\uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
量词:
量词 | 描述 |
n+ | 匹配任何包含至少一个 n 的字符串。 |
n* | 匹配任何包含零个或多个 n 的字符串。 |
n? | 匹配任何包含零个或一个 n 的字符串。 |
③test()
test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
④exec（）
exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
10、变量的提升
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
JavaScript 只有声明的变量会提升，初始化的不会。
11、JavaScript 代码规范
JavaScript 代码规范
代码规范通常包括以下几个方面:
- 变量和函数的命名规则
- 空格，缩进，注释的使用规则。
- 其他常用规范……
规范的代码可以更易于阅读与维护。
代码规范一般在开发前规定。
①变量名
变量名推荐使用驼峰法来命名(camelCase):
firstName = "John";lastName = "Doe";price = 19.90;tax = 0.20;fullPrice = price + (price * tax);
②空格与运算符
通常运算符 ( = + - * / ) 前后需要添加空格:
var x = y + z;var values = ["Volvo", "Saab", "Fiat"];
③语句规则
简单语句的通用规则:
var values = ["Volvo", "Saab", "Fiat"];var person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue"}; 复杂语句的通用规则:
- 将左花括号放在第一行的结尾。
- 左花括号前添加一空格。
- 将右花括号独立放在一行。
- 不要以分号结束一个复杂的声明。
function toCelsius(fahrenheit) { return (5 / 9) * (fahrenheit - 32);} 循环:
for (i = 0; i < 5; i++) { x += i;} 条件语句:
if (time < 20) { greeting = "Good day";} else { greeting = "Good evening";} ④对象规则
对象定义的规则:
- 将左花括号与类名放在同一行。
- 冒号与属性值间有个空格。
- 字符串使用双引号，数字不需要。
- 最后一个属性-值对后面不要添加逗号。
- 将右花括号独立放在一行，并以分号作为结束符号。
var person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue"}; 短的对象代码可以直接写成一行:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; 每行代码字符小于 80
为了便于阅读每行字符建议小于数 80 个。
如果一个 JavaScript 语句超过了 80 个字符，建议在运算符或者逗号后换行。
document.getElementById("demo").innerHTML = "Hello Runoob."; ⑤命名规则
一般很多代码语言的命名规则都是类似的，例如:
- 变量和函数为驼峰法（ camelCase）
- 全局变量为大写 (UPPERCASE )
- 常量 (如 PI) 为大写 (UPPERCASE )
HTML 和 CSS 的横杠(-)字符:
HTML5 属性可以以 data- (如：data-quantity, data-price) 作为前缀。
CSS 使用 - 来连接属性名 (font-size)。
通常在 JavaScript 中被认为是减法，所以不允许使用。
下划线:
很多程序员比较喜欢使用下划线(如：date_of_birth), 特别是在 SQL 数据库中。
PHP 语言通常都使用下划线。
帕斯卡拼写法(PascalCase):
帕斯卡拼写法(PascalCase) 在 C 语言中语言较多。
驼峰法：
JavaScript 中通常推荐使用驼峰法，jQuery 及其他 JavaScript 库都使用驼峰法。
变量名不要以 $ 作为开始标记，会与很多 JavaScript 库冲突。
HTML 载入外部 JavaScript 文件
使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的):
<script src='/images/loading.gif' data-original="myscript.js">
使用 JavaScript 访问 HTML 元素
一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。
以下两个 JavaScript 语句会输出不同结果:
var obj = getElementById("Demo")var obj = getElementById("demo") HTML 与 JavaScript 尽量使用相同的命名规则。
文件扩展名
- HTML 文件后缀可以是 .html (或r .htm)。
- CSS 文件后缀是 .css 。
- JavaScript 文件后缀是 .js 。
使用小写文件名：
大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.jpg 不能通过 London.jpg 访问。
其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问。
三、JavaScript 函数
(一) JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
JavaScript 使用关键字 function 定义函数，函数可以通过声明定义，也可以是一个表达式。
1、函数声明
语法 :
function functionName(parameters) { 执行的代码} 注意：
- 分号是用来分隔可执行JavaScript语句。
- 由于函数声明不是一个可执行语句，所以不以分号结束。
- 函数声明后不会立即执行，会在我们需要的时候调用到。
- JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
2、函数表达式
JavaScript 函数可以通过一个表达式定义。
函数表达式可以存储在变量中： var x = function (a, b) {return a * b};
在函数表达式存储在变量后，变量也可作为一个函数使用：
var x = function (a, b) {return a * b};var z = x(4, 3); 以上函数实际上是一个 匿名函数 (函数没有名称)。
上述函数以分号结尾，因为它是一个执行语句。
3、Function() 构造函数
函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义。
var myFunction = new Function("a", "b", "return a * b");var x = myFunction(4, 3);//上面实例可以写成：var myFunction = function (a, b) {return a * b}var x = myFunction(4, 3); 在 JavaScript 中，很多时候，你需要避免使用 new 关键字。
4、函数提升（Hoisting）
提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的的行为。
提升（Hoisting）应用在变量的声明与函数的声明。
因此，函数可以在声明之前调用：
myFunction(5);function myFunction(y) { return y * y;} 使用表达式定义函数时无法提升。
5、自调用函数
函数表达式可以 "自调用",自调用表达式会自动调用。如果表达式后面紧跟 () ，则会自动调用。
不能自调用声明的函数。
通过添加括号，来说明它是一个函数表达式：
(function () { var x = "Hello!!"; // 我将调用自己})(); 以上函数实际上是一个 匿名自我调用的函数 (没有函数名)。
6、函数可作为一个值使用
JavaScript 函数作为一个值使用：
function myFunction(a, b) { return a * b;}var x = myFunction(4, 3);7、函数是对象
在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。
但是JavaScript 函数描述为一个对象更加准确。
JavaScript 函数有 属性 和 方法。
arguments.length 属性返回函数调用过程接收到的参数个数：
function myFunction(a, b) { return arguments.length;}（二）JavaScript 函数参数
JavaScript 函数对参数的值没有进行任何的检查。
1、函数显式参数(Parameters)与隐式参数(Arguments)
函数的显式参数:
functionName(parameter1, parameter2, parameter3) { // 要执行的代码…… } 函数显式参数在函数定义时列出。
函数隐式参数在函数调用时传递给函数真正的值。
①参数规则
- JavaScript 函数定义时显式参数没有指定数据类型。
- JavaScript 函数对隐式参数没有进行类型检测。
- JavaScript 函数对隐式参数的个数没有进行检测。
②默认参数
如果函数在调用时未提供隐式参数，参数会默认设置为： undefined
有时这是可以接受的，但是建议最好为参数设置一个默认值：
function myFunction(x, y) { y = y || 0; } 如果y已经定义 ， y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。
2、Arguments 对象
JavaScript 函数有个内置的对象 arguments 对象。
argument 对象包含了函数调用的参数数组。
通过这种方式你可以很方便的找到最大的一个参数的值：
x = findMax(1, 123, 500, 115, 44, 88); function findMax() { var i, max = arguments[0]; if(arguments.length < 2) return max; for (i = 0; i < arguments.length; i++) { if (arguments[i] > max) { max = arguments[i]; } } return max; } ①通过值传递参数
在函数中调用的参数是函数的隐式参数。
JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。
如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）。
隐式参数的改变在函数外是不可见的。
②通过对象传递参数
在JavaScript中，可以引用对象的值。
因此我们在函数内部修改对象的属性就会修改其初始的值。
修改对象属性可作用于函数外部（全局变量）。
修改对象属性在函数外是可见的。
（三）JavaScript 函数调用
1、函数在HTML中的调用方式：
- 在HTML文件中调用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> function demo(){ var a = 10 ; var b = 10 ; var sum = a+b ; alert(sum) } </script> <button onclick="demo()">按钮</button></body></html> ③调用带参数的函数
在调用函数时，您可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用，可以发送任意多的参数，由逗号 (,) 分隔：
myFunction(argument1,argument2)；
function myFunction(var1,var2){ 代码 }
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。
1 <body> 2 <script> 3 function demo(a,b){ 4 var sum = a+b ; 5 alert(sum) 6 } 7 demo(10,20); 8 demo(100,200); 9 </script>10 </body> ④带有返回值的函数
有时，我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。
function myFunction(){ var x=5; return x;}var myVar=myFunction();//document.getElementById("demo").innerHTML=myFunction();2、JavaScript 函数在js中4 种调用方式：
每种方式的不同方式在于 this 的初始化。
this 关键字：一般而言，在Javascript中，this指向函数执行时的当前对象。
注意： this 是保留关键字，你不能修改 this 的值。
①作为一个函数调用
function myFunction(a, b) { return a * b; } myFunction(10, 2); // myFunction(10, 2) 返回 20 以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。
在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。
在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。
myFunction() 和 window.myFunction() 是一样的。
②全局对象
当函数没有被自身的对象调用时， this 的值就会变成全局对象。
在 web 浏览器中全局对象是浏览器窗口（window 对象）。
该实例返回 this 的值是 window 对象:
function myFunction() { return this; } myFunction(); // 返回 window 对象 函数作为全局对象调用，会使 this 的值成为全局对象。
使用 window 对象作为一个变量容易造成程序崩溃
③函数作为方法调用
在 JavaScript 中你可以将函数定义为对象的方法。
以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方法 (fullName):
var myObject = { firstName:"John", lastName: "Doe", fullName: function () { return this.firstName + " " + this.lastName; } } myObject.fullName(); // 返回 "John Doe"fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。
this对象，拥有 JavaScript 代码。实例中 this 的值为 myObject 对象。
函数作为对象方法调用，会使得 this 的值成为对象本身。
④使用构造函数调用函数
如果函数调用前使用了 new 关键字, 则是调用了构造函数。
这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象：
// 构造函数: function myFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } // This creates a new object var x = new myFunction("John","Doe"); x.firstName; // 返回 "John"构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。
构造函数中 this 关键字没有任何的值。
this 的值在函数调用时实例化对象(new object)时创建。
⑤作为函数方法调用函数
在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。
call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。
function myFunction(a, b) { return a * b; } myObject =myFunction.call(myObject, 10, 2); // 返回 20 通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。
3、变量
①局部变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
②全局变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
③JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
④向未声明的 JavaScript 变量分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
carname="Volvo";
将声明一个全局变量 carname，即使它在函数内执行。
4、JavaScript 闭包
JavaScript 变量可以是局部变量或全局变量。
私有变量可以用到闭包。
函数也可以访问函数外部定义的变量
变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。
①变量生命周期
全局变量的作用域是全局性的，即在整个JavaScript程序中，全局变量处处都在。
而在函数内部声明的变量，只在函数内部起作用。这些变量是局部变量，作用域是局部性的；函数的参数也是局部性的，只在函数内部起作用。
②JavaScript 内嵌函数
所有函数都能访问全局变量。
实际上，在 JavaScript 中，所有函数都能访问它们上一层的作用域。
JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。
该实例中，内嵌函数 plus() 可以访问父函数的 counter 变量：
function add() { var counter = 0; function plus() {counter += 1;} plus(); return counter; } 闭包是可访问上一层函数作用域里变量的函数，即便上一层函数已经关闭。
四、JavaScript异常处理和事件处理
1、JavaScript 错误 - throw、try 和 catch
- try 语句测试代码块的错误。
- catch 语句处理错误。
- throw 语句创建自定义错误。
①异常的捕获 try 和 catch
②异常的抛出 throw： throw exception
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <form> <input id="txt" type="text"> <input id="btn" type="button" onclick="demo()" value="按钮"> </form> <script> function demo(){ try { var e = document.getElementById("txt").value; if(e==""){ throw "请输入" } }catch (err){ alert(err); } } </script></body></html>2、事件
①HTML事件：HTML 事件可以是浏览器行为，也可以是用户行为。
如：HTML 页面完成加载，HTML input 字段改变时，HTML 按钮被点击
<button onclick="demo()">按钮</button><script> function demo(){ alert("Hello"); }</script> 常见的HTML事件
| 事件 | 描述 |
| onclick | 单击事件 |
| onmouseover | 鼠标经过事件 |
| onmouseout | 鼠标移出事件 |
| onchange | 文本内容改变事件 |
| onselect | 文本框选中事件 |
| onfocus | 光标聚集事件 |
| onblur | 移开光标事件 |
| onload | 浏览器已完成页面的加载 |
| onunload | 关闭网页事件 |
| onkeydown | 用户按下键盘按 |
//onmouseover、onmouseout示例
<div onmouseout="onOut(this)" onmousemove="onOver(this)"></div> <script> function onOver(ooj) { ooj.innerHTML="Hello"; } function onOut(ooj) { ooj.innerHTML="World" }</script>
//onselect示例
<form> <input type="text" onselect="changeDemo(this)"> <script> function changeDemo(bg) { bg.style.background="red"; } </script></form>
五、JavaScript DOM对象
1、HTML DOM (文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树：
JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
2、DOM操作HTML
①改变 HTML 输出流
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
注意：绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。
②查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
③改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法： document.getElementById("id").innerHTML=新的 HTML
④改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法： document.getElementById("id").attribute=新属性值
<body> <a id="aid" href="http://www.baidu.com">Hello</a> <button onclick="demo()">按钮</button> <script> function demo() { document.getElementById("aid").href="http://hao123.com"; } </script></body>3、DOM操作CSS
①改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法： document.getElementById(id).style.property=新样式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .div{ 8 width: 100px; 9 height: 100px;10 background-color: red;11 }12 </style>13 </head>14 <body>15 <div id="div" >16 Hello17 </div>18 <button onclick="demo()">按钮</button>19 <script>20 function demo() {21 document.getElementById("div").style.background="blue";22 }23 </script>24 </body>25 </html>4、DOM EventListener
①addEventListener() 方法
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
语法： element.addEventListener(event, function, useCapture);
- 第一个参数是事件的类型 (如 "click" 或 "mousedown").
- 第二个参数是事件触发后调用的函数。
- 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <p>该实例使用 addEventListener() 方法在按钮中添加点击事件。</p> 9 <button id="myBtn">点我</button>10 <script>
11 document.getElementById("myBtn").addEventListener("click", function(){12 alert("Hello World!");13 });14 </script>14 </body>16 </html>
②removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄，如： element.removeEventListener("mousemove", myFunction);
原标题：JavaScript基础知识（一）
关键词：JavaScript
我知道了 