目录
3、外联式：存在于外部JS文件，通过script标签src属性链接
注：a = i++ （a先赋值，后i自增）；a = ++i （ i先自增，a后赋值）
一、JS语言介绍
1、概念
浏览器脚本语言：可以编写运行在浏览器上的代码程序
属于解释性、弱语言类型编程语言
2、组成
ES语法：ECMAScript、主要版本ES5和ES6
DOM：文档对象模型(Document Object Model)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。
BOM：浏览器对象模型(Browser Object Model)，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构；且由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
注意：DOM属于BOM内，是BOM的子对象，但是由于内容庞大，单独拿出来。3、调试方式
alert() ：页面弹框
<script type="text/javascript"> var a = 10; var b = 20; alert(a); alert(b); </script>console.log() ：控制台打印（推荐）
<script type="text/javascript"> var a = 10; var b = 20; console.log(a); console.log(b); </script>document.write() ：页面打印（不推荐）
<script type="text/javascript"> var a = 10; var b = 20; document.write(a); document.write(b); </script>浏览器断点调试
4、页面弹框类别（三类）
alert：普通弹出框
<script> //弹出框: 一个弹出框只能弹出一条信息 alert("普通弹出框", "hello"); // hello被忽略了 </script>
confirm：确认框
<script> // 确认框 var res = confirm("你是男的吗?"); // true | false alert(res); </script>
prompt：输入框
<script> // 输入框 var res = prompt("请输入!"); // 确定为输入值, 取消为null alert(res); </script>
二、存在位置（三类）
1、行间式：存在于行间事件中
<body id="body" onload="body.style.backgroundColor='#0ff'"> </body>2、内联式：存在于页面script标签中
<body id="body"> <script type="text/javascript"> body.style.backgroundColor='#0ff' </script> </body>2.1 内联式内js的放置位置
位于head标签内末端（依赖型JS库）：提供body内需求的事件、变量等
例：head内的js函数，给下方body内的按钮提供点击事件。位于body标签内（功能型JS脚本）：执行事件、插入文本等
3、外联式：存在于外部JS文件，通过script标签src属性链接
index.js文件 body.style.backgroundColor='#0ff' index.html文件 <script src="./js/index.js"></script>注意一：不存在类别优先级，以执行顺序决定最后采用样式。
注意二：若内联、外联同时存在，则无视内联，以外联式为准。
<script src="./js/index.js"> function myFunction() { document.getElementById("demo").innerHTML="My First JavaScript Function"; } </script>
三、JavaScript语句规范
1、分号 ; （分割js语句）
提示：也可能看到不带有分号的案例。在 JavaScript 中，用分号来结束语句是可省的。
2、编译型逐条执行
3、代码块{}，作用是使语句序列一起执行
4、自动忽略多余空格。
因为，var name="Hello"; 等效于 var name = "Hello"; 可以适当使用空格提高可读性。
5、小驼峰命名法（首字母小写，后接单词大首字母大写）
例：helloWord、getElementById
6、使用反斜杠进行代码折行
正确演示： document.write("Hello \ World!"); 错误示范： document.write \ ("Hello World!");7、//单行注释，/**/多行注释
// 输出标题： document.getElementById("myH1").innerHTML="Welcome to my Homepage"; // 输出段落： document.getElementById("myP").innerHTML="This is my first paragraph."; /* 下面的这些代码会输出 一个标题和一个段落 并将代表主页的开始 */ document.getElementById("myH1").innerHTML="Welcome to my Homepage"; document.getElementById("myP").innerHTML="This is my first paragraph.";
四、变量
1、命名规范
与代数一样，JavaScript 变量可用于存放值（比如 x=2）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
提示：JavaScript 语句和 JavaScript 变量都对大小写敏感。
2、ES5定义变量
var num = 10; // 无块级作用域变量 num = 10; // 全局变量3、ES6定义变量
let num = 10; // 局部变量 const NUM = 10; // 常量4、单语句多变量
//单行 var name="Gates", age=56, job="CEO"; //多行 var name="Gates", age=56, job="CEO";
五、数据类型
number：数字类型（不分浮整）
var x1=34.00; //使用小数点来写 var x2=34; //不使用小数点来写 var y=123e5; // 12300000 var z=123e-5; // 0.00123 var a = 10; console.log(a, typeof a) // 判断方式 console.log(typeof a == 'number')
string：字符串类型
var a = '10'; var carname="Bill Gates"; console.log(a, typeof a) // 判断方式 console.log(typeof a == 'string')
boolean：布尔类型
var a = true; console.log(a, typeof a) // 判断方式 只有true 和 false 两种值 console.log(typeof a == 'boolean')
undefined：未定义类型
var a = undefined; console.log(a, typeof a) // 判断方式 console.log(typeof a == 'undefined') console.log(a == undefined)
null：空对象
var a = null; console.log(a, typeof a) // 判断方式 console.log(typeof a == 'object') console.log(a == null)
Array：数组对象
var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo"; var cars=new Array("Audi","BMW","Volvo"); var cars=["Audi","BMW","Volvo"]; var a = new Array(1, 2, 3, 4, 5); console.log(a, typeof a) // 判断方式 console.log(typeof a == 'object') console.log(a instanceof Object) console.log(a instanceof Array)
Date：时间对象
var a = new Date(); console.log(a, typeof a) // 判断方式 console.log(typeof a == 'object') console.log(a instanceof Object) console.log(a instanceof Date)
RegExp：正则对象
var a = new RegExp(); console.log(a, typeof a) // 判断方式 console.log(typeof a == 'object') console.log(a instanceof Object) console.log(a instanceof RegExp)
对象（类 map，dic）
/*对象由花括号分隔。 在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。 属性由逗号分隔：*/ var person={firstname:"Bill", lastname:"Gates", id:5566}; var person={ firstname : "Bill", lastname : "Gates", id : 5566 }; //寻址方式（两种） name=person.lastname; name=person["lastname"];
六、类型转换
数字|布尔 转换为 字符串
var a = 10 or true String(a) a.toString()
布尔|字符串 转换为 数字
var a = true or '10' Number(a) + a parseFloat() parseInt()
字符串|数字 转换为 布尔
var a = 10 or '10' Boolean(a)
自动转换
5 + null // 5 "5" + null // "5null" "5" + 1 // "51" 文本相加操作 "5" - 1 // 4 计算操作
特殊产物 NaN
// NaN: 非数字类型 // 不与任何数相等，包含自己 // 利用isNaN()进行判断
七、运算符
1、JavaScript 算术运算符
算术运算符用于执行变量与/或值之间的算术运算。
给定 y=5，下面的表格解释了这些算术运算符：
运算符 描述 例子 结果 + 加 x=y+2 x=7 - 减 x=y-2 x=3 * 乘 x=y*2 x=10 / 除 x=y/2 x=2.5 % 求余数 (保留整数) x=y%2 x=1 ++ 累加 x=++y x=6 -- 递减 x=--y x=4 注：a = i++ （a先赋值，后i自增）；a = ++i （ i先自增，a后赋值）
2、JavaScript 赋值运算符
赋值运算符用于给 JavaScript 变量赋值。
给定 x=10 和 y=5，下面的表格解释了赋值运算符：
运算符 例子 等价于 结果 = x=y x=5 += x+=y x=x+y x=15 -= x-=y x=x-y x=5 *= x*=y x=x*y x=50 /= x/=y x=x/y x=2 %= x%=y x=x%y x=0 3、JavaScript比较运算符
前提：x=5
运算符 描述 比较 结果 == 等于 x=="5" true === 绝对等于 x==="5" false != 不等于 x!="5" fales !== 不绝对等于 x!=="5" true > 大于 x>5 false < 小于 x<5 false >= 大于等于 x>=5 true <= 小于等于 x<=5 true 4、JavaScript逻辑运算符
前提：n=5
运算符 描述 例子 结果 && 与 x=n>10&&++n x=false,n=5（短路） || 或 x=n<10||n-- x=true,n=5（短路） ! 非 x=!n x=false,x=5 5、JavaScript三目运算符
// 结果 = 条件表达式 ? 结果1 : 结果2; // eg: var tq = prompt("天气(晴|雨)") var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服"; console.log(res);6、ES6语法解构赋值
数组的解构赋值
let [a, b, c] = [1, 2, 3] // a=1,b=2,c=3 let [a, ...b] = [1, 2, 3] // a=1,b=[2,3]
对象的解构赋值
let {key: a} = {key: 10} // a=10
字符串解构赋值
let [a,b,c] = 'xyz' // a='x',b='y',c='z'