JavaScript高级编程(一)

书中第2章,在HTML中使用JavaScript摘要总结

2.1 <script>元素

<script>中的5个属性:
charset:可选。表示通过src属性指定的代码的字符集。多数浏览器会忽略它的值,很少人使用。
defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。IE和Firefox3.1是目前唯一支持defer属性的主流浏览器。其他浏览器则会忽略,不延迟脚本的执行。
language:已废弃。原来用于表示编写代码使用的脚本语言(如JavaScript、JavaScript1.2或VBScript)。
src:可选。表示包含要执行代码的外部文件。
type:必需。表示编写代码使用的脚本语言的内容类型(也称为MIME类型)。通常为text/javascript。

包含在<script>元素内的JavaScript代码将被从上至下依次解释。在解释器对<script>元素内部的所有代码求值完成以前,页面中的其余内容都不会被浏览器加载或显示。

在使用<script>嵌入JavaScript代码时,任何地方不能出现"<script>"字符串。
<script
type="text/javascript">
    function sayScript(){
       
alert("</script>");  //此处会报错
    }
</script>
可将"</script>"分开写,避免错误。
<script
type="text/javascript">
    function
sayScript(){
        alert("</scr" + "ipt>"); 
    }
</script>

src属性可以指向当前HTML页面所在域之外的某个域中的URL,例如
<script
type="text/javascript" src="http://www.somewhere.com/afile.js"></script>

2.1.1 标签的位置

按照惯例,所有的<script>元素都应该放在页面的<head>元素中,可是,这将意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后,才能呈现页面内容(浏览器在遇到<body>标签时才开始呈现内容)。对于需要很多JavaScript代码的页面来说,会导致呈现页面时出现的延迟现象。为了避免这种现象发生,可以把全部JavaScript引用发在页面的内容后面或增加defer属性,如下例所示:
<html>
    <head>
     
  <title>Example HTML Page</title>
    </head>
   
<body>
        <!-- 这里放内容 -->
        <script type="text/javascript"
src="example1.js"></script>
        <script
type="text/javascript" src="example2.js"></script>
    </body>
</html>

2.1.3 在XHTML中的用法

某些JavaScript代码在HTML中是有效的,但在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>
代码中的比较语句a < b
中的小于号(<)在XHTML中将被当作开始一个新标签来解析。但是作为标签来讲,小于号后面不能跟空格,因此就会导致语法错误。
避免类似语法错误的方法有两个。一是用相应的HTML实体(&lt;)替换小于号(<),替换后的代码如下:
<script
type="text/javascript">
    function compare(a,
b) {
        if (a
&lt;
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>
这样虽然可以运行,但不便于理解。因此可用第二种方法,用一个CData片段来包含JavaScript代码。在XHTML(XML)中,CData片段是文档中的一个特殊区域,这个区域中可以包含不需要解析的任意格式的文本内容。
<script
type="text/javascript">
//某些浏览器不兼容XHTML,因而不支持CData片段,可以使用JavaScript注释将CData标记注释掉
//<![CDATA[        
    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>

2.3 <noscript>元素

这个元素可以包含能够出现在文档<body>中的任何HTML元素——<script>元素除外,包含在<nosript>元素中的内容只有在下列情况下才会显示出来:
1.浏览器不支持脚本
2.浏览器支持脚本,但脚本被禁用。
<html>
    <head>
     
  <title>Example HTML
Page</title>
        <script type="text/javascript"
src="example1.js"></script>
        <script
type="text/javascript"
src="example2.js"></script>
    </head>
 
  <body>
        <noscript>
           
<p>本页面需要浏览器支持(启用)JavaScript</p>
       
</noscript>
    </body>
</html>

以上所有内容均摘自图书《JavaScript 高级程序设计(第2版)》[美] Nicholas
C.Zakas 著 李松峰 曹力 译

时间: 2024-10-05 04:40:52

JavaScript高级编程(一)的相关文章

读javascript高级编程11-事件

一.事件流 事件流指从页面中接收事件的顺序. 1.事件冒泡(常用) IE中采用的事件流是事件冒泡,先从具体的接收元素,然后逐步向上传播到不具体的元素. 2.事件捕获(少用) Netscapte采用事件捕获,先由不具体的元素接收事件,最具体的节点最后才接收到事件. 3.DOM事件流 DOM2级事件包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段. 二.事件处理程序 事件处理程序就是响应某些事件的函数,如onclick等. 1. DOM0级事件处理程序 每个元素都有自己的事件处理程序属性,如o

JavaScript高级编程随笔

前言: 本人之前在博客园写过一遍关于MVC基础的一个小文章,由于当时各种原因没能继续坚持写下去,最近本人在学习JavaScript,想用自己的方式整理出来,主要是为了加深自己的印象,我还是一个前端的小学生,希望各位前端的前辈多指点.我会吧每一章节学到的看到的整理到我的博客园里,虽然这本书前面讲的很基础,我也会坚持发表文章.好了废话说到这里开始进入正题. Content: 本人现在准备要看的第一本书是<JavaScript高级编程>[第三版],这是一本比较经典的JS书籍,即使前面几章比较简单基础

JavaScript高级编程

原文地址: http://www.onlamp.com/pub/a/onlamp/2007/07/05/writing-advanced-javascript.html Web应用程序(Web Applications)        从计算机纪元的黎明刚刚来临開始,不同平台间软件的互用性就一直是关注的焦点.为了尽可能实现用户的最大要求,软件公布者往往将流行软件从一个机器移植到另外一个机器上,这通常要花费数月的辛苦劳动,有时甚至是整个软件在新的硬件或者操作系统上的全然重写.随着计算机功能的不断强

JavaScript高级编程II

原文地址: http://www.onlamp.com/pub/a/onlamp/2007/08/23/advanced-javascript-ii.html?page=1 在前面的文章中,我们介绍了两类JavaScript小工具及其源代码:浮动文本和弹出菜单.本文中,我们将继续介绍另外几个实用的JavaScript小工具,并着重说明其工作原理,因此你能够简单改动后应用到自己的程序中.本文中的JavaScript代码应该不用做不论什么改动就能够在当前全部主流浏览器上执行.所以,不用再费周折…… 

读javascript高级编程02-变量作用域

一. 延长作用域链 有些语句可以在作用域前端临时增加一个变量对象,该变量对象在代码执行完成后会被移除. ①with语句延长作用域. function buildUrl(){ var qs="?debug=true"; with(location){ var url=href+qs; } return url; } buildUrl(); //result:http://www.fanxbao.com/?debug=true ②try...catch...中的catch语句块延长作用域链

读javascript高级编程07-引用类型、Object、Array

一.引用类型 ECMAScript是支持面向对象的,可以通过引用类型描述一类对象所具有的属性和方法. 创建对象实例的方法时是用new 操作符加构造函数:var p=new Person(). 二.Object类型 1.创建Object实例两种方式: 使用new操作符跟Object构造函数. var o = new Object(); o.name = 'dami'; o.age = 25; 使用对象字面量表示法,推荐这种方式,代码量小而且看上去有封装的感觉. var o = { name: 'd

javascript高级编程笔记01(基本概念)

1.在html中使用JavaScript 1.  <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选,通过src属性指定代码的字符集,大多浏览器会忽略这个值,所以很少人使用 language:已放弃 src:可选,外部脚本的地址 type:可选,现在不推荐用“text/javascript”,考虑到约定俗成和最大限度的浏览器兼容,目前type属性的值还是text/javascript,不过,这个属性并不是必需

读javascript高级编程10-DOM

一.节点关系 元素的childNodes属性来表示其所有子节点,它是一个NodeList对象,会随着DOM结构的变化动态变化. hasChildNodes():是否有子节点. var headlines=document.getElementById("headline_block"); var childs=headlines.childNodes; childs.length;//1 childs[0];//取第一个子节点 childs.item(0);//取第一个子节点 pare

读javascript高级编程08-引用类型之Global、Math、String

一.Global 所有在全局作用域定义的属性和方法,都属于Global对象. 1.URI编码: encodeURI():主要用于对整个URI编码.它不会对本身属于URI的特殊字符进行编码. encodeComponentURI():主要用于对URI中的某一部分进行编码,很常用的是对查询字符串参数进行编码.它会对所有非标准字符进行编码. 对应的解码方法是decodeURI()和decodeURIComponent. var uri='http://www.cnblogs.com?a=1 2&b=陈

读javascript高级编程03-函数表达式、闭包、私有变量

一.函数声明和函数表达式 定义函数有两种方式:函数声明和函数表达式.它们之间一个重要的区别是函数提升. 1.函数声明会进行函数提升,所以函数调用在函数声明之前也不会报错: test(); function test(){ alert(1); } 2.函数表达式不会进行函数提升,函数调用在函数声明之前的话会报错: test(); // test is not a function var test=function(){ alert(1); } 二.递归函数 递归函数是通过在函数内部调用自身实现的