在 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. 一、Python入门

    一.语法特点: 注释规则: 单行注释:“#”作为单行注释符号(从“#”开始到换行都为注释):Alt+F3/4快捷添加/取消注释 多行注释:宝行一对三引号('''…''')或(""& ...

  2. ajax入门基础

    一.简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种用于创建快速动态网页的技术. AJAX通过在后台与 ...

  3. go语言问题集锦

    ==============================================beego框架=========================================== 1.使 ...

  4. Ajax学习笔记——基本原理

    Ajax(Asynchronous JavaScript + XML)不是语音,不是框架,也不能算是一种技术,而是一种模式.通过这种模式实现不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内 ...

  5. Win10 安装SqlServer2012 无法访问数据库

    win10系统,安装好vs2017,sqlserver2012, 在abp     执行 Update-Database 会出错 具体解决办法是SqlServer2012的1433端口没打开. 打开办 ...

  6. 深度学习原理与框架- batch_normalize(归一化操作)

    1. batch_normalize(归一化操作),公式:传统的归一化公式 (number - mean) / std, mean表示均值, std表示标准差 而此时的公式是 scale * (num ...

  7. Tomcat 启动时 SecureRandom 非常慢解决办法,亲测有效

    1.找到jre—>lib—>security 2.找到      securerandom.source=file:/dev/random 替换成:securerandom.source= ...

  8. python并发编程基础之守护进程、队列、锁

    并发编程2 1.守护进程 什么是守护进程? 表示进程A守护进程B,当被守护进程B结束后,进程A也就结束. from multiprocessing import Process import time ...

  9. MySql:SELECT 语句(四)通配符的使用

    1. LIKE 操作符 要在搜索子句中使用通配符,必须要使用 LIKE 操作符. 1)百分号通配符 最常用的通配符是百分号(%). % 表示任何字符出现的任意次数.但是 NULL 除外.可以匹配 0 ...

  10. 【STM32】临界区进入退出宏 OS_ENTER_CRITICAL() 和 OS_EXIT_CRITICAL()

    宏函数展开为: #define OS_CRITICAL_METHOD 3 #if OS_CRITICAL_METHOD == 3 #define OS_ENTER_CRITICAL() {cpu_sr ...