zoukankan      html  css  js  c++  java
  • 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>可以显示替代内容。

     

  • 相关阅读:
    POJ 1775 (ZOJ 2358) Sum of Factorials
    POJ 1844 Sum
    HDOJ 1081(ZOJ 1074) To The Max(动态规划)
    HDOJ 2012 素数判定
    HDOJ 2011 多项式求和
    HDOJ 2010 水仙花数
    马云最新发言:让员工、客户、合作伙伴比自己更强
    乐视手机1S正式发售,乐视商城官网抽风遭网友吐槽
    C++引用(Reference)
    实验三 二叉树的基本操作(建立)及遍历
  • 原文地址:https://www.cnblogs.com/yangxunwu1992/p/4769589.html
Copyright © 2011-2022 走看看