【前端】前端学习三之初识JavaScript

前言

之前我们学习了HTML和CSS的一些基本认识，我们已经知道了通过HTML和CSS就可以基本实现一个比较美观的网页框架，但是一个网页只是有一个可以看的网页框架是不够的，它还需要能够实现完成一些功能才行（即网页的动态交互功能），比如点击跳转按钮，就会显示到另一个页面的事件效果。这就是我们JavaScript所实现的功能了。本章我们主要会介绍一下关于JavaScript的一些基本语法。

一、JavaScript是什么？

JavaScript（简称JS）是一种轻量级、解释型的脚本语言 。主要应用于前端开发，在浏览器上运行 ；现在也可以应用于后端开发，基于 node.js 在服务器端运行。JavaScript 之父是布兰登 * 艾奇 (Brendan Eich)。JavaScript 语言标准规范：ECMAScript ，它是由 ECMA 国际组织制定的，无论是啥样的 JavaScript 都要遵循这个标准。

JavaScript 的能做的事情有很多，比如：

网页开发(更复杂的特效和用户交互)
网页游戏开发
服务器开发(node.js)
桌面程序开发(Electron, VSCode 就是这么来的)
手机 app 开发
......

JavaScript的组成

JavaScript 有三大核心组成：

ECMAScript(简称 ES)：JavaScript 语法。
DOM: 页面文档对象模型，对页面中的元素进行操作。
BOM: 浏览器对象模型，对浏览器窗口进行操作。

而本章我们将介绍的则是ES，即JavaScript的基础语法。

二、JavaScript 的书写形式

JavaScript 的书写形式可以分为三种。

1. 行内式

将 JavaScript 代码直接写在 HTML 标签的事件属性中，这些属性通常以 on 开头，例如 onclick、onmouseover 等。比如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 行内式 -->
        <input type="button" value="这是一个按钮" onclick="alert('haha')">
    </body>
</html>

其中 οnclick="alert('haha')" 就是是 JavaScript 的行内式写法。这里简单解释一下它的功能意思：

onclick：是一个鼠标点击事件属性。

alert('haha')：当用户点击这个按钮时，浏览器会立即执行这段 JavaScript 代码，弹出一个警告框，显示内容为"haha"。

注意：JS 中字符串常量可以使用单引号表示, 也可以使用双引号表示，并且它们之前可以相互嵌套。

点击这个按钮后，其演示结果如下所示：

2. 内嵌式

将 JavaScript 代码包裹在 <script> 和 </script> 标签之中，通常放置在 HTML 文档的 <head> 或 <body> 部分。比如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 内嵌式 -->
        <script>
            alert('haha');
        </script>
    </body>
</html>

演示运行结果：

3. 外部式

将所有的 JavaScript 代码写在一个独立的 .js 文件中，然后通过 <script> 标签的 src 属性将其引入到 HTML 页面中。示例：

创建一个名为 test.js 的文件，内容为：

然后我们在html代码中通过script的src属性将 test.js 中的内容引入：

注意：这种情况下 script 标签中间不能写代码，必须空着，即使写了代码也不会执行。

其演示结果如图所示：

接下来我们将来介绍一下JavaScript的基础语法，即ES。

三、前置知识（prompt、alert、console.log）

在介绍ES之前，我们先来认识一下三种交互与输出方式，来方便后续介绍ES时的结果演示。

prompt：获取用户的输入 ，弹出一个对话框，里面有一个输入框，等待用户输入内容。示例：出现的输入框如下所示：
alert：给用户看信息 ，弹出一个警告框，只显示一段文字和一个"确定"按钮。示例：出现一个警告框：
console.log：给程序员看日志 ，在浏览器的"开发者工具控制台"里打印信息。示例：要看到consol.log打印的信息，我们需要先按【F12】，然后点击【Console】，就可以看到了：

这是程序员专用的。普通用户在网页上看不到这个输出。它用来检查代码运行得对不对，比如打印变量的值看看是不是预期的结果。

四、JavaScript的基础语法

注意：JS代码的每条语句之间既可以像C语言那样使用分号（;）隔开，也可以省略分号直接通过换行来隔开（浏览器会自动补全）。但在某些特殊情况下省略分号可能会导致错误，因此建议我们还是要写分号。

1. 注释

在JS中注释语句很简单，和C/C++中的注释方法是一样的。

// ：单行注释。
/* ... */：多行注释。

2. 变量的使用

（1）定义变量

在JS中定义变量可以通过var关键字或let关键字来实现，怎么定义变量的方法如下所示：

javascript 复制代码

var name = "zhangsan";
let age = 18;

细节：在JS中定义一个变量，我们不需要对变量的类型进行指定，变量的类型是由赋给它的值决定的，所以直接使用var或者let来定义即可。比如上述示例，name赋值为"zhangsan"，那它就是一个字符串；age赋值成一个数字，那他就是一个数字类型（注意在JS中整数和浮点数都是数字类型）。

建议：而我们建议使用 let 来定义变量，因为let比var出现得要晚，let 它弥补了var在定义变量上的一些缺陷。

注意：

在JavaScript中如果我们不使用let或者var来定义变量，则它就是一个全局变量。
变量必须先定义再使用

（2）JS是一门「动态弱类型」语言

JavaScript是一门「动态弱类型」语言。

动态类型 vs 静态类型

关于动静态类型主要看变量的类型是在什么时候确定的。

动态类型：变量的类型是在代码运行的执行过程中，可以随时变化。

说明：声明变量时不需要指定类型。同一个变量可以随时改变类型（比如：一个变量a存着数字，下一秒下一秒它被赋值"hello"，类型就变成了字符串）。

示例：这就是为什么JS 不需要对变量类型进行指定，因为它是动态的。

静态类型：变量的类型在定义的是什么类型，在代码运行的时候它就是什么类型，不能改变。

说明：通常要求声明变量时指定类型。一旦定义了类型，就不能随意赋值其他类型的数据，否则编译器会直接报错。

强类型 vs 弱类型

弱类型：语言允许隐式类型转换，表示不同类型类型之间的变量可以直接赋值，不会报错。

JavaScript 就是这样，所以JS就是一个弱类型语言。它为了让你代码能跑下去，会"自作主张"地转换数据格式。

强类型：语言不允许隐式类型转换。如果类型不匹配，它会直接报错，它需要你强制进行手动转换。

3. JS中的基本数据类型

在 JavaScript 中常见的基本数据类型有5种：

number：数字类型，不区分整数和小数。
string：字符串类型。
boolean：布尔值类型，只有两个值：true, false
undefined：未定义类型，表示变量已声明但未赋值。它只有一个值 undefined。比如：let x; (此时 x 的值就是 undefined)。
null：空值。它只有一个值 null。比如：let person = null;

（1）number 数字类型

关于JS中数字类型number的认识，只需要知道不论是整数还是小数，它们的类型都是number类型即可。我们可以演示一下：

在数字类型中也有几个特殊值：

Infinity：表示正无穷大。在 JavaScript 中，当一个数值运算的结果超出了语言所能表示的最大数值范围时，就会返回 Infinity。例如，1 / 0 的结果就是 Infinity。
-Infinity：表示负无穷大。与 Infinity 类似，当数值运算结果超出最小可表示范围时，会返回 -Infinity。例如，-1 / 0 的结果就是 -Infinity。
NaN：是 "Not a Number" 的缩写，表示当前的运算结果不是一个合法的数字。它通常出现在无效的数学运算中，比如 0 / 0、字符串减数字："hello" - 1。

示例：

（2）string 字符串类型

字符串的表示可以使用引号引起来，使用单引号，双引号均可，也可以将双引号和单引号搭配使用。使用示例：

javascript 复制代码

// string类型
let a = "hello"; // 双引号
let b = 'hello'; // 单引号
let str1 = "My name is'zhangsan'"; // 两种引号搭配使用
let str2 = 'My name is"zhangsan"'; // 两种引号搭配使用

// 错误的使用(运行时会报错)
let t = hello;
let s1 = "My name is "zhangsan"";
let s2 = 'My name is 'zhangsan'';

转义字符

字符串中一些不方便表示的字符：

\' 单引号
\" 双引号
\\ 反斜杠
\n 换行符
\r 回车符
\t 制表符
\b 退格符
\f 换页符
\v 垂直制表符

字符串求长度

在JS中的字符串也可以求长度：使用string的length属性即可。示例：

字符串拼接

字符串之间是可以使用 + 进行拼接的，除此之外，数字和字符串也可以进行拼接，拼接之后的类型都是字符串。使用示例：

（3）boolean 布尔类型

JS 中表示真假的布尔类型是 boolean，它的取值只有两个：true（真）和 false（假）。如果 boolean 参与数学运算，则会被隐式转换为数字类型：其中 true 变为 1，false 变为 0。

（4）undefined 未定义数据类型

undefined 类型的取值只有一个，就是 undefined 。如果一个变量没有被初始化过，它的值也就是 undefined，它的类型也是是 undefined 类型。示例：

undefined 类型的运算

如果undefined 和字符串进行相加, 结果进行字符串拼接；
如果undefined 和数字进行相加, 结果为 NaN。

示例：

（5）null 空值类型

null 空值类型的值只有一个，就是 null。它表示当前的变量是一个 "空值"。示例：

null类型的运算

当 null 参与数学运算时，它会被转换为数字 0。
当 null 与字符串进行拼接时，它会被转换为字符串 "null"。

示例：

4. 运算符

关于运算符，JavaScript中的运算符和C/C++/java中的哪些运算符几乎是一样的，都有：

算术运算符（+ ，- ，* ，/ ，% ）
赋值运算符 & 复合赋值运算符（ =， +=， -=， *=， /=，%=）
自增自减运算符（++ ，-- ）
比较运算符（<， > ，<=，>=， ==， !=）
逻辑运算符（&&，|| ， ! ）
位运算（& ， | ， ~ ， ^ ）
移位运算（>> ，<<，）

这些都是大多数语言都有的。

而在JavaScript中，除了有这些运算符之外，还有几个是JS特色的运算符，如下所示：

JS中比较相不相等有两种运算符：

会进行隐式类型转换的比较：== 比较相等，!= 比较不相等。比较的是变量内容。

不会进行隐式类型转换的比较： === 比较相等，!== 比较不相等。比较的是变量内容+类型。在JS中常使用的比较方法就是这种。

对于位运算符

>> 有符号右移 (算术右移 )

>>> 无符号右移 (逻辑右移 )，这也是JavaScript的特色。

5. 条件语句&循环语句

在JavaScript中的条件判断语句和我们常说的C语言是一样的，参考C语言的即可。都是if else语句，switch语句等。

循环语句也是一样，和C语言中的语法都是一样的。比如while循环，do...while循环，for循环。

可以简单来见见在JavaScript中的条件判断语句和循环语句，代码示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            // 条件语句，以if else语句为例
            // 判定一个数字是奇数还是偶数
            var num = 10;
            if (num > 0) 
            {
                console.log("num 是正数");
            } else if (num < 0) 
            {
                console.log("num 是负数");
            } else
            {
                console.log("num 是 0");
            }

            // 循环，以for循环为例
            // 打印1-10的数字
            for (var num = 1; num <= 10; num++) 
            {
                console.log(num);
            }   
        </script>
    </body>
</html>

运行结果：

6. JS中的数组

（1）创建数组

在JavaScript中创建数字主要有两种方法：通过new关键字创建，使用字面量方式创建(常用)。

需要注意的是：**在JavaScript中创建的数组不要求元素是相同类型，可以各个类型的数据放在一个数组中。**这一点和 C, C++, Java 等静态类型的语言差别很大。

new关键字创建其实就是通过构造函数创建，方法如下：

javascript 复制代码

// 创建一个空数组
let arr2 = new Array();

// 创建指定长度的空数组（注意：数组是空的，不是包含 undefined）
let arr3 = new Array(5); // 长度为 5，但没有实际元素

// 创建包含元素的数组(元素类型可以不同)
let arr4 = new Array(1, "aaa", 3.14); // 内容[1, "aaa", 3.14]

通过字面量创建（注意这里的创建使用的是 [ ]）：

javascript 复制代码

let arr1 = [];  // 创建空数组
let fruits = ["Apple", "Banana", "Orange"]; // 创建包含元素的数组
let mixed = [1, "hello", true, { name: "John" }]; // 混合不同类型的元素

数组的类型

在JavaScript中创建的数组的类型是 object 。验证：

注意事项：不要给数组名直接赋值 ，如果赋值了，则此时数组中的所有元素就都没了。示例：

（2）获取数组元素

在JavaScript中获取一个数组中的元素的方法很简单，和其他语言一样，都是通过下标来访问的。示例：

和C,C++,java这些语言不同的是，在JavaScript中如果下标越界 ，则其中的结果值就为 undefined 。示例：

（3）新增数组元素（三种方法）

在JavaScript中增加数组元素的方法有三种：1.通过修改 length 新增；2.通过下标新增；3.使用 push 进行追加元素。

★通过修改 length 新增★

length是JS中数组中的一个变量，通过点（.）来访问，相当于在末尾新增元素。新增的元素默认值为 undefined。示例：

★通过下标新增★

如果下标超出数组范围再赋值元素，则会给指定位置插入新元素。示例：

★使用 push 进行追加元素★

push是一个函数。这种方法也相当于在末尾新增元素，这种新增方法是紧跟着数组后面增加的。使用方法很简单（和C++中的STL调用库函数一样）。示例：

（4）删除数组中的元素

在JavaScript中删除元素是通过 splice 方法实现的。它需要传两个参数，第一个参数表示开始删除的下标位置，第二个参数表示要删除的元素个数。使用示例：

7. 函数

（1）函数的定义

函数的定义语法

在JS中定义的函数格式为：

javascript 复制代码

function 函数名(形参列表) {
    函数体
    return 返回值;
}

其中的形参列表不需要写let或者var，直接写变量名即可。因为在 JavaScript 中，函数参数本身就被视为已经声明过的变量。

**函数的调用：**函数定义并不会执行函数体内容，必须要调用才会执行，调用几次就会执行几次。

注意：函数的定义和调用的先后顺序没有要求。而变量则不同，变量必须先定义再使用。

使用示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            // 有返回值
            function add(a, b)
            {
                return a + b;
            }
            // 没有返回值
            function hello()
            {
                console.log("hello world!");
            }

            // 函数的调用
            let sum = add(3, 5);
            console.log(sum); // 打印结果
            hello();
        </script>
    </body>
</html>

运行结果：

（2）参数个数

参数匹配

实参和形参之间的个数可以不匹配。

如果实参个数比形参个数多，则多出的参数不参与函数运算
如果实参个数比形参个数少，则此时多出来的形参值为 undefined

示例验证：

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            function Print(a, b)
            {
                console.log("参数1: " + a + " 参数2: " + b);
            }
            Print(); // 参数比实际参数少，则形参值为 undefined
            Print(1);

            Print(1, 2); // 参数刚刚好

            Print(1, 2, 3, 4); // 参数比实际参数多，则多的参数不参与函数运算
        </script>
    </body>
</html>

运行结果：

获取所有传递的参数

在 ES6 之前，我们使用 arguments 对象来获取所有实参。比如：

（3）函数表达式

上面，我们使用的函数都是直接定义，再调用，还有一种函数的定义方法：定义一个匿名函数，然后将这个匿名函数用一个变量来表示。后面就可以通过这个变量来调用函数了。这就很像C++中的Lambda表达式。示例：

javascript 复制代码

// function后面没有函数的名字 -- 匿名函数
let add = function(a, b)
{
    console.log(a + " + " + b + " = " + (a + b));
}
add(3, 5);

// function后面也可以跟一个函数名字
let sub = function SUB(a, b)
{
    console.log(a + " - " + b + " = " + (a - b));
}
sub(3, 5); 
// SUB(3, 5); // 错误，此时不可以通过函数名调用了，只能通过变量名

（4）作用域

关于作用域，可以分为全局作用域和局部作用域。这和

全局作用域

生效于整个script标签中。特殊情况：对于变量，不论在哪里，不使用let，var定义的变量，就会变成全局变量。

常见全局变量：

javascript 复制代码

<script>
    // 全局变量
    let a = 100; // 刚好定义在script的第一层
    function func()
    {
        b = 200; // 不写let,var的全局变量
    }
    console.log(a);

    func(); // 必须先调用函数，执行代码后才有变量b
    console.log(b);
    
</script>

局部作用域/函数作用域

在script中通过{}括号括起来的，只在一个代码块中生效。

注意：

var：会忽略 {} 块，作用域是函数级或全局的，会"泄漏"出代码块。
let ：遵守 {} 块，作用域是块级的，出了代码块就失效。和大多数语言是一样的效果。

所以，我们常常建议使用 let 来定义变量。

示例：

javascript 复制代码

<script>
    function func()
    {
        let a = 200; // 局部变量，只在函数内部生效
        console.log(a);
    }
    // 这里的变量i是局部变量，属于循环内部
    for(let i = 0; i <= 1; i++)
    {
        console.log(i);
    }
    // 以下两条语句： i 和 a都会失效，会报错
    console.log(i); // 错误
    console.log(a); // 错误  
</script>

（5）作用域链

作用域链其实就是 JS 为了找到你用的那个变量，会从当前函数 开始，一级一级往外层找，直到找到全局变量为止的路径（采取的是链式查找的方式）。注意一定是全局的变量。

在函数中的常见应用：

函数可以定义在函数内部，而内层函数可以访问外层函数的局部变量.

8. 对象

（1）对象的创建（三种方法）

使用字面量创建对象

字面量创建对象是通过 { } 创建的。使用 { } 创建对象，属性和方法 都是使用键值对的形式来组织的，键值对之间使用**,分割。最后一个属性后面的,可有可无；键和值之间使用:**分割。

其中方法的值是一个匿名函数。

使用方法如下：

javascript 复制代码

// 通过字面量创建对象
let a = {}; // 创建了一个空的对象
console.log(a);

let student = {
    name: "小明",
    height: 175,
    weight: 170,
    sayHello: function() 
    {
        console.log("hello");
    }
};
console.log(student);

运行结果：

注意：如果要新增属性，则可以通过 student.name = "小亮"; 的方式来实现。

使用 new Object 创建对象

Object 是 JS 的内置构造函数，使用 new 调用它会创建一个空的普通对象，然后我们需要通过一些方法来新增属性或方法，这样就可以实现创建一个我们想要的对象了。示例：

javascript 复制代码

// new Object 创建
let student = new Object(); // 创建一个空对象

// 新增属性
student.name = "张三";
student.age = 18;
student.height = 175;
// 新增方法
student.SayHello = function()
{
    console.log("Hello!");
}
console.log(student); // 查看一下

运行结果：

使用构造函数创建对象

上面的两种方法一次只能创建一个对象，如果我们想要创建多个相同的对象，则使用上述方法，就比较麻烦，因为需要写很多重复的代码。所以我们一般都是使用构造函数来创建多个对象的。

它的基本语法为：

javascript 复制代码

// 定义构造函数
function 构造函数名(形参) 
{
    this.属性 = 值;
    this.方法 = function...
}

// 创建对象
var obj = new 构造函数名(实参);

说明：

在构造函数内部使用 this 关键字来表示当前正在构建的对象
构造函数的函数名首字母一般是大写的，这是为了与普通函数区分开
构造函数的函数名通常是名词
构造函数不需要 return
创建对象的时候必须使用 new 关键字.

示例：

javascript 复制代码

// 构造函数创建
function Person(name, age)
{
    // 定义属性
    this.name = name;
    this.age = age;
    // 定义方法
    this.SayHello = function()
    {
        console.log("Hello!");
    }
}
// 创建对象(需要使用new)
let xiaoming = new Person("xiaoming", 18);
let zhangsan = new Person("zhangsan", 20);

// 查看
console.log(xiaoming);
console.log(zhangsan);

运行结果：

（2）对象的访问

访问属性

访问对象中的属性，我们一般有两种方法：

使用**.**成员访问运算符来访问属性
使用 [ ] 访问属性, 此时属性需要加上引号(单引号，双引号都可以)

访问方法

方法我们一般都是通过使用 . 成员访问运算符来访问的。

示例：

javascript 复制代码

let student = {
    // 属性
    name: "小明",
    height: 175,
    weight: 170,
    // 方法
    sayHello: function() 
    {
        console.log("hello");
    }
};

// 访问属性
console.log(student.name); // .运算符
console.log(student["name"]); // [] 

// 访问方法
student.sayHello();

运行验证：

（3）class关键字（ES6引入）

class 是ES6 时引入的，它可以让 JavaScript 的面向对象编程写法更加清晰、直观。

通过class可以创建一个类，然后我们就可以通过这个类，再使用new来创建对象了。这就好像和C++、java一样。

使用 class 关键字来声明一个类，类体中的构造函数的名字一定要是constructor，再构造函数中，我们可以来赋值这个类的属性；然后方法则可以在class中自己定义（定义方法的方法就和C++/Javaa差不多）。使用方法如下：

javascript 复制代码

class Person 
{
    // 构造函数(主要是定义属性)
    constructor(name, age)
    {
        this.name = name;
        this.age = age;
    }
    // 定义方法
    Say()
    {
        // 注意：访问当前对象需要加上this.
        console.log("Hello " + this.name);
    }
}
// 创建对象
let xiaoming = new Person("小明", 18);
console.log(xiaoming); // 查看对象
xiaoming.Say(); // 调用方法

运行结果：

（4）static 关键字

在JavaScript中的类中，加了 static 的成员，是属于类本身的，而不是属于实例对象的。

访问时，需要通过类名.成员来访问；通过对象名.成员来访问时不行的（会报错）。示例：

javascript 复制代码

class Person 
{
    constructor(name, age)
    {
        this.name = name;
        this.age = age;
    }
    static other = "其他人";
    static Say()
    {
        console.log("Hello " + this.name);
    }
}
let xiaoming = new Person("小明", 18);
// 访问静态变量
console.log(xiaoming.other); // 通过对象访问--其结果为：undefined
console.log(Person.other); // 正确

// 访问静态方法
console.log(xiaoming.Say()); // 对象访问--报错 TypeError: xiaoming.Say is not a function
console.log(Person.Say()); // 正确

（5）继承（了解）

在 JavaScript 中，类（class）可以通过 extends 关键字来实现继承。

如何实现？

子类在定义时，使用 extends 关键字指定要继承的父类。在子类的 constructor 中，必须先调用 super()，而super() 相当于调用了父类的 constructor（构造函数），它的作用是初始化继承自父类的那些属性。

JavaScript的继承和Java的继承是很相似的。

示例：

javascript 复制代码

// 1. 定义父类
class Person 
{
    constructor(name, age) 
    {
        this.name = name;
        this.age = age;
    }
    sayHello() {
        console.log("父类 Hello");
    }
}
// 2. 定义子类，使用 extends 继承 Person
class Student extends Person 
{
    constructor(name, age, grade) 
    { 
        super(name, age); // 初始化继承自父类的那些属性
        this.grade = grade; // 子类独有的属性
    }
    // 方法重写
    sayHello() 
    {
        console.log("子类 Hello");
    }
}

到这里，关于JavaScript核心部分的基础语法基本上是介绍完了。

最后感谢各位观看！希望能多多支持！