1 邂逅JavaScript

1.1 认识JavaScript引擎

• 为什么需要JavaScript引擎呢？

• 高级的编程语言都是需要转成最终的机器指令来执行的；
• 事实上我们编写的JavaScript无论你交给浏览器或者Node执行，最后都是需要被CPU执行的；
• 但是CPU只认识自己的指令集（实际上是机器语言），他们才能被CPU所执行；
• 所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行；

• 比较常见的JavaScript引擎有哪些呢？

• SpiderMonkey：第一款JavaScript引擎，由Brendan Eich开发（也就是JavaScript作者）；
• JavaScriptCore：WebKit中的JavaScript引擎，Apple公司开发；
• V8：Google开发的强大JavaScript引擎，也帮助Chrome从众多浏览器中脱颖而出；

1.2 浏览器内核和JS引擎的关系

• 这里我们先以WebKit为例，WebKit事实上由两部分组成的：

• WebCore：负责HTML解析、布局、渲染等等相关的工作；
• JavaScriptCore：解析、执行JavaScript代码；

2 JavaScript基本语法

2.1 JavaScript编写方式

• 位置一：HTML代码行内（不推荐）

• 位置二：script标签中
  

• 位置三：外部的script文件（需要通过script元素的src属性来引入JavaScript文件）

2.2 元素的使用

• 如果运行的浏览器不支持JavaScript, 那么我们如何给用户更好的提示呢?

• 针对早期浏览器不支持 JavaScript 的问题，需要一个页面优雅降级的处理方案;
• 最终， 元素出现，被用于给不支持 JavaScript 的浏览器提供替代内容;

• 下面的情况下, 浏览器将显示包含在中的内容:

• 浏览器不支持脚本;
  
• 浏览器对脚本的支持被关闭。
  

• chrome 禁 JavaScript 的方式：

2.3 JavaScript注意事项

• 注意一: script元素不能写成单标签

• 在外联式引用js文件时，script标签中不可以写JavaScript代码，并且script标签不能写成单标签；(并且用作引入 js 代码的 script 标签中不能写 js 代码，不然会被覆盖失效)
• 即不能写成 <script src="index.js"/>；(某时你可能发现这样并未出问题，但是按标准这是错误的)

• 注意二: 省略type属性

• 在以前的代码中，<script> 标签中会使用 type=“text/javascript”；
• 现在可不写这个代码了，因为JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言；

• 注意三: 加载顺序

• 作为HTML文档内容的一部分，JavaScript默认遵循HTML文档的加载顺序，即自上而下的加载顺序；
• 推荐将JavaScript代码和编写位置放在body子元素的最后一行；

• 注意四: JavaScript代码严格区分大小写

• HTML元素和CSS属性不区分大小写，但是在JavaScript中严格区分大小写；

• 后续补充：script元素还有defer、async属性，我们后续再详细讲解。

2.4 Chrome 的调试工具

• 当我们在JavaScript中通过console函数显示一些内容时，也可以使用Chrome浏览器来查看：
  

• 另外补充几点：

1.如果在代码中出现了错误，那么可以在console中显示错误；

2.console中有个 > 标志，它表示控制台的命令行

• 在命令行中我们可以直接编写JavaScript代码，按下enter会执行代码；
• 如果希望编写多行代码，换行需要用 shift + enter 才不会执行

3.在后续我们还会学习如何通过debug方式来调试、查看代码的执行流程；

2.5 JavaScript交互方式

• JavaScript有如下和用户交互的手段：
  

在浏览器控制台写 js 的时候如果要写多行代码的话

2.6 JavaScript语句和分号

• 语句是向浏览器发出的指令，通常表达一个操作或者行为（Action）。

• 语句英文是Statements；

• 通常每条语句的后面我们会添加一个分号，表示语句的结束：

• 分号的英文是semicolon
• 当存在换行符（line break）时，在大多数情况下可以省略分号；
• JavaScript 将换行符理解成“隐式”的分号；
• 这也被称之为自动插入分号（an automatic semicolon）；

• 推荐：

• 前期在对JavaScript语法不熟悉的情况推荐添加分号；
• 后期对JavaScript语法熟练的情况下，任意！

2.7 JavaScript注释方式

• 在HTML、CSS中我们都添加过注释，JavaScript也可以添加注释。
  
• JavaScript的注释主要分为三种：

• 单行注释
  
• 多行注释
  
• 文档注释（VSCode中需要在单独的JavaScript文件中编写才有效）这样用到这个方法时就会有提示效果，能显示你的注释内容
  

• 注意：JavaScript也不支持注释的嵌套

3. 变量

变量的命名格式

• 在JavaScript中如何命名一个变量呢？包含两部分：

• 变量的声明：在JavaScript中声明一个变量使用var关键字（variable单词的缩写）（后续学习ES6还有let、const声明方式）
  
• 变量的赋值：使用 = 给变量进行赋值；
  

• 这个过程也可以分开操作（不建议这样）：

• 同时声明多个变量（不建议这样）：

变量的命名规范

• 变量命名规则：必须遵守

1.第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）

2.其他字符可以是字母、下划线、美元符号或数字

3.不能使用关键字和保留字命名：

• 什么是关键字，什么是保留字？
  developer.mozilla.org/zh-CN/docs/…
  

4.变量严格区分大小写

• 变量命名规范：建议遵守

• 多个单词使用驼峰标识（小驼峰）；
• 一条语句结束后加上分号; 也有很多人的习惯是不加；
• 变量应该做到见名知意；