1.javascript
1.js的语法：
前端三层：
HTML:结构层
CSS:样式层
Javascript:行为层
JavaScript：一种运行在客户端的脚本语言，
一门动态类型的语言
浏览器中对javascript进行解释器叫做javascript引擎
javascript组成：ECMAScript DOM BOM
计算机组成：软件 硬件
软件：
应用软件：浏览器 QQ Subline Word
系统软件：windows Linux MacOS
硬件 ：
三大件; CPU 内存 硬盘 -- 主板
输入设备： 鼠标 键盘 手写板 摄像头 et
输出设备： 显示器 打印机 投影仪 et
js的书写位置
点击弹出弹窗
js的注释：
// 单行注释 注释在浏览器中是不会加载的
/*
多行注释： 块级注释
多行可以嵌套单行，单行可以嵌套多行 多行不能嵌套多行
*/
js的输出语句
// alert 弹出一个警告框
// 一条语句结束必须加分号
// 代码是从上往下 从左往右依次执行的
alert('这是一个警示框');
// prompt语句 弹出一个对话框 内部有一条提升语句和输入框，根据提示语句让用户输入内容。
// 第一个：提示语 第二个：默认值 可以省略
prompt('请输入姓名：','慕寒');
// console 输出在控制台 --- 调试错误
2.数据类型
字面量：
用于表达一个固定值的表示法。又叫常量。
数值字面量：8 9 10
字符串字面量： '慕寒'
布尔字面量： true fasle
整数： 分进制 十进制 八进制 十六进制
八进制中：数字大于0-7，以0开头，会强制转换成十进制
以0o开头的，会报错
十六进制超过范围报错
// 十进制：10
console.log(10);
// 八进制 以0 0o 开头
// 4 * 8 + 5 * 1 = 37
console.log(045); // 37 浏览器会自动转成十进制
// 十六进制 以0x 开头
// 4 * 16 * 16 + a * 16 + f
// 1024 + 160 + 15
// 1199
console.log(0x4af); // 1199
浮点数字面量：小数
浮点数不区分进制，所有浮点数都是十进制之下的数字。
如果浮点数大于0小于1，可以省略前面的0
浮点数的最高精度就是 17位
console.log(.2);
console.log(1.23);
console.log(-4.34);
//
console.log(1.2e4); // 12000
console.log(1.2e-4); // 0.00012
console.log(0.1 + 0.2); // 结果不等于 0.3
// Infinity: 无穷
// 最小值 ：Number.MIN_VALUE 5e-324
//最大值 ： Number.MAX_VALUE 1.7976931348623157e+308
// NaN not a number
字符串字面量：
任意个数的有序或无序的字符组成串。 js有自己特殊的写法
用 单引号或者双引号括起来
console.log('这是一个字符串');
console.log('abc');
console.log('234');
**转义符： **
| 符号 中间没有空格 | 解释 |
|---|---|
| \ n | 换行 |
| \ t | tab制表 |
| \ ' | 单引号 |
| \ " | 双引号 |
| \ \ | 斜杠 |
变量：
计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
可以存储任意类型的数据的
使用变量可以方便获取或修改内存的数据
变量声明：定义变量 创建变量
变量使用前，必须先定义后使用
规范：
- 字母 数字 下划线 $ 组成 数组不能开头
- 字母区分大小写
- 变量名不能是关键字 保留字
- 变量名要有意义
- 变量名超过两个单词尽量使用驼峰命名法 userName
// 定义变量
var a;
var num;
var n1;
var o_o;
var userName;
// 变量赋值： 默认值 undefined
// 等号左变右不变
a = 3;
num = 20;
userName = '慕寒';
// var 关键字可以一次性定义多个
var a = 2,
b = 4,
c = 5;
console.log(a + b +c);
数据类型
简单数据类型：Number String undefined Boolean null
Boolean: 布尔 只有两个值 true false
null: 数据 指向一个空对象的指针
检测数据类型：typeof
console.log(typeof(2)); // number
console.log(typeof(NaN)); // number
console.log(typeof('中文')); // String
console.log(typeof(undefined)); // undefined
console.log(typeof(true)); // boolean
console.log(typeof(null)); // object
console.log(typeof 67 + 78); // number78
console.log(typeof(67 + 78)); // number
// 变量的数据类型 根据存储的值的类型变化而变化
数据类型转换：
转字符串：
// 1. 数据.toString(); 数字没有 布尔有
console.log(true.toString());
// 2. String(数据);
console.log(String(22));
// 3. +拼接
console.log(+12);
转数值类型：
// Number()
// 纯数字正常转换
// 空字符 空白字符 0
// 非纯数字的非空字符串 NaN
// true 1 false 0
// undefined NaN
// null 0
Number(''); // 0
Number('ff'); // NaN
Number(true); // 1
// parseInt
// 对浮点数转整数 字符串转整数
// 字符中如果以数字开头，会提取数字
parseInt(23.4);// 23
parseInt('21px'); // 21
parseInt('w30px'); // NaN
// parseFloat 转浮点数
parseFloat('2.333'); // 2.333
parseFloat('23.5px'); // 23.5
// prompt输入的数据类型是 string类型
var num = parseInt(prompt('请输入一个10以内的数字：'));
console.log(num);
转布尔类型：
// Boolean
// NaN 0 '' null undefined 空字符串 false
// 非0非NaN的数字 非空字符串 true
Boolean(NaN); // false
Boolean(1); // true;
Boolean(null); // false
Boolean('ff'); // true
Booleam(''); // false
3.操作符
操作符：也叫运算符
表达式的组成包含操作数和操作符，表达式会得到一个结果，参与程序
算术运算符
/ + - % () *
先乘除取余，再加减 有小括号先算小括号
// 正常情况 数字与数字
console.log(1 + 2); // 3
console.log(4 * 5); // 20
console.log(4 / 5); // 0.8;
console.log(4 % 5); // 4
// NaN 参与运算 结果都是 NaN
// Infinity 参与运算 视情况而定
console.log(5 / Infinity); // 0
console.log(-Infinity / 5); // NaN
console.log(5 % Infinity); // 5
console.log(Infinity + Infinity); // Infinity
console.log(Infinity - Infinity); // NaN
console.log(Infinity * Infinity); // Infinity
console.log(Infinity / Infinity); // NaN
console.log(Infinity % Infinity); // NaN
// 字符串参与的 +
console.log(1 + '2'); // 12
console.log(1 - '2'); // -1
console.log(1 / '2'); // 0.5
console.log(1 % '2'); // 1
console.log(1 - ''); // 1
console.log(1 - ' '); // 1
console.log( 1 - '12abc'); // NaN
比较运算符 关系运算符
| 符号 | 说明 |
|---|---|
| > | 大于 |
| < | 小于 |
| >= | 大于等于 |
| <= | 小于等于 |
| == | 相等 只能判断大小 |
| != | 不等于 |
| === | 全等 判断大小 值 相等 |
| !== | 不 全等 |
NaN > 8; // false
NaN < 8; // false
NaN >= 8; // false
NaN == 8; // fasle
NaN != 8; // true
NaN === 8; // fasle
NaN !== 8; // true
NaN != NaN; //true
NaN !== NaN; // true
// Infinity 与 其他数据 > >= != !== true
// Infinity 与 Infinity == >= <= === true
//
1 == "1"; // true
1 == true; // true
0 == false; // true
0 == ''; // true
0 == ' '; // true
0 == undefined; // false
0 == null; // false
1 > null; // true
0 >= null; // true
0 <= null; // true
undefiend == null // true
// 字符串 之间 比较的是unicode编码
// 0-9 A-Z a-z 前面小于后面的
// 比较时不关心字符串的长度， 从一个开始比较大小 如果能比较出结果就不往后比较了
// 从前往后比较 前面的结果和后面比较
3 > 2 > 1; // false
逻辑运算：
// 逻辑与 都真才真
console.log(true && true); // true
// 逻辑或 一真则真
console.log(true || false); // true
// 逻辑非 非假及真
console.log(!true); // false;
console.log(!!!true); // true
// a && b 如果a false 返回a; 否则返回b;
// a || b; 如果a true 返回a ;否则返回b;
null && 123; // null
12 && '124'; // 124
12 || '123'; // 12
undefined || null; // null
null || '11'; // 11
赋值运算符：
必须有变量参与运算，
1.将变量中原始值参与对应数学运算，与右侧的数据
2.将运算结果再重新赋值给变量
| 符号 | 说明 |
|---|---|
| = | 等于 |
| += | 加等于 |
| -= | 减等于 |
| /= | 除等于 |
| *= | 乘等于 |
| %= | 取余等于 |
| ++ | 自增 |
| -- | 自减 |
var a = 5;
a += 4;
console.log(a); // 9
a *= 6;
console.log(a); // 54
一元运算符 ++ --
++ -- 可以写在变量前面和后面，位置不同导致程序的运行结果不同
参与运算中：a++ 先参与运算再赋值
++a: 先赋值再参与运算
var a = 6;
a++;
console.log(a); // 7
++a;
console.log(a); // 8
var b = a++ + 4 + a++; // 6 + 4 + 7
console.log(b); // 17
var c = ++a + 4 + ++a; // 7 + 4 + 8;
console.log(c); // 19
var a = 10,b = 20, c = 30;
// 10 21 30 12
var num = a++ + ++b + c++ + ++a;
console.log(num); // 73
运算优先级
优先级从高到低：
1.() 优先级最高
- 一元运算符 ++ -- ！
- 算术运算符 * / % + -
- 关系运算符 > >= < <=
- 相等运算符 == != === !==
- 逻辑运算符 先 && 后 ||
- 赋值运算符
var a = 4;
// 1 * 5 && 5 || 5 > 6 && 7 < 8 || false
// 5 && 5 || false && true || false
// 5 || false || false
// 5
var num = 1 * (2 + 3) && ++a || 5 > 6 && 7 < 8 || !9;
console.log(num); // 5
console.log(a);
4.流程控制
表达式：先执行出一个结果，再去参与其他程序
语句：一般情况下分号;分割一个一个的语句。可以认为是给计算的一个指令，执行这段代码。
流程控制语句：通过一些特殊结构可以让js代码加载时，要么可以跳过一部分不加载，或者可以循环加载一段代码。
分支语句，循环语句
条件分支语句：
if语句：
通过某个指定判断条件，决定走哪个分支代码。
if-else只会执行一个
如果结构体只有一条语句可以省略{}
// 用户输入成绩，判断及不及格
var s = parseInt(prompt('请输入成绩：',67));
if ( s >= 60){
alert('恭喜你，及格了');
}else {
alert('很遗憾，你没及格');
}
多分支if语句
包含多个判断条件，每一个判断条件对应一个分支
语法： if....else if....else if.... else
var s = parseInt(prompt('请输入成绩：',67));
if(s >= 85 && s < 100){
alert('哎呀，你太优秀了');
}else if ( s < 85 && s >= 75){
alert('阿西，你处于良好啊，要努力啊');
}else if(s < 75 && s >= 60){
alert('刚刚及格，努力啊');
}else {
alert('你不及格啊');
}
if嵌套
if语句的结构体内可以嵌套if语句
var sex = prompt('请输入您的性别：','男');
var age = parseInt(prompt('请输入您的年龄：','45'));
if(sex === '男'){
if(age >= 60){
alert('恭喜您，可以享受生活了');
}else{
alert('很遗憾，你不满足退休条件');
}
}else if(sex === '女'){
if(age >= 55){
alert('恭喜您，幸福人生开始了');
}else {
alert('很遗憾，您还得坚持坚持');
}
}else {
alert('输入非法');
}
三元表达式
三元表达式是if语句的简写。
语法：布尔表达式 ？ true : false;
true ? 1: 0;
switch语句
语法：
匹配是全等匹配
每条case语句结束后必须加上break关键字。
default不写，类似if语句不写else
switch(表达式){
case 值1:
结构体1;
break;
case 值2:
结构体2;
break;
...
default:
结构体n;
}
var xingzuo = prompt('请输入你的星座','白羊座');
switch (xingzuo){
case '白羊座':
alert('运势持续在线，将会是忙而充实的一天');
break;
case '金牛座':
alert('你或许需要付出更多的努力，才能实现自己的大志。');
break;
default:
alert('你输入的星座非法');
}
循环语句
for循环
前测试循环语句，在反复执行一段代码之前，都要先测试入口条件，如果条件为真，继续循环，条件为假终止循环。
// for循环的呆板语法
for(var i = 1; i <= 10; i++){
console.log('小明今年'+i+'岁了');
}
/*
1. var i = 0；
2. i <= 100
3. console.log('小明今年'+i+'岁了');
4. i++
5. 重复 2-4 直到条件不满足
*/
注意：1. 小括号内部必须有两个分号存在。
for循环{}后面不需要加分号
如果2位置的语句不写，就相当于没有设置入口条件，或者条件永远为真，循环就不会停止，就会成为一个死循环；
如果2位置的条件设置得不合理，也会出现死循环
3位置的循环的结构体，每次进入循环都要执行完后，才能执行语句4，3位置的语句可以人为自定义，甚至可以嵌套if语句。
for循环内部也可以嵌套for循环，必须执行完内循环的所有循环体，才能执行外循环。
-
循环内的变量是全局变量，必须避免循环嵌套时起相同的变量名，内层变量名必须和外层名不同，i j k
for(var i = 1; i <= 4; i++){ for(var j = 5; j <= 8; j++){ console.log(i,j); } }
do-while循环
一种后测试循环语句，会先执行一次结构体，执行完之后再去判断结构体，为真继续执行，为假退出循环，
注意
- 循环变量要定义在循环外面，否则会被重置
- 循环自加的过程要写在循环体内部。
- 变量的自加写在输出语句前面和后面，输出的结果是不一样的
- do-while循环即使第一次测试为假，也会执行一次循环体
- do-while循环无论条件是否为真都会执行一次循环体。
var i = 1;
do{
console.log(i);
i++;
}while(i <= 10);
while循环
前测试循环语句，在执行循环体之前都要测试入口条件，条件为真继续执行，条件为假直接跳出循环。
var i = 1;
while(i <= 10){
console.log(i);
i++;
}
break语句
作用：可以立即停止当前的for,dowhile,while循环
根据一些条件设置break位置，直到循环能够执行break语句立即停止执行，跳出循环
注意：
- 如果是循环嵌套，break只能打断本层的循环，其他层的循环不受影响
- 如果想停止外层循环，需要给外层循环添加一个名字,就可以通过break加名字，停止指定循环
// 找 1 - 50 有没有能够被5整除的数字
// 找到一个这样的数字说明存在不需要往后面验证了
for(var i = 0; i <= 50; i++){
if(i % 5 === 0){
console.log(i);
break;
}
}
waiceng : for(var i = 0; i <= 4; i++){
for(var j = 0; j <= 5; j++){
console.log(i,j);
if(j > 2){
break waiceng;
}
}
}
continue语句
遇到continue表示当前的一次循环的数据不是我们想要，可以跳过这次循环。
如果想要控制外层循环，需要给外层循环添加一个名字,就可以通过continue加名字，控制指定循环;
// 1 - 30 之间不是 5 倍数的数字
for(var i = 1; i <= 30; i++){
if( i % 5 === 0) continue;
// 程序执行到这里说明 i 不是5的倍数
console.log(i);
}
穷举思想
将所有需要的数据在所在范围内一一列举出来，再根据规律的条件对所有这些数据进行筛选。
for循环：外层使用for循环一一列举
if语句：内层用if语句进行判断，筛选需要的数据，如果条件满足就操作数据，如果不满足就跳过
// 输出6的约数
// a % b = 0 ; a 叫做 b 的倍数 b 是 a的约数
for(var i = 1; i <= 6; i++){
if(6 % i === 0 ){
console.log(i+'是6的约数');
}
}
// 让用户随意输入一个正数，输出这个数所有的约数
var num = parseInt(prompt('请输入一个数字','6'));
for(var i = 1; i <= num; i++){
if(num % i === 0 ){
console.log(i+'是'+num+'的约数');
}
}
累加器
实现累加的效果，就是利用循环，每次循环就将新的数据加到原始的变量中去，赋值过程是一个加等于的赋值
注意：
- 累加器的变量必须定义在循环的外部。定义在循环内部会被重置
- 初始值必须设置，必须设置为0.不会影响累加结果。
- 在使用最终累加结果一定要在循环之后，否则累加出来的结果是不正确。
// 求1-10 之间所有数字的和
var num = 0;
for(var i = 1; i <= 10; i++){
sum += i;
}
console.log(sum);
累乘器
使用和累加差不多
初始值必须是1
// 求1-10 之间所有数字的积
var mul = 1;
for(var i = 1; i <= 10; i++){
mul *= i;
}
console.log(mul);
案例
- 水仙花案例