什么是JavaScript？
JavaScript是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
（脚本语言：能直接通过浏览器的解释就可以运行，不用像Java那样需要虚拟机编译运行）
JavaScript和Java时完全不同的语言，不论是概念设计。但是基础语法类似。
JavaScript的引入方式
1.内部脚本：讲JS代码定义在HTML页面中
- JavaScript代码必须位于<script><script>标签之间
- 在HTML文档中，可以在任意地方，放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部，可改善显示速度
<script>alert("Hello JavaScript");
</script>
2.外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
- 外部JS文件中，只包含JS代码，不包含<script>标签
- <script>标签不能自闭合
<script src="js/demo.js"></script>
JS的书写语法
1.区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
2.每行结尾的分号可有可无，但一般还是建议加上分号
3.注释：
单行注释：//注释内容
多行注释：/*注释内容*/
4.大括号表示代码块
输出语句
1.使用window.alert()写入警告框
2.使用document.write()写入HTML输出
3.使用console.log()写入浏览器控制台
<script>window.alert("Hello javaScript");//浏览器弹出警告框document.write("Hello javaScript");//写入HTML，在浏览器展示console.log("Hello javaScript");//写入浏览器控制台
</script>
变量
1.JavaScript中用var关键字（variable的缩写）来声明变量。
2.JavaScript是一门弱类型语言，变量可以存放不同类型的值
3.变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
- 数字不能开头
- 建议使用驼峰命名
var的特点
1.作用域比较大，全局变量
2.可以重复定义，例如var x = 1；var x= ‘A’；最后x的值是A
注意事项
- ECMAScript 6 新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明。
- ECMAScript 6 新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。
数据类型
JavaScript中分为：原始类型（相当于Java里的基本数据类型）和引用类型
number：数字（整数、小数、NaN（Not a Number））
string：字符串，单双引皆可
boolean：布尔。true，false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是undefined
使用typeof运算符可以获取数据类型
var a = 20;
alert(typeof a);
typeof null // 返回object对象（早期的一个bug沿用至今）
typeof a // 返回undefine（没有定义a）
运算符
算符运算符：+, -, *, /, %, ++, --
赋值运算符：=, +=, -=, *=, /=, %=
比较运算符：>, <, >=, <=, !=, ==, ===(全等运算符)
逻辑运算符：&&, ||, !
三元运算符：条件表达式 ? true_value : false_value
区别：==会进行类型转换，===不会进行类型转换
var a = 10;
alert(a == "10");//返回true
alert(a === "10");//返回false
alert(a === 10);//返回true
类型转换
1.字符串类型转为数字：将字符串字面值转换为数字。如果字面值不是数字，则转为NaN。
2.其他类型转为boolean：
- Number：0和NaN为false，其他均转为true。
- String：空字符串为false，其他均转为true。
- Null和undefined：均转为false。
流程控制语句
- if...else if...else...
- switch
- for
- while
- do...while
函数
1.介绍：函数（方法）是被设计为执行特定任务的代码块。（相当于Java里的方法）
2.定义方式一：JavaScript函数通过function关键字进行定义，语法为：
function funcctionName(参数1,参数2...){//要执行的代码
}
定义方式二：
var functionName = function(参数1,参数2...){//要执行的代码
}
3.注意：
- 形式参数不需要类型。应为JavaScript是弱类型语言
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
- JS中，函数调用可以传递任意个数的参数。
4.调用：函数名称（实际参数列表）
JS对象
Array
1.JavaScript中Array对象用于定义数组。
2.定义：
var arr = new Array(1,2,3,4);//方式一：var 变量名 = new Array(元素列表);
var arr = [1,2,3,4];//方式二：var 变量名 = [元素列表];//方式二
3.访问
arr[10] = "hello";//arr[索引]=值;
4.注意：JavaScript中的数组相当于Java中的集合，数组的长度是可变的，而JavaScript是弱类型的，所以可以存储任意的类型的数据（即长度可变，类型可变）。
5.属性
| 属性 | 描述 |
|---|---|
| length | 设置或返回数组中元素的数量 |
6.方法
| 方法 | 描述 |
|---|---|
| forEach( ) | 遍历数组中的每个有值的元素，并调用一次传入的函数 |
| push( ) | 将新元素添加到数组的末尾，并返回新的长度 |
| splice( ) | 从数组中删除元素 |
var arr = [1, 2, 3, 4];
//for循环
for (let i = 0; i < arr.length; i++){console.log(arr[i]);
}
//forEach:遍历数组中有值的元素
arr.forEach(function(e){console.log(e);
})
//在ES6中有简化写法 箭头函数：(...) => {...} -- 简化函数定义
arr.forEach((e) => {console.log(e);
})
//push：添加元素到数组末尾
arr.push(7,8,9);
console.log(arr);//则数组arr为 1，2，3，4，7，8，9
//splice：删除元素
arr.splice(1,2);//arr.splice(开始的数（索引），要删几个)
console.log(arr);//则数组arr为 1，4
String
1.String字符串对象创建方式有两种：
var str = new String("Hello String");//方式一：var 变量名 = new String("...");
var str = "Hello String";//方式二：var 变量名 = "...";
var str = 'Hello String';
属性：
| 属性 | 描述 |
|---|---|
| length | 字符串的长度 |
方法：
| 方法 | 描述 |
|---|---|
| charAt() | 返回在指定位置的字符 |
| indexOf() | 检索字符串 |
| trim() | 去除字符串两边的空格 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
实例：
//创建字符串对象
//var str = new String("Hello String");
var str = "Hello String";
console.log(str);
//length
console.log(str.length);
//charAt
console.log(str.charAt(4));
//indexOf
console.log(str.indexOf("lo"));
//trim
var s = str.trim();
console.log(s);
//substring(start,end) --- 开始索引，结束索引（含头不含尾，左闭右开）
console.log(s.substring(0,5));
JavaScript自定义对象
1.定义格式：
var 对象名 = {属性名1：属性值1，属性名1：属性值1，属性名1：属性值1，函数名称：function（形参列表）{}
}
var user = {name:"Tom",age:20,gender:"male",//eat: function(){// alert("用膳~");//}eat(){alert("用膳~");}
};
2.调用格式：
console.log(user.name);//对象名.属性名;
user.eat();//对象名.函数名();
JSON
1.概念：JavaScript Object Notation，JavaScript对象标记法。
2.JSON是通过JavaScript对象标记法书写的文本。
3.由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。
4.定义：var 变量名 = '{"key1" : value1, "key2" : value2}';
示例：var userStr = '{"name" : "Jerry", "age" : 18, "addr" : ["北京", "上海", "西安"]}';
value的数据类型为：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true或false）
- 数组（在方括号中）
- 对象（在花括号中）
- null
5.JSON字符串转换为JS对象
var jsObject = JSON.parse(userStr);
6.JS对象转为JSON字符串
var jsonStr = JSON.stringify(jsObject);
实例：
//定义json
var jsonstr = '{"name" : "Jerry", "age" : 18, "addr" : ["北京", "上海", "西安"]}';
//json字符串->js对象
var obj = JSON.parse(jsonstr);
alert(obj.name);
//js对象->json字符串
alert(JSON.stringify(obj));
BOM
1.概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。
2.组成：
Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象
Window
1.介绍：浏览器窗口对象。
2.获取：直接使用window，其中window.可以省略
3.属性：
- history：对history对象的只读引用。
- location：用于窗口或框架的Location对象。
- navigator：对Navigator对象的只读引用。
4.方法：
- alert()：显示带有一段消息和一个确认按钮的警告框。
- confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
- setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
- setTimeout()：在指定的毫秒数后调用函数或计算表达式。
实例：
//获取
window.alert("Hello BOM");
alert("Hello BOM Window");
//方法
//confirm - 对话框 -- 确认：true，取消：false
var flag = confirm("您确认删除该记录嘛？");
alert(flag);
//定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){i++;console.log("定时器执行了"+i+"次");
},2000);
//定时器 - setTimeout -- 延迟指定时间执行一次
setTimeout(function(){alert("JS");
},3000);
Location
1.介绍：地址栏对象
2.获取：使用window.location获取，其中window.可以省略。
3.属性：
- href：设置或返回完整 的URL。
location.href = "https://www.bilibili.com";
DOM
1.概念：Document Object Model，文档类对象模型。
2.将标记语言的各个组成部分封装为对应的对象：
- Document：整个 文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
3.JavaScript通过DOM，就能够对HTML进行操作：
- 改变HTML元素的内容
- 改变HTML元素的样式（CSS）
- 对HTML DOM事件作出反应
- 添加和删除HTML元素
DOM是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：
1.Core DOM - 所有文档类型的标准模型
- Document：整个 文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
2.XML DOM -XML 文档的标准模型
3.HTML DOM - HTML文档的标准模型
- Image：<img>
- Button：<input type='button'>
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
Document对象中提供了以下获取Element元素对象的函数：
//根据id属性值获取，返回单个Element对象
var h1 = document.getElementById('h1');
//根据标签名称来获取，返回Element对象数组
var divs = document.getElementsByTagName('div');
//根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName('hobby');
//根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName('cls');
事件监听
事件绑定
方式一：通过HTML标签中的事件属性进行绑定
<input type = "button" onclick = "on()" value = "按钮1">
<script>function on(){alert('我被点击了！');
}
</script>
方式二：通过DOM元素属性绑定
<input type = "button" id = "btn" value = "按钮2">
<script>document.getElementById('btn').onlick = function(){alert('我被点击了！');}
</script>
常见事件
| 事件名 | 说明 |
|---|---|
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获取焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移动到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
