在HTML中使用javaScript

   我们知道,在一个网页中,由文本、样式及交互三部分组成,而JavaScript主要负责网页中的交互。那么如何在HTML页面中插入JavaScript呢?因为HTML5已经快速地被前端开发人员采用,所以为了遵循HTML5标准,这篇文章主要来介绍JavaScript如何在HTML中的使用,不会涉及到在XHTML中的用法。

一、<script>元素

   向HTML页面中插入JavaScript,就是使用<script>元素。它有以下几个主要常用的属性:
  • type:表示编写代码使用的脚本语言的内容类型,可以省略,表现形式是type = "text/javascript"
  • defer:使用它相当于告诉浏览器立即下载,但是延迟执行,也就是说脚本延迟到整个文档完全被解析和显示完毕之后再执行,可以省略,表现形式是defer = "defer"。它只适用于外部脚本文件,在HTML5中已经明确规定,因此支持HTML5的实现会忽略给嵌入脚本设置的defer属性。而且还有浏览器兼容等问题,所以把延迟脚本放在页面底部仍然是最佳选择。
  • async:立即异步下载外部js,js下载完毕后立即执行,不影响页面其他的操作,可以省略,表现形式是async = "async"。只有外部脚本文件可以使用,而且标记为async的脚本并不能保证按照指定它们的先后顺序执行,因此要确保两者之间不依赖。指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容,为此,建议异步脚本不要在加载之间修改DOM。
  • src:表示包含要执行代码的外部文件,可以省略,表现形式src = "main.js"

二、引入JavaScript

 在HTML中引入JavaScript有以下2两种方式:
  • 在HTML页面中书写
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert</title>
    <script type="text/javascript">
        alert("hello world!"); // 弹出消息框
    </script>
</head>
<body>
    
</body>
</html>

  • 引入外部JavaScript文件
    <script src = "main.js"></script>

三、<script>元素的位置

 按照传统的做法,所有<script>元素都应该放在页面的<head>元素中,这种做法的目的是想要把CSS、JavaScript等所有外部文件的引用都放在相同的地方,但是这样做有很大的弊端,必须等到所有的JavaScript代码都被下载、解析和执行完毕以后,才能开始呈现页面的内容,因为浏览器在遇到<body>标签时才开始呈现页面内容。如果页面有很多JavaScript代码的话,就会导致浏览器在呈现页面时出现明显的延时,所以为了避免这个问题,现代的web应用程序一般都会把JavaScript代码页面后面,即主要内容后面,</body>标签前面。

四、书写规范

  • JavaScript和HTML、CSS一样,对空格、换行、缩进不敏感。
  • 书写代码,语句结束时,分号和空格必须有一个,否则会报错,尽量分号和空格一起使用,提高可读性。

推荐阅读更多精彩内容