js002-在HTML中使用JavaScript

2.1            <script>元素

  定义了以下6个属性

 

async: 可选。表示应该立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或者等待加载其他脚本。只对外部脚本文件有效。(异步的)

charset：可选。表示通过src属性指定的代码的字符集。

defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部脚本有效。IE7及其更早的版本也支持这个属性。（延迟，延期）

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

type：可选。可以看成是language的替代属性，表示编写代码使用的脚本语言的内同类型

<script type="text/javascript"></script>

使用<script>元素的方法有两种在：直接嵌入Javascript代码和包含外部Javascript文件

2.1.1直接嵌入Javascript代码：

<script type="text/javascript">

function sayhi(){

alert("hi~");

}

</script>

直接嵌入Javascript代码时，不要再代码中出现</script>，否则浏览器会认为那是一个结束标签，通过转义符可以解决这个问题

有问题：

<script type="text/javascript">

function sayhi(){

       alert("</script>");

}

</script>

解决问题：

<script type="text/javascript">

function sayhi(){

       alert("<\/script>");

}

</script>

2.1.2 引入外部Javascript文件

必须包含src属性，这个属性值是一个指向外部Javascript文件的链接。

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

function sayhi(){

alert("hi~");

}

</script>

2.1.3标签的位置

一般放在页面的<head>元素里面

<!DOCTYPE html>

<html>

<head>

<title>example page</title>

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

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

</head>

<body>

（内容）

</body>

</html>

放在所有内容的后面，这样浏览器在解析Javascript代码之前就把整个页面展示出来了，这样加快了打开速度。

<!DOCTYPE html>

<html>

<head>

<title>example page</title>

</head>

<body>

（内容）

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

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

</body>

</html>

2.1.4延迟脚本 defer属性 （只适用于外部文件）

在<script>元素中使用defer属性，相当于告诉浏览器立即下载，单延迟执行。（在遇到</html>元素后才执行）

<!DOCTYPE html>

<html>

<head>

<title>example page</title>

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

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

</head>

<body>

（内容）

</body>

</html>

在html文档中，要把defer属性设置为defer="defer"。

2.1.5异步脚本 async属性，用来改变处理脚本的行为，只适用于外部脚本

<!DOCTYPE html>

<html>

<head>

<title>example page</title>

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

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

</head>

<body>

</body>

</html>

第二个脚本可能会在第一个脚本之前执行，所以保证两个脚本的不相关性很重要。

在html文档中，要把sync属性设置为async="async"

2.1.6在xhtml中的用法

<script type="text/javascript">

function compare(a, b){

if (a < b) {

alert("A is less than B");

}else if (a > b) {

alert("A is greater than B");

}else{

alert("A is equal to B");

}

}

</script>

用(&lt;)  替换代码中的小于号(<)

如：if (a &lt; b)

2.2            嵌入代码与外部文件

最好适用外部文件，外部文件有以下优点：

可维护性：维护代码比较轻松

可缓存：浏览器能根据具体的设置缓存连接的所有外部Javascript文件

适应未来：

 

2.3            文档模式

    混杂模式和标准模式

2.4            <noscript>元素

   在以下集中情况中会显示出来（一般放在body中）

浏览器不支持脚本

浏览器支持脚本，但是脚本被禁用

 

2.5             

版权声明：未经作者同意，不得私自转载。http://www.cnblogs.com/lal-fighting/

js002-在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. Javascript高级程序设计——在HTML中使用Javascript

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

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

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

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

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

随机推荐

  1. SpringMVC学习--参数绑定

    spring参数绑定过程 从客户端请求key/value数据,经过参数绑定,将key/value数据绑定到controller方法的形参上.springmvc中,接收页面提交的数据是通过方法形参来接收 ...

  2. Android 判断当前屏幕是横屏还是竖屏

       记录学习 /**  * 返回当前屏幕是否为竖屏.  * @param context  * @return 当且仅当当前屏幕为竖屏时返回true,否则返回false.  */  public s ...

  3. Entity Framework Code First （三）Data Annotations

    Entity Framework Code First 利用一种被称为约定(Conventions)优于配置(Configuration)的编程模式允许你使用自己的 domain classes 来表 ...

  4. jquery读取iframe子页面和父页面的处理

    1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 ...

  5. C#-WinForm-三级联动

    三级联动 - 查询地区,选择省份自动显示该省份的市.区县 有如下一个数据库 一.写查询方法 public class ChinaData { SqlConnection conn = null; Sq ...

  6. python3 异常处理

    什么是异常 Python用异常对象(exception object)来表示异常情况.遇到错误会引发异常,如果异常对象未被处理或者捕捉,程序就会用回溯(traceback)终止执行. Raise语句: ...

  7. hadoop-MapReduce分布式计算框架

    计算框架: MapReduce:主要用于离线计算 Storm:流式计算框架,更适合做实时计算 stack:内存计算框架,快速计算 MapReduce设计理念: --何为分布式计算 --移动计算,而不是 ...

  8. [bzoj1009][HNOI2008]GT考试

    Description 阿申准备报名参加考试,准考证号为位数,他不希望准考证号上出现不吉利的数字. 他的不吉利数学有位,不出现是指中没有恰好一段等于. 可以为. Input 第一行输入.接下来一行输入 ...

  9. （转）CSS的Sprites技术

    Css Sprites 技术逐渐流行,各大网站上都可以看到它的身影. 但从本质上,Css Sprites 只是 Css 技术的一个使用小窍门,初学者也能快速上手. Css Sprites 简单解释: ...

  10. System.BadImageFormatException: 未能加载文件或程序集""或它的某一个依赖项。试图加载格式不正确的程序。

    解决方法: 1.更改程序集的生成目标平台为[Any CPU],或者针对平台进行编译. 项目右键->[属性]->[生成]->[生成目标平台] 2.尝试一下修改线程池设置为32位支持.