JS学习课程

本是古典何须时尚 2022-09-14 09:41 137阅读 0赞

## 课程,2:00,4:30打卡2次 ##

### 基本结构 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
注意,顺序执行,可以多次执行,有两种方式，1.直接写到页面的script标签中,不推荐.也可以写在一个js文件中,然后使用script的src属性引入对应的页面,推荐这个。  
但是,不能把引入`src`（js文件）和script-alert（嵌入标签里）写在一个标签里.  
src：文件可以是.txt,但是不建议。  
PS: js不能独立运行,需要导入到网页中,.才能执行。

#### 延迟执行js文件 ####

使用script-defer属性，使js文件延迟到页面解析完毕之后再运行。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 2]![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
这样就会先显示完页面上的文字了。

#### 异步加载js文件 ####

默认，同步（串行）加载。js的大小会影响html代码解析。  
设置script-async属性,让网页边加载(js)边解析(html)  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
效果跟上面差不多。但是，**使用了该属性之后，用户就不用顾及script标签的放置位置**了，因为是两条线走的。

## 变量 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
script中的是块，各块同属一个作用域。这个作用域是全局的。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
可以声明多个变量，用逗号隔开。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 8]  
所有被声明的变量，都会被提升，在执行前获取。

#### 下面和c，python都有区别 ####

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 9]  
上面会显示1  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 10]  
上面写下：undefined2

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 11]  
注意上面，说明，只要在局部作用域定义了a（无论先后），那么全局的都将不可见。  
声明局部变量，尽量显式的进行。

#### 全局变量 ####

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 12]  
全局变量太多，会污染全局作用域，降低程序可靠性。故可以：

##### 放在一个名字空间下 #####

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 13]  
把变量追加到唯一名字空间下，降低冲突，使用可以这样：

alert(MyAPP.name.id)

##### 放在一个函数,给一个访问接口 #####

函数体内的,变量参数等,都是私有的,想开就开,想关就关。

#### 数据类型 ####

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 14]  
typeof运算符返回字符串，其中：

> null:Object  
> function()\{\} : Object

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 15]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 16]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/887027d60d2f43b4896cd9bb0749349a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/caf47361f910451882b6e750c8d3f0c3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/6286f8e627ec4dbda30ddad3469d0ae3.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/4e96c3a67dd1477981525da5439002fa.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/90a64e96a31841ee870c629517034fca.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/86f74d2d4d4b41a491cfbe04fd4d69b4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/5762cfa7c0134a21bb7472aefd2cd50d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220828/45ac19c1876c4de2a345cc078536a908.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220828/de40c43414b44c7da6d656fd98821fab.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220828/b682a82fb15b4a1daac031eee1f7bb8f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 10]: /images/20220828/3f176c158eff4b5789a1539bc5e333a0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 11]: /images/20220828/4c35e2422f1842299100532df652c37e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 12]: /images/20220828/eededebea453444eb6f2e361da9746e6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 13]: /images/20220828/1c729a0e808c4307a8aa0ce50977d23c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 14]: /images/20220828/c975cc546b0d4c4cbeb061aa363abab9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 15]: /images/20220828/8ae2efb6a19e4d21beaa15852b916482.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16 16]: /images/20220828/b6e6e2d21ac7473db9586f248883beac.png