JavaScript入门学习笔记（一）

阳光穿透心脏的1/2处 2024-04-23 15:31 70阅读 0赞

**目录**

一、一些前置知识

1、JS 和 HTML 和 CSS 之间的关系

2、JS 的书写形式

?内嵌式

?行内式

?外部式

?扩展

?js的输入输出

二、JS的基础语法

?数据类型

?运算符

?数组

1、创建数组

?打印数组

?获取数组元素

?JS数组中的一些操作

?函数

1、函数的简单使用

2、函数表达式

3、作用域

?JS对象

1、对象的创建和使用

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

## 一、一些前置知识 ##

## 1、JS 和 HTML 和 CSS 之间的关系 ##

![0dadb2e30242486080103369f5fb2a3f.png][]

>  *   **HTML: 网页的结构(骨)**
>  *  **CSS: 网页的表现(皮)**
>  *  **JavaScript: 网页的行为(魂)**
> 
> ![655756732eef479b8e563ec55cfbd662.png][]
> 
> HTML写出来的代码，就相当于是页面的框架，相当于是“骨”。  
> CSS 就是在 HTML 的基础上，进行装饰，相当于套了一层“皮”，使其页面变得好看。  
> 但是 此时的页面，仍是一个静态的！  
> 当我们加入了JS之后，我们就相当于给网页赋予了灵魂。  
> 所谓的灵魂，就是指的交互性。
> 
>   
> **其目的，就是让网页不再是一个 纯粹静态的、干巴巴的、不动的一个东西了。  
> 而是会和程序员进行一些交互。  
> 就是我们在页面中进行操作，页面也给予我们一定的反馈**。  
> 所以，这个时候，彼此之间就会出现一个动态变换的过程  
>

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

### 2、JS 的书写形式 ###

#### ?内嵌式 ####

>     <!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>
>       
>       
>       
>        <script>
>           console.log("这是一个console输出，输出在控制台，给程序员看，调试js代码的重要手段");
>           alert("一个弹窗");
>        </script>
>      
>     </body>
>     </html>
> 
> ![7771922d165f46158c5727c5a4dc0332.png][]

#### ?行内式 ####

> **把js写到HTML元素的内部**
> 
>     <!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>
>       
>        <div onclick="alert('点了')">点我试试</div>
>        <button onclick="alert('这是你通过按钮点击的结果')">这是一个按钮</button>
>      
>     </body>
>     </html>
> 
> ![e040edb7e9844521936cfa1501575268.png][]

####  ####

#### ?外部式 ####

> 把js代码单独写到一个.js文件中，再通过script()标签来引入
> 
> ![73d248906b60475a99aeef0b5b98df96.png][]

#### ?扩展 ####

**如果script标签中，既有src属性(外部连接js），内部又有js代码（内嵌式），执行时会发生什么呢？两个js代码都会执行吗？**

那么就让我们执行下面的代码

![9cfbbdd845e54041a878aed7d5bb2a69.png][]

执行结果

![c6a8073c1a6644b3852fa213ddd075d7.png][]

所有我们只能把他拆分为两个script标签，来分别执行。

![2b1d8f484f0046918c2417bddc8b3553.png][]

#### ?js的输入输出 ####

输入：prompt——弹出一个输入框

> ![在这里插入图片描述][042c089c638a4f8d97bac4d6b1d83ed4.png]
> 
> **因为我们可以接着input标签来进行输入（借助用户点击按钮来进行输入）**
> 
> **所以我们在实际开发中很少会用到他**

输出：alert和console.log

**alert(输出弹窗，我们刚才用的就是他）**

![在这里插入图片描述][2f21fc60a1aa48e5b705a318b340fad4.png]

**console.log(我们开发中，最常用的一种输出方式（方便调试）**

![ccc8d887758b4d4e9d796461386a0ea8.png][]

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

## **二、JS的基础语法** ##

### **?数据类型** ###

### ![53fbaf8be52e41b7866d9c6271208cb8.png][] ###

![2fbb6c871370474394015255dba40a27.png][]

![63050735908d4135a55f94ca76699ecd.png][]

![68adde0c90204f92b962a452e7e0b17a.png][]

**那么接下来我们重点看，这些数据类型和java有什么不同**

**不同点1**

![525b0ff4d00b4ab89ba8fed65f7339bb.png][]

那么这样就引入了我们动态和静态的概念

![15832acd00a6468db312c380ef97516f.png][]

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

**不同点二**

![dc55b08bb08f4ee0ac23d9ae7d737aa9.png][]

**通过这，就引入了强弱类型的概念**

![0a7efda8bb09455ea0ef4d473a1cf035.png][]

那么通过对强弱和静态动态的区分，就有这样一张图

![92c059138a464c51a90368a4ee477c0f.png][]

下面我们来举例说明

>  *  **python 强类型+动态类型，不太支持隐式类型转换，但运行过程中类型可以发生改变，**根据赋值的类型不同，变量就成了不同的类型。比如说，a本来是一个整数类型，但之后还可以把一个字符串赋值给a, a就变成了字符串类型
>  *  **c是弱类型，静态类型——支持隐式类型转换，运行中类型不改变**
>  *  java是强类型，静态类型——不支持隐式类型转换，类型不会发生改变

那么说到了强弱、静态和动态，那么到达哪种类型好呢？

>  *  业**内共识是强类型比较好——检查的越严格也好，避免出粗**，
>  *  静态类型——编译器可以做更严格的检查，代码更严谨，更容易发现问题
>  *  动态类型——表达能力更强，可以快速开发，但如果代码规模大了，开发团队规模也大了，就难以维护了

不同点三

![2d77fc442f1c4f74a0e758dd0493781c.png][]

**一点补充**

> 随着时间推移，关于 JS 变量的类型，出现了一个新的类型 let。  
> **而且，现在更倾向于 使用 let 来 代替 var。**  
> 下面，我们就来看一下 let 的效果。
> 
> ![在这里插入图片描述][ecb1681115b54747b64e5fb7eefa273b.png]
> 
> **从效果上来看，var 和 let 的效果是一样的。  
> 但是我们更倾向于使用 let ，为什么呢**？  
> 这是因为 var 是 旧版本（早期的设计），有很多的地方，其实是违背直觉的！  
> 比如，下面的这个例子
> 
> ![8ae19b15d726494a9e5521c5838c6d3f.png][]
> 
> 得出结论： var定义的变量，并不会收到大括号的限制。【作用域不会被限制】  
> 我们再来看下面 let 定义的变量 的表现。
> 
> ![f99cf19f795b4203964ff59982407c75.png][]
> 
> var 和 let，还有很多的一些小细节。  
> 这里就不一样列举了。  
> **总得来 let 要比 var 更符合我们程序员的直觉。**

### **?运算符** ###

**JS和运算符有很多是和java是相似，这里我们就不再一一列举，下面我们只说不同点**

**不同点1**

![30d5c0d79f4c425c8cefe331a616b14b.png][]

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

**不同点2**

> **重点在于，比较 相等/不相等 的 符号。  
> JS中比较相等的符号，有两种：  
> == 和 ===  
> 不相等的符号也有两种：  
> != 和 !==**
> 
> **== 和 != 是一组风格、  
> === 和 !== 是一组风格。  
> ————————————————**
> 
>   
> **先说， == 和 != 这一组。  
> 只是比较两个变量的值，不比较 两个变量的类型。  
> 如果两个变量能够通过隐式类型转换，转换相同的值，  
> 那么，此时就认为 两个变量 是相等的。  
>    
> 再来看，=== 和 !== 这一组。  
> 既要比较 两个变量的值，又要比较两个变量的类型。  
> 如果类型不相同，就直接认为两个变量不相等。  
> 比较的过程中，就不存在隐式类型转换的说法。**  
>   
>

**?栗子**

![94d98a25c93248498eeb0407f98ab2b7.png][]

注意哦！这里和 java的 equals 是不一样的！  
**在java中，重写后的equals 是 比较值。  
重写前的equals和== 是比较身份——在内存中的储存位置**

而且 equals 涉及到对象的比较。  
**谈到对象的比较，有三个维度的比较**  
1、比较身份（比较地址，看是不是同一个对象）【JS中没有比较身份的函数】  
2、比较值（标对对象中存储的数据是否相同）  
3、比较类型（两个对象的类型是否是同一个类型）  
   
在Java中的 instanceOf 就是比较类型的。  
————————————————

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

### ?数组 ###

温馨提示，JS的数组与java、c中的传统数组相比，是有很大差异的——这可能会颠覆你以往对数组的认知

#### 1、创建数组 ####

![35fb6948bd6f421a8da8e7bdcb22e1eb.png][]

> 此外我们的JS数组，还可以这么写
> 
> ![14a0b3b3f0204beaaaaaecb31a281680.png][]

> **什么类型的元素，都可以往里面放。**
> 
> > 这是 Java 普通数组所做不到的，需要借助数据结构才能实现。  
> > 但是 一般也不是这么用，都是会指定一个类型放入数组中。  
> >    
> > 有的人可能会问：这是一个什么类型的数组？  
> > 我只能说兄弟们格局小了！
> > 
> > ![1edfc525460f4543b59c2527609ebdb8.png][]
> > 
> > 没有什么类型，这就是一个数组。  
> > 在 JS 中，只有一种数组，就叫做数组，里面的元素可以是不同类型的！  
> > 另外，JS 中数组，是不分类型的，并且无法强制要求数组只能放入一种类型的数据。  
> > 要想数组里存入的都是同一种类型的数据，就只能通过“人为”的方式去完成。  
> > 就是 你给这个数组的元素都是 同一种类型的。  
> >    
> > 而且，还没完！  
> > **JS 中数组的元素，还可以是数组类型的元素**  
> > ————————————————  
> >

#### ?打印数组 ####

**这个没什么好说的，通过console.log来打印**

#### ?获取数组元素 ####

![b1573ef2e94a4c6aa9203d8fa2f7551a.png][]

这是不是就已经很离谱了，但下面还要更离谱的

**离谱+1**

![d9d7c139e07d4fb993edd051665fa09e.png][]

**离谱+2**

![097ee961bf7d469b9c6f2863c628ac01.png][]

相信大家也能猜到，这样写其实是有一定的风险的

![f47a721bee2046dd96929f752600de20.png][]

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

#### ?JS数组中的一些操作 ####

获取数组长度

通过.length来获取，这个和Java的操作基本相同，我们刚才也一直在用

但要注意这里我们的数组长度length是可以随时更改的

![b87474c19d424a2a88b1d65dd5628ab7.png][]

**往数组中新增元素**

![16dab311807140ad912a9ddbf8f793c0.png][]

**删除+替换操作**

> JS中删除数组中的元素，所依赖的方法，非常厉害。  
> **该方法叫做 splice，这个方法，准确的说是针对 数组中的某个片段，进行替换。  
> 所以，这个方法既可以用来插入元素，又可以用来删除元素**
> 
> ![a8803525eca041a3a4a924b9b13b35c0.png][]
> 
> **代码栗子** 
> 
> ![515816f1ee6f4958bca22e97bc5a1d18.png][]**。**

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

### ?函数 ###

#### 1、函数的简单使用 ####

> 首先，大家要明白，JS中的函数（function），在 Java中 叫做 方法（Method）。  
> 注意！函数就是方法，方法就是函数，两者就是同一个东西，只是叫法不同而已
> 
> 通常情况下，我们不需要考虑这两个概念的具体区别

![15675c61f03b4c74887a53fb08387157.png][]

**a demo**

![8bda15ce1ec1487285b30c9d4eaa3717.png][]

上述代码中，有两个点需要我们注意

> **首先，我们要知道，JS是动态类型的语言，所以我们并不关注参数的类型**
> 
> 其次你会发现，好像在JS中，参数个数也没有要求
> 
> ![346d15b53a784f97b8e4526f8550d61f.png][]
> 
> 正因为如此，所以JS也不需要有泛型和重载这样的语法，但这种灵活性，往往并不是好事

有了这个特性，我们只用写一个add函数就能完成N个数相加的功能了

![370e917b62e946d3bde0397847ee80c6.png][]

那么我们如何来解决这个问题呢？

![b8dc5cd024ee4086a7d62891635f47de.png][]

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

####  **2、函数表达式** ####

>   
> **在 JS中，函数是 “一等公民”。**  
> 一等公民：一个“一等公民”的函数，函数可以像一个普通的变量一样，赋值给 其他的变量。同时，可以作为另一个函数的参数，还可以作为另一个函数的返回值。  
> 简单来说：函数和普通的变量，并没有本质区别。  
> 只不过函数这个变量，相对于普通变量来说，多了一个功能（可调用）。  
> ————————————————  
> 所谓的函数表达式，其实就是把一个函数赋值给一个变量了
> 
> ![343acf65a73c490c893c6dbc03a095d7.png][]

#### 3、作用域 ####

![41f73d2de6814b1ca40fe8b8f9ad47f8.png][]

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

### **?JS对象**  ###

> **基本概念  
> 对象，就是一些属性 和 方法的集合。**
> 
> **这个概念，与传统意义上的Java对象的概念是类似的。  
>    
> 但是有一个比较大的区别。  
> 在 Java中，我们的对象是需要先有类，然后针对类进行实例化才能产生对象。  
> 等于就是说，类就是一个模具，可以批量生产相同规格的产物。  
>  **
> 
>   
> **而在 JS 中，对象 是不依托于 类的。  
> 就是说：在 JS 中，无需借助类，就能创建一个对象。  
>    
> 另外，Java 中的类，可以视为是一种 自定义类型的类。  
> 例如： Cat 类 和 Dog 类，是两个不同类型。  
> 但是在 JS 中，所有的对象，都是一个类型【object类型】。  
> ————————————————**  
>

#### 1、对象的创建和使用 ####

> ![6ae9b83086ff4ead98bbe1ee0b15c105.png][]
> 
> 在 js 对象中，我们可以很直观的看到 js的对象是有方法 和 变量。  
> **js的对象，与其说是一个对象，不如说是一个 键值对 结构 更加合适。**  
>    
> js对象中的每个属性和方法，其实都是通过“键值对” 这样的方式来表达的。
> 
>  *  **\{\} 表示这是一个对象**
>  *  **键值对之间，采用 逗号 进行分割。**
>  *  **键和值之间，采用 冒号 进行分割。**
> 
> ** **  
> 定义出这样的一个对象之后，我们就可以采用 student.属性名 / 方法名 的方式 来进行访问了。

![2200e2410f0741208800f4b79be2e90f.png][]

[0dadb2e30242486080103369f5fb2a3f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/ec1904431e404ae3bae2dc29401626a1.png
[655756732eef479b8e563ec55cfbd662.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/6768bbd21c844b42878f405fb75dcb8a.png
[7771922d165f46158c5727c5a4dc0332.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/85f85376a5ef492f8c79b5435a9301a1.png
[e040edb7e9844521936cfa1501575268.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/fa42d3e50d1c4a99a1038210ab631abd.png
[73d248906b60475a99aeef0b5b98df96.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/5fee550d682d468393f344cb7a192bbc.png
[9cfbbdd845e54041a878aed7d5bb2a69.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/9c658eee343f4a339173360c92707d13.png
[c6a8073c1a6644b3852fa213ddd075d7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/30818f481ae84841827c5481be5d6f62.png
[2b1d8f484f0046918c2417bddc8b3553.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/ba6a78274bc444f7b6d46835e586704b.png
[042c089c638a4f8d97bac4d6b1d83ed4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/05476d1b1ea04ef091e813e42892cd9d.png
[2f21fc60a1aa48e5b705a318b340fad4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/e288016518ef4ed791bd3a5682958d37.png
[ccc8d887758b4d4e9d796461386a0ea8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/9bf9b6ae03eb4310a774ce61512ac448.png
[53fbaf8be52e41b7866d9c6271208cb8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/b2881e81c856434ca0341f6440e566f0.png
[2fbb6c871370474394015255dba40a27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/064c3d524d10470eb8a3e83d84c30422.png
[63050735908d4135a55f94ca76699ecd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/83cac204f7594c6dba1a9e8573a7367d.png
[68adde0c90204f92b962a452e7e0b17a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/a2a61461560444388db29890ed88268c.png
[525b0ff4d00b4ab89ba8fed65f7339bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/f863b29107c341cda729a242d898f3b1.png
[15832acd00a6468db312c380ef97516f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/23e3817737834c5986ed7c434a093597.png
[dc55b08bb08f4ee0ac23d9ae7d737aa9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/26009cf516464b85bfc0c741909e7db6.png
[0a7efda8bb09455ea0ef4d473a1cf035.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/85c05e0f9bad4638b59844ea63e76812.png
[92c059138a464c51a90368a4ee477c0f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/1e0f1d95714343d1bad51975ad181973.png
[2d77fc442f1c4f74a0e758dd0493781c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/24171396b8b64897a1857119e2f0bda5.png
[ecb1681115b54747b64e5fb7eefa273b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/8670be17094342948f489048e7518d28.png
[8ae19b15d726494a9e5521c5838c6d3f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/180fcda576c54588b57e2c686e80b38e.png
[f99cf19f795b4203964ff59982407c75.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/4b19dac973ad4784b6628ea7f0a7afb0.png
[30d5c0d79f4c425c8cefe331a616b14b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/117871e7fc074134aef257055f8fd936.png
[94d98a25c93248498eeb0407f98ab2b7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/dacf204b16e44de08ba5ba423778e18c.png
[35fb6948bd6f421a8da8e7bdcb22e1eb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/c04666d43edf4e8abbe9cde61406dfa5.png
[14a0b3b3f0204beaaaaaecb31a281680.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/a6077851048b45d28717593f0dc7d9cd.png
[1edfc525460f4543b59c2527609ebdb8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/c694e22c79b84004a219e41be383017e.png
[b1573ef2e94a4c6aa9203d8fa2f7551a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/a7da5cea48a041c38cada2552999d652.png
[d9d7c139e07d4fb993edd051665fa09e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/06a944bf0ad248b8958d6d0a0e7e12fc.png
[097ee961bf7d469b9c6f2863c628ac01.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/23ea9a19b72947bc9ec04826ebf330d5.png
[f47a721bee2046dd96929f752600de20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/8aef98a7f7ae49e0af191660b685796f.png
[b87474c19d424a2a88b1d65dd5628ab7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/8a174a27693e46e09a8b4763bc97e11b.png
[16dab311807140ad912a9ddbf8f793c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/1b7ebdb110b24caea70ba696e306d3b9.png
[a8803525eca041a3a4a924b9b13b35c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/db40e00f262d402f9ddda14698914c40.png
[515816f1ee6f4958bca22e97bc5a1d18.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/350161805857461e85fa5f08615c7ce2.png
[15675c61f03b4c74887a53fb08387157.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/cb5210be8c5942fe9ebb184831320354.png
[8bda15ce1ec1487285b30c9d4eaa3717.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/729e52f9ef3643a79b9b561550489f4d.png
[346d15b53a784f97b8e4526f8550d61f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/842fc6a0d8134c42884bc071ce73c5ff.png
[370e917b62e946d3bde0397847ee80c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/09509c69f649421b98e261735ca017b9.png
[b8dc5cd024ee4086a7d62891635f47de.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/d1822ae81d69477d8a4bdc5074e632d1.png
[343acf65a73c490c893c6dbc03a095d7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/2ddfc7d4457f4ee8b3911abbbb260f61.png
[41f73d2de6814b1ca40fe8b8f9ad47f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/11962c4a6bc04b4ca9a820acce035550.png
[6ae9b83086ff4ead98bbe1ee0b15c105.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/df106ced5c38434a8a5b7415f0d8d173.png
[2200e2410f0741208800f4b79be2e90f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/a4f1903e915d4ad697551bac0e777c39.png