一、js简介 1.js的组成 定义：js由 ECMAScript（JavaScript语法）、Dom（页面文档对象模型）、Bom（浏览器对象模型）三部分组成。
Dom：是一种标准的编程接口，通过Dom提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
Bom：可以与浏览器窗口进行互动的对象结构，eg：弹出框、控制浏览器跳转、获取分辨率等。
Dom与Bom又属于Web APIs
2.js的书写位置 行内式js 直接写到元素的内部 (js 中推荐单引号) 内嵌式js
外部js (需要引入)
3.js 的输出语句 alert ( )弹出警示框 console.log ( ) 控制台打印输入信息 prompt ( ) 弹出输入框，用户可以输入信息 prompt ( )取过来的值 是字符型的 二、变量 1.变量是什么？变量的本质是什么? 白话讲，变量就是一个容器，用来存放数据的，方便我们以后使用里边的数据 变量的本质就是内存里的一块空间，用来存储数据的 2.变量命名规范 由字母、数字、下划线、$符号组成 严格区分大小写 不能以数字开头 不能是关键字、保留字 变量名最好有意义 eg：age、sex 遵守驼峰命名法（首字母小写，后面字母需要大写） eg：myFirstName 推荐的翻译网站：爱词霸、有道 3.变量的数据类型 Number（整型、浮点型） Boolean（true、false 等价于1 和 0） String（字符串型 带引号） Undefined（声明未赋值 会出现Undefined） Null (声明变量为空值) js中变量的数据类型 是根据 = 右边变量值的数据类型来判断的 记住一句话 在js里 等号就是 把右边给左边！！！ 数字型进制：常见二进制、八进制、十进制、十六进制
八进制（0~7）：以0开头 逢八进一
eg：010（八进制转为十进制）
计算方法：0*8^2+1*8^1+0*8^0 = 0+8+0=8
十六进制（0~9 和 A~F）：以0x开头
数字型三个特殊值：
Infinity 无穷大
-Infinity 无穷小
NaN 代表一个非数值
isNaN( ) 用来判断一个变量是否为非数字的类型，返回true或false （非数字true 否则false） 字符串型String
转义符要包含在 引号 里边
转义符 解释说明
\n 换行符，n是newline的意思
\ \ 斜杠
' ' 单引号
" " 双引号
\t tab 缩进
\b 空格，b是blank的意思
获取字符串长度
var str = 'my name is andy';
console.log(str.length); //长度为 15
字符串的拼接（只要有字符串和 其他类型拼接 最终的结果都是字符串型）
- 总结口诀： 数值相加 字符相连 记住：引引加加 （变量和字符串 相连接的口诀）删掉数字 console.log('白雪' + 18); // '白雪18' console.log('12' + 12); // '1212' console.log(12 + 12); // 24
console.log('我今年' + age + '岁了'); //引引加加 ' '+age+' ' 布尔型Boolean
true 和 false 两个值 true值为1 false值为0 4.数据类型转换 转换为字符串型 方式 说明 案例 toString( ) 转化成字符串 var num = 1;
alert( num.toString() );
String( ) 转化成字符串 var num = 1;
alert( String(num) );
+号 拼接字符串
（隐式转换）
和字符串拼接的结果都是字符串 var num = 1;
alert( num + ' 苹果');
转换为数字型（重点） 方式 说明 案例 parseInt( ) 转换成整数数值型 parseInt('100') parseFloat() 转换成浮点数值型 parseFloat('12.31') Number() 转换为数值型 Number('12') js隐式转换（- * /） 利用算数运算隐式转换为数值型 '12' - 0 转换为布尔型Boolean
代表空、否定的会被转换为false 例如：0、NaN、null、undefined
其余值都会被转换为true
方式 说明 案例
Boolean()函数 其他类型转换成布尔值 Boolean('白雪')
三、运算符
1.递增++ 和 递减-- 运算符
注意：递增和递减运算符 必须 和变量 配合使用
单独使用时 运行结果相同
++a 前置递增 先自加 后返回值（先己后人）
a++ 后置递增 先返回原值 后自加1 （先表达式返回原值参与运算 之后变量本身再自加1）
2.比较运算符
我们程序里边的 等于符号 是 == 默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以
console.log('18' == 18 ); //true
符号 作用 用法
= 赋值 把右边给左边
== 判断 判断两边值是否相等（注意此时有隐式转换）
=== 全等 值和数据类型 完全相等
3.逻辑运算符（返回值是true 或 false）
逻辑与&& 两侧都为true 结果才是true
逻辑或|| 两侧都为false 结果才是false
逻辑非 ！true = false ； ！false = true
逻辑运算符 说明 案例
&&
"逻辑与" 简称"与" and true && false || "逻辑或" 简称"或" or true || false ！ "逻辑非" 简称"非" not ！true 4.逻辑中断（短路运算） 原理：当有多个表达式（值）时，左边的表达式可以确定结果时，就不再继续运算右边的表达式值
逻辑与（表达式1 && 表达式2）
表达式1 为真，返回表达式2 表达式1 为假，返回表达式1 逻辑或（表达式1 || 表达式2）
表达式1 为真，返回表达式1 表达式1 为假，返回表达式2 注意：除了空、否定的为假 例如：0、NaN、null、undefined ，其余值都为真
5.赋值运算符 赋值运算符 说明 案例 = 直接赋值 var age = '18' += 、-=
加、减一个数 后再赋值 age+=5;
相等于 age = age + 5
=、/=、%= 乘、除、取模 后再赋值 age=5；
相等于 age = age * 5
6.运算符优先级 一元运算符里边的 逻辑非优先级很高 逻辑与 > 逻辑或 （优先级） 判断是否能被整除 ：取余为0 优先级 运算符 顺序 1 小括号 （） 2 一元运算符 ++ -- ！ 3 算术运算符 先* / % 后+ - 4 关系运算符 > >= < <= 5 相等运算符 == ! = === ! == 6 逻辑运算符 先&& 后|| 7 赋值运算符 = 8 逗号运算符 , 四、循环语句 1.分支流程控制语句 （1）if语句（多选一）
// 执行思路：如果if里边条件表达式结果为真 则执行大括号里边的 执行语句 // 如果if表达式 为假 则不执行大括号里边的语句 执行if语句后边的代码
if (条件表达式) { 执行语句 } （2） if else if语句（多选一的过程）
<script>
if (条件表达式1) {
//语句1;
} else if (条件表达式2) {
//语句2;
} else if (条件表达式3) {
//语句3;
} else {
//最后的语句;
}
</script>
（3）switch分支语句（多选一）
switch注意事项：
我们开发里边 表达式经常写成变量 表达式的值 和value的值 相匹配的时候 必须是全等 （值和数据类型完全一致）
switch...case语句和if...else...语句区别：
一般情况下 它俩可以互相替换 switch语句通常处理case为比较确定值的情况 if else if更加灵活 常用于判断范围(> = 某范围) switch语句进行判断后 直接执行到语句 效率更高 而 if else if 语句有几种条件 就得判断多少次 当分支比较少时，if else if 执行效率比switch高 当分支比较多时，switch语句执行效率比较高 而且结果更清晰 2. 三元表达式 语法 条件表达式 ? 表达式1 : 表达式2
如果条件表达式 值为真 则返回 表达式1 的值
如果条件表达式 值为假 则返回 表达式2 的值
3.for循环 重复执行某些代码 通常跟计数有关 for循环是 循环条件 和 数字 直接相关的循环 // 1.初始化变量：就是用var 声明的一个普通变量 通常用于 作为计数器使用 // 2.条件表达式：用来决定 每一次循环是否执行 就是终止的条件 // 3.操作表达式：每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或递减）
//语法：
for (初始化变量; 条件表达式; 操作表达式) {
循环体
}
//打印100句 你好
for (var i = 1; i <= 100; i++) {
console.log('你好');
}
4.断点调试 F12 sources 找到需要调试的文件 在某一行设置断点 自己在程序某一行打个断点，这样程序运行到这一行就会停住 可以一步步调试 ，观察程序的执行过程 记得刷新网页 Watch监视：可以选择监视变量值的变化 （非常常用） F11：程序单步执行，让程序一行一行的执行，观察watch中变量值的变化 小Tips：让打印结果 完全显示出来
var str = ''; //追加字符串
var num = 1;
while (num <= 100) {
str = str + '第' + num + '句你好' + '\n' //就能显示出来啦！
num++;
}
console.log(str);
// 2.这样写的话，显示不出来全部（只会有个"100"的提示）
var num = 1;
while (num <= 100) {
console.log('你好呀！');
num++;
}
5.双重 for循环 定义：在 for循环 里边再嵌套一个 for循环
实现：可以打印 五行五列的星星、一个倒直角三角形等
注意点：
外层循环1次，内层循环执行全部 外层循环控制 行数，内层循环控制 列数（每行的个数） 6.while循环 // 1.语法结构：while 当 ... 的时候 while (条件表达式) { 循环体 }
// 2.执行思路：当条件表达式结果为 true 则执行循环体 否则 退出循环,执行后边的代码
var num = 1; // 计数器 初始化变量
while (num <= 100) {
console.log('你好呀！');
num++; // 完成计数器的更新 防止死循环
}
7.do while循环 // 1.do while 语法: do { 循环体 } while (条件表达式)
// 2.执行思路：先执行一次循环体 再判断条件 如果条件表达式为真，则继续执行循环体，否则退出循环
// 3.打印100句 我喜欢你 var i = 1; do { console.log('我喜欢你'); i++; } while (i <= 100) while 和 do while 的区别
while先判断 再执行循环体 do while 先执行循环体 再判断（循环体至少执行一次） 8.continue 和 break continue 关键字：退出本次循环，继续执行剩余次数的循环 break 关键字：退出整个循环 五、数组 1.数组（Array） 定义：就是一组数据的集合，存储在单个变量下（数组里边的数据 成为数据元素）
（1）创建数组
利用new 创建数组 var arr = new Array(); //创建了一个 空数组 利用数组字面量创建数组 var arr1 = []; //创建了一个 空数组 注意点：
获取数组元素 数组名[索引号] 索引号从0开始 数组里边可以存放 任意类型的数据（字符串、数字、布尔值等） （2）遍历数组
定义：就是把数组的元素从头到尾访问一次
注意点：
遍历是通过 for循环 进行的 （想把数组里边的值取出来 就通过遍历 for循环） 索引号 i 从0开始 ； i 的范围 不带等号 arr [ i ]是 数组元素第 i 个 ; i 是计数器（当索引号使用） var arr = ['red', 'green', 'blue']; for (i = 0; i < 3; i++) { console.log(arr[i]); // 'red', 'green', 'blue' 必须是arr[i] }
// 注意点：★
// 1.i 从0开始 所以 i < 3 (不能含等号)
// 2.只能输出打印arr[i] 而不能是i
// 3.arr[i]是 数组元素第i个 i是计数器（当索引号使用）
（3）数组长度：数组名.length
数组长度是元素个数 不要跟索引号i混淆 arr.length 动态监测数组元素的个数（方便添加数组元素 ） var arr = ['red', 'green', 'blue']; for (i = 0; i < arr.length; i++) { console.log(arr[i]); } （4）新增数组元素
修改 arr.length 的长度
修改索引号 追加数组元素（也可以替换 数组元素）
2.冒泡排序 ★ 定义：一次比较两个元素，如果它们的顺序错误就把它们交换过来（从大到小or从小到大的顺序） var arr = [4, 1, 2, 3, 5]; //从大到小排序 for (var i = 0; i <= arr.length - 1; i++) { //外层循环 管趟数 for (var j = 0; j <= arr.length - i - 1; j++) { //内层循环 管每一趟的交换次数 // 内部交换2个变量 前一个和后一个数组元素相比较 if (arr[j] < arr[j + 1]) { var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } console.log(arr);
