定位

JavaScript 与其宿主关系密切，实际上宿主为 JavaScript 定义了与外界交互的全部API：DOM、网络请求、系统硬件、存储、事件、文件、加密，还有数以百计的其他API。各种浏览器及其 JavaScript 引擎都按照自己的理解实现了这些规范。对 JavaScript 更准确的定位应该是一组浏览器的实现

浏览器及其内核
  • Chrome：V8/blink
  • Firefox：Gecko/SpiderMonkey
  • Safari：WebKit/JavaScriptCore
  • 微软：Trident/EdgeHTML/Chakra
JavaScript
  • 核心：ECMAScript
  • 文档对象模型：DOM；文档对象模型是针对XML但经过扩展用于HTML的应用程序编程接口。DOM把整个页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点
  • 浏览器对象模型：BOM。支持可以访问和操作浏览器窗口的浏览器对象模型
JS的引入方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JS引入方式</title>
  <script>
    // 2.内嵌式
    alert('内嵌式 js');
  </script>
  <!-- 3.引入式 -->
  <script src="./outer.js"></script>
</head>
<body>
  <!-- 1.行内式 -->
  <button onclick="alert('行内式js')">点我</button>
</body>
</html>

浏览器解释 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>引入JS</title>
  <script>
    // 解释这里时按照顺序代码顺序解释，此时页面在等待
    alert('Hello World!');
  </script>
  <!-- 此处会先加载 foo.js 文件，然后加载 bar.js 文件 -->
  <script text="java/javascript" src="foo.js"></script>
  <script text="java/javascript" src="bar.js"></script>
</head>
<body>
  <!-- 此处是页面内容 -->
</body>
</html>
上述内容会导致页面加载延迟，浏览器窗口留白问题。

解决办法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>引入JS</title>
</head>
<body>
  <!-- 此处是页面内容 -->
  <!-- 即等页面渲染完毕再加载脚本文件 -->
  <script text="java/javascript" src="foo.js"></script>
  <script text="java/javascript" src="bar.js"></script>
</body>
</html>
defer 延迟脚本

为 script 声明 defer 属性表明：脚本执行的时候不修改页面结构，即脚本可以在页面完全渲染后执行
保证次序：即 bar 在 foo 之后加载（书上又备注说可能不保证，此处我也不太明白）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>引入JS</title>
  <script text="java/javascript" src="foo.js" defer></script>
  <script text="java/javascript" src="bar.js" defer></script>
</head>
<body>
  <!-- 此处是页面内容 -->
</body>
</html>
async 异步脚本

async 与 defer都只适用于外部脚本，都会告诉浏览器立即开始下载
不保证次序：bar 和 foo 不一定谁先加载好

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>引入JS</title>
  <script text="java/javascript" src="foo.js" async></script>
  <script text="java/javascript" src="bar.js" async></script>
</head>
<body>
  <!-- 此处是页面内容 -->
</body>
</html>
noscript标签

检测浏览器是否支持 js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用JS</title>
  <script text="java/javascript">
   alert('Hello World!');
  </script>
</head>
<body>
  <!-- 不支持js 或者 关闭js 会展示该标签 -->
  <noscript>
   本页面需要浏览器支持（启动）JavaScript
  </noscript>
</body>
</html>
扩展一：JS是解释型语言

编译器：代码执行之前进行编译，生成中间文件（例如Java语言）
解释器：运行时进行及时解释，并立即执行（例如 JS脚本语言）

javascript红宝石书下载 js红宝书是什么_javascript红宝石书下载

扩展二：script位置问题（DOM案例）
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>script位置</title>
  <!-- 
    如果js代码不涉及操作页面元素，可以放前面；
    如果需要操作页面元素，则会导致无法获取页面元素
   -->
  <script>
    // 方式二：window.onload()当页面中的结构和内容都加载完成才会执行这里面的代码
    // JQ中也有一个对应的方法 $(document).ready(function(){})
    window.onload = function() {
      let box = document.getElementById('box');
      box.style.backgroundColor = 'tomato';
    }
  </script>
</head>
<body>
  <div id="box">啦啦啦</div>
  <!-- 方式一：放在页面底部：保证页面结构加载完成才会做这些事情 -->
  <!-- <script>
    let box = document.getElementById('box');
    box.style.backgroundColor = 'tomato';
  </script> -->
</body>
</html>