一、JavaScript的引入方式
1.内部脚本
将JS代码定义在HTML页面中。在HTML中，JS代码必须位于<script></script>之间。
【tips】一般把脚本放在<body>的底部，可改善显示的速度，因为脚本执行会拖慢显示。
2.外部脚本
将JS代码定义在外部的JS文件中，然后引入到HTML页面中。
【注意】外部脚本中不能包含<script>。
二、JavaScript基础语法
1.书写语法
（1）区分大小写；
（2）每行结尾的分号可有可无；
（3）注释：同Java；
（4）{} 表示代码块（同Java）。
2.输出语句
| window.alert() | 弹出警告框 |
| document.write() | 写入HTML页面 |
| console.log() | 写入浏览器控制台 |
【tips】"window."可以省略不写。
3.变量
（1）JS使用var关键字(varable的缩写)来声明变量。
【tips】JS是一门弱类型语言，同一个变量可以存放不同类型的值。
（2）变量名遵循原则
同Java。
（3）使用var定义变量的特点：
1）作用域：相当于全局变量。
2）变量可以重复定义。
（4）let关键字和const关键字
ECS6新增了let和const关键字。
1）let：用来定义一个变量，用法同var，但声明的变量只在let所在代码块内生效，且不允许重复定义。
2）const：用来定义一个只读的常量，一旦声明，常量的值就不能改变。
4.数据类型
JS中的数据类型分为原始类型和引用类型。
（1）5种原始类型：
| number | 表示整数、小数、NaN |
| string | 字符、字符串（单双引都可） |
| boolean | true/false |
| null | 对象为空 |
| undefined | 当声明的变量未初始化时，该变量的默认值是undefined |
（2）引用类型：同Java。
5.运算符
（1）关系运算符：在JS中，关系运算符会先进行类型转换，再进行比较。
（2）==与===的区别：
1）==：先判断类型是否一样，如果不一样则进行类型转换，再进行等值判断：
2）===：先判断类型是否一样，如果不一样，直接返回false；如果类型一样，才进行等值判断：
（3）类型转换：
1）其他类型→number：
string→number：一般使用parseInt()将string转成number，按照字符串的字面值转为number；如果字面值不是数字（如字母），会转成NaN；
boolean→number：true→1，false→0；
2）其他类型→number：
number：0/NaN→false，其他数字→true；
string：空字符串→false，其他字符串→true；
null：转为false；
undefined：转为false。
6.流程控制语句
if/switch/for/while/do...while（同Java）。
7.函数（方法）
（1）方法的定义：
JS通过function关键字定义方法：
1）方式一：
【注意】形参和返回值不需要规定数据类型（因为JS是弱类型语言），返回值直接用return返回即可。
2）方式二：
（2）方法的调用：
方法名(参数列表);
【tips】在JS中，方法调用可以传递任意个数的参数。
三、JavaScript对象
1.Array
用来定义数组。
（1）定义方式
1）方式一：
2）方式二：
（2）访问（同Java）
【tips】JS中的数组相当于Java中的集合，类型和长度都可以改变（变长变类型）。
（3）Array常用方法
| push(num); | 添加元素 |
| splice(startIdx,n); | 从startIdx索引起删除n个元素。 |
2.String
（1）定义方式
1）方式一：
2）方式二：
（2）string常用方法
| charAt(); | 返回指定索引处的字符。 |
| indexOf(); | 检索字符串。 |
| trim(); | 去除字符串前后的空白字符。 |
3.RegExp
正则表达式，定义了字符串组成的规则。
（1）定义：直接量，注意不要加引号！
（2）语法：
| ^ | 表示正则表达式的开始 |
| $ | 表示结束 |
| [] | 代表某个范围内的单个字符，如[0-9]：0-9内的单个数字字符 |
| . | 代表除了换行和行结束符之外的任意单个字符 |
| \w | 代表单词字符（字母、数字、下划线_），相当于[A-Za-z0-9_] |
| \d | 代表数字字符，相当于[0-9] |
| + | 至少一个 |
| * | 0个或多个 |
| ? | 0个或一个 |
| {x} | x个 |
| {m,} | 至少m个 |
| {m,n} | 至少m个，至多n个 |
| test(str) | 判断指定字符串str是否符合规则，符合返回true，不符合返回false。 |
4.自定义对象
（1）格式：
（2）示例：
四、BOM对象
1.Browser Object Model 浏览器对象模型
JS将浏览器的各个组成部分封装成对象。
2.组成
（1）Window：浏览器窗口对象
（2）Navigator：浏览器对象
（3）Screen：屏幕对象
（4）History：历史记录对象
（5）Location：地址栏对象
3.Window对象
（1）获取：直接使用window，且window.可以省略。
（2）属性：获取其他BOM对象
（3）方法
| alert(); | 显示带有一段消息和一个确认按钮的警告框。 |
| confirm(); |
显示带有一段消息以及确认按钮和取消按钮的对话框，点确认返回true，点取消返回false。 |
| setInterval(function,毫秒值); | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| setTimeout(function,毫秒值); | 在指定的毫秒数后调用函数或计算表达式。 |
4.History对象
（1）获取：使用window.history获取：
（2）方法
| back(); | 加载history列表中的前一个URL。 |
| forward(); | 加载history列表中的后一个URL。 |
5.Location对象
（1）获取：使用window.location获取：
（2）属性：href：设置或返回完整的URL。
五、DOM
1.Document Object Model 文档对象模型
将标记语言的各个组成部分封装为对象。
2.组成
（1）Document：整个文档对象
（2）Element：元素（标签）对象
（3）Attribute：属性对象
（4）Text：文本对象
（5）Comment：注释对象
3.获取Element对象
通过使用Document对象的方法来获取：
| getElementById() | 根据id属性值获取，返回一个Element对象。 |
|
getElementByTagName() |
根据标签名称获取，返回Element对象数组。 |
|
getElementByName() |
根据name属性值获取，返回Element对象数组。 |
|
getElementByClassName() |
根据class属性值获取，返回Element对象数组。 |
4.常见HTML Element对象的使用
通过查看文档手册来使用。
六、事件监听
1.什么是HTML事件和事件监听？
（1）HTML事件：发生在HTML元素上的一些操作，如按钮被点击、鼠标移动到元素上、按下键盘等。
（2）事件监听：JS可以在事件被侦测到时执行代码。
2.事件绑定
绑定方式：通过DOM元素属性绑定
3.常见事件
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onchange | 域的内容被改变 |
| onclick | 鼠标单击 |
| onkeydown | 某个键盘按键被按下 |
|
onmouseover |
鼠标移到某个元素之上 |
|
onmouseout |
鼠标从某个元素移开 |
|
onsubmit |
确认按钮被点击 |
京公网安备 11010502036488号