window对象

原创 于 2007-11-13 21:59:00 发布 · 633 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#xsl #stylesheet #xml #文档 #xslt #encoding

window对象

·     open(URL,windowName,parameterList)：open方法创建一个新的浏览器窗口，并在新窗口中载入一个指定的URL地址；

·     close()：close方法关闭一个浏览器窗口；

·     alert()：弹出一个消息框；

·     confirm()：弹出一个确认框；

·     promt()：弹出一个提示框；

·     setTimeout(expression,time)：定时设置，在一定的时间后自动执行expression的代码，使用time设置时间，单位是毫秒；

·     clearTimeout(timer)：取消利用setTimeout的定时设置；

·     setIntervel(expression,time)：设定一个时间间隔，可以定时反复的自动执行expression描述的代码，使用time设置时间，单位是毫秒。

 

1.控制图片移动的函数

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

      <head>

            <title>dom2.html</title>

            <meta http-equiv="content-type" content="text/html; charset=UTF-8">

            <script language="javascript" type="text/javascript">

                  var x1=10;

                  var y1=-10;

                  //控制图片移动的函数

                  function fly(){           

                          flypic.style.top = parseInt(flypic.style.top) - y1; 

                          flypic.style.left = parseInt(flypic.style.left) - x1;

                          if (parseInt(flypic.style.top) < 0){

                                             y1=-y1;

                          }

                          if (parseInt(flypic.style.top)>300){

                                             y1=-y1;

                          }

                          if (parseInt(flypic.style.left) < 0){

                                          x1=-x1;

                          }

                            if (parseInt(flypic.style.left) >630){

                                        x1=-x1;

                          }

                         winow.setTimeout("fly()", 300);

                  }

            </script>

      </head>

      <body onload="fly()">

            <div id="flypic" style="position:absolute; top:20; left:40">

                  <img src="smile.gif" alt="">

            </div>

      </body>

</html>

2.随滚动条滚动的常见的飘浮广告

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>dom3.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script language="javascript">

            //控制图片移动的函数

            function moveIt() {

 

                     truck.style.top= document.body.scrollTop+parseInt(document.body. clientHeight)- 90; 

 

                     window.setTimeout('moveIt()', 1000);

            }

      </script>

 

  </head>

 

  <body BGCOLOR="#ffffff" TEXT="#000000" link="#0000ff" Vlink="#660099" onload="moveIt()">

<div id="truck" style="position:relative; top:30px; left:500px; width:40px; height:16px;">

<img  src="smile.gif">

</div>

</body>

</html>

3.CSS只适合用于输出比较固定的最终文档，对于输出要求比较灵活的需求往往不能够做到。CSS与XSTL各自的优势

CSS的优点是相对简洁，消耗系统资源少；但是如果输出需求比较灵活，就应该采用XSTL来进行显示控制。需要提醒读者的是XSLT虽然功能强大，但因为要重新索引XML结构树，所以消耗内存比较多。因此，在实际使用中常常会将它们结合起来使用，比如在服务器端用XSLT处理文档，在客户端用CSS来控制显示。

XSL与XSTL的关系

下面介绍一下如何使用XSTL实现对XML文档中的数据进行显示控制。首先先明确一下XSL的概念。XSL(eXtensible Stylesheet Language)和我们书中介绍的XSLT从狭义上理解是一样的,XSL实际上包括了XSLT(结构转换)和XSL-FO(formatting objects)(格式化输出)两种分支语言，其中XSL-FO的作用就类似前面介绍的CSS在HTML中的作用。而本书中重点讨论的是第一步的转换过程，也就是XSLT。按照W3C的标准，XSLT相对XSL的说法更严格些，因此在本书中我们统一使用XSLT。

XSTL的全称是可扩展的样式表转换语言（即Extensible Stylesheet Transformation Language）。它是一种用来转换XML文档结构的语言。为了使XML文档中存储的数据便于阅读理解，往往需要将信息显示出来或者打印出来，例如将存储的数据转换成一个HTML文件，一个PDF文件，甚至是一段声音。同样，为了使数据适合不同的应用程序，就必须提供能够将一种数据格式转换为另一种数据格式的方法，比如需求格式可能是一个文本文件，一个SQL语句，一个HTTP信息，一定顺序的数据调用等。而XSLT就是用来实现这种转换功能的语言。XSLT最主要的功能就是将XML转换为HTML。

Xpath的定义

通过前面的学习，已经了解到XML是一个完整的树型结构的文档。在转换XML文档时往往需要处理其中的一部分(节点)数据，那么如何查找和定位XML文档中的信息呢？XPath就是一种专门用来在XML文档中查找信息的语言。XPath隶属XSTL，因此我们通常会将XSTL语法和XPath语法结合在一起说。

用一种比较好理解的解释：如果将XML文档看作一个数据库，XPath就是SQL查询语言；如果将XML文档看成DOS目录结构，XPath就是cd,dir等目录操作命令的集合。

如果要从XML里根据需要提取相关的数据进行显示，就需要用到XSTL提供的模式化查询语言。所谓模式化查询语言，就是通过相关的模式匹配规则表达式从XML里提取数据的特定语句。常用的模式化查询语言一般可以分为三种情况，包括选择模式、测试模式以及匹配模式，下面分别进行介绍。
1．选择模式：
在该模式中包括<xsl:for-each>、<xsl:value-of>和 <xsl:apply-templates>等语句。选择模式语句可以实现将数据从XML中提取出来，它提供的是一种简单获得数据的方法，这几个标记都有一个select属性，用于获取XML中指定结点名中对应的数据。下面分别介绍一下对应的几个模式语句。
<xsl:for-each>类似于程序代码中的循环语句，例如在XML中有这样的数据:
<authors>
   <name>张桂元</name>
   <name>贾燕枫</name>
   <name>张宇翔</name>
   <name>张大牛</name>
</authors>
如果需要读取对应的作者名字，就可以使用<xsl:for-each>，对应的代码片段如下：
<xsl:for-each select="author/name">
……
</xsl:for-each>
其中的select属性可以依据名称选定XML中特定唯一的标记，也可以选择某一类相同的标记，一般称之为结点集。该语句的标准语法如下：
<xsl:for-each select="pattern" order-by="sort-criteria-list">
如果需要对文档中的某一种标记的内容显示方式进行格式化，就可以使用select指定对应的标记名称以获取对应的数据。order-by中使用的是以分号（;）分隔作为排序标准的列表。在列表元素前添加加号（+）表示按此标记的内容以升序排序，添加减号（-）表示逆序排序。作为一种简化的表示就是，排序标准列表就是由select规定的标记的子标记的序列，每个标记之间以（;）分隔。
<xsl:for-each>模式语句只是选取结点，并没有取出结点的值，开发人员需要使用< xsl:value-of >来真正获取对应结点的值。该语句的语法如下：
<xsl:value-of select="pattern">
其中select属性用来指定待获取值的结点名。
2．匹配模式：
在该模式中包括<xsl:template>以及<xsl:apply-templates>语句。
该语句使用match属性从XML文档中选取满足条件的结点，针对这些特定的结点形成一个特定输出形式的模版。
该语句的完整语法如下：
<xsl:template match="node-context" language="language-name">
其中，match属性用于确定在什么情况下执行此模版。作为一种简化的说明，在此处一般使用标记的名字来进行指定；其中最上层模版必须将match设置为“/”。
language属性用于确定在此模版中执行什么脚本语言，其取值与HTML中的script标记中的language属性的取值相同，缺省值是JavaScript。
<xsl:apply-templates>用于调用对应的模块。其基本语法为：
<xsl:apply-templates select="pattern" order-by="sort-criteria-list">
其中，select 属性用于确定在此上下文环境中应执行什么模版，即选取用< xsl:template >标记建立的模版（块）。order-by 属性用于指定以分号（;）分隔的排序标准，通常是子标记的序列。下面结合案例来进行说明。在项目“P35_XML”中新建一个XML文件，名称为template.xml，对应文档的内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="template.xsl"?>
<classmates>
      <student>
            <sid>1</sid>
            <sname>张桂元</sname>
            <toefl>630</toefl>
      </student>
      <student>
            <sid>2</sid>
            <sname>贾燕枫</sname>
            <toefl>599</toefl>
      </student>
      <student>
            <sid>3</sid>
            <sname>张宇翔</sname>
            <toefl>700</toefl>
      </student>
      <student>
            <sid>4</sid>
            <sname>张大牛</sname>
            <toefl>660</toefl>
      </student>
</classmates>
在该文档中以树型结构的方式存储了若干个学员的成绩信息，下面我们结合XSTL的模版实现对应的显示。显示的效果如图3-31所示。
为实现图3-31中所显示的效果，在项目“P35_XML”中新建一个XSL文件，名称为template.xsl，对应文档的内容如下所示。
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
       <!--根模版-->
       <xsl:template match="/">
              <html>
                     <head>
                           <title>学生成绩</title>
                     </head>
                     <body>
                           <xsl:apply-templates select="classmates/student" />
图3-31  应用模版之后的显示效果
                     </body>
              </html>
       </xsl:template>
       <!--简历模版-->
       <xsl:template match="student">
              <table border="1" cellspacing="0">
                     <caption>
                            个人成绩单
                            <xsl:eval>formatIndex(childNumber(this),"1")</xsl:eval>
                     </caption>
                     <xsl:apply-templates select="sid" />
                     <xsl:apply-templates select="sname" />
                     <tr />
                     <th>托福成绩</th>
                     <td COLSPAN="5">
                            <table cellspacing="0">
                                   <xsl:apply-templates select="toefl" />
                            </table>
                     </td>
              </table>
              <br />
       </xsl:template>
       <!--学号模版-->
       <xsl:template match="sid">
              <th>学号</th>
              <td>
                     <xsl:value-of />
              </td>
       </xsl:template>
       <!--姓名模版-->
       <xsl:template match="sname">
              <th>姓名</th>
              <td>
                     <xsl:value-of />
              </td>
       </xsl:template>
       <!--托福成绩模版-->
       <xsl:template match="toefl">
              <tr>
                     <td>
                            <xsl:value-of />
                     </td>
              </tr>
       </xsl:template>
</xsl:stylesheet>
在上面的样式表文档中，如下所示的代码即为sid结点定义的模版样式，例如：学号作为标题加粗显示，学号的值单独显示在一个单元格中。
<!--学号模版-->
       <xsl:template match="sid">
              <th>学号</th>
              <td>
                     <xsl:value-of />
              </td>
       </xsl:template>
对应的指定应用该模版的语句如下：
<xsl:apply-templates select="sid" />
注意在该例中，下面的语句是为了生成对应的索引编号进行显示。
<xsl:eval>formatIndex(childNumber(this),"1")</xsl:eval>
3．测试模式：
在该模式中包括<xsl:if> 和<xsl:when>等语句。
前面曾经介绍过：XML技术的优势之一就在于数据输出时的可选择性，即选择需要的数据进行显示输出。前面我们所讲到的选择模式语句:<xsl:for-each>、<xsl:value-of>及匹配模式语句<xsl: template>只是简单的选取通过“/”符号层层到达的节点，那么如果我们对XML数据不需要全部输出，而只需要满足某条件的部分数据，就需要使用条件判断<xsl:if>与多条件判断<xsl:choose>及<xsl:when>等语句，其使用方式与传统的程序设计语言中的流程控制同样是类似的。
<xsl:if>的语法结构如下：
<xsl:if expr="script-expression" language="language-name" test="pattern">
其中，expr 属性用于设置脚本语言表达式，其计算结果为“真”或者“假”；如果计算结果为“真”，且通过test属性所设置的对原始数据的测试条件，则在输出中显示其中的内容（该属性可以省略）。
language属性用于设置expr属性中表达式的脚本语言类型，其取值与HTML标记script的language属性的取值相同，缺省为“JavaScript”。
test 属性用于指定对原始数据进行测试的条件。
下面通过一个实例进行说明，依然是针对前面案例中的template.xml文档，针对该文档采用XSTL中的模版以及<xsl:if>语句对其进行显示控制，对应的样式文件名称为“if.xsl”。注意修改XML文档中与设置样式文件位置和名称相关的语句。
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
      <!--根模版-->
      <xsl:template match="/">
             <html>
                   <head>
                         <title>学生成绩</title>
                   </head>
                   <body>
                         <xsl:apply-templates select="classmates/student" />
                  </body>
            </html>
      </xsl:template>
      <!--主体模版-->
      <xsl:template match="student">
             <table border="1" cellspacing="0">
                    <th>学号</th>
                    <th>姓名</th>
                    <th>成绩</th>
                    <tr>
                         <td>
                               <xsl:value-of select="sid" />
                         </td>
                         <td>
                               <xsl:value-of select="sname" />
                         </td>
                         <td>
                               <xsl:apply-templates select="toefl" />
                         </td>
                   </tr>
            </table>
      </xsl:template>
 
      <xsl:template match="toefl">
            <xsl:if test=".[value()$le$650]">
                   <xsl:attribute name="style">color:red</xsl:attribute>
            </xsl:if>
            <xsl:value-of />
      </xsl:template>
</xsl:stylesheet>
对应实现的效果如图3-32所示，可以看到托福成绩低于650的成绩以红色进行了显示。
图3-32  进行显示控制之后的效果
在上面的例子中，$le$是关系运算符中的“小于等于”，对应的其他关系有小于（$lt$）、大于（$gt$）、大于等于（$ge$）、等于（$eq$）、不等于（$ne$）等。“. ”表示引用当前标记，本例中为“toefl”，[ ]表示筛选，只有满足筛选条件的标记才能适用于对应的显示控制。value() 是XSTL中的函数，其他常用的函数还有text()、end()、index()等等。
如果我们希望对同一数据同时测试多个条件，根据不同条件输出相应结果。那么除了使用<xsl:if>语句之外，也可以使用<xsl:choose>语句，该语句的语法如下：
<xsl:choose>
<xsl:when expr="script-expression" language="language-name" test="pattern">
<xsl:otherwise>
其中<xsl:choose>表示一个多路选择分支的开始。<xsl:when>语句中相关属性的含义与<xsl:if>类似，这里不在赘述。<xsl:otherwise>表示如果有不满足<xsl:when>规定的条件，则按照此标记中的内容进行输出。
下面依然通过一个实例进行说明，针对前面案例中的template.xml文档，针对该文档采用XSTL中的模版以及<xsl:choose>语句对其进行显示控制，对应的样式文件名称为“choose.xsl”，注意修改XML文档中与设置样式文件位置和名称相关的语句。
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
      <!--根模版-->
      <xsl:template match="/">
            <html>
                  <head>
                        <title>学生成绩</title>
                  </head>
                  <body>
                        <xsl:apply-templates select="classmates/student" />
                  </body>
            </html>
      </xsl:template>
      <!--主体模版-->
      <xsl:template match="student">
            <table border="1" cellspacing="0">
                  <th>学号</th>
                  <th>姓名</th>
                  <th>托福成绩</th>
                  <tr>
                        <td>
                              <xsl:value-of select="sid" />
                        </td>
                        <td>
                              <xsl:value-of select="sname" />
                        </td>
                        <td>
                              <xsl:apply-templates select="toefl" />
                        </td>
                  </tr>
            </table>
      </xsl:template>
 
      <xsl:template match="toefl">
            <xsl:choose>
                  <xsl:when test=".[value()$ge$700]">优秀</xsl:when>
                  <xsl:when test=".[value()$gt$600]">一般</xsl:when>
                  <xsl:when test=".[value()$gt$500]">及格</xsl:when>
                  <xsl:otherwise>不及格</xsl:otherwise>
            </xsl:choose>
      </xsl:template>
</xsl:stylesheet>
对应实现的效果如图3-33所示，可以看到托福成绩根据实际的分数依据不同的评价等级进行了显示。
最后再通过两个实例介绍，如何综合使用上面介绍的相关语句实现对前面XML文件的显示。例如，我们针对xml1.xml文件中的数据，配合对应的XSTL实现对应数据信息的显示，
图3-33  进行显示控制之后的效果
将对应的文件进行复制，得到xml2.xml。在项目“P35_XML”中新建一个XSTL文件，名称为xml2.xsl，对应的样式文件中样式的设置为：
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
      <xsl:template match="/">
             <html>
                   <body>
                         <center>
                               <table border="1">
                                      <tr>
                                             <td>学号</td>
                                             <td>姓名</td>
                                             <td>GRE成绩</td>
                                      </tr>
                                      <xsl:for-each select="classmates/student">
                                              <tr>
                                                    <td>
                                                         <xsl:value-of select="sid" />
                                                    </td>
                                                    <td>
                                                         <xsl:value-of select="sname" />
                                                    </td>
                                                    <td>
                                                         <xsl:value-of select="gre" />
                                                   </td>
                                              </tr>
                                      </xsl:for-each>
                               </table>
                         </center>
                   </body>
             </html>
      </xsl:template>
</xsl:stylesheet>
然后在原有的xml2.xml文件中添加新的一行如下所示，该行用于指定所需使用的样式表文件的类型、位置以及名称。
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="xml2.xsl"?>
<classmates>
      <student>
            <sid>1</sid>
            <sname>张桂元</sname>
            <gre>1700</gre>
            <toefl>630</toefl>
            <tse>120</tse>
      </student>
            ……
此时，在浏览器中再次直接打开xml1.xml文件的效果如图3-34所示。可以看到树型结构中的数据已经以表格的形式进行了相应的显示。
图3-34  浏览器中配合XSLT显示XML文档的效果
下面再给出一个实现效果更加复杂的例子，在项目中新建一个XML的文档，名称为xml3.xml，在该文档中存储的是相关下载软件的列表信息，对应的文档内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="xml3.xsl" ?>
<搞笑中心软件店>
     <说明>此测试页使用XML语言制作，必须使用IE5.0或以上版本才能正常浏览.</说明>
     <软件列表>
         <软件>
              <序号>1</序号>
              <名称>Goodnight歌</名称>
              <作恶度>--</作恶度>
              <搞笑度>****</搞笑度>
              <大小>633k</大小>
              <介绍>这不是恶作剧软件，但却是一首很好听的歌，动画也很有趣，建议送给baby。
         </介绍>
              <网址>../main/soft/011goodnight.exe</网址>
         </软件>
 
         <软件>
              <序号>2</序号>
              <名称>搞怪鼠标（3）</名称>
              <作恶度>**</作恶度>
              <搞笑度>*</搞笑度>
              <大小 />
              <介绍>使鼠标突然变大。</介绍>
              <网址>../main/soft/024vigor.zip</网址>
         </软件>
 
         <软件>
              <序号>3</序号>
              <名称>模拟电话拨号程序</名称>
              <作恶度>****</作恶度>
              <搞笑度>****</搞笑度>
              <大小>70k</大小>
              <介绍>铃,铃.....电话响了,听听是谁来的电话!</介绍>
              <网址>../main/soft/051ringing.zip</网址>
         </软件>
         <软件>
              <序号>4</序号>
              <名称>电脑升级</名称>
              <作恶度>***</作恶度>
              <搞笑度>***</搞笑度>
              <大小>23k</大小>
              <介绍>经过这次软升级,可使你的内存效率提高16倍,硬盘效率提高10倍!(运行前c盘根目录下要有一个320x400,256色的bmp图像,文件名logo.sys,不然会出错)</介绍>
              <网址>../main/soft/052level.zip</网址>
         </软件>
 
     </软件列表>
     <版权说明>搞笑中心软件店版权所有</版权说明>
</搞笑中心软件店>
可以看到，这是一个标准的XML文档，特殊之处在于在该文档中使用了中文的标记名称。下面我们配合使用XSTL样式文件控制对应内容的显示。新建一个文件，名称为xml3.xsl，对应的样式内容如下：
<?xml version="1.0" encoding="GB2312" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">
       <xsl:template match="/">
              <br>
                   <b>
                        <div align="center">
                              <font color="#00aaaa">趣味软件大全</font>
                        </div>
                  </b>
            </br>
            <table border="1" cellpadding="1" cellspacing="1" width="760" align= "center">
                  <tr>
                        <th width="80" align="left">序号</th>
                        <th>名称</th>
                        <th>作恶度</th>
                        <th>搞笑度</th>
                        <th>大小</th>
                  </tr>
                  <xsl:for-each select="搞笑中心软件店/软件列表/软件">
                        <tr>
                              <td>
                                    <b>
                                          <xsl:value-of select="序号" />
                                    </b>
                              </td>
                              <td>
                                    <font color="#ff0000">
                                          <xsl:value-of select="名称" />
                                    </font>
                              </td>
                              <td>
                                    <xsl:value-of select="作恶度" />
                              </td>
                              <td>
                                    <xsl:value-of select="搞笑度" />
                              </td>
                              <td>
                                    <xsl:value-of select="大小" />
                              </td>
                        </tr>
                        <tr>
                              <th>介绍:</th>
                              <td colspan="4">
                                    <xsl:value-of select="介绍" />
                              </td>
                        </tr>
                        <tr>
                              <td colspan="5" align="right">
                                    <a target="_blank">
                                          <xsl:attribute name="href">
                                                <xsl:value-of select="网址" />
                                          </xsl:attribute>
                                          按此下载
                                    </a>
                              </td>
                        </tr>
                  </xsl:for-each>
            </table>
            <p align="center">
                  <xsl:value-of select="搞笑中心软件店/版权说明" />
            </p>
      </xsl:template>
</xsl:stylesheet>
注意在该例中实现超级链接的方式时，所使用的<xsl:attribute>标记。对应XML文档在页面中的显示效果如图3-35所示。
图3-35  浏览器中配合XSLT显示XML文档的效果
 
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值