Javascript高级程序设计——第二章:在HTML中使用Javascript

第二章:在HTML中使用Javascript

<script>元素

向HTML页面中插入Javascript的主要方法,就是使用<script>元素,<script>元素有六个属性:

  1. async:可选。表示应该立即下载脚本,但不妨碍页面的其他操作,比如下载其他资源或等待加载其他脚本,只针对外部脚本有效。
  2. defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只针对外部脚本有效。
  3. src:可选。表示包含要执行代码的外部文件。
  4. type:可选。表示编写代码使用的脚本语言内容类型。默认为text/javascript
  5. language:已废弃。原来表示脚本语言类型
  6. charset:可选。表示通过src属性指定的代码的字符集。大多数浏览器会忽略。

   使用<script>元素的方式有两种,直接在页面嵌入Javascript代码和包含外部javascript。

   如下只需为元素指定 type="text/javascript"属性即可

<script type="text/javascript">
    function sayHay(){
        alert("hello,world");
    }
</script>

 注意:

1、在使用<script>嵌入代码是不要在代码中出现</script>字符串,浏览器会认为是结束标签而产生错误。

     2、在解析外部的Javascript文件时,页面的处理也会暂停

         3、带有src属性的<script>元素不应该在其<script>和</script>元素之间如果嵌入代码会被忽略,只会加载外部脚本文件。

4、按照传统的做法<script>元素应该都放在页面的<head>元素中,这样必须等待所以的脚本加载完成才开始加载页面内容,所以一般把全部的                    javascript引用放在<body>元素的后面。

    

延迟脚本:只使用与外部脚本文件

<!DOCTYPE hrml>
<html>
    <head>
        <script type="text/javascript" defer="defer" src="src1.js"></script>     <script type="text/javascript" defer="defer" src="src2.js"></script>
    </head>
    <body>

    </body>
</html>

  这个例子中添加了defer属性,其中包含的脚本要到浏览器遇到</html>标签之后再执行。HTML5规范要求脚本按照他们的出现的顺序执行,所以第一个脚本会先于第二行脚本执行。但现实当中,延迟脚本并不一定按照顺序执行,因此最后只包含一个延迟脚本。

  不同浏览器对defer的支持也不同,所以最后把延迟脚本放到页面底部。

异步脚本:只使用与外部脚本文件
<!DOCTYPE hrml>
<html>
    <head>
        <script type="text/javascript" async src="src1.js"></script>     <script type="text/javascript" async src="src2.js"></script>
    </head>
    <body>

    </body>
</html>

  异步脚本告诉浏览器立即下载文件,指定async属性的目的是不让页面等待脚本下载和执行,从而异步加载,浏览器不保证脚本按先后顺序执行,不要再加载时修改DOM。

XHTML 中的用法

可扩展标记语言是将html作为XML的应用而重新定义的,当在XHTML中嵌入代码时,"<"会发生错误,被当成一个新标签来解析,一般用CData片段来包含Javascript代码,

某些文本,比如 JavaScript 代码,包含大量 "<" 或 "&" 字符。为了避免错误,可以将脚本代码定义为 CDATA。CDATA 部分中的所有内容都会被解析器忽略。CDATA 部分由 "<![CDATA[" 开始,由 "]]>" 结束:由于部分浏览器不兼容xhtml,再使用javascript注释将CData标记注释掉。

<script>
//<![CDATA[
function matchwo(a,b)
{
    if (a < b && a < 0) then
    {
        return 1;
    }
    else     {
        return 0;
    }
}
//]]>
</script>

ps:在支持xml文档中虽然用‘//‘注释掉代码但xml文档中仍可识别出属于xml的代码<![CDATA[  和 ]]>,而不支持xml文档中,由于<![CDATA[  和 ]]>是xml代码所直接被注释掉。

嵌入式代码和外部文件

    1. 可维护性:把所有javascript代码放入一个文件夹内,维护起来方便。
    2. 可缓存:相同文件只需下载一次。
<!DOCTYPE html>
<html>
        <head>
        <script type="text/javascript" src=”src.js“></script>
        </head>
        <body>
        <noscript><p> no support javascript</p></noscript>
        </body>
</html>

小结:

  1. 在包含外部js文件时需指定src.
  2. 所以<script>会按照在页面中的顺序被解析,不使用defer和async的情况下,只有解析完<script>中代码才解析之后的元素,一般把<script>元素放到页面最后,<body>之前。
  3. defer文档呈现之后加载,async文档异步加载,不阻塞文档呈现。
  4. 当javascript不支持或禁止时<noscript>可以显示替代内容。
时间: 2024-10-20 10:43:38

Javascript高级程序设计——第二章:在HTML中使用Javascript的相关文章

读书笔记 - javascript 高级程序设计 - 第二章 在Html中使用JavaScript

1 <script>的6个属性 async  立即下载当前script标签的外部脚本 但不能影响别的 charset 没用了 defer  文档显示之后再执行脚本,只对外部脚本有效 language 没用了 src type 描述代码内容Mine类型 默认就是text/javascript 没什么用 2 在解释器对<script>元素内部的所有代码求值完毕以前 页面中的其余内容都不会被浏览器加载或显示 3 有两种script 嵌入式 外部引入式 在解析外部引入式的js文件时,页面的

JavaScript高级程序设计(二):在HTML中使用JavaScript

一.使用<script>元素 1.<script>元素定义了6个属性: async:可选.表示应该立即下载脚本,但不应该妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示通过src属性指定的代码的字符集.很少人用. defer:可选.表示脚本可以延迟到文档完全被解析和显示之后再执行.只对外部文件有效. language:已废弃. src:可选.表示包含要执行代码的外部文件. type:可选.表示编写代码使用的脚本语言的内容类

javascript高级程序设计 第九章-- 客户端检测

javascript高级程序设计 第九章-- 客户端检测 客户端检测是javascript开发中最具争议的一个话题,由于浏览器间存在差别,通常需要根据不同浏览器的能力分别编写不同的代码.有下列常使用的客户端检测方法:能力检测:在编写代码之前先检测特定浏览器的能力.例如,脚本在调用某个函数之前,可能要先检测该函数是否存在.这种检测方法将开发人员从考虑具体的浏览器类型和版本中解放出来,让他们把注意力集中到相应的能力是否存在上.能力检测无法精确地检测特定的浏览器和版本.怪癖检测:怪癖实际上是浏览器中存

javascript高级程序设计 第一章--javascript简介

javascript高级程序设计 第一章--javascript简介Netscape开发的javascript最初的目的就是处理由服务器负责的一些输入验证操作,而在js问世之前,必须                    把表单数据发到服务器端用户才能得到反馈.如今的js不再局限于简单的数据验证,而且具备了与浏览器窗口及其内容等所有方面的交互能力,js已经发展成功能全面的面向客户端的编程语言.javascript由Netscape公司开发,原名Livescript,是为了迎合当时的java热,所

第二章 在HTML中使用Javascript --《Javascript高级程序设计》

一.<script>元素 向HTML 页面中插入JavaScript 的主要方法,就是使用<script>元素. HTML 4.01 为<script>定义了下列6 个属性. (1)async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效.  async [??s??k] 异步 非同步 (2) charset:可选.表示通过src 属性指定的代码的字符集.由于大多数浏览器会忽略它的值,因此这个属性很少有

javascript高级程序设计---第二、三章

在HTML中引用javaScript javascript的几个属性  type async(异步加载 只适用于外部JS且IE8以上 HTML5规范 先于load执行) src defer(延迟加载 只适用于外部加载 先于load执行) 在HTML中使用外部JS代码的优点,1.便于维护 ,2.可缓存.3.适应未来. 在javascript中区分变量的大小写 比如(test 和 Text是?的两个变量) 在ECMA5中新模式,严格模式  'use strict'在js代码中加入这句话即为严格模式

Javascript高级程序设计——第一章:javascript简介

第一章 javascript简介 1.Javascript简史 javascript诞生于1995年,是由网景公司的Brendan Eich开发的,最初的目的是在客户端处理一些输入验证操作,自此后成为常见浏览器的特色功能,如今用途已经不限于简单的数据验证,而是具备与浏览器窗口及其内容等几乎所有方面交互的能力.当时javascript是为了搭上媒体热炒的java才改名为javascript其最初名为livescript. 在javascript取得巨大成功后,微软公司也在自己的浏览器中加入了名为J

第二章 在HTML中使用JavaScript

2.1 <script> 元素 向HTML页面中插入JavaScript的主要方法,就是使用<script>元素. HTML 4.01为<script>定义了下列6个属性:(可选) async:立即下载脚本,不应妨碍页面中的其他操作,只对外部脚本文件有效. charset:通过src属性指定的代码的字符集.被大多数浏览器忽略,很少用. defer:延迟脚本到文档完全解析和显示后再执行,只对外部脚本文件有效. src:表示包含要执行代码的外部文件. type:表示编写代码

《javascript高级程序设计》读书笔记(一)javascript简介

第一章:javascript简介 Netscape Navigator 开发的javascript   Javascript的实现有三部分: 1.核心(ECMAScript):提供核心语言功能. 2.文档对象模型(DOM):提供访问和操作网页内容的方法和接口. 3.浏览器对象模型(BOM):提供和浏览器交互的方法和接口. Web浏览器只是ECMAScripr实现的可能宿主环境之一. 五大主流Web浏览器(IE,Firefox,Safari,Chrome和Opera) 第二章:在Html中使用ja