1.1初识JavaScript ——JS

约定不等于承诺〃 2023-09-29 09:34 13阅读 0赞

**目录**

1.认识JS

1.1JavaScript （JS）是什么？

1.2 JS的作用

1.3 HTML/CSS/JS 的关系

1.4 浏览器执行JS

1.5 JS的组成

1.6 Js书写位置

1.7 JS注释

1.8 Js 输入输出语句

2. 变量

2.1 变量的理解和存储

2.2 变量的使用

2.3 变量语法拓展

2.4声明变量的特殊情况

2.5 变量的命名规范

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

## 1.认识JS ##

### 1.1JavaScript （JS）是什么？ ###

> 1.JS是一种运行在客户端的脚本语言。
> 
> 2.脚本语言不需要编译，在运行过程中有JS解释器（JS引擎）逐行来解释并执行
> 
> （通俗的说就是 读一行，翻译一行 ）
> 
> 3.现在也可以基于Node,js技术进行服务器端编程。

### 1.2 JS的作用 ###

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>JS的作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1，表单动态效验（密码强度检测，JS最初产生的目的）</td> 
  </tr> 
  <tr> 
   <td>2，网页特效</td> 
  </tr> 
  <tr> 
   <td>3，服务端开发（Node.js）</td> 
  </tr> 
  <tr> 
   <td>4，桌面程序</td> 
  </tr> 
  <tr> 
   <td>5，App</td> 
  </tr> 
  <tr> 
   <td>6，控制硬件—物联网</td> 
  </tr> 
  <tr> 
   <td>7，硬件开发</td> 
  </tr> 
 </tbody> 
</table>

### 1.3 HTML/CSS/JS 的关系 ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA_size_17_color_FFFFFF_t_70_g_se_x_16][]

### 1.4 浏览器执行JS ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA_size_13_color_FFFFFF_t_70_g_se_x_16][]

### 1.5 JS的组成 ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA_size_14_color_FFFFFF_t_70_g_se_x_16][]

### 1.6 Js书写位置 ###

JS有三种书写位置，分别为行内，内嵌和外部。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA_size_17_color_FFFFFF_t_70_g_se_x_16 1][]

### 1.7 JS注释 ###

> 1，//单行注释 vs code 中快捷键 ctrl+l
> 
> 2，/\*多行注释\*/ 快捷键 shift+alt+a

### 1.8 Js 输入输出语句 ###

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
   <th>归属</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>aleart</td> 
   <td>浏览器弹出警示框</td> 
   <td>浏览器</td> 
  </tr> 
  <tr> 
   <td>console.log</td> 
   <td>浏览器控制台打印输出信息</td> 
   <td>浏览器</td> 
  </tr> 
  <tr> 
   <td>prompt(info)</td> 
   <td>弹出输入框，用户可以输入</td> 
   <td>浏览器</td> 
  </tr> 
 </tbody> 
</table>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA_size_14_color_FFFFFF_t_70_g_se_x_16 1][]

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

## 2. 变量 ##

### 2.1 变量的理解和存储 ###

> 1）变量用于存放数据的容器
> 
> 通过变量名获得数据，甚至数据可以修改
> 
> 2）变量在内存中的存储
> 
> 本质：变量是程序在内存中申请一块用来存放数据的空间

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA_size_9_color_FFFFFF_t_70_g_se_x_16][]

### 2.2 变量的使用 ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA_size_11_color_FFFFFF_t_70_g_se_x_16][]

> 1）声明变量 //声明变量
> 
> var age：//声明一个名称为age的变量
> 
> var是JS的关键字，用来申明变量
> 
> age是变量名，通过变量名来访问内存中分配的空间
> 
> 2）赋值 变量初始化
> 
> var age=18；

### 2.3 变量语法拓展 ###

> 1)更新变量（就是变量被重新赋值，原有值会被覆盖）
> 
> var age=18；
> 
> age=81；
> 
> 2）可以同时声明多个变量 （注意分隔要使用逗号）
> 
> var age=18，
> 
> address='我是个程序员'，
> 
> gz=188;

### 2.4声明变量的特殊情况 ###

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>情况</th> 
   <th>说明</th> 
   <th>结果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p>var sex?</p> <p>console.log(sex)</p> </td> 
   <td>只声明不赋值</td> 
   <td>undefined(未定义)</td> 
  </tr> 
  <tr> 
   <td>console.log(tel)</td> 
   <td>不声明，不赋值，直接使用</td> 
   <td>报错&nbsp;</td> 
  </tr> 
  <tr> 
   <td> <p>qq=110;</p> <p>console.log(qq);</p> </td> 
   <td>不声明，只赋值</td> 
   <td> <p>110</p> <p>（可以使用，但不建议）</p> </td> 
  </tr> 
 </tbody> 
</table>

### 2.5 变量的命名规范 ###

> 1） 由字母（A-ZA-z），数字（0-9），下划线（\_），美元符号（$）组成
> 
> 2）不能以数字开头， 18Age错误
> 
> 3）变量名必须有意义（最好是单词）
> 
> 4）name 不要随便乱用
> 
> 等等 ------

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

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/592b0e5a30214f6989cca64cefa7e615.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/a0a4061b71a24dfcaba8c98aa108b58d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/12f98927e94b46d1811ce120f637e25b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/84dbd7a29c874c46aca632f0d24f0cea.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA_size_17_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/a3bd5b372e3c494ab3acd5b8c9f1417f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA_size_14_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/5ad7df09b8784e3e915dc8af11d03a4c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA_size_9_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b06655a219074424a16b45f3f6b58e3d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA,size_9,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA_size_11_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/77a2f4b902eb42b48612ab5c3f2cd3fb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b-r5Yiw6ZSF6YeM5p2l5ZGA,size_11,color_FFFFFF,t_70,g_se,x_16