卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
首页 › 技术 › 重学 JS 之在 HTML 中使用 JavaScript

重学 JS 之在 HTML 中使用 JavaScript

坚果大叔
2019-05-27 17:52:51技术阅读数 206

重学 JS 之在 HTML 中使用 JavaScript-卖坚果的怪叔叔

1. 如何在页面中使用JavaScript

现在在HTML中使用JS 的方法主要是通过在页面插入

元素内部使用方法:

<script type="text/javascript">
    alert('abc')    
</script>

注意事项:

1、包含在 script 中的代码将依次从上往下依次执行

2、值得注意的是在js代码解析的过程中页面中其他内容将不会被加载和解析,直到该段js执行完成。

3、在书写的过程要注意,在script代码块中,不能在代码闭合标签 之前在出现闭合标签,这样会导致代码产生错误。

4、外部引用js的时候闭合标签可以省略,但是为了在IE中正确执行,建议不省略

5、如果你使用的是src引入外部js,那么在script标签之间不能再有内嵌js块

6、src引用外域js文件的时候要注意安全,因为这样可能会被替换js文件而导致安全问题。

7、js 代码块在页面中是顺序执行的,只有第一个全部执行完成之后才会顺序执行后面的。

2. 标签的位置

一般按照惯例js代码的引入应该放在 之中,但是由于 js 代码在执行的时候页面其他元素将不能被加载这样会导致页面的交互性很差,所以现在一般将js代码放在闭合标签之前,所有页面html 之后,这样可以不会因为js的加载而影响页面的加载。

<html>
    <head>
        <title>demo</title>
    </head>
    <body>
        <script type="text/javascript" src="a.js"></script>
    </body>
</html

3. 延迟脚本 defer async

defer: 脚本在执行的时候不会影响页面的构造,因为js的执行会被延迟到页面全部加载之后才运行

async: 脚本和页面的加载将同步执行。

4. 总结

在页面中使用Javascript有两种方式,一种通过src引入外部脚本,一种是在script标签之间插入js代码。

1、 使用这两种方式都需要把 type 设置 为 text/javascript

2、 在包含外部js文件的时候,必须将src 设置为指向相应文件的url

3、 所有 script 代码会按照他们在页面的顺序按序执行,只有之前的被执行完成后续的才会被执行

4、 浏览器在呈现内容之前,必须先解析html之前的script代码,所以一定要将script代码放在页面的最后

JavaScript
赞赏 赞(0)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
ES6入门之对象的新增方法
上一篇
Node.js内置模块
下一篇
今日天气
摸鱼日历
摸鱼人日历
近期文章
  • 猫🐱
  • Input 空格问题
  • Sort函数小Tips😁😃❤️😒😭😩😳
  • 🌎🌎🌎🌎🌎🌎🌎🌎🌎🌎🌎🌎
  • element-ui中的Select选择器中remote-method方法带自定义参数
归档
  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年3月
  • 2018年2月
  • 2017年12月
  • 2017年11月
  • 2017年9月
Input 空格问题
2022-06-22 10:52:44
16 0 0
Sort函数小Tips😁😃❤️😒😭😩😳
2022-06-20 15:09:29
18 0 0
element-ui中的Select选择器中remote-method方法带自定义参数
2022-05-27 16:13:19
109 2 1
CSS之GAP属性
2022-05-25 19:28:05
90 2 2
  • 0
博主

一枚佛系前端开发,会一丢丢摄影,喜欢折腾,爱好美食。分享点前端技巧、笔记以及各种有趣的APP和资源教程♥♥

友链
Lieme
公众号
西豆 崔欣 执行上下文 卖坚果的怪叔叔 集赞助手
Copyright © 2017-2022 卖坚果的怪叔叔

苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
# WordPress # # CSS #
坚果大叔
198
文章
47
评论
116
喜欢