跳到主要内容

JavaScript 入门

环境配置​

编辑器​

IDE​
  • WebStorm；
编辑器​
  • vscode；

开发者控制台​

Google Chrome​
  • F12；

手册​

MDN

基本概念​

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>

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>

规范​

ECMA-262 (ES6)​
  • js 语言规范；
ECMAScript​
  • 对 ECMA-262 的描述；
  • JavaScript 实现了 ECMAScript；
ES6 特性​
  • let，const；
  • BigInt，Symbol；
  • Map，Set；
  • 箭头函数；
  • 模板字符串；
  • 解构赋值和拓展运算符；
  • class；
  • promise/async/await；
  • ESM 模块；
  • 迭代器和生成器；
  • Proxy，Reflect；