在 HTML 中插入 JavaScript 的主要方法，就是使用 <script> 元素， 浏览器会解释并执行其中的 JavaScript 代码。

<script>  元素的属性

async  可选  表示异步执行脚本，只对外部脚本有效  值为 “async”

charset  可选  很少用  表示通过 src 属性指定的代码的字符集，只对外部脚本有效

defer  可选  表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部脚本文件有效  值为 “defer”

src  可选  表示包含要执行代码的外部文件

type  可选  表示编码代码使用的脚本语言的内容类型（即MIME类型）默认为 text/javascript

使用 <script> 有两种方式：

1. 直接在页面中嵌入 JavaScript 代码。包含在 <script> 元素内部的 JavaScript 代码将被从上往下依次解释。在解释器对 <script> 元素内部的所有代码求值完毕前，页面中的其余内容都不会被浏览器加载或显示。

<script type="text/javascript">

    function sayHi() {

         alert("Hi!"); 
         alert("<\/script>");

    }

</script>

2. 包含外部 JavaScript 文件。外部文件只要包含通常要放在 <script> ... </script> 中的代码即可。与嵌入式 JavaScript 代码一样，在解析外部 JavaScript 文件（包括下载该文件）时，页面的处理也会暂时停止。

如果使用 src 属性制定了外部文件，则 <script> 元素必须是空的。

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

HTML 中 <script> 标签的位置

现在Web应用程序一般都把全部的 JavaScript 引用放在 <body> 元素中页面内容的后面。如

<!DOCTYPE html>

<html>

  <head>

    <title>Example HTML Page</title>

  </head>

  <body>

      ...

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

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

  </body>

</html>

延迟脚本  仅适用于外部脚本文件

使用 <script> 元素的 defer 属性，表名脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整夜页面都解析完毕后在运行。相当于告诉浏览器立即下载，但延迟执行。

<!DOCTYPE html>

<html>

  <head>

    <title>Example HTML Page</title>

  </head>

  <body>

      ...

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

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

  </body>

</html>

异步脚本  仅适用于外部脚本文件

异步脚本一定会在页面的 load 事件前执行，但可能会在 DOMConentLoaded 事件触发之前或之后执行。

<!DOCTYPE html>

<html>

  <head>

    <title>Example HTML Page</title>

  </head>

  <body>

      ...

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

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

  </body>

</html>

HTML 中使用 JavaScript的更多相关文章

  1. JavaScript高级程序设计-(1)html中使用JavaScript

    html中使用JavaScript 1.延迟脚本 script标签定义了defer属性,脚本会被延迟到整个页面都解析完毕后运行 详细内容如下: 2.异步脚本 script标签定义了async属性,as ...

  2. 在HTML中使用JavaScript元素

    script属性<script async = async charset="utf-8" defer="defer" src="index.h ...

  3. 2在HTML中使用JavaScript

    像HTML页面中插入JavaScrip的主要方法,就是使用<script>元素.HTML4.01为<script>定义了6个属性:async:可选,表示应该立即下载脚本,当不妨 ...

  4. javascript高级编程3第二章：在html中使用javascript

    2.1 <script>元素 向html页面中插入javascript的主要方法,就是使用<script>元素.这个元素被加入到正式的html规范中.html4.01为< ...

  5. JS高程2.在HTML中使用Javascript（1）

    1.使用<script>元素向HTML页面中插入Javascript HTML4.01中<script>标签有6个属性: (1)async:可选.表示立即下载脚本,不影响页面中 ...

  6. 在Swift中使用JavaScript的方法和技巧

    本文作者Nate Cook是一位独立的Web及移动应用开发者,是继Mattt大神之后NSHipster的主要维护者,也是非常知名活跃的Swift博主,并且还是支持自动生成Swift在线文档的Swift ...

  7. js002-在HTML中使用JavaScript

    js002-在HTML中使用JavaScript 2.1            <script>元素   定义了以下6个属性   async: 可选.表示应该立即下载脚本,但不妨碍页面中的 ...

  8. Javascript高级程序设计——在HTML中使用Javascript

    <script>元素 向HTML页面中插入Javascript的主要方法,就是使用<script>元素,<script>元素有六个属性: async:可选.表示应该 ...

  9. 2. javacript高级程序设计-在HTML中使用JavaScript

    1.1 <script>元素 向HTML页面中插入JavaScript的主要方法,就是使用<script>元素,<script>元素定义了一下6个元素: (1). ...

  10. js-js实现,在HTML中使用JavaScript,基本概念

    Js实现: 1.JavaScript实现的组成: 核心(ECMAScript):由ECMA-262定义,提供核心语言功能 文档对象模型(DOM)提供访问和操作网页内容的方法以及接口 浏览器对象模型(B ...

随机推荐

  1. 【HDFS API编程】从本地拷贝文件，从本地拷贝大文件，拷贝HDFS文件到本地

    接着之前继续API操作的学习 CopyFromLocalFile: 顾名思义,从本地文件拷贝 /** * 使用Java API操作HDFS文件系统 * 关键点: * 1)create Configur ...

  2. API手册（2017）

    本页存放内容: API手册. 少量教程 [旧的工具页面] (是一些旧的页面.不放在外面了,这里做个索引) http://www.cnblogs.com/qq21270/p/3538677.html 常 ...

  3. Idea spring 配置文件报红 URI is not registered

    把报错的加到如下忽略列表中

  4. windows环境下安装rabbitmq及配置可视化管理界面

    1.环境 windows7 64位 rabbitmq3.7.9 erlang10.22.先安装erlang,后安装rabbitmq.下载地址: rabbitmq http://www.rabbitmq ...

  5. sublime text3 离线安装插件方法 package control

    package control 在线安装 一般会出现各种错误 不推荐 离线安装 推荐step1: 打开package control官网https://packagecontrol.io/ step2 ...

  6. Swoft 图片上传与处理

    上传 在Swoft下通过 \Swoft\Http\Message\Server\Request -> getUploadedFiles()['image'] 方法可以获取到一个 Swoft\Ht ...

  7. django restfulwork 源码剖析

    概要: 1.restful 规范(建议); 2. django rest framework框架 内容回顾: 1.开发模式; - 普通开发模式(前后端放在一起写) - 前后端分离 好处: 后端一套,前 ...

  8. MFC新建工程中目录包含中文，资源文件打开失败

    ※尽量不适用中文,各种未知错误,嘿嘿 此方法临时解决问题,可以使程序运行,后续是否还有错误是未知数 需要修改3处位置: 1.资源文件中.rc 右键,点击“查看代码”,找到带中文的资源ID,把中文修改掉 ...

  9. ABAP 程序/接口调用其他程序的数据

    在ABAP遇到的业务场景中,可能会遇到一种情况,需要调用其他报表的数据来发送或者二次加工,这个时候又不想对源程序做大的改动.有以下几种思路解决. 1.修改源程序,将需要展示的数据存储到DB中,然后主程 ...

  10. Codeforces Round #436 C. Bus

    题意:一辆车在一条路上行驶,给你路的总长度a,油箱的容量b,加油站在距离起点的距离f,以及需要走多少遍这条路k(注意:不是往返) 问你最少加多少次油能走完. Examples Input 6 9 2 ...