3.1. 内部引用JavaScript

通过HTML的script标签加载JavaScript代码

通过HTMLscript标签加载JavaScript代码

示例

<head>
        <script type="text/javascript">
                document.write("dreamdu!");
        </script>
</head>

通过注释隐藏JavaScript代码

示例

<head>
        <script type="text/javascript">
        <!--
                document.write("dreamdu!");
        //-->
        </script>
</head>

<!-- ... //-->当浏览器不支持JavaScript时,屏蔽JavaScript代码。

这个代码是骇客技术,<!-- ... -->属于HTML注释// 是JavaScript注释。当浏览器支持JavaScript时//代码生效,因此HTML的注释没有效果;当浏览器不支持JavaScript时,//代码无效,因此屏蔽了<!-- ... -->之间的JavaScript代码。

现在这种隐藏JavaScript代码的方式可以忽略,因为没有浏览器不支持JavaScript,除了部分用户手动禁止浏览器的JavaScript功能,但是这种情况很少发生。

在XHTML文档中使用CDATA避免解析HTML实体

CDATA将在XML教程中详细介绍。这里简单介绍一下,使用CDATA囊括的内容中的HTML实体将不被翻译。

没有使用CDATA

<script type="text/javascript">
        document.write(6&lt;5);
        document.write(dreamdu&gt;5);
</script>

显示6&lt;5 与 dreamdu&gt;5,在XHTML文件中必须使用&lt;与&gt;表示小于<与大于>

使用CDATA

<script type="text/javascript">
<![CDATA[
        document.write(6>5);
        document.write(dreamdu<5);
]]>
</script>

使用CDATA后可以直接使用小于<与大于>等HTML实体

当代码中有HTML实体时,不使用CDATA会使代码复杂(因为HTML实体通常很复杂,不直观),容易产生错误,其次代码的可读性较差。

屏蔽CDATA

<script type="text/javascript">
//<![CDATA[
        document.write(6>5);
        document.write(dreamdu>5);
//]]>
</script>

当浏览器不支持CDATA时可以使用JavaScript注释屏蔽CDATA。

从上面描述可以看出使用CDATA还是比较麻烦的,最好的方法是不用。怎么能不用CDATA呢?我们可以通过外部引用加载JavaScript文件的方式避免使用XHTML中的CDATA。

使用noscript标签为用户提供更好的体验

通过JavaScript注释的方式可以隐藏JavaScript代码,通过noscript标签可以为用户提供更好的体验(提示用户你的浏览器不支持JavaScript)

示例

<body>
        <script type="text/javascript">
                document.write("梦之都网络教程!");
        </script>
        <noscript>
                <p>如果您想查看梦之都教程,则必须启用JavaScript。然而,JavaScript 似乎被禁用,
                要么就是您的浏览器不支持 JavaScript。请更改您的浏览器选项以启用 JavaScript,然后点击
                        <a href="http://www.dreamdu.com/">
                                重试
                        </a>
                        。要查看梦之都最基本的HTML网页(不需要 JavaScript),
                        <a href="http://www.dreamdu.com/xhtml/">
                                请单击此处
                        </a>
                </p>
        </noscript>
</body>

通过上面的方式可以为用户提供更好的体验。

延伸阅读



  • 教程中有什么不懂的地方?发现教程的错误!对教程有什么建议!快快联系猴子呀dreamdu@163.com,:)
赞助梦之都