重学 JS 之在 HTML 中使用 JavaScript

时间 2019-11-07

标签之在 html 使用 javascript 栏目 JavaScript 繁體版

原文原文链接

注意：本文章为《重学js之JavaScript高级程序设计》系列第二章。

关于《重学js之JavaScript高级程序设计》是从新回顾js基础的学习。

1. 如何在页面中使用JavaScript

如今在HTML中使用JS 的方法主要是经过在页面插入 javascript

元素内部使用方法：html

<script type="text/javascript">
    alert('abc')    
</script>
复制代码

注意事项：

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

二、值得注意的是在js代码解析的过程当中页面中其余内容将不会被加载和解析，直到该段js执行完成。浏览器

三、在书写的过程要注意，在script代码块中，不能在代码闭合标签以前在出现闭合标签，这样会致使代码产生错误。安全

四、外部引用js的时候闭合标签能够省略，可是为了在IE中正确执行，建议不省略async

五、若是你使用的是src引入外部js，那么在script标签之间不能再有内嵌js块学习

六、src引用外域js文件的时候要注意安全，由于这样可能会被替换js文件而致使安全问题。url

七、js 代码块在页面中是顺序执行的，只有第一个所有执行完成以后才会顺序执行后面的。spa

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代码。

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

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

三、全部 script 代码会按照他们在页面的顺序按序执行，只有以前的被执行完成后续的才会被执行

四、浏览器在呈现内容以前，必须先解析html以前的script代码，因此必定要将script代码放在页面的最后

欢迎关注个人公众号【小夭同窗】