在HTML中使用JavaScript

JavaScript要被放到Web中,就不能忽略HTML的感受。为了使HTML与JavaScript共存,大家商讨出来要让Web增加对脚本的支持。商量结果就是:使用<script>元素。

在HTML中使用<script>标签,这个标签拥有6个属性,并且这些属性都是可选的并不是必须的:

  • async--该属性只对于外部脚本的操作,表示是立刻下载脚本,但是不应该妨碍页面中的其它操作。
  • charset--指定js代码的字符集,这个属性很少人使用。
  • defer--该属性也是对外部脚本的操作,表示脚本可以延时到文档本完全加载显示以后再执行。
  • language--表示标签包含的代码是使用什么语言编写的。
  • src--表示我要引用哪个外部文件。
  • type--language的替代品,表示使用的脚本代码所使用语言的内容(MIME)类型。约定俗成的默认的type属性的值为text/javascript。

使用<script>标签的方式有两种:

  • 直接将js代码嵌入到<script>标签中
  • 使用src属性引入外部js代码

使用<script>标签嵌入js代码的语法很简单,只需要设置type属性,然后将js代码直接放在元素内部即可:

<script type="text/javascript">
     function sayHello() {
         // body...
     }
</script>    

引入外部js文件,那么只需要设置src属性的值即可。

<script type="text/javascript" src="example.js"></script>

注意:不要在使用了src的<script>标签中再包含其它js代码,因为这些新被包含进来的代码不会被解析,浏览器只会下载外部引用的代码。

因为src属性可以引入外部代码所以<script>引入来自网络中的js文件也是可行的,比如我们引入一个JavaScript框架jquery:

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

延迟脚本--defer属性的使用方式:

<script type="text/javascript" defer="defer" src="tes.js"></script>

当引入外部js代码时,如果我们使用了async属性,那么浏览器就不会让页面去等待脚本文件的下载和执行。异步脚本执行在页面load事件前,但是不能确定和DOMContentLoaded的执行属性,所以在使用async时要加载的js脚本代码中不要修改DOM的操作。

<script type="text/javascript" defer="defer" async src="tes.js"></script>
原文地址:https://www.cnblogs.com/bigbosscyb/p/11319959.html