diff --git "a/14 \346\235\216\344\277\212\345\205\264/20231026 JavaScript\345\210\235\350\257\206.md" "b/14 \346\235\216\344\277\212\345\205\264/20231026 JavaScript\345\210\235\350\257\206.md" new file mode 100644 index 0000000000000000000000000000000000000000..a1d6c9cb0fd9ee5b961d7d2bb6092d71a6b80256 --- /dev/null +++ "b/14 \346\235\216\344\277\212\345\205\264/20231026 JavaScript\345\210\235\350\257\206.md" @@ -0,0 +1,93 @@ +# Day01 作业布置 + +## 一. 完成课堂所有的代码 + +~~~html +百度一下 +Google一下 + +Google一下 + +bing一下 + + + + + + + +~~~ + + + +## 二. 简单聊聊JavaScript的历史(自己的话术来总结) + +~~~javascript +1995年网景公司招募了BE这位大佬，希望将Scheme 语言 作为脚本语言，但是95年sum公司发行Java语言，网景公司动了心，想与sum公司结盟，希望将Java嵌入网页中运行但是BE非常热衷于Scheme，管理层希望可以简化Java 来适应网页脚本的需求，但是BE对此不感兴趣，用十天设计出来了JavaScript +~~~ + + + +## 三. 说说你对JS引擎的理解(自己的话术总结) + + ~~~JavaScript + // 我们前面说过，高级的编程语言都是需要转成最终的机器指令来执行的； + //  事实上我们编写的JavaScript无论你交给浏览器或者Node执行，最后都是需要被CPU执行的； + //  但是CPU只认识自己的指令集，实际上是机器语言，才能被CPU所执行； + //  所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行； + ~~~ + + + +## 四. JavaScript的交互方式有哪些？(后两种方式) + +```javascript +document.write // 接受多个字符串 // 效果：在浏览器页面查看 +``` + +~~~JavaScript +prompt // 接受一个参数 // 在浏览器接受用户输入 +~~~ + + + +## 五. 定义一些你日常生活或者在某些程序中见到的变量(10个)(预习) + +~~~JavaScript +let age = 18; // number +let str = '啧啧啧' // 字符串 +let age = 20; // 20岁 +let num = 18; +let str = '张' // 字符串 +let str = '程' // 字符串 +let str = '啧啧啧' // 字符串 +let flag = true; +let flag = false; +let arr =[1,'p',true,"张三"] // 数组 +~~~ + + + +## 六. 说出JavaScript中的常见数据类型以及它们代表的含义(预习) + +~~~JavaScript +// 1.null类型 表示空值 +// 2.undefined 表示未定义的值 +// 3.number类型 数字类型 +// 4.string类型 字符串类型 +~~~ + + + diff --git "a/14 \346\235\216\344\277\212\345\205\264/20231027 JavaScript\345\217\230\351\207\217\345\222\214\346\225\260\346\215\256\347\261\273\345\236\213.md" "b/14 \346\235\216\344\277\212\345\205\264/20231027 JavaScript\345\217\230\351\207\217\345\222\214\346\225\260\346\215\256\347\261\273\345\236\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..8d2e94ec41adcd8ba1669274e80476ac09e0fbe0 --- /dev/null +++ "b/14 \346\235\216\344\277\212\345\205\264/20231027 JavaScript\345\217\230\351\207\217\345\222\214\346\225\260\346\215\256\347\261\273\345\236\213.md" @@ -0,0 +1,543 @@ +## JavaScript变量和数据类型 + +### 在 JavaScript 中有 8 种基本的数据类型（7 种原始类型和 1 种复杂类型） + +Number 代表数据类型是数值 + +- 整数 +- 浮点 +- 数组 + +String 代表字符串 + +Boolean 布尔型 + +- true +- false + +Undefined 变量未赋值 = 变量未定义 a is not define + +Null 空值 + +Object 对象 + +function 函数 + +BigInt（后续了解）大整数类型 + +Symbol（后续了解）符号类型 + +### 变量的声明：在 var 关键字 + +```js +// 定义变量同时赋值 +var name = ' 内容'; + +// 先定义再赋值 +var hobby; +hobby = '内容'; + +// 同时定义多个变量 +var a,b,c; +a=1,b=3,c=5; + +// 变量之间用；逗号隔开，分号结束 +var c=1,b=2,c=3; +``` + +不能用js关键字和保留字做变量名和常量名 + +基本上所有的编程语言都不允许变量的开始有数字 + +```js +name1 √ +_name1 √ +1name × + +console.log('1'-1); // 0 +console.log('name1'-1); // NaN +``` + +js代码在 html 内部写法，需要写一对 script 标签 + +声明 js 的变量的时候，不需要写数据类型，js 会自动根据你给的值判断它 + +定义一个变量，但此时还没有赋值，会报 undefined + +undefined 即是一种数据类型，也是一种值，也就是有变量，但没有值，连 null 都没有 null + +没有 var 定义变量也不会报错，因为写到了 window 对象中 + +### 当计算错误是会报 NaN 错误 + +```js +NaN 是计算错误 / Not a Number +如 a = '你好' +b = 2.5 +console.log(a/b) +``` + +### 两个变量交换，实现 num1 和 num2 交换 + +```js +// 第一种方法 +var num3 = num1; +var num1 = num2; +var num2 = num3; + +// 第二种方法 +num1 = num1 + num2; +num2 = num1 - num2; +num1 = num1 - num2; +``` + +### 判断一个变量此时是什么类型 + +```js +typeof 变量; +console.log(typeof 变量); +``` + +### number 类型的最大和最小值 + +```js +console.log(number.min_value); +console.log(number.max_value); +``` + +### isNaN + +判断是不是数值，不是数值为 true 是数值为 false + +单引号，双引号都可以用来标记字符串全部英文引号 '' ''，引号是成对出现，且前后要一致如果内容本身有引号，那么标记的引号要相反 + +### 转义字符串 + +\ ' 单引号 + +\ '' 双引号 + +\t 制表，缩进 + +\n 换行 + +在 + 加号的左右两边只要出现一个字符串，这个 + 加号就不是加法运算，而是拼接字符串，而且得到一个新的字符串 + +强制转成数值，不然结果为11 + +```js +console.log(number('1')+1); // 2 +``` + +转换数值 + +```js +number(true); // 1 +number(false); // 0 +number(null); // 0 +number(undefined); // NaN +number(''); // 0 +``` + +转换字符串 + +0、null、undefined、NaN、'' 转成字符串为false，其他的为true + +### 字符串长度 + +```js +console.log(变量名1,length); // 返回的字符数 +``` + +### 文档中的练习 + +```js +// 练习一：定义一些变量，保存自己的个人信息： +// 比如姓名、年龄、身高、体重、爱好等等 +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 的 余数 + +```js +console.log(10%3) +VM72:1 1 +undefined +``` + + 求幂运算 a ** b 将 a 提升至 a 的 b 次幂。（ES7中的语法，也叫做ES2016） + +在数学中我们将其表示为 a的b次方 + +```js +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分是一个条件(可以使用 > 符号) + +```html +测试分数 + +``` + +案例二：单位5元/斤的苹果，如果购买超过5斤，那么立减8元 + +注意：这里我们让用户输入购买的重量，计算出最后的价格并且弹出结果 + +```html +计算价格 + +``` + +补充一：如果代码块中只有一行代码，那么{}可以省略： + +补充二：if (…) 语句会计算圆括号内的表达式，并将计算结果转换为布尔型（Boolean）。 + +转换规则和Boolean函数的规则一致； + +数字 0、空字符串 “”、null、undefined 和 NaN 都会被转换成 false。 因为它们被称为“假值（falsy）”； + +其他值被转换为 true，所以它们被称为“真值（truthy）”； + +### 多分支语句：if.. else.. + +案例一：如果分数超过90分去游乐场，否则去上补习班 + +满足条件时，做某些事情 + +不满足（else），去做另外一些事 + +```html +测试分数 + +``` + +案例二：m=20，n=30，比较两个数字的大小，获取较大的那个数字 + +```js + 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分：不及格 + +```html +分数评级 + +``` + +### 三元运算符 + +```js +var result = condition ? value1 : value2; +// 计算条件结果，如果结果为真，则返回 value1，否则返回 value2。 +``` + +案例一： m=20，n=30，比较两个数字的大小，获取较大的那个数字 + +```js +var res = m>n?'m大':'n大'; +alert(res); +``` + +案例二：判断一个人是否是成年人了 + +```js +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 + +```js + var i=1; + while(i<10){ + document.write('

Hello World

') + i++; + } +``` + +练习二：打印0~99的数字 + +```js + var i=1; + while(i<100){ + document.write(i+'\n'); + i++; + } +``` + +练习三：计算0~99的数字和 + +```js + var i=1; + var s=0; + while(i<100){ + s=s+i; + i++; + } + alert(s); +``` + +练习四：计算0~99所有奇数的和 + +```js + var i=1; + var s=0; + while(i<100){ + if (i%2==1){ + s=s+i; + } + i++; + } + alert(s); +``` + +练习五：计算0~99所有偶数的 + +```js + 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