初识JavaScript---（1）

女爷i 2024-03-16 13:12 17阅读 0赞

## 初识JavaScript———（1）！！！ ##

### 一、初识JavaScript ###

#### 1.什么是JavaScript？ ####

**JavaScript是运行在浏览器上的脚本语言，简称JS。JavaScript程序不需要我们程序员手动编译，编写完源代码之后，浏览器直接打开解释执行。并且JavaScript的”目标程序“以普通文本形式保存，这种语言都叫做“脚本语言”。**

#### 2.在HTML中怎么嵌入JavaScript代码？ ####

**比如我们实现这个功能：用户点击以下按钮，弹出对话框**

相关知识点：

**由于JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。在JS中有很多事件，其中有一个事件叫做：鼠标单击，单词为click。任何一个事件都对应一个事件句柄：叫做onclick。【注：事件和事件句柄的区别：事件句柄是在事件单词前添加一个on。】而事件句柄是HTML标签的属性存在的。如：**

`<input type="button" value="My_button" onclick="JS代码"/>`

执行原理：

**页面打开的时候，JS代码并不会执行，只是把JS代码注册到按钮的click事件上，等这个按钮发生click事件之后，注册在onclick后面的JS代码会被浏览器自动启用。**

看到这，有些同学就会疑惑了，到底怎么使用JS代码弹出对话框？

（1）第一种方式

**在JS中，有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象。window对象有一个函数，叫做alert，用法：window.alert(“ ”);这样就可以弹出消息框。**

**Demo：**

<html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>My_javascript</title>
        </head>
        <body>
            <input type="button" value="My_button" onclick="window.alert('hello JavaScript!!!')"/>
        </body>
    </html>

![在这里插入图片描述][8d3b2e30629f413fa2002eb43a1025df.png_pic_center]

**注意事项：**

*  **JS中的字符串可以使用双引号，也可以使用单引号。**
 *  **JS中的一条语句结束之后可以使用分号“;”,也可以不用。**
 *  **“window.”可以省略！**

（2）第二种方式

**第二种方式采用脚本块的方式**

**代码格式：**

**Demo：**

<html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>My_javascript</title>
        </head>
        <body>
            <script type="text/javascript">
                window.alert("hello js!!!");
            </script>
        </body>
    </html>

![在这里插入图片描述][1ecba17e99274ccbbfcc9d0d9ab98760.png_pic_center]

注意：

*  **暴露在脚本块当中的代码，在页面打开的时候执行，并且遵守自上而下的顺序依次逐行执行（并且这个代码的执行不需要事件）**

**例如，以下代码：**

**Demo：**

**执行结果：**

![在这里插入图片描述][4767272fe8f44607bc8951b82168bc94.png_pic_center]

![在这里插入图片描述][f82c73f3008f4d878f27e7c9c92a7728.png_pic_center]

**从结果我们可以看出，这个代码是有顺序的，从上自下，依次执行。**

*  **JavaScript的脚本块在一个页面当中可以出现多次，并且对出现的位置也没有要求。**
 *  *JS代码中的单行注释采用//，多行注释采用/ ····\*/，和java一样。*\*
 *  **alert函数有阻塞当前页面加载的作用。（阻挡，直到用户点击确定按钮）**

（3）第三种方式

**第三种方式就是引入外部独立的JS文件。**

Demo：

<html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>My_javascript</title>
        </head>
        <body>
            <script type="text/javascript" src="Test/1.js"></script>
        </body>
    </html>

![在这里插入图片描述][c9e220ffb00844d59d5ec48c7c41fd53.png_pic_center]

**注意事项：**

*  **引入外部独立的js文件时，js文件中的代码会遵循自上而下的顺序依次逐行执行**
 *  **Test/1.js，这个意思是，在和HTML这个文件同目录下创建的一个Test文件夹，在再Test文件夹里面创建了一个1.js文件**
 *  **在1.js文件里面写的代码就只有 `window.alert("hello js!!!");`**
 *  **`<script type="text/javascript" src="Test/1.js" />`这种方式不行，结束的script标签必须有**
 *  **如果引入外部独立的js文件时，在script代码中再写入代码，就不会被执行**
    
     *      <html lang="en">
                  <head>
                      <meta charset="UTF-8">
                      <title>My_javascript</title>
                  </head>
                  <body>
                      <script type="text/javascript" src="Test/1.js">
                          window.alert("我是脚本块里的代码");
                      </script>
                  </body>
              </html>
 *  **如果引入外部独立的js文件时，我们在script脚本块代码之外，在写一个script脚本块，再在这个脚本块里面写代码就可以**
    
     *      <html lang="en">
                  <head>
                      <meta charset="UTF-8">
                      <title>My_javascript</title>
                  </head>
                  <body>
                      <script type="text/javascript" src="Test/1.js"></script>
                  
                      <script type="text/javascript">
                          alert("我是脚本块之外的代码");
                      </script>
                  </body>
              </html>

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

### 二、JavaScript中的变量 ###

#### 1.怎么声明变量？ ####

**在JavaScript中使用这种格式声明一个变量：`var 变量名`**

#### 2.怎么给一个变量赋值？ ####

**在JavaScript中使用这种格式给一个变量赋值：`变量名 = 值`**

**JavaScript是一种弱语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。如：**

`var i = 100;`

`i = true;`

注:**在JavaScript中，当一个变量没有赋值时，系统默认赋值undefined，undefined也是一个值。**

**如果访问一个没有声明或者定义的变量，会出现错误。**

**Demo：**

![在这里插入图片描述][865dae4d37ee42108176548f56644cd5.png_pic_center]

**在网页界面，按f12或者Ctrl+Shift+C就可以查看这个界面，这个界面可以用来调试JavaScript代码，从图中我们就可以看出它说：“age is not defined”，这是一种语法错误**

**注意：如下代码**

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

### 三、JavaScript当中的函数 ###

#### 1. 初识JS当中的函数 ####

**JavaScript当中的函数类似于java当中方法，是一种可以被重复利用的代码片段。**

#### 2.如何定义一个函数？ ####

**语法格式：**

第一种方式：
    function 函数名(形式参数列表) {
    	函数体；
    }
    
    第二种方式：
    函数名 = function(形式参数列表) {
    	函数体；
    }

**注：JS当中的函数不需要指定返回值类型，返回什么类型都可以**

**举例：写一个求和函数**

**Demo：**

<html>
        <head>
            <meta charset="UTF-8">
            <title>My_javascript</title>
        </head>
        <body>
                <script type="text/javascript">
                    function sum (a,b) {
          
                        //a和b都是局部变量，也都是形式参数，变量名随意取
                        alert("sum = " + (a+b));
                    }
                    sum(10,20);
                </script>
        </body>
    </html>

![在这里插入图片描述][211a91d5eb75419da9849a22280ed772.png_pic_center]

**举例：结合按钮来调用函数**

**Demo：**

<html>
        <head>
            <meta charset="UTF-8">
            <title>My_javascript</title>
        </head>
        <body>
                <script type="text/javascript">
                    function sum (a,b) {
          
                        alert("sum = " + (a+b));
                    }
                </script>
                <input type="button" value="求和" onclick="sum(10,20);" />
        </body>
    </html>

![在这里插入图片描述][098c9e2ea02b49c2a894821d9d6d50d4.png_pic_center]

#### 3.JavaScript当中函数的重载 ####

**Demo：**

<html>
        <head>
            <meta charset="UTF-8">
            <title>My_javascript</title>
        </head>
        <body>
                <script type="text/javascript">
                    function sum (a,b) {
          
                        alert("sum = " + (a+b));
                    }
                    var ret1 = sum(10,20);
                    alert(ret1);//30
    
                    var ret2 = sum("jack");
                    alert(ret2);
    
                    var ret3 = sum();
                    alert(ret3);
                </script>
        </body>
    </html>

![在这里插入图片描述][ca0086caa37c4112973088697f4869a6.png_pic_center]

**从结果显示，对于ret1来说，sum的值就是计算a+b的和等于30；对于ret2来说，jack的值只赋给了a变量，b变量没有赋值，所以显示是undefined，再经过+的字符串连接，就显示jackundefined；对于ret3来说，由于a和b变量都没有被赋值，两个undefined的相连，就形成NaN（Not a Number），NaN也是一个具体存在的值。**

总结：**JS当中的函数在调用的时候，参数的类型、个数都没有限制。**

重载含义：**函数名一样，形参类型不同（参数个数、类型、顺序）**

**举例说明：在JS中如果两个函数的函数名重复，第二个函数会将第一个函数取代**

**Demo：**

<html>
        <head>
            <meta charset="UTF-8">
            <title>My_javascript</title>
        </head>
        <body>
                <script type="text/javascript">
                    function test1(str) {
          
                        alert("我是第一个函数！！！");
                    }
                    function test1() {
          
                        alert("我是第二个函数！！！");
                    }
    
                    test1("hello");
                </script>
        </body>
    </html>

![在这里插入图片描述][5a7e3bad50a54a81acc7887748c7080d.png_pic_center]

**在大多数小伙伴看来，应该输出的是，我是第一个函数！！！但是，由于在JS中有规定：**在JS中如果两个函数的函数名重复，第二个函数会将第一个函数取代**，所以在JS中不能有两个同名函数。**

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

### 四、JavaScript中的局部变量和全局变量 ###

全局变量：**在函数体之外声明的变量属于全局变量，全局变量的生命周期是：浏览器打开时声明，浏览器关闭时销毁，尽量少用。**

**因为全局变量会一直在浏览器的内存当中，耗费内存空间，能使用局部变量就尽量使用局部变量。**

局部变量：**在函数体当中声明的变量，包括一个函数的形参都属于局部变量，局部变量的生命周期：函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放，生命周期较短。**

**Demo：**

<html>
        <head>
            <meta charset="UTF-8">
            <title>My_javascript</title>
        </head>
        <body>
                <script type="text/javascript">
                //全局变量
                    var username = "zhangsan";
                    function findUsername() {
          
                        //局部变量
                        var username = "lisi";
                        //就近原则：访问局部变量
                        alert("username = " + username);
                    }
                    //调用函数
                    findUsername();
                    //访问全局变量
                    alert("username = " + username);
                </script>
        </body>
    </html>

**注意以下代码：**

<html>
        <head>
            <meta charset="UTF-8">
            <title>My_javascript</title>
        </head>
        <body>
                <script type="text/javascript">
                function myfunc() {
          
                    myname = "wangwu";
                }
                myfunc();
                alert("myname = " + myname);
                </script>
        </body>
    </html>
    
    //该代码执行的结果还是："myname = wangwu"

原因：**当一个变量声明时没有使用var关键字，那么不管这个变量在什么地方声明的，都是全局变量。**

**看到这里，本期博客的内容也就到此结束了，如果各位小伙伴有什么问题或者发现内容有什么错误，请后台私信。感谢观看！！！**

*路漫漫其修远兮，吾将上下而求索。*

[8d3b2e30629f413fa2002eb43a1025df.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/29c291fff1a64fe4ba87aedc63cb34cf.png
[1ecba17e99274ccbbfcc9d0d9ab98760.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1b16be8808404b8eab70e9863b2f4fb2.png
[4767272fe8f44607bc8951b82168bc94.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/69c654f4c38a47d291791d89cb5c5571.png
[f82c73f3008f4d878f27e7c9c92a7728.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1325abff5a84479eab886d003c8fe697.png
[c9e220ffb00844d59d5ec48c7c41fd53.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/30213941719b4dfc8e4cf9b10e83a3a8.png
[865dae4d37ee42108176548f56644cd5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/9512e23e5f974057b40c0571757f03d2.png
[211a91d5eb75419da9849a22280ed772.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/611112d4603d4adaa51674f36eae12de.png
[098c9e2ea02b49c2a894821d9d6d50d4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/7919571916984272aa6e6e6c116a7048.png
[ca0086caa37c4112973088697f4869a6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/60ce41f82d3042dc9703d4b95b91ac4b.png
[5a7e3bad50a54a81acc7887748c7080d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/0be5d9f551ba4f529f5b510eef6156bf.png