开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript总结 -> 正文阅读

[JavaScript知识库]JavaScript总结

一、JavaScript简介

JavaScript（缩写：JS）是一门高级的、解释型的动态编程语言。用于 HTML或web应用，可被浏览器直接执行。

完整的JavaScript包括以下几个部分：

ECMAScript，描述了该语言的语法和基本对象
文档对象模型（DOM），描述处理网页内容的方法和接口
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口

JavaScript的基本特点如下：

JavaScript是一种轻量级解释性脚本语言（代码不进行预编译）。
JavaScript主要用来向HTML页面添加交互行为。
JavaScript可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务：

嵌入动态文本于HTML页面
对浏览器事件作出响应
读写HTML元素
在数据被提交到服务器之前验证数据
检测访客的浏览器信息
控制cookies，包括创建和修改等

二、JavaScript用法

1、嵌入HTML

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<!DOCTYPE html>
<html>

<head>
<script>
document.write("hello world");
</script>
</head>

<body>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
</body>
</html>

??通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。如果 <script> 放在 body 中，建议放在底部。因为浏览器会按照代码在文件中的顺序解析 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。所以，要将 JavaScript 代码放在 body 中，应置于 HTML 页面底部。

2、外部的JavaScript脚本

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
<body>

<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script src="myScript.js"></script>

</body>
</html>

你可以将脚本放置于 <head> 或者 <body>中，放在 <script> 标签中的脚本与外部引用的脚本运行效果完全一致。
myScript.js 文件代码如下：

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

3、Console窗口调试JavaScript代码

打开开发者工具后，我们可以在 Console 窗口调试 JavaScript代码，如下图：
在这里插入图片描述

4、Chrome snippets小脚本

我们也可以在 Chrome 浏览器中创建一个脚本来执行，在开发者工具中点击 Sources 面板，选择 Snippets 选项卡，在导航器中右击鼠标，然后选择 Create new snippet 来新建一个脚本文件：
在这里插入图片描述
如果你没看到 Snippets ，可以点下面板上到 >> 就能看到了。
点击New snippet 后，会自动创建一个文件，你只需在右侧窗口输入以下代码，然后按 Command+S（Mac）或 Ctrl+S（Windows 和 Linux）保存更改即可。
保存后，右击文件名，选择 “Run” 执行代码：
在这里插入图片描述

5、事件触发

把 JavaScript 代码放入函数中，在事件发生时调用该函数。如点击事件：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

三、JavaScript变量

与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
注：JavaScript 语句和 JavaScript 变量都对大小写敏感。

1、声明变量

在 JavaScript 中创建变量通常称为"声明"变量。

我们使用 var 关键词来声明变量，使用等号来为变量赋值：

var a;  //声明
var a = 3;  //初始化
a = 5;  //赋值

//注意: 在JavaScript中，所有代码指令都会以分号结尾 (;)

也可以使用let和const来定义，这三者的区别是：var与let涉及块级作用域，let 声明的变量只在 let 命令所在的代码块{}内有效；const 声明一个只读的常量，一旦声明，常量的值就不能改变，具体参考JavaScript let 和 const。一般用var即可，let更推荐。

2、数据类型

变量	解释	示例
String	字符串（一串文本）。字符串的值必须将用引号（单双均可，必须成对）扩起来	var name = “John”; 字符访问:name[0] name[1]
Number	数字。JavaScript 只有一种数字类型。数字可以带小数点，也可以不带	let x1=34.00; let x2=34;
Boolean	布尔值（真 / 假）。 true/false 是 JS 里的特殊关键字，无需引号	let x=true; let y=false;
Array	数组，用于在单一引用中存储多个值的结构	let cars=[“Saab”,“Volvo”,“BMW”]; 元素引用方法：cars[0],cars[1]
Object	对象，JavaScript 里一切皆对象，一切皆可储存在变量里。对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔	let person={firstname:“John”, lastname:“Doe”, id:5566}; let newObject = document.querySelector(‘h1’); 对象属性访问:object.AttributesName object[’‘AttributesName’’]

3、算术运算符

运算符	描述	例子	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

4、赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

运算符	例子	等同于	运算结果
=	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

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

6、逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

运算符	描述	例子
`&&`	and	(x < 10 && y > 1) 为 true
`\|\|`	or (x==5
`!`	not	!(x==y) 为 true

四、基本语法

1、条件语句

通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 JavaScript 中，我们可使用以下条件语句：

if 语句：只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句：当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句：使用该语句来选择多个代码块之一来执行
switch 语句：使用该语句来选择多个代码块之一来执行

1.1 if 语句

if (condition)
{
    当条件为 true 时执行的代码
}

只有当指定条件为 true 时，该语句才会执行代码。

1.2 if…else 语句

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

使用 if…else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

1.3 if…else if…else 语句

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  	当条件 1 和 条件 2 都不为 true 时执行的代码
}

使用 if…else if…else 语句来选择多个代码块之一来执行。

1.4 switch 语句

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

1.5 三目运算

let str = (condition)?value1:value2 
//condition成立则str=value1否则value2

2、循环语句

JavaScript 支持不同类型的循环：

for：循环代码块一定的次数
for/in：循环遍历对象的属性
while：当指定的条件为 true 时循环指定的代码块
do/while：同样当指定的条件为 true 时循环指定的代码块

2.1 for 循环

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

语句 1 ：（代码块）开始前执行

语句 2 ：定义运行循环（代码块）的条件

语句 3 ：在循环（代码块）已被执行之后执行

2.2 for/in 循环

JavaScript for/in 语句循环遍历对象的属性：

var person={fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

2.3 while 循环

while 循环会在指定条件为真时循环执行代码块。

while (条件)
{
    需要执行的代码
}

2.4 do/while 循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

do
{
    需要执行的代码
}
while (条件);

3、函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
    // 执行代码
}

当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
注：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

3.1 调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。
您可以发送任意多的参数，由逗号 (,) 分隔：

function myFunction(var1,var2)
{
	代码
}

3.2 带有返回值的函数

在使用 return 语句时，函数会停止执行，并返回指定的值。

function myFunction()
{
    var x=5;
    return x;
}

3.3 匿名函数

函数存储在变量中，不需要函数名称，通常通过变量名来调用。

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

4、异常处理

当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。
可能是语法错误，通常是程序员造成的编码错误或错别字。
可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。
可能是由于来自服务器或用户的错误输出而导致的错误。
当然，也可能是由于许多其他不可预知的因素。

常见的异常处理语句：

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

4.1 try 和 catch

try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。

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

4.2 throw 语句

throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "错误: " + err;
    }
}
// 异常可以是 JavaScript 字符串、数字、逻辑值或对象