掌握 JavaScript：从初学者到高级开发者的完整指南（一）

我不是女神ヾ 2024-04-17 10:06 95阅读 0赞

#### JavaScript 基础知识 ####

*   *  1.1 介绍
     *  1.2 引入方式
     *  1.3 基础语法
     *   *  1.3.1 书写语法
         *  1.3.2 变量
         *  1.3.3 数据类型和运算符
     *  1.4 函数
     *   *  1.4.1 第一种定义格式
         *  1.4.2 第二种定义格式

### 1.1 介绍 ###

html完成了架子，css做了美化，但是网页是死的，我们需要给他注入灵魂，所以我们需要学习JavaScript，这门语言会让我们的页面能够和用户进行交互。

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

### 1.2 引入方式 ###

同样，js代码也是书写在html中的，那么html中如何引入js代码呢？主要通过下面的2种引入方式：

**第一种方式**：内部脚本，将JS代码定义在HTML页面中。

*  JavaScript代码必须位于<script></script>标签之间。
 *  在HTML文档中，可以在任意地方，放置任意数量的<script>
 *  一般会把脚本置于<body>元素的底部，可改善显示速度。

例子：

**第二种方式**：外部脚本，将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中。

*  外部JS文件中，只包含JS代码，不包含<script>标签。
 *  引入外部js的<script>标签，必须是双标签。

例子：

注意：demo.js中只有js代码，没有<script>标签。

第一步：在VS Code中创建名为 10.JS-引入方式.html 的文件。

第二步：按照上述第一种内部脚本的方式引入js，编写如下代码：

第三步：浏览器打开效果如图所示：

![在这里插入图片描述][5c699bb4f404403ea15fff474b99d80d.png]

第四步：接下来演示外部脚本，注释掉内部脚本，然后在css目录同级创建js目录，然后创建一个名为demo.js的文件：  
![在这里插入图片描述][8ea307f5d03745ec8210ba08365d2a38.png]  
第五步：在demo.js中编写如下js内容：

alert('Hello JS2');

第六步：注释掉之前的内部脚本代码，添加<script>标签来引入外部demo.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>JS-引入方式</title>
        
        
    
        
        <script src="js/demo.js"></script>
    </head>
    <body>
    
    </body>
    </html>

第七步：浏览器刷新效果如图：

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

### 1.3 基础语法 ###

#### 1.3.1 书写语法 ####

掌握了js的引入方式，那么接下来我们需要学习js的书写了，首先需要掌握的是js的书写语法，语法规则如下：

*  区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
 *  每行结尾的分号可有可无
 *  大括号表示代码块
 *  注释：
    
     *  单行注释：// 注释内容
     *  多行注释：/\* 注释内容 \*/

我们需要借助js中3钟输出语句，来演示书写语法

<table> 
 <thead> 
  <tr> 
   <th>api</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>window.alert()</td> 
   <td>警告框</td> 
  </tr> 
  <tr> 
   <td>document.write()</td> 
   <td>在HTML 输出内容</td> 
  </tr> 
  <tr> 
   <td>console.log()</td> 
   <td>写入浏览器控制台</td> 
  </tr> 
 </tbody> 
</table>

演示如下：

浏览器打开如图所示效果：

![在这里插入图片描述][739a828709fa4035b762ab1c6491be31.png]

我们注释掉上述代码，添加代码 document.write(“hello js”); 来输出内容：

刷新浏览器，效果如图所示：

![在这里插入图片描述][7eb98b27a842456dbcb58c39e7927e87.png]

最后我们使用console.log(“hello js”); 写入到控制台，并且注释掉之前的代码：

浏览器f12抓包，去控制台页面，如图所示：

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

#### 1.3.2 变量 ####

书写语法会了，变量是一门编程语言比不可少的，所以接下来我们需要学习js中变量的声明，在js中，变量的声明和java中还是不同的。首先js中主要通过如下3个关键字来声明变量的：

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>var</td> 
   <td>早期ECMAScript5中用于变量声明的关键字</td> 
  </tr> 
  <tr> 
   <td>let</td> 
   <td>ECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效</td> 
  </tr> 
  <tr> 
   <td>const</td> 
   <td>声明常量的，常量一旦声明，不能修改</td> 
  </tr> 
 </tbody> 
</table>

在js中声明变量还需要注意如下几点：

*  JavaScript 是一门弱类型语言，变量可以存放不同类型的值 。
 *  变量名需要遵循如下规则：
    
     *  组成字符可以是任何字母、数字、下划线（\_）或美元符号（$）
     *  数字不能开头
     *  建议使用驼峰命名

代码演示：

可以看到浏览器弹出张三

![在这里插入图片描述][875cfebe3c654653a63b5587e52f4df3.png]

在js中，我们var声明的变量可以接受任何数据类型的值。并且var声明的变量的作用于是全局的，注释掉之前的代码，添加如下代码：

浏览器照样成功弹出：

![在这里插入图片描述][4127a98ca98a4e28bfa12ae16670084b.png]

而且var关键字声明的变量可以重复定义，修改代码如下：

{
        
         var x = 1;
         var x = "A";
    }
    alert(x);

浏览器弹出内容是A

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

所以在ECMAScript 6 新增了 **let**关键字来定义变量，它的用法类似于 var，但是所声明的变量，只在 let关键字所在的代码块内有效，且不允许重复声明。注释掉之前的代码，添加代码如下：

浏览器打开，f12抓包，来到控制台页面，发现报错，变量没有定义，说明let声明的变量在代码块外不生效

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

接着我们使用let重复定义变量，代码修改如下：发现idea直接帮我们报错了，说明let声明的变量不能重复定义

![在这里插入图片描述][869efecf5f3e4b738221b0318a9aae5c.png]

在ECMAScript6中，还新增了const关键字用来声明常量，但是一旦声明，常量的值是无法更改的。注释之前的内容，添加如下代码：

const pi = 3.14;
        pi = 3.15;
        alert(pi);

浏览器f12抓包，来到控制台页面发现直接报错了，

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

关于变量的讲解我们就此结束，完整代码如下：

<!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>JS-基础语法</title>
    </head>
    <body>
        
    </body>
    <script>
    
        //var定义变量
        // var a = 10;
        // a = "张三";
        // alert(a);
    
        //特点1 : 作用域比较大, 全局变量
        //特点2 : 可以重复定义的
        // {
          
        //     var x = 1;
        //     var x = "A";
        // }
        // alert(x);
    
        //let : 局部变量 ; 不能重复定义 
        // {
          
        //     let x = 1;
        //     alert(x);
        // }
        
        //const: 常量 , 不能给改变的.
        const pi = 3.14;
        pi = 3.15;
        alert(pi);
    
    </script>
    </html>

#### 1.3.3 数据类型和运算符 ####

虽然js是弱数据类型的语言，但是js中也存在数据类型，js中的数据类型分为 ：原始类型 和 引用类型，具体有如下类型

<table> 
 <thead> 
  <tr> 
   <th>数据类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>number</td> 
   <td>数字（整数、小数、NaN(Not a Number)）</td> 
  </tr> 
  <tr> 
   <td>string</td> 
   <td>字符串，单双引皆可</td> 
  </tr> 
  <tr> 
   <td>boolean</td> 
   <td>布尔。true，false</td> 
  </tr> 
  <tr> 
   <td>null</td> 
   <td>对象为空</td> 
  </tr> 
  <tr> 
   <td>undefined</td> 
   <td>当声明的变量未初始化时，该变量的默认值是 undefined</td> 
  </tr> 
 </tbody> 
</table>

代码演示：

<!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>JS-数据类型</title>
    </head>
    <body>
    
    </body>
    <script>
    
        //原始数据类型
        alert(typeof 3); //number
        alert(typeof 3.14); //number
    
        alert(typeof "A"); //string
        alert(typeof 'Hello');//string
    
        alert(typeof true); //boolean
        alert(typeof false);//boolean
    
        alert(typeof null); //object 
    
        var a ;
        alert(typeof a); //undefined
        
    </script>
    </html>

熟悉了js的数据类型了，那么我们需要学习js中的运算法，js中的运算规则绝大多数还是和java中一致的，具体运算符如下：

<table> 
 <thead> 
  <tr> 
   <th>运算规则</th> 
   <th>运算符</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>算术运算符</td> 
   <td>+ , - , * , / , % , ++ , –</td> 
  </tr> 
  <tr> 
   <td>赋值运算符</td> 
   <td>= , += , -= , *= , /= , %=</td> 
  </tr> 
  <tr> 
   <td>比较运算符</td> 
   <td>&gt; , &lt; , &gt;= , &lt;= , != , == , === 注意 == 会进行类型转换，=== 不会进行类型转换</td> 
  </tr> 
  <tr> 
   <td>逻辑运算符</td> 
   <td>&amp;&amp; , || , !</td> 
  </tr> 
  <tr> 
   <td>三元运算符</td> 
   <td>条件表达式 ? true_value: false_value</td> 
  </tr> 
 </tbody> 
</table>

在js中，绝大多数的运算规则和java中是保持一致的，但是js中的==和===是有区别的。

*  ==：只比较值是否相等，不区分数据类型，哪怕类型不一致，==也会自动转换类型进行值得比较
 *  ===：不光比较值，还要比较类型，如果类型不一致，直接返回false

在js中，虽然不区分数据类型，但是有时候涉及到数值计算，还是需要进行类型转换的，js中可以通过parseInt()函数来进行将其他类型转换成数值类型。注释之前的代码，添加代码如下：

// 类型转换 - 其他类型转为数字
    alert(parseInt("12")); //12
    alert(parseInt("12A45")); //12
    alert(parseInt("A45"));//NaN (not a number)

除此之外，在js中，还有非常重要的一点是：0,null,undefined,“”,NaN理解成false,反之理解成true。注释掉之前的代码，添加如下代码：

if(0){
         //false
        alert("0 转换为false");
     }

浏览器刷新页面，发现没有任何弹框，因为0理解成false，所以条件不成立。注释掉上述代码，添加如下代码：

if(1){
         //true
        alert("除0和NaN其他数字都转为 true");
    }

浏览器刷新，因为1理解成true，条件成立，所以浏览器效果如下；

![在这里插入图片描述][199307ce87a54bf894fdb79e1c3d42ad.png]

其他情况可以一一演示，完整演示代码如下：

// if(0){ //false
        //     alert("0 转换为false");
        // }
        // if(NaN){//false
        //     alert("NaN 转换为false");
        // }
        if(1){
         //true
            alert("除0和NaN其他数字都转为 true");
        }
    
        // if(""){ //false
        //     alert("空字符串为 false, 其他都是true");
        // }
            
        // if(null){ //false
        //     alert("null 转化为false");
        // }
        // if(undefined){ //false
        //     alert("undefined 转化为false");
        // }

流程控制语句if，switch，for等和java保持一致，此处不再演示

**需要注意的是**：在js中，0,null,undefined,“”,NaN理解成false,反之理解成true

### 1.4 函数 ###

在java中我们为了提高代码的复用性，可以使用方法。同样，在JavaScript中可以使用函数来完成相同的事情。JavaScript中的函数被设计为执行特定任务的代码块，通过关键字function来定义。接下来我们学习一下JavaScript中定义函数的2种语法

#### 1.4.1 第一种定义格式 ####

第一种定义格式如下：

function 函数名(参数1,参数2..){
        
        要执行的代码
    }

因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：

*  形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。
 *  返回值也不需要声明类型，直接return即可

如下示例：

function add(a, b){
        
        return a + b;
    }

代码演示：

但是上述只是定义函数，**函数需要被调用才能执行**！所以接下来我们需要调用函数

let result = add(10,20);
    alert(result);

查看浏览器运行结果：浏览器弹框内容如下图所示：

![在这里插入图片描述][8a97f93fe18e46598681797ca1f07509.png]

#### 1.4.2 第二种定义格式 ####

第二种可以通过var去定义函数的名字，具体格式如下：

var functionName = function (参数1,参数2..){
           
    	//要执行的代码
    }

接下来我们按照上述的格式，修改代码如下：只需要将第一种定义方式注释掉，替换成第二种定义方式即可，函数的调用不变

浏览器弹框效果和上述一致

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

我们在调用add函数时，再添加2个参数，修改代码如下：

var result = add(10,20,30,40);

浏览器打开，发现没有错误，并且依然弹出30，这是为什么呢？

因为在JavaScript中，函数的调用只需要名称正确即可，参数列表不管的。如上述案例，10传递给了变量a，20传递给了变量b,而30和40没有变量接受，但是不影响函数的正常调用。

**后记  
????美好的一天，到此结束，下次继续努力！欲知后续，请看下回分解，写作不易，感谢大家的支持！！ ???**

[d3d191f47e66428dad7f3a021e6bcce9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/d0abcfe5137a4b67b3c94a3e4027a74e.png
[5c699bb4f404403ea15fff474b99d80d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/8ad7c1e3de8a4e6b9ab3efba80c68dbf.png
[8ea307f5d03745ec8210ba08365d2a38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/52199426d3394e05acad41d6920ccab9.png
[e8b68d753611401f96efaadffc56b105.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/90ce5a6ce3da4762ba7121c196d78f0d.png
[739a828709fa4035b762ab1c6491be31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/59405fc3dc2e4cdaaa1da2868edd0b1b.png
[7eb98b27a842456dbcb58c39e7927e87.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/8f928eaf31c64de6be409dcd4fd3b5ad.png
[c1aed64f711d4e5e8a09abac391f8406.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/46b4c6102c244f90b66e0e8062149132.png
[875cfebe3c654653a63b5587e52f4df3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/325f94005088441082c547cb649a4d9c.png
[4127a98ca98a4e28bfa12ae16670084b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/64f2f65a107c496daa456d6171aaf74a.png
[2ecc712b2fa140bca529b078e470075f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/90f4e5437d534d258c120c6b8a3e00a6.png
[be6981402d8e49ad9b0db2404ef1b1c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/866d0317cd6a45eaa8f8756eb7642b5c.png
[869efecf5f3e4b738221b0318a9aae5c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/2f470565036b453baad51ad3c3b81069.png
[ae3f0ca7bfba4a50b608940f330176bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/a629a9cd5c4046d59860690042e0ed8d.png
[199307ce87a54bf894fdb79e1c3d42ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/9dbc1b21cb0542339b31f7879847d1f8.png
[8a97f93fe18e46598681797ca1f07509.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/f182ef0a7dad4fc69abcc3e55879c1aa.png
[ccd246be9e15461c9b18e0d94abb7656.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/3ed22ebbdba24e71a5a510f99f365ad6.png