简单脚本

1. 在 Web 页面添加 JavaScript

2.1 包含在 HTML 文件里

<script>
    ...Javascript 语句...
</script>

2.2 保存单独文件并包含到页面

利用 <script> 元素的的 src （源）属性指定文件名。

<!-- JavaScript 文件与调用脚本在同一个文件夹 -->
<script src='mycode.js'></script>

<!-- 不再同一个文件夹 -->
<script src='/path/to/mycode.js'></script>

<script src='http://www.example.com/path/to/mycode.js'></script>

JavaScript 代码保存到单独文件的好处：

JS 代码有更新时，更新立即作用于使用该文件的页面，对于 JavaScript 库尤为重要。
HTML 页面代码保持简洁，提高易读性和可维护性。
提高性能。浏览器把包含文件进行缓存，当前页面或其他页面再次需要使用该文件时可以使用本地副本。

JavaScript 代码文件的后缀是 .js，外部文件中是纯粹的 JavaScript 代码，不包含 <script> 等 HTML 标签。文件可以放置到 HTML 页面的 <head> 或 <body> 区域，但一般情况放到 <head> 区域，让文档的其他部分能够调用其中的函数。

如果利用 <script> 元素的 src 属性包含了外部 JavaScript 文件，就不能在 <script> 和 </script> 之间包含 JavaScript 语句了，该区域必须为空。

2. JavaScript 语句

书写规范：

// F1: 每条语句写一行
语句1
语句2

// F2: 同一行多条语句，每条语句以分号表示结束
语句1; 语句2;

// 推荐：两种结合
语句1;
语句2;

代码注释：

// 单行注释

// 多
// 行
// 注
// 释

/* 另一种
多行注释 */

JavaScript 也可以使用 HTML 注释语法实现单行注释，但一般不使用。

3. 变量

变量名要求与规范
- 小驼峰命名法 -- 首字母小写，后续单词首字母大写， let userAge = 10;。
- 常量使用大写+下划线 const MAX_RETRY_COUNT = 5;
- 标识符
  - 区分大小写
  - 只使用字母、数字（不能开头）、美元符号和下划线
  - 禁用关键字和保留字

特性	var	let	const
引入版本	早期原生版本 (ES5 及以前)	ES6 (2015)	ES6 (2015)
作用域	函数作用域：在大括号 `{}` 外依然可见	块级作用域：仅在 `{}` 大括号内有效	块级作用域：仅在 `{}` 大括号内有效
变量提升	允许：提升至作用域顶部，值为 `undefined`	不允许：在声明前使用会触发错误	不允许：在声明前使用会触发错误
重复声明	允许：可以在同一作用域重复定义	禁止：同一作用域内不可重名	禁止：同一作用域内不可重名
重新赋值	允许	允许	禁止：声明后值不可更改（只读）
初始值	不需要初始值	不需要初始值	必须在声明时初始化赋值
建议程度	不推荐	推荐：用于存储会改变的变量	首选：用于存储常量或不需改变的引用

4. 操作符

4.1 算术操作符

可使用标准加（+）减（-）乘（*）除（/）模（%）。
自增（++ +=）自减（-- -=）与C语言一致

4.2 操作符优先级

与 C 基本一致，多用括号。

4.3 字符串操作符 `+`

用于两个或多个字符串的连接。
连接一个字符串变量和一个数值变量时，JavaScript 把数值转换为字符串，再连接两个字符串。

5. 捕获鼠标事件

JavaScript 使用事件处理器（event handler）来处理时间。以下介绍其中3个： onClick onMouseOver onMouseOut

5.1 onClick 事件处理器

onClick 事件处理器几乎可以用于页面上任何可见的 HTML 元素。实现它的方式之一时给 HTML 元素添加一个属性：onclick="...一些JavaScript语句..."

这种方式可行但不好，后续会有更强大、更灵活的方式。

<body>
    <input type="button" onclick="alert('You clicked the button!')" value="Click Ne" />
</body>

称事件处理器为 onClick，而在 HTML 元素中添加它时却使用小写 onclick，是因为 HTML 不区分大小写，而 XHTML （基于 XML 的更严格的 HTML 版本）是区分大小写的，为保证代码兼容性，要求全部 HTML 元素及属性名使用小写字母。

5.2 onMouseOver 和 onMouseOut 事件处理器

用于检测鼠标指针与特定页面元素的位置关系。鼠标进入页面上某个元素所占据的区域时出发 onMouseOver 事件，离开这一区域时出发 onMouseOut 事件。

<body>
    <img src="1.jpg" alt="img1" onmouseover="this.src='0.jpg';" onmouseout="this.src='1.jpg';" />
</body>

当事件处理器是通过 HTML 元素的属性添加到页面时， this 是指 HTML 元素本身。

6. 函数

function funcName(a, b){
    alert(a*b);
    // ...其他语句...
    return a*a+b*b;
}

// 调用函数,用变量存储返回值
let ans = funcName(1, 3);

alert(funcName(2, 2));

“方法”实际上就是属于特定类的函数。