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. 关于提高python程序执行效率的思路和想法

    相比编译型语言(C系列)python胜在简介的语法和优雅的动态编程体验,但是在执行效率上,python有解释性语言先天的劣势——执行效率较低,为了让编写出的程序获得更快的执行效率,开启此文章. pyt ...

  2. HTML5基础知识（1）--上标和下标文本

    1.上标文本标签:<sup>/<sup> 2.下标文本标签:<sub></sub> 3.案例代码 <!doctype html> <h ...

  3. Region的周长, 面积与紧凑程度

    Perimeter 边界长度. 计算方式跟边界的表示方式有关 Area 包含的点的个数 Compactness 两种常用的计算方式 \(\frac {perimeter^2}{area}\). cir ...

  4. java.net.URLConnectioin的http(get,post)请求(原生)

    使用Java发送这两种请求的代码大同小异,只是一些参数设置的不同.步骤如下: 通过统一资源定位器(java.net.URL)获取连接器(java.net.URLConnection) 设置请求的参数 ...

  5. MVP模式

    一.软件设计鼻祖MVC 1.1.MVC 第一次听到MVC这个名词是在C#中,相信对于MVC大家都已经很熟悉了,作为一种软件设计模式,MVC这个概念已经诞生好多年了. 如果你已经开发一段时间的iOS应用 ...

  6. 58. Android一些开发习惯总结

    作者:漫步 链接:https://www.zhihu.com/question/27227425/answer/35973793 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  7. C#中的斜变性和逆变性的详解

    1,问题 大家可以看到定义泛型类型的可以看到out和in这两个关键字,那么具体代表什么意思呢? 2,文字解释 C# 4.0通过两个关键字:out和in来分别支持以协变和逆变的方式使用泛型. 如果某个返 ...

  8. 判断IE和Edge

    //判断是否是IE浏览器,包括Edge浏览器function IEVersion() { var userAgent = navigator.userAgent; if (!!window.Activ ...

  9. css中import与link用法区别

    方式:引入CSS的方法有两种,一种是@import,一种是link @import url('地址');//注意,这种方式可以放在页面也可以放在css文件中<link href="地址 ...

  10. 网易免费/付费163企业邮smtp服务器地址

    免费:smtp.ym.163.com 25/pop.ym.163.com 110 付费:smtp.qiye.163.com 25/pop.qiye.163.com 110