diff --git "a/13 \351\231\210\351\233\205\345\256\276/20241025 \346\257\217\346\227\245\344\275\234\344\270\232Java Script \347\254\25401\345\244\251/01_\350\216\267\345\217\226\347\224\250\346\210\267\344\277\241\346\201\257.html" "b/13 \351\231\210\351\233\205\345\256\276/20241025 \346\257\217\346\227\245\344\275\234\344\270\232Java Script \347\254\25401\345\244\251/01_\350\216\267\345\217\226\347\224\250\346\210\267\344\277\241\346\201\257.html" deleted file mode 100644 index d137d56368a37821c4b98bff3cef9610148768ef..0000000000000000000000000000000000000000 --- "a/13 \351\231\210\351\233\205\345\256\276/20241025 \346\257\217\346\227\245\344\275\234\344\270\232Java Script \347\254\25401\345\244\251/01_\350\216\267\345\217\226\347\224\250\346\210\267\344\277\241\346\201\257.html" +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - 获取用户信息 - - - - - \ No newline at end of file diff --git "a/13 \351\231\210\351\233\205\345\256\276/20241025 \346\257\217\346\227\245\344\275\234\344\270\232Java Script \347\254\25401\345\244\251/02_\345\242\236\345\212\240\345\271\264\351\276\204.html" "b/13 \351\231\210\351\233\205\345\256\276/20241025 \346\257\217\346\227\245\344\275\234\344\270\232Java Script \347\254\25401\345\244\251/02_\345\242\236\345\212\240\345\271\264\351\276\204.html" deleted file mode 100644 index fa3106c822105e999c67b7ff7b21c271f8039f43..0000000000000000000000000000000000000000 --- "a/13 \351\231\210\351\233\205\345\256\276/20241025 \346\257\217\346\227\245\344\275\234\344\270\232Java Script \347\254\25401\345\244\251/02_\345\242\236\345\212\240\345\271\264\351\276\204.html" +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - 增加年龄 - - - - - \ No newline at end of file diff --git "a/13 \351\231\210\351\233\205\345\256\276/20241025 \346\257\217\346\227\245\344\275\234\344\270\232Java Script \347\254\25401\345\244\251/03_\350\256\241\347\256\227\351\223\266\350\241\214\345\215\241\344\275\231\351\242\235\346\241\210\344\276\213.html" "b/13 \351\231\210\351\233\205\345\256\276/20241025 \346\257\217\346\227\245\344\275\234\344\270\232Java Script \347\254\25401\345\244\251/03_\350\256\241\347\256\227\351\223\266\350\241\214\345\215\241\344\275\231\351\242\235\346\241\210\344\276\213.html" deleted file mode 100644 index 0164a3fcb747cf6962d376a49b37317ea190deae..0000000000000000000000000000000000000000 --- "a/13 \351\231\210\351\233\205\345\256\276/20241025 \346\257\217\346\227\245\344\275\234\344\270\232Java Script \347\254\25401\345\244\251/03_\350\256\241\347\256\227\351\223\266\350\241\214\345\215\241\344\275\231\351\242\235\346\241\210\344\276\213.html" +++ /dev/null @@ -1,66 +0,0 @@ - - - - - - 计算银行卡余额 - - - - - -

2020年12月消费支出

- - - - - \ No newline at end of file diff --git "a/13 \351\231\210\351\233\205\345\256\276/20241025 \346\257\217\346\227\245\344\275\234\344\270\232Java Script \347\254\25401\345\244\251/\344\275\234\344\270\232.md" "b/13 \351\231\210\351\233\205\345\256\276/20241025 \346\257\217\346\227\245\344\275\234\344\270\232Java script \347\254\25401\345\244\251.md" similarity index 41% rename from "13 \351\231\210\351\233\205\345\256\276/20241025 \346\257\217\346\227\245\344\275\234\344\270\232Java Script \347\254\25401\345\244\251/\344\275\234\344\270\232.md" rename to "13 \351\231\210\351\233\205\345\256\276/20241025 \346\257\217\346\227\245\344\275\234\344\270\232Java script \347\254\25401\345\244\251.md" index 5ecb20ff6cd03db3ff48afbdeef61baad1d074bf..40be8e91fc21b66a5c422d63e0a6a2688ae8291b 100644 --- "a/13 \351\231\210\351\233\205\345\256\276/20241025 \346\257\217\346\227\245\344\275\234\344\270\232Java Script \347\254\25401\345\244\251/\344\275\234\344\270\232.md" +++ "b/13 \351\231\210\351\233\205\345\256\276/20241025 \346\257\217\346\227\245\344\275\234\344\270\232Java script \347\254\25401\345\244\251.md" @@ -28,16 +28,39 @@ console.log( typeof (num + +'11')) 21 依次询问并获取用户的姓名、年龄、性别，收集数据之后在控制台依次打印出来。 - 具体表现如下图： - - - - - 题目提示 - 通过prompt来弹出提示框，收集用户信息 - 通过变量保存数据 +```html + + + + + + 获取用户信息 + + + + + +``` + + + ### 增加年龄 - 题目描述 @@ -46,16 +69,37 @@ console.log( typeof (num + +'11')) 21 2、增加5岁后，通过弹出框提示用户 “ 据我估计，五年后，你可能XX岁了” - - - - -- 题目提示 + 题目提示 - 通过prompt来弹出提示框，收集用户信息 - 通过变量保存数据 - 转换数据类型(需要预习第二天的数据类型转换哟) +```html + + + + + + 增加年龄 + + + + + +``` + + + ### 计算银行卡余额案例 - 题目描述 @@ -64,8 +108,6 @@ console.log( typeof (num + +'11')) 21 2、页面打印一个表格，计算出本月银行卡还剩下的余额。 - - - 题目提示 @@ -83,3 +125,72 @@ console.log( typeof (num + +'11')) 21 6.当然可以提前把html页面搭好。 +```html + + + + + + 计算银行卡余额 + + + + + +

2020年12月消费支出

+ + + + + +``` + diff --git "a/13 \351\231\210\351\233\205\345\256\276/20241028 \350\277\220\347\256\227\347\254\246\347\254\224\350\256\260+\347\273\203\344\271\240 .md" "b/13 \351\231\210\351\233\205\345\256\276/20241028 \350\277\220\347\256\227\347\254\246\347\254\224\350\256\260+\347\273\203\344\271\240 .md" new file mode 100644 index 0000000000000000000000000000000000000000..74d0157f1686c94c9c38118c08fcb925e0bb263d --- /dev/null +++ "b/13 \351\231\210\351\233\205\345\256\276/20241028 \350\277\220\347\256\227\347\254\246\347\254\224\350\256\260+\347\273\203\344\271\240 .md" @@ -0,0 +1,815 @@ +# JavaScript 基础 - 第2天 + +> 理解什么是流程控制，知道条件控制的种类并掌握其对应的语法规则，具备利用循环编写简易ATM取款机程序能力 + +- 运算符 +- 语句 +- 综合案例 + + +## 运算符 + +### 算术运算符 + +数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。 + +算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等 + +| 运算符 | 作用 | +| ------ | ---------------------------------------------------- | +| + | 求和 | +| - | 求差 | +| * | 求积 | +| / | 求商 | +| **%** | 取模（取余数），开发中经常用于作为某个数字是否被整除 | + +> 注意：在计算失败时，显示的结果是 NaN （not a number） + +```javascript +// 算术运算符 +console.log(1 + 2 * 3 / 2) // 4 +let num = 10 +console.log(num + 10) // 20 +console.log(num + num) // 20 + +// 1. 取模(取余数) 使用场景： 用来判断某个数是否能够被整除 +console.log(4 % 2) // 0 +console.log(6 % 3) // 0 +console.log(5 % 3) // 2 +console.log(3 % 5) // 3 + +// 2. 注意事项 : 如果我们计算失败，则返回的结果是 NaN (not a number) +console.log('你好' - 2) +console.log('你好' * 2) +console.log('你好' + 2) // 你好2 +``` + +### 赋值运算符 + +赋值运算符：对变量进行赋值的运算符 + + = 将等号右边的值赋予给左边, 要求左边必须是一个容器 + +| 运算符 | 作用 | +| --- | ---- | +| += | 加法赋值 | +| -= | 减法赋值 | +| *= | 乘法赋值 | +| /= | 除法赋值 | +| %= | 取余赋值 | + +```javascript + +``` + +### 自增/自减运算符 + +| 符号 | 作用 | 说明 | +| ---- | ---- | -------------------------- | +| ++ | 自增 | 变量自身的值加1，例如: x++ | +| -- | 自减 | 变量自身的值减1，例如: x-- | + +1. ++在前和++在后在单独使用时二者并没有差别，而且一般开发中我们都是独立使用 +2. ++在后（后缀式）我们会使用更多 + +> 注意： +> +> 1. 只有变量能够使用自增和自减运算符 +> 2. ++、-- 可以在变量前面也可以在变量后面，比如: x++ 或者 ++x + +```javascript + +``` + +### 比较运算符 + +使用场景：比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false） + +| 运算符 | 作用 | +| ------ | -------------------------------------- | +| > | 左边是否大于右边 | +| < | 左边是否小于右边 | +| >= | 左边是否大于或等于右边 | +| <= | 左边是否小于或等于右边 | +| === | 左右两边是否`类型`和`值`都相等（重点） | +| == | 左右两边`值`是否相等 | +| != | 左右值不相等 | +| !== | 左右两边是否不全等 | + +```javascript + +``` +> 要判断一个值是不是等于 Nan 要用 isNaN() + + + +### 逻辑运算符 + +使用场景：可以把多个布尔值放到一起运算，最终返回一个布尔值 + +| 符号 | 名称 | 日常读法 | 特点 | 口诀 | +| ---- | ------ | -------- | -------------------------- | -------------- | +| && | 逻辑与 | 并且 | 符号两边有一个假的结果为假 | 一假则假 | +| \|\| | 逻辑或 | 或者 | 符号两边有一个真的结果为真 | 一真则真 | +| ! | 逻辑非 | 取反 | true变false false变true | 真变假，假变真 | + +| A | B | A && B | A \|\| B | !A | +| ----- | ----- | ------ | -------- | ----- | +| false | false | false | false | true | +| false | true | false | true | true | +| true | false | false | true | false | +| true | true | true | true | false | + +```javascript + +``` + +### 运算符优先级 + +> 逻辑运算符优先级： ！> && > || + + + + + +## 分支语句 + +分支语句可以根据条件判定真假，来选择性的执行想要的代码 + +分支语句包含： + +1. if分支语句（重点） +2. 三元运算符 +3. switch语句 + +#### if 分支语句 + +语法： + +~~~javascript +if(条件表达式) { + // 满足条件要执行的语句 +} +~~~ + +小括号内的条件结果是布尔值，为 true 时，进入大括号里执行代码；为false，则不执行大括号里面代码 + +小括号内的结果若不是布尔类型时，会发生类型转换为布尔值，类似Boolean() + +如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做~ + +~~~javascript + +~~~ + +#### if双分支语句 + +如果有两个条件的时候，可以使用 if else 双分支语句 + +~~~javascript +if (条件表达式){ + // 满足条件要执行的语句 +} else { + // 不满足条件要执行的语句 +} +~~~ + +例如： + +~~~javascript + +~~~ + +#### if 多分支语句 + +使用场景： 适合于有多个条件的时候 +```javascript +if (条件表达式1){ + // 满足条件要执行的语句1 +} else if (条件表达式2){ + // 满足条件要执行的语句2 +} else if (条件...){ + // 满足条件要执行的语句... +} else { + // 条件都不满足时要执行的语句 +} +``` + +~~~javascript + +~~~ + +#### 三元运算符（三元表达式） + +**使用场景**： 一些简单的双分支，可以使用 三元运算符（三元表达式），写起来比 if else双分支 更简单 + +**符号**：`? 与 : 配合使用` + +语法： + +~~~javascript +条件 ? 表达式1 ： 表达式2 +~~~ + +例如： + +~~~javascript +// 三元运算符（三元表达式） +// 1. 语法格式 +// 条件 ? 表达式1 : 表达式2 + +// 2. 执行过程 +// 2.1 如果条件为真，则执行表达式1 +// 2.2 如果条件为假，则执行表达式2 + +// 3. 验证 +// 5 > 3 ? '真的' : '假的' +console.log(5 < 3 ? '真的' : '假的') + +// let age = 18 +// age = age + 1 +// age++ + +// 1. 用户输入 +let num = prompt('请您输入一个数字:') +// 2. 判断输出- 小于10才补0 +// num = num < 10 ? 0 + num : num +num = num >= 10 ? num : 0 + num +alert(num) +~~~ + +#### switch语句（了解） + +使用场景： 适合于有多个条件的时候，也属于分支语句，大部分情况下和 if多分支语句 功能相同 + +注意： + +1. switch case语句一般用于等值判断, if适合于区间判断 +2. switchcase一般需要配合break关键字使用 没有break会造成case穿透 +3. if 多分支语句开发要比switch更重要，使用也更多 + +例如： + +~~~javascript +// switch分支语句 +// 1. 语法 +// switch (表达式) { +// case 值1: +// 代码1 +// break + +// case 值2: +// 代码2 +// break +// ... +// default: +// 代码n +// } + + +~~~ + +#### 断点调试 + +**作用：**学习时可以帮助更好的理解代码运行，工作时可以更快找到bug + +浏览器打开调试界面 + +1. 按F12打开开发者工具 +2. 点到源代码一栏 （ sources ） +3. 选择代码文件 + +**断点：**在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来 + + + +### 循环语句 + +使用场景：重复执行 指定的一段代码，比如我们想要输出10次 '我学的很棒' + +学习路径： + +1.while循环 + +2.for 循环（重点） + +#### while循环 + +while : 在…. 期间， 所以 while循环 就是在满足条件期间，重复执行某些代码。 + +**语法：** + +~~~javascript +while (条件表达式) { + // 循环体 +} +~~~ + +例如： + +~~~javascript +// while循环: 重复执行代码 + +// 1. 需求: 利用循环重复打印3次 '月薪过万不是梦，毕业时候见英雄' +let i = 1 +while (i <= 3) { + document.write('月薪过万不是梦，毕业时候见英雄~
') + i++ // 这里千万不要忘了变量自增否则造成死循环 +} +~~~ + +循环三要素： + +1.初始值 （经常用变量） + +2.终止条件 + +3.变量的变化量 + +例如： + +~~~javascript + +~~~ + +#### 中止循环 + +`break` 中止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率） + +`continue` 中止本次循环，一般用于排除或者跳过某一个选项的时候 + +~~~javascript + +~~~ + +#### 无限循环 + +1.while(true) 来构造“无限”循环，需要使用break退出循环。（常用） + +2.for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环。 + +~~~javascript +// 无限循环 +// 需求： 页面会一直弹窗询问你爱我吗？ +// (1). 如果用户输入的是 '爱'，则退出弹窗 +// (2). 否则一直弹窗询问 + +// 1. while(true) 无限循环 +// while (true) { +// let love = prompt('你爱我吗?') +// if (love === '爱') { +// break +// } +// } + +// 2. for(;;) 无限循环 +for (; ;) { + let love = prompt('你爱我吗?') + if (love === '爱') { + break + } +} +~~~ + +## 综合案例-ATM存取款机 + + + +![67101878155](assets/1671018781557.png) + + + +分析： + +①：提示输入框写到循环里面（无限循环） + +②：用户输入4则退出循环 break + +③：提前准备一个金额预先存储一个数额 money + +④：根据输入不同的值，做不同的操作 + +​ (1) 取钱则是减法操作， 存钱则是加法操作，查看余额则是直接显示金额 + +​ (2) 可以使用 if else if 多分支 来执行不同的操作 + +完整代码： + +~~~javascript + +~~~ + + + +## 练习 + +1. 【1】运算符优先级的使用。假设手机原来的话费余额是10元,通话资费为0.1元/分,流量资费为0.3元/MB,在使用了30MB后，计算手机话费余额还可以进行多长时间的通话 + + ```htm + + + + + + Document + + + + + + + + ``` + + + +2. 【2】计算员工的实除收入,假设某员工的月薪为6500元，专项扣除费用共500元，个人所得税起征点是5000元，税率为3%，计算该员工的实际收入。(提示:实际收入=(月薪-专项扣除)-(月新-专项扣除-个税起征点)*税率) + + ```html + + + + + + Document + + + + + + + ``` + + + +3. 【3】判断2024年2月的天教,闰年2月的天数是29天，非闰年2月的天数是28天，应用条件运算符判断2024年2月的天数。 + + ```html + + + + + + Document + + + + + + + ``` + + + +4. 【4】接收用户输入的用户名和密码，若用户名为 “admin” ,且密码为 “123456” ,则提示用户登录成功! 否则，提示失败。 + + ```html + + + + + + Document + + + + + + + ``` + + + +5. 【5】获取数字中的最小值定义4个数值型变量，值分别为26、17、10、20，应用if语句获取这4个数字中的最小值。 + + ```html + + + + + + Document + + + + + + + ``` + + + +6. 【6】判断空气污染程度,空气污染指数(API)是评估空气质量状况的一组数字，如果空气污染指数为0~100，则空气质量状况属于良好:如果空气污染指数为101~200，则空气质量状况属于经度污染:如果空气污染指数为201~300,则空气质量状况属于中度污染:如果空气污染指数大子300,则气质量状况属于重度污染。让用户输入其城市的污染指数,判断该城市的空气污染程度 + + ```html + + + + + + Document + + + + + + + ``` + + +