2017-08-25

JavaScript FirstExploration 初探

当学习一门新的编程语言的时候，应该边学边做，反复演练以加深理解。
因此，你需要一个 JavaScript 解释器。幸运的是，每一个 Web 浏览器都包含一个 JavaScript 解释器。

注：
现代浏览器可以使用函数 console.log() 来向控制台输出消息，通过这种方式可以非常方便地调试代码。

引入方式

三种加载时间不同

1、头部：在<head>区域中，在页面被载入之前，脚本已经载入，准备好被调用。（放置：函数代码）
<script type="text/javascript"></script>
2、内部：在<body>区域中，在页面载入时，脚本被载入并立即执行。放置函数不会立即执行，只用调用时才执行，而且必须脚本成功加载完成之后，才能正确调用函数。
<script type="text/javascript"></script>
3、外部：在外部引用JavaScript，以.js为扩展名的文件中，在HTML页面中链接到这个脚本文件，不同的位置决定加载时机。
<script type="text/javascript" src="xxx.js"></script>
4、输出
JavaScript通常用来操作HTML，文档输出：
document.write("<p>this is my first JavaScript</p>");

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript-lesson-1.2</title>
    <link rel="stylesheet" href="http://qiniu.shijiajie.com/blog/javascript-lesson/1.2/layer.css">
    <!-- 开启页面加载效果 -->
    <script src="http://qiniu.shijiajie.com/blog/javascript-lesson/1.2/layer.js"></script>
    <script>layer.open({ type: 2, shadeClose: false });</script>
    <!-- 关闭页面加载效果 -->
    <script>setTimeout(function(){ layer.closeAll(); },500);</script>
    <!-- 引入 10MB 外部 JavaScript，比较耗时 -->
    <script src="http://qiniu.shijiajie.com/blog/javascript-lesson/1.2/external.js"></script>
</head>
<body>
    本页面用来测试 &lt;script&gt; 加载顺序~
</body>
</html>

挑战一

实现打开页面就能看到网页内容「本页面用来测试 <script> 加载顺序~」，不必等外部 JavaScript 文件全部下载完毕才显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript-lesson-1.2</title>
    <link rel="stylesheet" href="http://qiniu.shijiajie.com/blog/javascript-lesson/1.2/layer.css">
</head>
<body>
    <!-- 开启页面加载效果 -->
    <script src="http://qiniu.shijiajie.com/blog/javascript-lesson/1.2/layer.js"></script>
    <script>layer.open({ type: 2, shadeClose: false });</script>
    本页面用来测试 &lt;script&gt; 加载顺序~
    <!-- 关闭页面加载效果 -->
    <script>setTimeout(function(){ layer.closeAll(); },500);</script>
    <!-- 引入 10MB 外部 JavaScript，比较耗时 -->
    <script src="http://qiniu.shijiajie.com/blog/javascript-lesson/1.2/external.js"></script>
</body>
</html>

属性

src

可选。表示包含要执行代码的外部文件。

type

可选。可以看成是language 的替代属性；表示编写代码使用的脚本语言的内容类型（也称为MIME 类型）。
虽然text/javascript 和text/ecmascript 都已经不被推荐使用，但人们一直以来使用的都还是text/javascript。
实际上，服务器在传送JavaScript 文件时使用的MIME 类型通常是application/x–javascript，但在type 中设置这个值却可能导致脚本被忽略。
另外，在非IE浏览器中还可以使用以下值：application/javascript 和application/