第二章 在HTML中使用JavaScript

  ·   JS高设(第三版)   ·   JavaScript     浏览量:

引用方式

  • 页面内部
//可省略type
<script type="text/javascript">
    function(){
        // 代码区域内不能出现</script>,如果一定要用,请使用转义字符,如下
        alert("<\/script>");
    }
</script>
  • 外部引用(推荐),他能加载本地和非本地的文件,请加载自己信任的文件

    • 好处:集中管理便于维护、浏览器能识别相同文件,不会重复下载

    • 可选参数:async,defer(稍后详解)

引用位置:放在</body>标签之前

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>测试页</title>
    </head>
    <body>
        <!-- HTML代码 -->
        <!-- HTML代码 -->
        <!-- HTML代码 -->

        <!-- 引用标签放这里 -->
        <script src="test.js"></script>
    </body>
</html>

正确写法

  • 普通用法
<script src="test.js"></script>
  • 设置参数:async(异步),异步加载,不保证test1,test2加载完成顺序,因此请确保两者没有依赖关系,建议不在异步加载脚本中修改DOM(既HTMl页面)
<script src="test1.js" async></script>
<script src="test2.js" async></script>
  • 设置参数:defer(延迟),此种引用方法中的js会在浏览器遇到</html>标签后在执行,不过加载顺序还是test1=>test2
<script src="test1.js" defer="defer"></script>
<script src="test2.js" defer="defer"></script>

错误写法

  • 此种写法在XHTML中何以,HTML中不符合规范
<script src="test.js"/>
  • 此种写法,只能加载 text.js 内容,内部装怪部分将被忽略!
<script src="test.js">
    function(){
        alert("我就是要装怪,我要把两种写法融为一体,自成一派,称霸武林!");
    }
</script>

<noscript>元素

  • 浏览器不支持脚本
  • 浏览器支持,但是禁止了脚本

例子

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>测试页</title>
    </head>
    <body>
        <!-- HTMl代码 -->
        <script>
            alert('俺老孙出来啦');
        </script>
        <noscript>
            <p>本页面需要浏览器支持(启用)JavaSript</p>
        </noscript>
    </body>
</html>

结果

  • 禁止脚本

timjie-tu-20180813214402

  • 允许脚本

timjie-tu-20180813214607



收起 >>
第二章 在HTML中使用JavaScript