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. Nginx之负载均衡服务器揭秘

    Nginx代理服务器, 一次性代理多台后端机器, 利用负载算法, 决定将当前请求传递给某台服务器执行. 有哪些后台服务器?例如微软的IIS,Apache,Nginx 负载算法是什么? 加权轮询. ng ...

  2. Linux_RPM_查询

    一.查询是否安装 rpm  -q 包名 选项:     -q  查询(query) 查询所有已安装的RPM包 rpm -qa      -a  所有(all) 二.插叙软件包的详细信息 rpm -qi ...

  3. Android Studio-目录结构

    新建工程项目后AS的Product目录结构如下所示: .idea://AS生成的工程配置文件,类似Eclipse的project.properties. app://AS创建工程中的一个Module. ...

  4. nutch-2.1导入eclipse+mysql运行

    初次接触nutch,记录下来 首先数据库 CREATE DATABASE nutch DEFAULT CHARACTER SET utf8 DEFAULT COLLATE utf8_unicode_c ...

  5. jquery-jsrender使用

      JsRender是一款基于jQuery的JavaScript模版引擎 特点: · 简单直观 · 功能强大 · 可扩展的 · 快如闪电 jsrender使用比较简单,本文简单结束一些常用的 使用过程 ...

  6. 如何在HTMl网页中插入百度地图

    方法/步骤 1.打开"百度地图生成器"的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html 如下图: 2.在"1 ...

  7. 【POJ 3525】Most Distant Point from the Sea(直线平移、半平面交)

    按逆时针顺序给出n个点,求它们组成的多边形的最大内切圆半径. 二分这个半径,将所有直线向多边形中心平移r距离,如果半平面交不存在那么r大了,否则r小了. 平移直线就是对于向量ab,因为是逆时针的,向中 ...

  8. Oracle计算时间差表达式

    有两个日期数据START_DATE,END_DATE,欲得到这两个日期的时间差(以天,小时,分钟,秒,毫秒): 天: ROUND(TO_NUMBER(END_DATE - START_DATE)) 小 ...

  9. 【BNUOJ19500】 Matrix Decompressing

    https://www.bnuoj.com/v3/problem_show.php?pid=19500 (题目链接) 题意 给出一个R行C列的正整数矩阵,设前${A_i}$项为其前i行所有元素之和,$ ...

  10. MySQL备份方式简介

    MySQL备份的方式主要分为两种: 文本格式备份: 命令:mysqldump 转储文件:dump file 主要内容:数据库结构及数据(create talbe /insert) 二进制备份:这类备份 ...