• 第2章:在HTML中使用JavaScript


     

    一、<script>元素

    这个元素由Netscape创造并在Netscape Navigator 2中首先实现。后来,这个元素被加入到正式的HTML规范中。HMTL4.01<script>定义了下列5个属性 

     

     

     使用<script>元素的方式有2

    1、直接在页面嵌入JavaScript代码

     

    <script type="text/javascript">

    function sayHi()

    {

    alert("Hello!");     

    }

    </script>

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

         在使用<script>嵌入JavaScript代码时,记住不在要代码中任何地方出现”</script>”字符串,例如,浏览器在加载下面所示代码时就会产生一个错误

    <script type="text/javascript">

    function sayScript()

    {

    alert("</script>");  

    }

    </script>

          因为浏览器遇到字符串"</script>"时,会认为那是结束的</script>标签,而通过把字符串分割为2部分可以解决这个问题,如:

    <script type="text/javascript">

    function sayScript()

    {

    alert("</scr"+"ipt>");    

    }

    </script>

     

    2、通过<script>元素包含外部的JavaScript文件

    <script type="text/javascript" src="js/login.js"></script>

    注:带有src属性的<script>元素不应该在其<script></script>标签之间再包含额外的JavaScript代码

           另外,通过<script>元素的src属性还可以包含来自外部域的JavaScript文件,这一点既使<script>元素倍显强大,又让它备受争议。<script><img>元素非常相似,即它的src属性可以指入当前HTML页面所在的域之外的某个域中的URL,例如

    <script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>

     

        这样,位于外部域中的代码也会被加载和解析,就像这些代码位于加载它们的页面中一样。利用这一点可以在必要时通过不同的域来提供JavaScript文件,不过,在访问自己不能控制的服务器上的JavaScript文件则要多加小心,否则文件中的代码随时有可能被替换

     

    无论如何包含代码,浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析,在第一个<script>元素包含的代码解析完成后,第二个<script>包含的代码才会被解析……

     

    标签的位置

    习惯放于HTML页面的<head>标签中

    但这样做有时会引起如<head></head>中的外部JS文件没解析完,延迟期间浏览器窗口空白,或者是JS在执行中,出现空对象异常(原因是HTML元素未加载到页面中),因此现在的WEB应用程序一般都把全部的JS引用放在<body>元素中,放在页面内容的后面。

     

    延迟脚本

    <script type="text/javascript" src="js/login.js" defer=”defer”></script>

    Defer这个属性表示脚本会被延迟到整个页面都解析完毕再运行。实际上与上面介绍的把JS放在页面最底部的效果是一样的。

    但不是所有浏览器都支持defer属性,因此建议使用“把JS引用放在<body>元素中,放在页面内容的后面”这个方法

     

    XHTML中的用法

         可扩展超文本标记语言,即XHTMLExtensible HyperText Markup Language),是将HTML作为XML的应用而重新定义的一个标准,编写XHTML代码的规则要比编写HTML严格得多,而且直接影响能否在嵌入JavaScript代码时使用<script />标签。以下面的代码块为例,虽然它们在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中被当作一个标签的开始,作为标签来讲,小于号后面不能跟空格,因此导致语法错误

    解决方法:

    1、  用相应的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>

     

    2、  用一个CData片段来包含JavaScript代码,在XHTML(XML)中,CData片段是文档中一个特殊区域,这个区域中可以包含不需要解析的任意格式的文本内容,

    <script type="text/javascript">

           function compare(a,b)<![CDATA[

           {

                  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>

     

    在兼容XHTML的浏览器中,这个方法可以解决问题,实际上不少浏览器不兼容XHTML,因而不支持CData片段,怎么办呢?再使用JavaScript注释将CData标记注释掉就可以了:

    <script type="text/javascript">

           function compare(a,b)

    //<![CDATA[

           {

                  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>

    这种格式在所有现代浏览器都可以正常使用,它能通过XHTML验证,而且对XHTML之前的浏览器也会平稳退化

     

    不推荐使用的语法

    <script><!--

           function sayHi(){

                  alert("Hello!");     

           }

    //--></script>

    让不支持<script>元素的浏览器能够隐藏嵌入javascript代码。

    由于现在所有浏览器都支持javascript,因此没必要再用这种格式了

     

    嵌入代码与外部文件

    HTML嵌入javascript代码虽然没有问题,但一般认为最好的做法还是尽可能使用外中文件,优点如下

    可维护性-遍及不同HTML页面的javascript代码会造成维护问题,但把所有javascript文件都放在一个文件夹中,维护起来就轻松多了,开发人员因此也能够在不触及HTML标记的情况下,集中精力编辑javascript代码

    可缓存-浏览器能够根据具体的设置缓存链接的所有外部JS文件,也就是说,如果有2个页面都使用同一JS文件,这个文件只须下载一次,最终结果就是能够加快页面加载的速度

    可适应未来-通过外部文件来包含javascript无须使用前面提到的XHTML或注释hackHTMLXHTML包含外部文件的语法是相同的

     

    二、文档模式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

         最初的2种文档模式是:混杂模式(quirks mode)和标准模式(standards mode),这2种模式主要影响CSS内容的呈现,但在某些情况也会影响JavaScript的解释执行。

    如果在HTML文档开始处没有文档类型声明,浏览器会默认开启混杂模式,但采用混杂模式不是值得推荐的做法,因为不同浏览器的混杂模式行为差异非常大,如果不使用某些hack技术,跨浏览器的一致性就无法实现

     

    三、<noscript>元素

    当浏览器不支持JS时,使用<noscript>元素显示替代的内容

    <noscript>元素可以包含能够出现在<body>中的任何HTML元素-<script>元素除外

    包含在<noscript>元素中的内容只有在浏览器不支持脚本浏览器支持脚本,但脚本被禁用2种情况下才会显示出来,除此外的其他情况下,浏览器都不会呈现<noscript>中的内容

     

    四、小结

    JavaScript插入到HTML页面中要使用<script>元素,使用这个元素可以把JavaScript嵌入到HTML页面中,让脚本与标记混合在一起;也可以包含外部的JavaScript文件,而我们需要注意的地方有:

    1、2种方式都需要把type属性设置为 text/javascript,以表明使用的脚本语言是JavaScript

    2、在包含外部JavaScript文件时,必须将src属性设置为指定相应文件的URL,而这个文件即可以是同一服务器上的文件,也可以是其他任何域中的文件

    3、所有<script>元素会按照它们在页面中出现的先后顺序依次被解析,只有在解析完前面<script>元素的代码之后,才会开始解析<script>元素中的代码

    4、浏览器在呈现后面的页面内容之前,必须先解析前面的<script> 元素中的代码,为此,一般将<script>元素放在页面内容之后和</body>标签之前

    5、IE中,通过defer属性可以让浏览器呈现完文档之后再执行脚本,虽然defer属性是HTML4.01规定的,但只有IE支持该属性

    6、<noscript>元素可以指定在不支持脚本或禁用脚本的浏览器中显示的替代内容,但在启用了脚本的情况下,浏览器不会显示<noscript>元素中的任何内容

     

  • 相关阅读:
    kernel makefile分析 之include路径分析
    python模块,包,安装
    python 资源
    Python版QQ群发消息
    marvell 88f6282 工程包制作
    CPU : 二级缓存容量
    编译多个文件到内核模块
    展布频谱(Spread Spectrum, SS)
    编程练习 链表题目反序,合并
    汇编语言基础之七 框架指针的省略(FPO)
  • 原文地址:https://www.cnblogs.com/Silvia/p/2263351.html
Copyright © 2020-2023  润新知