一、JavaScript基础
1、JavaScript用法：
- HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
- 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
- HTML引入外部js文件方法示例：
-
<!DOCTYPE html> <html> <body> <script src="myScript.js"></script> </body> </html>
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；
通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在 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 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {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 // undefined
typeof null // object
null === undefined // false
null == 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.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("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 |
查找空白字符。 |
|
匹配单词边界。 |
|
|
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="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中的调用方式：
- 在<script>标签内调用
-
<script> function demo(){ var a = 10 ; var b = 10 ; var sum = a+b ; alert(sum) } demo();//调用函数 </script>
- 在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
-
- try 语句允许我们定义在执行时进行错误测试的代码块。
- catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
- JavaScript 语句 try 和 catch 是成对出现的。
-
try { //在这里运行代码 } catch(err) { //在这里处理错误 }
②异常的抛出 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 class="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" class="div">
16 Hello
17 </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);