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. [转]jQuery EasyUI自定义DataGrid的Editor

    原文地址:http://www.jeasyuicn.com/post-3.html 官网datagrid的api:http://jquery-easyui.wikidot.com/document:d ...

  2. C#使用委托进行异步编程。

    首先引用MSDN中的一段话来描述一下如何使用异步方式.NET Framework 允许您异步调用任何方法. 为此,应定义与您要调用的方法具有相同签名的委托:公共语言运行时会自动使用适当的签名为该委托定 ...

  3. Jquery-获取iframe中的dom对象

    父窗口中操作iframe: $(window.frames["iframeChild"].document) //假如iframe的id为iframeChild 在子窗口中操作父窗 ...

  4. git初体验（六）git配置

    一.基本配置 看这篇Git 基本配置其实就解决很多问题了. 二.客户端配置 1.git bash 粘贴与编辑 在git bash客户端头部右键,现在属性,然后把"快速编辑模式勾选即可&quo ...

  5. MySQL忘记密码的解决方法

    1.关闭正在运行的MySQL. 2.打开DOS窗口,转到mysql\bin目录. 3.输入mysqld --skip-grant-tables回车. 4.原窗口已经不动了,再开一个DOS窗口,转到my ...

  6. CAlayer层的属性

    iOS开发UI篇—CAlayer层的属性 一.position和anchorPoint 1.简单介绍 CALayer有2个非常重要的属性:position和anchorPoint @property ...

  7. 面向对象_python

    面向对象_python 类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公用的.类变量定 ...

  8. 69.Android之天气预报app

    最近买了本书<Android第一行代码>,通篇看了下感觉不错,书本最后有个实战项目酷欧天气,闲来无事就照着敲了一遍代码,主要在请求天气接口和背景优化做了些小改动,现在来记录下. (1) a ...

  9. 【BZOJ-3196】二逼平衡树 线段树 + Splay （线段树套平衡树）

    3196: Tyvj 1730 二逼平衡树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2271  Solved: 935[Submit][Stat ...

  10. Maven配置不成功

    配置了MAVEN_HOME,新建了java文件,在d:/java/MAVEN_HOME/apach....,path下输出%MAVEN_HOME%bin,为什么cmd下mvn不行呢?因为MAVEN_H ...