JavaScript

在HTML中使用JavaScript

0.3.1 <script>元素

向 HTML 页面中插入 JavaScript 的主要方法,就是使用 <script>元素(NetScape创造的)。共有两种方式:直接在页面中嵌入 JavaScript 代码包含外部 JavaScript 文件

//直接的方式
<script type="text/javascript">
  alert("hello world!");
</script>

//引入外部文件
<script type="text/javascript" src="js/index.js"></script>

PS1:

  • 使用 引入外部文件的方式 时 <script> 标签之间不应该再包含额外的代码,即使包含也会被忽略。
  • 在 HTML 文档中可以多次使用 <script> ,浏览器会从上到下依次解析。

0.3.2 标签的位置

按照传统的做法,我们应该将 <script> 放在 head 元素中,和引入 CSS 文件放在一起。可是,这意味着全部的 JavaScript 代码都被下载、解析并执行完成后,浏览器才会开始呈现页面,而这段时间浏览器会是一片空白。为避免这个问题,把 <script> 放在页面底部依然是最好的选择。

<!DOCTYPE html>
<html>
  <head>
    <title>document</title>
  </head>
  <body>
    <p>hello world!</p>
  </body>
  <script type="text/javascript"></script>
</html>

小知识:

  • 延迟脚本:<script> 元素还有一个 defer 属性,使用这个属性后脚本会在页面全部解析完成后再运行。即 立即下载,延迟执行
    ` js

- 异步脚本:&lt;script&gt; 元素定义了 **async** 属性。使用这个属性告诉浏览器不必按顺序执行脚本(只适用于外部脚本)。也就是说 1.js 和 2.js 都会立即被下载,但 2.js 可能会在 1.js 之前执行
``` js
<script type="text/javascript" async src="1.js"></script>
<script type="text/javascript" async src="2.js"></script>

  转载请注明: 张成的博客 JavaScript

 上一篇
Java8中关于日期和时间API的20个使用示例 Java8中关于日期和时间API的20个使用示例
一、前言随着lambda表达式、streams以及一系列小优化,Java8推出了全新的日期时间API,在一下的指南中我们将通过一些简单的示例来学习如何使用新API。Java处理日期、日历和时间的方式一直为社区所诟病,将java.util.D
2018-09-13
下一篇 
JavaScript JavaScript
JavaScript是什么?JavaScript 和 ECMAScript 通常被认为表达相同的含义。实际上他们是不同的,可以用下面这张图来说明两者的关系。 一个完整的 JavaScript 包含三部分: 核心(ECMAScript)
2018-09-13
  目录