JavaScript
js是一种轻量级的编程语言
可以插入HTML并由浏览器直接执行
update on 6/10/2020
JavaScript用法
HTML 中的脚本必须位于 < script> 与 < /script> 标签之间。
脚本可被放置在 HTML 页面的 < body> 和 < head> 部分中。
-
< script> 标签
如需在 HTML 页面中插入 JavaScript，请使用
JavaScript 输出
JavaScript 可以通过不同的方式来输出数据：
-
使用 window.alert() 弹出警告框。
<!DOCTYPE html> <html> <body> <h1>我的第一个页面</h1> <p>我的第一个段落。</p> <script> window.alert(5 + 6); </script> </body> </html>会在浏览器上显示一个警告框，内容为11
-
使用 document.write() 方法将内容写到 HTML 文档中。
<h1>我的第一个 Web 页面</h1> <p>我的第一个段落。</p> <button onclick="myFunction()">点我</button> <script> function myFunction() { document.write(Date()); } </script> -
使用 innerHTML 写入到 HTML 元素。
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：
<!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <p id="demo">我的第一个段落</p> <!-- 用id元素标记后续要操作的内容 --> <script> document.getElementById("demo").innerHTML = "段落已修改。"; <!-- document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。 innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。--> </script> </body> </html> -
使用 console.log() 写入到浏览器的控制台。
<!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>执行以上代码后打开控制台在控制台的console菜单中可以看到11
JavaScript 语法
JavaScript 是一个脚本语言。
它是一个轻量级，但功能强大的编程语言。
-
JavaScript字面量
固定值被称为字面量
-
数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。
-
字符串（String）字面量 可以使用单引号或双引号:
"John Doe" 'John Doe' <!-- 两种表达方式在网页显示结果一样都为John Doe --> -
表达式字面量 用于计算：
<p id="demo"></p> <script> document.getElementById("demo").innerHTML = 5 * 10; </script> <!-- 网页显示结果一样为30 --> -
数组（Array）字面量 定义一个数组：
[40, 100, 1, 5, 25, 10] -
对象（Object）字面量 定义一个对象：
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"} -
函数（Function）字面量 定义一个函数：
function myFunction(a, b) { return a * b;}
-
-
JavaScript变量
在编程语言中，变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：
<p id="demo"></p> <script> var length; length = 6; document.getElementById("demo").innerHTML = length; </script> -
JavaScript操作符
JavaScript使用 算术运算符 来计算值；
JavaScript使用赋值运算符给变量赋值：
<p id="demo"></p> <script> var x, y, z; x = 5; y = 6; z = (x + y) * 10; document.getElementById("demo").innerHTML = z; </script>JavaScript中逻辑运算符与c语言相同
-
JavaScript语句
在 HTML 中，JavaScript 语句向浏览器发出的命令。
语句是用分号分隔：
-
JavaScript关键词
关键词就是JavaScript代码中的保留字，具体详情点击查看
-
JavaScript注释
不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略。
-
JavaScript数据类型
JavaScript 有多种数据类型：数字，字符串，数组，对象等等：
var length = 16; // Number 通过数字字面量赋值 var points = x * 10; // Number 通过表达式字面量赋值 var lastName = "Johnson"; // String 通过字符串字面量赋值 var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值 var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值 -
JavaScript字母大小写
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。
-
JavaScript字符集
JavaScript 使用 Unicode 字符集。
JavaScript 语句
JavaScript 语句是发给浏览器的命令。
这些命令的作用是告诉浏览器要做的事情。
下面的 JavaScript 语句向 id=“demo” 的 HTML 元素输出文本 “你好 Dolly” ：
<h1>我的网页</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML = "你好 Dolly";
</script>
分号 ;
分号用于分隔 JavaScript 语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。
<h1>我的网页</h1>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
a = 1;
b = 2;
c = a + b;
document.getElementById("demo1").innerHTML = c;
x = 1; y = 2; z = x + y;
document.getElementById("demo2").innerHTML = z;
</script>
两者输出的是一样的都为3
JavaScript 代码
JavaScript 代码是 JavaScript 语句的序列。
浏览器按照编写顺序依次执行每条语句。
JavaScript 代码块
JavaScript 可以分批地组合起来。
代码块以左花括号开始，以右花括号结束。
代码块的作用是一并地执行语句序列。
本例向网页输出一个标题和两个段落：
<h1>我的 Web 页面</h1>
<p id="myPar">我是一个段落。</p>
<div id="myDiv">我是一个div。</div>
<p>
<button type="button" onclick="myFunction()">点击这里</button>
</p>
<script>
function myFunction(){
document.getElementById("myPar").innerHTML="你好世界！";
document.getElementById("myDiv").innerHTML="你最近怎么样?";
}
</script>
<p>当您点击上面的按钮时，两个元素会改变。</p>
JavaScript 语句标识符
JavaScript 语句通常以一个 语句标识符 为开始，并执行该语句。
语句标识符是保留关键字不能作为变量名使用。
Click here 查看JavaScript的语句标识符
空格
JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。
对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：
<script>
document.write("你好 \
世界!");
</script>
<!-- 显示在浏览器结果为‘你好 世界’ -->
JavaScript 注释
单行用双斜杠//注释
多注释以/* 开始，以 */结尾
JavaScript 变量
与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量
JavaScript 数据类型
JavaScript 变量还能保存其他数据类型，比如文本值 (name=“Bill Gates”)。
在 JavaScript 中，类似 “Bill Gates” 这样一条文本被称为字符串。
JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。
当您向变量分配文本值时，应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。
声明（创建） JavaScript 变量
JavaScript用var关键词来声明变量
与c语言一样，声明变量的同时也可以用等号对其赋值
一条语句，多个变量
您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：
var lastname="Doe", age=30, job="carpenter";
<!--声明也可横跨多行-->
var lastname="Doe",
age=30,
job="carpenter";
<!--一条语句中声明的多个变量不可以同时赋同一个值-->
var x,y,z=1;
<!--x,y 为 undefined， z 为 1。-->
Value = undefined
在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
在执行过以下语句后，变量 carname 的值将是 undefined：
var carname;
JavaScript 数据类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
JavaScript 字符串
字符串是存储字符（比如 “Bill Gates”）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号；
您可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
var carname1="Volvo XC60"; //输出结果Volvo XC60
var carname2='Volvo XC60'; //输出结果Volvo XC60
var answer1='It\'s alright'; //输出结果It's alright
var answer2="He is called \"Johnny\""; //输出结果He is called "Jony J"
var answer3='He is called \'Johnny\''; //输出结果He is called 'Jony J'
var answer4='He is called "Johnny"'; //输出结果He is called "Jony J"
var answer5="He is called 'Johnny'"; //输出结果He is called 'Jony J'
JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带；
极大或极小的数字可以通过科学（指数）计数法来书写：
JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false。
var x=true;
var y=false;
JavaScript 数组
以 var 数组名=new Array()的形式创建数组
//step1
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
//step2
var cars=new Array("Saab","Volvo","BMW");
//step3
var cars=["Saab","Volvo","BMW"];
JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"John", lastname:"Doe", id:5566};
上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行：
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
- 对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"];
Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
cars=null;
person=null;
声明变量类型
当您声明新变量时，可以使用关键词 “new” 来声明其类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
JavaScript 对象
JavaScript 对象是拥有属性和方法的数据。
在 JavaScript中，几乎所有的事物都是对象。
var car = {type:"Fiat", model:500, color:"white"};
在以上实例中，3 个值 (“Fiat”, 500, “white”) 赋予变量 car。
在以上实例中，3 个变量 (type, model, color) 赋予变量 car。
对象定义
你可以使用字符来定义和创建 JavaScript 对象
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
//定义 JavaScript 对象可以跨越多行，空格跟换行不是必须的
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
对象属性
可以说 “JavaScript 对象是变量的容器”。
但是，我们通常认为 “JavaScript 对象是键值对的容器”。
键值对通常写法为 name : value (键与值以冒号分割)。
访问对象属性
可以通过两种方式访问对象属性:
//step1
person.lastName;
//step2
person["lastName"];
对象方法
对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
该实例访问了 person 对象的 fullName() 方法:
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
//如果你要访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回：
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式：" + person.fullName;
//结果：
//不加括号输出函数表达式：function() { return this.firstName + " " + this.lastName; }
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果：" + person.fullName();
//结果
//加括号输出函数执行结果：John Doe
JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
// 执行代码
}
当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
注：因为JavaScript对大小写敏感，所以关键词function必须是小写的
调用带参数的函数
在调用函数时，您可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
与c语言类似。
您可以发送任意多的参数，由逗号 (,) 分隔：
<button οnclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button οnclick="myFunction('Bob','Builder')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
//点击不同的按钮浏览器会提示不同的内容
带有返回值的函数
通过使用 return 语句可以实现函数将值返回调用它的地方。
在使用 return 语句时，函数会停止执行，并返回指定的值。
在读取return函数后，JavaScript会省略函数后面的部分，从调用函数开始的地方继续执行代码。函数调用将被返回值取代。
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
//浏览器中会显示12
返回值也可以为空，此时仅仅会退出函数而不显示返回值
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量，本网页上的所有脚本和函数都能访问它。
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性
carname="Volvo";
将声明 window 的一个属性 carname。
非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。
JavaScript 作用域
作用域是可访问变量的集合。
在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。
JavaScript 局部作用域
变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问。
因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
JavaScript 全局变量
变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
JavaScript 变量生命周期
JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。
函数参数
函数参数只在函数内起作用，是局部变量。
JavaScript 事件
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件
HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：
- HTML 页面完成加载
- HTML input 字段改变时
- HTML 按钮被点击
通常，当事件发生时，你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
单引号
<some-HTML-element some-event=‘JavaScript 代码’>
双引号
<some-HTML-element some-event=“JavaScript 代码”>
<body>
<button οnclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
</body>
JavaScript 字符串
JavaScript 字符串用于存储和处理文本。
字符串可以存储一系列字符，如 “John Doe”。
字符串可以是插入到引号中的任何字符。可以使用单引号或双引号：
- 可以使用索引位置来访问字符串中的每个字符：
var character = carname[7];
//字符串的索引从 0 开始，这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。
- 你也可以在字符串添加转义字符来使用引号：
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";
- 可以使用内置属性 length 来计算字符串的长度：
<script>
var txt = "Hello World!";
document.write("<p>" + txt.length + "</p>");
var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write("<p>" + txt.length + "</p>");
</script>
//结果分别为12 26
特殊字符
利用转义字符" \ "可以在字符串中实现各种特殊字符
转义字符 () 可以用于转义撇号，换行，引号，等其他特殊字符。
下表中列举了在字符串中可以使用转义字符转义的特殊字符：
| 代码 | 输出 |
|---|---|
| \ ’ | 单引号 |
| \ " | 双引号 |
| \ \ | 反斜杠 |
| \n | 换行 |
| \r | 回车 |
| \t | tab(制表符) |
| \b | 退格符 |
| \f | 换页符 |
字符串可以是对象
//通常， JavaScript 字符串是原始值，可以使用字符创建：
var firstName = "John"
//但我们也可以使用 new 关键字将字符串定义为一个对象：
var firstName = new String("John")
BUT，这二者是不同的
var x = "John";
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象
更多字符串的对象属性和方法点击查看
JavaScript 运算符
JavaScript的常规运算符点击此处查看
用于字符串的 + 运算符
+ 运算符用于把文本值或字符串变量加起来（连接起来）。
如需把两个或多个字符串变量连接起来，请使用 + 运算符。
<p id="demo"></p>
<script>
function myFunction()
{
txt1="What a very";
txt2="nice day";
txt3=txt1+" " +txt2;
document.getElementById("demo").innerHTML=txt3;
}
</script>
//代码运行结果：
//What a very nice day
对字符串和数字进行加法运算
两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串
<p id="demo"></p>
<script>
function myFunction()
{
var x=5+5;
var y="5"+5;
var z="Hello"+5;
var demoP=document.getElementById("demo");
demoP.innerHTML=x + "<br>" + y + "<br>" + z;
}
</script>
//代码运行结果：
//10
//55
//Hello5
JavaScript 比较 和 逻辑运算符
JavaScript的比较与逻辑运算符和c语言类似，具体点击查看
JavaScript条件语句
if…else语句点击此处查看
switch语句点击此处查看
JavaScript循环语句
for循环点击此处查看
while循环点击此处查看
break与continue语句点击此处查看
JavaScript 类型转换
typeof 操作符
你可以使用 typeof 操作符来检测变量的数据类型。
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
null
在 JavaScript 中 null 表示 “什么都没有”。
null是一个只有一个值的特殊类型。表示一个空对象引用。
var person = null; // 值为 null(空), 但类型为对象
undefined
在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof** 一个没有值的变量会返回 undefined。
typeof 一个没有值的变量会返回 undefined。
//任何变量都可以通过设置值为 undefined 来清空。 类型为 undefined
person = undefined; // 值为 undefined, 类型是undefined
将数字转换为字符串
全局方法 String() 可以将数字转换为字符串。
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回
Number 方法 toString() 也是有同样的效果。
<p id="demo"></p>
<script>
var x = 123;
document.getElementById("demo").innerHTML =
x.toString() + "<br>" +
(123).toString() + "<br>" +
(100 + 23).toString();
</script>
//三者结果一样，都是123
将字符串转换为数字
全局方法 Number() 可以将字符串转换为数字。
字符串包含数字(如 “3.14”) 转换为数字 (如 3.14).
空字符串转换为 0。
其他的字符串会转换为 NaN (不是个数字)。
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
更多关于字符串转为数字的方法_Click_here
全局方法 Number() 可将布尔值转换为数字。
Number(false) // 返回 0
Number(true) // 返回 1
一元运算符 +
可用于将变量转换为数字：
var y = "5"; // y 是一个字符串
var x = + y; // x 是一个数字
如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字):
var y = "John"; // y 是一个字符串
var x = + y; // x 是一个数字 (NaN)
注：只有一元运算符+才能把变量转化为数字，二元运算符两边是不能转换的字符串和数字时，结果是字符串。
自动转换类型
当 JavaScript 尝试操作一个 “错误” 的数据类型时，会自动转换为 “正确” 的数据类型。
5 + null // 返回 5 null 转换为 0
"5" + null // 返回"5null" null 转换为 "null"
"5" + 1 // 返回 "51" 1 转换为 "1"
"5" - 1 // 返回 4 "5" 转换为 5
JavaScript 正则表达式
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。
什么是正则表达式？
正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。
语法
/正则表达式主体/修饰符(可选)
//其中修饰符是可选的。
var patt = /runoob/i
/runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。
使用字符串方法
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
//search方法
<p id="demo"></p>
<script>
function myFunction() {
var str = "Visit Runoob!";
var n = str.search(/Runoob/i);
document.getElementById("demo").innerHTML = n;
}
</script>
//结果输出为6
//replace方法
<p id="demo">Visit Microsoft!</p>
<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/microsoft/i,"Runoob");
document.getElementById("demo").innerHTML = txt;
}
</script>
//结果输出为Visit Runoob
更多正则表达式的修饰符和表达式模式 Click_here
RegExp对象、test和exec方法 Click_here
JavaScript 错误 - throw、try 和 catch
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。
JavaScript 错误
当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。
可能是语法错误，通常是程序员造成的编码错误或错别字。
可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。
可能是由于来自服务器或用户的错误输出而导致的错误。
当然，也可能是由于许多其他不可预知的因素。
JavaScript 抛出（throw）错误
当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。
描述这种情况的技术术语是：JavaScript 将抛出一个错误。
更多理解见final的part
JavaScript try 和 catch
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
try {
... //异常的抛出
} catch(e) {
... //异常的捕获与处理
} finally {
... //结束处理
}
在下面的例子中，我们故意在 try 块的代码中写了一个错字。
catch 块会捕捉到 try 块中的错误，并执行代码来处理它。
<script>
var txt="";
function message(){
try {
adddlert("Welcome guest!");
}
catch(err) {
txt="本页有一个错误。\n\n";
txt+="错误描述：" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
}
</script>
finally 语句
finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。
<script>
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 = "";
}
}
</script>
Throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
语法：throw exception
异常可以是 JavaScript 字符串、数字、逻辑值或对象。
JavaScript 调试
没有调试工具是很难去编写 JavaScript 程序的。
你的代码可能包含语法错误，逻辑错误，如果没有调试工具，这些错误比较难于发现。
通常，如果 JavaScript 出现错误，是不会有提示信息，这样你就无法找到代码错误的位置。
JavaScript 调试工具
在程序代码中寻找错误叫做代码调试。
调试很难，但幸运的是，很多浏览器都内置了调试工具。
内置的调试工具可以开始或关闭，严重的错误信息会发送给用户。
有了调试工具，我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。
浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 “Console” 。
console.log() 方法
如果浏览器支持调试，你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值：
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
//在浏览器打开后按F12会显示11
设置断点
在调试窗口中，你可以设置 JavaScript 代码的断点。
在每个断点上，都会停止执行 JavaScript 代码，以便于我们检查 JavaScript 变量的值。
在检查完毕后，可以重新执行代码（如播放按钮）。
debugger 关键字
debugger 关键字用于停止执行 JavaScript，并调用调试函数。
这个关键字与在调试工具中设置断点的效果是一样的。
如果没有调试可用，debugger 语句将无法工作。
开启 debugger ，代码在第三行前停止执行。
JavaScript 变量提升
JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
更多变量提升信息了解：click_here
JavaScript 严格模式(use strict)
使用 “use strict” 指令
“use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。
“use strict” 的目的是指定代码在严格条件下执行。
严格模式下你不能使用未声明的变量。
严格模式通过在脚本或函数的头部添加 use strict; 表达式来声明。
实例中我们可以在浏览器按下 F12 (或点击"工具>更多工具>开发者工具") 开启调试模式，查看报错信息。
更多严格模式信息了解：click_here
JavaScript this 关键字
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
- 在方法中，this 表示该方法所属的对象。
- 如果单独使用，this 表示全局对象。
- 在函数中，this 表示全局对象。
- 在函数中，在严格模式下，this 是未定义的(undefined)。
- 在事件中，this 表示接收事件的元素。
- 类似 call() 和 apply() 方法可以将 this 引用到任何对象。
更多this关键字信息了解：click_here
JavaScript let 和 const
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。
更多let和const信息了解：click_here
JavaScript JSON
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
什么是 JSON?
- JSON 英文全称 JavaScript Object Notation
- JSON 是一种轻量级的数据交换格式。
- JSON是独立的语言 *****
- JSON 易于理解。
了解什么是JSON请： click_here
更多关于JavaScript与JSON交互：click_here
javascript:void(0) 含义
我们经常会使用到 javascript:void(0) 这样的代码，那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢？
javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。
语法格式如下：
void func()
javascript:void func()]
//或者
void(func())
javascript:void(func())
实例一，不会跳转的超链接
<body>
<a href="javascript:void(0)">单此处什么也不会发生</a>
</body>
但void()中的内容却会被执行
<body>
<p>点击以下链接查看结果：</p>
<a href="javascript:void(alert('Warning!!!'))">点我!</a>
</body>
//点击超链接会返回一个warning警告窗
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PoRwn16q-1602759976421)(C:%5CUsers%5C87726%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20201015170115175.png)]
JavaScript 异步编程
异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。
在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。
简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。
以上是关于异步的概念的解释，接下来我们通俗地解释一下异步：异步就是从主线程发射一个子线程来完成任务。
什么时候用异步编程
在前端编程中（甚至后端有时也是这样），我们在处理一些简短、快速的操作时，例如计算 1 + 1 的结果，往往在主线程中就可以完成。主线程作为一个线程，不能够同时接受多方面的请求。所以，当一个事件没有结束时，界面将无法处理其他请求。
现在有一个按钮，如果我们设置它的 onclick 事件为一个死循环，那么当这个按钮按下，整个网页将失去响应。
为了避免这种情况的发生，我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情，比如读取一个大文件或者发出一个网络请求。因为子线程独立于主线程，所以即使出现阻塞也不会影响主线程的运行。但是子线程有一个局限：一旦发射了以后就会与主线程失去同步，我们无法确定它的结束，如果结束之后需要处理一些事情，比如处理来自服务器的信息，我们是无法将它合并到主线程中去的。
为了解决这个问题，JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。
回调函数
回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终。
<p id="demo"></p>
<script>
function print() {
document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);
</script>
这段程序中的 setTimeout 就是一个消耗时间较长（3 秒）的过程，它的第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数 “print”，在命令行输出 “Time out”。
当然，JavaScript 语法十分友好，我们不必单独定义一个函数 print ，我们常常将上面的程序写成：
setTimeout(function () {
document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);
**注意：**既然 setTimeout 会在子线程中等待 3 秒，在 setTimeout 函数执行之后主线程并没有停止，所以：
<p id="demo1"></p>
<p id="demo2"></p>
<script>
setTimeout(function () {
document.getElementById("demo1").innerHTML="RUNOOB-1!";
}, 3000);
document.getElementById("demo2").innerHTML="RUNOOB-2!";
</script>
//结果会先显示RUNOOB-2!
//等待3s后会显示：
//RUNOOB-1!
//RUNOOB-2!
更多的JavaScript异步编程：JavaScript Promise
JavaScript 代码规范
变量名
变量名推荐使用驼峰法来命名(camelCase):
例
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
空格与运算符
通常运算符 ( = + - * / ) 前后需要添加空格:
代码缩进
通常使用 4 个空格符号来缩进代码块；
不推荐使用 TAB 键来缩进，因为不同编辑器 TAB 键的解析不一样。
语句规则
- 一条语句通常以分号作为结束符。
复杂语句的通用规则:
- 将左花括号放在第一行的结尾。
- 左花括号前添加一空格。
- 将右花括号独立放在一行。
- 不要以分号结束一个复杂的声明。
对象规则
对象定义的规则:
- 将左花括号与类名放在同一行。
- 冒号与属性值间有个空格。
- 字符串使用双引号，数字不需要。
- 最后一个属性-值对后面不要添加逗号。
- 将右花括号独立放在一行，并以分号作为结束符号。
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
短的对象代码可以直接写成一行:
每行代码字符小于 80
为了便于阅读每行字符建议小于数 80 个。
如果一个 JavaScript 语句超过了 80 个字符，建议在 运算符或者逗号后换行。
命名规则
一般很多代码语言的命名规则都是类似的，例如:
- 变量和函数为小驼峰法标识, 即除第一个单词之外，其他单词首字母大写（ lowerCamelCase）
- 全局变量为大写 (UPPERCASE )
- 常量 (如 PI) 为大写 (UPPERCASE )
HTML 载入外部 JavaScript 文件
使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的):
<script src="myscript.js">
文件扩展名
HTML 文件后缀可以是 .html (或 .htm)。
CSS 文件后缀是 .css 。
JavaScript 文件后缀是 .js 。
使用小写文件名
大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.jpg 不能通过 London.jpg 访问。
其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问。
你必须保持统一的风格，我们建议统一使用小写的文件名。
988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
