什么是JavaScript
Web由三部分组成：
- HTML：负责网页的基本结构（页面元素和内容）。
- CSS：负责网页的表现效果（页面元素的外观、位置等页面样式，如：颜色、大小等）。
- JavaScript：负责网页的行为（交互效果）。
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言（脚本一词由script翻译过来，脚本语言和非脚本语言的区别就是需不需要编译，脚本语言不需要编译直接解释即可执行），是用来控制网页行为的，它能使网页可交互。JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为 ECMA 标准。ECMAScript和JavaScript的关系是，前者是后者的标准，后者是前者的一种实现。ECMAScript6 (ES6) 是最主流的 JavaScript 版本（发布于 2015 年)。
JavaScript的组成部分：
- 核心（ECMAScript）：描述了JS的语法和基本对象。
- 文档对象模型 （DOM）：处理网页内容的方法和接口
- 浏览器对象模型（BOM）：与浏览器交互的方法和接口
JS引入方式
内部脚本
将JS代码定义在HTML页面中，JS代码需要写在<script></script>标签中间。HTML页面可以在任意位置放置任意数量的<script></script>。
建议把<script></script>放在<body>元素下面，改善显示速度。
外部脚本
定义一个单独的JS文件，然后引入到HTML文件中。在外部JS文件，不需要包含<script>标签，直接写JS代码即可。<script>标签不能自闭和。
<script src='demo.js'></script>
JS基础语法
书写语法
- 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的。
- 每行结尾的分号可有可无
- 注释：
- 单行注释：//
- 多行注释：/* */
- 大括号表示代码块
if(count == 3){ alert(count); } - 输出语句
window.alert()写入到警告框document.write()写入到HTML中console.log()写入到浏览器控制台中
变量
JavaScript是一门弱类型语言，同一个变量可以先后存放不同类型的值。
变量名需要遵循如下规则：
- 只能包含字母、数字、下划线（_）或美元符号（$）
- 不能以数字开头
- 不能使用关键字
建议使用驼峰命名法，即变量和函数名采用小驼峰，即第一个单词首字母小写，后面每个单词首字母大写。类名和接口名采用大驼峰，即每个单词的首字母都要大写。
声明变量和常量：
var：声明变量，全局作用域/函数作用域，允许重复声明let：声明变量，块级作用域，不允许重复声明（建议使用let定义变量）const：声明常量，一旦声明，常量的值不能改变
数据类型
JavaScript中数据类型分为基本数据类型和引用数据类型，使用typeof运算符可以获取数据类型
基本数据类型
- numer：数字，包含整数、小数、NaN
- string：字符串，使用单引号或者双引号都可以
- boolean：布尔类型，只有
true和false两个值。 - null：对象为空。
- undefined：当声明的变量未初始化时，该变量的默认值是undefined。
引用数据类型：
- array：数组
- function：函数
- object：对象
运算符
| 运算符 | 描述 |
|---|---|
| 算术运算符 | + , - , * , / , % , ++ , -- |
| 赋值运算符 | = , += , -= , *= , /= , %= |
| 比较运算符 | > , < , >= , <= , != , == , === |
| 逻辑运算符 | && , || , ! |
| 三元运算符 | 条件表达式 ? true_value: false_value |
==和===的区别：==只比较值，===比较值和类型
类型转换：
- 字符串类型转换为数字：使用
parseInt()方法 - 其它类型转换为boolean：
- number：0、NaN转换为false
- string：空字符串""转换为false
- null和undefined转换为false
流程控制语句
流程控制语句与Java类似：
- if … else if … else…
- switch
- for
- while
- do … while
JS函数
定义方式：JavaScript函数通过function定义，JS函数的形参和返回值都不需要写数据类型，因为JS是弱类型语言。
// 定义方式一
function functionName(参数1,参数2..){
//要执行的代码
}
// 定义方式二
let functionName = function(参数1,参数2..){ // 相当于匿名函数
//要执行的代码
}
// 箭头函数的写法也可以
let functionName = (参数1,参数2..)=>{
//要执行的代码
}
调用：函数名称(实际参数列表)
JS对象
array
定义数组的两种方式：
// 方式一
let arr = new Array(1,2,3,4,5)
// 方式二
let arr = [1,2,3,4,5]
访问数组：
arr[1] = 10;
JS数组的长度可变，可以存储任意类型的数据
数组的常用属性：
| 属性 | 描述 |
|---|---|
| length | 设置或返回数组中元素的数量 |
数组的常用方法：
| 方法 | 描述 |
|---|---|
| forEach | 遍历数组中的每个有值的元素，并调用一次传入的函数 |
| push | 将新元素添加到数组的末尾，并返回新的长度 |
| splice | 从数组中删除元素 |
let arr = [1,2,3,4]
arr[9] = 9 // 改变数组长度，中间的用undefined填充
console.log(arr) // (10) [1, 2, 3, 4, 空 ×5, 9]
for (let i = 0; i < arr.length; i++) { // 会遍历每一个元素
console.log(arr[i])
}
// forEach方法
arr.forEach((e)=>{ // forEach方法只会遍历每个有值的元素，e就是每个元素
console.log(e)
})
// push方法
arr.push(5,6,7) // 一次push多个元素
console.log(arr) // (13) [1, 2, 3, 4, 空 ×5, 9, 5, 6, 7]
// splice方法
arr.splice(1,2) // 从下标1开始，删除2个元素
console.log(arr) // (11) [1, 4, 空 ×5, 9, 5, 6, 7]
string
定义字符串的两种方式：
// 方式一
let str = new String("Hello");
// 方式二 推荐
let str = "Hello";
string的常用属性：
| 属性 | 描述 |
|---|---|
| length | 字符串的长度 |
string的常用方法：
| 方法 | 描述 |
|---|---|
| charAt | 返回指定位置的字符 |
| indexOf | 检索子串在字符串中出现的位置，返回下标 |
| trim | 去除字符串首尾的空格 |
| substring | 取子串 |
let str = "Hello JavaScript";
console.log(str.charAt(1)); // e
console.log(str.indexOf("llo")); // 2
// substring(begin,end)取出的子串不包含end
console.log(str.substring(2,4)); // ll
JSON
JavaScript自定义对象
let user={
name:"Bob",
age:23,
gender:"male",
eat:function(){ // 定义函数的第一种语法
console.log("eat~");
},
sleep(){ // 定义函数的第二种语法
log("sleep~")
}
}
// 调用对象的属性和函数
console.log(user.name)
user.eat()
JSON的全称是JavaScript Obejct Notation，即JavaScript对象标记法，JSON是JS对象的字符串表示法，JS对象的key加上双引号，然后最外面加上单引号就成了JSON。
JSON 和 JS 对象互相转换
//要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
//要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'
BOM
BOM的全称是Browser Object Model（浏览器对象模型），如图所示，window对象是BOM的顶层对象，其他对象都是window对象的子对象。
window浏览器窗口对象
window对象直接使用即可，不需要创建，比如window.alert("Hello")，其中window.可以省略。
window的常用属性：
| 属性 | 描述 |
|---|---|
| location | 地址栏对象，通过href可以设置或返回完整的URL |
| history | 历史记录对象 |
| navigator | 浏览器对象 |
| screen | 屏幕对象 |
只需要掌握window对象和location对象即可。
window的常用方法：
| 方法 | 描述 |
|---|---|
| alert | 显示带有一段消息和一个确认按钮的警告框。 |
| confirm | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
| setInterval | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| setTimeout | 在指定的毫秒数后调用函数或计算表达式。 |
DOM
DOM的全称是Document Object Model（文档对象模型），将HTML超文本标记语言的各个组成部分封装成对应的对象：
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
W3C DOM 标准被分为 3 个不同的部分：
- Core Dom ：核心Dom，针对任何结构化文档的标准模型
- XML DOM：用于XML文档的标准模型，对XML元素进行操作
- HTML DOM： 用于HTML文档的标准模型，对HTML元素进行操作。
整个HTML文档可以看成一棵DOM树
<html>
<head>
<title>DOM</title>
</head>
<body>
<h1>DOM对象标题</h1>
<a href="https://itcast.cn">传智教育</a>
</body>
</html>
对于上面的代码来说，它对应的DOM树如下图所示：
通过document对象获取元素对象
- 根据id属性获取单个元素：
let h1 = document.getElementById('id1') - 根据标签名称获取一组元素：
let divs = document.getElementsByTagName('div') - 根据name属性获取一组元素：
let hobbys = document.getElementsByName('hobby') - 根据class属性获取一组元素：
let clss = document.getElementsByClassName('cls')
案例
有如下HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象-DOM-案例</title>
</head>
<body>
<img id="h1" src="img/off.gif"> <br><br>
<div class="cls">传智教育</div> <br>
<div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
</body>
</html>
要求实现如下效果：
JS代码如下：
<script>
//1. 点亮灯泡
let a = document.getElementById('h1');
a.src = "img/on.gif" // 实现方式：换一张开着灯的图片
//2. 将所有div标签的内容后面加上
let divs = document.getElementsByTagName('div')
for (let i = 0; i < divs.length; i++) {
divs[i].innerHTML+="<span style='color:red'>very good</span>"
}
//3. 使所有的复选框呈现选中状态
let checks = document.getElementsByName('hobby')
for (let i = 0; i < checks.length; i++) {
checks[i].checked = true
}
</script>
JS事件监听
事件：发生在HTML元素上的“事情”。比如按钮被点击、鼠标移动到元素上、输入框获得焦点等等。 事件监听：在某个事件发生时，执行相应的JavaScript代码。
事件绑定的两种方式
- 通过HTML标签中的事件属性进行绑定。这种方式将HTML代码和JS代码杂糅到了一起
<input type="button" onclick="on()" value="按钮1"> <script> function on(){ alert('我被点击了!'); } </script> - 通过DOM元素属性绑定。首先通过DOM获取元素
<input type="button" id="btn" value="按钮2"> <script> document.getElementById('btn').onclick=function(){ alert('我被点击了!'); } </script>
