第一节：JavaScript简介
关于JavaScript
JavaScript一种直译式脚本语言，是一种动态类型、弱类型的语言。是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能的。
在1995年时，由Netscape(网景公司)的Brendan Eich(布兰登)，与Sun公司合作开发的一门脚本语言，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它和Java完全是两样东西
为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。
名字变化：Mocha ——LiveScript——JavaScript
JavaScript的作用
JavaScript的主要目的是，验证发往服务器端的数据、增加Web互动、加强用户体验度等，可用于开发网站、游戏、移动端APP等
JavaScript的组成
1、核心（ECMAScript）
2、流览器对象模型（BOM）
3、文档对象模型（DOM）
更多详细介绍，可参考JavaScript百度百科
JS的编写位置
内部JS
和CSS一样，JS就是以script标签，写在HTML内部的。JS只有这么一样标签可以写。但是值得注意的是标签内部是否有src.带有src的script标签叫外链JS。在外链JS里写的代码将被忽略。
内部JS可以写在head标签内，也可以写在body标签的任意位置。更多人会选择写在body内所有标签的最后部位。
外部JS
内部JS能用自己的方法实现JS代码的编写，但在实际开发中，很多也是分离的。更多地会把JS代码写在JS文件当中.这种写在文件外部的代码文件，叫外部JS(也叫外链JS)。
调用外部JS文件，会在script标签添加路径。
【属性】
src—— JS文件路径
在往下的例子中，为了方便会全部以内部JS说明内容，也会经使用常见的方法把script标签写在body的最后。
JS的代码规范
【变量的命名规范】
变量名必须是数字,字母,下划线_和美元符$组成;
第一个字符不能为数字
不能使用关键字或保留字
【代码可读性】
标识符区分大小写，如：age和Age是不同的变量。但强烈不建议用同一个单词的大小写区分两个变量。
变量命名尽量遵守驼峰原则: myStudentScore
变量命名尽量见名知意
保持代码缩进
JS语句的末尾尽量写上分号;
◦运算符两边都留一个空格, 如 var n = 1 + 2 ;
第二节：变量与数据类形
JS变量的定义
【变量定义】(使用var关键字)：变量是存储数据的容器
var age; //var 是关键字，age是变量名
【赋值】
age = 20;
【定义的同时赋值】
var age=20;
【一次定义多个变量】
var name=“zhangsan”, age=18, weight=108;
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变量与数据类形</title>
</head>
<body>
<script type="text/javascript">
//定义的同时赋值
var name = "张小宝";
var age = 18;
//一次定义多个变量
var rmb = 2000,number = 1001,gender = "男";
</script>
</body>
</html>
JS的注释与输出
注释
JavaScript 不会执行注释。我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。
单行注释以//开头。
多行注释以/*开始，以*/结尾。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注释</title>
</head>
<body>
<script type="text/javascript">
// 我是单行注释
/*我是多行注释第一行
我是多行注释第二行
我是多行注释第三行
我是多行注释第N行*/
</script>
</body>
</html>
输出
输出的内容，就是变量内容。
alert()—— 弹窗输出（测试时可用，但使用不是最多）
console.log()—— 输出到控制台（一般用于测试）
innerHTML—— 输出到双标签元素内容
value—— 输出到表单元素
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变量与数据类形</title>
</head>
<body>
<script type="text/javascript">
var name = "张小宝";
var age = 18;
var rmb = 2000,number = 1001,gender = "男";
alert(name);
alert(age);
alert(rmb);
alert(number);
alert(gender);
</script>
</body>
</html>
浏览器结果：
例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变量与数据类形</title>
</head>
<body>
<script type="text/javascript">
var name = "张小宝";
var age = 18;
var rmb = 2000,number = 1001,gender = "男";
console.log(name); //输出一个变量
console.log(age,rmb,number,gender) //输出多个变量
</script>
</body>
</html>
浏览器及控制台结果：
JS数据类型
基本数据类型
1、Number —— 数字类型
NaN ——除了阿拉伯数字外，还有NaN。它是一个特殊的值，即非数值(Not a Number)。数学运算无法得到数字时，就会返回NaN,它不代表任何值，也不等于任何值，甚至自己都不等于自己，任何数据与它运算都返回NaN，isNaN(a)：用来判断a到底是不是非数字,返回布尔值
2、String —— 字符串类型
用引号（单/双引号）括起来的内容
3、Boolean —— 布尔类型
Boolean 类型有两个值：true和false
引用数据类型
Array—— 数组
Object—— 对象
特殊数据类型
Null
Null 类型是一个只有一个值的数据类型，即特殊的值 null。它表示一个空对象引用(指针)
Undefined
Undefined类型只有一个值，即特殊的 undefined，在使用 var 声明变量，但没有对其赋值，这个变量的值就是 undefined
数据类型判断与转换
数据类型判断 typeof
例：
<script type="text/javascript">
console.log(typeof name);
console.log(typeof age);
console.log(typeof true);
console.log(typeof null);
</script>
控制台结果：
数据类型转换
1、基本数据类型转换：利用内置函数进行转换(主动)
Number()—— 强转为Number类型
Boolean()—— 强转为布尔类型
toString() 或 String()—— 强转为字符串类型
【区别】
typeof String(null)是String
typeof String(undefined)是String
例：
<script type="text/javascript">
var word = '10'; //定义一个字符串
console.log(typeof word); //word的数据类型是字符串
word2 = Number(word); //把字符串强转为Number类型
console.log(typeof word2);
word3 = Boolean(word); //把字符串强转为布尔类型
console.log(typeof word3);
</script>
控制台结果：
2、隐式转换(被动)
如果运算不能进行下去，内部就会尝试进行数据类型的转换
支持隐式转换的运算：逻辑运算、关系运算、算术运算
第三节：数学运算
基本数学运算
【运算符】
+—— 加法
-—— 减法
*—— 乘法
/—— 除法
%—— 取余
【运算函数】
NumObject.toFixed(digit)—— 四舍五入，
(在数字对象后面调用，digit为小数数位1-20，得到一个字符串)
parseInt()—— 取整
获取到第一个不为数字的字符(小数点、负号)为止。
parseInt(Q-ary，digit)可以把一个多进制数转化为十进制整数
parseFloat()—— 函数可解析一个字符串，并返回一个浮点数。
例：
<script type="text/javascript">
var a = 7,b = 3;c = 5.634
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);
console.log('');
var c2 = c.toFixed(0); //对C进行四舍五入，0表示保留0位小数
console.log(c2,typeof c2);
console.log(parseInt(c)); //取整
console.log(parseInt('AF',16)); //把十六进制AF转为十进制
</script>
控制台结果：
一个逗号引发的破产（字符串拼接）
例：
<script type="text/javascript">
var title1 = "逗号引发的",title2 = "破产";
console.log(title1 + title2); //字符串拼接
//1号元工的工资
var staff1 = 5000;
//2号元工的工资
var staff2 = '8000';
//3号元工的工资
var staff3 = 10000;
console.log(staff1+staff2+staff3); //字符串与数字的相加
</script>
浏览器控制台结果：
赋值操作与关系运算
赋值操作
=—— 赋值符号
+=—— 加等于，即在原来的内容基础上追加内容
-=—— 减等于
*=—— 乘等于
/=—— 除等于
%=——
关系运算（返回布尔值）
【关系符号】
==—— 等于
!=—— 不等于
<—— 小于
>—— 大于
<=—— 小于等于
>=—— 大于等于
===—— 恒等于/全等于，比较的时候要求值和类型都相等（不会进行类型隐式转换）
!==—— 不全等于
【关系运算符的比较规则】
1、 数字和数字比较, 直接比较大小
2、数字和字符串比较, 字符串转换为数字后再比较
3、字符串和字符串比较, 进行字符的ASCII码值比较
逻辑运算
逻辑运算“与或非”
&&—— 逻缉“与”
||—— 逻缉“或”
!—— 逻缉“非”
案例：闰年判断
【获取页面元素（节点）】
document.getElementById()—— 获取id名，得到的是节点
document.getElementsByClassName()—— 获取类名，注意getElement带了s,得到节点数组
document.getElementsByTagName()—— 获取i标签名，注意getElement带了s,得到节点数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>与或非</title>
</head>
<body>
<h1>闰年判断</h1>
请输入年份：<input type="number" id="year"><br/>
<br/>
<button id="btn"> 查询 </button>
<br/><br/>
<div id="rest"></div>
<script type="text/javascript">
// 获取所有元素
var getYear = document.getElementById('year');
var getButt = document.getElementById('btn');
var getRest = document.getElementById('rest');
//绑定点击事件
getButt.onclick = function(){
// 获取用户输入的元素值（获取DOM节点）
var fyear = getYear.value*1;
//逻缉判断（整四不整百，或整四百，才是闰年）
if((fyear%4==0 && fyear%100!=0)|fyear%400==0){
rest.innerHTML = '查询结果：' + fyear + '年是闰年';
}else{
rest.innerHTML = '查询结果：' + fyear + '年是平年';
};
}
</script>
</body>
</html>
浏览器结果：
一元运算
++—— 自增1（在原来的数值基础上加1）
--—— 自减1（在原来的数值基础上减1）
注意：一元运算有前置与后置之分，返回值是完全不同的。
【前置】返回值：返回值是减1（加1）之后的值
【后置】返回值：返回值是没减1（加1）之前的值
例：
<script type="text/javascript">
var a = 10;
//前置
console.log(++a);
var b = 20
console.log(--b);
//后置
var c = 30
console.log(c++);
var d = 40
console.log(d--);
</script>
控制台结果：
