zoukankan      html  css  js  c++  java
  • JavaScript高级程序设计:在HTML中使用JavaScript

    题外话:基于大一的时候,只是对JavaScript蜻蜓点水般的去看了一下,觉得现在很后悔,JavaScript用得那么广,我都没有去认真学,真是的...现在要着手把JavaScript学好....

    PS:JavaScript 的历史我就省了....

    1.<script>元素

    作用:用于向HTML中插入JavaScript脚本

    6个属性

        ①async :可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。

        ②charset:可选。表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值,所以这个属性很少人用。

        ③defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。

        ④language:已废弃

        ⑤src:可选。表示包含要执行代码的外部文件。

        ⑥type:可选。可以看成是language的替代属性。表示编写代码使用的脚本语言的内容类型(也成为MINE类型)。目前type 属性的值依旧是 text/javascript 。不过,这个属性并不是必需的,如果没有指定这个属性,则其默认的值仍为 text/javascript 。

    2. 使用<script>的两种方式:

       ①直接在页面中嵌入JavaScript 代码,如:

    <script type="text/javascript">
        function sayHi(){
           alert("Hi!") ;
        }
    </script>

    注意:   

          A.包含在<script>元素内部的JavaScript代码将被从上到下一次解释

          B.在解释器对<script>元素内部的所有代码求值完毕以前,页面中的其余内容都不会被浏览器加载或显示

          C.在使用<script>嵌入JavaScript代码时,谨记不要在代码中的任何地方出现"</script>"字符串。如:   

    <script type="text/javascript">
       function sayScript(){
          alert("</script>") ;
      }
    </script>

             浏览器在加载时以上代码时会产生一个错误。因为当浏览器遇到"</script>"时,认为这是结束的</script>的标签。

             解决办法:分割为两部分,如:

    <script type="text/javascript">
       function sayScript(){
          alert("<\ /script>") ;
      }
    </script>

    ②包含外部JavaScript文件(使用 src 属性)

    如:

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

    注意:

    带有 src 属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的javascript代码,如果包含了嵌入的代码,则只会下载并执行外部的脚本文件,嵌入的代码会被忽略。

    ②src 可以指向域外的URL,如:

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

    无论采用哪种方式,只要不存在defer 和 async 属性,浏览器都会按照<script>元素在页面中出现的先后顺序对它们一次进行解释。

     

    3.标签的位置

    ①所有<script>元素都放在<head>元素中

    <!DOCTYPE html>
    <html>
       <head>
          <title>Example HTML Page</title>
          <script type = "text/javascript" src = "example1.js"></script>
          <script type = "text/javascript" src = "example2.js">
       </head>
       <body>
           <!-- 在这里放内容-->
         </script>
       </body>
    </html>

       这时,只有等到全部的JavaScript代码都被下载、解析和执行完成以后,才能开始呈现也页面的内容。为避免这个问题,现代WEB应用程序一般都采用下面的方式。

    ②放在<body>元素中页面的内容后面

    <!DOCTYPE html>
    <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>

    4.延迟脚本

    在<script>元素中定义 defer 属性,相当于告诉浏览器立即下载,但延迟执行。

    注:只适用于外部脚本文件

    <!DOCTYPE html>
    <html>
       <head>
          <title>Example HTML 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>

    5.异步脚本

    在<script>元素中定义 async 属性。async 只适用于外部脚本文件,并告诉浏览器立即下载文件,但并不保证按照它们指定的先后顺序执行。

    <!DOCTYPE html>
    <html>
       <head>
          <title>Example HTML Page</title>
          <script type = "text/javascript"  aysnc src = "example1.js"></script>
          <script type = "text/javascript" aysnc src = "example2.js"></script>
       </head>
       <body>
           <!-- 在这里放内容-->
       </body>
    </html>

    注意:

    1).支持异步脚本的浏览器有:FireFox 3.6 、Safari 5 和 Chrome

    2).在XHTML 中,要把 aysnc 属性值设置为 aysnc = "aysnc"

    6.在XHTML中的用法

    在HTML中,有特殊的规则用以确定<script>元素中的哪些内容可以被解析,但这些特殊规则在XHTML中不适用,比如比较语句 a<b 中的小于号(<)。在XHTML中会被当作开始一个新标签来解析。为避免类似的问题,可以采取一下方式:

    用相应的HTML实体(&lt;)替代代码中的小于号(<)。这样做比较麻烦,一般采取下面的方法

    ②用一个 CData 片段包含JavaScript 代码。在XHTML(XML)中,CData 片段是文档中的一个特殊区域,在这个区域中,可以包含不需要解析的任意格式的文本内容。因此,在CData片段就可以使用任意字符了。

    <script type = "text/javascript">
    <![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{
                 alter(" A is equal to B ") ;
          }
        }
    ]]>
    </script>

    现在考虑兼容性,在兼容的XHTML浏览器中,这个方法可以解决,但实际上,还有不少浏览器不兼容XHTML,因而不支持CData片段,那怎么办?

    使用JavaScript注释将CData标记注释掉就可以了:

    <script type = "text/javascript">
    //<![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{
                 alter(" A is equal to B ") ;
          }
        }
    //]]>
    </script>

    7.不推荐使用的语法

    有些浏览器不支持JavaScript,会把<script>中的内容直接输出到页面中,可以通过注释解决

    <script><!--
       function asyHi(){
         alert("Hi") ;
       }
    //--></script>

    不支持的浏览器会忽略掉,而支持的浏览器就会进一步确定其中是否包含需要解析的JavaScirpt代码。但现代浏览器一般都支持JavaScript,所以这个其实考虑不多。

    8.文档类型

    http://www.cnblogs.com/KeenLeung/archive/2012/04/22/2465588.html

     

    9.<noscript>元素

    当:

    1)浏览器不支持脚本

    2)支持脚本,但脚本被禁用

    可以使用<noscript>元素让页面平稳地退化,即显示相关信息。如:

    <!DOCTYPE html>
    <html>
       <head>
          <title>Example HTML Page</title>
          <script type = "text/javascript"  aysnc src = "example1.js"></script>
          <script type = "text/javascript" aysnc src = "example2.js"></script>
       </head>
       <body>
          <noscript>
             <p>本页面需要浏览器支持(启用)JavaScript</p>
          </noscript>
           <!-- 在这里放内容-->
       </body>
    </html>

    当页面在脚本无效时,会显示向用户显示一条信息,而启用了脚本的浏览器,用户永远也看不到这条信息

     

     

     

  • 相关阅读:
    chrome浏览器中安装以及使用Elasticsearch head 插件
    windows10 升级并安装配置 jmeter5.3
    linux下部署Elasticsearch6.8.1版本的集群
    【Rollo的Python之路】Python 爬虫系统学习 (八) logging模块的使用
    【Rollo的Python之路】Python 爬虫系统学习 (七) Scrapy初识
    【Rollo的Python之路】Python 爬虫系统学习 (六) Selenium 模拟登录
    【Rollo的Python之路】Python 爬虫系统学习 (五) Selenium
    【Rollo的Python之路】Python 爬虫系统学习 (四) XPath学习
    【Rollo的Python之路】Python 爬虫系统学习 (三)
    【Rollo的Python之路】Python sys argv[] 函数用法笔记
  • 原文地址:https://www.cnblogs.com/KeenLeung/p/2756177.html
Copyright © 2011-2022 走看看