• 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 著 李松峰 曹力 译

  • 相关阅读:
    Java路径问题终于解决方式—可定位全部资源的相对路径寻址
    易学设计模式看书笔记(2)
    js算法:分治法-棋盘覆盖
    [NIO]dawn之Task具体解释
    C#高级编程五十八天----并行集合
    [Swift通天遁地]九、拔剑吧-(12)创建Preview-Transition图像预览界面
    [Swift通天遁地]九、拔剑吧-(11)创建强大的Pinterest风格的瀑布流界面
    [Swift通天遁地]九、拔剑吧-(10)快速创建美观的聊天界面:可发送文字、表情、图片
    [Swift通天遁地]九、拔剑吧-(9)创建支持缩放、移动、裁切的相机视图控制器
    [Swift通天遁地]九、拔剑吧-(8)创建气泡式页面切换效果
  • 原文地址:https://www.cnblogs.com/tian830937/p/4439313.html
Copyright © 2020-2023  润新知