diff --git "a/19\345\275\255\345\213\207\346\226\214/JavaScript\345\237\272\347\241\200\347\254\25402\345\244\251\344\275\234\344\270\232.md" "b/19\345\275\255\345\213\207\346\226\214/JavaScript\345\237\272\347\241\200\347\254\25402\345\244\251\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..2c15bc38490ababcea3a3c49b101df50ed6a53ed --- /dev/null +++ "b/19\345\275\255\345\213\207\346\226\214/JavaScript\345\237\272\347\241\200\347\254\25402\345\244\251\344\275\234\344\270\232.md" @@ -0,0 +1,434 @@ +# 课堂练习 + +```js + + + + + + Document + + + + + +``` + + + + + +### 核心知识点 + +1. 打印0-20之间的整数, 将每个数输出到控制台 + + ```js + + + + + + Document + + + + + + ``` + + + +2. 计算1-1000之间的累加和,并且打印输出到页面中 + + ```js + + + + + + Document + + + + + + ``` + + + +3. 页面依次打印 100-200之间,可以被6整除的数字 + + ```js + + + + + + Document + + + + + + ``` + + + +4. 用户弹窗输入两个数字,页面输出两个数字中的最大值(请使用三元运算符完成) + + ```js + + + + + + Document + + + + + + ``` + + + +5. **用户输入一个数, 计算 1 到这个数的累加和** + + - 比如 用户输入的是 5, 则计算 1~5 之间的累加和 + + - 比如用户输入的是10, 则计算 1~10 之间的累加和 + + ```js + + + + + + Document + + + + + + ``` + + + +6. **输出成绩案例(请使用if多分支来书写程序)** + + 题目描述: + + 接收用户输入的分数,根据分数输出对应的等级字母 A、B、C、D、E, + + - 90分(含)以上 ,输出:A + 80分(含)~ 90 分(不含),输出:B + 70分(含)~ 80 分(不含),输出:C + 60分(含)~ 70 分(不含),输出:D + + - 60分(不含) 以下,输出 E + + ```JS + + + + + + Document + + + + + + ``` + + + +7. **输出星期练习(请使用switch分支语句来书写程序)** + + 题目描述: + + 请用户输入1个星期数. 就将对应的英文的星期打印出来. + + - 比如用户输入'星期一', 则 页面可以打印 monday + + - 英文自己查有道。比如星期一是 monday 星期二是 tuesday + + ```JS + + + + + + + Document + + + + + + ``` + + + +8. **用户登录验证** + + 题目描述: + + 接收用户输入的用户名和密码,若用户名为 “admin” ,且密码为 “123456” ,则提示用户登录成功! 否则,让用户一直输入。 + + + + ```js + + + + + + Document + + + + + + + ``` + + + + + +### 综合案例变形 + +需求:根据用户选择计算两个数的结果: + +**题目描述:** + +打开页面出现一个提示框,注意是一直提示的,'请您选择 + - * / ,如果输入q,则是退出结束程序 + +- 如果输入的是 + - * / 其中任何一个,比如用户输入是 + ,则是计算求和,如果用户输入是 * 则是计算乘积 + - 则提示第一个弹窗,提示用户:'请您输入第一个数字' + - 输入完毕则继续提示第二个弹窗,提示用户:'请您输入第二个数字' + - 都输入完毕,则通过警示框 alert 输出结果 +- 如果输入是 q,则结束程序 + +提示:多分支请使用 if 多分支来完成 + +```js + + + + + + Document + + + + + +``` + + + + + +具体效果如图: + + + +## 简答题:关键字汇总( 能够简单的说出来这些关键字干啥用的 ) + +- let +- typeof +- if +- else +- switch +- case +- default +- while +- break +- continue + + + + + diff --git "a/19\345\275\255\345\213\207\346\226\214/\345\217\230\351\207\217\345\222\214\346\225\260\346\215\256\347\261\273\345\236\213\351\242\204\344\271\240.md" "b/19\345\275\255\345\213\207\346\226\214/\345\217\230\351\207\217\345\222\214\346\225\260\346\215\256\347\261\273\345\236\213\351\242\204\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..4cf18f0e5adcdae5b70facefacb34997af22808b --- /dev/null +++ "b/19\345\275\255\345\213\207\346\226\214/\345\217\230\351\207\217\345\222\214\346\225\260\346\215\256\347\261\273\345\236\213\351\242\204\344\271\240.md" @@ -0,0 +1,536 @@ +# JavaScript变量和数据类型 + +## 有8种基本数据类型(7个原始类型和1种复杂类型) + +- 整数 +- 浮点 +- 数组 + +String代表字符串 + +Boolean 布尔型 + +- true +- false + +Undefined变量未赋值=变量未定义 a is not define + +null 空 + +object 对象 + +function 函数 + +biglnt 大整数类型 + +symbol 符号类型 + + + +## 变量的声明:在var关键字 + +```javascript +// 定义变量并赋值 +var name = '......'; + +// 先定义再赋值 +var hobby; +hobby = '内容'; + +// 同时定义多个变量 +var a,b,c; +a=1,b=3,c=5; + +// 变量之间用;逗号隔开,分号结束 +var c=1,b=2,c=3; +``` + +不能用js关键字和保留字做变量名和常量名 + +基本上所有的编程语言都不允许变量的开始有数字 + +js代码在 html 内部写法,需要写一对 script 标签 + +声明 js 的变量的时候,不需要写数据类型,js 会自动根据你给的值判断它 + +定义一个变量,但此时还没有赋值,会报 undefined + +undefined 即是一种数据类型,也是一种值,也就是有变量,但没有值,连 null 都没有 null + +没有 var 定义变量也不会报错,因为写到了 window 对象中 + + + +### 计算错误是会报 NaN 错误 + +```javascript +NaN 是计算错误 / Not a Number +如 a = '你好' +b = 2.5 +console.log(a/b) +``` + +### 变量交换,实现 num1 和 num2 交换 + +``` +// 第一种方法 +var num3 = num1; +var num1 = num2; +var num2 = num3; + +// 第二种方法 +num1 = num1 + num2; +num2 = num1 - num2; +num1 = num1 - num2; +``` + +### 判断一个变量此时是什么类型 + +``` +typeof 变量; +console.log(typeof 变量); +``` + +### number 类型的最大和最小值 + +``` +console.log(number.min_value); +console.log(number.max_value); +``` + +### isNaN + +判断是不是数值,不是数值为 true 是数值为 false + +单引号,双引号都可以用来标记字符串全部英文引号 '' '',引号是成对出现,且前后要一致如果内容本身有引号,那么标记的引号要相反 + +### 转义字符串 + +\ ' 单引号 + +\ '' 双引号 + +\t 制表,缩进 + +\n 换行 + +在 + 加号的左右两边只要出现一个字符串,这个 + 加号就不是加法运算,而是拼接字符串,而且得到一个新的字符串 + +强制转成数值,不然结果为11 + +``` +console.log(number('1')+1); // 2 +``` + +转换数值 + +``` +number(true); // 1 +number(false); // 0 +number(null); // 0 +number(undefined); // NaN +number(''); // 0 +``` + +转换字符串 + +0、null、undefined、NaN、'' 转成字符串为false,其他的为true + +### 字符串长度 + +``` +console.log(变量名1,length); // 返回的字符数 +``` + +### 文档中的练习 + +``` +// 练习一:定义一些变量,保存自己的个人信息: +// 比如姓名、年龄、身高、体重、爱好等等 +var name='sana'; +var age=27; +var weight=48; +var hight=166; +var hobby='dance'; + +// 练习二:定义一个变量name,赋值成coderwhy。定义一个变量admin,将name赋值给admin +var corderwhy='mina'; +var name1=coderwhy; +var admin=name1; + +// 练习三:定义变量,保存两个数字,并且对两个变量的数字进行交换 +//  方式一:使用临时变量 +var a=1,b=2; +var c=a; +var a=b; +var b=c; + +// 方式二:不使用临时变量(了解即可) +var a=a+b; +var b=a-b; +var a=a-b; + +// 练习四:让用户在浏览器中输入一个值,在JavaScript程序中使用变量接收 +// 作业:你平时在使用一些应用程序时,哪些内容可以定义成变量? +// 比如玩游戏、听歌、购物的应用程序中; +prompt('请输入名字'); +``` + +## 常见的运算符 + +| 运算符 | 运算规则 | 范例 | 结果 | +| ------ | ---------- | ---------- | ------ | +| + | 加法 | 2 + 3 | 5 | +| + | 连接字符串 | ‘中’+ ‘国’ | ‘中国’ | +| - | 减法 | 2 - 3 | -1 | +| * | 乘法 | 2 * 3 | 6 | +| / | 除法 | 5 / 2 | 2.5 | +| % | 取余数 | 5 % 2 | 1 | +| ** | 幂(ES7) | 2 ** 3 | 8 | + +### 取余 % 和 求幂 + +取余运算符是 %,尽管它看起来很像百分数,但实际并无关联 + +a % b 的结果是 a 整除 b 的 余数 + +``` +console.log(10%3) +VM72:1 1 +undefined +``` + +求幂运算 a ** b 将 a 提升至 a 的 b 次幂。(ES7中的语法,也叫做ES2016) + +在数学中我们将其表示为 a的b次方 + +``` +console.log(2**3); +VM127:1 8 +undefined + +console.log(2**4); +VM140:1 16 +undefined +``` + +### 原地修改(Modify-in-place) + +| 运算符 | 运算规则 | 范例 | 结果 | +| ------ | ----------------- | -------------- | ---- | +| = | 赋值 | a = 5 | 5 | +| += | 加后赋值 | a = 5, a += 2 | 7 | +| -= | 减后赋值 | a = 5, a -= 2 | 3 | +| *= | 乘后赋值 | a = 5; a *= 2 | 10 | +| /= | 除后赋值 | a = 5; a /= 2 | 2.5 | +| %= | 取模 (余数)后赋值 | 5 % 2 | 1 | +| **= | 幂后赋值 | a = 5; a **= 2 | 25 | + +### 自增、自减 + +对一个数进行加一、减一是最常见的数学运算符之一。 + +所以,对此有一些专门的运算符: + +自增 ++ 将变量加1; + +自减 -- 将变量减1; + +自增/自减只能应用于变量。 + +将其应用于数值(比如 5++)则会报错。 自增、自减 coderwhy + +运算符 ++ 和 -- 可以置于变量前,也可以置于变量后。 + +当运算符置于变量后,被称为“后置形式”(postfix form):counter++。 + +当运算符置于变量前,被称为“前置形式”(prefix form):++counter。 + +两者都做同一件事:将变量 counter 与 1 相加。 + +### 比较运算符 + +比较运算符的结果都是Boolean类型的 + +| 运算符 | 运算规则 | 范例 | 结果 | +| ------ | -------- | ------ | ----- | +| == | 相等 | 4 == 3 | false | +| != | 不等于 | 4 != 3 | true | +| > | 小于 | 4 > 3 | true | +| < | 大于 | 4 < 3 | false | +| >= | 小于等于 | 4 <= 3 | false | +| <= | 大于等于 | 4 >= 3 | true | + +### === 和 == 的区别 + +普通的相等性检查 == 存在一个问题,它不能区分出 0 和 false,或者空字符串和 false这类运算: + +这是因为在比较不同类型的值时,处于判断符号 == 两侧的值会先被转化为数字; + +空字符串和 false 也是如此,转化后它们都为数字 0; + +严格相等运算符 === 在进行比较时不会做任何的类型转换; + +换句话说,如果 a 和 b 属于不同的数据类型,那么 a === b 不会做任何的类型转换而立刻返回 false; + +## 分支语句和逻辑运算符 + +### 单分支语句:if + +if(...) 语句计算括号里的条件表达式,如果计算结果是 true,就会执行对应的代码块。 + +案例一: 如果小明考试超过90分, 就去游乐场 + +“如果”相当于JavaScript中的关键字if 分数超过90分是一个条件(可以使用 > 符号) + +``` +测试分数 + +``` + +案例二:单位5元/斤的苹果,如果购买超过5斤,那么立减8元 + +注意:这里我们让用户输入购买的重量,计算出最后的价格并且弹出结果 + +``` +计算价格 + +``` + +补充一:如果代码块中只有一行代码,那么{}可以省略: + +补充二:if (…) 语句会计算圆括号内的表达式,并将计算结果转换为布尔型(Boolean)。 + +转换规则和Boolean函数的规则一致; + +数字 0、空字符串 “”、null、undefined 和 NaN 都会被转换成 false。 因为它们被称为“假值(falsy)”; + +其他值被转换为 true,所以它们被称为“真值(truthy)”; + +### 多分支语句:if.. else.. + +案例一:如果分数超过90分去游乐场,否则去上补习班 + +满足条件时,做某些事情 + +不满足(else),去做另外一些事 + +``` +测试分数 + +``` + +案例二:m=20,n=30,比较两个数字的大小,获取较大的那个数字 + +``` + var m=20,n=30; + if(m>n){ + alert('m>n'); + }else{ + alert('n>m'); + } +``` + +### 多分支结构: if.. else if.. else + +多分支结构: if.. else if.. else.. + +有时我们需要判断多个条件; + +我们可以通过使用 else if 子句实现; + +案例: 分数评级: + +考试分数大于90:优秀 + +大于80小于等于90:良好 + +大于60小于等于80:合格 + +小于60分:不及格 + +``` +分数评级 + +``` + +### 三元运算符 + +``` +var result = condition ? value1 : value2; +// 计算条件结果,如果结果为真,则返回 value1,否则返回 value2。 +``` + +案例一: m=20,n=30,比较两个数字的大小,获取较大的那个数字 + +``` +var res = m>n?'m大':'n大'; +alert(res); +``` + +案例二:判断一个人是否是成年人了 + +``` +var age = prompt('年龄') +var res2 = age>=18 ? '成年':'未成年'; +alert(res2); +``` + +### 认识逻辑运算符 + +| 运算符 | 运算规则 | 范例 | 结果 | +| ------ | ------------ | ------------- | ----- | +| && | 与: 同时为真 | false && True | false | +| \|\| | 或: 一个为真 | false or true | true | +| ! | 非: 取反 | !false | true | + +### switch语句 + +case穿透问题: 一条case语句结束后,会自动执行下一个case的语句; + +这种现象被称之为case穿透;break关键字 + +通过在每个case的代码块后添加break关键字来解决这个问题; + +注意事项:这里的相等是严格相等。 + +被比较的值必须是相同的类型才能进行匹配。 + +## while和for循环 + +### while循环 + +当条件成立时,执行代码块; + +当条件不成立时,跳出代码块; + +如果条件一直成立(为true),那么会产生死循环。 + +这个时候必须通过关闭页面来停止死循环; + +开发中一定要避免死循环的产生; while循环 coderwhy + +while循环的练习题目: + +练习一:打印10次Hello World + +``` + var i=1; + while(i<10){ + document.write('

Hello World

') + i++; + } +``` + +练习二:打印0~99的数字 + +``` + var i=1; + while(i<100){ + document.write(i+'\n'); + i++; + } +``` + +练习三:计算0~99的数字和 + +``` + var i=1; + var s=0; + while(i<100){ + s=s+i; + i++; + } + alert(s); +``` + +练习四:计算0~99所有奇数的和 + +``` + var i=1; + var s=0; + while(i<100){ + if (i%2==1){ + s=s+i; + } + i++; + } + alert(s); +``` + +练习五:计算0~99所有偶数的 + +``` + var i=1; + var s=0; + while(i<100){ + if (i%2==0){ + s=s+i; + } + i++; + } + alert(s); +``` + +### do..while循环 + +do..while循环和while循环非常像,二者经常可以相互替代(不常用) + +但是do..while的特点是不管条件成不成立,do循环体都会先执行一次; + +通常我们更倾向于使用while循环。 + +### for循环 + +| 语句段 | 例子 | 执行过程 | +| -------------- | --------- | ---------------------------------------------- | +| begin | let i = 0 | 进入循环时执行一次 | +| condition | i < 3 | 在每次循环迭代之前检查,如果为 false,停止循环 | +| body(循环体) | alert(i) | 条件为真时,重复运行 | +| step | i++ | 在每次循环体迭代后执行 | + +begin 执行一次,然后进行迭代:每次检查 condition 后,执行 body 和 step \ No newline at end of file