第一天js复习：
复习：
1、js简介
答案：运行在客户端的语言 就是运行在浏览器中的脚本语言，逐行解释，编译语言有编译的过程
答案：发明人：布兰登·艾克
2、js运行原理
答案：js引擎也叫js解释器，转换成二进制，html靠的是排版引擎
3、js有三部分组成
答案：ECMAscript 做出了语法规范数据类型 BOM浏览器对象模型 DOM文档对象模型 很重要
4、js书写的三个位置
答案：行内 内部内嵌，外部 和css相同
5、变量是什么
答案：变量就是一个盒子存储数据的，实际上是存放在内存区域中
6、变量的声明以及存储
答案：var 变量的声明 使用var num =10; 声明变量且赋值，叫变量初始化
7、变量的命名规范
答案：不可以使用数字，可以使用$ 字母下划线 ，使用骆驼命名法
8、简单数据类型有哪些
答案：number boolean String null nudefined
9、常见的转义字符
答案：外双内单使用引号的时候 转义字符使用\ ， 换行\n ，空格\b tab\t
10、检测数据类型
答案： typeof typeof null //object
11、数据类型转换、
答案：number string boolean
number 类型： Number()数值类型 parseFloat()取浮点 parseInt()取整函数
string 三个 toString() num.toString()进制转换 String()转换为字符串， + 号转换
boolean ：Boolean(1) !! 1 boolean两种转换方式
12、一元运算符，++前置 和 ++ 后置
答案：一元运算符 ！num num++ ++num 自己进行参与运算的是一元
：a + b 两个人进行运算是 二元运算符
复制代码小测试： var num = 1; console.log(num++ + 10 + num++);
num++ 是1 + 10 = 11；但是发生变化num++先值运算在自加1 所以变成2所以变成了 11 + 2 = 13 整体是 1 + 10 + 2 = 13
复制代码正课今天讲：
1、运算符下
2、流程控制上 分支结构
3、流程控制下 循环结构
学习目标
学习目标
掌握关系运算符，逻辑运算符，赋值运算符以及运算符优先级
if...else 和 switch 分支语句
while/do while/for 三种循环
break 和 continue 循环跳出语句
双重循环
应用
能编写一个乘法口诀表
复制代码正课1、 关系运算符 (比较运算符)
概念：关系运算符，两个数据进行比较的运算符，会返回布尔值(true/false)作为比较运算符
运算符名称 说明 案例 结果
< 小于号 1 < 2 true
> 大于号 2 > 1 true
>= 大于等于 2 >= 2 true
<= 小于等于 3 <= 2 false
== 等号(会转类型) 2 ==2 true
!= 不等号 3 != 2 true
!== 不全等 2 !== '2' true
==== 全等要求值和数据类型一致 2 === '2' false
总结：
符号 作用 用法
= 赋值 把右边给左边
== 判断 判断两边值是否相等
=== 全等 判断两边值和数据类型是否相等
复制代码正课2、 逻辑运算符
概念：逻辑运算符，用来进行两个布尔值运算的，运算符，返回值也是布尔值
逻辑运算符 说明 案例
&& 逻辑与简称 与 并且的意思 num1 && num2
|| 逻辑或简称 或 num1 || num2
！ 逻辑非简称 非 !num1
解答：与 或 非
逻辑与 &&: 两边都是true 才返为true 否则返回false
逻辑或 ||: 两边都为false 才返为false 否则都为true 只要有一个为真即为true
逻辑非 !: 也叫做取反符号，用来取一个布尔值相反的值，如true 的相反是false，false的相反是true
demo: && 并且与
var res = 2 > 1 && 3 < 5; //需要两边同时为真
console.log(res) //true
var res = 2 > 1 && 3 < 1 // 两边只有有一个为假false 即为false
console.log(res) //false
demo: || 或
var res = 2 > 1 || 3 < 5;//只要一个为真 即为true
console.log(res)//true
var res = 2 > 4 || 5 < 4; //只要同时不为真 即为false
console.log(res) //false;
demo: ! 非 取反
var res = !true;
console.log(res); //false
var res = !false;
console.log(res); //true
var res = !19;
console.log(res); //false
var res = !0; //零是false 所有才有非零即真的这一说，所以零取反是true
console.log(res) //true
var res = !''; //字符里面只有''是空所有取反是true
console.log(res) //true
测试：
var num1 = 7;
var str = '你好我爱你js';
var res1 = num1 > 5 && str.length >= num1; //true
var res2 = num1 < 5 && str.length >= num1; //false
var res3 = !(num1 < 10); //false
var res4 = !(num1 < 10 && str.length == num1); //false
复制代码赋值运算符
var age = 10; //把10赋值给变量 age
赋值运算符 说明 案例
= 直接赋值 var usrName = '我是值'；
+= 、-= 加减一个数后在赋值 var age = 10 age += 5 //15 age = age+5
*=、/=、%= 乘、除、取模后再赋值 var age = 2; age *=5 //10 age = age*5
复制代码运算符的优先级
1、() 优先级最高
2、一元运算符++ -- ！
3、算数运算符 先 * / % 后 + -
4、关系运算符 > >= < <=
5、相等运算符 == != === !==
6、逻辑运算符先&& 后||
7、赋值运算符
规律 ：
先一元后二元
先算数后关系
逻辑运算符中 ！非权重最高 其实是&& 最后||
练习题：
4 >= 6 || '人' !='外星人' && !(12*2 == 333) && true
答案：4>=6 false ||
答案：人!='外星人' true &&
答案：!(12*2 == 333) false 取反变成true &&
答案：true
答案：最后为true 因为 先判断&& 最后是|| 有真为true 真
var num = 10;
5 == num / 2 && (2 + 2* num).toString() === '22';
答案是true
答案：5 == num / 2 等于5 true
答案：(2 + 2* num).toString() === '22'; 22转换成字符串类型 恒等于 22 字符类型 所以为true
var a = 3 > 5 && 2 < 7 && 3 == 4;
console.log(a); //false
var b = 3 <= 4 || 3 > 1 || 3 !=2 ;
console.log(b); //true
var c = 2 === '2';
console.log(c);//false
var d = !c || b && a;
console.log(d); //true
复制代码流程控制 上 分支结构 重点
表达式
表达式由运算符构成，并且产生结果的语法结构
每个表达式都会产生一个值，他可以放在任何需要一个值的地方
语句
语句可以理解为一个行为循环语句和判断语句就是典型的语句
一个程序有很多个语句组成，一般情况下；分号分割一个一个语句
复制代码重点 概念：流程控制分、 顺序结构，分支结构，循环结构三种，代表三种代码执行的顺序
顺序结构：
概念：由上至下的执行代码就是顺序结构
var userAge = prompt('请输入您的年龄');
var userName = prompt('请输入您的姓名');
alert('欢迎您' + userName + '年龄' + username)
复制代码分支结构
概念：由上到下执行代码过程中，根据不同的条件，执行不同的代码
共有两种分支结构 if...else 和 switch
if...else.. 语句
if是如果
//条件成立执行代码，否则什么也不做
if(条件表达式){
//如果条件成立执行的代码语句
}
案例：
//如果年龄满18 就可以进入网吧需要一个判
思路 ：
1、用户输入年龄
2、判断是否满足18
3、满足可以去网吧
4、不满足怎么办
var userAge = Number(prompt('您的年龄大于18岁可以上网'));
if(userAge >= 18){
alert('您今年' + userAge + '岁可以上网了');
}
alert('您今年' + userAge + '岁现在要好好学习');
重点：if...else
如果...否则
只会选择一个进行执行
if(条件表达式){
如果条件成立执行的代码
}else{
否则执行的代码
}
思路：
1、接收用户输入的姓名
2、来判断是否中奖
3、如果有则返回恭喜中奖
4、否则返回没有中奖
//判断一个人是中奖根据名字查询如果查询到了中奖，否则不中奖
var userName = prompt('请输入名字')
if(userName == '张三'){
alert('恭喜你中奖了');
}else{
alert('你没有中奖');
}
案例：
//能整除4且不能整除100的为闰年(2004年就是闰年，1901年不是闰年);
//能够被400 整除的就是润年
思路：
1、输入年份
2、进行闰年判断
3、打印出是否属于闰年，是闰年输出啥，不是输出啥
// % == 0
var year = Number(prompt('请输入年份'));
if(year % 4 == 0 && year % 100 !== 0 || year % 400 == 0){
alert(year + '是闰年');
}else{
alert(year + '不是闰年');
}
重点：if...else..if 语法
//适合于检查多重条件
if(条件1表达式){
//如果条件1成立执行的代码
}else if(条件2表达式){
//否则 如果 条件2成立执行的代码
注释：条件1不成立但是条件2成立
}else if(条件3表达式){
//否则 如果条件3成立执行的代码
注释：条件1、2不成立但是条件3成立
}else{
//上述条件都不成立执行的代码
}
案例:
要求接受用户输入的分数，根据不同的分数输入出等级字符A,B,C,D,E
1、90分含以上输出A
2、80分含~90分不含输出B;
3、70分含~80分不含输出C;
4、60分含~70分不含输出D;
5、60分不含输出E;
思路：
1、输入接受用户输入的值
2、进行if..else..if 的判断
3、弹出输入数字应得的分数
var num = Number(prompt('请输入分数'));
if(num >= 90){
alert('1您的得分是' + num + '恭喜您');
}else if(num >= 80){
alert('2您的得分是' + num + '恭喜您');
}else if(num >=70){
alert('3您的得分是' + num + '恭喜您');
}else if(num >=60){
alert('4您的得分是' + num + '恭喜您');
}else{
alert('5您的分数是' + num + '得到E')
}
复制代码总结： if...else 小结
根据条件不同，有选择地执行，分支结构结束后，会继续执行后续的代码
复制代码三元表达式 ？ ：
语法 ： 表达式1 ？ 表达式 2： 表达式3
如果表达式1 为真执行返回表达式2的值 表达式为假返回表达式3的值
三元表达式就if...else 的简洁的写法
var num = 3 > 5 ? 3 : 5;
console.log(num); // 5
console.log(3 > 5 ? 3 +1 : 5 + 1); //6
上面这样写也是可以的因为是返回他们的值
if(3 > 5){
console.log(3);
}else{
console.log(5);
}
复制代码switch case 结构
当要针对变量多种不通知执行不同的代码，就可以使用switch
switch 开关的意思 转换 case 案例
语法：使用结构表达式的值各个case 中的值进行相等比较
switch(变量){
case : value:
//表达式结果等于value 1时 要执行的代码
break；
case : value:
//表达式结果等于value 2时 要执行的代码
break;
default:
//表达式结构不等于任何一个value 时要执行的代码
}
使用switch 小案例：
var num = prompt('请输入喜爱的水果');
switch(num){
case '苹果':
alert('您喜欢吃' + num);
break; //一定要添加break 不然会有穿透效果
case '香蕉':
alert('您喜欢吃' + num);
break;
case '草莓':
alert('您喜欢吃' + num);
break;
default: //默认的上面都找不到
alert('没有你爱吃的' + num);
break;
}
执行顺序
1、先从变量中获取一个值随后表达式的值会与结构中的每个case 值做比较
2、如果存在匹配全等=== 即变量值 === value 值 则与该case关联的代码块会被执行，
并且在遇到break 时停止，整个switch 代码执行结束
3、如果所有的case的值都和表达之不匹配则执行default里的代码
4、我们case后面的值通常都是一个常量
细节：breack是跳出switch 的作用
注意变量的字符类型
复制代码switch 与 if 对比
switch...case通常处理case为常量的情况，而if...else更加灵活有范围
当只有分支比较少的时候if效率比switch高
switch进行一次条件判断后直接执行到程序的条件语句而if..else有几种条件，就得判断多少次
分支比较多是switch的效率比较高，而且结构更清晰
复制代码循环结构
循环：围着操场重复的跑圈就是循环
js中的循环：一段代码重复的执行
三种循环结构: while do...while for 三个关键： 计数器 判断条件 计数器自增
重点学：for 循环 存在即合理
复制代码while 循环
//条件表达式为true 时重复执行循环体代码
//条件表达式为false退出循环
while(条件表达式){
//循环体代码
}
执行顺序：
先执行条件表达式
如果为false 则退出循环
如果为true 则执行循环体代码，紧接着执行循环条件表达式，要是一直执行true 就会变成死循环
案例：
var num = 1;
while( num <= 10){
/*console.log('您好');
num++; 这里是自增条件
*/
console.log('您好'+ num++); //我这里吧自增条件放到打印的控制器里面
// console.log('hi~你好么么哒') 千万不要这么写会造成死循环
}
解答：1、
var age = 1;
while (age <= 18) {
console.log('哎呀每年都增加了'+ age +'岁啊')
age ++;
}
解答： while 循环 需要一个循环条件 age < 18 然后输出循环体 然后需要循环条件 到多少
案例：1、
用户输入一个年龄打印年龄
var userAge = prompt('年龄');
var age = 1;
while(age <= userAge){
console.log('这个人多少'+age+'岁了');
age ++;
}
案例：2、
计算1~100之间所有数的和
思路：
1、需要2个变量 一个自增，还需要一个保存结果值的
var i = 1; //自增
var sum = 0; //保存结果的盒子
while(i <= 100){
sum = sum + i;
//也可以简写 sun+=i;
i++;
}
// 解答:代码从上面执行，i=1，1<=100执行下面sum 这句话 sum等于0 加1 赋值给sum 所以 sum 等于1 然后i++
复制代码while 总结
while 语句就是当条件满足时重复执行相同的代码
无论是循环结构还是分支结构，在执行完毕后，都会执行后续代码；
在循环体内部，需要修改有循环条件否则会造成死循环 重点是死循环造成了很不友好
复制代码我是：我想静静 看大家的反馈说少练习所以给大家一些练习题目，思路自己想，需要我解答的留言给我会在留言中解答：
练习题：
1、打印100以内的奇数
2、打印100以内的奇数的和
复制代码断点调试：断点调试教程
do...while 循环
语法：
do{
//do是做
//循环体代码，条件表达式为true 时重复执行循环体代码
//do...while 至少做一次
}while(条件表达式)
//计数器 计数器自增 判断条件
//var i = 1; //计数器
// 计数器 计数器自增 判断条件
var i = 1; //计数器
do{ //1、do首先打印出 要好好理解js 然后 执行
console.log('要好好理解js'+i);
i++; //2、然后i++ 2 <= 5然后继续回到do 里面继续打印
} while(i <= 5)
重点：区别do...while 与 while 至少do..while 至少会执行一次为什么这么说呢请看案例
var i= 1;
do{
console.log('学习时候要专注'+ i);
// 这时候你就会发现 i>=5不满足判断条件但是也是会执行一次
// 再次真香警告 很重要 判断三个条件 1、计数器 2、计数器自增 3、判断条件
i++;
} while(i >= 5);
案例：
使用do...while循环：输出你喜欢我吗？(y/n):直到输出了y退出否则继续询问
思路：
1、用户输入 (y/n
2、判断是y退出循环不是一直循环使用do...while
do{
var user = prompt('你喜欢我吗？你的答案是y与n');
// 只要用户输入的不是y就一直循环 要是满足条件就退出循环
} while( user !== 'y');
alert('我也喜欢你呢');
复制代码do...while小结
do...while循环和while循环非常像，二者经常可以相互替代，但do...while的特点是不管条件是否成立都执行一次
do...while语句就会先执行一遍，后面才根据条件是否满足决定执行次数
和while循环一样，在循环内部，需要修改循环条件，否则会造成死循环
do{
// do先写 一个花括号 然后 while 然后是括号
} while()
复制代码for循环
//for循环一般用来根据次数循环
for(初始化，条件表达式，自增表达式){
循环体
}
for( 1、 var i=0; 2、 i< 10; 4、 i++){
3、
console.log( i );
}
这里标注了1、2、3、4、看执行顺序
for(var i = 1; i <= 10; i++){
console.log(i);
// 记住初始化 var i =1;在for 里面只会执行一次
// 先判断在执行 i< =10 执行 console.log(i); 然后在执行i++;
//可以通过断点进行查看执行顺序
}
执行顺序
1、初始化
2、条件表达式 ->3循环体 ->4自增表达式
之后一直执行234 知道条件表达式为false才结束循环
案例：
求1~100之间所有偶数的和
console.log(undefined+ 10) //打印出NaN 不是一个数字
// 不可以var sum;这样声明 因为会输出 undefined
var sum = 0;
for(var i=0 ; i <= 100; i++){
if( i % 2 ==0){
sum+=i;
// sum = sum + i; 以后我尽量使用简写方式
}
}
console.log(sum);
案例：
求输出一个人1到100岁
for(var i=1; i <= 100; i++){
if(i == 1){
console.log('这个人' + i + '岁出生了');
}else if(i == 100){
console.log('这个人' + i + '他死了');
}else{
console.log('这个人' + i + '岁了')
}
}
复制代码双重for循环 重点
双重for 循环
for(外循环的初始化,外循环的条件，外循环的增量){
for(内循环的初始化，内循环的条件，内循环的增量){
需要执行的代码
}
}
重点：双重for循环外面负责行 一行两行的行 外面执行一次里面执行相应的次数
for(var i = 1; i <= 3; i++){
// 外层 i = 1的时候执行一次 里面for执行三次 所有 一共执行了 9次
for(var j =1; j <=3; j++){
console.log('你好');
}
}
案例：
使用for 循环打印三个星星
var str = ''; //空字符串
// 外层for 负责可以打印3行高
for(var i=1; i<=3; i++){
//str +='?'; //简写
// str = str + '?';
// 里面的for 负责的是 一行打印3个星星
for(var j=1; j<=3;j++){
str += '?';
}
str +='\n';
}
console.log(str);
案例：
使用for 循环打印倒三角
var str = '';
for(var i=1; i<=9;i++){
for(var j=1; j<= 10 - i; j++){
str+='?';
}
str+='\n';
}
console.log(str);
// 解答： 外层for 循环负责第一行里面的行 ，里面的for 负责一行里面有几个星星
//第二种算法
var str = '';
for(var i=1; i<=9; i++){
for(var j=i; j<=9;j++){
str+='?';
}
str +='\n';
}
console.log(str);
// 解答: 从行数开始 i= 1；打印出9个，2打印出8个，3打印出7个,所以把内层for循环j从i开始计算
j的启始值从行数开始到9就是打印的个数
// 解答：外层for 循环负责行数 里面for循环执行若干次
案例：
使用for 循环打印99乘法表
var str = '';
// 外层for 负责可以打印 i 行数
for(var i=1; i<=9;i++){
// 里面的for 负责的是 一行 j 一行内的个数
for(var j=1; j<=i; j++){
// 首先i等于1 j = 1 1<=1吗？ 等于 输出 ,第二次输出
1<=2?小于输出然后j++然后j<=2小于等于 输出
str +='?';
总结： 我的个数永远比行数小 ，谁管行数i 谁管理个数呢j 所以 j永远小于i
}
str +='\n';
}
console.log(str);
打印99乘法表
var str = '';
for(var i=1; i<=9; i++){
for(var j=1; j<=i; j++){
// str +='?';
// 1 * 1 = 1;
str+= j + '*' + i + '=' + j*i + '\t';
//这里不要忘记str+=
}
str +='\n';
}
console.log(str);
// 解答:我们的一行的个数永远比行数小 最核心语句 var j=1; j <= i; j++
复制代码练习题： 计算1-100之间能被三整除的数的和 使用for 循环
continue 与break 的区别
continue 跳出本次循环
概念：立即跳出本次循环继续下一次循环，比如吃苹果一共五个 吃到第三个苹果发现有虫子扔掉继续吃这是continue直到吃完五个苹果为止
案例：
for(var i=1; i<=5;i++){
if( i== 2){
console.log('哎呀苹果里面有虫子不能吃了'+ i +'扔掉了');
continue;
}
console.log('我继续吃苹果'+i)
}
复制代码break 退出整个循环
概念：理解跳出整个循环开始执行循环后面的代码，比如吃苹果一共五个 吃到第三个苹果发现有虫子后面的都不吃了这就是break
for(var i=1; i<=5;i++){
if( i== 2){
console.log('哎呀苹果里面有虫子不能吃了'+ i +'扔掉了');
break;
}
console.log('我继续吃苹果'+i)
}
break 是退出整个for循环 跟switch 是相同的
复制代码练习：
简易ATM机器 思路：里面现存有100块钱 如果存钱就用加现在有的钱 如果取钱就取现有的钱 查勘余额就显示余额 退出就退出循环
版本v1.
var num = 100;
var resut = Number(prompt('1、存钱\n2、取钱\n3、显示余额\n4、退出'))
switch (resut) {
case 1:
var num1 = Number(prompt('请输入您要存入的金额'));
num += num1;
alert('您存入的金额是' + num);
break;
case 2:
var num2 = Number(prompt('请您输入您要取出的金额'));
num -=num2;
alert('您取出的金额是' + num);
break;
case 3:
alert('您现在的余额是' + num);
break;
case 4:
break;
default:
alert('您输入的有误请重新输入');
break;
}
补充：里面少了一个很重要的功能 看看看你们能否找到并且补充上，是今天学的一个循环，只能告诉你们这个多了
代码除了敲理解外没有别的办法外物了加油！ 复制代码