JavaScript学习之基础知识及认识变量

女爷i 2022-10-23 06:00 201阅读 0赞

**一、认识JavaScript**

（1）浏览器分为两类：渲染引擎和JS引擎。渲染引擎负责执行HTML和CSS语言(渲染引擎被称为是内核，如Chrome中的blink)，JS引擎负责执行JavaScript语言（JS引擎又被称为“JS解释器”，如Chrome中的v8）。

（2）JavaScript是一种高级编程语言，并不能直接被浏览器执行，它需要通过JS引擎将JavaScript高级语言转换成机器语言，JS引擎将JavaScript代码进行逐句解释，JavaScript代码才可以被浏览器执行，所以JavaScript又名脚本语言。

**二、JS三部分**

(1)ECMAScript：JavaScript语法。

(2)DOM：文档对象模型，是可拓展标记语言的标准编程接口。通过DOM提供的接口可以对网页上的各种元素进行操作（大小、位置和颜色等）。

(3)BOM：浏览器对象模型，可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口（如弹出框、控制浏览器旋转、获取分辨率等）。

**三、JS的书写方法**

JS的书写方法有三种：行内式、内嵌式和外部式。

（1）行内式（易出错、特殊时使用）

下面以一个按钮打开警示窗为例展示JS行内式的书写表达：

**HTML代码：**

**效果图如下：**

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

（2）内嵌式（最常用）

下面以一个警示窗为例展示JS内嵌式的书写表达：

**HTML代码：**

**效果图如下：**

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

（3）外部式（代码量大时使用）

下面以一个警示窗为例展示JS外部式的书写表达：

**HTML代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>HOME</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <style></style>
    /*外部式:先创建一个js文件，再将js文件引入Html文件中*/
    <script src="TEST1.js"></script>
    </head>
    <body>
    </body>
    </html>

**JS代码：**

alert('大话西游')

**效果图如下：**

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

**四、JS输入输出语句**

（1）alert()——弹出警示窗：

例子如下：

**效果图：**

![在这里插入图片描述][20210314162000134.png_pic_center]  
**HTML代码：**

（2）prompt()——弹出输入框：

例子如下：

**效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA2MjkwNw_size_16_color_FFFFFF_t_70_pic_center]  
**HTML代码：**

（3）console.log()——控制台输出（用于程序员测试，当然用户也可以输入）：

例子如下：

**效果图：**

运行出来的页面是一个空格页面，我们按F12键在页面右侧就会出现以下画面：

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

**HTML代码：**

**五、JS中的变量**

变量在使用时分为两步：声明和赋值。  
声明变量的关键词使用的是var  
（1）变量的定义：用于存放数据的集合，通过变量名辨别变量以及获取数据，甚至对数据进行修改。其实，我们可以将变量理解成一个装东西的盒子。

（2）变量的使用：有两种方式。  
一种是先声明，再赋值，后输出：（不常用）  
如：

var age;//声明
    age = 20;//赋值
    console.log(age);//输出

另一种是声明并赋值再输出：（又名初始化，是最常用变量使用方法）  
如：

var age = 20;//声明并赋值
    console.log(age);//输出

（3）变量案例一：个人信息表

**案例效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA2MjkwNw_size_16_color_FFFFFF_t_70_pic_center 1]

**案例代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>HOME</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <style></style>
    <script>
        var name = '崇志';
        var age = 20;
        var sex = '男';
        var marry = '未婚';
        var nation='中国';
        console.log(name)
        console.log(age)
        console.log(sex)
        console.log(marry)
         console.log(nation)
     </script>
    </head>
    <body>
    </body>
    </html>

（3）变量案例二：弹出用户信息窗

**案例效果图：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA2MjkwNw_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][20210314172149218.png_pic_center]

**案例代码：**

（4）变量的语法拓展：

①第一种情况是：更新变量。变量值以最后赋值为准。  
**第一种情况的代码：**

var age = 12;
    age = 90;

此时age的值就变成了90。

②第二种情况是：同时声明多个变量。此时，只需要写一个var，多个变量之间用英文逗号隔开即可。  
**第二种情况的代码：**

var name = '崇志'，age=12, sex='男'，marry='未婚'；

③第三种情况是：只声明不赋值。  
**第三种情况的代码：**

var age;
    console.log(age);//undefined系统显示未定义的

**第三种情况的效果图：**  
![在这里插入图片描述][20210314173534321.png_pic_center]  
④第四种情况是：只赋值不声明。  
**第四种情况的代码：**

age=99;
    console.log(age);

**第四种情况的效果图：**  
![在这里插入图片描述][20210314173733325.png_pic_center]  
**五、变量名**  
（1）命名规范：  
①变量名只能由大小写字母、数字、下划线（\_）或美元符（$）组成。  
②不能以数字开头。  
③变量不能是关键字，如var、for、while（我们在变量名中尽量少用name，多用myName等）。  
④变量名必须有含义，如userName(用户名)。  
⑤变量名命名方法：驼峰命名法，首个字母小写，后面的单词首字母大写，如myFirstName。  
⑥变量名严格区分大小。

举例子：  
var a √ var userName √ var passWord √  
var 2 × var $name √ var pass Word ×  
var age12 √ var \_sex √ var pass\_Word √  
vae 12age × var &name × var for ×

**六、交换两个变量的值**  
这时候，我们需要使用一个临时的变量进行存储，我们将这个临时变量命名为temp。

**交换两个变量的案例效果图：**

![在这里插入图片描述][20210314181234454.png_pic_center]  
**案例代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>HOME</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <style></style>
    <script>
         var thingOne='红烧排骨';
         var thingTwo='清蒸甲鱼汤';
         var temp;
         temp=thingOne;
         thingOne=thingTwo;
         thingTwo=temp;
         console.log(thingOne);   
         console.log(thingTwo);   
     </script>
    </head>
    <body>
    </body>
    </html>

**小结：**

（1）浏览器分为哪几类?  
浏览器分为两类：渲染引擎和JS引擎。渲染引擎负责执行HTML和CSS语言(渲染引擎被称为是内核，如Chrome中的blink)，JS引擎负责执行JavaScript语言（JS引擎又被称为“JS解释器”，如Chrome中的v8）。

（2）JS分为哪三个部分？  
ECMAScript、DOM、BOM。

（3）变量是什么？  
变量是用于存放数据的集合，通过变量名辨别变量以及获取数据，甚至对数据进行修改。其实，我们可以将变量理解成一个装东西的盒子。

（4）JS的书写方法有哪几种？  
行内式、内嵌式和外部式。

（5）变量的使用有哪两种方式？  
先声明再赋值后输出、同时声明并赋值输出。

（6）变量的语法拓展有哪几种情况？  
更新变量、同时声明多个变量、只声明不赋值、只赋值不声明。

（7）变量名的命名规范有哪些？  
①变量名只能由大小写字母、数字、下划线（\_）或美元符（$）组成。  
②不能以数字开头。  
③变量不能是关键字，如var、for、while（我们在变量名中尽量少用name，多用myName等）。  
④变量名必须有含义，如userName(用户名)。  
⑤变量名命名方法：驼峰命名法，首个字母小写，后面的单词首字母大写，如myFirstName。  
⑥变量名严格区分大小。

（8）如何交换两个变量的值？  
使用一个临时的变量temp进行存储。

[20210314161315243.png_pic_center]: /images/20221023/bee7153d6c004cf79b30acb746b3d3b5.png
[20210314162000134.png_pic_center]: /images/20221023/6c61f00b7e84425ba88082e1b102a467.png
[20210314162536574.png_pic_center]: /images/20221023/15ba31369d824f7e8b9a7f5531b9c4da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA2MjkwNw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221023/414ba1e5a76b4c5c99cef132b44d1d89.png
[20210314164554846.png_pic_center]: /images/20221023/1f8558b3ec2546518e61523360108c58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA2MjkwNw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221023/9386622be2a040f79e2420be439d62f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA2MjkwNw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221023/a1a9802aaf124a889b3ad2e58ff407d5.png
[20210314172149218.png_pic_center]: /images/20221023/91f3eb97cb8e43a1962b0da9fcccf7b9.png
[20210314173534321.png_pic_center]: /images/20221023/39a69b5e581f4ea19c59c068f38d60be.png
[20210314173733325.png_pic_center]: /images/20221023/1c80b56d1d1144fc8ef6c6e2c715d350.png
[20210314181234454.png_pic_center]: /images/20221023/9061f3761798468b8f7a97b2210357f6.png