Javascript full study notes

Javascript

1、document.write( );

document.write can only be used in HTML output. If you use this method after the document is loaded, the entire document will be overwritten.

2、alert( );

Not commonly used in JavaScript, but it is very convenient for code testing.

3、document.getElementById(“ID”);

You will often see document.getElementById(" some id ") . This method is defined in HTML DOM.
DOM ( Document Object Model ) ( Document Object Model) is the official W3C standard for accessing HTML elements.

4. element.src.match("string");

<script>
function changeImage()
{
    
    
	element=document.getElementById('myimage')
	if (element.src.match("bulbon"))
	{
    
    
		element.src="/images/pic_bulboff.gif";
	}
	else
	{
    
    
		element.src="/images/pic_bulbon.gif";
	}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

Retrieve whether the value of the src attribute in <image id="myimage"οnclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> contains the character " string " string

5、isNaN(x);

NaN is a value type, which is also a numerical value. It means Not A Number.
Values are special. The special thing is that NaN is a numerical value, which is not equal to any numerical value.
In JavaScript, we can see through typeof (NaN) that NaN is a number type.
However, it is not an exact value . We can think of it as any value other than numeric values,
and two uncertain arbitrary values are not equal, so the return value of NaN == NaN is false.
simply put:

isNaN(NaN) // true
isNaN(123) // false

example:

<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
      
      
	var x=document.getElementById("demo").value;
	if(x==""||isNaN(x))
	{
      
      
		alert("不是数字");
	}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

Effect:

[External link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-U2mSB9Zr-1650510962823) (C:\Users\B-secretary\AppData\Roaming\Typora\typora-user- images\image-20220414011141951.png)]

6、document.getElementById(“ID”).innerHTML

Get the contents of the object

7. Display data

Use window.alert() to pop up a warning box.
Use the document.write() method to write content into an HTML document.
Use innerHTML to write to HTML elements.
Use console.log() to write to the browser's console.

8. Unfamiliar assignment methods

var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {
    
    firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

9. Two addressing methods for objects

name=person.lastname;
name=person["lastname"];

10. Declare variable types

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

When declaring a new variable, you can use the keyword "new" to declare its type.

11. Global variables in HTML

In HTML, global variables are window objects: all data variables belong to the window object.

<p>
在 HTML 中, 所有全局变量都会成为 window 变量。
</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML =
	"我可以显示 " + window.carName;
function myFunction() 
{
    carName = "Volvo";
}

Result: [External link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-gTYRjW9o-1650510962824) (C:\Users\B-secretary\AppData\Roaming\Typora\typora- user-images\image-20220414021100783.png)]

Variable names without var in the function default to global variables, that is, window variables.

12、onclick

What to do when an event occurs

13. Common HTML events

onchange	HTML element changes
onclick	User clicks on HTML element
onmouseover	Occurs when the mouse pointer moves over the specified element
onmouseout	Occurs when the user moves the mouse away from an HTML element
onkeydown	User presses keyboard key
onload	The browser has finished loading the page

To view more DOM events, please refer to the Javascript Reference Manual

14、.length

You can use the built-in property length to calculate the length of a string.

15. Escape characters

’	apostrophe
"	Double quotes
\	backslash
\n	newline
\r	Enter
\t	tab (tab)
\b	backspace character
\f	form feed

16. Strings can be objects

var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object

Note: Do not create String objects. It slows down execution and may have other side effects

Attributes	describe
constructor	Returns a function that creates a string property
length	Returns the length of the string
prototype	Allows you to add properties and methods to objects

method	描述
charAt()	Returns the character at the specified index position
charCodeAt()	Returns the Unicode value of the character at the specified index position
concat()	Concatenates two or more strings and returns the concatenated string
fromCharCode()	Convert Unicode to string
indexOf()	Returns the position of the first occurrence of the specified character in the string.
lastIndexOf()	Returns the position of the last occurrence of the specified character in the string.
localeCompare()	Compares two strings in local specific order
match()	Find a match for one or more regular expressions
replace()	Replace substring matching regular expression
search()	Retrieve values matching a regular expression
slice()	Extracts a fragment of a string and returns the extracted part in a new string
split()	Split a string into an array of substrings
substr()	Extracts a specified number of characters from a string from the starting index number
substring()	Extract characters between two specified index numbers in a string
toLocaleLowerCase()	Convert strings to lowercase according to the host's locale, only a few languages (such as Turkish) have local-specific case mapping
toLocaleUpperCase()	Convert strings to uppercase based on the host's locale, only a few languages (such as Turkish) have local-specific case mapping
toLowerCase()	Convert string to lowercase
toString()	Returns a string object value
toUpperCase()	Convert string to uppercase
trim()	Remove leading and trailing whitespace from string
valueOf()	Returns the original value of a string object

17. Break label reference

You can jump out of any loop within the inner loop, but only if you give the loop a name

How to name the loop:

outerloop:
for (var i = 0; i < 10; i++)
{
    
    
    innerloop:
    for (var j = 0; j < 10; j++)
    {
    
    
        if (j > 3)
        {
    
    
            break;
        }
        if (i == 2)
        {
    
    
            break innerloop;
        }
        if (i == 4)
        {
    
    
            break outerloop;
        }
        document.write("i=" + i + " j=" + j + "");
    }
}

18. Distinguish between null and undefined

null and undefined have equal values but different types

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

19. Distinguish data types

There are 6 different data types in JavaScript:

string
number
boolean
object
function
symbol

3 object types:

Object
Date
Array

2 data types that contain no values:

null
undefined

Notice:

The data type of NaN is number
The data type of array (Array) is object
The data type of date (Date) is object
The data type of null is object
The data type of an undefined variable is undefined

If the object is a JavaScript Array or JavaScript Date, we cannot determine their type through typeof , because they both return object.

20、constructor

constructor 属性返回所有 JavaScript 变量的构造函数。

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{
    
    name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {
    
    }.constructor         // 返回函数 Function(){ [native code] }

21、.indexOf()

作用：判断字符串是否包涵子字符串

包含：返回对应数字下标
不包含：返回-1

例：

let str = 'orange';

str.indexOf('o'); //0
str.indexOf('n'); //3
str.indexOf('c'); //-1

注：这里的字符串其实就是把字符当作数组元素存储

但是在数组中时，数组元素就不一定是单个字符了，例如：

let arr = ['orange', '2016', '2016'];

arr.indexOf('orange'); //0
arr.indexOf('o'); //-1

arr.indexOf('2016'); //1
arr.indexOf(2016); //-1

来看实例：（同理可判断是否为日期）

<p>判断是否为数组。</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
    
    
    return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>

注：toString()作用是转化为字符串

22、类型转换

1、将数字转换为字符串

1、String()

String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23)  // 将数字表达式转换为字符串并返回

2、toString()

x.toString()
(123).toString()
(100 + 23).toString()

3、Number方法

方法	描述
toExponential()	把对象的值转换为指数计数法。
toFixed()	把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision()	把数字格式化为指定的长度。

2、将布尔值转换为字符串

1、String()

2、toString()

3、将日期转换为字符串

1、Date()

Date()      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

2、String()

String(new Date())      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

3、toString()

obj = new Date()
obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

4、Date方法

方法	描述
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 日至今的毫秒数。

3、将字符串转换为数字

1、Number()

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

2、Number方法

方法	描述
parseFloat()	解析一个字符串，并返回一个浮点数。
parseInt()	解析一个字符串，并返回一个整数。

4、一元运算符+

Operator + 可用于将变量转换为数字，如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字)。

var y = "5";      // y 是一个字符串
var x = + y;      // x 是一个数字
var y = "John";   // y 是一个字符串
var x = + y;      // x 是一个数字 (NaN)

4、将布尔值转换为数字

全局方法Number()

Number(false)     // 返回 0
Number(true)      // 返回 1

5、将日期转换为数字

1、全局方法Number()

d = new Date();
Number(d)          // 返回 1404568027739

2、日期方法getTime()

d = new Date();
d.getTime()        // 返回 1404568027739

6、自动转换类型

当 JavaScript 尝试操作一个 “错误” 的数据类型时，会自动转换为 “正确” 的数据类型。

以下输出结果不是你所期望的：

5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1" 
"5" - 1     // 返回 4         "5" 转换为 5

7、自动转换字符串

当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法：

document.getElementById("demo").innerHTML = myVar;

myVar = {
    
    name:"Fjohn"}  // toString 转换为 "[object Object]"
myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

数字和布尔值也经常相互转换：

myVar = 123             // toString 转换为 "123"
myVar = true            // toString 转换为 "true"
myVar = false           // toString 转换为 "false"

下表展示了使用不同的数值转换为数字(Number), 字符串(String), 布尔值(Boolean):

原始值	转换为数字	转换为字符串	转换为布尔值
false	0	“false”	false
true	1	“true”	true
0	0	“0”	false
1	1	“1”	true
“0”	0	“0”	true
“000”	0	“000”	true
“1”	1	“1”	true
NaN	NaN	“NaN”	false
Infinity	Infinity	“Infinity”	true
-Infinity	-Infinity	“-Infinity”	true
“”	0	“”	false
“20”	20	“20”	true
“Runoob”	NaN	“Runoob”	true
[ ]	0	“”	true
[20]	20	“20”	true
[10,20]	NaN	“10,20”	true
[“Runoob”]	NaN	“Runoob”	true
[“Runoob”,“Google”]	NaN	“Runoob,Google”	true
function(){}	NaN	“function(){}”	true
{ }	NaN	“[object Object]”	true
null	0	“null”	false
undefined	NaN	“undefined”	false

23、正则表达式

1、什么是正则表达式

正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。

2、语法

/正则表达式主体/修饰符(可选)
var patt = /runoob/i

解析：

/runoob/i 是一个正则表达式。

runoob 是一个正则表达式主体 (用于检索)。

i 是一个修饰符 (搜索不区分大小写)。

3、使用字符串方法

正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串。

4、search()方法

正则方法：

var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i);

返回的是匹配到子字符串的首字母对应下标

字符串方法：

search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：

var str = "Visit Runoob!"; 
var n = str.search("Runoob");

5、replace()方法

正则方法：

使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :

var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Runoob");

字符串方法：

replace() 方法将接收字符串作为参数：

var str = document.getElementById("demo").innerHTML; 
var txt = str.replace("Microsoft","Runoob");

6、正则表达式修饰符

修饰符 可以在全局搜索中不区分大小写:

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

7、正则表达式模式

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x\|y)	查找任何以 \| 分隔的选项。

元字符是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

8、使用RegExp对象

使用test()

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

以下实例用于搜索字符串中的字符 “e”：

var patt = /e/;
patt.test("The best things in life are free!");

更加精简的写法：

/e/.test("The best things in life are free!")

使用exec()

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

以下实例用于搜索字符串中的字母 “e”:

/e/.exec("The best things in life are free!");

输出为：

24、错误

ry 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

抛出错误

当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。

描述这种情况的技术术语是：JavaScript 将抛出一个错误。

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

try {
    
    
    ...    //异常的抛出
} catch(e) {
    
    
    ...    //异常的捕获与处理
} finally {
    
    
    ...    //结束处理
}

实例

在下面的例子中，我们故意在 try 块的代码中写了一个错字。

catch 块会捕捉到 try 块中的错误，并执行代码来处理它。

var txt=""; 
function message() 
{
    
     
    try {
    
     
        adddlert("Welcome guest!"); 
    } catch(err) {
    
     
        txt="本页有一个错误。\n\n"; 
        txt+="错误描述：" + err.message + "\n\n"; 
        txt+="点击确定继续。\n\n"; 
        alert(txt); 
    } 
}

finally语句

finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。

function myFunction() {
    
    
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try {
    
     
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    
    
    message.innerHTML = "错误: " + err + ".";
  }
  finally {
    
    
    document.getElementById("demo").value = "";
  }
}

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>不管输入是否正确，输入框都会在输入后清空。</p>
<p>请输入 5 ~ 10 之间的数字：</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">点我</button>

<p id="p01"></p>

<script>
function myFunction() {
      
      
  var message, x;
  message = document.getElementById("p01");
  message1.innerHTML = "";
  x = document.getElementById("demo").value;
  try {
      
       
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
      
      
    message1.innerHTML = "错误: " + err + ".";
  }
  finally {
      
      
    document.getElementById("demo").value = "";
  }
}
</script>

</body>
</html>

效果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cqY4dWqE-1650510962825)(C:\Users\B-secretary\AppData\Roaming\Typora\typora-user-images\image-20220416200107402.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0v7gZrwW-1650510962825)(C:\Users\B-secretary\AppData\Roaming\Typora\typora-user-images\image-20220416200038072.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U3pKAdNi-1650510962826)(C:\Users\B-secretary\AppData\Roaming\Typora\typora-user-images\image-20220416200123200.png)]

注：err就是try中抛出的东西

25、声明提升

函数及变量的声明都将被提升到函数的最顶部，变量可以在使用后声明，也就是变量可以先使用再声明。

说白了：声明这个操作会自动被提升到程序最顶端，但是初始化不会（即声明初始化同时做）

所以，理解了这个声明提升就可以更好的掌控作用域。

26、严格模式

严格模式的限制：

不允许使用未声明的变量
不允许删除变量或对象
不允许删除函数
不允许变量重名
不允许使用八进制
不允许使用转义字符
不允许对只读属性赋值
不允许对一个使用getter方法读取的属性进行赋值
不允许删除一个不允许删除的属性
变量名不能使用 “eval” 字符串
变量名不能使用 “arguments” 字符串
不允许使用以下这种语句
由于一些安全原因，在作用域 eval() 创建的变量不能被调用
禁止this关键字指向全局对象，因此，使用构造函数时，如果忘了加new，this不再指向全局对象，而是报错。

保留关键字：

implements
interface
let
package
private
protected
public
static
yield

27、常见误区

1、switch

在常规的比较中，数据类型是被忽略的，以下 if 条件语句返回 true：

var x = 10;
var y = "10";
if (x == y)

以下这种错误经常会在 switch 语句中出现，switch 语句会使用恒等计算符(===)进行比较。

var x = 10;
switch(x) {
    
    
    case 10: alert("Hello");
}

2、浮点型数据的使用

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。

所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：

var x = 0.1;
var y = 0.2;
var z = x + y            // z 的结果为 0.30000000000000004
if (z == 0.3)            // 返回 false

为解决以上问题，可以用整数的乘除法来解决：

var z = (x * 10 + y * 10) / 10;       // z 的结果为 0.3

3、字符串换行

在字符串中直接使用回车换行是会报错的

var x = "Hello
World!";

以上代码报错，字符串断行需要使用反斜杠()，如下所示:

var x = "Hello \
World!";

4、return

想返回的东西必须与return放在一行，跨行则会返回undefined

5、数组使用名字来索引

使用名字来作为索引的数组称为关联数组(或哈希)，JavaScript 不支持使用名字来索引数组，只允许使用数字索引；在 JavaScript 中, 对象使用 名字作为索引，如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象。执行这样操作后，数组的方法及属性将不能再使用，否则会产生错误:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length 返回 0
var y = person[0];             // person[0] 返回 undefined

6、定义数组元素，最后不能添加逗号

数组最后一个值的后面添加逗号虽然语法没有问题，但是在不同的浏览器可能得到不同的结果：

var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。

正确的定义方式：

points = [40, 100, 1, 5, 25, 10];

7、定义对象，最后不能添加逗号

错误的定义方式：

websites = {
    
    site:"菜鸟教程", url:"www.runoob.com", like:460,}

正确的定义方式：

websites = {
    
    site:"菜鸟教程", url:"www.runoob.com", like:460}

8、Undefined与Null

在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法，对象只有被定义才有可能为 null，否则为 undefined，如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。

错误的使用方式：

if (myObj !== null && typeof myObj !== "undefined")

正确的方式是我们需要先使用 typeof 来检测对象是否已定义：

if (typeof myObj !== "undefined" && myObj !== null)

这个代码的解释：

俩条件同时满足，则对象被创建。

typeof myObj !== “undefined”：对象被创建但是不确定值是否为null

myObj !== null：对象没创建的话则直接报错，终止代码，从而就达不到我们想让它在这行代码里发挥的另外一个功能：判断对象的值是否为null。

所以我们要把它放在typeof的后面，如果对象没有被创建则在typeof时就决定了if语句一定会返回false=>对象没有被创建

而放到typeof后面之后，则myObj !== null面向的就都是已经被创建的对象，它只需要判断值是否为null即可。

当if (typeof myObj !== “undefined” && myObj !== null) 返回true时，就可以确定该对象已被创建而且值不为空。

28、表单

表单验证

以下实例代码用于判断表单字段(fname)值是否存在，如果不存在，就弹出信息，阻止表单提交：

function validateForm() {
    
    
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
    
    
        alert("需要输入名字。");
        return false;
    }
}

注：document.forms的用法

代码	作用
document.forms	表示获取当前页面的所有表单
document.forms[0]	表示获取当前页面的第一个表单
document.forms[‘exportServlet’]	表示获取当前页面的name="exportServlet"的表单
document.forms[‘exportServlet’].username.value	获取表单为exportServlet，name为exportServlet的值
document.forms[0].submit	表示提交第一个form表单

以上 JavaScript 代码可以通过 HTML 代码来调用：

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
    
    
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
    
    
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

</body>
</html>

效果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wl9ICSLE-1650510962826)(C:\Users\B-secretary\AppData\Roaming\Typora\typora-user-images\image-20220417111519047.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DQjGugRN-1650510962826)(C:\Users\B-secretary\AppData\Roaming\Typora\typora-user-images\image-20220417111530662.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UV0uJ7U5-1650510962827)(C:\Users\B-secretary\AppData\Roaming\Typora\typora-user-images\image-20220417111558895.png)]

HTML表单自动验证

<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>

只需要把按钮改成使用即可自动验证是否为空

数据验证

服务端数据验证是在数据提交到服务器上后再验证。

客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。

HTML约束验证

约束验证HTML输入属性

属性	描述
disabled	规定输入的元素不可用
max	规定输入元素的最大值
min	规定输入元素的最小值
pattern	规定输入元素值的模式
required	规定输入元素字段是必需的
type	规定输入元素的类型

约束验证CSS伪类选择器：

选择器	描述
:disabled	选取属性为 “disabled” 属性的 input 元素
:invalid	选取无效的 input 元素
:optional	选择没有"optional"属性的 input 元素
:required	选择有"required"属性的 input 元素
:valid	选取有效值的 input 元素

29、表单验证

验证Email地址：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function validateForm(){
    
    
	var x=document.forms["myForm"]["email"].value;
	var atpos=x.indexOf("@");
	var dotpos=x.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
    
    
		alert("不是一个有效的 e-mail 地址");
  		return false;
	}
}
</script>
</head>
<body>
	
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
	
</body>
</html>

解析atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length

atpos指@的位置
dotpos指.的位置
atpos<1为真则表示@符号在第一位
dotpos<atpos+2为真则表示“.符号在@之前”或者“.符号在@后一位的位置”
dotpos+2>=x.length为真（dotpos从0开始计数）表示：email地址最后至少留出一个“.cn”的空间，换句话说就是这个email地址至少有“.”这个符号。

30、验证API

约束验证DOM方法

Property	Description
checkValidity()	如果 input 元素中的数据是合法的返回 true，否则返回 false。
setCustomValidity()	设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示，方式如下：`setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined)`

例：

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>
 
<p id="demo"></p>
 
<script>
function myFunction() {
      
      
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
      
      
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
}
</script>

约束验证DOM属性

属性	描述
validity	布尔属性值，返回 input 输入值是否合法
validationMessage	浏览器错误提示信息
willValidate	指定 input 是否需要验证

Validity属性

属性	描述
customError	设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch	设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow	设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow	设置为 true, 如果元素的值小于它的最小值。
stepMismatch	设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong	设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch	设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing	设置为 true，如果元素 (required 属性) 没有值。
valid	设置为 true，如果元素的值是合法的。

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>输入数字并点击验证按钮:</p>
<input id="id1" type="number" min="100" required>
<button onclick="myFunction()">验证</button>

<p>如果输入的数字小于 100 ( input 的 min 属性), 会显示错误信息。</p>

<p id="demo"></p>

<script>
function myFunction() {
      
      
    var txt = "";
	var inpObj = document.getElementById("id1");
	if(!isNumeric(inpObj.value)) {
      
      
		txt = "你输入的不是数字";
	} else if (inpObj.validity.rangeUnderflow) {
      
      
        txt = "输入的值太小了";
    } else {
      
      
        txt = "输入正确";
    }
    document.getElementById("demo").innerHTML = txt;
}

// 判断输入是否为数字
function isNumeric(n) {
      
      
    return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>

</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ngV69RYR-1650510962827)(C:\Users\B-secretary\AppData\Roaming\Typora\typora-user-images\image-20220418083419977.png)]

31、保留关键字


getClass	java	JavaArray	javaClass	JavaObject
abstract	arguments	boolean	break	byte
case	catch	char	class*	const
continue	debugger	default	delete	do
double	else	enum*	eval	export*
extends*	false	final	finally	float
for	function	goto	if	implements
import*	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super*	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

对象、属性和方法


Array	Date	eval	function	hasOwnProperty
Infinity	isFinite	isNaN	isPrototypeOf	length
Math	NaN	name	Number	Object
prototype	String	toString	undefined	valueOf

Windows保留关键字


alert	all	anchor	anchors	area
assign	blur	button	checkbox	clearInterval
clearTimeout	clientInformation	close	closed	confirm
constructor	crypto	decodeURI	decodeURIComponent	defaultStatus
document	element	elements	embed	embeds
encodeURI	encodeURIComponent	escape	event	fileUpload
focus	form	forms	frame	innerHeight
innerWidth	layer	layers	link	location
mimeTypes	navigate	navigator	frames	frameRate
hidden	history	image	images	offscreenBuffering
open	opener	option	outerHeight	outerWidth
packages	pageXOffset	pageYOffset	parent	parseFloat
parseInt	password	pkcs11	plugin	prompt
propertyIsEnum	radio	reset	screenX	screenY
scroll	secure	select	self	setInterval
setTimeout	status	submit	taint	text
textarea	top	unescape	untaint	window

HTML事件句柄


onblur	onclick	onerror	onfocus
onkeydown	onkeypress	onkeyup	onmouseover
onload	onmouseup	onmousedown	onsubmit

32、this

this 表示当前对象的一个引用，但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

方法所属的对象例：

var person = {
    
    
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    
    
    return this.firstName + " " + this.lastName;
  }
};

函数中使用this（严格模式）

严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。

"use strict";
function myFunction() {
    
    
  return this;
}

事件中的this

在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：

方法中绑定

this 是 person 对象，person 对象是函数的所有者：

var person = {
    
    
  firstName  : "John",
  lastName   : "Doe",
  id         : 5566,
  myFunction : function() {
    
    
    return this;
  }
};

显式函数绑定

在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

在下面实例中，当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法：

var person1 = {
    
    
  fullName: function() {
    
    
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
    
    
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // 返回 "John Doe"

33、let

全局变量与局部变量

在函数外声明的变量作用域是全局的，在函数内声明的变量作用域是局部的

块级作用域

使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。

{
    
     
    var x = 2; 
}
// 这里可以使用 x 变量

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

{
    
     
    let x = 2;
}
// 这里不能使用 x 变量

注意

使用 var 关键字重新声明变量可能会带来问题，在块中重新声明变量也会重新声明块外的变量：

var x = 10;
// 这里输出 x 为 10
{
    
     
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2

let 关键字就可以解决这个问题，因为它只在 let 命令所在的代码块 {} 内有效。

var x = 10;
// 这里输出 x 为 10
{
    
     
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

浏览器支持

Internet Explorer 11 及更早版本的浏览器不支持 let 关键字，下表列出了各个浏览器支持 let 关键字的最低版本号。

Chrome 49	IE / Edge 12	Firefox 44	Safari 11	Opera 36
Mar, 2016	Jul, 2015	Jan, 2015	Sep, 2017	Mar, 2016

循环作用域

使用 var 关键字：

var i = 5;
for (var i = 0; i < 10; i++) {
    
    
    // 一些代码...
}
// 这里输出 i 为 10

使用 let 关键字：

let i = 5;
for (let i = 0; i < 10; i++) {
    
    
    // 一些代码...
}
// 这里输出 i 为 5

在第一个实例中，使用了 var 关键字，它声明的变量是全局的，包括循环体内与循环体外。

在第二个实例中，使用 let 关键字，它声明的变量作用域只在循环体内，循环体外的变量不受影响。

局部变量

在函数体内使用 var 和 let 关键字声明的变量有点类似，它们的作用域都是 局部的:

// 使用 var
function myFunction() {
    
    
    var carName = "Volvo";   // 局部作用域
}

// 使用 let
function myFunction() {
    
    
    let carName = "Volvo";   //  局部作用域
}

全局变量

在函数体外或代码块外使用 var 和 let 关键字声明的变量也有点类似，它们的作用域都是 全局的:

// 使用 var
var x = 2;       // 全局作用域

// 使用 let
let x = 2;       // 全局作用域

HTML使用全局变量

在 JavaScript 中, 全局作用域是针对 JavaScript 环境。
在 HTML 中, 全局作用域是针对 window 对象。
使用 var 关键字声明的全局作用域变量属于 window 对象：

<script>
var carName = "Volvo";

// 可以使用 window.carName 访问变量
document.getElementById("demo").innerHTML = "I can display " + window.carName;
</script>

使用 let 关键字声明的全局作用域变量不属于 window 对象:

<script>
let carName = "Volvo";

// 不能使用 window.carName 访问变量
document.getElementById("demo").innerHTML = "I can not display " + window.carName;
</script>

重置变量

使用 var 关键字声明的变量在任何地方都可以修改：

var x = 2;
 
// x 为 2
 
var x = 3;
 
// 现在 x 为 3

在相同的作用域或块级作用域中，不能使用 let 关键字来重置 var 关键字声明的变量:

var x = 2;       // 合法
let x = 3;       // 不合法

{
    
    
    var x = 4;   // 合法
    let x = 5   // 不合法
}

在相同的作用域或块级作用域中，不能使用 let 关键字来重置 let 关键字声明的变量:

let x = 2;       // 合法
let x = 3;       // 不合法

{
    
    
    let x = 4;   // 合法
    let x = 5;   // 不合法
}

在相同的作用域或块级作用域中，不能使用 var 关键字来重置 let 关键字声明的变量:

let x = 2;       // 合法
var x = 3;       // 不合法

{
    
    
    let x = 4;   // 合法
    var x = 5;   // 不合法
}

let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:

let x = 2;       // 合法

{
    
    
    let x = 3;   // 合法
}

{
    
    
    let x = 4;   // 合法
}

总结：

在相同作用域情况下：

let不能重置任何类型的变量
let不能被重置

在不同作用域情况下：

let可以被let重新声明赋值
let不能被var赋值

变量提升

var 关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明

// 在这里可以使用 carName 变量
 
var carName;

let 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用

// 在这里不可以使用 carName 变量

let carName;

34、const关键字

const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改：

const PI = 3.141592653589793;
PI = 3.14;      // 报错
PI = PI + 10;   // 报错

const定义常量与使用let 定义的变量相似：

二者都是块级作用域
都不能和它所在作用域内的其他变量或函数拥有相同的名称
const声明的常量必须初始化，而let声明的变量不用
const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。

var x = 10;
// 这里输出 x 为 10
{
    
     
    const x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

const 声明的常量必须初始化：

// 错误写法
const PI;
PI = 3.14159265359;

// 正确写法
const PI = 3.14159265359;

！！！const的本质！！！

const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。下面的代码并不会报错：

// 创建常量对象
const car = {
    
    type:"Fiat", model:"500", color:"white"};
 
// 修改属性:
car.color = "red";
 
// 添加属性
car.owner = "Johnson";

但是我们不能对常量对象重新赋值：

const car = {
    
    type:"Fiat", model:"500", color:"white"};
car = {
    
    type:"Volvo", model:"EX60", color:"red"};    // 错误

以下实例修改常量数组：

// 创建常量数组
const cars = ["Saab", "Volvo", "BMW"];
 
// 修改元素
cars[0] = "Toyota";
 
// 添加元素
cars.push("Audi");

但是我们不能对常量数组重新赋值：

const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];    // 错误

浏览器支持：

Chrome 49	IE / Edge 11	Firefox 36	Safari 10	Opera 36
Mar, 2016	Oct, 2013	Feb, 2015	Sep, 2016	Mar, 2016

重置变量

使用 var 关键字声明的变量在任何地方都可以修改：

var x = 2;    //  合法
var x = 3;    //  合法
x = 4;        //  合法

在相同的作用域或块级作用域中，不能使用 const 关键字来重置 var 和 let关键字声明的变量:

var x = 2;         // 合法
const x = 2;       // 不合法
{
    
    
    let x = 2;     // 合法
    const x = 2;   // 不合法
}

在相同的作用域或块级作用域中，不能使用 const 关键字来重置 const 关键字声明的变量:

const x = 2;       // 合法
const x = 3;       // 不合法
x = 3;             // 不合法
var x = 3;         // 不合法
let x = 3;         // 不合法

{
    
    
    const x = 2;   // 合法
    const x = 3;   // 不合法
    x = 3;         // 不合法
    var x = 3;     // 不合法
    let x = 3;     // 不合法
}

const 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:

const x = 2;       // 合法

{
    
    
    const x = 3;   // 合法
}

{
    
    
    const x = 4;   // 合法
}

总结

在相同的作用域中：

const不能重置任何一个变量

在不相同的作用域中：

const可以重置自己

变量提升

var 关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明

carName = "Volvo";    // 这里可以使用 carName 变量
var carName;

const 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用

carName = "Volvo";    // 在这里不可以使用 carName 变量
const carName = "Volvo";

35、JSON

JSON 是用于存储和传输数据的格式，通常用于服务端向网页传递数据。

JSON 格式在语法上与创建 JavaScript 对象代码是相同的，由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

什么是JSON

JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言
JSON 易于理解。

实例

以下 JSON 语法定义了 sites 对象: 3 条网站信息（对象）的数组:

{
    
    "sites":[
    {
    
    "name":"Runoob", "url":"www.runoob.com"}, 
    {
    
    "name":"Google", "url":"www.google.com"},
    {
    
    "name":"Taobao", "url":"www.taobao.com"}
]}

JSON语法规则

数据为键/值对。
数据由逗号分隔。
大括号保存对象
方括号保存数组

JSON数据

JSON 数据格式为键/值对，就像 JavaScript 对象属性。

键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：

"name":"Runoob"

JSON对象

JSON 对象保存在大括号内。

就像在 JavaScript 中, 对象可以保存多个键/值对：

{
    
    "name":"Runoob", "url":"www.runoob.com"}

JSON数组

JSON 数组保存在中括号内。

就像在 JavaScript 中, 数组可以包含对象：

"sites":[
    {
    
    "name":"Runoob", "url":"www.runoob.com"}, 
    {
    
    "name":"Google", "url":"www.google.com"},
    {
    
    "name":"Taobao", "url":"www.taobao.com"}
]

在以上实例中，对象 “sites” 是一个数组，包含了三个对象。

每个对象为站点的信息（网站名和网站地址）。

JSON字符串转换为js对象

通常我们从服务器中读取 JSON 数据，并在网页中显示数据。

简单起见，我们网页中直接设置 JSON 字符串。

首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：

var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

最后，在你的页面中使用新的 JavaScript 对象：

var text = '{ "sites" : [' +
    '{ "name":"Runoob" , "url":"www.runoob.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
    
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

函数	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>为 JSON 字符串创建对象</h2>
<p id="demo"></p>
<script>
var text = '{ "sites" : [' +
	'{ "name":"Runoob" , "url":"www.runoob.com" },' +
	'{ "name":"Google" , "url":"www.google.com" },' +
	'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
	
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
</script>

</body>
</html>

36、javascript:void(0)

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

语法格式如下：

void func()
javascript:void func()

或者

void(func())
javascript:void(func())

下面的代码创建了一个超级链接，当用户点击以后不会发生任何事：

<a href="javascript:void(0)">单击此处什么也不会发生</a>

当用户链接时，void(0) 计算为 0，但 Javascript 上没有任何效果。

以下实例中，在用户点击链接后显示警告信息：

<p>点击以下链接查看结果：</p>
<a href="javascript:void(alert('Warning!!!'))">点我!</a>

以下实例中参数 a 将返回 undefined :

function getValue(){
    
    
   var a,b,c;
   a = void ( b = 5, c = 7 );
   document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息，默认的锚是**#top** 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

如果你要定义一个死链接请使用 javascript:void(0) ：

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>

37、异步编程

在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。

简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

以上是关于异步的概念的解释，接下来我们通俗地解释一下异步：异步就是从主线程发射一个子线程来完成任务。

为何使用异步编程

在前端编程中（甚至后端有时也是这样），我们在处理一些简短、快速的操作时，例如计算 1 + 1 的结果，往往在主线程中就可以完成。主线程作为一个线程，不能够同时接受多方面的请求。所以，当一个事件没有结束时，界面将无法处理其他请求。

现在有一个按钮，如果我们设置它的 onclick 事件为一个死循环，那么当这个按钮按下，整个网页将失去响应。

为了避免这种情况的发生，我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情，比如读取一个大文件或者发出一个网络请求。因为子线程独立于主线程，所以即使出现阻塞也不会影响主线程的运行。但是子线程有一个局限：一旦发射了以后就会与主线程失去同步，我们无法确定它的结束，如果结束之后需要处理一些事情，比如处理来自服务器的信息，我们是无法将它合并到主线程中去的。

为了解决这个问题，JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

回调函数

回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终。

function print() {
    
    
    document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);

这段程序中的 setTimeout 就是一个消耗时间较长（3 秒）的过程，它的第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数 “print”，在命令行输出 “RUNOOB!”。

当然，JavaScript 语法十分友好，我们不必单独定义一个函数 print ，我们常常将上面的程序写成：

setTimeout(function () {
    
    
    document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);

既然 setTimeout 会在子线程中等待 3 秒，在 setTimeout 函数执行之后主线程并没有停止。

异步AJAX

除了 setTimeout 函数以外，异步回调广泛应用于 AJAX 编程。XMLHttpRequest 常常用于请求来自远程服务器上的 XML 或 JSON 数据。一个标准的 XMLHttpRequest 对象往往包含多个回调：

var xhr = new XMLHttpRequest();
 
xhr.onload = function () {
    
    
    // 输出接收到的文字数据
    document.getElementById("demo").innerHTML=xhr.responseText;
}
 
xhr.onerror = function () {
    
    
    document.getElementById("demo").innerHTML="请求出错";
}
 
// 发送异步 GET 请求
xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
xhr.send();

XMLHttpRequest 的 onload 和 onerror 属性都是函数，分别在它请求成功和请求失败时被调用。如果你使用完整的 jQuery 库，也可以更加优雅的使用异步 AJAX：

$.get("https://www.runoob.com/try/ajax/demo_test.php",function(data,status){
    
    
    alert("数据: " + data + "\n状态: " + status);
});

38、Promise

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。

由于 Promise 是 ES6 新增加的，所以一些旧的浏览器并不支持，苹果的 Safari 10 和 Windows 的 Edge 14 版本以上浏览器才开始支持 ES6 特性。

以下是 Promise 浏览器支持的情况：

Chrome 58	Edge 14	Firefox 54	Safari 10	Opera 55

构造Promise

new Promise(function (resolve, reject) {
    
    
    // 要做的事情...
});

通过新建一个 Promise 对象好像并没有看出它怎样 “更加优雅地书写复杂的异步任务”。我们之前遇到的异步任务都是一次异步，如果需要多次调用异步函数呢？例如，如果我想分三次输出字符串，第一次间隔 1 秒，第二次间隔 4 秒，第三次间隔 3 秒：

setTimeout(function () {
    
    
    console.log("First");
    setTimeout(function () {
    
    
        console.log("Second");
        setTimeout(function () {
    
    
            console.log("Third");
        }, 3000);
    }, 4000);
}, 1000);

这段程序实现了这个功能，但是它是用 “函数瀑布” 来实现的。可想而知，在一个复杂的程序当中，用 “函数瀑布” 实现的程序无论是维护还是异常处理都是一件特别繁琐的事情，而且会让缩进格式变得非常冗赘。

现在我们用 Promise 来实现同样的功能：

new Promise(function (resolve, reject) {
    
    
    setTimeout(function () {
    
    
        console.log("First");
        resolve();
    }, 1000);
}).then(function () {
    
    
    return new Promise(function (resolve, reject) {
    
    
        setTimeout(function () {
    
    
            console.log("Second");
            resolve();
        }, 4000);
    });
}).then(function () {
    
    
    setTimeout(function () {
    
    
        console.log("Third");
    }, 3000);
});

这段代码较长，所以还不需要完全理解它，我想引起注意的是 Promise 将嵌套格式的代码变成了顺序格式的代码。

Promise的使用

下面我们通过剖析这段 Promise “计时器” 代码来讲述 Promise 的使用：

Promise 构造函数只有一个参数，是一个函数，这个函数在构造之后会直接被异步运行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。

当 Promise 被构造时，起始函数会被异步执行：

new Promise(function (resolve, reject) {
    
    
    console.log("Run");
});

这段程序会直接输出 Run。

resolve 和 reject 都是函数，其中调用 resolve 代表一切正常，reject 是出现异常时所调用的：

new Promise(function (resolve, reject) {
    
    
    var a = 0;
    var b = 1;
    if (b == 0) reject("Divide zero");
    else resolve(a / b);
}).then(function (value) {
    
    
    console.log("a / b = " + value);
}).catch(function (err) {
    
    
    console.log(err);
}).finally(function () {
    
    
    console.log("End");
});

这段程序执行结果是:

a / b = 0
End

Promise 类有 .then() .catch() 和 .finally() 三个方法，这三个方法的参数都是一个函数，.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列，.catch() 则是设定 Promise 的异常处理序列，.finally() 是在 Promise 执行的最后一定会执行的序列。 .then() 传入的函数会按顺序依次执行，有任何异常都会直接跳到 catch 序列：

new Promise(function (resolve, reject) {
    
    
    console.log(1111);
    resolve(2222);
}).then(function (value) {
    
    
    console.log(value);
    return 3333;
}).then(function (value) {
    
    
    console.log(value);
    throw "An error";
}).catch(function (err) {
    
    
    console.log(err);
});

执行结果：

1111
2222
3333
An error

resolve() 中可以放置一个参数用于向下一个 then 传递一个值，then 中的函数也可以返回一个值传递给 then。但是，如果 then 中返回的是一个 Promise 对象，那么下一个 then 将相当于对这个返回的 Promise 进行操作，这一点从刚才的计时器的例子中可以看出来。

reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常。

但是请注意以下两点：

resolve 和 reject 的作用域只有起始函数，不包括 then 以及其他序列
resolve 和 reject 并不能够使起始函数停止运行，别忘了 return

Promise函数

上述的 “计时器” 程序看上去比函数瀑布还要长，所以我们可以将它的核心部分写成一个 Promise 函数：

function print(delay, message) {
    
    
    return new Promise(function (resolve, reject) {
    
    
        setTimeout(function () {
    
    
            console.log(message);
            resolve();
        }, delay);
    });
}

然后我们就可以放心大胆的实现程序功能了：

print(1000, "First").then(function () {
    
    
    return print(4000, "Second");
}).then(function () {
    
    
    print(3000, "Third");
});

这种返回值为一个 Promise 对象的函数称作 Promise 函数，它常常用于开发基于异步操作的库。

常见问题

Q: then、catch 和 finally 序列能否顺序颠倒？

A: 可以，效果完全一样。但不建议这样做，最好按 then-catch-finally 的顺序编写程序。

Q: 除了 then 块以外，其它两种块能否多次使用？

A: 可以，finally 与 then 一样会按顺序执行，但是 catch 块只会执行第一个，除非 catch 块里有异常。所以最好只安排一个 catch 和 finally 块。

Q: then 块如何中断？

A: then 块默认会向下顺序执行，return 是不能中断的，可以通过 throw 来跳转至 catch 实现中断。

Q: 什么时候适合用 Promise 而不是传统回调函数？

A: 当需要多次顺序执行异步操作的时候，例如，如果想通过异步方法先后检测用户名和密码，需要先异步检测用户名，然后再异步检测密码的情况下就很适合 Promise。

Q: Promise 是一种将异步转换为同步的方法吗？

A: 完全不是。Promise 只不过是一种更良好的编程风格。

Q: 什么时候我们需要再写一个 then 而不是在当前的 then 接着编程？

A: 当你又需要调用一个异步任务的时候。

异步函数 async function

异步函数（async function）是 ECMAScript 2017 (ECMA-262) 标准的规范，几乎被所有浏览器所支持，除了 Internet Explorer。

在 Promise 中我们编写过一个 Promise 函数：

function print(delay, message) {
    
    
    return new Promise(function (resolve, reject) {
    
    
        setTimeout(function () {
    
    
            console.log(message);
            resolve();
        }, delay);
    });
}

然后用不同的时间间隔输出了三行文本：

print(1000, "First").then(function () {
    
    
    return print(4000, "Second");
}).then(function () {
    
    
    print(3000, "Third");
});

我们可以将这段代码变得更好看：

async function asyncFunc() {
    
    
    await print(1000, "First");
    await print(4000, "Second");
    await print(3000, "Third");
}
asyncFunc();

哈！这岂不是将异步操作变得像同步操作一样容易了吗！

这次的回答是肯定的，异步函数 async function 中可以使用 await 指令，await 指令后必须跟着一个 Promise，异步函数会在这个 Promise 运行中暂停，直到其运行结束再继续运行。

异步函数实际上原理与 Promise 原生 API 的机制是一模一样的，只不过更便于程序员阅读。

处理异常的机制将用 try-catch 块实现：

实例：

async function asyncFunc() {
    
    
    try {
    
    
        await new Promise(function (resolve, reject) {
    
    
            throw "Some error"; // 或者 reject("Some error")
        });
    } catch (err) {
    
    
        console.log(err);
        // 会输出 Some error
    }
}
asyncFunc();

如果 Promise 有一个正常的返回值，await 语句也会返回它：

async function asyncFunc() {
    
    
    let value = await new Promise(
        function (resolve, reject) {
    
    
            resolve("Return value");
        }
    );
    console.log(value);
}
asyncFunc();

程序会输出:

Return value

39、代码规范

变量名

变量名推荐使用驼峰法来命名(camelCase):

firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

空格与运算符

通常运算符 ( = + - * / ) 前后需要添加空格:

var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];

代码缩进

通常使用 4 个空格符号来缩进代码块：

function toCelsius(fahrenheit) {
    
    
    return (5 / 9) * (fahrenheit - 32);
}

语句规则

简单语句的通用规则:

将左花括号放在第一行的结尾。
左花括号前添加一空格。
将右花括号独立放在一行。
不要以分号结束一个复杂的声明。

函数：

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 个。

如果一个 JavaScript 语句超过了 80 个字符，建议在运算符或者逗号后换行。

document.getElementById("demo").innerHTML =
    "Hello Runoob.";

命名规则

一般很多代码语言的命名规则都是类似的，例如:

变量和函数为小驼峰法标识, 即除第一个单词之外，其他单词首字母大写（ lowerCamelCase）
全局变量为大写 (UPPERCASE )
常量 (如 PI) 为大写 (UPPERCASE )

变量命名你是否使用这几种规则： hyp-hens, camelCase, 或 under_scores ?

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 (或 .htm)。

CSS 文件后缀是 .css 。

JavaScript 文件后缀是 .js 。

使用小写文件名

大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.jpg 不能通过 London.jpg 访问。

其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问。

必须保持统一的风格，建议统一使用小写的文件名。

40、函数

函数声明

function functionName(parameters) {
    
    
  执行的代码
}

函数声明后不会立即执行，会在我们需要的时候调用到。

函数表达式

JavaScript 函数可以通过一个表达式定义，函数表达式可以存储在变量中：

var x = function (a, b) {
    
    return a * b};

在函数表达式存储在变量后，变量也可作为一个函数使用：

var x = function (a, b) {
    
    return a * b};
var z = x(4, 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);

函数提升

提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的行为。

提升（Hoisting）应用在变量的声明与函数的声明。

因此，函数可以在声明之前调用：

myFunction(5);

function myFunction(y) {
    
    
    return y * y;
}

自调用函数

函数表达式可以 “自调用”，自调用表达式会自动调用，如果表达式后面紧跟 () ，则会自动调用；不能自调用声明的函数。通过添加括号，来说明它是一个函数表达式：

(function () {
    
    
    var x = "Hello!!";      // 我将调用自己
})();

大体就是：(函数)();

函数是对象

在 JavaScript 中使用 typeof 操作符判断函数类型将返回 “function” 。但是JavaScript 函数描述为一个对象更加准确。JavaScript 函数有属性和方法。arguments.length 属性返回函数调用过程接收到的参数个数：

function myFunction(a, b) {
    
    
    return arguments.length;
}

toString() 方法将函数作为一个字符串返回:

function myFunction(a, b) {
    
    
    return a * b;
}

var txt = myFunction.toString();

！！！箭头函数！！！

箭头函数表达式的语法比普通函数表达式更简洁。

(参数1, 参数2, …, 参数N) => {
    
     函数声明 }

(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

当只有一个参数时，圆括号是可选的：

(单一参数) => {
    
    函数声明}
单一参数 => {
    
    函数声明}

没有参数的函数应该写成一对圆括号:

() => {
    
    函数声明}

实例:

// ES5
var x = function(x, y) {
    
    
     return x * y;
}
 
// ES6
const x = (x, y) => x * y;

有的箭头函数都没有自己的 this。不适合定义一个 对象的方法。

当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。

箭头函数是不能提升的，所以需要在使用之前定义。

使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。

如果函数部分只是一个语句，则可以省略 return 关键字和大括号 {}，这样做是一个比较好的习惯:

const x = (x, y) => {
    
     return x * y };

41、函数参数

JavaScript 函数对参数的值没有进行任何的检查。

函数显式参数与隐式参数

显式参数：

functionName(parameter1, parameter2, parameter3) {
    
    
    // 要执行的代码……
}

函数显式参数在函数定义时列出，函数隐式参数在函数调用时传递给函数真正的值。

参数规则

JavaScript 函数定义显式参数时没有指定数据类型。
JavaScript 函数对隐式参数没有进行类型检测。
JavaScript 函数对隐式参数的个数没有进行检测。

默认参数

ES5 中如果函数在调用时未提供隐式参数，参数会默认设置为： undefined

有时这是可以接受的，但是建议最好为参数设置一个默认值：

function myFunction(x, y) {
    
    
    if (y === undefined) {
    
    
          y = 0;
    } 
}

更简单的方式：

function myFunction(x, y) {
    
    
    y = y || 0;
}

注：如果 y 已经定义，y || 0 返回 y，因为 y 是 true，否则返回 0，因为 undefined 为 false。

如果函数调用时设置了过多的参数，参数将无法被引用，因为无法找到对应的参数名。只能使用 arguments 对象来调用。

函数可以自带参数

function myFunction(x, y = 10) {
    
    
    // y is 10 if not passed or undefined
    return x + y;
}
 
myFunction(0, 2) // 输出 2
myFunction(5); // 输出 15, y 参数的默认值

注：相当于一个自己带值的占位参数

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;
}

但是找到最值的循环需要自己写

x = sumAll(1, 123, 500, 115, 44, 88);
 
function sumAll() {
    
    
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
    
    
        sum += arguments[i];
    }
    return sum;
}

arguments仅仅是获取当前函数的参数列表并且生成一个数组

！！！通过值传递参数！！！

在函数中调用的参数是函数的隐式参数。

JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。

如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）。

隐式参数的改变在函数外是不可见的。

！！！通过对象传递参数！！！

在JavaScript中，可以引用对象的值。

因此我们在函数内部修改对象的属性就会修改其初始的值。

修改对象属性可作用于函数外部（全局变量）。

修改对象属性在函数外是可见的。

42、函数调用

JavaScript 函数有 4 种调用方式，每种方式的不同在于 this 的初始化。

普通情况

function myFunction(a, b) {
    
    
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) 返回 20

以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。

在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。

在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。

myFunction() 和 window.myFunction() 是一样的：

function myFunction(a, b) {
    
    
    return a * b;
}
window.myFunction(10, 2);    // window.myFunction(10, 2) 返回 20

这是调用 JavaScript 函数常用的方法，但不是良好的编程习惯，全局变量，方法或函数容易造成命名冲突的bug。

全局对象

当函数没有被自身的对象调用时 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"

式参数的个数没有进行检测。