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. HTTP 错误 500.24 - Internal Server Error的解决方法

    错误提示: 最可能的原因:   system.web/identity@impersonate 设置为 true. 解决办法: 现在经典模式 连微软都几乎放弃了 原设想是为iis不断升级 提供的一种兼 ...

  2. 消息队列写入内容后，读出来的自动包裹了<string>标签，自定义格式化器解决该issue

    /// <summary> /// 该格式化器使输入即输出 /// </summary> public class StringFormatter : IMessageForm ...

  3. 总有一天会NB的！ SB一样的坚持会有NB一样的结果的！

    第一天: 1.背景图不显示,因为背景图片无法撑开div,所以必须自己设置div的高度哦! 2.div水平居中! A:margin-left:auto;margin-right:auto;  B: 父元 ...

  4. springMvc接受日期类型参数处理

    这个问题,也即是springMvc如何进行参数类型的转换 以把client传过来一个String类型,转换为日期类型为例: 1.controller /** * 接收日期类型参数 * 注意: * sp ...

  5. 标准Web系统的架构分层

    标准Web系统的架构分层 – 转载请注明出处 1.架构体系分层图 在上图中我们描述了Web系统架构中的组成部分.并且给出了每一层常用的技术组件/服务实现.需要注意以下几点: 系统架构是灵活的,根据需求 ...

  6. 【POJ 2774】Long Long Message 最长公共子串

    还是模板啊,手残&&打成||查错查了1h+TAT #include<cstdio> #include<cstring> #include<algorith ...

  7. javascript 对象实例

    创建对象: var o = new Objct(); //创建一个空对象 var o = {}; var a = new Array(); //创建一个空数组 var a = []; var d = ...

  8. .Net Core 1.0.0正式版安装及示例教程

    使用VS Code 从零开始开发调试.NET Core 1.0 RTM. .NET Core 是一个开源的.跨平台的 .NET 实现. VS Code 全称是 Visual Studio Code,V ...

  9. hibernate-取消关联外键引用数据丢失抛异常的设置@NotFound

    hibernate项目里面配了很多many-to-one的关联,后台在查询数据时已经作了健全性判断,但还是经常抛出对象找不到异常: org.hibernate.ObjectNotFoundExcept ...

  10. js-form进行reset重置

    (需要注意:做这个reset和submit时页面不能有这两个id和名称) <form id="form1" name="formName" action= ...