简介

JavaScript是一种高级的、解释型的编程语言。JavaScript是一门基于原型、头等函数的语言，是一门多范式的语言，它支持面向对象程序设计，指令式编程，以及函数式编程。在语法结构上，它与C语言有很多相似（例如if条件语句、switch语句、while循环、do-while循环等）。

JavaScript是一种脚本语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释执行。解释型语言的弱点是安全性较差，而且在JavaScript中，如果一条执行不了，那么下面的语言也无法执行。

用法

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

如果需要在HTML页面插入JavaScript，应使用<script>和</script>标签

脚本可位于 HTML 的<body>或<head>部分中，或者同时存在于两个部分中。还可以把脚本保存在外部文件。

通常的做法是把函数放入<head>部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

<body>中的JavaScript

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
	<script>
		document.write("<h1>这是一个标题</h1>");
		document.write("<p>段落</p>");
	</script>
</body>
</html>

在例子中，页面加载时，JavaScript向HTML中的<body>写文本

<head>中的JavaScript

例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	<h1>learn JavaScript</h1>
	<p id="demo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi architecto dolores quasi et odio optio deserunt animi necessitatibus excepturi, nulla voluptas nostrum sed minus nesciunt id commodi molestias recusandae itaque?</p>
	<button type="button" onclick="first()">一个小小的按钮</button>
    <script>
        function first()
        {
            document.getElementById("demo").innerHTML="try";
        }
    </script>
</body>
</html>

当按钮被点击时，first函数会被调用。

外部的JavaScript

外部 JavaScript 文件的文件扩展名是.js。

如需使用外部文件，请在<script>标签的 src 属性中设置该.js 文件

例：使用外部的JS文件

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
	<script src="test.js"></script>
</body>
</html>

输出

JavaScript中没有用来打印和输出的函数，但是可以通过其他方式来输出数据

①使用window.alert()弹出警告框

②使用document.write()将内容写到 HTML 文档中

③使用innerHTML写入到 HTML 元素

④使用console.log()写入到浏览器的控制台

弹出警告框

使用window.alert()

例：弹出警告框显示123456

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
	<script>
	window.alert(123456);
	</script>
</body>
</html>

直接写入HTML文档

使用document.write()

例：在HTML文档写入当前日期（使用Date()）

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
    <script>
        document.write(Date());
    </script>
</body>
</html>

操作HTML元素

使用innerHTML

从JavaScript中访问某个HTML元素时，使用document.getElementById(id)。用id属性来标识HTML元素，并用innerHTML来获取或插入元素内容

例：

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
    <p id="learn">未修改的段落</p>
    <script>
        document.getElementById("learn").innerHTML="已修改的段落";
    </script>
</body>
</html>

页面上不显示未修改的段落只显示已修改的段落

写入控制台

使用console.log()

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
    <script>
        a=1;
        b=9;
        console.log(a,b);
        console.log(231);
    </script>
</body>
</html>

语法

字面量

在编程语言中，一般固定值称为字面量，如23.78

字面量分为数字面量、字符串面量、表达式面量、数组面量、对象面量、函数面量

数字面量可以是整数或者是小数，或者是科学计数(e)，如3.14、100、123e4

字符串面量是指使用双引号“”括起来的的字符序列，如“Hello World”

表达式面量用于计算，如1+9、2*7

数组面量是定义一个数组，如[200,3213,213,532,231]

对象面量是定义一个对象，如{firstName:"Edward", lastName:"lbw"}

函数面量是定义一个函数，如test(a,b) {return a+b;}

变量

JavaScript用关键字var来定义变量,用等号来为变量赋值。如var t=123定义一个变量t，并赋值为123

PS：JavaScript变量应以字母开头（也可以 以_或$开头）。变量的名称对大小写敏感。

一条语句，多个变量

1
var lastname="Lee",age=32,job="worker";

横跨多行的声明

1
2
3
var lastname="Lee",
age=32,
job="worker";

重新声明JavaScript变量

如果重新声明 JavaScript 变量，该变量的值不会丢失

例：

1
2
var zoom="style";
var zoom;

这两条语句执行后，变量zoom的值仍为”style”

操作符

JavaScript用赋值运算符给变量赋值，用算术运算符来计算值

JavaScript语言有多种类型的运算符

类型 描述 例子
赋值，算术和位运算符 在 JS 运算符中描述 = + - * /
条件，比较及逻辑运算符 在 JS 比较运算符中描述 == != < >

语句

JavaScript 语句是用分号;分隔

条件语句

if 语句 —— 只有当指定条件为 true 时，使用该语句来执行代码

if…else 语句 —— 当条件为 true 时执行代码，当条件为 false 时执行其他代码

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

switch 语句 —— 使用该语句来选择多个代码块之一来执行

PS：上述条件语句的用法与C语言相似

①if语句

1
2
3
4
if(a>b)
{
	c=a;
}

②if…else语句

1
2
3
4
5
6
7
8
if(a>b)
{
	c=a;
}
else
{
	c=b;
}

③if…else if…else语句

1
2
3
4
5
6
7
8
9
10
11
12
if(a>b)
{
	c=0;
}
else if(a<b)
{
	c=1;
}
else
{
	c=a;
}

④switch语句

1
2
3
4
5
6
7
8
9
10
11
switch(n)
{
    case 1:
        代码块 1
        break;
    case 2:
        代码块 2
        break;
    default:
        代码块 3
}

循环语句

for ——循环代码块一定的次数

for/in —— 循环遍历对象的属性

while —— 当指定的条件为 true 时循环指定的代码块

do/while —— 同样当指定的条件为 true 时循环指定的代码块

PS：上述条件语句的用法与C语言相似

①for

1
2
3
4
5
for(var i=0;i<10;i++)
{
	n=i*i;
	sum=sum+n;
}

②for/in

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

1
2
3
4
5
var person={fname:"Edward",lname:"Wayne",age:36}; 
for (x in person)      // x 为属性名
{
    txt=txt+person[x];
}

③while

1
2
3
4
while(条件)
{
    需要执行的代码
}

④do/while

1
2
3
4
5
do
{
    需要执行的代码
}
while(条件);

PS：先循环一次，再判断条件。

break和continue语句

break语句

break 语句可用于跳出循环，会继续执行该循环之后的代码（如果有的话）

continue语句

*continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。

关键字

和其他任何编程语言一样，JavaScript 也保留了一些关键字为自己所用。

​ JavaScript中重要的保留关键字
abstract debugger final instanceof protected throws
boolean default finally int public transient
break delete float interface return true
byte do for let short try
case double function long static typeof
catch else goto native super var
char enum if new switch void
class export implements null synchronized volatile
const extends import package this while
continue false in private throw with

注释

//后的内容是注释

//这是注释

数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

在 JavaScript 中有 6 种不同的数据类型string、number、boolean、object、function、symbol，3 种对象类型Object、Date、Array，2 个不包含任何值的数据类型null、undefined

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。

例：

1
2
3
var x;             //x为undefined
var x=5;           //现在x为数字
var x="John";      //现在x为字符串

字符串

字符串是存储字符的变量，如“bilibili”

字符串可以是引号（” “或‘ ’）中的任意文本。

例：

1
2
3
var example="Bilibili";
var example="this is an 'example'";
var example='this is another "example"';

数字

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带

1
2
var x1=34.00;      //使用小数点
var x2=34;         //不使用小数点

较大或较小的数字可以通过科学（指数）计数法来书写：

1
2
var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

布尔

布尔（逻辑）只能有两个值：true 或 false。布尔常用于条件测试。

1
2
var a=true;
var b=false;

数组

数组下标从0开始

创建数组

1
2
3
4
5
6
7
8
9
10
11
①
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

②
var cars=["Saab","Volvo","BMW"];

③
var cars=new Array("Saab","Volvo","BMW");

未定义和对空

未定义（undefined）表示变量不含有值。可以通过将变量的值设置为 null 来清空变量

例

1
2
doge=null;
dragon=null;

typeof，null和undefined

typeof操作符

typeof操作符可以用来检测变量的数据类型。typeof 一个没有值的变量会返回 undefined。

例

1
2
3
4
5
typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

PS：在JavaScript中，数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。

null

在 JavaScript 中 null 表示 “什么都没有”。null是一个只有一个值的特殊类型。表示一个空对象引用。

1
var learn=null;           // 值为 null(空), 但类型为对象

undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。任何变量都可以通过设置值为 undefined 来清空，类型为 undefined

1
person=undefined;          // 值为 undefined, 类型是undefined

undefined 和 null 的区别

null 和 undefined 值相等，类型不同

1
2
3
4
typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

类型转换

JavaScript变量可以通过使用JavaScript函数 或 JavaScript自身自动转换 转换为 新变量或其他数据类型。

数字转换为字符串

全局方法String()可以将数字转换为字符串。该方法可用于任何类型的数字，字母，变量，表达式

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

Number 方法toString()也可以将数字转换为字符串

1
2
3
x.toString()
(123).toString()
(100 + 23).toString()

布尔值转换为字符串

全局方法String()可以将布尔值转换为字符串

1
2
String(false)        // 返回 "false"
String(true)         // 返回 "true"

Boolean 方法toString()也可以将布尔值转换为字符串

1
2
false.toString()     // 返回 "false"
true.toString()      // 返回 "true"

布尔值转换为数字

全局方法Number()可将布尔值转换为数字

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

日期转换为字符串

可以使用Date()返回字符串

1
Date()      //返回 Fri Jan 28 2022 16:36:28 GMT+0800 (中国标准时间)

全局方法String()将日期对象转换为字符串

1
String(new Date())     //返回 Fri Jan 28 2022 16:36:28 GMT+0800 (中国标准时间)

Date 方法toString()将日期对象转换为字符串

1
2
obj = new Date()
obj.toString()       //返回 Fri Jan 28 2022 16:36:28 GMT+0800 (中国标准时间)

日期转换为数字

全局方法Number()可将日期转换为数字

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

日期方法getTime()也可将日期转换为数字

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

字符串转换为数字

全局方法Number()可以将字符串转换为数字。字符串包含数字(如 “3.14”) 转换为数字 (如 3.14)。

空字符串转换为 0，其他的字符串会转换为 NaN (NaN不是数字)。

1
2
3
4
Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

转换表

原始值 转换为数字 转换为字符串 转换为布尔值
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
“Bilibili” NaN “Bilibili” true
[ ] 0 “” true
[20] 20 “20” true
[10,20] NaN “10,20” true
[“Bilibili”] NaN “Bilibili” true
[“Bilibili”,”Google”] NaN “Bilibili,Google” true
function(){} NaN “function(){}” true
{ } NaN “[object Object]” true
null 0 “null” false
undefined NaN “undefined” false

函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

1
2
3
4
function functionname()
{
    代码
}

PS：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

调用带参数的函数

1
2
3
4
function myFunction(var1,var2)
{
	代码
}

PS：变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

带返回值的函数

例：

1
2
3
4
5
function myFunction()
{
    var x=5;
    return x;
}

PS：

在使用 return 语句时，函数会停止执行，并返回指定的值。整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方

如果想直接退出函数，可使用不带有返回值的return语句

例：

1
2
3
4
5
6
7
8
function myFunction(a,b)
{
    if (a>b)
    {
        return;
    }
    x=a+b
}

字母大小写

JavaScript 对大小写敏感。

例

函数getElementById与getElementbyID是不同的。

变量myVariable与MyVariable也是不同的。

字符集

JavaScript 使用Unicode字符集。Unicode 覆盖了所有的字符，包含标点等字符。

作用域

在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

局部变量

局部变量在函数内声明，作用于局部作用域。局部变量只能在函数内部访问。

因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。

局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

全局变量

变量在函数外定义，即为全局变量。全局变量有全局作用域: 网页中所有脚本和函数均可使用。

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量

例：carName 在函数内，但是为全局变量

1
2
3
4
5
6
// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。局部变量在函数执行完毕后销毁，全局变量在页面关闭后销毁。

字符串

JavaScript 字符串用于存储和处理文本

可以使用索引位置来访问字符串中的每个字符

1
2
var carname = "bilibili";
var character = carname[4];

字符串长度

length属性可以计算字符串的长度

1
2
var example="qwerasdsadsdzdsadasczxczxcz";
var l=example.length;

字符串属性

属性 作用
constructor 返回创建字符串属性的函数
length 返回字符串的长度
prototype 允许向对象添加属性和方法

字符串方法

方法 作用
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的 Unicode 值
concat() 连接两个或多个字符串，返回连接后的字符串
fromCharCode() 将 Unicode 转换为字符串
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase() 把字符串转换为小写
toString() 返回字符串对象值
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值

特殊字符

​ 字符串中可以使用转义字符转义的特殊字符

字符 转义后
\' '
\" "
\\ \
\n 换行
\r 回车
\t tab(制表符)
\b 退格符
\f 换页符

运算符

算数运算符

算数运算符 作用
+ 加法
- 减法
* 乘法
/ 除法
% 取模（求余）
++ 自增
– 自减

+运算符

①+运算符可以把文本值或字符串连接起来。

例：

1
2
3
txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;

txt3的值为What a very nice day

②+运算符还可以把数字与字符串相加，返回字符串

例：

1
2
3
x=5+5;
y="5"+5;
z="Hello"+5;

结果为：

1
2
3
10
55
Hello5

赋值运算符

赋值运算符 例子
= x=y
+= x+=y
-= x-=y
*= x*=y
/= x/=y
%= x%=y

比较运算符

运算符 意义
== 等于
=== 绝对等于（值和类型均相等）
!= 不等于
!== 不绝对等于（值和类型有一个不相等，或两个都不相等）
> 大于
< 小于
>= 大于或等于
<= 小于或等于

逻辑运算符

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

条件运算符

variablename=(condition)?value1:value2

例：当a>b时，c=0，否则c=1

1
c=(a>b)?0:1;