电脑基础 · 2023年3月13日

js学习1(入门篇)

目录

js语言定位

js使用与安全

html、css、js的运行顺序

async和defer


js语言定位

动态解释型脚本语言

动态型:体现在变量的数据类型可以是动态变化的

解释型:边运行边返回结果(不同于编译型,编译完再运行,如果编译错误无法运行)

功能:创建动态更新的内容,控制页面元素,提高用户交互式体验等等

js使用与安全

### 使用方式:
## 内联js:部分事件js可以直接作为标签属性来实现,例如:<button onlick="alter('ok')"><button>;
## 内部编写:直接在当前html的末尾创建script标签来编写js;
## 外部js文件引入:使用script:src在html末尾引入*.js;
### 使用方式推荐:
1. 少量js可以使用前两种方式,大量js应该使用外部js文件方式(方便查看维护);
2. 使用了外部js就应该坚持到底,不使用其他两种方式(当然要做好js的注释工作);
3. 当然现在还有js框架(vue,jquery等等),可以在html头部就先进行引入,以便于我们自定义js中能使用它们的语法;
### js安全:参考后面提到的【html、css、js执行顺序】

js规范

### 命名规范:
js中命名默认规范是小写驼峰体(getElementById),其他方面与其他语言相似
### 注释:
单行注释: \\ ...
多行注释:/*...*/

html、css、js的运行顺序

### 导入

最基础的是html,css依赖于html,js又用操作html和css

所以顺利的运行方式就是:html >> css >> js

<html>
    html内容。。。。
    <style></style> // 等待html加载完成
    <script></script> // 等待html、css加载完成
</html>

但是,如果我们把css和script放到html内容的开头位置

<html>
    <style></style>
    <script></script>
    html内容。。。。
</html>

就会发现js无法作用,而css在html内容之前却能正常加载,说明:

js在html中,与html内容同步加载(从上而下一次执行)
css在html中,与html内容做异步加载,且等待html加载完成之后再加载

 js学习1(入门篇)

async和defer

### async:使js加载成为了异步,使不阻碍html的加载
async针对于外部js【注意只能用于外部js】,解决了script在html加载之前的问题,如下:
<script src="my.js" async></script>
## 好处:
这样即使放在html开头也能正常加载
## 坏处:
1. 虽然不阻碍了html的加载,但如果html加载在async修饰的外部之前,则js不能完全作用于html【自己可以加载数百张图片试下】
2. 如果使用async修饰的脚本依赖于其他脚本(比如jquery),因为是异步加载如果外部js加载在jquery之前,那么就会出现错误【所以如果不依赖于其他js可以使用async这种方式,反则不要使用】

### defer:使延迟顺序加载
给多个js添加defer属性,将按照页面中出现的顺序,从上一次依次来加载完成(后面的js等待前面的加载完成)
<script src="my1.js" defer></script>
<script src="my2.js" defer></script>
<script src="my3.js" defer></script>

## 好处:
确保了js加载在html之后,且确保了各个js之间的执行顺序
## 坏处:
因为延迟带来的响应效果变慢

### 总结:
所以说一般就把js放置html末尾,这样同步加载一般不会出现问题(出现问题了就用defer)