js入门视频教程(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加载完成之后再加载async和defer
### async:使js加载成为了异步 ,使不阻碍html的加载
async针对于外部js【注意只能用于外部js】 ,解决了script在html加载之前的问题 ,如下:
## 好处:
这样即使放在html开头也能正常加载
## 坏处:
1. 虽然不阻碍了html的加载 ,但如果html加载在async修饰的外部之前 ,则js不能完全作用于html【自己可以加载数百张图片试下】
2. 如果使用async修饰的脚本依赖于其他脚本(比如jquery) ,因为是异步加载如果外部js加载在jquery之前,那么就会出现错误【所以如果不依赖于其他js可以使用async这种方式 ,反则不要使用】### defer:使延迟顺序加载
给多个js添加defer属性 ,将按照页面中出现的顺序,从上一次依次来加载完成(后面的js等待前面的加载完成)
<script src="my3.js" defer></script>## 好处:
确保了js加载在html之后 ,且确保了各个js之间的执行顺序
## 坏处:
因为延迟带来的响应效果变慢### 总结:
所以说一般就把js放置html末尾 ,这样同步加载一般不会出现问题(出现问题了就用defer)创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!