1. Overview

  • ECMAScript
    • 语法、变量、关键字、保留字、值、原始类型、引用类型运算、对象、继承、函数
  • DOM (document object model (W3C规范
    • 获取、添加、修改、删除 HTML元素
  • BOM (browser object model (没有规范 -> 兼容性
    • 滚动条，窗口宽高、事件、注册事件处理函数，事件冒泡捕获、键盘、鼠标、正则？

2. 执行

JS引擎是单线程， 但可以模拟多线程

轮转时间片：

  • 能够在短时间内轮流执行多个任务的片段
  • 步骤：
    1. 任务1、任务2
    2. 切分任务1、任务2
    3. 随机排列这些任务片段，组成队列
    4. 按照这个队列顺序将任务片段送进JS进程
    5. JS进程执行一个又一个的任务片段

3. 代码块的引用

  • 外部文件引用 和 内部脚本引用 两种形式，建议使用外部文件引用

  • 引用时，需正确声明类型 type="text/javascript"

    1. // index.html
    2. <body>
    4. <script type="text/javascript" src="js/index.js"></script> 
    6. <script type="text/javascript">
    7.     document.write("Inner JS.")
    8. </script> 
    9. </body>

4. JavaScript作为编程语言


编程语言的四个要素： 变量、数据结构、函数、运算能力

4.1 变量：

概念：

存储数据的容器，用于后续的使用

声明与赋值：

  • var -> variable
  • var a; -> 为变量 申请/分配 一个存储空间，并命名为a ```javascript var a; // 变量声明 a = 3; // 变量赋值 var a = 3; // 变量声明并赋值

var x = 1, // 单一var声明：一个var声明多个变量 y = 2;

  2. <a name="CQiUw"></a>
  3. #### 命名规范：
  5. - 不能以数字开头，但可以以字母，下划线，$开头
  6. - 中间可以包含数字
  7. - 不能使用关键字、保留字命名
  9. <a name="YR8Yy"></a>
  10. #### 命名建议：
  12. - **语义化、结构化**
  13. - **JS钩子命名：**
  14.    - id: J_header, js_header, j_header   ->  下划线
  15.    - class: J-header, js-header, j-header  -> 中横线
  16. - **变量名小驼峰，类名大驼峰**
  17. - 尽量使用英文和常用缩写，尽量不要使用拼音和拼音缩写
  19. <a name="Ef4Yt"></a>
  20. #### 优先级：
  21. 运算 >  赋值
  23. <a name="0Nknl"></a>
  24. #### JS的值：原始值 & 引用值
  26. - 原始值（基本类型
  27.    - number
  28.    - string
  29.    - boolean
  30.    - undefined
  31.    - null
  32. - 引用值
  33.    - object
  34.    - array
  35.    - function
  36.    - date
  37.    - RegExp
  38. - JS是一种**弱类型语言**：声明变量的时候不声明数据类型，而是通过值来判断数据类型。
  39. - 动态语言 -> 脚本语言 -> 解释型语言 ->  弱类型语言
  40. - 静态语言 -> 编译型语言 -> 强类型语言
  42. <a name="ov4mk"></a>
  43. #### 值的存储：栈内存 & 堆内存
  45. - 原始值存在栈内存中，且数据是永久保存，不可改变的
  46. - 引用值存在堆内存中，栈内存中保存堆内存引用值的地址
  47. ```javascript
  48. // 原始值的存储
  49. var a = 3;  // 在栈内存开辟一块空间（地址1008），命名为a，存储原始值3
  50. var b = a;  // 在栈内存开辟一块空间1007，命名为b，将原始值3复制到b中
  52. a = 1;      // 在栈内存再开辟一块空间1006，命名为a，存储原始值1
  53.                         // 原来空间1008抹去名称a，但数据3仍保留
  55. var arr1 = [1, 2, 3, 4]; // 在堆内存开辟一块空间1001，存储引用值[1, 2, 3, 4]
  56.                                                  // 在栈内存开辟一块空间1005，命名为arr1，存储堆内存的地址h1001
  57. var arr2 = arr1;   // 在栈内存开辟一块空间1004，命名为arr2
  58.                                      // 复制arr1栈内存1005的内容，即堆内存的地址h1001
  59. arr1.push(5);      // 堆内存1001，push(5), arr2依然指向堆内存1001
  61. arr1 = [1, 2];     // 堆内存开辟一块空间1002，存储引用值[1, 2]
  62.                                      // 栈内存新开辟一块空间1004，命名为arr1，存储堆内存的地址h1002
  63.                                      // 原来空间1005抹去名称arr1，但数据h1001仍保留
  64.                    // arr2依然指向堆内存1001
  66. document.write(arr1, " | ", arr2)  // -> 1,2 | 1, 2, 3, 4, 5