跳到主要内容

JavaScript 入门

基本概念​

JavaScript 组成​

  • The Core (ECMAScript);
  • The Document Object Model (DOM);
  • The Browser Object Model (BOM);

文档模式​

分类​
  • quirks mode;
  • standards mode (推荐使用);
  • almost standards mode;
standards mode 语法格式​
<!DOCTYPE html>
compatMode 属性​
// 表示 html 渲染模式
if (document.compatMode == "CSS1Compat") {
  console.log("Standards mode");
} else {
  console.log("Quirks mode");
}

规范​

手册​

MDN

ECMA-262 (ES6)​
  • js 语言规范;
ECMAScript​
  • 对 ECMA-262 的描述;
  • JavaScript 实现了 ECMAScript;

script 标签​

语法格式​
<!-- 外部引用, 依次执行 -->
<script src="example.js" defer></script>
<script src="http://www.somewhere.com/afile.js"></script>
<!-- 内部引用 -->
<script>
  console.log(1);
</script>
<!-- 同时使用, 内部引用忽略 -->
<script src="file.js">
  console.log(1); // 忽略
</script>
基本属性​
  • src;
  • async;
    • 异步执行 js 脚本;
    • 不堵塞 html 解析;
    • html 解析过程时, 同时下载 js 脚本, 下载完成后立刻执行, 不管 html 解析完成与否;
    • 不保证 js 脚本执行顺序;
    • 在 load 事件前执行完毕;
  • defer;
    • 合理推迟 js 脚本运行时间, 防止页面加载堵塞;
    • 不堵塞 html 解析;
    • html 解析完成后, 才会执行 js 脚本;
    • 顺序执行 js 脚本;
    • 在 DOMContentLoaded 事件前执行完毕;
  • async 和 defer 仅适用于外部脚本, 避免其操作 DOM;

noscript 标签​

<!-- 放置于 body, 在浏览器不支持 js 时显示 -->
<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <noscript>
      <p>This page will be displayed in a JavaScript-unable browser.</p>
    </noscript>
  </body>
</html>