第二章 在HTML中运用JavaScript

《JavaScript高等程序设计》(第3版)进修笔记及心得。写于入门JS第9个月。

2.1 <script>元素

属性

  • async: 可选。是不是马上下载剧本,仅对外部剧本文件有用。

  • charset: 可选。经由过程src属性指定代码的字符集。(很罕用)

  • defer: 可选。是不是延晚到DOM完整被剖析和显现以后再实行。仅对外部剧本文件有用。

  • language: 已烧毁。

  • src: 可选。包括要实行代码的外部文件。带有此属性的<script>元素,浏览器不会再剖析其<script>之间的代码。可所以外部域的地点,但要警惕运用。

  • type: 可选。编写代码运用的剧本言语的内容范例(MIME范例),默许text/javascript.

  • 许多处所将async形貌为“是不是异步实行”,但毕竟还得看defer,所以我觉得照样《高程》里的形貌准确些。

截取runoob.com中关于async属性的诠释(http://www.runoob.com/tags/att-script-async.html):

《第二章 在HTML中运用JavaScript》

运用<script>元素体式格局

  1. 直接在页面中嵌入JavaScript代码
    注重不要在代码中的任何位置涌现</script>, 假如肯定须要,能够用转义字符”\”, 如”<\/script>”.

  2. 包括外部JavaScript文件
    XHTML文档中能够省略封闭标签</script>, 但不相符HTML范例(得不到某些浏览器尤其是IE的准确剖析).

2.1.1 标签的位置

传统的做法是把一切<script>元素放在<head>内,如许做意味着,必需比及悉数JavaScript代码都被下载、剖析和实行完成以后,才最先加载页面内容。所以关于JavaScript比较多的页面来讲,会致使浏览器在显现页面时涌现显著延时。

所以当代Web运用程序平常把JavaScript悉数放在<body>末了。或许经由过程defer设置什么时候加载。

2.1.2 耽误剧本

设置defer=”defer”后,当前剧本会优先于DOMContentLoaded事宜【详见第十三章】实行)。注重:在实际中,延时剧本并不肯定会根据递次实行,也不肯定会在DOMContentLoaded事宜动身前实行,因而最好只包括一个耽误剧本。

2.1.3 异步剧本

  1. async属性。是不是马上下载文件。亦不保证根据指定他们的先后递次实行。

  2. 指定async属性的目标平常是:不让页面守候两个剧本下载和实行,从而异步加载页面其他内容。为此,发起异步剧本不要在其加载时期修正DOM.

  3. 异步剧本肯定会在页面的load事宜前实行,但可能会在DOMContentLoaded事宜触发之前或以后实行。

  4. 支撑的浏览器: Firefox 3.6+, Safari 5+ 和 Chrome.

2.1.4 在XHTML中的用法

可扩大超文本标记言语(XHTML), 是将HTML作为XML的运用而从新定义的饿一个规范。编写XHTML要比HTML严厉很多,而且直接影响可否在嵌入JavaScript代码是运用<script/>标签。

<script>
    function compare(a, b){
        if(a < b){ //此处在XHTML中,"<"会被剖析为下一个标签的最先
            alert("A is less than B");
        }else if(a > b){ 
            alert("A is greater than B");
        }elss{
            alert("A is equal to B");
        }
    }
</script>

处理方案:

1.用响应的HTML实体(<)替代代码中一切小于号(<), 如:

if(a &lt; b){}

2.用一个CData片断来包括JavaScript代码。在XHTML(XML)中,CData片断是文档中的一个特别地区,这个地区能够包括不须要剖析的恣意花样的文本内容。如:

<script type="text/javascript">
<![CDATA[
function compare(a, b){
    if(a < b){ //此处在XHTML中,"<"会被剖析为下一个标签的最先
        alert("A is less than B");
    }else if(a > b){ 
        alert("A is greater than B");
    }elss{
        alert("A is equal to B");
    }
}
]]>
//若须要处理有些浏览器不兼容XHTML、不支撑CData片断,能够运用解释将CData标记解释掉。
</script>

注:将页面的MIME范例指定为”application/xhtml+xml”的情况下会触发XHTML形式。并非一切浏览器都支撑以这类体式格局供应XHTML文档。

2.2 嵌入代码与外部文件

外部文件有以下长处:

  • 可维护性

  • 可缓存

  • 顺应将来(经由过程外部文件来包括JavaScript无需运用前面提到XHTML或解释hack。HTML和XHTML包括外部文件的语法是雷同的)

    原文作者:Zhang_zm
    原文地址: https://segmentfault.com/a/1190000004032986
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞