JavaScript基础1

快来打我* 2023-09-27 22:59 131阅读 0赞

**目录**

1.JS概述

1.1 JS的缘由

1.2 JS的定义

1.3 JS的特点

1.4 JS的组成部分

1.5 执行原理

2.网页引入JS的三种方式

2.1 使用script标签

2.2 行内直接书写

2.3 使用外部js文件引入

3.JS核心语法

3.1 变量

3.2 数据类型

3.3 字符串

3.3.1 length属性

3.3.2 charAt()

3.3.3 indexOf(str,index=0)

3.3.4 substring(index1,index2)

3.3.5 spilt(str) 将str作为分割符，返回一个字符串数组

3.4 数组

3.4.1 创建数组

3.4.2 修改数组

3.4.2 访问数组的值

3.4.3 访问数组的长度

3.4.4 indexOf(value,index=0)方法

3.5 运算符号

3.5.1 算术运算符

3.5.2 赋值运算符

3.5.3 比较运算符

3.5.4 逻辑运算符

3.6 逻辑控制语句

3.6.1 if条件语句

3.6.2 switch条件语句

3.6.3 for循环语句

3.6.4 while循环语句

3.6.5 for-in遍历语句

3.7 注释

3.8 输入与输出

3.8.1 输入

4.函数

4.1函数概述

4.2 常用的系统函数

4.2.1 parseInt(str)

4.2.2 parseFloat(str)

4.2.3 isNaN()

4.3 自定义函数

4.3.1 创建函数

4.3.2 无参函数

4.3.3 有参函数

--------------------

## 1.JS概述 ##

### 1.1 JS的缘由 ###

（1）是W3C标准下，行为化标准的主要内容

（2）可以实现复杂验证，减轻服务器的压力

（3）可以批量执行命令，提高网页运行效率

### 1.2 JS的定义 ###

**JS是一种基于对象和事件驱动的、并具有安全性能的脚本语言**

**解析：**

**（1）基于对象：**可以创建/面向对象

**（2）事件驱动：**可以定义一些事件（函数/方法）并进行调用

**（3）安全性：**相比H5本身而言，具有更高的安全性

**（4）脚本语言：**把许多命令组合在一起批量执行的语言

### 1.3 JS的特点 ###

**（1）交互性**（动态呈现）

**（2）脚本性**（批量执行）

**（3）解释性**（边执行边解释）

### 1.4 JS的组成部分 ###

**（1）ECMAScript**（核心内容，JS前身）

**（2）DOM**（文档对象模型）

**（3）BOM**（浏览器对象模型）

### 1.5 执行原理 ###

**第一步：**用户端发送请求到服务器端

**第二步：**将JS解析出来的数据（用户身份标识）绑定在请求路径中

**第三步：**服务器端获取到参数之后会响应客户端（返回数据到客户端）

**第四步：**客户端通过浏览器解析响应的数据并将数据展现在浏览器之上

## 2.网页引入JS的三种方式 ##

### 2.1 使用script标签 ###

代码：![a66f1c6bf14549d6b4cd1a05fe44046b.png][]

注意在任何位置都可以引入<script>标签，但尽量在体部底部引入

结果：![c6e1d3c6dc434be0b2e8f5d79c90efb9.png][]

### 2.2 行内直接书写 ###

代码：![2d8d398a27264a91b6d96be1e2b3dc49.png][]

**onclick**表示点击，一般不建议使用这种方法

结果与2.1中相同

### 2.3 使用外部js文件引入 ###

代码：![95d0657717c84a298fb294c5a59933c2.png][]

![896de5ec58e445499989237d0be7d0ac.png][]

结果与2.1中相同

## 3.JS核心语法 ##

### 3.1 变量 ###

（1）JS变量用于存储变量值

（2）使用var来定义变量名

（3）使用赋值符号给变量赋值

（4）使用函数或者运算符对变量进行操作

代码：![cb204241db5b4a11a6e10dec58e854d2.png][]

结果：![6f6d3e5d22634e01aa1068bb5aea7d98.png][]

### 3.2 数据类型 ###

需要使用 **typeof()** 方法来查看数据类型

类型种类：

**（1）undefined** 未定义类型，变量未赋值

**（2）string** 字符串

**（3）number** 数值

**（4）boolean** 布尔值

**（5）object** 对象（包括数组，方法）

（6）null 空类型\* （无法直接调用**tyoeof()**方法得到null类型，默认null类型返回object类型）

代码：![db806f0e2462413ea1d3bf0342f6f8e7.png][]

结果：![0482f95155d84a63be8fce86dc4e4c4c.png][]

### 3.3 字符串 ###

string在定义后，JS引擎会自动把string变为一种对象，其自带一些属性和功能，以下为部分属性和功能。

以![3f4b3645b9d84ceab670ae2f2feb222f.png][]为例

#### 3.3.1 length属性 ####

返回对象的长度

代码：![0388e5acb5604dada6c94920951eac5f.png][]

结果：![21a9329ab44e44f5b70c9e0f14d3ffc9.png][]

#### 3.3.2 charAt() ####

返回指定索引位置的值

代码：![999121133fdf480eb16b1f3ebd3abe4e.png][]

结果：![c1a2ca27c0ca42c98a7e4824b8f301e0.png][]

#### 3.3.3 indexOf(str,index=0) ####

返回指定字符串第一次出现的位置

代码：![b88fe3d3eb8c4e7e8e73fcef28cc1654.png][]

结果：![98fc509828b1426a81e63f3422607dfa.png][]

#### 3.3.4 substring(index1,index2) ####

返回索引1到索引2位置之间包含的字符串（包括索引1的位置）

代码：![1398f80c88404db5b7714bcb524b62a1.png][]

结果：![7c864ccdc1114ea1bf1e08b9131c4ffb.png][]

#### **3.3.5 spilt(str) 将str作为分割符，返回一个字符串数组** ####

代码：![f9764dd010f245748b98d7ebee638d96.png][]

结果：![618b703fa12c46c6ae095217711b50d8.png][]

### 3.4 数组 ###

#### 3.4.1 创建数组 ####

**（1）创建空数组**

①var new\_array=new Array()

②var new\_array=\[\]

**（2）创建有初始值的数组**

①var new\_array=new Array(1,3)

②var new\_array=\[1,3\]

#### 3.4.2 修改数组 ####

（1）更改数组中的某个值

new\_array\[index\]=value

（2）向数组中添加新的值

①new\_array\[new\_index\]=value

②new\_array.push(value)

注意：用第一种方式数组赋值时，如果跳过某些索引，数组中跳过的索引位置变为undefined

例如new\_array\[0\]=1；new\_array\[3\]=3；则数组内容会变为\[1，，，3\]

代码：![41e04ba68152489b910de0fe2b49abed.png][]

结果： ![d58ea2941be1478f87d79b9cf4df4613.png][]

#### 3.4.2 访问数组的值 ####

使用new\_array\[index\]直接访问，如果index不存在，返回空

#### 3.4.3 访问数组的长度 ####

使用new\_array.length访问，与string中的方法相同

#### 3.4.4 indexOf(value,index=0)方法 ####

返回数组中第一个值为value的索引值，不存在则返回-1，与string中的方法相同

### 3.5 运算符号 ###

#### 3.5.1 算术运算符 ####

（1）算术运算符有+，-，\*，/，%

（2）算术运算符主要是对数值类型的数据进行数学运算

（3）+运算符既可以作为算术运算符，又可以作为字符串的拼接符

当 字符串+其他类型数据 时，会自动将其他类型数据转换为字符串进行拼接

代码：![5ad4feb9255a428eb0f9a3bc8225187a.png][]

结果：![3e1a096a56b147fb8d6cd020d7d7e256.png][]

（4）示例

代码：![5b5443c3c3d446d5a901f9760108ebef.png][]

结果：![e73332f587674600939ac33322f23fd3.png][]

其中%为取余运算符

#### 3.5.2 赋值运算符 ####

（1）赋值运算符包括=，+=，-=，/=，\*=，%=

（2）赋值运算符是对变量进行变量值的更改

（3）+=运算符同样可以实现字符串拼接的操作

（4）示例

代码：![db5a59b39da24bb1a1ce3dcde188d427.png][]

结果：![5653f95bb22b43548255a9af68ae06c5.png][]

#### 3.5.3 比较运算符 ####

（1）比较运算符有>，<，>=，<=，==，!=

（2）比较运算符是对算符两端进行比较，并根据算符类型返回布尔值

（3）示例：

代码：![5ad9a370abdd49418b2fa3f7a9f72d07.png][]

结果：![223c2a53908f441490d2598cd66f6526.png][]

#### 3.5.4 逻辑运算符 ####

（1）逻辑运算符有&&，||，!

（2）逻辑运算符是对布尔值类型的数据进行逻辑组合运算，返回值为布尔值

（3）示例：

代码：![b9c653f6fae247d89646155529fc34ab.png][]

结果：![d1863c4b889c452c90ecdad4fc82fc78.png][]

### 3.6 逻辑控制语句 ###

#### 3.6.1 if条件语句 ####

**（1）单分支if条件语句**

if(条件表达式)\{

操作语句；

意思是如果条件表达式结果为true，则执行操作语句，否则跳过

**（2）双分支if条件语句**

if(条件表达式)\{

操作语句1；

\}else\{

操作语句2；

意思是如果条件表达式结果为true，则执行操作语句1并跳出语法体，否则执行操作语句2

**（3）多分支if条件语句**

if(条件表达式1)\{

操作语句1；

\}else if(条件表达式2)\{

操作语句2；

\}else\{

操作语句3；

意思是如果条件表达式1结果为true，则执行操作语句1并跳出语法体，否则判断条件表达式2,如果条件表达式2结果为true，则执行操作语句2并跳出语法体，否则执行条件语句3。

注意：在多分支If语句中，else也是可以省略的

#### 3.6.2 switch条件语句 ####

switch(表达式)\{

case 常量1：

操作语句1;

break；

case 常量2：

操作语句2；

break；

default：

操作语句3；

示例：![d0460396ed01425f947714738c94dec8.png][]

结果：![87eb89aa81d64e93aa95e9272442aaa7.png][]

注意：①break语句不能遗漏，否则会按顺序执行语句

②default语句可以省略

③所有可以用switch语句实现的功能都可以使用if语句实现，但if语句可以实现的功能，  
用switch语句不一定能实现，所以很少使用switch语句，唯一的优点是代码量较少。

#### 3.6.3 for循环语句 ####

for(语句1；语句2；语句3)\{

循环体；

其中：语句1的内容为设置初始变量的值；语句2的内容为判断退出循环的条件，每次进入循  
环体之前都会判断一次，True进入，False则退出循环；语句3的内容为每次循环结束  
后的操作

三种语句都可以省略，但一定要避免死循环！

示例：![2f75214a679049f4b794db15771d6395.png][]

结果：![a9dfd22a9e9841c1b2c9fccea2061a38.png][]

#### 3.6.4 while循环语句 ####

while(表达式)\{

循环体；

相比于for循环语句，while循环只有判断何时继续循环的表达式，因此需要注意避免死循环

示例：![4ab2f7156ef0469f8714641b558e1180.png][]

结果：![9344e74b57014ca0bab3793868c9b643.png][]

#### 3.6.5 for-in遍历语句 ####

for(i in 可遍历对象)\{

循环体；

当可遍历对象为数组时，实际上时对for循环语句的简写

示例：![56cdb7215fb347129198f412916e2a66.png][]

结果：![7a5f194404e24fab897dc59aab38c4a2.png][]

当可遍历对象为object时，i此时为对象每个属性名

示例：![4fb2079b5a424471a76ca03ab3800ef4.png][]

结果：![3b71f19630c641ba9e0751ba133ca07a.png][]

### 3.7 注释 ###

（1）在代码前加//后，此行代码会变成注释（不会被浏览器解析）

（2）多行注释以 /\* 开始，以 \*/ 结束，符号 /\*…… \*/ 指示中间的语句是该程序中的注释

（3）使用Ctrl+/ 快捷键可以进行快速注释

### 3.8 输入与输出 ###

#### 3.8.1 输入 ####

可以使用prompt()来输入值

示例：![6e83ae89acb54b17bcc44853ed049dba.png][]

结果：![f08c3d6285cf41159683ab55b927565f.png][]

![66f57b9ffe4f4314b2cc94ac5f0cd60d.png][]

点击确定后

![0e214c637f0447839dc8fa8842170878.png][]

## 4.函数 ##

### 4.1函数概述 ###

**（1）定义：**完成特定任务的代码语句块  
**（2）使用方式：**直接使用  
**（3）分类：**系统函数和自定义函数

### 4.2 常用的系统函数 ###

#### 4.2.1 parseInt(str) ####

将字符串转换为整数类型

代码：![6c3812e66c4f46ee9ca3f99795cae020.png][]

结果：![a8e9bb113e3448bda79d1ee930dfbb49.png][]

注意当字符串开头不为数字时，会返回NaN，如果字符串开头为整数后面有其他字符，则会返回开头的数字部分

#### 4.2.2 parseFloat(str) ####

将字符串转换为小数类型

代码：![579ca31d3e2a455d8a8d0fb267274933.png][]

结果：![8405bbe21e6d4571b4785b3b2aa32a89.png][]

注意，与parseInt()一样，当字符串开头不为数字时，会返回NaN，如果开头是合法的浮点数，之后有其他部分，则会返回开头的浮点数部分

#### 4.2.3 isNaN() ####

判断数据类型是否是非数据类型，返回值为布尔值

代码：![82c716604a98458993b212b16fc096dd.png][]

结果：![08f22b08743d4ab78c88d42f4aece209.png][]

### 4.3 自定义函数 ###

#### 4.3.1 创建函数 ####

（1）使用关键词function()\{函数体\}来创建函数

（2）命名函数的方法

① function fname()\{函数体\}

②var fname=function()\{函数体\}

#### 4.3.2 无参函数 ####

示例：![414c07406d614cc780cd143fa0e074a0.png][]

![19bb317fdf1a4a6ebd3f3501fca6c34a.png][]

结果：![1cf457e23ab44c0db142be90f43a0b5b.png][]

#### 4.3.3 有参函数 ####

示例：![afa45cd60d9049858a0702837a02e888.png][]

![570ab45c78eb4da9a9f04ec85cd551f2.png][]

结果：![c0e7016c5f9148bbac364d2cf36eca2b.png][]

[a66f1c6bf14549d6b4cd1a05fe44046b.png]: https://img-blog.csdnimg.cn/a66f1c6bf14549d6b4cd1a05fe44046b.png
[c6e1d3c6dc434be0b2e8f5d79c90efb9.png]: https://img-blog.csdnimg.cn/c6e1d3c6dc434be0b2e8f5d79c90efb9.png
[2d8d398a27264a91b6d96be1e2b3dc49.png]: https://img-blog.csdnimg.cn/2d8d398a27264a91b6d96be1e2b3dc49.png
[95d0657717c84a298fb294c5a59933c2.png]: https://img-blog.csdnimg.cn/95d0657717c84a298fb294c5a59933c2.png
[896de5ec58e445499989237d0be7d0ac.png]: https://img-blog.csdnimg.cn/896de5ec58e445499989237d0be7d0ac.png
[cb204241db5b4a11a6e10dec58e854d2.png]: https://img-blog.csdnimg.cn/cb204241db5b4a11a6e10dec58e854d2.png
[6f6d3e5d22634e01aa1068bb5aea7d98.png]: https://img-blog.csdnimg.cn/6f6d3e5d22634e01aa1068bb5aea7d98.png
[db806f0e2462413ea1d3bf0342f6f8e7.png]: https://img-blog.csdnimg.cn/db806f0e2462413ea1d3bf0342f6f8e7.png
[0482f95155d84a63be8fce86dc4e4c4c.png]: https://img-blog.csdnimg.cn/0482f95155d84a63be8fce86dc4e4c4c.png
[3f4b3645b9d84ceab670ae2f2feb222f.png]: https://img-blog.csdnimg.cn/3f4b3645b9d84ceab670ae2f2feb222f.png
[0388e5acb5604dada6c94920951eac5f.png]: https://img-blog.csdnimg.cn/0388e5acb5604dada6c94920951eac5f.png
[21a9329ab44e44f5b70c9e0f14d3ffc9.png]: https://img-blog.csdnimg.cn/21a9329ab44e44f5b70c9e0f14d3ffc9.png
[999121133fdf480eb16b1f3ebd3abe4e.png]: https://img-blog.csdnimg.cn/999121133fdf480eb16b1f3ebd3abe4e.png
[c1a2ca27c0ca42c98a7e4824b8f301e0.png]: https://img-blog.csdnimg.cn/c1a2ca27c0ca42c98a7e4824b8f301e0.png
[b88fe3d3eb8c4e7e8e73fcef28cc1654.png]: https://img-blog.csdnimg.cn/b88fe3d3eb8c4e7e8e73fcef28cc1654.png
[98fc509828b1426a81e63f3422607dfa.png]: https://img-blog.csdnimg.cn/98fc509828b1426a81e63f3422607dfa.png
[1398f80c88404db5b7714bcb524b62a1.png]: https://img-blog.csdnimg.cn/1398f80c88404db5b7714bcb524b62a1.png
[7c864ccdc1114ea1bf1e08b9131c4ffb.png]: https://img-blog.csdnimg.cn/7c864ccdc1114ea1bf1e08b9131c4ffb.png
[f9764dd010f245748b98d7ebee638d96.png]: https://img-blog.csdnimg.cn/f9764dd010f245748b98d7ebee638d96.png
[618b703fa12c46c6ae095217711b50d8.png]: https://img-blog.csdnimg.cn/618b703fa12c46c6ae095217711b50d8.png
[41e04ba68152489b910de0fe2b49abed.png]: https://img-blog.csdnimg.cn/41e04ba68152489b910de0fe2b49abed.png
[d58ea2941be1478f87d79b9cf4df4613.png]: https://img-blog.csdnimg.cn/d58ea2941be1478f87d79b9cf4df4613.png
[5ad4feb9255a428eb0f9a3bc8225187a.png]: https://img-blog.csdnimg.cn/5ad4feb9255a428eb0f9a3bc8225187a.png
[3e1a096a56b147fb8d6cd020d7d7e256.png]: https://img-blog.csdnimg.cn/3e1a096a56b147fb8d6cd020d7d7e256.png
[5b5443c3c3d446d5a901f9760108ebef.png]: https://img-blog.csdnimg.cn/5b5443c3c3d446d5a901f9760108ebef.png
[e73332f587674600939ac33322f23fd3.png]: https://img-blog.csdnimg.cn/e73332f587674600939ac33322f23fd3.png
[db5a59b39da24bb1a1ce3dcde188d427.png]: https://img-blog.csdnimg.cn/db5a59b39da24bb1a1ce3dcde188d427.png
[5653f95bb22b43548255a9af68ae06c5.png]: https://img-blog.csdnimg.cn/5653f95bb22b43548255a9af68ae06c5.png
[5ad9a370abdd49418b2fa3f7a9f72d07.png]: https://img-blog.csdnimg.cn/5ad9a370abdd49418b2fa3f7a9f72d07.png
[223c2a53908f441490d2598cd66f6526.png]: https://img-blog.csdnimg.cn/223c2a53908f441490d2598cd66f6526.png
[b9c653f6fae247d89646155529fc34ab.png]: https://img-blog.csdnimg.cn/b9c653f6fae247d89646155529fc34ab.png
[d1863c4b889c452c90ecdad4fc82fc78.png]: https://img-blog.csdnimg.cn/d1863c4b889c452c90ecdad4fc82fc78.png
[d0460396ed01425f947714738c94dec8.png]: https://img-blog.csdnimg.cn/d0460396ed01425f947714738c94dec8.png
[87eb89aa81d64e93aa95e9272442aaa7.png]: https://img-blog.csdnimg.cn/87eb89aa81d64e93aa95e9272442aaa7.png
[2f75214a679049f4b794db15771d6395.png]: https://img-blog.csdnimg.cn/2f75214a679049f4b794db15771d6395.png
[a9dfd22a9e9841c1b2c9fccea2061a38.png]: https://img-blog.csdnimg.cn/a9dfd22a9e9841c1b2c9fccea2061a38.png
[4ab2f7156ef0469f8714641b558e1180.png]: https://img-blog.csdnimg.cn/4ab2f7156ef0469f8714641b558e1180.png
[9344e74b57014ca0bab3793868c9b643.png]: https://img-blog.csdnimg.cn/9344e74b57014ca0bab3793868c9b643.png
[56cdb7215fb347129198f412916e2a66.png]: https://img-blog.csdnimg.cn/56cdb7215fb347129198f412916e2a66.png
[7a5f194404e24fab897dc59aab38c4a2.png]: https://img-blog.csdnimg.cn/7a5f194404e24fab897dc59aab38c4a2.png
[4fb2079b5a424471a76ca03ab3800ef4.png]: https://img-blog.csdnimg.cn/4fb2079b5a424471a76ca03ab3800ef4.png
[3b71f19630c641ba9e0751ba133ca07a.png]: https://img-blog.csdnimg.cn/3b71f19630c641ba9e0751ba133ca07a.png
[6e83ae89acb54b17bcc44853ed049dba.png]: https://img-blog.csdnimg.cn/6e83ae89acb54b17bcc44853ed049dba.png
[f08c3d6285cf41159683ab55b927565f.png]: https://img-blog.csdnimg.cn/f08c3d6285cf41159683ab55b927565f.png
[66f57b9ffe4f4314b2cc94ac5f0cd60d.png]: https://img-blog.csdnimg.cn/66f57b9ffe4f4314b2cc94ac5f0cd60d.png
[0e214c637f0447839dc8fa8842170878.png]: https://img-blog.csdnimg.cn/0e214c637f0447839dc8fa8842170878.png
[6c3812e66c4f46ee9ca3f99795cae020.png]: https://img-blog.csdnimg.cn/6c3812e66c4f46ee9ca3f99795cae020.png
[a8e9bb113e3448bda79d1ee930dfbb49.png]: https://img-blog.csdnimg.cn/a8e9bb113e3448bda79d1ee930dfbb49.png
[579ca31d3e2a455d8a8d0fb267274933.png]: https://img-blog.csdnimg.cn/579ca31d3e2a455d8a8d0fb267274933.png
[8405bbe21e6d4571b4785b3b2aa32a89.png]: https://img-blog.csdnimg.cn/8405bbe21e6d4571b4785b3b2aa32a89.png
[82c716604a98458993b212b16fc096dd.png]: https://img-blog.csdnimg.cn/82c716604a98458993b212b16fc096dd.png
[08f22b08743d4ab78c88d42f4aece209.png]: https://img-blog.csdnimg.cn/08f22b08743d4ab78c88d42f4aece209.png
[414c07406d614cc780cd143fa0e074a0.png]: https://img-blog.csdnimg.cn/414c07406d614cc780cd143fa0e074a0.png
[19bb317fdf1a4a6ebd3f3501fca6c34a.png]: https://img-blog.csdnimg.cn/19bb317fdf1a4a6ebd3f3501fca6c34a.png
[1cf457e23ab44c0db142be90f43a0b5b.png]: https://img-blog.csdnimg.cn/1cf457e23ab44c0db142be90f43a0b5b.png
[afa45cd60d9049858a0702837a02e888.png]: https://img-blog.csdnimg.cn/afa45cd60d9049858a0702837a02e888.png
[570ab45c78eb4da9a9f04ec85cd551f2.png]: https://img-blog.csdnimg.cn/570ab45c78eb4da9a9f04ec85cd551f2.png
[c0e7016c5f9148bbac364d2cf36eca2b.png]: https://img-blog.csdnimg.cn/c0e7016c5f9148bbac364d2cf36eca2b.png