美文网首页JavaScript基础
2018-03-29:第二章——在HTML中使用JavaScri

2018-03-29:第二章——在HTML中使用JavaScri

作者: 震撼着 | 来源:发表于2018-03-29 14:52 被阅读0次

    2.1    <script>元素

            向HTML页面中插入JavaScript的主要方法就是使用<script>元素。HTML4.01为<script>定义了以下6个属性:

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

                    (2)charset:可选。表示通过src属性指定的代码字符集,大多数浏览器会忽略它的值,导致用的少。

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

                    (4)anguage:已废弃。

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

                    (6)type:可选。可看成language的替代属性;表示编写代码使用的脚本语言的内容类型(MIME)。

            使用<script>元素的方式有两种:直接在页面中嵌入JavaScript代码、包含外部JavaScript文件。

            使用时不要在代码中的任何地方出现“</script>”字符串,按照解析嵌入式代码的规则,当浏览器遇到字符串“</script>”时,就会认为结束标签,可以通过转义字符“\”解决该问题。

            使用src属性,通过<script>元素包含外部JavaScript文件时,如果在XHTML文档中可以省略结束标签</script>,但是在HTML文档中不可以使用这种不符合HTML规范的语法,并且使用后也得不到某些IE浏览器的正确解析;带有src属性的<script>元素不应该在<script></script>之间包含额外的js代码,如果包含,则会下载后被忽略;另外src属性还可以包含来自外部域的js文件。

            按照惯例,外部的JavaScript文件带有.js拓展名。这个拓展名不是必需的,因为浏览器不会检查包含JavaScript的文件拓展名。这样一来,使用PHP、jsp或其他的服务器端语言动态生成JavaScript代码也就成为了可能。但是服务端通常还是需要看拓展名决定相应应用哪种MIME类型。如果不适用.js拓展名,请确保服务器能正常返回正确的MIME类型。

    2.1.1    标签的位置

            因为js执行顺序从上到下从左到右,故将js文件放到<body>后面,浏览器打开页面显示空白页时间缩短,使用户感觉打开页面速度加快。

    2.1.2    延迟脚本

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

            含有defer的script元素中包含的脚本将延迟到</html>标签执行后再执行,并且按照HTML5的规范要求会按照脚本的先后顺序执行,而且这些脚本会先于DOMContentLoaded,但在现实中不一定理想哦,因此最好只包含一个延迟脚本;

            H5中明确规定,defer属性只是用于外部脚本文件。

    2.1.3    异步脚本

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

            含有asnyc的script元素中包含的脚本用refer类似只适用于外部脚本,并且告诉浏览器立即下载文件,不会使页面等待js脚本下载和执行,因此建议异步脚本不要再家在期间修改DOM;

            不同的是标记为async脚本并不能保证按照他们制定的先后顺序执行,因此一定要确定引入的多个js脚本不会互相依赖;

            异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或者之后执行。

    2.1.4    在XHTML中的用法

            在将页面的MIME类型指定为“application/xtml+xml”的情况下会触发XHTML模式

            XHTML的规则比HTML的规则严格,会有代码被解析成标签的可能,为了避免有两种方法:

            1.用相应的HTML实体替换代码中可能被解析的代码,但会导致代码可读性降低;

            2.使用CData片段来包含js代码,如果浏览器不兼容XHTML因而不支持CData片段,可使用js的注释将CData标记注释掉,便可以了。

              //  <![CData[

                    …………

              //  ]]>

    2.2    嵌入代码与外部文件

    Nicholas推荐使用外部文件包含JavaScript代码,以下优点:

            可维护性:可以使代码宏观上更清晰,开发人员更容易维护;

            可缓存:浏览器可以根据具体的设置缓存所有外部的JavaScript文件,使用相同的文件只需要下载一次;

            适应未来:无需使用XHTML或注释hack。

    2.3    文档模式

    2.4    <noscript>元素

            早期用来处理浏览器不支持JavaScript是如何让页面平稳退化的方法。

    相关文章

      网友评论

        本文标题:2018-03-29:第二章——在HTML中使用JavaScri

        本文链接:https://www.haomeiwen.com/subject/aktmcftx.html