diff --git "a/\344\275\225\345\204\204\346\210\220/20251110-\345\205\250\346\240\210.md" "b/\344\275\225\345\204\204\346\210\220/20251110-\345\205\250\346\240\210.md" new file mode 100644 index 0000000000000000000000000000000000000000..e4d4f4751d8e473904a52fba4f76b8b10acbe7c0 --- /dev/null +++ "b/\344\275\225\345\204\204\346\210\220/20251110-\345\205\250\346\240\210.md" @@ -0,0 +1,38 @@ +## 全栈(全干工程师)-前端+后端 +1.前端 + - vue3 + - react + +2.后端 + - C# asp.net core + - java springboot springcloud springmvc + - python Django + - C/C++ + - 汇编语言 + - nodejs + - 二进制 + - go + - php + - vb + - dephi + - 易语言 + - lisp + - rust + - ruby + - lua + +## 学习内容 +![](./图片imgs/20251110-笔记.png) + +## 练习题 +![](./图片imgs/20251110-练习.png) + +```html + + + + + +``` \ No newline at end of file diff --git "a/\344\275\225\345\204\204\346\210\220/20251112-js\345\217\230\351\207\217\347\255\211.md" "b/\344\275\225\345\204\204\346\210\220/20251112-js\345\217\230\351\207\217\347\255\211.md" new file mode 100644 index 0000000000000000000000000000000000000000..d397defd5e19c1968dc4873c997b81d590c13a48 --- /dev/null +++ "b/\344\275\225\345\204\204\346\210\220/20251112-js\345\217\230\351\207\217\347\255\211.md" @@ -0,0 +1,77 @@ +## 学习内容 +![](./图片imgs/20251112-笔记.png) + - 转义字符让双引号单引号不混乱:"/'包含单引号内容" + - a++先用再加;++a先加再用 + - 与运算找false,或运算找true + +## 练习题 + +### 练习1 +![](./图片imgs/20251112-练习.png) +```html + +``` + +### 练习2 +![](./图片imgs/20251112-练习2.png) +```html + +``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251113-\346\225\260\346\215\256\347\261\273\345\236\213.md" "b/\344\275\225\345\204\204\346\210\220/20251113-\346\225\260\346\215\256\347\261\273\345\236\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..4444d22d0916460153ad0a4205063569a7ab34ca --- /dev/null +++ "b/\344\275\225\345\204\204\346\210\220/20251113-\346\225\260\346\215\256\347\261\273\345\236\213.md" @@ -0,0 +1,133 @@ +## 学习内容 + - 语句包含表达式 + - 表达式:一串数据间输出结果:5+3<3+8等 + - '' "" O null undefind都当成false去运算 + +## 练习题 +![](图片imgs/20251113-练习.png) + +```html + + + + +``` diff --git "a/\344\275\225\345\204\204\346\210\220/20251114-\346\265\201\347\250\213\346\216\247\345\210\266.md" "b/\344\275\225\345\204\204\346\210\220/20251114-\346\265\201\347\250\213\346\216\247\345\210\266.md" new file mode 100644 index 0000000000000000000000000000000000000000..9867ad346ce871be0577a117706d82345f55f615 --- /dev/null +++ "b/\344\275\225\345\204\204\346\210\220/20251114-\346\265\201\347\250\213\346\216\247\345\210\266.md" @@ -0,0 +1,88 @@ +## 练习题 +![](图片imgs/20251114-练习.png) +```html + +``` diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251110-\347\254\224\350\256\260.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251110-\347\254\224\350\256\260.png" new file mode 100644 index 0000000000000000000000000000000000000000..8781b5bc084980143c83e67b31ed5fea410fdbb9 Binary files /dev/null and "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251110-\347\254\224\350\256\260.png" differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251110-\347\273\203\344\271\240.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251110-\347\273\203\344\271\240.png" new file mode 100644 index 0000000000000000000000000000000000000000..57b579db141f1f3a70c8b32af437ec19e2612a83 Binary files /dev/null and "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251110-\347\273\203\344\271\240.png" differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\254\224\350\256\260.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\254\224\350\256\260.png" new file mode 100644 index 0000000000000000000000000000000000000000..644d76da243f6b78620482ab8823c412889bfb4a Binary files /dev/null and "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\254\224\350\256\260.png" differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\273\203\344\271\240.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\273\203\344\271\240.png" new file mode 100644 index 0000000000000000000000000000000000000000..e996fe792933c8f145c1c0b52cbd126ea8a2421c Binary files /dev/null and "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\273\203\344\271\240.png" differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\273\203\344\271\2402.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\273\203\344\271\2402.png" new file mode 100644 index 0000000000000000000000000000000000000000..fd02a75b5767bfebbf151b256d357382c9a0b6f4 Binary files /dev/null and "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251112-\347\273\203\344\271\2402.png" differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251113-\347\273\203\344\271\240.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251113-\347\273\203\344\271\240.png" new file mode 100644 index 0000000000000000000000000000000000000000..125553fd376a6c54d602ab7436727ce42b74aba4 Binary files /dev/null and "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251113-\347\273\203\344\271\240.png" differ diff --git "a/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251114-\347\273\203\344\271\240.png" "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251114-\347\273\203\344\271\240.png" new file mode 100644 index 0000000000000000000000000000000000000000..b3ca8ff8e48c2c438e1160a18b313058c0e18075 Binary files /dev/null and "b/\344\275\225\345\204\204\346\210\220/\345\233\276\347\211\207imgs/20251114-\347\273\203\344\271\240.png" differ diff --git "a/\345\205\250\344\277\212\346\236\227/20251110-\350\257\276\345\240\202\347\254\224\350\256\260js\345\211\215\347\236\273.md" "b/\345\205\250\344\277\212\346\236\227/20251110-\350\257\276\345\240\202\347\254\224\350\256\260js\345\211\215\347\236\273.md" new file mode 100644 index 0000000000000000000000000000000000000000..2f808ecad389b16fec48818fd6733887573b3392 --- /dev/null +++ "b/\345\205\250\344\277\212\346\236\227/20251110-\350\257\276\345\240\202\347\254\224\350\256\260js\345\211\215\347\236\273.md" @@ -0,0 +1,38 @@ +# javaScript的几种使用方式 + +### 直接在页面中输入js代码 + ``` + + ``` + +### 链入外部js文件 + ``` + + + ``` + src中链接的就是外部js文件 + +### 引用 + ``` + + + ``` + + ## 作业 + ``` +

千里之行,始于足下。

+ document.getElementById('demo'); + + + + + + +``` + +- 外部JavaScript文件(showUrl.js) + +``` +// 弹出对话框显示官网地址(alert() 是浏览器内置弹窗方法) +alert("明日学院官网地址:http://www.mingrisoft.com"); +``` + + diff --git "a/\345\206\211\345\275\254\347\222\220/20251112-\347\254\224\350\256\260.md" "b/\345\206\211\345\275\254\347\222\220/20251112-\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..2298c4485a6ee2f06cd044ef3c8c83dbda56238c --- /dev/null +++ "b/\345\206\211\345\275\254\347\222\220/20251112-\347\254\224\350\256\260.md" @@ -0,0 +1,154 @@ +## 笔记 + +**一、声明方式 ** + +3 种声明方式: + +```javascript +let a = 10; +let b = 20; +``` + +命名规则:字母、数字、_、$ 组成,不能以数字开头,区分大小写,避免关键字(let、var、if 等) + +二、**运算符** + +- 算术运算符:+、-、*、/、%(取余)、++(自增)、--(自减) + +- 赋值运算符:=、+=、-=、*=、/= + +- 比较运算符:==(值相等)、===(值和类型都相等,推荐)、>、<、>=、<= + +- 逻辑运算符:&&(与)、||(或)、!(非) + +- 三元运算符:条件 ? 表达式1 : 表达式2(简洁的 if-else) + +(2)基本数据类型 + +| 类型 | 描述 | 示例 | +| :-------: | --------------------- | -------------- | +| Number | 数字(整数 / 浮点数 | 123、3.14、NaN | +| String | 字符串(单 / 双引号) | 'hello'、"JS" | +| Boolean | 布尔值(真 / 假) | true、false | +| Undefined | 未定义(声明未赋值) | let x; | +| Null | 空值(主动赋值为空) | let y = null; | +| Symbol | 唯一标识(ES6+) | Symbol('id') | + +**三、转义字符** + +#### 常用转义字符列表 + +| 转义字符 | 描述 | 示例 | 输出结果 | +| -------- | ----------------- | -------------------------------- | --------------------------- | +| `\'` | 单引号 | `console.log('It\'s a cat')` | `It's a cat` | +| `\"` | 双引号 | `console.log("He said \"Hi\"")` | `He said "Hi"` | +| `\\` | 反斜杠本身 | `console.log("Path: C:\\Users")` | `Path: C:\Users` | +| `\n` | 换行符(LF) | `console.log("Line 1\nLine 2")` | Line 1Line 2 | +| `\r` | 回车符(CR) | `console.log("Hello\rWorld")` | `World`(覆盖前半部分) | +| `\t` | 水平制表符(Tab) | `console.log("Name:\tTom")` | `Name: Tom` | +| `\b` | 退格符 | `console.log("abc\bd")` | `abd`(删除前一个字符 `c`) | +| `\f` | 换页符 | 较少使用,用于分页场景 | | +| `\v` | 垂直制表符 | 较少使用,用于垂直对齐 | | + +## 作业 + + +1. + +```javascript + document.write('珠穆朗玛峰的高度≈8848.86m
'); +``` + +2. + +```javascript +p>文件夹demo路径:

+ +``` + + + +3. + +```javascript + let area = 17100000 + 'km' + '\u00B2'; + document.write(`俄罗斯的国土面积 ≈ ${area}`); +``` + +4. + +```javascript +

个人信息:

+ +``` + + + + + +综合练习1 + +```javascript + +``` + + + +综合练习2 + +```javascript + +``` + +综合练习3 + +```javascript + +``` + diff --git "a/\345\206\211\345\275\254\347\222\220/20251113\344\275\234\344\270\232.md" "b/\345\206\211\345\275\254\347\222\220/20251113\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..fdf8ca6ea0bc5d8efbe9ca7ebfd8c46d64c95547 --- /dev/null +++ "b/\345\206\211\345\275\254\347\222\220/20251113\344\275\234\344\270\232.md" @@ -0,0 +1,446 @@ +## 笔记 + +# JavaScript 核心子知识点笔记:typeof、数据类型转换、表达式 + +## 一、typeof 语法与使用规则 + +### 1. 核心作用 + +判断变量 / 值的数据类型,返回一个 **字符串**(表示类型名称),是前端调试和类型判断的基础工具。 + +### 2. 语法格式 + +```javascript +// 语法1:判断变量 +typeof 变量名; + +// 语法2:判断直接值(字面量) +typeof 直接值; +``` + +### 3. 完整返回值对照表(含特殊情况) + +| 被判断的值 / 变量 | typeof 返回结果(字符串) | 说明 | +| ----------------- | ------------------------- | ---------------------------------- | +| 字符串(String) | `"string"` | 含单引号、双引号、模板字符串 | +| 数字(Number) | `"number"` | 整数、小数、`NaN`、`Infinity` | +| 布尔值(Boolean) | `"boolean"` | 仅 `true`/`false` | +| undefined | `"undefined"` | 变量声明未赋值或直接写 `undefined` | +| null | `"object"` | 历史遗留 bug(重点注意!) | +| 对象(Object) | `"object"` | 普通对象、数组、日期对象等 | +| 数组(Array) | `"object"` | 数组本质是 “类对象” 结构 | +| 函数(Function) | `"function"` | 唯一能被 typeof 区分的对象子类型 | +| Symbol | `"symbol"` | ES6+ 唯一标识类型 | +| BigInt | `"bigint"` | ES10+ 大整数类型 | + +### 4. 实用示例(含易错点) + +```javascript +// 1. 基本类型判断(正常情况) +typeof "abc"; // "string" +typeof 123; // "number" +typeof NaN; // "number"(NaN 是“非数字的数字类型”) +typeof true; // "boolean" +typeof undefined; // "undefined" +let x; +typeof x; // "undefined"(变量声明未赋值) + +// 2. 特殊情况(重点记) +typeof null; // "object"(bug,需单独判断 null) +typeof []; // "object"(数组需用 Array.isArray() 判断) +typeof {}; // "object" +typeof function() {}; // "function"(唯一例外的对象类型) + +// 3. 正确判断 null 和数组(补充方法) +let a = null; +a === null; // true(判断 null 必须用 ===) + +let b = [1,2,3]; +Array.isArray(b); // true(专门判断数组的方法) +``` + +### 5. 注意事项 + +- typeof 是 **运算符**,不是函数,无需加括号(`typeof(x)` 也能运行,但非必需)。 + +- 无法区分 `null`、普通对象、数组(需配合其他方法,如 `=== null`、`Array.isArray()`)。 + +- 对未声明的变量使用 typeof 不会报错,返回"undefined"(特殊特性): + + ```javascript + typeof unDeclaredVar; // "undefined"(未声明变量,不报错) + // unDeclaredVar; // 直接访问会报错:ReferenceError + ``` + +## 二、数据类型转换规则(核心重点) + +JS 是弱类型语言,变量类型会**自动转换**(隐式转换),也可通过方法**手动转换**(显式转换),转换核心围绕 “基本类型之间的转换”。 + +### 1. 显式转换(主动控制,推荐使用) + +手动调用内置方法转换,结果可预期,避免隐式转换的陷阱。 + +#### (1)转换为字符串(String) + +| 转换方法 | 示例 | 结果 | +| ---------------- | --------------------------- | ------------- | +| String (值) | String(123)、String(true) | "123"、"true" | +| 变量.toString () | let num=456; num.toString() | "456" | + +- 注意:undefined和null不能用toString()(会报错),需用String(): + + ```javascript + String(undefined); // "undefined" + String(null); // "null" + // undefined.toString(); // 报错:TypeError + ``` + +#### (2)转换为数字(Number) + +| 转换方法 | 示例 | 结果 | +| ----------------------- | --------------------------------------- | -------------------- | +| Number (值) | Number("123")、Number("123abc") | 123、NaN | +| parseInt (字符串,进制) | parseInt("123")、parseInt("123.45") | 123、123(只取整数) | +| parseFloat (字符串) | parseFloat("123.45")、parseFloat("abc") | 123.45、NaN | + +- 关键规则: + + - 字符串纯数字(含正负号、小数点)→ 正常转换(如 `"123.45"` → 123.45)。 + - 字符串含非数字字符 → 转换为 `NaN`(如 `"123abc"` → NaN)。 + - 空字符串 `""`、空格字符串 `" "` → 0(`Number("")` → 0)。 + - `true` → 1,`false` → 0;`undefined` → NaN;`null` → 0。 + +- 示例: + + ```javascript + Number("100"); // 100 + Number("100.5"); // 100.5 + Number("100a"); // NaN + Number(""); // 0 + Number(null); // 0 + Number(undefined); // NaN + + parseInt("123.89"); // 123(忽略小数部分) + parseInt("abc123"); // NaN(非数字开头) + parseFloat("3.1415"); // 3.1415 + ``` + +#### (3)转换为布尔值(Boolean) + +| 转换方法 | 示例 | 结果 | +| ------------ | -------------------------- | ----------- | +| Boolean (值) | Boolean(0)、Boolean("abc") | false、true | + +- 核心规则: + + 只有 6 个值转换为 false( falsy 值),其余全为 true: + + - falsy 值:`0`、`NaN`、`""`(空字符串)、`undefined`、`null`、`false`。 + + - 示例: + + ```javascript + Boolean(0); // false + Boolean(""); // false + Boolean(NaN); // false + Boolean(null); // false + Boolean(undefined); // false + Boolean(" "); // true(空格字符串非空) + Boolean(123); // true + Boolean({}); // true(对象/数组转换为布尔值都是 true) + Boolean([]); // true + ``` + +### 2. 隐式转换(自动触发,需避坑) + +JS 在特定场景下自动转换类型,常见触发场景: + +#### (1)算术运算(`+`、`-`、`*`、`/`、`%`) + +- 规则:除 `+` 外,其他运算符会自动将操作数转为数字。 + +- `+` 运算符:只要有一个操作数是字符串,就会触发**字符串拼接**;否则转为数字相加。 + +- 示例: + + ```javascript + // 非 + 运算符:转为数字运算 + 10 - "5"; // 5("5" → 5) + "12" * 3; // 36("12" → 12) + "10" / "2"; // 5 + "abc" - 2; // NaN("abc" → NaN,NaN 参与运算结果还是 NaN) + + // + 运算符:字符串拼接 vs 数字相加 + "10" + 20; // "1020"(有字符串,拼接) + 10 + true; // 11(true → 1,数字相加) + 10 + null; // 10(null → 0,数字相加) + 10 + undefined; // NaN(undefined → NaN) + ``` + +#### (2)比较运算(`==`、`>`、`<` 等) + +- 规则: + + - `==`(非全等):会先自动转换类型,再比较值(尽量不用,优先用 `===`)。 + - `>`、`<`:会将操作数转为数字再比较。 + +- 示例: + + ```javascript + // == 隐式转换 + 10 == "10"; // true("10" → 10) + 0 == ""; // true("" → 0) + false == 0; // true(false → 0) + null == undefined; // true(特殊规则,无类型转换) + NaN == NaN; // false(NaN 不等于任何值,包括自己) + + // >、< 转换为数字 + "20" > 15; // true("20" → 20) + "abc" > 10; // false("abc" → NaN,NaN 与任何值比较都是 false) + ``` + +#### (3)逻辑运算(`&&`、`||`、`!`) + +- 规则:`!`(非运算)会先将操作数转为布尔值,再取反;`&&`、`||` 会判断操作数的 “真值 / 假值”,返回原始值(而非布尔值)。 + +- 示例: + + ```javascript + !""; // true("" → false,取反为 true) + !0; // true + !"abc"; // false("abc" → true,取反为 false) + + // &&:找第一个假值,无则返回最后一个真值 + "" && "hello"; // ""(第一个假值) + 10 && 20; // 20(无假值,返回最后一个) + + // ||:找第一个真值,无则返回最后一个假值 + "" || "hello"; // "hello"(第一个真值) + 0 || null; // null(无真值,返回最后一个) + ``` + +### 3. 转换总结 + +- 优先使用**显式转换**(`String()`、`Number()`、`Boolean()`),代码更易读。 +- 避免使用 `==`,用 `===`(全等)判断(不转换类型,直接比较值和类型)。 +- 记住 6 个 falsy 值,避免隐式转换踩坑。 + +## 三、表达式(代码执行的基本单元) + +### 1. 定义 + +由**操作数**(变量、字面量、函数调用等)和**运算符**组成的代码片段,最终会计算出一个**结果**(值)。 + +### 2. 表达式分类(按功能) + +#### (1)算术表达式(结果为数字) + +由算术运算符组成,用于计算数值。 + +```javascript +10 + 20 * 3; // 70(先乘后加,遵循运算符优先级) +(10 + 20) * 3; // 90(括号改变优先级) +100 / 25; // 4 +5 % 2; // 1(取余) +``` + +#### (2)字符串表达式(结果为字符串) + +由字符串拼接运算符 `+` 组成。 + +```javascript +"Hello" + " " + "World"; // "Hello World" +let name = "张三"; +"你好," + name; // "你好,张三" +``` + +#### (3)比较表达式(结果为布尔值) + +由比较运算符组成,用于判断条件。 + +```javascript +10 > 5; // true +"123" === 123; // false(类型不同) +age >= 18; // 取决于 age 的值(true/false) +``` + +#### (4)逻辑表达式(结果为真值 / 假值的原始值) + +由逻辑运算符组成,用于组合条件。 + +```javascript +true && false; // false +10 > 5 || 3 > 10; // true +!(age < 18); // 对 age < 18 的结果取反 +``` + +#### (5)赋值表达式(结果为赋值后的值) + +由赋值运算符组成,用于给变量赋值(可链式赋值)。 + +```javascript +let a = 10; // 表达式结果为 10,变量 a 被赋值为 10 +let b = c = 20; // 链式赋值,先给 c 赋 20,再给 b 赋 20,结果为 20 +let x = 5 + 3; // 先计算 5+3=8,再赋值给 x,表达式结果为 8 +``` + +#### (6)函数调用表达式(结果为函数的返回值) + +调用函数时组成的表达式,结果是函数的返回值(无 return 则为 undefined)。 + +```javascript +function add(a, b) { + return a + b; +} +add(10, 20); // 30(表达式结果为 30) +console.log("Hello"); // undefined(console.log 无返回值) +``` + +### 3. 表达式与语句的区别(关键) + +| 特性 | 表达式 | 语句 | +| ------------ | ------------------------- | ------------------------------- | +| 核心功能 | 计算结果 | 执行操作(如声明、循环、判断) | +| 是否有返回值 | 有(必须算出一个值) | 无(或返回 undefined) | +| 示例 | `1+2`、`a=10`、`add(3,4)` | `let a;`、`if(...)`、`for(...)` | + +- 注意:赋值表达式(`a=10`)是表达式(有返回值 10),而变量声明(`let a=10`)是语句(无返回值)。 + +### 4. 运算符优先级(简化版,需牢记) + +表达式中运算符的执行顺序(优先级高的先执行,同优先级从左到右): + +1. 括号 `()` → 最高优先级(优先计算括号内的内容)。 +2. 一元运算符:`!`(非)、`++`(自增)、`--`(自减)、`typeof`。 +3. 算术运算符:`*`(乘)、`/`(除)、`%`(取余) → 高于 `+`(加)、`-`(减)。 +4. 比较运算符:`>`、`<`、`>=`、`<=` → 高于 `==`、`===`、`!=`、`!==`。 +5. 逻辑运算符:`&&`(与) → 高于 `||`(或)。 +6. 赋值运算符:`=`、`+=`、`-=` 等 → 最低优先级。 + + + + +## 四、核心易错点总结 + +1. `typeof null` 返回 `"object"`,需用 `=== null` 单独判断。 +2. `NaN` 不等于任何值(包括自己),判断是否为 NaN 需用 `isNaN(值)` 或 `Number.isNaN(值)`(后者更严格)。 +3. 隐式转换中,`+` 既可能是数字相加,也可能是字符串拼接,需注意操作数类型。 +4. 表达式有返回值,语句无返回值,避免混淆(如 `a=10` 是表达式,`let a=10` 是语句)。 +5. 优先级:括号 > 一元运算符 > 算术 > 比较 > 逻辑 > 赋值。 + + + +## 作业: + +```javascript + +``` + + +```javascript + +``` + + + +```javascript + +``` + + + +例.3.10 + +```javascript + +``` + + + +综合练习1 + +```javascript + +``` + +综合练习2 + +```html + let year; + let month; + document.write('请选择您的出生年月:'); + document.write(''); + document.write(''); +``` + +综合练习3 + +```javascript +let row; + document.write(''); + document.write(''); + for (row = 1; row <= 100; row++) { + if (row % 10 == 0) { + document.write(``); + document.writeln("") + } + else{ + document.write(``); + } + } + document.write(''); + document.write('
${row}
${row}
'); +``` + diff --git "a/\345\206\211\345\275\254\347\222\220/20251114-\347\254\224\350\256\260.md" "b/\345\206\211\345\275\254\347\222\220/20251114-\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..3addee92b5e67c64b63f3994b23453afd1391d65 --- /dev/null +++ "b/\345\206\211\345\275\254\347\222\220/20251114-\347\254\224\350\256\260.md" @@ -0,0 +1,137 @@ + +```javascript + let API = '1000'; + + let numAPI = Number(API); + +switch (true) { + case (numAPI >= 0 && numAPI <= 100): + console.log("空气质量良好"); + break; + + case (numAPI >= 101 && numAPI <= 200): + console.log("空气质量轻度污染"); + break; + + case (numAPI >= 201 && numAPI <= 300): + console.log("空气质量中度污染"); + break; + + case (numAPI >= 301): + console.log("空气质量重度污染"); + break; + + default: + console.log("无效的API值"); +} + + + +```javascript + let month = 5; + + let season; + + switch(month) { + case 12: case 1: case 2: + season = "冬季"; + break; + case 3: case 4: case 5: + season = "春季"; + break; + case 6: case 7: case 8: + season = "夏季"; + break; + case 9: case 10: case 11: + season = "秋季"; + break; + default: + season = "无效月份"; +} + + console.log(`${month}月属于${season}`); +``` + + + +```javascript + + +``` + + + +```javascript + + +``` + + + +```javascript + + + + +```javascript + + +``` + diff --git "a/\345\206\257\345\275\246\346\267\261/20251110-\345\210\235\350\257\206JavaScript.md" "b/\345\206\257\345\275\246\346\267\261/20251110-\345\210\235\350\257\206JavaScript.md" new file mode 100644 index 0000000000000000000000000000000000000000..b9646d91e35036409222d664551844072981446b --- /dev/null +++ "b/\345\206\257\345\275\246\346\267\261/20251110-\345\210\235\350\257\206JavaScript.md" @@ -0,0 +1,166 @@ +# 笔记 + +## JavaScript引入方式 + +- 属性 + - type + - 指定HTML所使用的的脚本语言及其版本 + - ` + ``` + - 特点 + - 无需额外文件,编写直接运行 + - 不利于维护,复用 + - 多个内嵌脚本按编写顺序依次执行 + +- 2.链接外部文件(外链式) + - 创建外部JS文件(script.js) + - 语法 + - ```js + // 外部 JS 文件:script.js + console.log("外部 JS 文件执行"); + // 定义函数 + function showMessage() { + alert("这是外部 JS 中的函数"); + } + // 调用函数 + showMessage(); + ``` + - HTML中引入外部文件 + - 语法 + - ```html + + + + + 外链式 JS + + + +

外链式引入示例

+ + + + + + + ``` + - 特点 + - 便于维护,复用,多人协作 + - 提升加载效率 + - src可指定相对或者绝对路径 + +- 3.作为标签(动态创建 script 标签) + - 语法 + - ```html + + + + + 动态创建 script 标签 + + +

动态标签引入示例

+ + + + ``` + - 动态加载 + - ```js + // 动态加载的 JS 文件 + function dynamicFunction() { + alert("动态标签引入的 JS 执行"); + } + ``` + - 特点 + - 按需加载,节省资源 + - 提升页面加载性能 +- 三种对比总结 + + | 引入方式 | 核心优势 | 适用场景 | + | ------------ | ---------------------- | ------------------------ | + | 页面直接嵌入 | 无需额外文件,快速测试 | 简单页面、临时调试 | + | 链接外部文件 | 分离代码,便于维护复用 | 项目开发、多页面共用代码 | + | 动态创建标签 | 按需加载,不阻塞渲染 | 大型项目、条件性加载代码 | +## Web前端核心技术 +- HTML +- CSS +- JavaScript + +## Web前端框架 +- Vue3 +- react +- jQuery + +## Web后端 +- C# + - asp.net core +- Java + - springboot + - springcloud + - springmvc +- Python +- C/C++ +- node.js +- PHP +- go +- vb +- dephi +- lisp +- rust +- ruby +- lua +- 汇编语言 +- 二进制 +- 易语言 + +## 1.5 实践与练习 + +### 输出老子的名言 +- 代码 + - ```js + + ``` +- 效果图 + - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116171346470.png) + +### 输出明日学院的官网地址 +- 代码 + - ```js + + ``` +- 效果图 + - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116171417221.png) \ No newline at end of file diff --git "a/\345\206\257\345\275\246\346\267\261/20251112-Javascript\345\237\272\347\241\200.md" "b/\345\206\257\345\275\246\346\267\261/20251112-Javascript\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..901500466fe04b1f1837a9562c15dcfd2fd23766 --- /dev/null +++ "b/\345\206\257\345\275\246\346\267\261/20251112-Javascript\345\237\272\347\241\200.md" @@ -0,0 +1,170 @@ +# 笔记 + +## 数据类型 + +### 基本数据类型 + - 数值型 number + - 十进制 + - 十六进制 + - 八进制 + - 浮点型数据 + - 传统记数法 + - 1.23 + - 科学计数法 + - 123e-3 + - infinity 无穷 + - NaN 非数值 + - 字符串型 string + - 单引号 + - 双引号 + - 反引号 + - 转义字符 + | 转义字符 | 描述 | 转义字符 | 描述 | + | -------- | ------------------ | -------- | ------------------------- | + | \b | 退格 | \v | 垂直制表符 | + | \n | 换行符 | \r | Enter符 | + | \t | 水平制表符,Tab空格 | `\\` | 反斜杠 | + | \f | 换页 | \OOO | 八进制整数,范围为000~777 | + | \' | 单引号 | \xHH | 十六进制整数,范围为00~FF | + | \" | 双引号 | \uhhhh | 十六进制编码的Unicode字符 | + - 要将其放在`
`格式化文本中才会起作用
+      - 字符串拼接 
+  - 布尔值 boolean
+    - true 
+    - false
+  - 空值 null
+    - 空的或者不存在的值
+  - 未定义值 undefined
+    - 变量还没有赋值
+
+## 常量和变量
+  -  常量
+    - const
+  - 变量
+    - var
+    - let
+  - 变量命名规则
+    - 以字母、下划线、$开头
+    - 不能使用关键字
+    - 区分大小写
+    - 不能使用中文
+    - 不能使用特殊字符
+    - 不能使用数字开头
+
+## 运算符
+
+- 算术运算符
+  - `+ - * / % ++ --`
+  - 优先级
+    - `() -> ** -> * / % -> + - -> ++ --`
+    - 从左到右
+    - 优先级相同,从左到右
+    - () 优先级最高
+- 字符串运算符 
+  -  `+` 连接两个字符
+  -  `+=` 连接两个字符并赋值
+- 比较运算符
+  - `== != > < >= <=`
+  - `==` 比较值是否相等
+  - `===` 比较值和类型是否相等
+  - `!=` 比较值是否不相等
+  - `!==` 比较值和类型是否不相等
+  - `> < >= <=` 比较大小
+- 赋值运算符
+  - `=` 
+  - `+=`
+  - `-=`
+  - `*=`
+  - `/=`
+  - `%=`
+
+## 第二章 编程练习
+
+### 输出珠穆朗玛峰的高度
+- 代码
+    - ```js
+        
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116172655273.png)
+
+### 输出文件夹路径
+- 代码
+    - ```js
+        
+      ```
+- 效果图
+  - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116172636111.png)
+
+### 输出俄罗斯的国土面积
+- 代码
+    - ```js
+       
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116172614199.png)
+
+### 输出人物的个人信息
+- 代码
+    - ```js
+        
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116172555477.png)
+
+### 计算本息合计
+- 代码
+    - ```js
+        
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116172536038.png)
+
+### 判断考试成绩合格
+- 代码
+    - ```js
+        
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116172513714.png)
+
+### 计算梯形稻田的面积
+- 代码
+    - ```js
+        
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116172420804.png)
diff --git "a/\345\206\257\345\275\246\346\267\261/20251113-\350\277\220\347\256\227\350\241\250\350\276\276.md" "b/\345\206\257\345\275\246\346\267\261/20251113-\350\277\220\347\256\227\350\241\250\350\276\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..05fd42e07ff8ec4ab106ee83f5b5c48afd44b457
--- /dev/null
+++ "b/\345\206\257\345\275\246\346\267\261/20251113-\350\277\220\347\256\227\350\241\250\350\276\276.md"
@@ -0,0 +1,82 @@
+# 笔记
+
+## 逻辑运算符
+ - 逻辑与 &&
+   - 两个都为真则为真
+ - 逻辑或 ||
+   - 其中有一个为真则为真
+ - 逻辑非 !
+   - !true
+
+## 条件运算符
+ - 语法
+   - `条件 ? 表达式1 : 表达式2`
+   - 如果条件为真,则执行表达式1,否则执行表达式2
+
+## 其他运算符
+- 逗号运算符
+  - `a = 1, b = 2`
+  - 则结果为最后一个
+- typeof 运算符
+  - 判断数据类型
+    | 数据类型  | 返回值    | 数据类型 | 返回值   |
+    | --------- | --------- | -------- | -------- |
+    | 数值      | number    | null     | objec    |
+    | 字符串    | string    | 对象     | object   |
+    | 布尔值    | object    | 函数     | function |
+    | undefined | undefined | -----    | ----     |
+- new运算符
+  - 对象实例名称=new 对象类型(参数)
+  - 对象实例名称=new 对象类型
+  
+## 表达式
+- 算术表达式
+- 逻辑表达式
+- 字符串表达式
+
+
+## 第二章 实践练习
+
+### 输出《九阳神功》
+- 代码
+    - ```js
+        
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116173835415.png)
+
+### 计算员工实际收入
+- 代码
+    - ```js
+        
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116173324379.png)
+
+### 判断2024年2月的天数
+- 代码
+    - ```js
+        
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116173817255.png)
\ No newline at end of file
diff --git "a/\345\206\257\345\275\246\346\267\261/20251114-\345\256\236\350\267\265\347\273\203\344\271\240.md" "b/\345\206\257\345\275\246\346\267\261/20251114-\345\256\236\350\267\265\347\273\203\344\271\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..98f19a298714d1149fdddff1a99b3a01bb055f26
--- /dev/null
+++ "b/\345\206\257\345\275\246\346\267\261/20251114-\345\256\236\350\267\265\347\273\203\344\271\240.md"
@@ -0,0 +1,707 @@
+# 作业
+
+## 编程练习
+
+### 获取数字中最小的值
+- 代码
+    - ```js
+         
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116174355796.png)
+
+### 判断空气的污染程度
+- 代码
+    - ```js
+         
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116174421143.png)
+
+### 判断当前季节
+- 代码
+    - ```js
+         
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116174437899.png)
+
+### 输出员工的每一年工资
+- 代码
+    - ```js
+         
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116174526154.png)
+
+### 鸡兔同笼
+- 代码
+    - ```js
+         
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116174557271.png)
+
+### 计算1~1000所有65倍数数字之和
+- 代码
+    - ```js
+         
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116174705759.png)
+
+### 输出尚未使用的办公卡位
+- 代码
+    - ```js
+         
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116174749916.png)
+
+
+## 实践练习
+
+### 判断身体质量指数
+- 代码
+    - ```js
+         
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116174831455.png)
+
+### 循环输出年份和月份
+- 代码
+    - ```js
+         
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116174900344.png)
+
+### 输出10行10列的表格
+- 代码
+    - ```html
+         
+        
+        
+            
+        
+      ```
+- 效果图
+    - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116175032821.png)
+  
+### 万达影城7号厅
+
+- 代码
+  - ```html
+        
+        
+    
+    
+    Document
+    
+        
+        
+        
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
万达影城7号厅
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + ``` + +- 效果图 + - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116175930310.png) \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251110\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251110\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..36a4c0322b1225a40b97b4c2be52bed515fa2125 --- /dev/null +++ "b/\345\210\230\346\224\277/20251110\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,42 @@ +### 笔记 +``` +JavaScript 用法 +HTML 中的 Javascript 脚本代码必须位于 标签之间。 +Javascript 脚本代码可被放置在 HTML 页面的 和 部分中。 + + 会告诉 JavaScript 在何处开始和结束。 + 之间的代码行包含了 JavaScript: + + + +您无需理解上面的代码。只需明白,浏览器会解释并执行位于 之间的 JavaScript 代码 + + +外部的 JavaScript +也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。 + +外部 JavaScript 文件的文件扩展名是 .js。 + +如需使用外部文件,请在 + +``` +```html + + + +alert("http://www.mingrisoft.com"); +``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251112\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251112\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..bdf6fa0996023367090bf2b78b376e9989225505 --- /dev/null +++ "b/\345\210\230\346\224\277/20251112\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,76 @@ +### 练习 + ```html + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git "a/\345\210\230\346\224\277/20251113-\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251113-\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..43794ac82c0cdd98b386f0948c97d022df4d6539 --- /dev/null +++ "b/\345\210\230\346\224\277/20251113-\347\273\203\344\271\240.md" @@ -0,0 +1,108 @@ +### 练习 +```html + + + + + Document + + + + + + + +
+ + + + +``` +```js + document.write(""); + for (let c = 1; c < 5; c++) { + document.write(""); + + for (let f = 1; f < 11; f++) { + if (c == 3 && f == 5) { + document.write(""); + continue; + } + if (c == 3 && f == 6) { + document.write(""); + continue; + } + document.write(""); + } + document.write(""); + } + document.write("
已售已售" + c + "排" + f + "座
"); +for (let b = 0; b < 10; b++) { + document.write(""); + for (let c = 1; c < 11; c++) { + let mub = b * 10 + c + document.write(""); + + } + document.write(""); + } + document.write("
" + mub + "
"); +``` diff --git "a/\345\210\230\346\224\277/20251114-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\345\210\230\346\224\277/20251114-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..e42f2fce6a4625b2668f439c3bea940ef7741fcb --- /dev/null +++ "b/\345\210\230\346\224\277/20251114-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,161 @@ +### 笔记 +``` +if/else 语句在指定的条件为 true 时,执行代码块。如果条件为 false,会执行另外一个代码块。 + +if/else 语句是 JavaScript 条件语句的一部分, 条件语句用于基于不同的条件来执行不同的动作。 + +在 JavaScript 中,我们可使用以下条件语句: + +if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码。 +else 语句 如果 if 语句的条件为false,则执行该代码块 +else if 语句 - 检测一个新的条件,如果第一个条件为false +switch 语句 - 选择多个代码块中其中一个执行 + + + +for/in 语句用于循环对象属性。 + +循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。 + +JavaScript 支持不同类型的循环: + +for - 循环代码块一定的次数 +for/in - 循环遍历对象的属性 +while - 当指定的条件为 true 时循环指定的代码块 +do/while - 同样当指定的条件为 true 时循环指定的代码块 +注意: 不要使用 for/in 语句来循环数组的索引,你可以使用 for 语句替代。 +``` +### 练习 +```html + + + + + + + + + + + + + + + + + + + + + +``` \ No newline at end of file diff --git "a/\345\210\230\346\224\277/\345\233\276\347\211\207/screenshots.gif" "b/\345\210\230\346\224\277/\345\233\276\347\211\207/screenshots.gif" new file mode 100644 index 0000000000000000000000000000000000000000..afb2dbd03afb839be987b4d2236c2650d6088a0b Binary files /dev/null and "b/\345\210\230\346\224\277/\345\233\276\347\211\207/screenshots.gif" differ diff --git "a/\345\210\230\346\224\277/\345\233\276\347\211\207/\350\200\201\345\255\220.gif" "b/\345\210\230\346\224\277/\345\233\276\347\211\207/\350\200\201\345\255\220.gif" new file mode 100644 index 0000000000000000000000000000000000000000..afb2dbd03afb839be987b4d2236c2650d6088a0b Binary files /dev/null and "b/\345\210\230\346\224\277/\345\233\276\347\211\207/\350\200\201\345\255\220.gif" differ diff --git "a/\345\210\230\350\231\271\347\206\240/20251110-js\345\205\245\351\227\250.md" "b/\345\210\230\350\231\271\347\206\240/20251110-js\345\205\245\351\227\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..603e5823c3c08a25ee89e28a73b83f2b7b41cfd6 --- /dev/null +++ "b/\345\210\230\350\231\271\347\206\240/20251110-js\345\205\245\351\227\250.md" @@ -0,0 +1,70 @@ +## 笔记 + +### web前端核心技术 + +1. HTML + +2. css + +3. JavaScript + + +### web前端框架 + +1. react facebook + +2. vue 尤雨溪 vue3 + +3. angluar2 谷歌 + +### 全栈 + +1. 前端 + +- vue3 +- react + +2. 后端 + +- c# +- java +- python +- c/c++ +- 汇编语言 +- 二进制 +- nodejs +- go +- php + +### 三种嵌入方法 + +- 在页面中直接嵌入 + +- 外部链接 + +- 作为标签属性值使用 + +## 作业 + +- 综合练习1 +``` + + + +``` +- 效果图 + + +- 综合练习2 + +``` + + + +``` +- 效果图 + diff --git "a/\345\210\230\350\231\271\347\206\240/20251112-\345\237\272\346\234\254\350\257\255\346\263\225\345\222\214js\345\237\272\347\241\200.md" "b/\345\210\230\350\231\271\347\206\240/20251112-\345\237\272\346\234\254\350\257\255\346\263\225\345\222\214js\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..9ae087fc3b3b171d42fe27409de3fa1d2ab24c11 --- /dev/null +++ "b/\345\210\230\350\231\271\347\206\240/20251112-\345\237\272\346\234\254\350\257\255\346\263\225\345\222\214js\345\237\272\347\241\200.md" @@ -0,0 +1,140 @@ +## 笔记 + +### js基本语法 + +1. 执行顺序 + +- 按照出现顺序执行 + +- 函数体内代码不会被立即执行,调用时执行 + +2.字母大小写 + +- 采用正确大小写形式 + +3.空格与换行 + +- 换行代表断句,语句结束 + +4.结尾分号 + +- 每行代码结尾加上分号,保证代码准确性 + +5.注释 + +- “//”和“/*…*/” + +### js基础 + +1.数据类型 + +- 数值型(Number):整数、浮点数、NaN(非数字)、Infinity(无穷大) +- 字符串型(String):单 / 双引号包裹,可通过索引访问字符 +- 布尔类型(Boolean):仅 true/false,用于条件判断 +- 特殊数据类型:undefined(未定义)、null(空值)、Symbol(唯一标识)、BigInt(大整数) + +2.常量和变量 + +- 常量:用 const 声明,必须初始化,不可修改 +- 变量:let(块级作用域,推荐)/var(函数级作用域,避免)声明,可修改 + +3.运算符 + +- 算术:+(含字符串拼接)、-、*、/、%(取余)、++(自增)、--(自减) +- 赋值:=、+=、-=、*=、/= +- 比较:==(值相等)、===(值 + 类型全等,推荐)、!=、!==、>、<、>=、<= +- 逻辑:&&(与,短路)、||(或,短路)、!(非) +- 其他:typeof(检测数据类型)、三元运算符(条件?值 1: 值 2) +## 作业 +- 训练1,2 +``` + + + +``` +- 效果图 + + +- 训练3,4 +``` + + + +``` +- 效果图 + + +- 综合练习1 +``` + + + +``` +- 效果图 + + +- 综合练习2 +``` + + + +``` +- 效果图 + + +- 综合练习3 +``` + + + +``` +- 效果图 + + diff --git "a/\345\210\230\350\231\271\347\206\240/20251113-\350\277\220\347\256\227\347\254\246+\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\345\210\230\350\231\271\347\206\240/20251113-\350\277\220\347\256\227\347\254\246+\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..35378f3de041ce6394e95c0d582529e90f7a04f3 --- /dev/null +++ "b/\345\210\230\350\231\271\347\206\240/20251113-\350\277\220\347\256\227\347\254\246+\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" @@ -0,0 +1,267 @@ +## 笔记 + +### 运算符 + +运算符优先级与结合性表 + +| 优先级(从高到低) | 运算符 | 结合性 | +|--------------------|---------------------------------|--------------| +| 1 | () | 左结合 | +| 2 | . 、[] 、new(带参数) | 左结合 | +| 3 | ++ 、--(后置) | 左结合 | +| 4 | ++ 、--(前置) | 右结合 | +| 5 | ! 、typeof | 右结合 | +| 6 | * 、/ 、% | 左结合 | +| 7 | + 、- | 左结合 | +| 8 | > 、< 、>= 、<= | 左结合 | +| 9 | == 、!= 、=== 、!== | 左结合 | +| 10 | && | 左结合 | +| 11 | || | 左结合 | +| 12 | 条件 ? 值1 : 值2 | 右结合 | +| 13 | = 、+= 、-= 、*= 、/= | 右结合 | + +### 流程控制语句 + +一、核心作用 + +改变代码默认“从上到下”的执行顺序,实现分支、循环等逻辑,是编程逻辑的核心。 + +二、分支结构(选执行) + +根据条件判断,执行不同代码块,核心是“满足条件才执行”。 + +1. if 单分支 + +- 语法:if (条件表达式) { 满足条件执行的代码 } + +- 要点:条件为true时执行;大括号可省略(仅单条语句时),但推荐写 + +- 示例:if (age > 18) { console.log("成年"); } + +2. if-else 双分支 + +- 语法:if (条件) { 成立执行 } else { 不成立执行 } + +- 要点:二选一,必有一个代码块执行 + +- 示例:age > 18 ? console.log("成年") : console.log("未成年");(三元简化) + +3. if-elif-else 多分支 + +- 语法:if (条件1) { ... } else if (条件2) { ... } else { ... } + +- 要点:依次判断,满足首个条件后后续不执行;else可选(无匹配时不执行) + +4. switch 多值匹配 + +- 语法:switch (变量) { case 值1: 执行; break; default: 默认执行; } + +- 核心:case匹配全等(===);必须加break,否则“穿透”执行下一个case;default处理无匹配情况 + +三、循环结构(重复执行) + +重复执行代码块,直到满足退出条件,核心是“控制循环次数/退出时机”。 + +1. for 循环(已知次数) + +- 语法:for (初始化; 条件; 更新) { 循环体 } + +- 要点:初始化(定义循环变量)→ 判断条件 → 执行循环体 → 更新变量,依次循环 + +- 示例:for (let i=0; i<5; i++) { console.log(i); } // 输出0-4 + +2. while 循环(条件控制) + +- 语法:while (条件表达式) { 循环体; 更新条件 } + +- 要点:先判断条件,true则执行;必须在循环体更新条件,避免死循环 + +- 示例:let i=0; while (i<5) { console.log(i); i++; } + +3. do-while 循环(先执行后判断) + +- 语法:do { 循环体; 更新条件 } while (条件); + +- 要点:无论条件是否成立,循环体至少执行一次 + +四、循环控制关键字 + +- break:立即终止当前循环,跳出循环体执行后续代码 + +- continue:跳过当前循环剩余代码,直接进入下一次循环判断 + +- 注意:仅作用于当前所在循环,嵌套循环中不影响外层 + +五、复习重点 + +1. 分支:if-else处理条件,switch适合固定值匹配;三元运算符简化简单双分支 + +2. 循环:for用在已知次数,while用在条件控制;循环体必须有“退出出口” + +3. 避坑:switch加break;while循环更新条件;不确定作用域用let声明变量 + +## 作业 + +- 综合练习1 + +``` + + + +``` +- 效果图 + + +- 综合练习2 + +``` + +

请选择你的出生年月

+ + + +``` +- 效果图 + + +- 综合练习3 + +``` +style> + table { + border-collapse: collapse; + + } + + td { + border: 1px solid black; + text-align: center; + padding: 10px; + } + + + + + +
+ +``` +- 效果图 + + +- 万达7号影厅 + +``` + + + + + +
+ + +``` +- 效果图 + + +- 训练5 + +``` + + + +``` +- 效果图 + + +- 训练6 + +``` + + + +``` +- 效果图 + + +- 训练7 + +``` + + + +``` +- 效果图 + diff --git "a/\345\210\230\350\231\271\347\206\240/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\345\210\230\350\231\271\347\206\240/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..6dc8d6dce9bc4721f9111f8c67301ce66f6d810a --- /dev/null +++ "b/\345\210\230\350\231\271\347\206\240/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" @@ -0,0 +1,161 @@ +## 笔记 + +见1113笔记 + +## 作业 + +- 训练1~3 + +``` + + + +``` +- 效果图 + + +- 训练4~5 + +``` + + + +``` +- 效果图 + + +- 练习6 + +``` + + + +``` +- 效果图 + + +- 练习7 + +``` + + + +
+ +``` +- 效果图 + \ No newline at end of file diff --git "a/\345\210\230\350\231\271\347\206\240/images/1110(1).png" "b/\345\210\230\350\231\271\347\206\240/images/1110(1).png" new file mode 100644 index 0000000000000000000000000000000000000000..964869e9a8493c4ca0907fb44cc4c0c600e86643 Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1110(1).png" differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1110(2).png" "b/\345\210\230\350\231\271\347\206\240/images/1110(2).png" new file mode 100644 index 0000000000000000000000000000000000000000..1d46e661625a390776d0dbda6e3fc7300cd3b942 Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1110(2).png" differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1112(1).png" "b/\345\210\230\350\231\271\347\206\240/images/1112(1).png" new file mode 100644 index 0000000000000000000000000000000000000000..0f3697a11326677ddecd17d9baed53695edf633b Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1112(1).png" differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1112(2).png" "b/\345\210\230\350\231\271\347\206\240/images/1112(2).png" new file mode 100644 index 0000000000000000000000000000000000000000..e660fecb971f21f10221017ca18e909d910642ef Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1112(2).png" differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1112(3).png" "b/\345\210\230\350\231\271\347\206\240/images/1112(3).png" new file mode 100644 index 0000000000000000000000000000000000000000..8dcefdb01431d59dc2af6d9b8ccd2de0dc8551e5 Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1112(3).png" differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1112(4).png" "b/\345\210\230\350\231\271\347\206\240/images/1112(4).png" new file mode 100644 index 0000000000000000000000000000000000000000..9d1e0effc6f006516c7b4d8a414c23676c48a2ce Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1112(4).png" differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1112(5).png" "b/\345\210\230\350\231\271\347\206\240/images/1112(5).png" new file mode 100644 index 0000000000000000000000000000000000000000..ddbf59bba8dd24d2cd809d8b7319ca215485dd6b Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1112(5).png" differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1113(1).png" "b/\345\210\230\350\231\271\347\206\240/images/1113(1).png" new file mode 100644 index 0000000000000000000000000000000000000000..991a854a96676263a6f587fd9899cae10cf7aaae Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1113(1).png" differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1113(2).png" "b/\345\210\230\350\231\271\347\206\240/images/1113(2).png" new file mode 100644 index 0000000000000000000000000000000000000000..55d168c312ca904236427c60377315ffb24e0494 Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1113(2).png" differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1113(3).png" "b/\345\210\230\350\231\271\347\206\240/images/1113(3).png" new file mode 100644 index 0000000000000000000000000000000000000000..1c05344f9cf033d8e3057a19cef2cb1ef09f80db Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1113(3).png" differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1113(4).png" "b/\345\210\230\350\231\271\347\206\240/images/1113(4).png" new file mode 100644 index 0000000000000000000000000000000000000000..4ca2b209d9b2810a1890746cf91c77e3e2ba0317 Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1113(4).png" differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1113(5).png" "b/\345\210\230\350\231\271\347\206\240/images/1113(5).png" new file mode 100644 index 0000000000000000000000000000000000000000..9c17ddc6517f7a3cb8135b172bdcd80acea00c7f Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1113(5).png" differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1113(6).png" "b/\345\210\230\350\231\271\347\206\240/images/1113(6).png" new file mode 100644 index 0000000000000000000000000000000000000000..6caac40e66c5fecfd26163a27fe27cdbbc5fc237 Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1113(6).png" differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1113(7).png" "b/\345\210\230\350\231\271\347\206\240/images/1113(7).png" new file mode 100644 index 0000000000000000000000000000000000000000..118b15678c2622fbe5eeb31cc70c52125604673d Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1113(7).png" differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1114(1).png" "b/\345\210\230\350\231\271\347\206\240/images/1114(1).png" new file mode 100644 index 0000000000000000000000000000000000000000..19632be0fe5c9b9eb3e314a77b849686d2a50af2 Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1114(1).png" differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1114(2).png" "b/\345\210\230\350\231\271\347\206\240/images/1114(2).png" new file mode 100644 index 0000000000000000000000000000000000000000..c61211c241c2a4b6582e57c7aea8eec0e55119f5 Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1114(2).png" differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1114(3).png" "b/\345\210\230\350\231\271\347\206\240/images/1114(3).png" new file mode 100644 index 0000000000000000000000000000000000000000..fd7c6dc949196f3a100c6450fe8fee3eb0df6503 Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1114(3).png" differ diff --git "a/\345\210\230\350\231\271\347\206\240/images/1114(4).png" "b/\345\210\230\350\231\271\347\206\240/images/1114(4).png" new file mode 100644 index 0000000000000000000000000000000000000000..1f0e2e533026c729b0011a1a8aea67b94e4bdb0f Binary files /dev/null and "b/\345\210\230\350\231\271\347\206\240/images/1114(4).png" differ diff --git "a/\345\215\242\351\233\205\350\214\271/20251110-js.md" "b/\345\215\242\351\233\205\350\214\271/20251110-js.md" new file mode 100644 index 0000000000000000000000000000000000000000..6423650dcc67351cfe3a645a06cfc604fca166e1 --- /dev/null +++ "b/\345\215\242\351\233\205\350\214\271/20251110-js.md" @@ -0,0 +1,32 @@ +# 笔记 + +### 认识script +1. script(三种排列方式) +- 放在body里最下面(原因:网页先构建后渲染) +- 放在标签内(相当于行内样式) +- 放在外部js文件内(需要引用) +2. 代码 +- script(js祖师爷) +- alert(弹窗) +- function(可重复使用的代码块) +- onclick(事件处理方法) + +# 练习 + +```html + + + + + + Document + + + + + + + +``` \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251112-js\346\225\260\346\215\256\347\261\273\345\236\213.md" "b/\345\215\242\351\233\205\350\214\271/20251112-js\346\225\260\346\215\256\347\261\273\345\236\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..33c6be74a00c64af108c2907e184df913d735244 --- /dev/null +++ "b/\345\215\242\351\233\205\350\214\271/20251112-js\346\225\260\346\215\256\347\261\273\345\236\213.md" @@ -0,0 +1,69 @@ +# 笔记 + +1. js区分大小写 +2. 小驼峰 userName Age 第一个单词第一个字母小写 后面的单词首字母大写 +3. i++ 使用i之后 加1。++i 使用i之前 加1。4==与===的区别。“==”只判断值是否相等。“===”先判断类型 在判断值是否相等 + +# 练习 + +```html + + + + + + + Document + + + + + +

个人信息

+ + + \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251113-js.md" "b/\345\215\242\351\233\205\350\214\271/20251113-js.md" new file mode 100644 index 0000000000000000000000000000000000000000..4a3fbafdf1e9d02eca53f7420044c5a580524754 --- /dev/null +++ "b/\345\215\242\351\233\205\350\214\271/20251113-js.md" @@ -0,0 +1,39 @@ +# 练习 + +```html + + + + + + + Document + + + + + + + +``` \ No newline at end of file diff --git "a/\345\215\242\351\233\205\350\214\271/20251114-js.md" "b/\345\215\242\351\233\205\350\214\271/20251114-js.md" new file mode 100644 index 0000000000000000000000000000000000000000..3a873e6df3286606e3221d1c5d87df323f4a5948 --- /dev/null +++ "b/\345\215\242\351\233\205\350\214\271/20251114-js.md" @@ -0,0 +1,133 @@ +# 练习 + +```html + + + + + + + Document + + + + + + + +``` \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251110.md" "b/\345\220\225\347\245\245\345\213\207/20251110.md" new file mode 100644 index 0000000000000000000000000000000000000000..b518f955ccd47ac53143bc2273213aada935a093 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251110.md" @@ -0,0 +1,32 @@ +一.JavaScript在HTML中的应用 +```html + 1.直接嵌入标签元素中使用 + + 2.内部引用式(嵌入式) + + 3.外部引用式 + +``` + + +练习一 +```html + +``` +![alt text](Snipaste_2025-11-10_17-05-27.png) + +练习二 +```html +
+ +
+ +``` +![alt text](Snipaste_2025-11-10_17-02-03.png) \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251112.md" "b/\345\220\225\347\245\245\345\213\207/20251112.md" new file mode 100644 index 0000000000000000000000000000000000000000..a5983b522f810334b1eb85cf4d9885f869ac7c78 --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251112.md" @@ -0,0 +1,72 @@ +训练一 +```html + +``` + +训练二 +```html + +``` + +训练三 +```html + +``` + +训练四 +```html + +``` +![alt text](Snipaste_2025-11-12_16-47-49.png) + + + +综合训练一 +```html + +``` +![alt text](Snipaste_2025-11-12_11-02-28.png) +综合训练二 +```html + +``` +![alt text](Snipaste_2025-11-12_11-16-31.png) + +综合训练三 +```html + + +``` +![alt text](Snipaste_2025-11-12_16-19-46.png) +\ No newline at end of file \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251113.md" "b/\345\220\225\347\245\245\345\213\207/20251113.md" new file mode 100644 index 0000000000000000000000000000000000000000..8dc9c09668fa9c8b74ed40739f291d946f03e9fe --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251113.md" @@ -0,0 +1,54 @@ +一.逻辑运算符 +```bash + 运算符 描 述 示 例 + && 逻辑与 a&&b 当a和b都为真时,结果为真,否则为假 + || 逻辑或 a||b 当a为真或者b为真时,结果为真,否则为假 + ! 逻辑非 !a 当a为假时,结果为真,否则为假 +``` + +二.typeof运算符 +```bash + 数据类型 返回值 + 数值 number + 字符串 string + 布尔值 bollean + undefined undefined + null object + 对象 object + 函数 function +``` + +训练五 +```html + +``` + +训练六 +```html + +``` + +训练七 +```html + +``` +\ No newline at end of file \ No newline at end of file diff --git "a/\345\220\225\347\245\245\345\213\207/20251114.md" "b/\345\220\225\347\245\245\345\213\207/20251114.md" new file mode 100644 index 0000000000000000000000000000000000000000..eb89c39ba5f60c1cdda1e0e7151546d3500a1e9d --- /dev/null +++ "b/\345\220\225\347\245\245\345\213\207/20251114.md" @@ -0,0 +1,210 @@ +训练1 +```html + +``` + +训练2 +```html + +``` + +训练3 +```html + +``` + +训练4 +```html + +``` + +训练5 +```html + +``` + +训练6 +```html + +``` + +训练7 +```html + +``` + +综合练习1 +```html + +``` + +综合练习2 +```html + + 请选择您的出生年月: + + + + +``` + +综合练习3 +```html + + + +``` \ No newline at end of file diff --git "a/\345\220\264\345\256\232\346\263\242/20251110-\345\210\235\350\257\206js.md" "b/\345\220\264\345\256\232\346\263\242/20251110-\345\210\235\350\257\206js.md" new file mode 100644 index 0000000000000000000000000000000000000000..b99ae332d41244c13c334a095ad103872d78c81d --- /dev/null +++ "b/\345\220\264\345\256\232\346\263\242/20251110-\345\210\235\350\257\206js.md" @@ -0,0 +1,17 @@ +## 初识JS + +- 实现页面交互:比如按钮点击、表单验证、轮播图切换。 +- 操作页面元素:修改文字、图片、样式,动态添加 / 删除内容。 +- 处理数据:解析接口数据、本地存储(如记住用户偏好)。 +- 控制行为:定时器、动画效果、页面跳转等。 + + +## 作业 + +```html + +``` \ No newline at end of file diff --git "a/\345\220\264\345\256\232\346\263\242/20251112-js\345\237\272\347\241\200.md" "b/\345\220\264\345\256\232\346\263\242/20251112-js\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..2f60386a460b17bbe3e0fc9e167ab96ec148b0d0 --- /dev/null +++ "b/\345\220\264\345\256\232\346\263\242/20251112-js\345\237\272\347\241\200.md" @@ -0,0 +1,41 @@ +## 练习作业 + +```html + +``` \ No newline at end of file diff --git "a/\345\220\264\345\256\232\346\263\242/20251113-\345\276\252\347\216\257\347\273\203\344\271\240.md" "b/\345\220\264\345\256\232\346\263\242/20251113-\345\276\252\347\216\257\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..c9723140d44e18e7ac224d9615401f1be21bf4d4 --- /dev/null +++ "b/\345\220\264\345\256\232\346\263\242/20251113-\345\276\252\347\216\257\347\273\203\344\271\240.md" @@ -0,0 +1,68 @@ +## 作业练习 + +```html + +``` \ No newline at end of file diff --git "a/\345\220\264\345\256\232\346\263\242/20251114-\344\275\234\344\270\232.md" "b/\345\220\264\345\256\232\346\263\242/20251114-\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..4ca4d6e3d46c68453ba518a54853b66e6fbb3f36 --- /dev/null +++ "b/\345\220\264\345\256\232\346\263\242/20251114-\344\275\234\344\270\232.md" @@ -0,0 +1,113 @@ +## 作业 + +```html + +``` \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251110-JS\345\237\272\347\241\200\350\257\255\346\263\225\344\270\216\347\254\254\344\272\214\347\253\240\344\275\234\344\270\232..md" "b/\345\220\264\346\270\212\345\215\232/20251110-JS\345\237\272\347\241\200\350\257\255\346\263\225\344\270\216\347\254\254\344\272\214\347\253\240\344\275\234\344\270\232..md" new file mode 100644 index 0000000000000000000000000000000000000000..ec19ac74d2d9302ae3af6ae6a59608aad2aa1b74 --- /dev/null +++ "b/\345\220\264\346\270\212\345\215\232/20251110-JS\345\237\272\347\241\200\350\257\255\346\263\225\344\270\216\347\254\254\344\272\214\347\253\240\344\275\234\344\270\232..md" @@ -0,0 +1,41 @@ +## JS基础语法 + +1. 变量声明(ES5 vs ES6) +变量是存储数据的容器,JS 有三种声明方式,推荐优先使用 let 和 const(ES6+),避免 var 的缺陷。 + +- 声明方式 | 作用域 | 重复声明 | 变量提升 | 初始值要求 +- var | 函数 / 全局作用域 | 允许 | 有(值为 undefined) | 可选 +- let | 块级作用域({} 内) | 不允许 | 无(暂时性死区) | 可选 +- const | 块级作用域 | 不允许 | 无(暂时性死区) | 必须赋值 + +2. 数据类型 + - JS 是弱类型语言(变量类型可动态变化),分为两大类: +- (1) 基本数据类型(7 种,值存储在栈中) + - string:字符串(如 'abc'、"123") + - number:数字(整数 / 浮点数,如 10、3.14,特殊值 NaN、Infinity) + - boolean:布尔值(true/false) + - null:空值(表示 “无”,主动赋值) + - undefined:未定义(变量声明未赋值时的默认值) + - symbol:唯一标识(ES6+,如 Symbol('key')) + - bigint:大整数(ES10+,处理超大数据,如 10n) +- (2)引用数据类型(值存储在堆中,变量存地址) + - object:对象(如 {name: '张三'}) + - array:数组(如 [1,2,3]) + - function:函数(如 function() {}) + - 其他内置对象(Date、RegExp 等) + +3. 注释(代码说明,不执行) + - 单行注释:// 注释内容(常用) + - 多行注释:/* 注释内容 */(块级注释) + +4. 语句结构(控制代码流程) +- (1)条件语句 + - if-else:适合 2-3 个分支 + - switch:适合多分支(匹配全等 ===) +- (2)循环语句 + - for:适合已知循环次数 + - while:适合未知循环次数(先判断后执行) + - do-while:先执行后判断(至少执行 1 次) +- (3)循环控制 + - break:跳出当前循环 /switch + - continue:跳过当前循环的剩余部分,进入下一次循环 \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251112-\350\277\220\347\256\227\347\254\246.md" "b/\345\220\264\346\270\212\345\215\232/20251112-\350\277\220\347\256\227\347\254\246.md" new file mode 100644 index 0000000000000000000000000000000000000000..32cce678fbae74f283ac7a981cd7e71d20164e7b --- /dev/null +++ "b/\345\220\264\346\270\212\345\215\232/20251112-\350\277\220\347\256\227\347\254\246.md" @@ -0,0 +1,47 @@ +## 运算符 + +1. 算术运算符(处理数字运算) +运算符 功能 示例 结果 ++ 加法 / 字符串拼接 10 + 20 / 'a' + 'b' 30 / "ab" +- 减法 20 - 5 15 +* 乘法 3 * 4 12 +/ 除法(浮点数) 10 / 3 3.333... +% 取模(余数) 10 % 3 1 +++ 自增(前置 / 后置) let a=1; ++a / let b=1; b++ 2 / 1(后置先使用后自增) +-- 自减(前置 / 后置) let c=3; --c / let d=3; d-- 2 / 3(后置先使用后自减) + +重点注意: ++ 运算符:只要有一个操作数是字符串,就会触发字符串拼接(隐式类型转换) +NaN:非数字(Not a Number),与任何值运算结果都是 NaN,且 NaN !== NaN + +2. 赋值运算符(给变量赋值) +运算符 等价写法 示例 结果 += - let a = 5 a=5 ++= a = a + b a += 3(a=5) a=8 +-= a = a - b a -= 2(a=8) a=6 +*= a = a * b a *= 4(a=6) a=24 +/= a = a / b a /= 3(a=24) a=8 +%= a = a % b a %= 5(a=8) a=3 + +3. 比较运算符(返回布尔值 true/false) +运算符 功能 示例 结果 +== 相等(隐式类型转换) 10 == '10' / 0 == '' true / true +=== 严格相等(值 + 类型) 10 === '10' / 0 === '' false / false +!= 不相等(隐式转换) 10 != '20' true +!== 严格不相等(值 + 类型) 10 !== 10 false +> 大于 20 > 15 true +< 小于 20 < 15 false +>= 大于等于 15 >= 15 true +<= 小于等于 15 <= 10 false + +核心原则:优先使用 ===/!==,避免 == 的隐式转换坑! + +4. 逻辑运算符(处理布尔值,短路求值) +- 运算符 功能 短路规则(核心) 示例 结果 +- && 逻辑与(都真才真) 左边为 false 时,直接返回左边(不执行右边) true && 10 / false && 10 10 / false +- ` ` 逻辑或(一真就真) 左边为 true 时,直接返回左边(不执行右边) `false 20/true 20` 20 / true +- ! 逻辑非(取反) 先转布尔值再取反 !true / !0 / !!'' false / true / false + +5. 三元运算符(条件运算符,简化 if-else) +语法:条件 ? 表达式1(条件为真时执行) : 表达式2(条件为假时执行) +适合简单的二选一场景,可嵌套(不推荐多层嵌套,影响可读性) \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251113-\350\277\220\347\256\227\347\254\246\344\270\216\347\254\254\344\270\211\347\253\240\347\273\203\344\271\240.md" "b/\345\220\264\346\270\212\345\215\232/20251113-\350\277\220\347\256\227\347\254\246\344\270\216\347\254\254\344\270\211\347\253\240\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..38d2b6ee43269143dedeb2ff28f4558797cd5731 --- /dev/null +++ "b/\345\220\264\346\270\212\345\215\232/20251113-\350\277\220\347\256\227\347\254\246\344\270\216\347\254\254\344\270\211\347\253\240\347\273\203\344\271\240.md" @@ -0,0 +1,113 @@ + + + + + Document + + + + + \ No newline at end of file diff --git "a/\345\220\264\346\270\212\345\215\232/20251114-\345\276\252\347\216\257\347\273\203\344\271\240.md" "b/\345\220\264\346\270\212\345\215\232/20251114-\345\276\252\347\216\257\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\345\224\220\345\256\207\346\230\212/20251110-js\345\234\250html\344\270\255\347\232\204\345\272\224\347\224\250.md" "b/\345\224\220\345\256\207\346\230\212/20251110-js\345\234\250html\344\270\255\347\232\204\345\272\224\347\224\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..8ba935af5386ddc262791a97ba21d3c736b27ed9 --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251110-js\345\234\250html\344\270\255\347\232\204\345\272\224\347\224\250.md" @@ -0,0 +1,80 @@ +## JavaScript在HTML中的三种实现方式 + +### 1.内联时间处理器 +直接在HTML标签的事件属性中嵌入js代码,通过事件触发执行 + +```html + + + +``` + +### 2.内部脚本块 +在HTML文档中通过` + + + + + + + + +``` + +### 3.外部脚本文件 +将js代码单独写入.js文件,再通过` + +``` + +## 练习 + +### 练习1 +```html + + + +``` + + +### 练习2 +```js +function showalert(){ + alert("http://www.mingrisoft.com"); +} +``` +```html + + + + +``` diff --git "a/\345\224\220\345\256\207\346\230\212/20251112-js\345\237\272\347\241\200.md" "b/\345\224\220\345\256\207\346\230\212/20251112-js\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..6ef0d7b5836887d092795c7950b628263936c4e5 --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251112-js\345\237\272\347\241\200.md" @@ -0,0 +1,175 @@ +## 数据类型 +### 数值型 +- 十进制 +- 十六进制 +- 八进制 +- 浮点型数据 +- 特殊值 Infinity + - 如果一个数值超出了js所能表示的最大值的范围,就会输出Infinity +- 特殊值NaN + - 在进行数学运算时产生了未知的结果或错误 + +### 字符串型 +用于表示文本数据 +- 本质:字符的有序集合 +- 用途:存储/传递文本信息 + +**常用操作与方法** +1.基础属性:`length` +返回字符串的字符个数(空格、中文、符号都算1个字符) + +2.字符串拼接 +- 方式1:+运算符 +- 方式2:concat()方法(支持多参数拼接) + +**类型转换** +1.字符串转文字 +`Number(str)`:严格转换 +2.其他类型转字符串 +- `String(value)`:通用转换 +- `value.toSring()`:原始值/对象转字符串 + +### 布尔型 +布尔数据类型只有两个值,true false + +## 常量和变量 + +### 常量 +指在程序运行过程中保持不变的数据 + +### 变量 +变量是指程序中已经命名的存储单元,主要作用是为数据操作提供存储信息的容器。 + +**1.变量的命名** +- 必须以字母或下划线开头 +- 变量名不能包含空格或加号、减号等符号 +- 变量名是严格区分大小写的 +- 不能使用js中的关键字作为变量名 + +**2.变量的声明** +在js中,使用变量前需要先声明变量 +```js +var username; +``` + +**3.变量的赋值** +在声明变量是可以使用(=)对变量进行一个初始化赋值 +```js +var lesson="JavaScript 从入门到入土" +``` + +## 运算符 + +### 算术运算符 + +- `+` +- `-` +- `*` +- `/` +- `%` +- `++`:在使用i之后,使i的值加1。和++i(在使用i之前,先使i的值加1) +- `--`:在使用i之后,使i的值减1。和--i(在使用i之前,先使i的值减1) + +### 比较运算符 + +- `<` +- `>` +- `<=` +- `>=` +- `==`:等于。只根据表面值进行推断,不涉及数据类型 +- `===`:绝对等于,涉及技术类型和表面值 +- `!=` +- `!==` + +## 练习 + +### 练习1 +```html + +``` + +### 练习2 +```html + +
-----------------------------
+ +``` +![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251115205933394.png) + +### 练习 + +```html + +
-----------------------------
+ +
-----------------------------
+ +
-----------------------------
+ +
-----------------------------
+ +
-----------------------------
+ +``` +![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251115210240103.png) \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251113-js\345\237\272\347\241\2002.md" "b/\345\224\220\345\256\207\346\230\212/20251113-js\345\237\272\347\241\2002.md" new file mode 100644 index 0000000000000000000000000000000000000000..04cb65fb6fa1a39a1498d1ef7404afed2df8826c --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251113-js\345\237\272\347\241\2002.md" @@ -0,0 +1,90 @@ +## 练习 + +### 练习1 +```html + +``` + +### 练习2 +```html + 请选择你的出生年月: + + + +``` +![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251116171034379.png) + +### 练习3 +```html + +``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\345\224\220\345\256\207\346\230\212/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..31614b2854fa44b0e7bc89acf536cd2946983129 --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" @@ -0,0 +1,147 @@ +## 作业 + +### 练习1 +```html + +``` + +### 练习2 +```html + +``` + +### 练习3 +```html + +``` + +### 练习4 +```html + +``` + +### 练习5 +```html + +``` + +### 练习6 +```html + +``` + +### 练习7 +```html + +``` +![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251115210812857.png) diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115205933394.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115205933394.png" new file mode 100644 index 0000000000000000000000000000000000000000..a506a9dc1724dfc135d80245639a9c59ed96c839 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115205933394.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210240103.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210240103.png" new file mode 100644 index 0000000000000000000000000000000000000000..123d457a9719eaf5927ada4c049b29f87014aca2 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210240103.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210812857.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210812857.png" new file mode 100644 index 0000000000000000000000000000000000000000..0802576f3565ed2e909ed92385046892a9c63405 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210812857.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171034379.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171034379.png" new file mode 100644 index 0000000000000000000000000000000000000000..e7e35c066cf060ba0929c35f75a1d26b57d4762e Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171034379.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171135128.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171135128.png" new file mode 100644 index 0000000000000000000000000000000000000000..f7ff4bd18a0d7dac64bb3cb14da26b25459bb86b Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171135128.png" differ diff --git "a/\345\247\234\345\215\216\351\233\250/20251110-js\345\237\272\347\241\200.md" "b/\345\247\234\345\215\216\351\233\250/20251110-js\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..8ea36397ad391a2440913deb236bb14ffb37b26f --- /dev/null +++ "b/\345\247\234\345\215\216\351\233\250/20251110-js\345\237\272\347\241\200.md" @@ -0,0 +1,22 @@ +# 笔记 +## 行内式 + +## 嵌入式 + +## 外链式 + + +# 作业 +## 代码展示1 + +## 代码展示2 + \ No newline at end of file diff --git "a/\345\247\234\345\215\216\351\233\250/20251112-\346\225\260\346\215\256\347\261\273\345\236\213.md" "b/\345\247\234\345\215\216\351\233\250/20251112-\346\225\260\346\215\256\347\261\273\345\236\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..be205458c2f247fd699f97812ad9ab03314844fc --- /dev/null +++ "b/\345\247\234\345\215\216\351\233\250/20251112-\346\225\260\346\215\256\347\261\273\345\236\213.md" @@ -0,0 +1,46 @@ +# 笔记 +## + 1.js区分大小写 + 2.小驼峰 userName Age 第一个单词第一个字母小写 后面的单词首字母大写 + 3.i++ 使用i之后 加1 + ++i 使用i之前 加1 + 4==与===的区别 + “==”只判断值是否相等 + “===”先判断类型 在判断值是否相等 +# 作业 +## 作业1,2 + document.write("珠穆朗玛峰高度:8848.86m"); + document.write("
"); + document.write("E:\\JaveScript\\Code\\demo"); +## 作业3,4 + let mar =17100000; + document.write("
面积:") + document.write(mar) + document.write('km²
') + + let username ='郭靖'; + let gener ='男'; + let age=20; + let height=1.77; + let kunfu ='九阴真经,降龙十八掌'; + document.write('姓名:'+username +'
'); + document.write("性别:"+gener +'
'); + document.write('年龄:'+age +'
'); + document.write('身高:'+height+'m'+"
"); + document.write("武功:"+kunfu); + +## 实践与练习 + document.write('
')
+    document.write("他强由他强,清风抚三岗\n他横任他横,明月照大江\n他自恨来他自恶,我自一口真气足\n         ——《九阳神功》")
+    document.write('
') + + let d =(6500-500)-(6500-500-5000)*0.03; + document.write('该员工的实际收入为'+d+'元
'); + + let dayFebruary; + if(2024 % 400 === 0||(2024 % 4 === 0 && 2024 % 100 !==0)){ + dayFebruary=29 + }else{ + dayFebruary=28 + } + alert('2024年2月有${dayFebruary}天'); diff --git "a/\345\247\234\345\215\216\351\233\250/20251113-\347\254\254\344\272\214\347\253\240\345\206\205\345\256\271.md" "b/\345\247\234\345\215\216\351\233\250/20251113-\347\254\254\344\272\214\347\253\240\345\206\205\345\256\271.md" new file mode 100644 index 0000000000000000000000000000000000000000..889bc0d904caeca4814a95e8668ec1c151ed18e6 --- /dev/null +++ "b/\345\247\234\345\215\216\351\233\250/20251113-\347\254\254\344\272\214\347\253\240\345\206\205\345\256\271.md" @@ -0,0 +1,48 @@ +# 笔记 +## 一 + 语句:x=1+2 + 表达式:执行以后产生一个结果x==10 +## 二 + 两种类型:返回值为某一种类型的字符串 + console.log(typeof (fn)) + console.log(typeof obj) + 数据类型 返回值 + 数值 number + 字符串 string + 布尔值 boolean + undefined undefined + null object + 对象 object + 函数 function +## 三 + '', "",0.null,undefined 逻辑判断按false处理 + 其他为true +# 作业 +## 训练5 + +## 训练6 + +## 训练7 + + diff --git "a/\345\247\234\345\215\216\351\233\250/20251114-\347\254\254\344\270\211\347\253\240.md" "b/\345\247\234\345\215\216\351\233\250/20251114-\347\254\254\344\270\211\347\253\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..58f3a2b147fac3eed4f05f20157f4a6631c828ca --- /dev/null +++ "b/\345\247\234\345\215\216\351\233\250/20251114-\347\254\254\344\270\211\347\253\240.md" @@ -0,0 +1,196 @@ +# 笔记 + +# 作业 +## 3实训一 + +## 实训二 + +## 实训三 + +## 实训四 + +## 实训五 + +## 实训六 + +## 实训七 + + +## 综练1 + +## 综练二 +

请选择您的出生年月:

+ + + + +## 综练三 + + +
+ +## 电影院 + + + +
万达影城7号厅
\ No newline at end of file diff --git "a/\345\255\231\351\271\255\347\277\224/20251110-js\345\205\245\351\227\250\347\254\224\350\256\260 \347\273\203\344\271\240.md" "b/\345\255\231\351\271\255\347\277\224/20251110-js\345\205\245\351\227\250\347\254\224\350\256\260 \347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..1678e51e6f5064e0a93cfc0f2c20776d3572e985 --- /dev/null +++ "b/\345\255\231\351\271\255\347\277\224/20251110-js\345\205\245\351\227\250\347\254\224\350\256\260 \347\273\203\344\271\240.md" @@ -0,0 +1,26 @@ +## 笔记 +### js代码使用 +```html + + + +``` +1. 使用时可以直接在body里打js,也可以用外部链接的使用js +## 作业 +1. 输出老子名言 +```html + +``` +2. 输出明日学校网址 +```html +内html + + +``` +```js +alert("http://www.mingrisoft.com"); +``` \ No newline at end of file diff --git "a/\345\255\231\351\271\255\347\277\224/20251112-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" "b/\345\255\231\351\271\255\347\277\224/20251112-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\345\255\231\351\271\255\347\277\224/20251113-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" "b/\345\255\231\351\271\255\347\277\224/20251113-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\345\255\231\351\271\255\347\277\224/20261114-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" "b/\345\255\231\351\271\255\347\277\224/20261114-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\345\262\263\345\215\223\351\230\263/20251110-JavaScript-\347\273\203\344\271\240.md" "b/\345\262\263\345\215\223\351\230\263/20251110-JavaScript-\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..2584777db9eed499c2576f2786bd89d733460fb2 --- /dev/null +++ "b/\345\262\263\345\215\223\351\230\263/20251110-JavaScript-\347\273\203\344\271\240.md" @@ -0,0 +1,16 @@ + + + + + + 第一个Javascript程序 + + + + alert("http://www.mingrisoft.com") + + + + diff --git "a/\345\262\263\345\215\223\351\230\263/20251112-JavaScript\347\273\203\344\271\240.md" "b/\345\262\263\345\215\223\351\230\263/20251112-JavaScript\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..9bc10cc1b5f9bf53480214ffe0b59a2dd34c0d5f --- /dev/null +++ "b/\345\262\263\345\215\223\351\230\263/20251112-JavaScript\347\273\203\344\271\240.md" @@ -0,0 +1,97 @@ + + + + + + + 课后练习 + + + + + +

+ + + + + + + + + + + + + + + + + Document + + + + + + + \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/20251114-JavaScript\347\273\203\344\271\240.md" "b/\345\262\263\345\215\223\351\230\263/20251114-JavaScript\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..aef07214a15450711404d11292a7921e9277d625 --- /dev/null +++ "b/\345\262\263\345\215\223\351\230\263/20251114-JavaScript\347\273\203\344\271\240.md" @@ -0,0 +1,273 @@ + + + + + + + panduan + + + + + + + + + + + + + + + Document + + + + + + + + + + + + + + + Document + + + + + + + + + + + + + + + + + + + + + + + + + + + + 流程控制语句 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 10X10 + + + +
+ + + \ No newline at end of file diff --git "a/\345\262\263\345\215\223\351\230\263/\345\233\276\347\211\207imgs/PixPin_2025-11-10.png" "b/\345\262\263\345\215\223\351\230\263/\345\233\276\347\211\207imgs/PixPin_2025-11-10.png" new file mode 100644 index 0000000000000000000000000000000000000000..d9250e276163965873fcfd86a7073c630e292bad Binary files /dev/null and "b/\345\262\263\345\215\223\351\230\263/\345\233\276\347\211\207imgs/PixPin_2025-11-10.png" differ diff --git "a/\345\274\240\351\271\217\347\277\224/20251110.md" "b/\345\274\240\351\271\217\347\277\224/20251110.md" new file mode 100644 index 0000000000000000000000000000000000000000..1852bb93c9410af73f62642755f0217660ba7676 --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251110.md" @@ -0,0 +1,137 @@ +# JavaScript 引入 HTML 的三种方式 + +## 1. 行内引入(嵌入式) + +直接在 HTML 标签的事件属性中写入 JavaScript 代码。 + +```html + + + + 行内引入示例 + + + + + + +
+ 悬停变色 +
+ + + + + + + +``` + +## 2. 内部引入(内嵌式) + +在 HTML 文件内的 ` + + +``` + +## 3. 外部引入(文件式) + +将 JavaScript 代码写在单独的 `.js` 文件中,通过 `src` 属性引入。 + +### HTML 文件 (index.html) + +```html + + + + 外部引入示例 + + + + +

+ + + + + +``` + +### JavaScript 文件 (script.js) + +```javascript +// 等待DOM加载完成 +document.addEventListener("DOMContentLoaded", function () { + const btn = document.getElementById("btn"); + const input = document.getElementById("textInput"); + const output = document.getElementById("output"); + + btn.addEventListener("click", function () { + output.textContent = "你点击了按钮!"; + }); + + input.addEventListener("input", function () { + output.textContent = "输入内容: " + this.value; + }); +}); +``` + +## 总结对比 + +| 方式 | 优点 | 缺点 | 适用场景 | +| ------------ | ------------------ | ------------------ | -------------------- | +| **行内引入** | 简单快速,易于测试 | 代码混乱,难以维护 | 简单测试,小功能 | +| **内部引入** | 代码集中,易于管理 | 只能在当前页面使用 | 单页面应用,简单项目 | +| **外部引入** | 代码复用,易于维护 | 需要额外 HTTP 请求 | 中大型项目,团队开发 | + +## 老子名言 + +```html + +``` + +## 明日学院官网地址 + +- js 代码 + +```js +alert("http://www.mingrisoft.com"); +``` + +- html 代码 + +```html + +``` + + diff --git "a/\345\274\240\351\271\217\347\277\224/20251112.md" "b/\345\274\240\351\271\217\347\277\224/20251112.md" new file mode 100644 index 0000000000000000000000000000000000000000..5317afef3f36f0961932f26703b4fc58d05f795b --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251112.md" @@ -0,0 +1,27 @@ +### 练习1 +```html +

个人信息

+ +``` +### 练习2 +```html + +``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251113.md" "b/\345\274\240\351\271\217\347\277\224/20251113.md" new file mode 100644 index 0000000000000000000000000000000000000000..c5d59951f5cc43be8d7524a598dd677d6afa25e0 --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251113.md" @@ -0,0 +1,104 @@ +### 练习1 +```html + +``` +### 练习2 +```html + +``` +### 练习3 +```html + +``` +### 练习4 +```html + +``` +### 练习5 +```html + +``` +### 练习6 +```html + +``` +### 练习7 +```html + +``` +### 练习8 +```html + +``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251114.md" "b/\345\274\240\351\271\217\347\277\224/20251114.md" new file mode 100644 index 0000000000000000000000000000000000000000..32540df8673460316eae967534defc7d9ef23b79 --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251114.md" @@ -0,0 +1,107 @@ +### 练习1 +```html + +``` +### 练习2 +```html + +``` +### 练习3 +```html + +``` +### 练习4 +```html + +``` +### 练习5 +```html + +``` +### 练习6 +```html + +``` \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251110-js\345\265\214\345\205\245\344\270\216\347\273\203\344\271\240.md" "b/\346\226\271\344\275\263\347\272\257/20251110-js\345\265\214\345\205\245\344\270\216\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..0ed96bd62082d742dcd4b11ad99aa65c109b9204 --- /dev/null +++ "b/\346\226\271\344\275\263\347\272\257/20251110-js\345\265\214\345\205\245\344\270\216\347\273\203\344\271\240.md" @@ -0,0 +1,78 @@ +# 笔记 +``` +嵌入方式 + +1.行内嵌入 +行间事件:通过HTML元素的事件属性(onclick)直接嵌入Js代码。 + + + + +2.外部嵌入 +外部引入:通过标签引入外部Js文件。 + +在页面输出 + + +页面弹框 + + +控制台输出 + + + +3.内部嵌入 +内嵌脚本:在HTML文档中使用 + + + +``` +![alt text](./图片/lzmy.png) + +``` + + + + + + + 输出明日学院的官网地址 + + + + + + + +``` +![alt text](./图片/mzdz.png) \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251112-\350\277\220\347\256\227\347\254\246\344\270\216\347\273\203\344\271\240.md" "b/\346\226\271\344\275\263\347\272\257/20251112-\350\277\220\347\256\227\347\254\246\344\270\216\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..8e9672c1e82ca3b2996ce7a28e2b311de7376d37 --- /dev/null +++ "b/\346\226\271\344\275\263\347\272\257/20251112-\350\277\220\347\256\227\347\254\246\344\270\216\347\273\203\344\271\240.md" @@ -0,0 +1,136 @@ +# 笔记 +1.转义字符“\”可以防止引号匹配混乱现象 + +2.转义字符\n换行 + +3.可以在声音变量后对变量赋值 +eg:let a; + a=1; + +4.运算符: ++-*/加减乘除 +%取余 ++= +i++或++i:(i--或--i) +eg:i=1,i++输出为1,但值为2 + ++i输出为2,值为2 + +5.比较运算符 +<> <= >= +==表面值判断,不涉及数据类型 +===表面值和类型一起判断 +!= 不涉及数据类型 +!== 同时判断表面值和类型 + +6.赋值运算符 += ++= +-= +*= +/= +%= + + +# 练习 + +``` + + + + + + + Document + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + + + + + + + + + + + + + + + + + + +``` +![alt text](./图片/eyejt.png) +![alt text](./图片/xlt.png) \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251113-\350\277\220\347\256\227\347\254\246\344\270\216\347\273\203\344\271\240.md" "b/\346\226\271\344\275\263\347\272\257/20251113-\350\277\220\347\256\227\347\254\246\344\270\216\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..bb7ee80c59206ade7aa4784dd0931dff18b0cb4d --- /dev/null +++ "b/\346\226\271\344\275\263\347\272\257/20251113-\350\277\220\347\256\227\347\254\246\344\270\216\347\273\203\344\271\240.md" @@ -0,0 +1,90 @@ +# 笔记 +1.逻辑运算符: +&&逻辑与:都真为真 +||逻辑或:一真则真 +!取反(!a<5,当为真结果是假,假取真) + +2.条件运算符: +表达式?结果1:结果2(真左假右) + +3.逗号运算符:多个表达式排一起,整个表达式值为最后一个表达式的值 + +4.typeof运算符:返回数据类型 +# 练习 +``` + + + + + + + BMI 判定 + + + +第一题: + + +第二题: + + + + +第三题: + + +第四题: + + + + +``` +![alt text](./图片/stzj.png) \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/20251114-\345\276\252\347\216\257\347\273\203\344\271\240.md" "b/\346\226\271\344\275\263\347\272\257/20251114-\345\276\252\347\216\257\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..970b2a187f2d1480a32c7b57db62f7026a36f308 --- /dev/null +++ "b/\346\226\271\344\275\263\347\272\257/20251114-\345\276\252\347\216\257\347\273\203\344\271\240.md" @@ -0,0 +1,158 @@ +``` + + + + + + + Document + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +![alt text](./图片/xh.png) \ No newline at end of file diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/eyejt.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/eyejt.png" new file mode 100644 index 0000000000000000000000000000000000000000..8728a8959b12918d4c585d89609231060a63e458 Binary files /dev/null and "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/eyejt.png" differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/lzmy.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/lzmy.png" new file mode 100644 index 0000000000000000000000000000000000000000..9106cfb113d20e26190b7c12f3306084ef338828 Binary files /dev/null and "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/lzmy.png" differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/mzdz.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/mzdz.png" new file mode 100644 index 0000000000000000000000000000000000000000..73cf0c22972cad44b9924655175082393bc01ce1 Binary files /dev/null and "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/mzdz.png" differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/stzj.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/stzj.png" new file mode 100644 index 0000000000000000000000000000000000000000..4f652f70fb12d6d72c2663d6b51d1723ed9ae3a0 Binary files /dev/null and "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/stzj.png" differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xh.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xh.png" new file mode 100644 index 0000000000000000000000000000000000000000..635b6c4d17a999e93c13a5f8a31d1193fca90496 Binary files /dev/null and "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xh.png" differ diff --git "a/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xlt.png" "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xlt.png" new file mode 100644 index 0000000000000000000000000000000000000000..c84f9cc9b1ecf7ca7af0ed4624f3803343f39279 Binary files /dev/null and "b/\346\226\271\344\275\263\347\272\257/\345\233\276\347\211\207/xlt.png" differ diff --git "a/\346\234\261\346\203\240\346\203\240/20251110-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251110-\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..27f9cadec2e16ea79a167e19df734b3d131187e6 --- /dev/null +++ "b/\346\234\261\346\203\240\346\203\240/20251110-\344\275\234\344\270\232.md" @@ -0,0 +1,33 @@ +## 作业 +![js1](.\图片imgs\js1.png) +```html +输出老子的名言 + + ``` +![js2](.\图片imgs\js2.png) +```html + + ``` + ```javascript + alert("https://gitee.com/grade24") + ``` + ## 笔记 + ## 一、JS 数据类型 +### JS 数据类型分为基本数据类型和引用数据类型,核心区别在于存储方式和访问机制。 +### 1. 基本数据类型(值类型) +### 直接存储值,占用空间小,复制时传递值本身: +### Number:数字类型(整数、小数、NaN、Infinity),如123、3.14; +### String:字符串类型,单 / 双引号包裹,如'hello'、"JS"; +### Boolean:布尔类型,仅true(真)和false(假)两个值; +### Undefined:未定义类型,变量声明未赋值时默认值,如let a;则a为undefined; +### Null:空值类型,主动表示 “空”,typeof 检测返回object(历史遗留 bug); +### Symbol(ES6+):唯一标识符,避免属性名冲突,如Symbol('key'); +### BigInt(ES6+):大整数类型,解决 Number 精度限制,后缀n,如9999999999999999n。 +### 2. 引用数据类型(引用类型) +### 存储内存地址,值存于堆内存,复制时传递地址: +### Object:对象类型,键值对集合,如{name: '张三', age: 20}; +### Array:数组类型,有序数据集合,如[1, 2, 3]; +### Function:函数类型,可执行代码块,如function fn() {}; +### 其他:Date(日期)、RegExp(正则)等。 \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251112-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251112-\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..149544398b9a4c74fd6722aece4037bcd981bf9a --- /dev/null +++ "b/\346\234\261\346\203\240\346\203\240/20251112-\344\275\234\344\270\232.md" @@ -0,0 +1,41 @@ +## 作业 +![js3](.\图片imgs\js3.png) +![js4](.\图片imgs\js4.png) +```html + + ``` + ## 笔记 + ### 二、常量与变量 +### 1. 变量(可变值) +### 定义:用let(ES6+)或var声明,值可修改; +### 特点:let块级作用域,无变量提升,不能重复声明;var函数级作用域,有变量提升,可重复声明; +### 2. 常量(不可变值) +### 定义:用const声明,必须初始化,值不可直接修改; +### 特点:块级作用域,不可重复声明;引用类型常量,地址不可改,内部属性可改; \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251113-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251113-\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..4c5e8c4802728c06e978f6c2da49723e38956ad0 --- /dev/null +++ "b/\346\234\261\346\203\240\346\203\240/20251113-\344\275\234\344\270\232.md" @@ -0,0 +1,214 @@ +## 作业 +![js5](.\图片imgs\js5.png) +```html + + +``` +![js6](.\图片imgs\js6.png) +```html + + +``` +## 笔记 +### 1.算术运算符:用于数值计算,包括 +(加)、-(减)、*(乘)、/(除)、%(取余)、++(自增)、--(自减)。注意 + 也可用于字符串拼接,++/-- 放在变量前(先运算后赋值)或后(先赋值后运算)结果不同。 + +### 2.赋值运算符:给变量赋值,基础是 =,还有复合形式如 +=(a += b 即 a = a + b)、-=、*= 等,简化运算与赋值结合的操作。 + +### 3.比较运算符:比较两个值,返回布尔值。包括 ==(宽松相等,可能类型转换)、===(严格相等,类型和值都需相同)、!=、!==、>、<、>=、<=。 + +### 4.逻辑运算符:处理布尔值运算,&&(与,两边都为真才真)、||(或,一边为真就真)、!(非,取反)。会短路求值,即前半部分可确定结果时,后半部分不执行。 + +### 5.条件运算符(三目运算符):条件 ? 表达式1 : 表达式2,条件为真执行表达式 1,否则执行表达式 2,用于简化简单的条件判断。 + +### 6.其他:如 typeof(返回值的类型字符串)、,(逗号运算符,返回最后一个表达式结果)等,用于特定场景的操作。 \ No newline at end of file diff --git "a/\346\234\261\346\203\240\346\203\240/20251114-\344\275\234\344\270\232.md" "b/\346\234\261\346\203\240\346\203\240/20251114-\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..64af7991a5fc6c61d01f637c42af72a504c37858 --- /dev/null +++ "b/\346\234\261\346\203\240\346\203\240/20251114-\344\275\234\344\270\232.md" @@ -0,0 +1,156 @@ +## 作业 +![js7](.\图片imgs\js7.png) +```html + +``` +![js8](.\图片imgs\js8.png) +```html + +``` diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js1.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js1.png" new file mode 100644 index 0000000000000000000000000000000000000000..cd90b13e16a634edeba1b7a2d7dd33b7de52d837 Binary files /dev/null and "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js1.png" differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js2.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js2.png" new file mode 100644 index 0000000000000000000000000000000000000000..6424073626fd8d06bfcc25abf61802240959fa2c Binary files /dev/null and "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js2.png" differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js3.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js3.png" new file mode 100644 index 0000000000000000000000000000000000000000..b2ff3c97f4fb1e9c3d254cddc894ba0b41c589d6 Binary files /dev/null and "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js3.png" differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js4.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js4.png" new file mode 100644 index 0000000000000000000000000000000000000000..22481ca36213648bb33708377f57e338f8ee5a04 Binary files /dev/null and "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js4.png" differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js5.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js5.png" new file mode 100644 index 0000000000000000000000000000000000000000..a485378358eb6fb6a1825d71f9807090f0f7f3ce Binary files /dev/null and "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js5.png" differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js6.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js6.png" new file mode 100644 index 0000000000000000000000000000000000000000..6c023be48701e1b9f53cd30f72f8857f96933608 Binary files /dev/null and "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js6.png" differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js7.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js7.png" new file mode 100644 index 0000000000000000000000000000000000000000..18d482db98c94eeac39c8649ad937c69b945d5e0 Binary files /dev/null and "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js7.png" differ diff --git "a/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js8.png" "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js8.png" new file mode 100644 index 0000000000000000000000000000000000000000..de81e8d0d238619684f5aa117b3c8775dd24da95 Binary files /dev/null and "b/\346\234\261\346\203\240\346\203\240/\345\233\276\347\211\207imgs/js8.png" differ diff --git "a/\346\235\216\346\231\250\346\273\224/20251110-\345\210\235\350\257\206JavaScript.md" "b/\346\235\216\346\231\250\346\273\224/20251110-\345\210\235\350\257\206JavaScript.md" new file mode 100644 index 0000000000000000000000000000000000000000..3dbf7efeda8f73ac91a40de78a424b1e84b0d29b --- /dev/null +++ "b/\346\235\216\346\231\250\346\273\224/20251110-\345\210\235\350\257\206JavaScript.md" @@ -0,0 +1,25 @@ +## 认识script +1. script(三种排列方式) +- 放在body里最下面(原因:网页先构建后渲染) +- 放在标签内(相当于行内样式) +- 放在外部js文件内(需要引用) +2. 代码 +- script(js祖师爷) +- alert(弹窗) +- function(可重复使用的代码块) +- onclick(事件处理方法) + +```bash +输出老子的名言 + + 无人扶我青云志,我自踏雪至山巅。 + + + +``` +效果展示: +![](https://gitee.com/ak-47-combustible-ice/pic-go/raw/master/20251110180825336.gif) \ No newline at end of file diff --git "a/\346\235\216\346\231\250\346\273\224/20251112-JavaScript\345\237\272\347\241\200.md" "b/\346\235\216\346\231\250\346\273\224/20251112-JavaScript\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..86db9c41d278b8620a7d0e234f1b4eef160e977e --- /dev/null +++ "b/\346\235\216\346\231\250\346\273\224/20251112-JavaScript\345\237\272\347\241\200.md" @@ -0,0 +1,77 @@ +## 笔记 + + +## 练习 +1. p25练习 +- +```bash + document.write('珠穆朗玛峰的高度≈8848.86m
'); +``` + +- +```bash + document.write('E:\\JavaScript\\Code\\demo'); +``` + +2. p28练习 +- +```bash + let area = 17100000 + 'km' + '\u00B2'; + document.write(`俄罗斯的国土面积 ≈ ${area}`); +``` + +- +```bash + document.write('个人信息
'+'姓名:郭靖
'+'性别:男
'+'年龄:20
'+'身高:1.77m
'+'武功:九阴真经、降龙十八掌'); +``` + +3. p37 +- +```bash + var depositAmount = 100000; + var annualInterestRate = 0.0275; + var depositTerm = 3; + var totalPrincipalAndInterest = depositAmount+depositAmount*annualInterestRate*depositTerm; + document.write('本息合计='+totalPrincipalAndInterest); +``` + +- +```bash + var Grade = 65; + resuit = (Grade >= 60)?"及格":"不及格"; + document.write(resuit); +``` + +- +```bash + var topBase = 30; + var base = 50; + var Height = 30; + var trapezoidArea = ((topBase+base)*Height)/2; + document.write('梯形稻田的面积为:'+trapezoidArea); +``` + +4. p39 +- +```bash + document.write('
');
+    document.write('他强由他强, 清风抚山岗\n' + '他横任他横, 明月照大江\n' + '他自狠来他自恶,我自一口真气足\n' +'            ——《九阳神功》');
+    document.write('
'); +``` + +- +```bash + var monthlysalary = 6500; + var specialDeduction = 500; + var individualIncomeTaxThreshold = 5000; + var taxRate = 0.03; + var actualIncome = (monthlysalary-specialDeduction)-(monthlysalary-specialDeduction-individualIncomeTaxThreshold)*taxRate; + document.write('该员工的实际收入为' + actualIncome+'元'); +``` + +- +```bash + var year = 2024; + result = (year%4 == 0 && year%100 != 0)||(year%400 == 0)?'2月有29天':'2月有28天'; + alert(year+'年'+result); +``` \ No newline at end of file diff --git "a/\346\235\216\346\231\250\346\273\224/20251113-dmo.md" "b/\346\235\216\346\231\250\346\273\224/20251113-dmo.md" new file mode 100644 index 0000000000000000000000000000000000000000..68d5ae80d0bddb8777f1692a9e760405fe5a8600 --- /dev/null +++ "b/\346\235\216\346\231\250\346\273\224/20251113-dmo.md" @@ -0,0 +1,108 @@ +1. p55 +- +```bash + let number1; + let all = 0; + for (number1 = 1; number1 <= 1000; number1++) { + if (number1 % 65 != 0) { + continue; + } + all = all + number1; + } + document.write(all); +``` + +- +```bash +let row, piece; + document.write('尚未使用的卡位:
'); + for (row = 1; row <= 3; row++) { + for (piece = 1; piece <= 3; piece++) { + if (row == 1 && piece == 3) { + continue; + } + if (row == 3 && piece == 2) { + continue; + } + document.write('第' + row + '排' + '第' + piece + '个\n'); + if (row == 1 && piece == 2) { + document.write('
'); + } + if (row == 2 && piece == 3) { + document.write('
'); + } + } + } +``` + +2. p55实践与练习 +- +```bash + let bmi; + let bodyWeight; + let base = 2; + let manbmi= 23; + switch (base) { + case 1: + bmi = 'body<20'; + bodyWeight = '体重过轻'; + break; + case 2: + bmi = '20<=body<=25'; + bodyWeight = '体重适中'; + break; + case 3: + bmi = '25<=body<=30'; + bodyWeight = '体重过重'; + break; + case 4: + bmi = '30<=body<=35'; + bodyWeight = '肥胖'; + break; + case 5: + bmi = 'body>35'; + bodyWeight = '非常肥胖'; + break; + } + document.write('BMI:'+manbmi+'
'+'结果:'+bodyWeight); +``` + +- +```bash + let year; + let month; + document.write('请选择您的出生年月:'); + document.write(''); + document.write(''); +``` + +- +```bash +let row; + document.write(''); + document.write(''); + for (row = 1; row <= 100; row++) { + if (row % 10 == 0) { + document.write(``); + document.writeln("") + } + else{ + document.write(``); + } + } + document.write(''); + document.write('
${row}
${row}
'); +``` + diff --git "a/\346\235\216\346\231\250\346\273\224/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\346\235\216\346\231\250\346\273\224/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..afb1cbab84e45c05fa7c02b420712492da686b19 --- /dev/null +++ "b/\346\235\216\346\231\250\346\273\224/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" @@ -0,0 +1,239 @@ +## 笔记 + + +## 练习 +1. p48 +- +```bash + let number1 = 26; + let number2 = 17; + let number3 = 10; + let number4 = 20; + let minValue = number1; + if (minValue > number2) { + minValue = number2; + } + if (minValue > number3) { + minValue = number3; + } + if (minValue > number4) { + minValue = number4; + } + document.write('当前数字中最小值为:'+minValue); +``` + +- +```bash + let api = 56; + let sky; + if (0<=api&&api<=100) { + sky='良好'; + } + if (101<=api&&api<=200) { + sky='轻度污染'; + } + if (201<=api&&api<=300) { + sky='中度污染'; + } + if (api>300) { + sky='重度污染'; + } + document.write('该城市空气污染程度'+sky); +``` + +- +```bash + let Month = prompt('当前月份为:') + let Season; + let code; + if (Month == 3 || Month == 4 || Month == 5) { + code = 1; + } + if (Month == 6 || Month == 7 || Month == 8) { + code = 2; + } + if (Month == 9 || Month == 10 || Month == 11) { + code = 3; + } + if (Month == 12 || Month == 1 || Month == 2) { + code = 4; + } + switch (code) { + case 1: + Season = '春季'; + break; + case 2: + Season = '夏季'; + break; + case 3: + Season = '秋季'; + break; + case 4: + Season = '冬季'; + break; + } + document.write('当前月份属于' + Season); +``` + +2. p53 +- +```bash + let year = 1; + let Salary = 3000; + do { + Salary += 50; + year++; + document.write('第'+year+'年的工资是:'+Salary+'元
'); + } while (year <= 5); +``` + +- +```bash + let head = 35; + let foot = 94; + let chicken; + let rabbit; + for(chicken=0;chicken<=head;chicken++){ + rabbit=head-chicken; + if(chicken*2+rabbit*4==foot) + { + document.write('鸡有'+chicken+'只'+'兔有'+rabbit+'只'); + } + } +``` + +3. p54万达影城 +- +```bash + let i, j; + document.write(''); + for (i = 1; i <= 4; i++) { + for (j = 1; j <= 10; j++) { + if (i == 3 && j == 5) { + document.write(''); + continue; + } + if (i == 3 && j == 6) { + document.write(''); + continue;//跳过本次循环 + } + if (j == 10) { + document.write(``); + document.write(''); + } + else { + document.write(``); + } + } + } + document.write('
已售已售${i + '行' + j + '座'}
${i + '行' + j + '座'}
'); +``` + +4. p55 +- +```bash + let number1; + let all = 0; + for (number1 = 1; number1 <= 1000; number1++) { + if (number1 % 65 != 0) { + continue; + } + all = all + number1; + } + document.write(all); +``` + +- +```bash +let row, piece; + document.write('尚未使用的卡位:
'); + for (row = 1; row <= 3; row++) { + for (piece = 1; piece <= 3; piece++) { + if (row == 1 && piece == 3) { + continue; + } + if (row == 3 && piece == 2) { + continue; + } + document.write('第' + row + '排' + '第' + piece + '个\n'); + if (row == 1 && piece == 2) { + document.write('
'); + } + if (row == 2 && piece == 3) { + document.write('
'); + } + } + } +``` + +5. p55实践与练习 +- +```bash + let bmi; + let bodyWeight; + let base = 2; + let manbmi= 23; + switch (base) { + case 1: + bmi = 'body<20'; + bodyWeight = '体重过轻'; + break; + case 2: + bmi = '20<=body<=25'; + bodyWeight = '体重适中'; + break; + case 3: + bmi = '25<=body<=30'; + bodyWeight = '体重过重'; + break; + case 4: + bmi = '30<=body<=35'; + bodyWeight = '肥胖'; + break; + case 5: + bmi = 'body>35'; + bodyWeight = '非常肥胖'; + break; + } + document.write('BMI:'+manbmi+'
'+'结果:'+bodyWeight); +``` + +- +```bash + let year; + let month; + document.write('请选择您的出生年月:'); + document.write(''); + document.write(''); +``` + +- +```bash +let row; + document.write(''); + document.write(''); + for (row = 1; row <= 100; row++) { + if (row % 10 == 0) { + document.write(``); + document.writeln("") + } + else{ + document.write(``); + } + } + document.write(''); + document.write('
${row}
${row}
'); +``` + diff --git "a/\346\235\216\347\216\253\345\246\244/20251110-js\345\211\215\350\250\200.md" "b/\346\235\216\347\216\253\345\246\244/20251110-js\345\211\215\350\250\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..fb2a1e4f24af707d31a5be6c758a1aa3c720c70f --- /dev/null +++ "b/\346\235\216\347\216\253\345\246\244/20251110-js\345\211\215\350\250\200.md" @@ -0,0 +1,43 @@ +##笔记 + +### web前端核心技术 +1.HTML +2.css +3.JavaScript + +### web前端框架 +1. react facebook +2. vue 尤雨溪 vue3 +3. angluar2 谷歌 + +### 全栈 +1. 前端 +- vue3 +- react + +2. 后端 +- c# +- java +- python +- c/c++ +- 汇编语言 +- 二进制 +- nodejs +- go +- php + +## 作业 +1. 在WebStom工具中直接嵌入JavaScript代码,在页面中输出老子的名言“千里之行,始于足下” +```html + +``` + +2. 在HTML文件中调用外部JavaScript文件,在页面中显示 对话框,对话框中输入明日学院的官网地址http://www.mingrisoft.com +```html + +``` +```ja +alert("http://www.mingrisoft.com"); +``` \ No newline at end of file diff --git "a/\346\235\216\347\216\253\345\246\244/20251112-js\345\237\272\347\241\200.md" "b/\346\235\216\347\216\253\345\246\244/20251112-js\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..14752b09bfcc34dc2ae56ca4805360d35e8d51e0 --- /dev/null +++ "b/\346\235\216\347\216\253\345\246\244/20251112-js\345\237\272\347\241\200.md" @@ -0,0 +1,116 @@ +## 笔记 + +### 数据类型 +1. 数值型 +- 十进制 +- 十六进制 +- 八进制 +- 浮点型数据 +- 特殊值infinity +- 特殊值NaN + +2. 变量声明 +- let:块级作用域,可重新赋值(推荐)。 +- const:块级作用域,不可重新赋值(声明常量)。 +- var:函数级作用域(尽量避免,存在变量提升问题)。 + +3. 数据类型 +- 基本类型:number(数字)、string(字符串)、boolean(布尔)、null(空)、undefined(未定义)、symbol(唯一标识)、bigint(大整数)。 +- 引用类型:object(对象)、array(数组)、function(函数)等。 +- 类型判断:typeof(基本类型)、instanceof(引用类型)、Object.prototype.toString.call()(通用)。 + +4. 运算符 +- 算术运算符:+、-、*、/、%、++、--。 +- 比较运算符:==(松散相等,自动转换类型)、===(严格相等,类型 + 值均相等,推荐)。 +- 逻辑运算符:&&(与)、||(或)、!(非)。 +- 条件运算符:condition ? expr1 : expr2(三目运算符)。 + + +### 作业 +1. +``` +let height = "珠穆朗玛峰的高度为8848.86米" +document.write(height) +``` +2. +``` + document.write("E:\\JavaScipt\\Code\\demo"); +``` + +3. +``` +let area = "17100000"; +``` + +4. +```html +

个人信息

+ +``` + +5. +```html + + +``` + +6. +```html + +``` + +7. +```html + +``` + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/\346\235\216\347\216\253\345\246\244/20251113-js\345\237\272\347\241\2002.md" "b/\346\235\216\347\216\253\345\246\244/20251113-js\345\237\272\347\241\2002.md" new file mode 100644 index 0000000000000000000000000000000000000000..b5db4e791c174328cfdd60f2ebe2633abc1c0387 --- /dev/null +++ "b/\346\235\216\347\216\253\345\246\244/20251113-js\345\237\272\347\241\2002.md" @@ -0,0 +1,129 @@ +## 笔记 +1. 逻辑运算符: +- &&逻辑与:都真为真 +- ||逻辑或:一真则真 +- !取反(!a<5,当为真结果是假,假取真) + +2. 条件运算符: +表达式?结果1:结果2(真左假右) + +3. 逗号运算符:多个表达式排一起,整个表达式值为最后一个表达式的值 + +4.typeof运算符:返回数据类型 +## 作业 +1. +```html + +``` + +2. +``` + let score = 65; + let result = score>60 ? "及格":"不及格" + document.write("周星星英语成绩:"+ result); +``` + +3. +``` + let tops = 30; + let dot = 50; + let height = 30; + let areas = (tops+dot)*height/2; + document.write("梯形稻田的面积:"+areas); +``` + +4. +``` + let bmi = 23; + if(bmi<20){ + document.write("BMI:"+bmi+"
结果:体重过轻") + } + if(bmi>20 && bmi < 25){ + document.write("BMI:"+bmi+"
结果:体重适中") + } + if(bmi>25 && bmi <30){ + document.write("BMI:"+bmi+"
结果:体重过重") + } + if(bmi>30 && bmi < 35){ + document.write("BMI:"+bmi+"
结果:体重肥胖") + } +``` + +5. +``` +
+ 请选择您的出生年月: + + +
+ +``` + +6. +```html +
+ + +``` + +7. +``` +for(let i =1; i <= 3; i++){ + for(let j =1; j <= 10; j++){ + if(i == 3 && j == 5){ + continue; + } + if(i == 3 && j == 6){ + continue; + } + document.write(i+"排"+j+"座"); + } + } +``` \ No newline at end of file diff --git "a/\346\235\216\347\216\253\345\246\244/20251114-\344\275\234\344\270\232.md" "b/\346\235\216\347\216\253\345\246\244/20251114-\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..f1737a2a4ea7a330e14efa77062f135529ad9a62 --- /dev/null +++ "b/\346\235\216\347\216\253\345\246\244/20251114-\344\275\234\344\270\232.md" @@ -0,0 +1,142 @@ +## 作业 + +1. +``` +let a = 26; + let b = 17; + let c = 10; + let d = 20; + let res = a; + if (res > b) { + res = b; + } + if (res > c) { + res = c; + } + if (res > d) { + res = d + } + document.write("最小值:" + res); +``` + +2. +``` +let kq = 56; + if (kq <= 100) { + document.write("空气良好") + } + if (kq > 101 && kq <= 200) { + document.write("空气轻度污染") + } + if (kq > 201 && kq <= 300) { + document.write("空气中度污染") + } + if (kq > 300) { + document.write("空气重度污染") + } + +``` + +3. +``` +let moth = 11; + let season; + switch (moth) { + case 12: + case 1: + case 2: + season = "冬季"; + break; + case 3: + case 4: + case 5: + season = "春季"; + break; + case 6: + case 7: + case 8: + season = "夏季"; + break; + case 9: + case 10: + case 11: + season = "秋季"; + break + } + document.write("当前" + moth + "月份是" + season); +``` + +4. +``` +let workYear = 1; + let baseSalary = 3000; + let yearlyIncrease = 50; + let totalYear = 5; + + do { + let actualSalary = baseSalary + (workYear - 1) * yearlyIncrease; + document.write("第" + workYear + "年的实际工资为:" + actualSalary + "元
"); + workYear++; + } while (workYear <= totalYear); +``` + +5. +``` + document.write("
") + + let totalHeads = 35; + let totalLegs = 94; + + let chickenCount = 0; + let rabbitCount = 0; + let found = 0; + + for (let chicken = 0; chicken < totalHeads; chicken++) { + let rabbit = totalHeads - chicken; + let legs = chicken * 2 + rabbit * 4; + + if (legs === totalLegs) { + chickenCount = chicken; + rabbitCount = rabbit; + found = true; + break; + } + } + + if (found) { + document.write("鸡的数量:" + chickenCount); + document.write("
兔的数量:" + rabbitCount); + } +``` + +6. +``` +let total = 0; + for (let num = 1; num <= 1000; num++) { + if (num % 65 !== 0) { + continue; + } + total += num; + } + document.write("1~1000所有65的倍数的数字之和:" + total); +``` + +7. +``` + const seats = [ + [false, false, true], // 第1排:第3个卡位被使用(索引2) + [false, false, false], // 第2排:全部未使用 + [false, true, false] // 第3排:第2个卡位被使用(索引1) + ]; + + console.log("尚未使用的卡位:"); + for (let row = 0; row < 3; row++) { + for (let col = 0; col < 3; col++) { + if (!seats[row][col]) { + document.write(`第${row + 1}排第${col + 1}个`); + } + } + } +``` + + diff --git "a/\346\235\216\351\233\250\347\277\224/20251110-js\345\272\224\347\224\250+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251110-js\345\272\224\347\224\250+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..f34f8d33b4589bec889c3cfddfc375967c862109 --- /dev/null +++ "b/\346\235\216\351\233\250\347\277\224/20251110-js\345\272\224\347\224\250+\347\273\203\344\271\240.md" @@ -0,0 +1,76 @@ +## JavaScript在HTML中的应用 +### 前端框架 +react + +vue + +### 后端 +c# + +java + +python + +go + +lua + +易语言 + +### js输出 +输出到控制台 +```js +console.log('') +``` +弹窗 +```js +alert('') +``` + + +行内 +```js + + + +``` + +内嵌 +```js + + + +``` + +外部嵌入 +```js + + + + +``` +## 综合练习2 +![alt text](./img/20251110练习2.PNG) +```js + + + + +``` \ No newline at end of file diff --git "a/\346\235\216\351\233\250\347\277\224/20251112-\346\225\260\346\215\256\347\261\273\345\236\213\345\217\230\351\207\217.md" "b/\346\235\216\351\233\250\347\277\224/20251112-\346\225\260\346\215\256\347\261\273\345\236\213\345\217\230\351\207\217.md" new file mode 100644 index 0000000000000000000000000000000000000000..4dbf291de51e648738949698ede9afb982adcdf7 --- /dev/null +++ "b/\346\235\216\351\233\250\347\277\224/20251112-\346\225\260\346\215\256\347\261\273\345\236\213\345\217\230\351\207\217.md" @@ -0,0 +1,154 @@ +## 数据类型常量和变量 +### 变量名 +let +const +### 运算符 ++ - * / % ++ -- +### 比较运算符 +< > <= >= == === != !== + +### 赋值运算符 += += -= *= /= %= + +### 逻辑运算符 +&& || ! +### 条件运算符 +a?'b':'c' + + +### 训练题1 +![alt text](./img/20251112训练1.png) +```js + + + + +``` +### 训练题2 +![alt text](./img/20251112训练2.png) +```js + + + + + +``` +### 训练题3 +![alt text](./img/20251112训练3.png) +```js + + + + +``` +### 训练题4 + +![alt text](./img/20251112训练4.png) +```js + + + + +``` +### 训练题5 +![alt text](./img/20251112训练5.png) +```js + + + + +``` +### 训练题6 +![alt text](./img/20251112训练6.png) +```js + + + + +``` +### 训练题7 +![alt text](./img/20251112训练7.png) +```js + + + + +``` +### 综合练习1 +```js +![alt text](./img/20251112综合练习1.png) +综合练习1.html + + + + +``` + +### 综合练习2 +![alt text](./img/20251112综合练习2.png) +```js + + + + +``` + +### 综合练习3 + +![alt text](./img/20251112综合练习3.png) +```js + + + + +``` + + diff --git "a/\346\235\216\351\233\250\347\277\224/20251113-\350\277\220\347\256\227\347\254\246+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251113-\350\277\220\347\256\227\347\254\246+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..71970935545d25b02188cdf3545a8649656f92bd --- /dev/null +++ "b/\346\235\216\351\233\250\347\277\224/20251113-\350\277\220\347\256\227\347\254\246+\347\273\203\344\271\240.md" @@ -0,0 +1,157 @@ +## 运算符 +### 逻辑运算符 +- && 逻辑与 +- || 逻辑或 +- 逻辑非 + +### 条件运算符 +- 表达式?结果1:结果2 + +### 其他运算符 +1. 逗号运算符 +```js +var a,b,c,d; +a=(b=5,c=6,d=7) +allert('a的值为7'); +``` +2. typeof运算符 + + +数据类型|返回值| +|---|---| +|数值|number| +|字符串|string| +|布尔值|boolean| +|undefined|undefined| +|null|objecct| +|对象|object| +|函数|function| + +```js +let a = 1; +alert(typeof a) + +3. new 运算符 +对象实例名称 == new 对象类型() +对象实例名称 == new 对象类型 + + +``` +### 影厅座位表 +![alt text](./img/20251113影厅座位表.png) +```js + + + + +``` +### 综合练习1 +![alt text](./img/20251113综合练习1.png) +```js + + + + +``` + +### 综合练习2 +![alt text](./img/20251113综合练习2.png) +```js + + + 请选择你的出生年月: + + + + + + +``` + + +### 综合练习3 +![alt text](./img/20251113综合练习3.png) +```js + + + + +
+ + +
+ + + + +``` \ No newline at end of file diff --git "a/\346\235\216\351\233\250\347\277\224/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\256\255\347\273\203+\347\273\203\344\271\240.md" "b/\346\235\216\351\233\250\347\277\224/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\256\255\347\273\203+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..72aecf8824aa2943bc325918f6240b523a688be2 --- /dev/null +++ "b/\346\235\216\351\233\250\347\277\224/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\256\255\347\273\203+\347\273\203\344\271\240.md" @@ -0,0 +1,162 @@ +## 流程控制训练 +### 训练1 +![alt text](./img/20251114训练1.PNG) +```js + + + + +``` + +### 训练2 +![alt text](./img/20251114训练2.PNG) +```js + + + +``` +### 训练3 +![alt text](./img/20251114训练3.PNG) +```js + + + +``` +### 训练4 +![alt text](./img/20251114训练4.PNG) +```js + + + + +``` + +### 训练5 +![alt text](./img/20251114训练5.PNG) +```js + + + +``` +### 训练6 +![alt text](./img/20251114训练6.PNG) +```js + + +``` +### 训练7 +![alt text](./img/20251114训练7.PNG) +```js + + +``` \ No newline at end of file diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251110\347\273\203\344\271\2401.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251110\347\273\203\344\271\2401.PNG" new file mode 100644 index 0000000000000000000000000000000000000000..3e057cf7866dbbccc544be5c25b86d475a31ecde Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251110\347\273\203\344\271\2401.PNG" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251110\347\273\203\344\271\2402.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251110\347\273\203\344\271\2402.PNG" new file mode 100644 index 0000000000000000000000000000000000000000..c7bc42f6504dde2ee1d3e3022fc639008ebf2c2f Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251110\347\273\203\344\271\2402.PNG" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2401.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2401.png" new file mode 100644 index 0000000000000000000000000000000000000000..ddb3c5fc481f9e337a157c3ab40391e4fe8239dc Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2401.png" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2402.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2402.png" new file mode 100644 index 0000000000000000000000000000000000000000..ed6928a88f1a4446015872c74a57c77354ef4f3a Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2402.png" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2403.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2403.png" new file mode 100644 index 0000000000000000000000000000000000000000..c5270ffbb92734c158242b8807a83118a2eae21f Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251112\347\273\274\345\220\210\347\273\203\344\271\2403.png" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2031.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2031.png" new file mode 100644 index 0000000000000000000000000000000000000000..a0874df3650a338503242af4174e4c9ae5c02520 Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2031.png" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2032.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2032.png" new file mode 100644 index 0000000000000000000000000000000000000000..c3dcd3b221a9a766083057ec6c72694c5e0de7da Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2032.png" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2033.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2033.png" new file mode 100644 index 0000000000000000000000000000000000000000..91765ba0aa3f1d2e2918fa417ac7b28f1eaf264a Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2033.png" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2034.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2034.png" new file mode 100644 index 0000000000000000000000000000000000000000..435c496565439bd6da740db7f399e70d113950a2 Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2034.png" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2035.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2035.png" new file mode 100644 index 0000000000000000000000000000000000000000..fd2a4b078c1cb8b551551e00a3a07c9689664c73 Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2035.png" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2036.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2036.png" new file mode 100644 index 0000000000000000000000000000000000000000..57c377774f77557a0c6703a0793fff90cc7cfcdc Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2036.png" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2037.png" "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2037.png" new file mode 100644 index 0000000000000000000000000000000000000000..ae3451563c5660724a9dfab793f7c3a05d4de4f7 Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251112\350\256\255\347\273\2037.png" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251113\345\275\261\345\216\205\345\272\247\344\275\215\350\241\250.png" "b/\346\235\216\351\233\250\347\277\224/img/20251113\345\275\261\345\216\205\345\272\247\344\275\215\350\241\250.png" new file mode 100644 index 0000000000000000000000000000000000000000..bb1e251f7bd57f00de8ccdd50e767421a101e3de Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251113\345\275\261\345\216\205\345\272\247\344\275\215\350\241\250.png" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2401.png" "b/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2401.png" new file mode 100644 index 0000000000000000000000000000000000000000..4dc59ce634b6890002630962ea33d03a296fb215 Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2401.png" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2402.png" "b/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2402.png" new file mode 100644 index 0000000000000000000000000000000000000000..48b68cc2f8c4edd527fffefc6de5877ccaa1ce46 Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2402.png" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2403.png" "b/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2403.png" new file mode 100644 index 0000000000000000000000000000000000000000..a16c4285603a07590da9c5eb653c3f7fa05cc2fa Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251113\347\273\274\345\220\210\347\273\203\344\271\2403.png" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2031.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2031.PNG" new file mode 100644 index 0000000000000000000000000000000000000000..c1ad91bc0ac776c1e23ab04f72161eb829f83af1 Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2031.PNG" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2032.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2032.PNG" new file mode 100644 index 0000000000000000000000000000000000000000..9ed280f90192771777b2ddc7be736b576ca64c77 Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2032.PNG" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2033.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2033.PNG" new file mode 100644 index 0000000000000000000000000000000000000000..20c5da24ff8f4dfbe3b55e3846a3f330433af00f Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2033.PNG" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2034.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2034.PNG" new file mode 100644 index 0000000000000000000000000000000000000000..1c084a7e6c4bceeebca114fa811493fc073657c4 Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2034.PNG" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2035.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2035.PNG" new file mode 100644 index 0000000000000000000000000000000000000000..61b49b01c45457428162c43f60c0ad8045a28cbe Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2035.PNG" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2036.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2036.PNG" new file mode 100644 index 0000000000000000000000000000000000000000..e7dc0674beadf888122279a6524ab1c64771a14b Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2036.PNG" differ diff --git "a/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2037.PNG" "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2037.PNG" new file mode 100644 index 0000000000000000000000000000000000000000..d4c96f30a4db5dbe6a2f7cc262d48ecfa494a93b Binary files /dev/null and "b/\346\235\216\351\233\250\347\277\224/img/20251114\350\256\255\347\273\2037.PNG" differ diff --git "a/\346\235\250\345\205\211\346\262\243/20251110-js\347\254\254\344\270\200\350\257\276.md" "b/\346\235\250\345\205\211\346\262\243/20251110-js\347\254\254\344\270\200\350\257\276.md" new file mode 100644 index 0000000000000000000000000000000000000000..1cb8b2437a98a8a9191be1be2a970744d874f9f3 --- /dev/null +++ "b/\346\235\250\345\205\211\346\262\243/20251110-js\347\254\254\344\270\200\350\257\276.md" @@ -0,0 +1,41 @@ +# 笔记 +### js的使用 +- 内部 + ```html + + + +``` +- 外部(需要创建一个外部js文件) +```html + + + +``` +# 练习 +内部(输出老子名言) +关键代码 +```html + + + +``` +效果图 +![alt text](11-10(1)-1.gif) + +外部(弹窗明日学院) +关键代码 +```html + + + +``` +```js +alert("https://www.mingrisoft.com/"); +``` +效果图 +![alt text](11-10(2)-1.gif) \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251112-\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" "b/\346\235\250\345\205\211\346\262\243/20251112-\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..7acb3bdd7705c409cd8d614cd366a89206453def --- /dev/null +++ "b/\346\235\250\345\205\211\346\262\243/20251112-\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" @@ -0,0 +1,80 @@ +# 笔记 +- 1.js区分大小写 +- 2.小驼峰 userName Age 第一个单词第一个字母小写 后面的单词首字母大写 +- 3.i++ 使用i之后 加1,++i 使用i之前 加1 + +# 练习 +效果图 +![alt text](screenshots.gif) +代码 +```html + +``` \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251113-\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" "b/\346\235\250\345\205\211\346\262\243/20251113-\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..ae66afc38f525a3654c12b33d07042f748aa0843 --- /dev/null +++ "b/\346\235\250\345\205\211\346\262\243/20251113-\347\254\224\350\256\260\344\270\216\347\273\203\344\271\240.md" @@ -0,0 +1,174 @@ +# 笔记 + + +# 练习 +- 1代码 +```html + + + +
+

+
+ +
+ + + +``` + +效果图 +![alt text](screenshots.gif) +- 2代码 +```html + + + +
+ + + +``` +效果图 +![alt text](screenshots-1.gif) \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/20251114-\347\273\203\344\271\240.md" "b/\346\235\250\345\205\211\346\262\243/20251114-\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..fa4e562cdcbd5de389ae135edba6f837d2dea2a8 --- /dev/null +++ "b/\346\235\250\345\205\211\346\262\243/20251114-\347\273\203\344\271\240.md" @@ -0,0 +1,103 @@ +# 练习 +代码 +```html + + + + +``` +效果图 +![alt text](screenshots.gif) \ No newline at end of file diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/11-10(1).gif" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/11-10(1).gif" new file mode 100644 index 0000000000000000000000000000000000000000..c9afa364ce3e23c767fd654e8c85ac38f1b63315 Binary files /dev/null and "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/11-10(1).gif" differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/11-10(2).gif" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/11-10(2).gif" new file mode 100644 index 0000000000000000000000000000000000000000..cd4ffeff234ea2d58fe07d211747544aaa43187f Binary files /dev/null and "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/11-10(2).gif" differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1112.gif" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1112.gif" new file mode 100644 index 0000000000000000000000000000000000000000..6fe6ef893c896e085ae6a6f6093b51a97c47ac9c Binary files /dev/null and "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1112.gif" differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1113 (2).gif" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1113 (2).gif" new file mode 100644 index 0000000000000000000000000000000000000000..c929a74725e4b8dc421ca7591afcbbcf990d0a94 Binary files /dev/null and "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1113 (2).gif" differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1113.gif" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1113.gif" new file mode 100644 index 0000000000000000000000000000000000000000..bd3633fa41397e66a753b16e3c4a4ef1dfb4c178 Binary files /dev/null and "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1113.gif" differ diff --git "a/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1114.gif" "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1114.gif" new file mode 100644 index 0000000000000000000000000000000000000000..76560e467f6e54983feeeb437e32612cc81b83ea Binary files /dev/null and "b/\346\235\250\345\205\211\346\262\243/\345\233\276\347\211\207/1114.gif" differ diff --git "a/\346\236\227\345\211\221\351\224\213/20251110-\344\275\234\344\270\232+\347\254\224\350\256\260.md" "b/\346\236\227\345\211\221\351\224\213/20251110-\344\275\234\344\270\232+\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..afbd5e54ae340ff4f728506201d3764c8c5f3062 --- /dev/null +++ "b/\346\236\227\345\211\221\351\224\213/20251110-\344\275\234\344\270\232+\347\254\224\350\256\260.md" @@ -0,0 +1,19 @@ +![](./屏幕截图 2025-11-16 173644.png) +1.后端 + - C# asp.net core + - java springboot springcloud springmvc + - python Django + + + + + 输出老子的名言 + + + + + + \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251112-\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\346\236\227\345\211\221\351\224\213/20251112-\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..8c19ff01c84188491737f36d1b0d619a79d8f0b0 --- /dev/null +++ "b/\346\236\227\345\211\221\351\224\213/20251112-\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,210 @@ +##笔记 + - 转义字符让双引号单引号不混乱:"/'包含单引号内容" + + + +```html + + + + + Document + + + + + +``` + + + +```html + + + + + Document + + + + + +``` + + + + +```html + + + + + Document + + + + + +``` + + + + +```html + + + + + Document + + + + + +``` + + + +```html + + + + + Document + + + + + +``` + + + +```html + + + + + Document + + + + + +``` + + + + +```html + + + + + Document + + + + + +``` + + + +```html + + + + + Document + + + + + +``` + + + +```html + + + + + Document + + + + + +``` + + +```html + + + + + Document + + + + + +``` \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251113-\344\275\234\344\270\232+\347\254\224\350\256\260.md" "b/\346\236\227\345\211\221\351\224\213/20251113-\344\275\234\344\270\232+\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..b088bbf12b3bc30cadcbcb915ac94be3df9fd39d --- /dev/null +++ "b/\346\236\227\345\211\221\351\224\213/20251113-\344\275\234\344\270\232+\347\254\224\350\256\260.md" @@ -0,0 +1,173 @@ +##笔记 + - 表达式:一串数据间输出结果:5+3<3+8等 + - '' "" O null undefind都当成false去运算 +```html + + + + + Document + + + + + + + +``` + +```html + + + + + 判断身高质量指数 + + + + + +``` + + +```html + + + + + + Document + + + + + + + +``` + + + +```html + + + + + Document + + + + + + +``` + + + +```html + + + + + Document + + + + + +``` \ No newline at end of file diff --git "a/\346\236\227\345\211\221\351\224\213/20251114-\344\275\234\344\270\232.md" "b/\346\236\227\345\211\221\351\224\213/20251114-\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..3fb3af367b289e275effc53ab14426fa83364991 --- /dev/null +++ "b/\346\236\227\345\211\221\351\224\213/20251114-\344\275\234\344\270\232.md" @@ -0,0 +1,115 @@ +##笔记 + +```html + + + + + Document + + + + + +``` + +```html + + + + + + Document + + + + + + + +``` + + +```html + + + + + Document + + + + + +``` + + + +```html + + + + + Document + + + + + +``` \ No newline at end of file diff --git "a/\346\257\233\351\221\253\347\216\211/20251110-JavaScript\345\237\272\347\241\200\350\257\255\346\263\225.md" "b/\346\257\233\351\221\253\347\216\211/20251110-JavaScript\345\237\272\347\241\200\350\257\255\346\263\225.md" new file mode 100644 index 0000000000000000000000000000000000000000..d71f549b96e65b702b82dc2c05448573dfba6782 --- /dev/null +++ "b/\346\257\233\351\221\253\347\216\211/20251110-JavaScript\345\237\272\347\241\200\350\257\255\346\263\225.md" @@ -0,0 +1,93 @@ +## 笔记 + +# 前端语言 + +-HTML: 用于定义网页的结构和内容。 + +-CSS: 用于设计网页的样式和布局。 + +-JavaScript: 实现动态交互功能,是前端开发的核心语言。 + +-TypeScript: JavaScript 的超集,增加了静态类型检查。 + +-框架与库: 包括 React.js、Vue.js、Angular.js、jQuery 等,简化了前端开发流程。 + +-移动端语言: 如 Swift 和 Kotlin,用于开发移动端应用的前端部分。 + + +# 后端语言 +后端语言用于处理服务器逻辑、数据库操作以及与前端的通信。 + +Python: 简单易学,常用于 Web 开发(如 Django 和 Flask 框架)。 + +Java: 跨平台语言,适合大型企业级应用开发。 + +PHP: 专注于 Web 开发,支持快速构建动态网站。 + +Ruby: 以 Ruby on Rails 框架闻名,适合快速开发。 + +Node.js: 基于 JavaScript 的后端运行时,适合高并发场景。 + +C#: 微软开发的语言,常用于 .NET 平台的后端开发。 + +Go: 谷歌推出的高性能语言,适合构建高并发的服务器应用。 + + +训练1 +```html + +``` +训练2 +```html + +``` +训练3 +```html + +``` + +训练4 +```html +

个人信息

+ +``` + +综合练习1 +```html + +``` +综合练习2 +```html + + + +``` diff --git "a/\346\257\233\351\221\253\347\216\211/20251112-\346\225\260\345\200\274\347\261\273\345\236\213.md" "b/\346\257\233\351\221\253\347\216\211/20251112-\346\225\260\345\200\274\347\261\273\345\236\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..6a396cd6fd7a68e8168903feae229eb43100d0eb --- /dev/null +++ "b/\346\257\233\351\221\253\347\216\211/20251112-\346\225\260\345\200\274\347\261\273\345\236\213.md" @@ -0,0 +1,73 @@ +## JavaScript基础 + +# 数据类型 + - 数值类 + + - 字符类型 + + - 布尔型 + + - 特殊数据类型 + +# 常量和变量 + - 常量:程序运行过程中保持不变的数据(数值型常量,true和false是布尔型常量等) + + - 变量:程序中已经命名的存储单元,主要作用是为数据操作提供存储信息的容器 + +# 运算符 + -算法运算符 + + -字符串运算符 + + -比较运算符 + + -赋值运算符 + + -逻辑运算符 + + -条件运算符 + + -其他运算符 + + -远算符的优先级和结合性 + + 综合训练1(第2章) + ```html + + ``` + + 综合训练2 + ```html + + ``` + + 综合训练3 + ```html + + ``` \ No newline at end of file diff --git "a/\346\257\233\351\221\253\347\216\211/20251113-\346\225\260\345\200\274\347\261\273\345\236\213.md" "b/\346\257\233\351\221\253\347\216\211/20251113-\346\225\260\345\200\274\347\261\273\345\236\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..7b2283f1cebc741b81ca85315af05daadbc6cdc5 --- /dev/null +++ "b/\346\257\233\351\221\253\347\216\211/20251113-\346\225\260\345\200\274\347\261\273\345\236\213.md" @@ -0,0 +1,167 @@ +## 运算符 +| 运算符类别 | 具体运算符 | 描述 | 示例 | +|------------------|---------------------|----------------------------------------------------------------------|---------------------------------------| +| **比较运算符** | `==` | 松散相等:仅比较值,忽略数据类型 | `5 == "5" → true`;`1 == true → true` | +| | `===` | 严格相等:同时比较值和数据类型(推荐使用) | `5 === "5" → false`;`1 === true → false` | +| | `!=` | 松散不相等:值不相等时返回 true(忽略类型) | `5 != "5" → false`;`1 != 2 → true` | +| | `!==` | 严格不相等:值或类型不同时返回 true | `5 !== "5" → true`;`1 !== 1 → false` | +| | `>` | 左侧值大于右侧值时返回 true | `10 > 5 → true`;`3 > 7 → false` | +| | `<` | 左侧值小于右侧值时返回 true | `2 < 6 → true`;`8 < 3 → false` | +| | `>=` | 左侧值大于或等于右侧值时返回 true | `5 >= 5 → true`;`4 >= 6 → false` | +| | `<=` | 左侧值小于或等于右侧值时返回 true | `3 <= 5 → true`;`7 <= 2 → false` | +| **赋值运算符** | `=` | 基础赋值:将右侧值赋给左侧变量 | `let a = 10;`(a 被赋值为 10) | +| | `+=` | 加法赋值:`a += b` 等价于 `a = a + b` | `let a = 3; a += 2;`(a 变为 5) | +| | `-=` | 减法赋值:`a -= b` 等价于 `a = a - b` | `let b = 8; b -= 3;`(b 变为 5) | +| | `*=` | 乘法赋值:`a *= b` 等价于 `a = a * b` | `let c = 2; c *= 4;`(c 变为 8) | +| | `/=` | 除法赋值:`a /= b` 等价于 `a = a / b` | `let d = 10; d /= 2;`(d 变为 5) | +| | `%=` | 取模赋值:`a %= b` 等价于 `a = a % b`(取余数) | `let e = 7; e %= 3;`(e 变为 1) | +| **三元运算符** | `condition ? expr1 : expr2` | 条件判断:若 condition 为 true,返回 expr1;否则返回 expr2(简化 if-else) | `let max = 5 > 3 ? 5 : 3;`(max 为 5) | +| | | 支持嵌套使用(多层条件判断) | `let level = score >= 90 ? "优秀" : score >= 60 ? "及格" : "不及格";` | + +训练5(第1章) +```html + +``` + +训练6 +```html + +``` + +训练7 +```html + +``` + +综合训练1(第3章) +```html + +``` + +综合训练2 +```html + +``` + +综合训练3 +```html + + + + +
+ +``` + +万达影城 +```html + + + + +``` \ No newline at end of file diff --git "a/\346\257\233\351\221\253\347\216\211/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\346\257\233\351\221\253\347\216\211/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..750b062e4565c4ec80a9ef675ec04360ca111a6c --- /dev/null +++ "b/\346\257\233\351\221\253\347\216\211/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" @@ -0,0 +1,130 @@ +训练1 +```html + +``` + +训练2 +```html + +``` + +训练3 +```html + +``` + +训练4 +```html + +``` + +训练5 +```html + +``` + +训练6 +```html + +``` + +训练7 +```html + +``` + diff --git "a/\347\275\227\347\232\223\346\231\250/20251110-js\345\255\246\344\271\240\345\274\225\345\205\245\346\226\271\345\274\217.md" "b/\347\275\227\347\232\223\346\231\250/20251110-js\345\255\246\344\271\240\345\274\225\345\205\245\346\226\271\345\274\217.md" new file mode 100644 index 0000000000000000000000000000000000000000..c0c994354687975ba3b6ce11a7047d69e9001592 --- /dev/null +++ "b/\347\275\227\347\232\223\346\231\250/20251110-js\345\255\246\344\271\240\345\274\225\345\205\245\346\226\271\345\274\217.md" @@ -0,0 +1,73 @@ +## 笔记 + +### JavaScript 主要引入方式详解 + +#### 1. 行内引入(嵌入式) + +- 核心形式:将 JS 代码直接嵌入 HTML 标签的属性中,依赖事件触发或特定前缀执行。 + - 事件属性:如 `onclick`、`onmouseover` 等,例如 + + ```html + + ``` + +- **本质**:JS 代码与 HTML 标签完全耦合,属于最原始的引入方式 +- **特点**:仅适合单元素的极简交互,代码无法复用,维护性极差,仅临时测试或极端简单场景使用 + +#### 2. 内部引入(内嵌式) + +- 核心形式:通过` + ``` + +- **特点**:代码与 HTML 分离但同文件,无需额外请求,适合中小型单页应用的独立逻辑,复用性较低 + +- **注意**:内部引入需将` + ``` + +- **特点**:代码与 HTML 完全分离,可复用性极强,支持按需加载和模块化,是大型项目的标准引入方式 + +## 作业 + +### 第一题 + +#### 关键代码 + +```html + +

+ + +``` + +#### 效果展示 + +![](./Image/20251110_Image/show01.png) + +### 第二题 + +#### 关键代码 + +```html + +``` + +#### 效果展示 + +![](./Image/20251110_Image/show02.png) \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/20251112-js\345\237\272\347\241\200.md" "b/\347\275\227\347\232\223\346\231\250/20251112-js\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..cae7ffc32f2eafcea064eae12c15803a38eae095 --- /dev/null +++ "b/\347\275\227\347\232\223\346\231\250/20251112-js\345\237\272\347\241\200.md" @@ -0,0 +1,111 @@ +## 笔记 + +### 数据类型 +#### 基本类型 + +| 类型 | 说明及典型示例 | 关键特点 | +| --------- | ------------------------------------ | ----------------------------------------------------- | +| Number | 整数 (10)、浮点数 (3.14)、NaN | NaN 表示非数字,`isNaN()`判断;Infinity 表示无穷大 | +| String | 单 / 双引号 ("hi")、反引号 (`a${b}`) | 反引号支持模板字符串和换行 | +| Boolean | true(真)、false(假) | 0、""、null、undefined 会被转为 false | +| Null | let a = null | 表示 “空”,主动赋值;typeof 检测为 object(历史问题) | +| Undefined | let b;(声明未赋值) | 表示 “未定义”,变量默认初始值 | + +### 常量和变量 + +| 类型 | 声明方式 | 作用域范围 | 核心规则 | +| ---- | -------- | ------------------------ | -------------------------------------------------------- | +| 变量 | let | 块级({} 内,如 if/for) | 可重新赋值,同一作用域不可重复声明 | +| 变量 | var | 函数级(函数内) | 可重复声明,存在 “变量提升”(声明提前到顶部) | +| 常量 | const | 块级 | 必须初始化,不可重新赋值;引用类型内部可改(如对象属性) | + +### 运算符 + +| 类型 | 常用运算符 | 关键说明 | +| ---------- | ----------------------- | ------------------------------------------------------------ | +| 算术运算符 | `+`、`-`、`*`、`/`、`%`(取余) | `+` 可拼接字符串(如 '2' + 3 → '23') | +| 赋值运算符 | `=`、`+=`(a+=b 即 a=a+b) | 简化赋值操作 | +| 比较运算符 | `==`(宽松)、`===`(严格) | `==` 会自动类型转换(0 == false → true);`===` 需类型和值都相同 | +| 逻辑运算符 | `&&`(与)、`\|\|` (或)、`!`(非) | 短路逻辑:`&& `遇 `false `返回该值,`\|\|` 遇 `true` 返回该值,`!`取反 | +| 自增自减 | `++`、`--` | 前置(`++a`:先加后用);后置(`a++`:先用后加) | +| 三元运算符 | 条件?结果 1 : 结果 2 | 简化简单 if 判断(如 age>18?' 成年 ':' 未成年 ') | + +## 作业 + +### 编程训练 + +#### 关键代码 + +```html +
+

+
+
+

+

+

+
+ +``` + +#### 效果展示 + +![](./Image/20251112_Image/show01.png) + +### 综合练习 + +#### 关键代码 + +```html +

+ +``` + +#### 效果展示 + +![](./Image/20251112_Image/show02.png) + +![](./Image/20251112_Image/show03.png) \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/20251113-jsDOM\344\273\213\347\273\215.md" "b/\347\275\227\347\232\223\346\231\250/20251113-jsDOM\344\273\213\347\273\215.md" new file mode 100644 index 0000000000000000000000000000000000000000..0e53d423beff6d03d5f773493ba8c49487608a80 --- /dev/null +++ "b/\347\275\227\347\232\223\346\231\250/20251113-jsDOM\344\273\213\347\273\215.md" @@ -0,0 +1,191 @@ +## 笔记 + +### DOM 核心概念 + +DOM 全称 **Document Object Model(文档对象模型)**,一句话说透核心:**把 HTML 页面变成 JS 能识别、能操作的 “树状对象体系”,是 JS 与 HTML 交互的唯一桥梁**。 + +### DOM 到底是什么? + +- 本质是 **“结构化的节点对象集合”**: + 1. 先按 HTML 嵌套关系,形成 “树状结构”(父子、兄弟节点层级); + 2. 再把 HTML 里的标签、文字、属性等,都变成 “DOM 节点对象”; + 3. 自带一套操作 API(比如 `getElementById`),让 JS 能 “抓节点、改节点”。 +- 通俗类比:HTML 是 “建筑图纸”(只能看),DOM 是 “可交互的建筑模型”(能拆改、能调整)—— 没有 DOM,JS 就 “看不见” 页面元素,更没法操作。 + +### 核心结构:DOM 树 + +HTML 标签的嵌套关系,在 DOM 里会变成 “树状结构”,每个组成部分都是 “节点”,关键分 3 类: + +| 节点类型 | 作用 | 示例 | +| ---------------- | ------------------------------------ | --------------------------- | +| Document(树根) | 代表整个 HTML 文档,所有操作的起点 | JS 里的 `document` 对象 | +| 元素节点(树枝) | 对应 HTML 标签,是最常操作的对象 | `
`、` + + + + +``` + +##### 对应的 DOM 树(直观层级) + +```plaintext +Document(树根) +└── html(根标签节点) + ├── head(元素节点) + │ └── title(元素节点) + │ └── "我的页面"(文本节点) + └── body(元素节点) + ├── h1(元素节点) + │ └── "标题"(文本节点) + └── select(元素节点,id="mySelect-year") + └── option(元素节点) + └── "1949年"(文本节点) +``` + +### 为什么需要 DOM? + +1. 结构化呈现:把杂乱的 HTML 标签,按层级整理成 “树”,JS 能顺着树快速找节点; +2. 可操作性:让 JS 能修改页面内容、样式、属性(比如改文字、换颜色、加标签); +3. 互动基础:支持监听点击、输入等事件(比如点击按钮弹出内容),是所有页面交互的核心。 + +### 总结 + +**DOM 是包含各类节点(文档节点、元素节点、文本节点等)的树状模型,`getElementBy`等 API 的作用是从 DOM 树中查找并返回「匹配的元素节点」,若找到则返回该元素节点对象,没找到则返回 `null`,然后对其进行对应操作。** + +## 作业 + +### 第一部分 + +#### 关键代码 + +```html +
+
+
+
+
+ 年份: + 月份: +
+
+ +
+
+ +``` + +#### 效果展示 + +![](./Image/20251113_Image/show01.png) + +### 第二部分 + +#### 关键代码 + +```html +
+
+
+ +``` + +#### 效果展示 + +![](./Image/20251113_Image/show02.png) \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/20251114-js\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\347\275\227\347\232\223\346\231\250/20251114-js\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..5f792bbab85d4940673273e199a645fdc685037b --- /dev/null +++ "b/\347\275\227\347\232\223\346\231\250/20251114-js\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" @@ -0,0 +1,190 @@ +## 笔记 + +### 分支结构(根据条件执行不同代码) + +#### if 语句 + +- 作用:满足条件则执行对应代码块,否则跳过 +- 三种形式: + - 单条件:`if (条件) { 满足时执行 }` + - 双条件:`if (条件) { 满足时执行 } else { 不满足时执行 }` + - 多条件:`if (条件1) { 满足1执行 } else if (条件2) { 满足2执行 } else { 都不满足执行 }` +- 关键:条件为布尔值(true 执行,false 跳过),非布尔值会自动隐式转换(如 0→false、非 0 数字→true、空字符串→false) + +#### switch 语句 + +- 作用:根据一个变量 / 表达式的多个可能值,执行对应代码块 +- 核心规则: + - 匹配原则:`===` 严格匹配,`case`必须为一个固定值,不能为条件 + - 必须加 `break`:否则会穿透到下一个 `case` 执行 + - `default`:所有 `case` 都不匹配时执行(可选) + +### 循环结构 + +#### for 循环(已知循环次数) + +- 语法:`for (初始化变量; 循环条件; 变量更新) { 循环体 }` +- 适用场景:数组遍历、固定次数的重复操作(如循环 10 次) +- 关键:循环条件为 true 时继续执行,false 时退出;避免死循环(如条件永远为 true) + +#### while 循环(未知循环次数,先判断后执行) + +- 语法:`while (循环条件) { 循环体; 变量更新 }` +- 特点:先判断条件,不满足则一次都不执行 +- 注意:必须在循环体内更新变量,否则会陷入死循环 + +#### do...while 循环(未知循环次数,先执行后判断) + +- 语法:`do { 循环体; 变量更新 } while (循环条件)` +- 特点:至少执行一次循环体,再判断条件 +- 适用场景:需要确保代码块至少运行一次的场景(如表单验证重试) + +### 循环控制语句(调整循环执行) + +#### break + +- 作用:立即退出当前循环(或 switch 语句),后续代码不再执行 +- 场景:找到目标值后终止循环、满足特定条件时退出 + +#### continue + +- 作用:跳过当前循环的剩余代码,直接进入下一次循环判断 +- 注意:仅跳过当前次,不终止整个循环 + +### 关键注意点 + +1. 代码块 {}:单条语句可省略,但建议始终添加(提高可读性、避免语法错误) +2. 条件判断:优先使用 === 严格相等,避免 == 隐式转换导致的意外结果 +3. 死循环:循环条件必须有终止可能(如 i++、i--),否则会导致页面卡死 +4. 嵌套控制:多层循环 / 分支中,break/continue 仅作用于当前所在层级 + +## 作业 + +### 第一、二、三题 + +#### 关键代码 + +```html + +``` + +#### 效果展示 + +![](./Image/20251114_Image/show01.png) + +### 第四、五题 + +#### 关键代码 + +```html + +``` + +#### 效果展示 + +![](./Image/20251114_Image/show02.png) + +### 第六、七题 + +#### 关键代码 + +```html + +``` + +#### 效果展示 + +![](./Image/20251114_Image/show03.png) \ No newline at end of file diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251110_Image/show01.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251110_Image/show01.png" new file mode 100644 index 0000000000000000000000000000000000000000..c171d01045ecfb07982eaeb5f75f55d2aa281ab0 Binary files /dev/null and "b/\347\275\227\347\232\223\346\231\250/Image/20251110_Image/show01.png" differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251110_Image/show02.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251110_Image/show02.png" new file mode 100644 index 0000000000000000000000000000000000000000..c3171c331dd7de445f310348aad1e84b6671e87c Binary files /dev/null and "b/\347\275\227\347\232\223\346\231\250/Image/20251110_Image/show02.png" differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show01.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show01.png" new file mode 100644 index 0000000000000000000000000000000000000000..333b5a1c1351c1b24fbe60cb64b2f2d8d4558750 Binary files /dev/null and "b/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show01.png" differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show02.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show02.png" new file mode 100644 index 0000000000000000000000000000000000000000..b0b53c99a6200442ebfa39f11ccb1926bbf10c47 Binary files /dev/null and "b/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show02.png" differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show03.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show03.png" new file mode 100644 index 0000000000000000000000000000000000000000..b1cc315013fe50ded101395fc614e13a35604e12 Binary files /dev/null and "b/\347\275\227\347\232\223\346\231\250/Image/20251112_Image/show03.png" differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251113_Image/show01.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251113_Image/show01.png" new file mode 100644 index 0000000000000000000000000000000000000000..60f1d24cf6f6e4d65ac2b7ea1856b233688e9ec3 Binary files /dev/null and "b/\347\275\227\347\232\223\346\231\250/Image/20251113_Image/show01.png" differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251113_Image/show02.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251113_Image/show02.png" new file mode 100644 index 0000000000000000000000000000000000000000..9d5dad8e7a1443236dc4d1eb34361d8522a2a3d7 Binary files /dev/null and "b/\347\275\227\347\232\223\346\231\250/Image/20251113_Image/show02.png" differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show01.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show01.png" new file mode 100644 index 0000000000000000000000000000000000000000..9ab848b350f706c1d707b94b005c3061297d92e1 Binary files /dev/null and "b/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show01.png" differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show02.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show02.png" new file mode 100644 index 0000000000000000000000000000000000000000..2a4b80b876c23ce98d5b41beb5681352ddda1042 Binary files /dev/null and "b/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show02.png" differ diff --git "a/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show03.png" "b/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show03.png" new file mode 100644 index 0000000000000000000000000000000000000000..877c5fc50f1514b361cc3705497a6b930cd758ff Binary files /dev/null and "b/\347\275\227\347\232\223\346\231\250/Image/20251114_Image/show03.png" differ diff --git "a/\350\265\226\345\277\227\350\261\252/20251110-JavaScript\347\232\204\345\272\224\347\224\250.md" "b/\350\265\226\345\277\227\350\261\252/20251110-JavaScript\347\232\204\345\272\224\347\224\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..6fa0d5c9029a13a28f3b5524fe274edfc1c65f10 --- /dev/null +++ "b/\350\265\226\345\277\227\350\261\252/20251110-JavaScript\347\232\204\345\272\224\347\224\250.md" @@ -0,0 +1,32 @@ +一.JavaScript在HTML中的应用 +```html + 1.直接嵌入标签元素中使用 + + 2.内部引用式(嵌入式) + + 3.外部引用式 + +``` + + +练习一 +```html + +``` +![alt text](Snipaste_2025-11-10_17-05-27.png) + +练习二 +```html +
+ +
+ +``` +![alt text](Snipaste_2025-11-10_17-02-03.png) \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251112-JavaScript\345\237\272\347\241\200.md" "b/\350\265\226\345\277\227\350\261\252/20251112-JavaScript\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..9c7be80dbf80215e129135af69aebababad5d944 --- /dev/null +++ "b/\350\265\226\345\277\227\350\261\252/20251112-JavaScript\345\237\272\347\241\200.md" @@ -0,0 +1,71 @@ +训练一 +```html + +``` + +训练二 +```html + +``` + +训练三 +```html + +``` + +训练四 +```html + +``` +![alt text](Snipaste_2025-11-12_16-47-49.png) + + + +综合训练一 +```html + +``` +![alt text](Snipaste_2025-11-12_11-02-28.png) +综合训练二 +```html + +``` +![alt text](Snipaste_2025-11-12_11-16-31.png) + +综合训练三 +```html + + +``` +![alt text](Snipaste_2025-11-12_16-19-46.png) \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251113-JavaScript\350\277\220\347\256\227\347\254\246.md" "b/\350\265\226\345\277\227\350\261\252/20251113-JavaScript\350\277\220\347\256\227\347\254\246.md" new file mode 100644 index 0000000000000000000000000000000000000000..ee170d7f2cd49feb0a504a103eb264423d873196 --- /dev/null +++ "b/\350\265\226\345\277\227\350\261\252/20251113-JavaScript\350\277\220\347\256\227\347\254\246.md" @@ -0,0 +1,53 @@ +一.逻辑运算符 +```bash + 运算符 描 述 示 例 + && 逻辑与 a&&b 当a和b都为真时,结果为真,否则为假 + || 逻辑或 a||b 当a为真或者b为真时,结果为真,否则为假 + ! 逻辑非 !a 当a为假时,结果为真,否则为假 +``` + +二.typeof运算符 +```bash + 数据类型 返回值 + 数值 number + 字符串 string + 布尔值 bollean + undefined undefined + null object + 对象 object + 函数 function +``` + +训练五 +```html + +``` + +训练六 +```html + +``` + +训练七 +```html + +``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/20251114-JavaScript\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\350\265\226\345\277\227\350\261\252/20251114-JavaScript\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..53ba0cd40d1f1b7d5f665eae8a9471556e38f0ae --- /dev/null +++ "b/\350\265\226\345\277\227\350\261\252/20251114-JavaScript\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" @@ -0,0 +1,210 @@ +训练1 +```html + +``` + +训练2 +```html + +``` + +训练3 +```html + +``` + +训练4 +```html + +``` + +训练5 +```html + +``` + +训练6 +```html + +``` + +训练7 +```html + +``` + +综合练习1 +```html + +``` + +综合练习2 +```html + + 请选择您的出生年月: + + + + +``` + +综合练习3 +```html + + + +``` \ No newline at end of file diff --git "a/\350\265\226\345\277\227\350\261\252/image/20251110\347\273\203\344\271\240\344\270\200.png" "b/\350\265\226\345\277\227\350\261\252/image/20251110\347\273\203\344\271\240\344\270\200.png" new file mode 100644 index 0000000000000000000000000000000000000000..45d1613a53a4d4e4bc63f3817f0cbd6b89198ff2 Binary files /dev/null and "b/\350\265\226\345\277\227\350\261\252/image/20251110\347\273\203\344\271\240\344\270\200.png" differ diff --git "a/\350\265\226\345\277\227\350\261\252/image/20251110\347\273\203\344\271\240\344\272\214.png" "b/\350\265\226\345\277\227\350\261\252/image/20251110\347\273\203\344\271\240\344\272\214.png" new file mode 100644 index 0000000000000000000000000000000000000000..4c9532cb57c0bb2d89cbc2eb1334b75c9a3d5e62 Binary files /dev/null and "b/\350\265\226\345\277\227\350\261\252/image/20251110\347\273\203\344\271\240\344\272\214.png" differ diff --git "a/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\270\200.png" "b/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\270\200.png" new file mode 100644 index 0000000000000000000000000000000000000000..a056e7a456f7b51c4f5ec74adf91beb6fb250d17 Binary files /dev/null and "b/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\270\200.png" differ diff --git "a/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\270\211.png" "b/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\270\211.png" new file mode 100644 index 0000000000000000000000000000000000000000..6a86adc3b6baa750f2b10920e97e7fadff78639c Binary files /dev/null and "b/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\270\211.png" differ diff --git "a/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\272\214.png" "b/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\272\214.png" new file mode 100644 index 0000000000000000000000000000000000000000..a741497760d438178cd8107eca50614592f5d140 Binary files /dev/null and "b/\350\265\226\345\277\227\350\261\252/image/20251112\347\273\274\345\220\210\350\256\255\347\273\203\344\272\214.png" differ diff --git "a/\350\265\226\345\277\227\350\261\252/image/20251112\350\256\255\347\273\203\345\233\233.png" "b/\350\265\226\345\277\227\350\261\252/image/20251112\350\256\255\347\273\203\345\233\233.png" new file mode 100644 index 0000000000000000000000000000000000000000..23250ffa2b1f53bb9764c2596b50162a398270b1 Binary files /dev/null and "b/\350\265\226\345\277\227\350\261\252/image/20251112\350\256\255\347\273\203\345\233\233.png" differ diff --git "a/\350\265\265\344\277\212\350\261\252/20251110-JavaScript\344\271\213\345\274\225\345\205\245.md" "b/\350\265\265\344\277\212\350\261\252/20251110-JavaScript\344\271\213\345\274\225\345\205\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..fc2e5763dc6f47eb2df2471c30a7f29f612a35da --- /dev/null +++ "b/\350\265\265\344\277\212\350\261\252/20251110-JavaScript\344\271\213\345\274\225\345\205\245.md" @@ -0,0 +1,82 @@ +## 笔记 + +1. 一、JavaScript 基础认知 + + 1. 什么是 JavaScript? + + - **定义**:一种跨平台、面向对象的脚本语言,主要用于网页交互(前端),也可通过 Node.js 用于后端开发。 + + - **核心作用**: + + - 动态修改网页内容(HTML/CSS) + + - 处理用户交互(点击、输入等) + + - 发送网络请求(AJAX/fetch) + + - 操作浏览器存储(Cookie、LocalStorage) + + 2. 运行环境 + + - 浏览器端:嵌入 HTML 中执行,每个浏览器都有 JavaScript 引擎(如 Chrome 的 V8 引擎)。 + + - 服务器端:通过 Node.js 运行,脱离浏览器独立执行。 + + 3. 如何在 HTML 中引入 JS? + + ```html + + + + + + + + + ``` + + 注意:script 标签可放在 或 末尾,建议放 body 末尾(避免阻塞页面加载)。 + +## 作业 + +1. + +``` + +``` + +2. + +- html文件 + +``` + + + + + 显示明日学院官网 + + + + + + +``` + +- 外部JavaScript文件(showUrl.js) + +``` +// 弹出对话框显示官网地址(alert() 是浏览器内置弹窗方法) +alert("明日学院官网地址:http://www.mingrisoft.com"); +``` + diff --git "a/\350\265\265\344\277\212\350\261\252/20251112-JavaScript\350\257\255\346\263\225\345\237\272\347\241\200.md" "b/\350\265\265\344\277\212\350\261\252/20251112-JavaScript\350\257\255\346\263\225\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..903573b563454d3a0b94365fa0298fcbabd15e9b --- /dev/null +++ "b/\350\265\265\344\277\212\350\261\252/20251112-JavaScript\350\257\255\346\263\225\345\237\272\347\241\200.md" @@ -0,0 +1,156 @@ +## 笔记 + +**一、声明方式 ** + +3 种声明方式: + +```javascript +let a = 10; // 函数级作用域,存在变量提升(不推荐) +let b = 20; // 块级作用域,无变量提升(推荐) +const c = 30; // 块级作用域,常量(值不可修改),必须初始化 +``` + +命名规则:字母、数字、_、$ 组成,不能以数字开头,区分大小写,避免关键字(let、var、if 等) + +二、**运算符** + +- 算术运算符:+、-、*、/、%(取余)、++(自增)、--(自减) + +- 赋值运算符:=、+=、-=、*=、/= + +- 比较运算符:==(值相等)、===(值和类型都相等,推荐)、>、<、>=、<= + +- 逻辑运算符:&&(与)、||(或)、!(非) + +- 三元运算符:条件 ? 表达式1 : 表达式2(简洁的 if-else) + +(2)基本数据类型 + +| 类型 | 描述 | 示例 | +| :-------: | --------------------- | -------------- | +| Number | 数字(整数 / 浮点数 | 123、3.14、NaN | +| String | 字符串(单 / 双引号) | 'hello'、"JS" | +| Boolean | 布尔值(真 / 假) | true、false | +| Undefined | 未定义(声明未赋值) | let x; | +| Null | 空值(主动赋值为空) | let y = null; | +| Symbol | 唯一标识(ES6+) | Symbol('id') | + +**三、转义字符** + +#### 常用转义字符列表 + +| 转义字符 | 描述 | 示例 | 输出结果 | +| -------- | ----------------- | -------------------------------- | --------------------------- | +| `\'` | 单引号 | `console.log('It\'s a cat')` | `It's a cat` | +| `\"` | 双引号 | `console.log("He said \"Hi\"")` | `He said "Hi"` | +| `\\` | 反斜杠本身 | `console.log("Path: C:\\Users")` | `Path: C:\Users` | +| `\n` | 换行符(LF) | `console.log("Line 1\nLine 2")` | Line 1Line 2 | +| `\r` | 回车符(CR) | `console.log("Hello\rWorld")` | `World`(覆盖前半部分) | +| `\t` | 水平制表符(Tab) | `console.log("Name:\tTom")` | `Name: Tom` | +| `\b` | 退格符 | `console.log("abc\bd")` | `abd`(删除前一个字符 `c`) | +| `\f` | 换页符 | 较少使用,用于分页场景 | | +| `\v` | 垂直制表符 | 较少使用,用于垂直对齐 | | + +## 作业 + +p25 + +1. + +```javascript + document.write('珠穆朗玛峰的高度≈8848.86m
'); +``` + +2. + +```javascript +p>文件夹demo路径:

+ +``` + +p28 + +3. + +```javascript + let area = 17100000 + 'km' + '\u00B2'; + document.write(`俄罗斯的国土面积 ≈ ${area}`); +``` + +4. + +```javascript +

个人信息:

+ +``` + + + +p39 + +综合练习1 + +```javascript + +``` + + + +综合练习2 + +```javascript + +``` + +综合练习3 + +```javascript + +``` + diff --git "a/\350\265\265\344\277\212\350\261\252/20251113JavaScript\346\225\260\346\215\256\347\261\273\345\236\213.md" "b/\350\265\265\344\277\212\350\261\252/20251113JavaScript\346\225\260\346\215\256\347\261\273\345\236\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..a76b2e917c0260d2db6dff98a77f8fd6b42d5b6b --- /dev/null +++ "b/\350\265\265\344\277\212\350\261\252/20251113JavaScript\346\225\260\346\215\256\347\261\273\345\236\213.md" @@ -0,0 +1,466 @@ +## 笔记 + +# JavaScript 核心子知识点笔记:typeof、数据类型转换、表达式 + +## 一、typeof 语法与使用规则 + +### 1. 核心作用 + +判断变量 / 值的数据类型,返回一个 **字符串**(表示类型名称),是前端调试和类型判断的基础工具。 + +### 2. 语法格式 + +```javascript +// 语法1:判断变量 +typeof 变量名; + +// 语法2:判断直接值(字面量) +typeof 直接值; +``` + +### 3. 完整返回值对照表(含特殊情况) + +| 被判断的值 / 变量 | typeof 返回结果(字符串) | 说明 | +| ----------------- | ------------------------- | ---------------------------------- | +| 字符串(String) | `"string"` | 含单引号、双引号、模板字符串 | +| 数字(Number) | `"number"` | 整数、小数、`NaN`、`Infinity` | +| 布尔值(Boolean) | `"boolean"` | 仅 `true`/`false` | +| undefined | `"undefined"` | 变量声明未赋值或直接写 `undefined` | +| null | `"object"` | 历史遗留 bug(重点注意!) | +| 对象(Object) | `"object"` | 普通对象、数组、日期对象等 | +| 数组(Array) | `"object"` | 数组本质是 “类对象” 结构 | +| 函数(Function) | `"function"` | 唯一能被 typeof 区分的对象子类型 | +| Symbol | `"symbol"` | ES6+ 唯一标识类型 | +| BigInt | `"bigint"` | ES10+ 大整数类型 | + +### 4. 实用示例(含易错点) + +```javascript +// 1. 基本类型判断(正常情况) +typeof "abc"; // "string" +typeof 123; // "number" +typeof NaN; // "number"(NaN 是“非数字的数字类型”) +typeof true; // "boolean" +typeof undefined; // "undefined" +let x; +typeof x; // "undefined"(变量声明未赋值) + +// 2. 特殊情况(重点记) +typeof null; // "object"(bug,需单独判断 null) +typeof []; // "object"(数组需用 Array.isArray() 判断) +typeof {}; // "object" +typeof function() {}; // "function"(唯一例外的对象类型) + +// 3. 正确判断 null 和数组(补充方法) +let a = null; +a === null; // true(判断 null 必须用 ===) + +let b = [1,2,3]; +Array.isArray(b); // true(专门判断数组的方法) +``` + +### 5. 注意事项 + +- typeof 是 **运算符**,不是函数,无需加括号(`typeof(x)` 也能运行,但非必需)。 + +- 无法区分 `null`、普通对象、数组(需配合其他方法,如 `=== null`、`Array.isArray()`)。 + +- 对未声明的变量使用 typeof 不会报错,返回"undefined"(特殊特性): + + ```javascript + typeof unDeclaredVar; // "undefined"(未声明变量,不报错) + // unDeclaredVar; // 直接访问会报错:ReferenceError + ``` + +## 二、数据类型转换规则(核心重点) + +JS 是弱类型语言,变量类型会**自动转换**(隐式转换),也可通过方法**手动转换**(显式转换),转换核心围绕 “基本类型之间的转换”。 + +### 1. 显式转换(主动控制,推荐使用) + +手动调用内置方法转换,结果可预期,避免隐式转换的陷阱。 + +#### (1)转换为字符串(String) + +| 转换方法 | 示例 | 结果 | +| ---------------- | --------------------------- | ------------- | +| String (值) | String(123)、String(true) | "123"、"true" | +| 变量.toString () | let num=456; num.toString() | "456" | + +- 注意:undefined和null不能用toString()(会报错),需用String(): + + ```javascript + String(undefined); // "undefined" + String(null); // "null" + // undefined.toString(); // 报错:TypeError + ``` + +#### (2)转换为数字(Number) + +| 转换方法 | 示例 | 结果 | +| ----------------------- | --------------------------------------- | -------------------- | +| Number (值) | Number("123")、Number("123abc") | 123、NaN | +| parseInt (字符串,进制) | parseInt("123")、parseInt("123.45") | 123、123(只取整数) | +| parseFloat (字符串) | parseFloat("123.45")、parseFloat("abc") | 123.45、NaN | + +- 关键规则: + + - 字符串纯数字(含正负号、小数点)→ 正常转换(如 `"123.45"` → 123.45)。 + - 字符串含非数字字符 → 转换为 `NaN`(如 `"123abc"` → NaN)。 + - 空字符串 `""`、空格字符串 `" "` → 0(`Number("")` → 0)。 + - `true` → 1,`false` → 0;`undefined` → NaN;`null` → 0。 + +- 示例: + + ```javascript + Number("100"); // 100 + Number("100.5"); // 100.5 + Number("100a"); // NaN + Number(""); // 0 + Number(null); // 0 + Number(undefined); // NaN + + parseInt("123.89"); // 123(忽略小数部分) + parseInt("abc123"); // NaN(非数字开头) + parseFloat("3.1415"); // 3.1415 + ``` + +#### (3)转换为布尔值(Boolean) + +| 转换方法 | 示例 | 结果 | +| ------------ | -------------------------- | ----------- | +| Boolean (值) | Boolean(0)、Boolean("abc") | false、true | + +- 核心规则: + + 只有 6 个值转换为 false( falsy 值),其余全为 true: + + - falsy 值:`0`、`NaN`、`""`(空字符串)、`undefined`、`null`、`false`。 + + - 示例: + + ```javascript + Boolean(0); // false + Boolean(""); // false + Boolean(NaN); // false + Boolean(null); // false + Boolean(undefined); // false + Boolean(" "); // true(空格字符串非空) + Boolean(123); // true + Boolean({}); // true(对象/数组转换为布尔值都是 true) + Boolean([]); // true + ``` + +### 2. 隐式转换(自动触发,需避坑) + +JS 在特定场景下自动转换类型,常见触发场景: + +#### (1)算术运算(`+`、`-`、`*`、`/`、`%`) + +- 规则:除 `+` 外,其他运算符会自动将操作数转为数字。 + +- `+` 运算符:只要有一个操作数是字符串,就会触发**字符串拼接**;否则转为数字相加。 + +- 示例: + + ```javascript + // 非 + 运算符:转为数字运算 + 10 - "5"; // 5("5" → 5) + "12" * 3; // 36("12" → 12) + "10" / "2"; // 5 + "abc" - 2; // NaN("abc" → NaN,NaN 参与运算结果还是 NaN) + + // + 运算符:字符串拼接 vs 数字相加 + "10" + 20; // "1020"(有字符串,拼接) + 10 + true; // 11(true → 1,数字相加) + 10 + null; // 10(null → 0,数字相加) + 10 + undefined; // NaN(undefined → NaN) + ``` + +#### (2)比较运算(`==`、`>`、`<` 等) + +- 规则: + + - `==`(非全等):会先自动转换类型,再比较值(尽量不用,优先用 `===`)。 + - `>`、`<`:会将操作数转为数字再比较。 + +- 示例: + + ```javascript + // == 隐式转换 + 10 == "10"; // true("10" → 10) + 0 == ""; // true("" → 0) + false == 0; // true(false → 0) + null == undefined; // true(特殊规则,无类型转换) + NaN == NaN; // false(NaN 不等于任何值,包括自己) + + // >、< 转换为数字 + "20" > 15; // true("20" → 20) + "abc" > 10; // false("abc" → NaN,NaN 与任何值比较都是 false) + ``` + +#### (3)逻辑运算(`&&`、`||`、`!`) + +- 规则:`!`(非运算)会先将操作数转为布尔值,再取反;`&&`、`||` 会判断操作数的 “真值 / 假值”,返回原始值(而非布尔值)。 + +- 示例: + + ```javascript + !""; // true("" → false,取反为 true) + !0; // true + !"abc"; // false("abc" → true,取反为 false) + + // &&:找第一个假值,无则返回最后一个真值 + "" && "hello"; // ""(第一个假值) + 10 && 20; // 20(无假值,返回最后一个) + + // ||:找第一个真值,无则返回最后一个假值 + "" || "hello"; // "hello"(第一个真值) + 0 || null; // null(无真值,返回最后一个) + ``` + +### 3. 转换总结 + +- 优先使用**显式转换**(`String()`、`Number()`、`Boolean()`),代码更易读。 +- 避免使用 `==`,用 `===`(全等)判断(不转换类型,直接比较值和类型)。 +- 记住 6 个 falsy 值,避免隐式转换踩坑。 + +## 三、表达式(代码执行的基本单元) + +### 1. 定义 + +由**操作数**(变量、字面量、函数调用等)和**运算符**组成的代码片段,最终会计算出一个**结果**(值)。 + +### 2. 表达式分类(按功能) + +#### (1)算术表达式(结果为数字) + +由算术运算符组成,用于计算数值。 + +```javascript +10 + 20 * 3; // 70(先乘后加,遵循运算符优先级) +(10 + 20) * 3; // 90(括号改变优先级) +100 / 25; // 4 +5 % 2; // 1(取余) +``` + +#### (2)字符串表达式(结果为字符串) + +由字符串拼接运算符 `+` 组成。 + +```javascript +"Hello" + " " + "World"; // "Hello World" +let name = "张三"; +"你好," + name; // "你好,张三" +``` + +#### (3)比较表达式(结果为布尔值) + +由比较运算符组成,用于判断条件。 + +```javascript +10 > 5; // true +"123" === 123; // false(类型不同) +age >= 18; // 取决于 age 的值(true/false) +``` + +#### (4)逻辑表达式(结果为真值 / 假值的原始值) + +由逻辑运算符组成,用于组合条件。 + +```javascript +true && false; // false +10 > 5 || 3 > 10; // true +!(age < 18); // 对 age < 18 的结果取反 +``` + +#### (5)赋值表达式(结果为赋值后的值) + +由赋值运算符组成,用于给变量赋值(可链式赋值)。 + +```javascript +let a = 10; // 表达式结果为 10,变量 a 被赋值为 10 +let b = c = 20; // 链式赋值,先给 c 赋 20,再给 b 赋 20,结果为 20 +let x = 5 + 3; // 先计算 5+3=8,再赋值给 x,表达式结果为 8 +``` + +#### (6)函数调用表达式(结果为函数的返回值) + +调用函数时组成的表达式,结果是函数的返回值(无 return 则为 undefined)。 + +```javascript +function add(a, b) { + return a + b; +} +add(10, 20); // 30(表达式结果为 30) +console.log("Hello"); // undefined(console.log 无返回值) +``` + +### 3. 表达式与语句的区别(关键) + +| 特性 | 表达式 | 语句 | +| ------------ | ------------------------- | ------------------------------- | +| 核心功能 | 计算结果 | 执行操作(如声明、循环、判断) | +| 是否有返回值 | 有(必须算出一个值) | 无(或返回 undefined) | +| 示例 | `1+2`、`a=10`、`add(3,4)` | `let a;`、`if(...)`、`for(...)` | + +- 注意:赋值表达式(`a=10`)是表达式(有返回值 10),而变量声明(`let a=10`)是语句(无返回值)。 + +### 4. 运算符优先级(简化版,需牢记) + +表达式中运算符的执行顺序(优先级高的先执行,同优先级从左到右): + +1. 括号 `()` → 最高优先级(优先计算括号内的内容)。 +2. 一元运算符:`!`(非)、`++`(自增)、`--`(自减)、`typeof`。 +3. 算术运算符:`*`(乘)、`/`(除)、`%`(取余) → 高于 `+`(加)、`-`(减)。 +4. 比较运算符:`>`、`<`、`>=`、`<=` → 高于 `==`、`===`、`!=`、`!==`。 +5. 逻辑运算符:`&&`(与) → 高于 `||`(或)。 +6. 赋值运算符:`=`、`+=`、`-=` 等 → 最低优先级。 + +- 示例(优先级验证): + + ```javascript + // 算术优先级:* 高于 + + 2 + 3 * 4; // 14(先算 3*4=12,再算 2+12) + + // 比较优先级高于逻辑 && + 5 > 3 && 10 < 20; // true(先算 5>3 和 10<20,再算 &&) + + // 一元运算符 ! 优先级高 + !10 > 5; // false(先算 !10=false,再算 false>5) + + // 括号改变优先级 + (2 + 3) * 4; // 20(先算括号内 2+3=5) + ``` + + + +## 四、核心易错点总结 + +1. `typeof null` 返回 `"object"`,需用 `=== null` 单独判断。 +2. `NaN` 不等于任何值(包括自己),判断是否为 NaN 需用 `isNaN(值)` 或 `Number.isNaN(值)`(后者更严格)。 +3. 隐式转换中,`+` 既可能是数字相加,也可能是字符串拼接,需注意操作数类型。 +4. 表达式有返回值,语句无返回值,避免混淆(如 `a=10` 是表达式,`let a=10` 是语句)。 +5. 优先级:括号 > 一元运算符 > 算术 > 比较 > 逻辑 > 赋值。 + + + +## 作业: + +p37 + +5. + +```javascript + +``` + +6. + +```javascript + +``` + +7. + +```javascript + +``` + +p54 + +例.3.10 + +```javascript + +``` + +p55 + +综合练习1 + +```javascript + +``` + +综合练习2 + +```html + let year; + let month; + document.write('请选择您的出生年月:'); + document.write(''); + document.write(''); +``` + +综合练习3 + +```javascript +let row; + document.write(''); + document.write(''); + for (row = 1; row <= 100; row++) { + if (row % 10 == 0) { + document.write(``); + document.writeln("") + } + else{ + document.write(``); + } + } + document.write(''); + document.write('
${row}
${row}
'); +``` + diff --git "a/\350\265\265\344\277\212\350\261\252/20251114JavaScript\350\257\255\345\217\245.md" "b/\350\265\265\344\277\212\350\261\252/20251114JavaScript\350\257\255\345\217\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..7f5b5e528c2653b4edf23d2ed0d559f977566dc2 --- /dev/null +++ "b/\350\265\265\344\277\212\350\261\252/20251114JavaScript\350\257\255\345\217\245.md" @@ -0,0 +1,139 @@ +## 作业 + +1.p48 + +```javascript + + +``` + +3. + +``` + + +``` + +4. + +``` + + +``` + +5. + +``` + + +``` + +6. + +``` + + +``` + +7. + +``` + + +``` + diff --git "a/\350\265\265\345\251\211\350\250\200/20251110-Js\351\223\276\346\216\245.md" "b/\350\265\265\345\251\211\350\250\200/20251110-Js\351\223\276\346\216\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..7eef9df6f922545d40fb66b680fb85fef118b773 --- /dev/null +++ "b/\350\265\265\345\251\211\350\250\200/20251110-Js\351\223\276\346\216\245.md" @@ -0,0 +1,73 @@ +## web前端核心技术 + +### web前端框架 + +- react facebook react16 +- vue 尤雨溪 vue3 +- angular2 谷歌 + +### 全栈 = 前端 + 后端 + +- 前端 + - vue3 + - react +- 后端 + - c# asp.net core + - java springboot springcloud springmvc + - python Django + - C/C++ + - 汇编语言 + - 二进制 + - nodejs + - go + - php + - vb + - dephi + - 易语言 + - lisp + - rust + - ruby + - lua + + +## java 在 html 中的应用 + +- 直接嵌入法 +```html + +``` + +- 外链 + - 创建一个js的文件 + - js文件代码使用alert('http://www.mingrisoft.com');(该功能是在页面中弹出一个对话框,对话框显示内容) + - 在html文件中调用JS文件 +```html + +``` + +- 作为标签的属性值使用 + + +## 练习 + +- 输出老子的名言 +- 效果图: +- ![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115153222966.png) + +```html + +``` + +- 输出三明学院的官网地址 +- 效果图: +- ![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115183506808.png) + +```html +alert('http://www.mingrisoft.com'); + + +``` \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251112-js\345\237\272\347\241\200.md" "b/\350\265\265\345\251\211\350\250\200/20251112-js\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..5efce10d6f8e14d65b5f8b0be2222cc147f7e85a --- /dev/null +++ "b/\350\265\265\345\251\211\350\250\200/20251112-js\345\237\272\347\241\200.md" @@ -0,0 +1,235 @@ +## js基础 + +### 数据类型 + +- 数值型 + - 十进制 + - 十六进制 + - 八进制 + - 浮点型数据 + - 特殊值indinity + - 特殊值NaN + +### 字符串型 + +字符串(string)是由0个或多个字符组成的序列,可以包含大小写字母、数字、标点符号或其他字符,也可以包含汉字。 + +js中常用的转义字符及其描述 + +| 转义字符 | 描述 | 转义字符 | 描述 | +| :-----| :-----: | :-----: | -----:| +| \b | 退格 | \v | 垂直制表符 | +| \n | 换行符 | \r | Enter符 | +| \t | 水平制表符,Tab空格 | \\ | 反斜杠 | +| \f | 换页 | \OOO | 八进制整数,范围000--777 | +| \' | 单引号 | \xHH | 十六进制整数,范围00--FF | +| \" | 双引号 | \uhhhh | 十六进制编码的Unicode字符 | + +转义字符\n会产生换行,必须放在pre中: + +```html + +``` + +### 布尔型 + +``` +布尔数据类型只有两个值,即true(真)和false(假) +``` + +### 特殊数据类型 + +- 定义值(undefined) + - 表示变量还没有赋值 +- 空值(null) + - 表示变量被赋予了一个空值 + + +## 常量和变量 + +### 常量 + +``` +常量是指在程序运行过程中保持不变的数据 +``` + +### 变量 + +- 变量的命名 + - 必须以字母或下划线开头,其它字符可以是数字、字母或下划线 + - 变量名不能包含空格或加号、减号等符号 + - 变量名是严格区分大小写的 + - 不能使用JS的关键字作为变量名 + +- JavaScript的关键字 + +| abstract | continue | finally | instanceof | private | this | +| :----- | :-----: | :-----: | :-----:| :-----:| :-----:| +| boolean | default | float | int | public | throw | +| break | do | for | interface | return | typeof | +| byte | double | function | long | short | true | +| case | else | goto | native | static | var | +| catch | extends | implements | new | super | void | +| char | false | import | null | switch | while | +| class | final | in | package | synchroized | with | + +- 变量的声明 + - 所有的JS变量都是由关键字var声明的 +- 变量的赋值 + - 声明变量的同时可以使用等于号对变量进行赋值 +- 变量的类型 + - 可以是数值型、字符串型和布尔型等 + +## 运算符 + +### 算术运算符 + +- JS常见的运算符 + +| 运算符 | 描述 | 示例 | +| :----- | :-----: | :-----: | +| + | 加运算符 | 5+7 //返回值为12 | +| - | 减运算符 | 9-3 //返回值为6 | +| * | 乘运算符 | 5*6 //返回值为30 | +| / | 除运算符 | 12/2 //返回值为6 | +| % | 取模运算符(返回余数) | 7%5 //返回值为2 | +| ++ | 自增运算符 i++(在使用i之后,使i的值加1);++i(在使用i之前,使i的值加1) | i=2;j=i++ //j的值为2,i的值为3。 i=2;j=++i //j的值为3,i的值为3| +| -- | 自减运算符 i--(在使用i之后,使i的值减1);--i(在使用i之前,使i的值减1) | i=7;j=i-- //j的值为7,i的值为6。 i=7;j=--i //j的值为6,i的值为6| + + +- 字符串运算符 + +| 运算符 | 描述 | 示例 | +| :----- | :-----: | :-----: | +| + | 连接两个字符串 | "..+"".." | +| += | 连接两个字符串,并将结果赋给第一个字符串 | var name = "";name += "" | + + +- 比较运算符 + +| 运算符 | 描述 | +| :----- | :-----: | +| < | 小于 | +| > | 大于 | +| <= | 小于或等于 | +| >= | 大于或等于 | +| == | 等于。只根据表面值进行判断,不涉及数据类型 | +| === | 绝对等于。同时根据表面值和数据类型进行判断 | +| != | 不等于。只根据表面值进行判断,不涉及数据类型 | +| !== | 绝对不等于。同时根据表面值和数据类型进行判断 | + +- 赋值运算符 + +| 运算符 | 描述 | 示例 | +| :----- | :-----: | :-----: | +| = | 将右边表达式的值赋给左边的变量 | userName="Tony" | +| += | 将运算符左边的变量加上右边表达式的值赋给左边的变量 | a+=b //相当于a=a+b | +| -= | 将运算符左边的变量减去右边表达式的值赋给左边的变量 | a-=b //相当于a=a-b | +| *= | 将运算符左边的变量乘以右边表达式的值赋给左边的变量 | a*=b //相当于a=a*b | +| /= | 将运算符左边的变量除以右边表达式的值赋给左边的变量 | a/=b //相当于a=a/b | +| %= | 将运算符左边的变量用右边表达式的值求模,并将结果赋给左边的变量 | a%=b //相当于a=a%b | + + +- 逻辑运算符 + +| 运算符 | 描述 | 示例 | +| :----- | :-----: | -----: | +| && | 逻辑与 | a&&b //当a和b都为真时,结果为真,否则为假 | +| 双竖线 | 逻辑或 | a双竖线b //当a为真者b为真时,结果为真,否则为假 | +| ! | 逻辑非 | !a //当a为假时,结果为真,否则为假 | + + +## 练习 + +- 俄罗斯 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115184055749.png) +```html + +``` + +- 计算员工的实际收入 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115184204114.png) +```html + +``` + +- 九阳神功 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115184338016.png) +```html + +``` + +- 路径 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115184630000.png) +```html + +``` + +- 判断天数 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115184729207.png) +```html + +``` + +- 乔丹 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115184838842.png) +```html +

个人信息

+ +``` + +- 珠穆朗马蜂 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115184922444.png) +```html + +``` \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251113-\350\277\220\347\256\227\347\254\246.md" "b/\350\265\265\345\251\211\350\250\200/20251113-\350\277\220\347\256\227\347\254\246.md" new file mode 100644 index 0000000000000000000000000000000000000000..ddd2cac4481e2350aae6f7b25061e5416a7bcd20 --- /dev/null +++ "b/\350\265\265\345\251\211\350\250\200/20251113-\350\277\220\347\256\227\347\254\246.md" @@ -0,0 +1,66 @@ +## 其它运算符 + +- 不同数据类型使用typeof运算符的返回值 + +| 数据类型 | 返回值 | 数据类型 | 返回值 | +| :-----| :-----: | :-----: | -----:| +| 数值 | number | null | object | +| 字符串 | string | 对象 | object | +| 布尔值 | boolean | 函数 | function | +| undefined | undefined | | | + +- js运算符的优先级与结核性 + +| 运算符 | 优先级 | 结合性 | +| :----- | :-----: | -----: | +| .、[]、() | 最高 | 向左结合 | +| ++、--、-、!、delete、new、typeof、void | | 向右结合 | +| *、/、% | | 向左结合 | +| +、- | | 向左结合 | +| <<、>>、>>> | | 向左结合 | +| <、<=、>、>=、in、instanceof | | 向左结合 | +| ==、!=、===、!=== | | 向左结合 | +| & | | 向左结合 | +| ^ | | 向左结合 | +| 单竖线 | 由高到低依次排列 | 向左结合 | +| && | | 向左结合 | +| 双竖线 | | 向左结合 | +| ?: | | 向右结合 | +| = | | 向右结合 | +| *=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、^=、 | | 向右结合 | +| , | 最低 | 向左结合 | + +## 练习 + +- 计算本息合计 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185013771.png) +```html + +``` + +- 计算梯形面积 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185116014.png) +```html + +``` + +- 判断成绩是否及格 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185155126.png) +```html + +``` \ No newline at end of file diff --git "a/\350\265\265\345\251\211\350\250\200/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\350\265\265\345\251\211\350\250\200/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..17d65ab0ac97d814f7e0bc90171fb66ac18b8d23 --- /dev/null +++ "b/\350\265\265\345\251\211\350\250\200/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" @@ -0,0 +1,222 @@ +- 流程控制语句 + - 条件判断语句 + - 简单if语句 + - if……else语句 + - if语句的嵌套 + - switch语句 + - 循环控制语句 + - while循环语句 + - for循环语句 + - 循环语句的嵌套 + - 跳转语句 + - continue语句 + - break语句 + + + +## 练习 + +- 训练1 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185400136.png) +```html + +``` + +- 训练2 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185453842.png) +```html + +``` + + +- 训练3 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185538954.png) +```html + +``` + +- 训练4 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185636991.png) +```html + +``` + +- 训练5 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185732622.png) +```html + +``` + +- 影厅座位图 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185812370.png) +```html + +``` + +- 综合练习1 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185914126.png) +```html + +``` + +- 综合练习2 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115185957120.png) +```html + +``` + +- 综合练习3 +- 效果图: +![](https://gitee.com/zhao-wanyan/picture/raw/master/picgo/20251115190034432.png) +```html + +``` \ No newline at end of file diff --git "a/\351\203\221\344\274\237\346\235\260/20251110-JS\345\255\246\344\271\240.md" "b/\351\203\221\344\274\237\346\235\260/20251110-JS\345\255\246\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..c94bbda55504e3c5d74a6ff1358447b3fa8d6e67 --- /dev/null +++ "b/\351\203\221\344\274\237\346\235\260/20251110-JS\345\255\246\344\271\240.md" @@ -0,0 +1,80 @@ +## 笔记 + +### JavaScript 主要引入方式详解 + +#### 1. 行内引入(嵌入式) + +- 核心形式:将 JS 代码直接嵌入 HTML 标签的属性中,依赖事件触发或特定前缀执行。 + - 事件属性:如 `onclick`、`onmouseover` 等,例如 + + ```html + + ``` + +- **本质**:JS 代码与 HTML 标签完全耦合,属于最原始的引入方式 +- **特点**:仅适合单元素的极简交互,代码无法复用,维护性极差,仅临时测试或极端简单场景使用 + +#### 2. 内部引入(内嵌式) + +- 核心形式:通过` + ``` + +- **特点**:代码与 HTML 分离但同文件,无需额外请求,适合中小型单页应用的独立逻辑,复用性较低 + +- **注意**:内部引入需将` + ``` + +- **特点**:代码与 HTML 完全分离,可复用性极强,支持按需加载和模块化,是大型项目的标准引入方式 + +

作业

+

第一题

+代码: + +```bash + + + + + + Document + + + + + + +``` +![](https://gitee.com/zhengwejie/pic/raw/master/20251116160908411.gif) + +

第二题

+代码: + +```bash + + + + + + 郑伟杰 + + + + + +``` +![](https://gitee.com/zhengwejie/pic/raw/master/20251116161026913.png) \ No newline at end of file diff --git "a/\351\203\221\344\274\237\346\235\260/20251112-js\345\237\272\347\241\200.md" "b/\351\203\221\344\274\237\346\235\260/20251112-js\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..316a7110b50baaa2aa55b33691926c3c9b98d12e --- /dev/null +++ "b/\351\203\221\344\274\237\346\235\260/20251112-js\345\237\272\347\241\200.md" @@ -0,0 +1,114 @@ +## 笔记 + +### JavaScript 主要引入方式详解 + +#### 1. 行内引入(嵌入式) + +- 核心形式:将 JS 代码直接嵌入 HTML 标签的属性中,依赖事件触发或特定前缀执行。 + - 事件属性:如 `onclick`、`onmouseover` 等,例如 + + ```html + + ``` + +- **本质**:JS 代码与 HTML 标签完全耦合,属于最原始的引入方式 +- **特点**:仅适合单元素的极简交互,代码无法复用,维护性极差,仅临时测试或极端简单场景使用 + +#### 2. 内部引入(内嵌式) + +- 核心形式:通过` + ``` + +- **特点**:代码与 HTML 分离但同文件,无需额外请求,适合中小型单页应用的独立逻辑,复用性较低 + +- **注意**:内部引入需将` + ``` + +- **特点**:代码与 HTML 完全分离,可复用性极强,支持按需加载和模块化,是大型项目的标准引入方式 +

作业

+

第一题

+代码: + +```bash + + + + + + Document + + + + + +``` +![](https://gitee.com/zhengwejie/pic/raw/master/20251116161904373.png) + +

第二题

+代码: + +```bash + + + + + + Document + + + + + +``` +![](https://gitee.com/zhengwejie/pic/raw/master/20251116162003211.png) +

第三题

+代码: + +```bash + + + + + + Document + + + + + +``` +![](https://gitee.com/zhengwejie/pic/raw/master/20251116162052758.png) diff --git "a/\351\203\221\344\274\237\346\235\260/20251113-DOM\344\273\213\347\273\215.md" "b/\351\203\221\344\274\237\346\235\260/20251113-DOM\344\273\213\347\273\215.md" new file mode 100644 index 0000000000000000000000000000000000000000..d6e42aef48df723c533025d6b4824a0a09ad3d04 --- /dev/null +++ "b/\351\203\221\344\274\237\346\235\260/20251113-DOM\344\273\213\347\273\215.md" @@ -0,0 +1,142 @@ +## 笔记 + +### DOM 核心概念 + +DOM 全称 **Document Object Model(文档对象模型)**,一句话说透核心:**把 HTML 页面变成 JS 能识别、能操作的 “树状对象体系”,是 JS 与 HTML 交互的唯一桥梁**。 + +### DOM 到底是什么? + +- 本质是 **“结构化的节点对象集合”**: + 1. 先按 HTML 嵌套关系,形成 “树状结构”(父子、兄弟节点层级); + 2. 再把 HTML 里的标签、文字、属性等,都变成 “DOM 节点对象”; + 3. 自带一套操作 API(比如 `getElementById`),让 JS 能 “抓节点、改节点”。 +- 通俗类比:HTML 是 “建筑图纸”(只能看),DOM 是 “可交互的建筑模型”(能拆改、能调整)—— 没有 DOM,JS 就 “看不见” 页面元素,更没法操作。 + +### 核心结构:DOM 树 + +HTML 标签的嵌套关系,在 DOM 里会变成 “树状结构”,每个组成部分都是 “节点”,关键分 3 类: + +| 节点类型 | 作用 | 示例 | +| ---------------- | ------------------------------------ | --------------------------- | +| Document(树根) | 代表整个 HTML 文档,所有操作的起点 | JS 里的 `document` 对象 | +| 元素节点(树枝) | 对应 HTML 标签,是最常操作的对象 | `
`、` + + + + +``` + +##### 对应的 DOM 树(直观层级) + +```plaintext +Document(树根) +└── html(根标签节点) + ├── head(元素节点) + │ └── title(元素节点) + │ └── "我的页面"(文本节点) + └── body(元素节点) + ├── h1(元素节点) + │ └── "标题"(文本节点) + └── select(元素节点,id="mySelect-year") + └── option(元素节点) + └── "1949年"(文本节点) +``` + +### 为什么需要 DOM? + +1. 结构化呈现:把杂乱的 HTML 标签,按层级整理成 “树”,JS 能顺着树快速找节点; +2. 可操作性:让 JS 能修改页面内容、样式、属性(比如改文字、换颜色、加标签); +3. 互动基础:支持监听点击、输入等事件(比如点击按钮弹出内容),是所有页面交互的核心。 + +### 总结 + +**DOM 是包含各类节点(文档节点、元素节点、文本节点等)的树状模型,`getElementBy`等 API 的作用是从 DOM 树中查找并返回「匹配的元素节点」,若找到则返回该元素节点对象,没找到则返回 `null`,然后对其进行对应操作。** +

作业

+

第一题

+代码: + +```bash + + + + + + Document + + +

BMI值:

+ +

结果:

+ + + +``` +![](https://gitee.com/zhengwejie/pic/raw/master/20251116162728190.gif) + +

第一题

+代码: + +```bash + + + + + + Document + + + 选择你的年月份: + + + + + + +``` +![](https://gitee.com/zhengwejie/pic/raw/master/20251116162836563.gif) diff --git "a/\351\203\221\344\274\237\346\235\260/20251114-IF\350\257\255\345\217\245\350\267\237for\345\276\252\347\216\257.md" "b/\351\203\221\344\274\237\346\235\260/20251114-IF\350\257\255\345\217\245\350\267\237for\345\276\252\347\216\257.md" new file mode 100644 index 0000000000000000000000000000000000000000..dc19895c656ca56708c7ea2f45a01d400d3fc2c0 --- /dev/null +++ "b/\351\203\221\344\274\237\346\235\260/20251114-IF\350\257\255\345\217\245\350\267\237for\345\276\252\347\216\257.md" @@ -0,0 +1,273 @@ +## 笔记 + +### 分支结构(根据条件执行不同代码) + +#### if 语句 + +- 作用:满足条件则执行对应代码块,否则跳过 +- 三种形式: + - 单条件:`if (条件) { 满足时执行 }` + - 双条件:`if (条件) { 满足时执行 } else { 不满足时执行 }` + - 多条件:`if (条件1) { 满足1执行 } else if (条件2) { 满足2执行 } else { 都不满足执行 }` +- 关键:条件为布尔值(true 执行,false 跳过),非布尔值会自动隐式转换(如 0→false、非 0 数字→true、空字符串→false) + +#### switch 语句 + +- 作用:根据一个变量 / 表达式的多个可能值,执行对应代码块 +- 核心规则: + - 匹配原则:`===` 严格匹配,`case`必须为一个固定值,不能为条件 + - 必须加 `break`:否则会穿透到下一个 `case` 执行 + - `default`:所有 `case` 都不匹配时执行(可选) + +### 循环结构 + +#### for 循环(已知循环次数) + +- 语法:`for (初始化变量; 循环条件; 变量更新) { 循环体 }` +- 适用场景:数组遍历、固定次数的重复操作(如循环 10 次) +- 关键:循环条件为 true 时继续执行,false 时退出;避免死循环(如条件永远为 true) + +#### while 循环(未知循环次数,先判断后执行) + +- 语法:`while (循环条件) { 循环体; 变量更新 }` +- 特点:先判断条件,不满足则一次都不执行 +- 注意:必须在循环体内更新变量,否则会陷入死循环 + +#### do...while 循环(未知循环次数,先执行后判断) + +- 语法:`do { 循环体; 变量更新 } while (循环条件)` +- 特点:至少执行一次循环体,再判断条件 +- 适用场景:需要确保代码块至少运行一次的场景(如表单验证重试) + +### 循环控制语句(调整循环执行) + +#### break + +- 作用:立即退出当前循环(或 switch 语句),后续代码不再执行 +- 场景:找到目标值后终止循环、满足特定条件时退出 + +#### continue + +- 作用:跳过当前循环的剩余代码,直接进入下一次循环判断 +- 注意:仅跳过当前次,不终止整个循环 + +### 关键注意点 + +1. 代码块 {}:单条语句可省略,但建议始终添加(提高可读性、避免语法错误) +2. 条件判断:优先使用 === 严格相等,避免 == 隐式转换导致的意外结果 +3. 死循环:循环条件必须有终止可能(如 i++、i--),否则会导致页面卡死 +4. 嵌套控制:多层循环 / 分支中,break/continue 仅作用于当前所在层级 + +

作业

+

第一题

+代码: + +```bash + + + + + + Document + + + + + +``` +![](https://gitee.com/zhengwejie/pic/raw/master/20251116163321945.png) +

第二题

+代码: + +```BASH + + + + + + Document + + + + + +``` +

第三题

+代码: + +```bash + + + + + + Document + + + + + +``` + +

第四题

+代码: + +```bash + + + + + + Document + + + + + +``` +

第五题

+代码: + +```bash + + + + + + Document + + + + + +``` +

第六题

+代码: + +```bash + + + + + + Document + + + + + +``` +

第七题

+代码: + +```bash + + + + + + Document + + + + +
+ + + +``` +![](https://gitee.com/zhengwejie/pic/raw/master/20251116164339897.png) \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/20251110-JS\345\237\272\347\241\200.md" "b/\351\203\255\345\260\217\344\270\234/20251110-JS\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..44e35b486e46f1d386b9197e4d693955cc7114d0 --- /dev/null +++ "b/\351\203\255\345\260\217\344\270\234/20251110-JS\345\237\272\347\241\200.md" @@ -0,0 +1,41 @@ +# 笔记 +## 语言 +- JavaScript +- c# (高级语言) +- c/c++ +- java +- Python +- Swift +- Go +- Kotlin +- Rust (低级语言) +- TypeScript +- php +- 等等... +### 高级语言与低级语言的区别 + 高级语言可以比喻成人们更能理解的语言。 + 低级语言可以比喻成机械(硬件)的语言如:101101这种二进制语言。 +## JavaScript嵌入式和引用式 +```html + + + + + +``` +# 练习 +```html + + + + + +``` +示例图:!![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116160916770.png) \ No newline at end of file diff --git "a/\351\203\255\345\260\217\344\270\234/20251112-JS\345\237\272\347\241\200.md" "b/\351\203\255\345\260\217\344\270\234/20251112-JS\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..59ff0b3d4947c4d5f0805d309275ce8188f8733b --- /dev/null +++ "b/\351\203\255\345\260\217\344\270\234/20251112-JS\345\237\272\347\241\200.md" @@ -0,0 +1,105 @@ +# 笔记 +## 1.数据类型 + 1.数值型(number) + - 十进制 + - 十六进制 + - 八进制 + - 浮点型 + - 特殊值(Infinity)——无穷 + - 特殊值(NaN)——产生未知的结果或错误 + 2.字符串型(string) + 3.布尔型 + 3.特殊数据类型 + - 未定义值(undefined)——var a + - 空值(null) + 转义字符 +|转义字符|描述|转义字符|描述| +|--|--|--|--| +|\b|退格|\v|垂直制表符| +|\n|换行符|\r|Enter符| +|\t|水平字表符|两个反斜杠|反斜杠| +|\f|换页|\OOO|八进制整数,范围为000~777| +|\'|单引号|\xHHH|十六进制整数,范围为00~FF| +|\"|双引号|\uhhhh|十六进制编码的Unicode字符| + +## 2.常量和变量 + 1. + + +# 练习 +1. +``` + + +``` +2. +``` + + +``` +示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116161616691.png) + +3. +``` + + +``` +示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116162145598.png) +4. +``` + + +``` +示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116162026662.png) + +5. +``` + + +``` +示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116162044705.png) + +6. +``` + + +``` +示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116162059003.png) diff --git "a/\351\203\255\345\260\217\344\270\234/20251113-\345\276\252\347\216\257\350\257\255\345\217\245.md" "b/\351\203\255\345\260\217\344\270\234/20251113-\345\276\252\347\216\257\350\257\255\345\217\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..4e800f94cf2c3f1f7382beaea91d8cb2c6a12e6e --- /dev/null +++ "b/\351\203\255\345\260\217\344\270\234/20251113-\345\276\252\347\216\257\350\257\255\345\217\245.md" @@ -0,0 +1,90 @@ +# 作业 +1. +``` + + +``` +示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116164300040.png) +2. +``` + +
+ 请选择你的出生年月: + + +
+ + +``` +示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116164613516.gif) +3. +``` + + +``` +示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116164424278.png) +4. +``` + + +``` +示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116164438359.png) diff --git "a/\351\203\255\345\260\217\344\270\234/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\351\203\255\345\260\217\344\270\234/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..d09d49fe80317ec4f922a05a5dd59d186ece91b1 --- /dev/null +++ "b/\351\203\255\345\260\217\344\270\234/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" @@ -0,0 +1,127 @@ +# 作业 +示例图:![](https://gitee.com/gxdo/grade24-class1-note-h5css3/raw/master/郭小东/图片/20251116165147037.png) +1. +``` + + +``` +2. +``` + + +``` +3. +``` + + +``` +4. +``` + + +``` +5. +``` + + +``` +6. +``` + + +``` +7. +``` + + +``` diff --git "a/\351\203\255\345\260\217\344\270\234/\345\233\276\347\211\207/\345\261\217\345\271\225\346\210\252\345\233\276 2025-11-16 160043.png" "b/\351\203\255\345\260\217\344\270\234/\345\233\276\347\211\207/\345\261\217\345\271\225\346\210\252\345\233\276 2025-11-16 160043.png" new file mode 100644 index 0000000000000000000000000000000000000000..12b97f2551ead2e33f5b73340a28f95de4e91c95 Binary files /dev/null and "b/\351\203\255\345\260\217\344\270\234/\345\233\276\347\211\207/\345\261\217\345\271\225\346\210\252\345\233\276 2025-11-16 160043.png" differ diff --git "a/\351\231\206\346\235\250\351\230\263/20251110-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251110-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..1c4af6666f9de349fe32264cc550da4baac2da9f --- /dev/null +++ "b/\351\231\206\346\235\250\351\230\263/20251110-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,19 @@ +### 笔记 + + ## 在页面中直接嵌入JavaScript代码 + + + + ## 链接外部JavaScript文件 + + + ## 作为标签的属性值使用 + 请单击这里 + +### 第一题 + + document.write("千里之行,始于足下。") + +### 第二题 + + alert("http://www.mingrisoft.com"); \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251112-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251112-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..c53b17c435f6df8e80c4f1d09034fa180fc54c92 --- /dev/null +++ "b/\351\231\206\346\235\250\351\230\263/20251112-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,118 @@ +### 字母大小写 + 严格区分字母大小写,在输入语言的关键字、函数名、变量以及其他标识符时,都必须采用正确的大小写形式。 +### 空格和换行 + 换号代表断句,即换号代表一个语句已经结束 +### 结尾的分号 + 不要求必须以分号(;)作为语句的结束标记 +### 注释 + 单行注释 "//" + 多行注释 "/* */" +### 数据类型 + 数值型 number 整数 浮点数 + 字符串型 string + 布尔型 + 特殊数据类型 未定义值 undefined 空值 null + 特殊值 Infinity + 特殊值 NaN +### 转义字符 + \b 退格 + \n 换行符 + \t Tab空格 + \f 换页 + \' 单引号 + \" 双引号 + \v 垂直制表符 + \r Enter符 + \\ 反斜杠 + \OOO 八进制整数 + \xHH 十六进制整数 + \uhhhh 十六进制编码 + +### 输出珠穆朗玛峰的高度 + var b=8848.86 + document.write("珠穆朗玛峰是世界海拔最高的山峰,它的高度约等于"+ b +"m") + +### 输出文件夹的路径 + document.write("E:\\JavaScript\\Code\\demo") + +### 输出珠穆朗玛峰的高度 + var b=17100000 + document.write("俄罗斯是世界上国土面积最大的国家,其面积约为约等于"+ b +"km") + +### 个人信息 +

个人信息

+ + +### 计算本息合计 + + +### 判断考试成绩是否合格 + + +### 计算梯形稻田的面积 + + +### 综合练习1 + + +### 综合练习2 + + +### 综合练习3 + \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251113-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251113-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..d64e73a0edb506fe44ec112d829f44171dac6d83 --- /dev/null +++ "b/\351\231\206\346\235\250\351\230\263/20251113-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,142 @@ +### 算术运算符 + +10 + 5; // 15 加法 +10 - 5; // 5 减法 +10 * 5; // 50 乘法 +10 / 5; // 2 除法 +10 % 3; // 1 取余 +10 ** 2; // 100 指数 + + +### 赋值运算符 + +let x = 10; +x += 5; // x = 15 +x -= 3; // x = 12 +x *= 2; // x = 24 +x /= 4; // x = 6 + + +### 比较运算符 + +// 严格相等(推荐) +5 === 5; // true +5 === "5"; // false + +// 宽松相等 +5 == 5; // true +5 == "5"; // true + +// 其他比较 +5 !== 3; // true +5 > 3; // true +5 <= 10; // true + + +### 逻辑运算符 + +与运算 +true && false; // false +5 > 3 && 2 < 4; // true + +或运算 +true || false; // true +5 > 3 || 2 > 4; // true + +非运算 +!true; // false +!(5 > 3); // false + + +### 其他运算符 + + +三元运算符 +age >= 18 ? "成年" : "未成年"; + +类型运算符 +typeof 42; // "number" +typeof "hello"; // "string" + +空值合并运算符(ES2020) +null ?? "默认值"; // "默认值" + +### 影厅 + .a1{ + background-color: red; + } + .a2{ + background-color: green; + } + document.write("") + for(var i=1;i<=4;i++){ + document.write("") + for(var j=1;j<=10;j++){ + if(i==3 && (j==5 || j==6)){ + document.write("") + continue; + } + document.write("") + } + document.write("") + } + document.write("
已售"+i+"排"+j+"座"+"
") + +### 判断身体质量指数 + document.write("
")
+        var BMI=23;
+        if(BMI<20){
+            document.write("结果:体重过轻")
+        }
+        if(BMI<25 && BMI>=20){
+            document.write("BMI:"+BMI)
+            document.write("\n结果:体重适中")
+            
+        }
+        if(BMI<30 && BMI>=25){
+            document.write("BMI:"+BMI)
+            document.write("\n结果:体重过重")
+        }
+        if(BMI<35 && BMI>=30){
+            document.write("BMI:"+BMI)
+            document.write("\n结果:肥胖")
+        }
+        if(BMI>35){
+            document.write("BMI:"+BMI)
+            document.write("\n结果:非常肥胖")
+        }
+        document.write("
") + +### 循环输出年份和月份 + 请选择你的出生年月 + document.write("") + document.write("") + +### 10行10列的表格 + table{ + border-collapse: collapse; + border: 1px solid #000; + } + td, th { + border: 1px solid #000; + padding: 10px 20px; + } + var num =1 ; + document.write("") + for(var i=1;i<=10;i++){ + document.write("") + for(var j=1;j<=10;j++){ + document.write("") + num++ + } + document.write("") + } + document.write("
"+num+"
") \ No newline at end of file diff --git "a/\351\231\206\346\235\250\351\230\263/20251114-\347\273\203\344\271\240.md" "b/\351\231\206\346\235\250\351\230\263/20251114-\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..5dc711dfbb6b3b3b5bad493ada0058cd6464db10 --- /dev/null +++ "b/\351\231\206\346\235\250\351\230\263/20251114-\347\273\203\344\271\240.md" @@ -0,0 +1,122 @@ +### 最小值 + var n1 = 26; + var n2 = 17; + var n3 = 10; + var n4 = 20; + var n=n1; + if(n>n2){ + n=n2; + } + if(n>n3){ + n=n3; + } + if(n>n4){ + n=n4; + } + document.write("最小值是"+n) + +### 空气污染程度 + var wr=56; + if(wr>0 && wr<=100){ + document.write("空气状态良好") + }else if(wr>100 && wr<=200){ + document.write("空气状态轻度污染") + }else if(wr>200 && wr<=300){ + document.write("空气状态中度污染") + }else if(wr>300){ + document.write("空气状态重度污染") + } + +### 判断当前季节 + var yf=1; + var jj=null; + switch(yf){ + case 1: + jj="冬季" + break; + case 2: + jj="冬季" + break; + case 3: + jj="春季" + break; + case 4: + jj="春季" + break; + case 5: + jj="春季" + break; + case 6: + jj="夏季" + break; + case 7: + jj="夏季" + break; + case 8: + jj="夏季" + break; + case 9: + jj="秋季" + break; + case 10: + jj="秋季" + break; + case 11: + jj="秋季" + break; + case 12: + jj="冬季" + break; + } + document.write("当前的季节是:"+jj) + +### 员工的工资 + document.write("
");
+        var gz=3000;
+        var i=1;
+        document.write("该员工第"+i+"年的工资为"+gz);
+          do{
+            gz+=50;
+            i++;
+            document.write("\n该员工第"+i+"年的工资为"+gz);
+          }while(i<=4);
+          document.write("
"); + +### 鸡兔同笼 + for(var c=0;c<=35;c++){ + var t=35-c; + if((2*c)+(4*t)==94){ + document.write("鸡有"+c+"只,兔有"+t+"只") + continue; + } + } + +### 65倍数的和 + var num=null; + for(var i=1;i<=1000;i++){ + + if(i%65==0){ + num+=i + continue; + } + } + document.write("65的倍数之和为"+num) + +### 办公卡位 + document.write("
")
+      for(var i=1; i<=3; i++){
+        for(var j=1; j<=3; j++){  
+            if(i==1 && j==3){
+                document.write("\n")
+                continue;
+            }else if(i==3 && j==2){
+                continue;
+            }else if(i==2 && j==3){
+                document.write("第"+i+"排第"+j+"个\n")
+            }else{
+                document.write("第"+i+"排第"+j+"个")
+            }
+
+        }
+      }
+      document.write("
") \ No newline at end of file diff --git "a/\351\231\210\346\200\235\345\223\262/20251110.md" "b/\351\231\210\346\200\235\345\223\262/20251110.md" new file mode 100644 index 0000000000000000000000000000000000000000..2b916d54f15eb4f2f9e2a725f4aaca861610295d --- /dev/null +++ "b/\351\231\210\346\200\235\345\223\262/20251110.md" @@ -0,0 +1,31 @@ +## 认识script +1. script(三种排列方式) +- 放在body里最下面(原因:网页先构建后渲染) +- 放在标签内(相当于行内样式) +- 放在外部js文件内(需要引用) +2. 代码 +- script(js祖师爷) + +- alert(弹窗) + +- function(可重复使用的代码块) + +- onclick(事件处理方法) + +## 作业 + +```html + +``` +- 效果图 + - ![](https://gitee.com/fish-ovo_1_0/pig-go/raw/master/image/20251116171346470.png) + +### 输出明日学院的官网地址 +- 代码 + - ```js + \ No newline at end of file diff --git "a/\351\231\210\346\200\235\345\223\262/20251112.md" "b/\351\231\210\346\200\235\345\223\262/20251112.md" new file mode 100644 index 0000000000000000000000000000000000000000..a6d975a14540c3eaa1a66922782156af1f3b63c9 --- /dev/null +++ "b/\351\231\210\346\200\235\345\223\262/20251112.md" @@ -0,0 +1,131 @@ +## 数据类型 + +### 基本数据类型 + - 数值型 number + - 十进制 + - 十六进制 + - 八进制 + - 浮点型数据 + - 传统记数法 + - 1.23 + - 科学计数法 + - 123e-3 + - infinity 无穷 + - NaN 非数值 + - 字符串型 string + - 单引号 + - 双引号 + - 反引号 + - 转义字符 + | 转义字符 | 描述 | 转义字符 | 描述 | + | -------- | ------------------ | -------- | ------------------------- | + | \b | 退格 | \v | 垂直制表符 | + | \n | 换行符 | \r | Enter符 | + | \t | 水平制表符,Tab空格 | `\\` | 反斜杠 | + | \f | 换页 | \OOO | 八进制整数,范围为000~777 | + | \' | 单引号 | \xHH | 十六进制整数,范围为00~FF | + | \" | 双引号 | \uhhhh | 十六进制编码的Unicode字符 | + - 要将其放在`
`格式化文本中才会起作用
+      - 字符串拼接 
+  - 布尔值 boolean
+    - true 
+    - false
+  - 空值 null
+    - 空的或者不存在的值
+  - 未定义值 undefined
+    - 变量还没有赋值
+
+## 常量和变量
+  -  常量
+    - const
+  - 变量
+    - var
+    - let
+  - 变量命名规则
+    - 以字母、下划线、$开头
+    - 不能使用关键字
+    - 区分大小写
+    - 不能使用中文
+    - 不能使用特殊字符
+    - 不能使用数字开头
+
+## 运算符
+
+- 算术运算符
+  - `+ - * / % ++ --`
+  - 优先级
+    - `() -> ** -> * / % -> + - -> ++ --`
+    - 从左到右
+    - 优先级相同,从左到右
+    - () 优先级最高
+- 字符串运算符 
+  -  `+` 连接两个字符
+  -  `+=` 连接两个字符并赋值
+- 比较运算符
+  - `== != > < >= <=`
+  - `==` 比较值是否相等
+  - `===` 比较值和类型是否相等
+  - `!=` 比较值是否不相等
+  - `!==` 比较值和类型是否不相等
+  - `> < >= <=` 比较大小
+- 赋值运算符
+  - `=` 
+  - `+=`
+  - `-=`
+  - `*=`
+  - `/=`
+  - `%=`
+
+## 作业
+
+```html
+
+
+    
+    
+    Document
+
+
+
+    
+
+
+```
+
+![](https://gitee.com/yvnbai/figurebed/raw/master/image/20251112-1.png)
diff --git "a/\351\231\210\346\200\235\345\223\262/20251113.md" "b/\351\231\210\346\200\235\345\223\262/20251113.md"
new file mode 100644
index 0000000000000000000000000000000000000000..690a64c09f74733ac8ce115d426396ab938284f9
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251113.md"
@@ -0,0 +1,151 @@
+## 逻辑运算符
+ - 逻辑与 &&
+   - 两个都为真则为真
+ - 逻辑或 ||
+   - 其中有一个为真则为真
+ - 逻辑非 !
+   - !true
+
+## 条件运算符
+ - 语法
+   - `条件 ? 表达式1 : 表达式2`
+   - 如果条件为真,则执行表达式1,否则执行表达式2
+
+## 其他运算符
+- 逗号运算符
+  - `a = 1, b = 2`
+  - 则结果为最后一个
+- typeof 运算符
+  - 判断数据类型
+    | 数据类型  | 返回值    | 数据类型 | 返回值   |
+    | --------- | --------- | -------- | -------- |
+    | 数值      | number    | null     | objec    |
+    | 字符串    | string    | 对象     | object   |
+    | 布尔值    | object    | 函数     | function |
+    | undefined | undefined | -----    | ----     |
+- new运算符
+  - 对象实例名称=new 对象类型(参数)
+  - 对象实例名称=new 对象类型
+  
+## 表达式
+- 算术表达式
+
+- 逻辑表达式
+
+- 字符串表达式
+
+## 作业
+
+```html
+
+
+
+    
+    
+    Document
+
+
+
+
+
+
+
+
+```
+
+![](https://gitee.com/yvnbai/figurebed/raw/master/image/20251113-1.png)
diff --git "a/\351\231\210\346\200\235\345\223\262/20251114.md" "b/\351\231\210\346\200\235\345\223\262/20251114.md"
new file mode 100644
index 0000000000000000000000000000000000000000..73bdf4c09d00af8a08ad08b677ebe06318947c8f
--- /dev/null
+++ "b/\351\231\210\346\200\235\345\223\262/20251114.md"
@@ -0,0 +1,133 @@
+## 作业
+```html
+
+
+
+    
+    
+    Document
+
+
+
+
+
+
+
+
+
+```
+![20251114-1](D:\a1987\pictures\Screenshots\20251114-1.png)
\ No newline at end of file
diff --git "a/\351\231\210\347\205\234\344\275\263/20251110-JavaScript\345\274\225\347\224\250.md" "b/\351\231\210\347\205\234\344\275\263/20251110-JavaScript\345\274\225\347\224\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..875ba0153e0dcf8c6ff3b0aab7545a1de222e82a
--- /dev/null
+++ "b/\351\231\210\347\205\234\344\275\263/20251110-JavaScript\345\274\225\347\224\250.md"
@@ -0,0 +1,31 @@
+## 笔记
+1. JavaScript外部引用js:
+    - 文件后缀`.js`
+    - ```html
+        
+      ```
+2. JavaScript内部引用
+    - ```html
+        
+      ```
+## 练习
+
+练习1:
+
+```html
+    
+```
+![alt text](image.png)
+
+练习2:
+
+```html
+    
+```
+![alt text](image-1.png)
\ No newline at end of file
diff --git "a/\351\231\210\347\205\234\344\275\263/20251112-\345\237\272\347\241\200.md" "b/\351\231\210\347\205\234\344\275\263/20251112-\345\237\272\347\241\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..2c3ba9be374951773a861d1c35b3f069fd51ad60
--- /dev/null
+++ "b/\351\231\210\347\205\234\344\275\263/20251112-\345\237\272\347\241\200.md"
@@ -0,0 +1,135 @@
+## 笔记
+
+一、 数据类型:
+1. 数值(number)
+    - 浮点
+    - 特殊值(infinity)、(NaN)
+
+2. 字符串(string)
+    - 转义字符
+
+3. 布尔型
+
+4. 特殊数据类型
+    - 未定义值
+    - 空值
+
+二、 常量变和量
+
+三、运算符
+1. 算数运算符
+    - b=a++(先加)
+    - b=--a(先减)
+2. 比较运算符
+    - ==
+    - ===
+3. 赋值运算符
+    - a+=b
+
+
+## 练习
+
+训练1:
+```html
+    
+```
+
+训练2:
+```html
+    
+```
+
+训练3:
+```html
+    
+```
+
+训练4:
+```html
+    
+```
+
+训练5:
+```html
+    
+```
+
+训练6:
+```html
+    
+```
+
+训练7:
+```html
+    
+```
+
+综合练习1:
+```html
+    
+```
+
+综合练习2:
+```html
+        
+```
+
+综合练习3:
+```html
+        
+```
\ No newline at end of file
diff --git "a/\351\231\210\347\276\275\346\230\237/20251110-js\345\210\235\346\255\245.md" "b/\351\231\210\347\276\275\346\230\237/20251110-js\345\210\235\346\255\245.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0b11de755a9e9218288a309f70a54697a34653db
--- /dev/null
+++ "b/\351\231\210\347\276\275\346\230\237/20251110-js\345\210\235\346\255\245.md"
@@ -0,0 +1,89 @@
+# 课堂笔记
+1. 定义
+JavaScript 是一门运行在浏览器中的脚本语言(无需编译,直接执行),专门用于实现网页的交互功能和动态效果。
+2. 核心作用(网页三剑客分工)
+HTML:负责网页的结构(骨架,如按钮、文本框、段落)
+CSS:负责网页的样式(外观,如颜色、大小、布局)
+JS:负责网页的行为(交互,如点击按钮、显示内容、获取路径)
+3. 常见应用场景
+按钮点击事件(如显示内容、清屏、跳转)
+动态修改网页内容 / 样式
+获取用户输入或网页信息(如当前 URL)
+表单验证(如判断输入是否合法)
+三、JS 与 HTML 的结合方式(重点)
+最常用的两种方式,优先掌握「内部脚本」:
+1. 内部脚本(写在 HTML 文件中)
+```html
+
+  
+  
+
+  
+  
+
+```
+
+2. 外部脚本(单独的 .js 文件)
+将 JS 代码写在单独的 .js 文件中(如 index.js),通过 
+
+```
+
+
+# 练习
+第一题
+```html
+
+    
+

+
+ + + + +``` + +第二题 +```html + +
+ +
+ + +``` diff --git "a/\351\231\210\347\276\275\346\230\237/20251112-\345\217\230\351\207\217.md" "b/\351\231\210\347\276\275\346\230\237/20251112-\345\217\230\351\207\217.md" new file mode 100644 index 0000000000000000000000000000000000000000..8b4752ddbf886003e9e4c305f6295021779c56fe --- /dev/null +++ "b/\351\231\210\347\276\275\346\230\237/20251112-\345\217\230\351\207\217.md" @@ -0,0 +1,206 @@ +# 课堂笔记 +1. 变量(Variable)​ +定义:程序运行过程中,值可以被修改的存储容器,用于存储不确定、会变化的数据(如用户输入、计算结果等)。​ +核心特征:可重复赋值,灵活性高。​ +生活类比:一个可反复存放不同物品的盒子。​ +2. 常量(Constant)​ +定义:程序运行过程中,值一旦定义就不能修改的存储容器,用于存储固定不变的数据(如 π 值、固定配置等)。​ +核心特征:不可重复赋值,定义时必须初始化(赋值)。 + +| 对比维度 | 变量(let/var) | 常量(const) | +| ---------- | -------------------------------- | ------------------------------ | +| 赋值次数 | 可多次赋值 | 仅一次(定义时) | +| 初始化要求 | 可选(let/var 可先声明后赋值) | 必须(定义时必须赋值) | +| 作用域 | let:块级;var:函数 / 全局 | 块级 | +| 适用数据 | 变化的数据(如计数器、用户输入) | 固定的数据(如配置项、常量值) | + +1.本地路径 +```html + +
+ +
+ + + +``` + +2.本息合计 +```html + + +
+
+        请输入您的本金
+        请输入利率
+        请输入年限
+        您的本息合计为
+    
+ + + + +
+ + +``` +3.九阳神功 +```html + +
+ +
+ + + +``` + +4.闰年计算 + +```html + +
+ 请输入年份 + + 结果 + + + +
+ + + +``` + + +5.收入计算 + +```html + +
+ 实际收入 + + 实际收入 +
+ + + +``` + + +6.个人信息 +```html + + + + +``` + + +7.土地面积 +```html + + + +``` + +8.珠峰 +```html + + +``` diff --git "a/\351\231\210\347\276\275\346\230\237/20251113-\347\261\273\345\236\213\350\277\224\345\233\236.md" "b/\351\231\210\347\276\275\346\230\237/20251113-\347\261\273\345\236\213\350\277\224\345\233\236.md" new file mode 100644 index 0000000000000000000000000000000000000000..dfda79f86bbc3183cc16f49c8d5b0297639e257e --- /dev/null +++ "b/\351\231\210\347\276\275\346\230\237/20251113-\347\261\273\345\236\213\350\277\224\345\233\236.md" @@ -0,0 +1,190 @@ +# 课堂笔记 +typeof 是一元运算符(非函数),但习惯上归为 “类型返回工具”, + +```html +// 原始类型(除 null 外):返回准确类型 +console.log(typeof "hello"); // "string" +console.log(typeof 123); // "number" +console.log(typeof true); // "boolean" +console.log(typeof undefined); // "undefined" +console.log(typeof Symbol()); // "symbol" +console.log(typeof 123n); // "bigint"(ES2020 新增) + +// 特殊:null 返回 "object" +console.log(typeof null); // "object"(注意:不是 "null") + +// 引用类型(除函数外):返回 "object" +console.log(typeof {}); // "object"(普通对象) +console.log(typeof []); // "object"(数组,无法区分) +console.log(typeof new Date()); // "object"(日期对象,无法区分) + +// 函数:返回 "function" +console.log(typeof function(){}); // "function" +console.log(typeof class {}); // "function"(类本质是函数) +``` + + +# 练习 + +1.65倍数之和 +```html + + + + + +``` + + +2.工位 +```html + +
+
+
第一排第1个
+
第一排第2个
+
第一排第3个
+
+ +
+
第二排第1个
+
第二排第2个
+
第二排第3个
+
+ +
+
第三排第1个
+
第三排第2个
+
第三排第3个
+
+ +
+ + + +``` + +3.电影院 +```html + + + + + + Document + + + + +
+
+
1排1座
+
1排2座
+
1排3座
+
1排4座
+
1排5座
+
1排6座
+
1排7座
+
1排8座
+
1排9座
+
1排10座
+
+ +
+
2排1座
+
2排2座
+
2排3座
+
2排4座
+
2排5座
+
2排6座
+
2排7座
+
2排8座
+
2排9座
+
2排10座
+
+ +
+
3排1座
+
3排2座
+
3排3座
+
3排4座
+
3排5座
+
3排6座
+
3排7座
+
3排8座
+
3排9座
+
3排10座
+
+ +
+
4排1座
+
4排2座
+
4排3座
+
4排4座
+
4排5座
+
4排6座
+
4排7座
+
4排8座
+
4排9座
+
4排10座
+
+
+ 排 + 列 + + + + + + + +``` + + diff --git "a/\351\231\210\347\276\275\346\230\237/20251114 \346\235\241\344\273\266\345\210\244\346\226\255.md" "b/\351\231\210\347\276\275\346\230\237/20251114 \346\235\241\344\273\266\345\210\244\346\226\255.md" new file mode 100644 index 0000000000000000000000000000000000000000..108c2c3bd1ab1bfaca62c9c4002918ef69d76d30 --- /dev/null +++ "b/\351\231\210\347\276\275\346\230\237/20251114 \346\235\241\344\273\266\345\210\244\346\226\255.md" @@ -0,0 +1,303 @@ +# 课堂笔记 +### 一、核心概念:什么是 if 条件判断? + +- **定义**:if 语句是 JavaScript 中最基础的流程控制语句,用于**根据指定条件的真假,执行不同的代码块**(“条件成立就做 A,不成立就做 B”)。 + +- **本质**:判断一个表达式的结果是 “真(true)” 还是 “假(false)”,进而决定代码的执行路径。 + +- **应用场景**:登录验证、数值比较、状态判断等(例如:“如果用户输入密码正确,就跳转首页;否则提示错误”)。 + +### 二、基础语法格式(重点) + +JavaScript 中 if 条件判断有 4 种核心形式,需牢记语法结构和执行逻辑: + +#### 1. 单 if 语句(满足条件才执行) + +**语法**: + +``` +if (条件表达式) { + // 条件为 true 时执行的代码块(代码块可多行) +} +// 无论条件真假,都会执行这里的代码(不属于 if 块) +``` + +**说明**: + +- 条件表达式必须用 () 包裹,括号内结果会被自动转为布尔值(true/false)。 + +- 代码块用 {} 包裹,若只有一行代码,{} 可省略(不推荐,可读性差)。 + +- **布尔转换规则**:以下值会被转为 false(假值),其余为 true(真值): + +- - false、0、""(空字符串)、null、undefined、NaN + +**示例**:判断年龄是否成年 + +``` +let age = 18; +if (age >= 18) { + console.log("已成年,可独立办理业务"); // 条件为 true,执行该代码 +} +console.log("程序结束"); // 无论条件如何,都会执行 +``` + +#### 2. if-else 语句(二选一执行) + +**语法**: + +``` +if (条件表达式) { + // 条件为 true 时执行的代码块 +} else { + // 条件为 false 时执行的代码块 +} +``` + +**核心逻辑**:两个代码块**互斥**,必然执行且仅执行其中一个。 + +**示例**:判断考试是否及格 + +``` +let score = 75; +if (score >= 60) { + console.log("及格啦,继续加油!"); +} else { + console.log("不及格,需要补考~"); +} +``` + +#### 3. if-else if-else 语句(多条件分支) + +**语法**: + +``` +if (条件1) { + // 条件1 为 true 时执行 +} else if (条件2) { + // 条件1 为 false,且条件2 为 true 时执行 +} else if (条件3) { + // 前两个条件都为 false,且条件3 为 true 时执行 +} else { + // 所有条件都为 false 时执行(可选) +} +``` + +**核心逻辑**:从上到下依次判断条件,**只要有一个条件成立,就执行对应的代码块,后续条件不再判断**(“短路执行”)。 + +**示例**:根据分数评级 + +``` +let score = 88; +if (score >= 90) { + console.log("优秀"); +} else if (score >= 80) { + console.log("良好"); // 条件成立,执行后跳过后续判断 +} else if (score >= 60) { + console.log("及格"); +} else { + console.log("不及格"); +} +``` + +#### 4. 嵌套 if 语句(条件嵌套) + +**语法**:在 if/else 代码块内部,再嵌套一个或多个 if 语句,用于处理 “多层条件”。 + +**示例**:判断是否为 VIP 且余额充足 + +``` +let isVIP = true; +let balance = 200; +let goodsPrice = 150; + +if (isVIP) { // 第一层条件:是否为VIP + if (balance >= goodsPrice) { // 第二层条件:余额是否足够 + console.log("VIP用户,余额充足,下单成功!"); + } else { + console.log("VIP用户,但余额不足,无法下单~"); + } +} else { + console.log("非VIP用户,需升级后享受优惠~"); +} +``` + +**注意**:嵌套层级不宜过多(建议不超过 3 层),否则代码可读性变差,可通过后续学习的 “逻辑运算符” 优化。 + +### 三、关键注意事项(避坑指南) + +1. **条件表达式的常见错误**: + +- - 不要误将 =(赋值运算符)当作 ===(全等判断)!例如:if (a = 5) 会把 5 赋值给 a,永远返回 true,导致逻辑错误。 + +- - 尽量使用 ===(全等)而非 ==(相等),避免隐式类型转换的坑(例如:0 == "" 结果为 true,0 === "" 结果为 false)。 + +1. **代码块的** **{}** **不可省略场景**: + +- - 当 if/else 代码块包含多行代码时,必须用 {} 包裹,否则只有第一行代码受条件控制。 + +- - 示例(错误): + +``` +if (score >= 60) + console.log("及格"); + console.log("继续加油"); // 不受条件控制,无论真假都会执行 +``` + +1. **多条件的优先级**: + +- - 多个条件判断时,注意条件的顺序(例如:判断 “大于 80” 应放在 “大于 60” 前面,否则会被覆盖)。 + +- - 示例(错误): + +``` +let score = 85; +if (score >= 60) { // 先判断及格,85满足,执行后跳过后续 + console.log("及格"); +} else if (score >= 80) { + console.log("良好"); // 永远不会执行 +} +``` + +1. **逻辑运算符的结合使用**: + +- - 简单的多条件可通过 &&(且)、||(或)、!(非)简化,减少嵌套。 + +- - 示例:判断 “年龄 18-30 岁之间” + +``` +// 原写法(嵌套) +if (age >= 18) { + if (age <= 30) { + console.log("青年"); + } +} +// 简化写法(&& 运算符) +if (age >= 18 && age <= 30) { + console.log("青年"); +} +``` + +1.鸡兔同笼 +```html + + + + +``` + +2.季节判断 +```html + + + + + + Document + + + +
+ + +
+ + + + + +```` + + +3.空气质量判断 +```html + + + + + + +4.工资 +``` + + + 请输入您的基本工资 + 请输入您的工龄 + 实际工资 + + + + + +``` \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251110-js\345\205\245\351\227\250\347\254\224\350\256\260.md" "b/\351\237\246\344\271\276\345\274\272/20251110-js\345\205\245\351\227\250\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..a095fd53523d419461dd21608ba415b342bf6d62 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251110-js\345\205\245\351\227\250\347\254\224\350\256\260.md" @@ -0,0 +1,26 @@ +## 笔记 +### js代码使用 +```html + + + +``` +1. 使用时可以直接在body里打js,也可以用外部链接的使用js +## 作业 +1. 输出老子名言 +```html + +``` +2. 输出明日学校网址 +```html +内html + + +``` +```js +alert("http://www.mingrisoft.com"); +``` \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251112-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251112-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..8c19ff01c84188491737f36d1b0d619a79d8f0b0 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251112-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" @@ -0,0 +1,210 @@ +##笔记 + - 转义字符让双引号单引号不混乱:"/'包含单引号内容" + + + +```html + + + + + Document + + + + + +``` + + + +```html + + + + + Document + + + + + +``` + + + + +```html + + + + + Document + + + + + +``` + + + + +```html + + + + + Document + + + + + +``` + + + +```html + + + + + Document + + + + + +``` + + + +```html + + + + + Document + + + + + +``` + + + + +```html + + + + + Document + + + + + +``` + + + +```html + + + + + Document + + + + + +``` + + + +```html + + + + + Document + + + + + +``` + + +```html + + + + + Document + + + + + +``` \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251113-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251113-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..c9723140d44e18e7ac224d9615401f1be21bf4d4 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251113-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" @@ -0,0 +1,68 @@ +## 作业练习 + +```html + +``` \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251114-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251114-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..fa4e562cdcbd5de389ae135edba6f837d2dea2a8 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251114-\350\257\276\345\240\202\347\254\224\350\256\260\357\274\213\344\275\234\344\270\232.md" @@ -0,0 +1,103 @@ +# 练习 +代码 +```html + + + + +``` +效果图 +![alt text](screenshots.gif) \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251117-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251117-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..bd5e29910e9f7ea7f5282f94f7d101cd1d607b41 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251117-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,51 @@ +流程控制 +判断 +if +if()...else... +if...else if().. +if...else if()...else +switch...case +循环 +for(let i=0;i<10;i++){} +while +do...while +循环控制 +continue +break +函数 +匿名函数定义 + +let 关键字 = function (){} + +第一种定义方式:传统,原始方式 + +function getNameById(){ + // arguments关键字用于捕获调用函数时传入的参数(实际参数) + console.log(argumeents); +} +箭头函数 + let getNameById = (name,age) =>{ + console.log(name); + console.log(age); + } +定义和调用 +定义可指定形象 +调用的时候可任意指定实参,也可以不指定 +返回值 +有return,则有返回值,而且通常不为undefined +无return,总是私下返回一个undefined +练习1 + +练习2 + \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251119-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251119-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..8c83a9f24e87b42ca211a45dd7158cfdc32779c8 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251119-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,208 @@ +函数 +函数参数 +function 自定义函数名(形参1,形参1,。。。){函数体} +2.函数返回值 + +基本类型(字符串、数字):按值传递,函数内修改不影响外部变量 +引用类型(对象、数组):按引用传递,函数内修改属性 / 元素会影响外部\ +function abs(ooo){ + ooo.name="李四"; +} +const person = {name:"张三"}; +abs(person); +console.log(person.name)//输出李四 +用return语句指定返回值,执行后立即退出函数 +无return时,默认返回undefined +箭头函数可省略,return 和大括号(单表达式场景):const double = x=>2*2 +练习1 + +练习2 + +练习3 + +练习4 + +练习5 + +练习6 + + + + +
+ +练习7 + +练习8 + +练习9 + \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251120-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251120-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..79c6ad1415c4827b41ebb1ea853e2a765db81bd1 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251120-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,225 @@ +JavaScript 内置对象用法总结 +1. Math 对象 +1.1 数学常数 +Math.PI; // 圆周率 π ≈ 3.14159 +Math.E; // 自然常数 e ≈ 2.718 +Math.SQRT2; // 2的平方根 ≈ 1.414 +1.2 取整方法 +Math.round(4.7); // 5 - 四舍五入 +Math.floor(4.7); // 4 - 向下取整 +Math.ceil(4.3); // 5 - 向上取整 +Math.trunc(4.7); // 4 - 去除小数部分 +1.3 随机数生成 +Math.random(); // 0-1之间的随机数 +Math.floor(Math.random() * 100); // 0-99的随机整数 +1.4 最大值最小值 +Math.max(1, 5, 3); // 5 - 返回最大值 +Math.min(1, 5, 3); // 1 - 返回最小值 +1.5 幂和平方根 +Math.pow(2, 3); // 8 - 2的3次方 +Math.sqrt(16); // 4 - 平方根 +Math.cbrt(8); // 2 - 立方根 +1.6 三角函数 +Math.sin(Math.PI / 2); // 1 - 正弦函数 +Math.cos(Math.PI); // -1 - 余弦函数 +Math.tan(Math.PI / 4); // 1 - 正切函数 +2. Date 对象 +2.1 创建日期对象 +new Date(); // 当前时间 +new Date("2024-01-15"); // 指定日期字符串 +new Date(2024, 0, 15); // 指定年月日(月份0-11) +2.2 获取日期时间 +const now = new Date(); +now.getFullYear(); // 2024 - 年份 +now.getMonth(); // 0 - 月份(0-11) +now.getDate(); // 15 - 日期(1-31) +now.getDay(); // 1 - 星期(0-6) +now.getHours(); // 10 - 小时(0-23) +now.getMinutes(); // 30 - 分钟(0-59) +2.3 设置日期时间 +const date = new Date(); +date.setFullYear(2025); // 设置年份 +date.setMonth(5); // 设置月份(0-11) +date.setDate(20); // 设置日期 +date.setHours(15, 30, 0); // 设置小时、分钟、秒 +2.4 日期格式化 +const now = new Date(); +now.toString(); // "Mon Jan 15 2024 10:30:25 GMT+0800" +now.toDateString(); // "Mon Jan 15 2024" +now.toTimeString(); // "10:30:25 GMT+0800" +now.toLocaleString(); // "2024/1/15 10:30:25" +2.5 时间戳 +const now = new Date(); +now.getTime(); // 1705309825123 - 毫秒时间戳 +Date.now(); // 1705309825123 - 当前时间戳 +2.6 日期计算 +const date1 = new Date("2024-01-01"); +const date2 = new Date("2024-01-15"); +const diff = date2 - date1; // 1209600000 - 毫秒差 +const days = diff / (1000 * 60 * 60 * 24); // 14 - 天数差 +3. Event 对象 +3.1 事件监听 +// 添加事件监听 +element.addEventListener("click", function (event) { + console.log("元素被点击了"); +}); + +// 移除事件监听 +function handleClick(event) { + console.log("点击事件"); +} +element.removeEventListener("click", handleClick); +3.2 事件对象属性 +element.addEventListener("click", function (e) { + e.target; // 触发事件的元素 + e.currentTarget; // 绑定事件的元素 + e.type; // "click" - 事件类型 + e.clientX; // 50 - 鼠标X坐标 + e.clientY; // 100 - 鼠标Y坐标 + e.key; // "Enter" - 按键名称 +}); +3.3 阻止默认行为 +// 阻止链接跳转 +link.addEventListener("click", function (e) { + e.preventDefault(); + console.log("阻止了默认跳转行为"); +}); + +// 阻止表单提交 +form.addEventListener("submit", function (e) { + e.preventDefault(); + console.log("阻止了表单提交"); +}); +3.4 阻止事件冒泡 +child.addEventListener("click", function (e) { + e.stopPropagation(); + console.log("子元素点击,阻止冒泡到父元素"); +}); + +parent.addEventListener("click", function () { + console.log("父元素点击"); // 不会执行 +}); +3.5 鼠标事件 +element.addEventListener("click", function (e) { + console.log("单击事件"); +}); + +element.addEventListener("dblclick", function (e) { + console.log("双击事件"); +}); + +element.addEventListener("mouseover", function (e) { + console.log("鼠标移入"); +}); + +element.addEventListener("mouseout", function (e) { + console.log("鼠标移出"); +}); +3.6 键盘事件 +document.addEventListener("keydown", function (e) { + console.log(`按下按键: ${e.key}, 键码: ${e.keyCode}`); +}); + +document.addEventListener("keyup", function (e) { + console.log(`释放按键: ${e.key}`); +}); +3.7 表单事件 +input.addEventListener("focus", function (e) { + console.log("输入框获得焦点"); +}); + +input.addEventListener("blur", function (e) { + console.log("输入框失去焦点"); +}); + +input.addEventListener("input", function (e) { + console.log("输入内容:", e.target.value); +}); + +input.addEventListener("change", function (e) { + console.log("内容改变:", e.target.value); +}); +3.8 事件委托 +// 使用事件委托处理动态元素 +list.addEventListener("click", function (e) { + if (e.target.tagName === "LI") { + console.log("点击了列表项:", e.target.textContent); + } +}); +训练 1~3 + +综合练习 + \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251121-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251121-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..afaecc108d38bf3e06a63604e3e03e2c67c470b4 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251121-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,92 @@ +JavaScript 数组用法总结 +1. 创建数组 +1.1 字面量创建 +const arr = [1, 2, 3, 4, 5] +1.2 构造函数创建 +const arr = new Array(1, 2, 3) +1.3 创建空数组 +const empty = [] +const withSize = new Array(5) // 创建长度为5的空数组 +2. 访问和修改元素 +2.1 访问元素 +const arr = ['a', 'b', 'c'] +console.log(arr[0]) // 'a' - 访问第一个元素 +2.2 修改元素 +arr[1] = 'x' // ['a', 'x', 'c'] +2.3 数组长度 +console.log(arr.length) // 3 +3. 添加和删除元素 +3.1 末尾添加(push) +arr.push('d') // ['a', 'b', 'c', 'd'] +3.2 末尾删除(pop) +arr.pop() // ['a', 'b'] - 返回删除的元素 +3.3 开头添加(unshift) +arr.unshift('z') // ['z', 'a', 'b', 'c'] +3.4 开头删除(shift) +arr.shift() // ['a', 'b', 'c'] - 返回删除的元素 +4. 数组遍历 +4.1 for循环 +for (let i = 0; i < arr.length; i++) { + console.log(arr[i]) +} +4.2 forEach方法 +arr.forEach(item => console.log(item)) +4.3 for...of循环 +for (const item of arr) { + console.log(item) +} +5. 数组转换方法 +5.1 map - 映射新数组 +const doubled = [1, 2, 3].map(x => x * 2) // [2, 4, 6] +5.2 filter - 过滤元素 +const evens = [1, 2, 3, 4].filter(x => x % 2 === 0) // [2, 4] +5.3 reduce - 累计计算 +const sum = [1, 2, 3].reduce((acc, cur) => acc + cur, 0) // 6 +6. 查找和判断 +6.1 find - 查找元素 +const found = [1, 2, 3].find(x => x > 1) // 2 +6.2 includes - 包含检查 +const hasTwo = [1, 2, 3].includes(2) // true +6.3 indexOf - 查找索引 +const index = [1, 2, 3].indexOf(2) // 1 +7. 数组操作 +7.1 slice - 切片 +const arr = [1, 2, 3, 4, 5] +const part = arr.slice(1, 3) // [2, 3] - 不改变原数组 +7.2 splice - 删除/添加 +arr.splice(1, 2, 'a', 'b') // 从索引1删除2个元素,添加'a','b' +7.3 concat - 合并数组 +const newArr = [1, 2].concat([3, 4]) // [1, 2, 3, 4] +8. 排序和反转 +8.1 sort - 排序 +const sorted = [3, 1, 2].sort() // [1, 2, 3] +8.2 reverse - 反转 +const reversed = [1, 2, 3].reverse() // [3, 2, 1] +9. 数组判断 +9.1 Array.isArray +Array.isArray([1, 2, 3]) // true +Array.isArray('hello') // false +9.2 every - 所有元素满足条件 +const allPositive = [1, 2, 3].every(x => x > 0) // true +9.3 some - 至少一个元素满足条件 +const hasNegative = [1, -2, 3].some(x => x < 0) // true +10. 字符串转换 +10.1 join - 数组转字符串 +const str = ['a', 'b', 'c'].join('-') // 'a-b-c' +10.2 split - 字符串转数组 +const arr = 'a,b,c'.split(',') // ['a', 'b', 'c'] +11. 其他实用方法 +11.1 fill - 填充数组 +const filled = new Array(3).fill(0) // [0, 0, 0] +11.2 flat - 数组扁平化 +const flattened = [1, [2, 3]].flat() // [1, 2, 3] +11.3 findIndex - 查找索引 +const index = [1, 2, 3].findIndex(x => x > 1) // 1 +12. 数组解构 +12.1 基本解构 +const [first, second] = [1, 2, 3] // first=1, second=2 +12.2 跳过元素 +const [first, , third] = [1, 2, 3] // first=1, third=3 +12.3 剩余元素 +const [first, ...rest] = [1, 2, 3, 4] // first=1, rest=[2,3,4] +Gitee - 基于 Git 的代码托管和研发协作平台 \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251124-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251124-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..d07c5c52c9b4ee313454526e46bccfabac5cd33b --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251124-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,449 @@ +String 的笔记 +一、核心概念梳理 +比较方式 关键字 / 方法 作用 适用场景 +引用比较 == 比较对象在堆中的地址 判断两个变量是否指向同一对象 +值比较 equals() 比较字符串的实际内容 判断字符串内容是否相同 +忽略大小写值比较 equalsIgnoreCase() 内容比较,忽略大小写 如验证码、用户名比较 +自然顺序比较 compareTo() 按字典序比较,返回 int 排序、大小判断 +二、关键原理补充 +字符串常量池: +直接赋值的字符串(如 String s1 = "abc")会存入常量池,相同值的字符串复用同一对象; +new String("abc") 会在堆中创建新对象,即使值相同,地址也不同。 +equals() 底层: +String 重写了 Object 的 equals(),先判断地址,再逐字符比较内容。 +compareTo() 规则: +返回 0:内容相同; +返回负数:当前字符串 < 参数字符串; +返回正数:当前字符串 > 参数字符串; +(按字符的 Unicode 编码逐位比较,第一个不同字符的差值即为返回值) +三、完整代码示例 +运行 +public class StringCompareDemo { + public static void main(String[] args) { + // 1. 基础场景:常量池 vs 堆对象 + String s1 = "Java"; // 常量池 + String s2 = "Java"; // 复用常量池对象 + String s3 = new String("Java"); // 堆新对象 + String s4 = new String("Java"); // 堆另一个新对象 + + // 引用比较 (==) + System.out.println("1. 引用比较 (==):"); + System.out.println("s1 == s2: " + (s1 == s2)); // true(同一常量池对象) + System.out.println("s1 == s3: " + (s1 == s3)); // false(地址不同) + System.out.println("s3 == s4: " + (s3 == s4)); // false(两个堆对象) + + // 2. 值比较 (equals()) + System.out.println("\n2. 值比较 (equals()):"); + System.out.println("s1.equals(s2): " + s1.equals(s2)); // true + System.out.println("s1.equals(s3): " + s1.equals(s3)); // true + System.out.println("s3.equals(s4): " + s3.equals(s4)); // true + + // 3. 忽略大小写比较 (equalsIgnoreCase()) + String s5 = "java"; + System.out.println("\n3. 忽略大小写比较:"); + System.out.println("s1.equals(s5): " + s1.equals(s5)); // false + System.out.println("s1.equalsIgnoreCase(s5): " + s1.equalsIgnoreCase(s5)); // true + + // 4. 字典序比较 (compareTo()) + String s6 = "C++"; + String s7 = "Python"; + String s8 = "Java"; + System.out.println("\n4. 字典序比较 (compareTo()):"); + System.out.println("s1.compareTo(s6): " + s1.compareTo(s6)); // 74-67=7(J的Unicode比C大7) + System.out.println("s1.compareTo(s7): " + s1.compareTo(s7)); // 74-80=-6(J比P小6) + System.out.println("s1.compareTo(s8): " + s1.compareTo(s8)); // 0(内容相同) + + // 5. 特殊场景:空字符串/Null + String s9 = ""; + String s10 = null; + System.out.println("\n5. 特殊场景:"); + // 空字符串equals空字符串:true + System.out.println("s9.equals(\"\"): " + s9.equals("")); + // 避免NullPointerException:先判断非空 + System.out.println("s10 == null ? " + (s10 == null)); + // System.out.println(s10.equals(s9)); // 会抛出NullPointerException + } +} +四、输出结果 +plaintext + +引用比较 (==): s1 == s2: true s1 == s3: false s3 == s4: false + +值比较 (equals()): s1.equals(s2): true s1.equals(s3): true s3.equals(s4): true + +忽略大小写比较: s1.equals(s5): false s1.equalsIgnoreCase(s5): true + +字典序比较 (compareTo()): s1.compareTo(s6): 7 s1.compareTo(s7): -6 s1.compareTo(s8): 0 + +特殊场景: + +s9.equals(""): true +s10 == null ? true +五、避坑指南 +避免用 == 比较字符串内容:除非明确要判断是否为同一对象; +Null 安全:调用 equals() 前,确保调用方非 null(或用 Objects.equals(a, b)); +运行 +// 安全写法:避免NullPointerException +System.out.println(Objects.equals(s10, s9)); // false +常量池优化:String.intern() 可将堆字符串加入常量池,复用对象: +java +运行 +String s3 = new String("Java").intern(); +System.out.println(s1 == s3); // true +总结 +比较内容:优先用 equals()(忽略大小写用 equalsIgnoreCase()); +比较地址:用 ==(仅特殊场景需要); +排序 / 大小:用 compareTo(); +空值处理:注意 Null 安全,推荐 Objects.equals()。 +练习 + + + + 手机品牌销量排名 (Top 5) + + + + +
+ + + +练习2 ,3,4,5 + let aug = Array("星期日","星期一","星期二","星期三","星期四","星期五","星期天") + let abc = new Date(); + let aaa = abc.getDay(); + let bbb = aug[aaa]; + document.write(`今天的日期是${bbb}`); + + let arr = new Array(5,7,6,3,9,2); + arr.sort(); + console.log(arr); + console.log(arr[5]); + + let aug = new Array(1,2,3,4,5,6); + let aaa = aug.slice(1,5); + console.log(aaa); + + let arr = new Array("长春", "昌图西", "铁岭西", "沈阳北", "绥中北", "北京"); + document.write("途径站:" + arr); + let aaa = arr.reverse(); + document.write("
反向站:"+aaa); +练习6,7,8,9,10,11,12 + +练习13 + + + +
+ + + + +
+ 对应字母: +
+
+ + +练习14 + + + +
+

用户注册

+
+ + +
+
+ + +
+
+ +
+
+ + \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251126-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251126-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..ce668056fc04fb6fdd9a1cd1a06704a368d38d68 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251126-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,123 @@ +笔记 +正则表达式 +正则表达式描述了一种字符串的匹配模式,即通过使用一系列普通字符串和特殊字符串来构建能够明确描述文本字符串的匹配模式,可以用来检查一个字符串是否含有某个字符串、将匹配的字符串替换或者从某个字符串中去除某个符合条件的字符串等。 +正则表达式基本结构 + /匹配对象的模式/ +正则表达式的作用 +1. 测试字符串的某个模式 +2. 替换文本 +3. 根据模式匹配 +正则表达式语法 +书130~132 + +练习 +示例图: + +练习1 + //训练1 + let books = new Array("《雪山飞狐》", "《连城诀》", "《天龙八部》", "《射雕英雄传》", "《鹿鼎记》", "《笑傲江湖》", "《书剑恩仇录》", "《神雕侠侣》", "《倚天屠龙记》", "《碧血剑》"); + let fourBookName = ""; + for (let i = 0; i < books.length - 1; i++) { + if (books[i].length === 6) { + fourBookName += books[i] + ""; + } + } + document.write("4字小说:" + fourBookName + '
'); + +练习2 + //训练2 + let mobileNumber = new Array("1330431****", "1567766****", "1304316****", "1526567****", "139****0431"); + let number0431 = ""; + for (let i = 0; i < mobileNumber.length; i++) { + if (mobileNumber[i].includes("0431")) { + number0431 += mobileNumber[i] + "、"; + } + } + document.write(`电话号包含0431有:${number0431}
`); + +练习3 + //训练3 + let qqEmail = ["4006****66@qq.com", "1234****45@qq.com", "4567****89@qq.com"]; + let getEmail = ""; + for (let i = 0; i < qqEmail.length; i++) { + if (qqEmail[i].substr(0, 4) == "4006") { + getEmail += qqEmail[i] + " "; + } + } + document.write(`获取到的QQ邮箱:${getEmail}
`); + + +综合练习1 + //综合练习1 + function isEmailValid(email) { + // 判断是否包含@,且@的位置不在开头和结尾 + let atIndex = email.indexOf('@'); + if (atIndex === -1 || atIndex === 0 || atIndex === email.length - 1) { + return false; + } + + // 判断@之后是否包含.,且.不在@的下一位、不在结尾 + let dotIndexAfterAt = email.indexOf('.', atIndex + 1); + if (dotIndexAfterAt === -1 || dotIndexAfterAt === atIndex + 1 || dotIndexAfterAt === email.length - 1) { + return false; + } + + return true; + } + + // 测试abc@sina.com + let testEmail = "abc@sina.com"; + if (isEmailValid(testEmail) === true) { + // alert(`注册邮箱符合要求`); + } else { + alert(`注册邮箱不符合要求`); + } +综合练习2 + //综合练习2 + function randomNum(Num) { + //定义需要的字符 + let Number = "0123456789ABCDEFG"; + // 用split拆分为字符数 组 + let splitNumber = Number.split(""); + let result = ""; + for (let i = 0; i < Num; i++) { + let randomIndex = Math.floor(Math.random() * splitNumber.length) + result += splitNumber[randomIndex]; + } + alert(result); + } + randomNum(6); +综合练习3 + //综合练习3 + function formatNumber(num) { + //方法1 + // const numStr = num.toString(); + // let reversed = numStr.split('').reverse().join(''); // 反转字符串:"66952631" + // let result = []; + + // // 每3位分割 + // for (let i = 0; i < reversed.length; i += 3) { + // result.push(reversed.slice(i, i + 3)); // ["669", "526", "31"] + // } + + // // 拼接逗号后反转回原顺序 + // return result.join(',').split('').reverse().join(''); // "13,625,966" + + //方法2 + // return new Intl.NumberFormat('en-US').format(num); + + //方法3 + let newStr = ""; + let numStr = num.toString(); + let d = 0; + for (let i = numStr.length - 1; i >= 0; i--) { + newStr = numStr[i] + newStr; + d++ + if (i != 0 && d % 3 == 0){ + newStr = "," + newStr; + } + } + return newStr; + } + document.write(`效果:${formatNumber(13625966)}`); +Gitee - 基于 Git 的代码托管和研发协作平台 \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251127-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251127-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..b569c6ea3cc0414745ef53a1a3c4a76a8089644d --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251127-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,370 @@ +JavaScript 异常处理和程序调试总结 +异常处理基础 +try-catch 语句 +try { + // 可能出错的代码 + const result = someUndefinedVariable + 1; +} catch (error) { + // 错误处理 + console.log("发生错误:", error.message); +} +try-catch-finally 语句 +try { + console.log("尝试执行代码"); + throw new Error("自定义错误"); +} catch (error) { + console.log("捕获错误:", error.message); +} finally { + console.log("无论是否出错都会执行"); +} +错误类型 +Error - 基本错误类型 +try { + throw new Error("这是一个错误"); +} catch (error) { + console.log(error.name); // 'Error' + console.log(error.message); // '这是一个错误' +} +TypeError - 类型错误 +try { + const obj = null; + obj.someMethod(); // 尝试调用null的方法 +} catch (error) { + console.log(error.name); // 'TypeError' +} +ReferenceError - 引用错误 +try { + console.log(undefinedVariable); // 未定义变量 +} catch (error) { + console.log(error.name); // 'ReferenceError' +} +SyntaxError - 语法错误 +try { + eval("const 123abc = 1;"); // 无效的变量名 +} catch (error) { + console.log(error.name); // 'SyntaxError' +} +RangeError - 范围错误 +try { + const arr = new Array(-1); // 无效的数组长度 +} catch (error) { + console.log(error.name); // 'RangeError' +} +URIError - URI 错误 +try { + decodeURIComponent("%"); // 无效的URI编码 +} catch (error) { + console.log(error.name); // 'URIError' +} +自定义错误 +创建自定义错误类 +class ValidationError extends Error { + constructor(message, field) { + super(message); + this.name = "ValidationError"; + this.field = field; + } +} + +try { + throw new ValidationError("邮箱格式不正确", "email"); +} catch (error) { + console.log(`${error.name}: ${error.message} (字段: ${error.field})`); +} +使用自定义错误 +function validateEmail(email) { + if (!email.includes("@")) { + throw new ValidationError("无效的邮箱地址", "email"); + } + return true; +} + +try { + validateEmail("invalid-email"); +} catch (error) { + if (error instanceof ValidationError) { + console.log(`验证错误: ${error.message}`); + } +} +错误处理模式 +条件判断预防错误 +// 不好的做法 +function getLength(str) { + return str.length; // 如果str为null会出错 +} + +// 好的做法 +function getLengthSafe(str) { + if (str && typeof str === "string") { + return str.length; + } + return 0; +} +可选链操作符 +const user = { + profile: { + name: "John", + }, +}; + +// 传统方式 +const userName = user && user.profile && user.profile.name; + +// 可选链方式 +const userNameSafe = user?.profile?.name; +console.log(userNameSafe); // 'John' + +// 即使属性不存在也不会报错 +const userAge = user?.profile?.age; +console.log(userAge); // undefined +空值合并运算符 +const input = null; +const value = input ?? "默认值"; +console.log(value); // '默认值' + +const count = 0; +const result = count ?? 100; +console.log(result); // 0 (0不是null或undefined) +调试方法 +console 调试方法 +// 基本日志 +console.log("普通日志信息"); + +// 警告信息 +console.warn("警告信息"); + +// 错误信息 +console.error("错误信息"); + +// 信息分组 +console.group("用户信息"); +console.log("姓名: John"); +console.log("年龄: 30"); +console.groupEnd(); + +// 表格显示 +const users = [ + { name: "John", age: 30 }, + { name: "Jane", age: 25 }, +]; +console.table(users); + +// 计时功能 +console.time("操作计时"); +// 执行一些操作 +for (let i = 0; i < 1000000; i++) {} +console.timeEnd("操作计时"); // 操作计时: 2.345ms +debugger 语句 +function complexCalculation(a, b) { + debugger; // 执行到这里会暂停 + const result = a * b; + return result; +} + +const answer = complexCalculation(5, 10); +console.log(answer); +堆栈跟踪 +function functionA() { + functionB(); +} + +function functionB() { + functionC(); +} + +function functionC() { + console.trace("调用堆栈跟踪"); // 显示调用堆栈 +} + +functionA(); +异步错误处理 +Promise 错误处理 +fetch("/api/data") + .then((response) => response.json()) + .then((data) => console.log(data)) + .catch((error) => console.error("请求失败:", error)); +async/await 错误处理 +async function fetchData() { + try { + const response = await fetch("/api/data"); + const data = await response.json(); + return data; + } catch (error) { + console.error("获取数据失败:", error); + throw error; // 重新抛出错误 + } +} + +// 调用async函数 +fetchData().catch((error) => { + console.log("外部错误处理:", error); +}); +Promise.all 错误处理 +const promises = [ + fetch("/api/users"), + fetch("/api/posts"), + fetch("/api/comments"), +]; + +Promise.all(promises.map((p) => p.catch((e) => e))).then((results) => { + results.forEach((result, index) => { + if (result instanceof Error) { + console.log(`请求 ${index} 失败:`, result.message); + } else { + console.log(`请求 ${index} 成功`); + } + }); +}); +全局错误处理 +window.onerror +window.onerror = function (message, source, lineno, colno, error) { + console.log("全局错误:", message); + console.log("错误文件:", source); + console.log("错误位置:", lineno, ":", colno); + return true; // 阻止浏览器默认错误处理 +}; +unhandledrejection 事件 +window.addEventListener("unhandledrejection", function (event) { + console.log("未处理的Promise拒绝:", event.reason); + event.preventDefault(); // 阻止浏览器默认错误提示 +}); +性能调试 +性能测量 +// 使用 performance API +performance.mark("start"); + +// 执行需要测量的代码 +for (let i = 0; i < 1000000; i++) {} + +performance.mark("end"); +performance.measure("循环执行时间", "start", "end"); + +const measure = performance.getEntriesByName("循环执行时间")[0]; +console.log(`执行时间: ${measure.duration}ms`); +内存使用检查 +// 检查内存使用情况 +const memory = performance.memory; +console.log("已使用内存:", memory.usedJSHeapSize); +console.log("内存限制:", memory.jsHeapSizeLimit); +console.log("总堆大小:", memory.totalJSHeapSize); +最佳实践 +具体的错误信息 +// 不好的做法 +throw new Error("操作失败"); + +// 好的做法 +throw new Error("用户注册失败: 邮箱已被使用"); +适当的错误层级 +function processUserData(userData) { + try { + validateUserData(userData); + saveToDatabase(userData); + } catch (error) { + if (error instanceof ValidationError) { + // 处理验证错误 + showUserError(error.message); + } else { + // 处理系统错误 + logSystemError(error); + showGenericError(); + } + } +} +错误日志记录 +function logError(error, context = {}) { + const errorLog = { + timestamp: new Date().toISOString(), + message: error.message, + stack: error.stack, + type: error.name, + context: context, + }; + + // 发送到错误监控服务 + sendToErrorService(errorLog); + + // 开发环境下在控制台显示 + if (process.env.NODE_ENV === "development") { + console.error("错误详情:", errorLog); + } +} +训练 + +效果图 + + +综合 + \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251128-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251128-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..b58ad727359eab56de07e663b19b684d2e239187 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251128-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,456 @@ +JavaScript 异常处理与程序调试笔记 +一、JavaScript 异常处理核心 +异常的定义与类型 +本质:程序执行时偏离预期逻辑的意外事件,未处理会导致程序终止或产生错误输出。 +核心价值:增强程序健壮性(容错)、提升错误可排查性、优化用户体验。 +JS 常见异常类型(基于 Error 类派生): +异常类型 +触发场景 示例 +SyntaxError(语法错误) +代码违反 JS 语法规则(编译期报错) +let a = 10; const a = 20;(重复声明) +ReferenceError(引用错误) +访问未声明的变量 / 函数 / 属性 +console.log(undefVar); +TypeError(类型错误) +操作不符合变量类型要求 +const str = '123'; str.push(4); +RangeError(范围错误) +数值超出有效范围 +[].length = -1;(数组长度为负数) +URIError(URI 错误) +encodeURI/decodeURI 处理无效 URI 时 +decodeURI('%');(不完整的编码字符) +自定义异常 +业务逻辑错误(如参数非法、接口请求失败) +用户 ID 为空、登录态失效 +异常处理基本原则 +不滥用捕获:仅捕获可预测的异常,避免用 catch (e) {} 吞掉所有错误; +错误信息明确:包含「场景 + 原因 + 关键参数」,便于排查; +可恢复优先:处理后尽量让程序回归正常流程(如默认值兜底、重试); +避免阻塞主线程:异步操作的异常需单独处理,不影响整体执行。 +二、异常处理语法 +基础结构:try-catch-finally 语法格式 +try { + // 可能抛出异常的代码(如 DOM 操作、接口请求、类型转换) +} catch (error) { + // 捕获异常后的处理逻辑(如打印日志、提示用户) + console.error("异常触发:", error); +} finally { + // 无论是否异常,必执行的代码(如释放资源、关闭弹窗) +} +核心说明 +try:包裹 “风险代码”,仅能有一个; +catch (error):捕获 try 中抛出的异常,error 对象包含 3 个关键属性: +name:异常类型(如 TypeError); +message:异常描述信息(如 str.push is not a function); +stack:异常调用栈(包含文件名、行号,排查核心); +finally:可选,常用于清理资源(如关闭文件、取消请求),即使 try/catch 中有 return 也会执行。 示例:处理类型错误 +function formatData(data) { + try { + // 假设 data 应为对象,尝试获取属性 + return data.name || "默认名称"; + } catch (error) { + // 捕获类型错误(如 data 是 null/undefined/字符串) + if (error instanceof TypeError) { + console.error("数据格式错误:", error.message); + return "默认名称"; // 兜底返回 + } + // 非预期异常重新抛出,避免吞掉 + throw error; + } finally { + console.log("数据格式化流程结束"); + } +} + +formatData(123); // 输出:数据格式错误:Cannot read properties of number (reading 'name') → 返回 "默认名称" +主动抛出异常:throw 语句 +语法格式 + +throw 异常对象; // 可抛出 Error 实例、字符串、数字等(推荐 Error 实例) + +最佳实践 + +优先抛出 Error 派生实例(保留 stack 调用栈),而非纯字符串 / 数字; + +用于业务异常(如参数校验失败),明确中断异常流程。 + +示例:主动抛出业务异常 + +function login(username, password) { + // 参数校验:主动抛出异常 + if (!username) { + throw new Error("业务异常:用户名不能为空"); + } + if (password.length { + throw new TypeError("业务异常:密码长度不能小于 6 位"); + } + // 正常登录逻辑... +} + +try { + login("zhangsan", "123"); +} catch (error) { + console.error(error.message); // 输出:业务异常:密码长度不能小于 6 位 +} +自定义异常类 场景 区分 “系统异常” 和 “业务异常”,便于精准处理(如业务异常提示用户,系统异常上报监控)。 实现方式(继承 Error 类) // 自定义业务异常类 +class BusinessError extends Error { + constructor(code, message) { + super(message); // 继承 Error 的 message 属性 + this.name = "BusinessError"; // 自定义异常名称(默认是 Error) + this.code = code; // 自定义错误码(如 400 参数错误、401 未授权) + } +} + +// 使用自定义异常 +function getUserInfo(userId) { + if (!userId) { + throw new BusinessError(400, "用户 ID 不能为空"); + } + if (typeof userId !== "string") { + throw new BusinessError(400, "用户 ID 必须是字符串类型"); + } + // 正常获取用户信息逻辑... +} + +// 捕获并区分异常 +try { + getUserInfo(123); +} catch (error) { + if (error instanceof BusinessError) { + // 业务异常:提示用户 + alert(`错误(${error.code}):${error.message}`); + } else { + // 系统异常:上报监控 + console.error("系统异常:", error); + // reportErrorToMonitor(error); // 伪代码:上报监控 + } +} +异步操作的异常处理 +(1)回调函数(Callback) +无 try-catch 机制,通过 “错误优先回调”(第一个参数为 error)处理: +const fs = require("fs"); // Node.js 模块 + +// 错误优先回调:err 为 null 表示无异常 +fs.readFile("test.txt", "utf8", (err, data) => { + if (err) { + console.error("文件读取失败:", err.message); + return; + } + console.log("文件内容:", data); +}); + +(2)Promise +方式 1:then 的第二个参数(仅捕获当前 Promise 的异常); +方式 2:catch 方法(捕获整个 Promise 链的异常,推荐); +// 模拟异步接口请求 +function fetchData() { + return new Promise((resolve, reject) => { + setTimeout(() => { + const success = false; + if (success) { + resolve({ code: 200, data: "成功数据" }); + } else { + reject(new Error("接口请求失败:服务器错误")); // 主动 reject 抛出异常 + } + }, 1000); + }); +} + +// 异常处理 +fetchData() + .then( + (res) => console.log("结果:", res), + (err) => console.error("then 捕获异常:", err) // 仅捕获 fetchData 的异常 + ) + .catch((err) => { + console.error("catch 捕获异常:", err); // 捕获整个链的异常(包括 then 中的错误) + }); + +(3)async/await +支持 try-catch-finally 语法,异常处理更直观(推荐): +async function getData() { + try { + const res = await fetchData(); // 等待 Promise 完成 + console.log("结果:", res); + return res; + } catch (error) { + // 捕获 fetchData 抛出的异常,或 await 后的代码异常 + console.error("异步请求异常:", error.message); + return null; // 兜底返回 + } finally { + console.log("异步请求流程结束"); + } +} + +getData(); +三、JavaScript 程序调试技巧 +基础调试:console 系列 +(1)常用方法 +方法 +用途 +示例 +console.log() +输出普通信息(支持多参数、模板字符串) +console.log("用户数据:", user, age); +console.error() +输出错误信息(红色标记,保留调用栈) +console.error("参数错误:", err); +console.warn() +输出警告信息(黄色标记) +console.warn("数据格式过时"); +console.table() +格式化输出数组 / 对象(表格形式) +console.table([{name: "张三"}, {name: "李四"}]); +console.dir() +详细打印对象结构(展开所有属性) +console.dir(document.body); +console.time()/console.timeEnd() +计算代码执行时间 +console.time("循环耗时"); for(let i=0;i;i++); console.timeEnd("循环耗时"); +(2)占位符用法 + +console.log("姓名:%s,年龄:%d,是否成年:%s", "张三", 20, true); +// 输出:姓名:张三,年龄:20,是否成年:true +// 占位符:%s(字符串)、%d(数字)、%o(对象)、%c(样式) +console.log("%c重要提示", "color: red; font-size: 16px;"); // 带样式输出 +浏览器调试工具(Chrome 为例) -(1)调试面板核心功能(F12 打开) +面板 +用途 +关键操作 +Sources +断点调试、查看源代码 +点击行号添加断点;2. F5 刷新触发;3. 单步调试(F10 步过、F11 步入、Shift+F11 步出) +Console +执行临时代码、查看日志 +输入变量名查看值,支持 0(当前选中元素)、 +_(上一次结果) +Network +监控网络请求(接口、资源加载) +筛选 XHR/Fetch 请求,查看请求头、响应体、耗时 +Application +查看存储(LocalStorage、Cookie)、DOM 结构 -修改存储数据后实时测试 -Elements +查看 / 修改 DOM 元素和 CSS 样式 +断点监听 DOM 变化(右键元素 → Break on) +(2)断点调试进阶 + +条件断点:右键断点 → Edit Condition,输入表达式(如 i === 10),仅当表达式为 - - true 时触发; +异常断点:Sources 面板 → 勾选 Break on exceptions(暂停图标旁),程序抛出异常时- 自动断点; +日志断点:右键断点 → Add log point,输入日志内容(如 循环到第 {i} 次),不中断程- 序仅输出日志。 +调试避坑指南 +避免用 alert() 调试:阻塞主线程,无法查看对象结构,且影响异步操作; +异步代码调试:async/await 可直接断点,Promise 需在 then/catch 中加断点,或使用日志断点; +生产环境调试: +保留 source-map(映射压缩前的源代码),但注意安全(避免暴露敏感逻辑); +使用 console.debug() 输出调试信息(生产环境可通过浏览器过滤隐藏); +排查 NaN/undefined 问题: +用 Number.isNaN() 判断 NaN(避免 == NaN,因 NaN 不等于任何值); +用 typeof variable === "undefined" 判断未定义变量。 +四、实战场景:异常处理最佳实践 +接口请求异常处理(fetch 示例) +async function request(url, options = {}) { + try { + const response = await fetch(url, options); + // 处理 HTTP 错误(如 404、500,fetch 仅网络错误会 reject) + if (!response.ok) { + throw new Error(`HTTP 错误:${response.status},${response.statusText}`); + } + const data = await response.json(); + // 处理业务错误(如接口返回 code 非 200) + if (data.code !== 200) { + throw new BusinessError(data.code, data.message); + } + return data.data; + } catch (error) { + if (error instanceof BusinessError) { + alert(`操作失败:${error.message}`); + } else if (error.message.includes("Failed to fetch")) { + alert("网络异常,请检查网络连接"); + } else { + console.error("请求异常:", error); + alert("系统异常,请稍后重试"); + } + return null; + } +} +函数参数校验异常 +function calculateTotal(price, quantity) { + // 参数类型校验 + if (typeof price !== "number" || typeof quantity !== "number") { + throw new TypeError("价格和数量必须是数字类型"); + } + // 参数范围校验 + if (price < 0 || quantity < 0) { + throw new RangeError("价格和数量不能为负数"); + } + return price * quantity; +} + +// 使用时捕获异常 +try { + const total = calculateTotal(100, "5"); // 第二个参数是字符串 + console.log("总价:", total); +} catch (error) { + console.error("计算失败:", error.message); +} +全局异常捕获(兜底处理) // 捕获同步代码异常 +window.addEventListener("error", (event) => { + console.error("全局同步异常:", event.error); + // 上报监控(伪代码) + // reportError({ + // type: "sync", + // message: event.error.message, + // stack: event.error.stack, + // url: event.filename, + // line: event.lineno, + // column: event.colno + // }); + event.preventDefault(); // 阻止浏览器默认错误提示 +}); + +// 捕获 Promise 未处理的异常(如未加 catch 的 Promise reject) +window.addEventListener("unhandledrejection", (event) => { + console.error("全局 Promise 异常:", event.reason); + // 上报监控 + event.preventDefault(); // 阻止浏览器默认提示 +}); +五、核心总结 + +异常处理:优先用 try-catch-finally(同步 /async/await)、Promise.catch(Promise),避免吞掉异常; +异常类型:区分系统异常(TypeError 等)和业务异常(自定义 BusinessError),精准处理; +调试技巧:浏览器 Sources 面板断点调试 + console 系列工具,高效定位问题; +最佳实践:参数校验前置、异常信息明确、全局兜底捕获、生产环境保留调试能力且兼顾安全。 +练习 +

第一题

+
+ +
+ +

第二题

+中国的“国球”是( )
+篮球 +排球 +乒乓球 +羽毛球 + +

第三题

+ + +

欢迎访问本网站当前时间为:

+ + + +

第四题

+ + +

宽度:

+

高度:

+ + + +

第五题

+
+ + + +
+ + +

第六题

+
+ + +

第七题

+
+ 用户名:
+ 密 码:
+
+
+ \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251201-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251201-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..eb5221be8d4884618da8b530e61fbf960484357a --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251201-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,4 @@ +笔记 +// 拖拽过程中(移动时连续触发)drag +// 拖拽结束(松开鼠标时)dragend +// 进入放置区域dragenter \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251203-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251203-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..c9cd24551ca3bb666418588e78af32a3b9f3f417 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251203-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,194 @@ +笔记 +1.getElementById()方法返回具有指定ID的元素。 2.getElementsByTagName()方法返回具有指定标签名的元素集合。 3.getElementsByName()方法返回具有指定类名的对象集合。 4.querySelector()方法返回匹配指定CSS选择器的第一个元素 5.querySelectorAll()方法返回匹配指定CSS选择器的所有元素 6.createElement()方法用于创建一个新的元素节点 + +练习 +练习1,2 + + + + + +练习3 + + + +
+ + + +练习4 + + + + + + + +
+

李白《行路难•其一》

+

金樽清酒斗十千,玉盘珍羞直万钱。

+

停杯投箸不能食,拔剑四顾心茫然。

+

欲渡黄河冰塞川,将登太行雪满山。

+

闲来垂钓碧溪上,忽复乘舟梦日边。

+

行路难,行路难,多歧路,今安在?

+

长风破浪会有时,直挂云帆济沧海。

+
+ + + +练习5 + + + + 打开图片对话框 + + + + + +练习6 + + + + + +
+ + + diff --git "a/\351\237\246\344\271\276\345\274\272/20251204-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251204-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..81cbabbccbde329dcdf696d5f51d4c12cb9652a6 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251204-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,210 @@ +笔记 +一、核心认知 +1. **本质**:HTML/XML 文档的树形节点映射,JS 操作页面的接口,`document` 为操作入口。 +2. **关键节点**:元素节点(操作核心,`nodeType=1`)、文本节点(`nodeType=3`)、文档节点(`document`,`nodeType=9`)。 +3. **层级**:`window→document→html→head/body→子元素`。 + +二、核心操作 +1. 元素选择 +| 方法 | 核心特点 | +|---------------------|---------------------------| +| `getElementById` | 性能最优,返回单个元素 | +| `getElementsBy*` | 动态集合,元素变化自动同步| +| `querySelector/All` | 支持CSS选择器,后者返回静态集合 | + +2. 节点操作 +- **创建插入**:`createElement`(创元素)、`createTextNode`(创文本,防XSS)、`appendChild`/`insertBefore`(插入)。 +- **删除替换**:`node.remove()`(自删)、`removeChild`(父删子)、`replaceChild`(替换)。 +- **安全**:优先`textContent`,慎用`innerHTML`。 + +3. 样式与属性 +- 样式:`elem.style`(行内)、`classList`(类名操作,推荐)、`getComputedStyle`(计算样式,只读)。 +- 属性:`getAttribute`/`setAttribute`(原生属性)、`dataset`(`data-*`属性)。 + +三、事件与优化 +1. **事件**:推荐`addEventListener`,关键事件`DOMContentLoaded`(初始化)、`beforeunload`(页面卸载提示);事件委托适配动态元素。 +2. **性能优化**:缓存元素、批量操作(`DocumentFragment`)、避免同步重排、高频事件节流防抖、删元素前解绑事件。 + +练习 + + + + + Document + + + + + + +
+ + + + + + + + + + + Document + + + + +
+ +
+    夜空中最亮的星
+    能否听清
+    那仰望的人
+    心底的孤独和叹息
+    夜空中最亮的星
+    能否记起
+    曾与我同行
+    消失在风里的身影
+        
+ + + + + +

最新电影资讯

+
    +
  • 1.《金蝉脱壳》
  • +
  • 2.《阿甘正传》
  • +
  • 3.《爱乐之城》
  • +
  • 4.《头号玩家》
  • +
+ 输入影片资讯编号: + + + + +
+
    +
  • 黄瓜
  • +
  • 茄子
  • +
  • 芒果
  • +
+
    +
  • 西瓜
  • +
  • 蜜橘
  • +
  • 萝卜
  • +
+
+ + + +

在《倚天屠龙记》中,张三丰是_____派的掌门?

+ A.少林 + B.武当 + C.峨眉 + D.昆仑 + + + + 原超链接文本 + + + + + + + +
+ + 选中的表情 +
+ \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251205-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251205-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..24977c94eabe81f86806974d058b5cc2e6783d61 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251205-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,344 @@ +笔记 +document.title 获取 / 设置页面标题 +document.URL 获取当前页面完整 URL +document.body 获取 元素,可直接操作其样式和内容 + +getElementById() 根据元素 id 属性查询 +getElementsByTagName() 根据标签名查询 +getElementsByClassName() 根据元素 class 属性查询 +querySelector() CSS 选择器查询(第一个匹配) +createElement() 创建新的 HTML 元素 +appendChild() 将子元素添加到父元素的末尾 +replaceChild() 用新元素替换父元素中的某个子元素 +removeChild() 从父元素中删除指定子元素 +练习 +
+

消散对白(节选)

+

丁禹兮

+

原諒我真的不太會告別

+

也沒想過有這一天

+

以為你隨口承諾的永遠

+

就可以敵過時間

+

可你眼中深情的對白 如煙花短暫

+

新鮮感終歸不是愛

+

回憶在倒帶要怎麼釋懷?

+

說著放下卻陷入無限循環

+

可你眼中無情的對白 淚都流乾

+

卻不說答案

+

順其自然 隨冷風消散

+

可過了這麼久你怎麼還是我的短板

+
+ + + + + 退出登录 + +
+
+ 长乐曲 +
+
+ 十年一品温如言 +
+
+ + + + + + +
+

广告内容标题

+

这里是广告的具体内容

+
广告将在 5 秒后自动关闭
+
+ + + + + + + + + + + + +

2024年奥运会举办城市问答

+
+ + + + +
+ 轮播图片 +
+ + \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251208-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251208-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..b8a74d4b224088c0fd949cf81a2af52aebe12cc1 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251208-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,187 @@ +15章浏览器对象模型笔记 +核心概念 +BOM(浏览器对象模型),以 window 为顶级对象,操作浏览器窗口 / 页面交互,核心对象:window、location、history、navigator、screen。 +window(顶级对象) +全局关联:全局变量 / 函数 → window 的属性 / 方法 +窗口尺寸:innerWidth/innerHeight(视口宽高) +窗口操作:open(url)(开新窗)、close()(关窗口) +弹窗:alert()、confirm()(返回布尔)、prompt()(返回输入值) +定时器: +一次性:setTimeout(回调, 延时) / clearTimeout(定时器) +循环:setInterval(回调, 间隔) / clearInterval(定时器) +location(URL 操作) +核心属性 +href:完整 URL(赋值可跳转) +search:查询参数(?xxx) +hash:哈希值(#xxx) +常用方法 +assign(url):跳转页面(有历史记录) +replace(url):替换页面(无历史记录) +reload():刷新页面 +history(历史记录) +back():后退 +forward():前进 +go(数字):前进 / 后退指定页(正数前进,负数后退) +其他常用 +navigator.userAgent:获取浏览器信息 +screen.width/height:屏幕分辨率 +练习 +练习1,2 + + + + 退出登录 +练习3 + + + +

网站内容

+

广告会5秒后自动消失

+ + + + + +练习4 + + + +练习5 + + + + + + +练习6 + + + +
+ + +练习7 + + + +
+ + + + + +
+ + + +练习8 + + + + + + +练习9 + +
0
+ + + + +Gitee - 基于 Git 的代码托管和研发协作平台 \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251210-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251210-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..0eabac99eef69c8944904e5692a7f697d1cf45eb --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251210-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,321 @@ +JavaScript Style 对象极简笔记 +一、Style 对象核心概念 本质:封装 HTML 元素内联样式(style 属性)的对象(CSSStyleDeclaration),也可通过 getComputedStyle 获取元素最终渲染的计算样式(只读)。 获取方式 + +运行 +// 内联样式(可写) +const inlineStyle = document.getElementById('box').style; +// 计算样式(只读,第二个参数为伪元素,无则传null) +const computedStyle = window.getComputedStyle(box, null); +二、Style 对象的核心特性 + +样式属性的命名规则 由于 JavaScript 中不允许使用连字符(-)作为属性名,CSS 样式属性在 Style 对象中需转换为驼峰命名法 +CSS 属性名 Style 对象属性名 示例 +background-color backgroundColor box.style.backgroundColor = 'red'; +font-size fontSize box.style.fontSize = '16px'; +border-radius borderRadius box.style.borderRadius = '8px'; +text-align textAlign box.style.textAlign = 'center'; +float cssFloat(IE 为 styleFloat) box.style.cssFloat = 'left'; +样式值的格式 +设置样式值时,必须包含单位(除少数无单位属性如 z-index、opacity),且值为字符串类型: +运行 +// 正确:带单位(px) +box.style.width = '200px'; +box.style.fontSize = '18px'; + +// 正确:无单位属性 +box.style.zIndex = '999'; +box.style.opacity = '0.8'; + +// 错误:缺少单位 +// box.style.height = 100; +三、核心操作 + +设置样式 +运行 +const box = document.getElementById('box'); +// 单个样式(带单位,字符串类型) +box.style.width = '200px'; +box.style.backgroundColor = 'red'; +// 批量样式(覆盖原有内联样式) +box.style.cssText = 'width: 200px; height: 100px; color: blue;'; +// 追加批量样式 +box.style.cssText += '; margin: 10px;'; +2. 读取样式 +javascript +运行 +// 内联样式:仅能读已设置的,未设置返回空字符串 +console.log(box.style.width); +// 计算样式:读最终渲染样式(支持所有样式) +console.log(computedStyle.width); +console.log(computedStyle.backgroundColor); +3. 移除样式 +javascript +运行 +// 单个样式:赋值为空或 removeProperty(参数为CSS原始属性名) +box.style.color = ''; +box.style.removeProperty('background-color'); +// 清空所有内联样式 +box.style.cssText = ''; +box.removeAttribute('style'); +四、推荐用法:CSS 类切换(优于直接操作 Style) + +运行 +// 添加类 +box.classList.add('active'); +// 移除类 +box.classList.remove('active'); +// 切换类(存在则删,不存在则加) +box.classList.toggle('active'); +// 判断是否包含类 +box.classList.contains('active'); +五、常见场景 + +运行 +// 显示/隐藏 +box.style.display = 'none'; // 不占空间 +box.style.display = 'block'; +box.style.visibility = 'hidden'; // 占空间 +// 过渡/动画 +box.style.transition = 'all 0.3s'; +box.style.animation = 'rotate 2s infinite'; +// CSS 变量操作 +box.style.setProperty('--main-color', 'green'); +console.log(computedStyle.getPropertyValue('--main-color')); +六、注意事项 + +内联样式优先级最高,易覆盖其他样式,优先用类切换。 +部分属性需加浏览器前缀(如 webkitTransform)。 +计算样式为只读,无法直接修改。 +样式值需带单位(z-index、opacity 等除外)。 +练习 +练习1 + +
郭小东是东
+ + + + +练习2 + + + + +练习3 + + + + +
+
HTML/CSS讨论区
+
JavaScript讨论区
+
C语言讨论区
+
Java讨论区
+
Android讨论区
+
Python讨论区
+
+ + + +练习1 + + + + + 图片1 + 图片2 + 图片3 + + + +练习1 + + + + 图片1 + 图片2 + 图片3 + + + +Gitee - 基于 Git 的代码托管和研发协作平台 \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251211-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251211-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..73f886fabd70cab6344c1d2ca0377f40b8114efa --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251211-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,491 @@ + +Form对象 +什么是Form对象 +获取Form对象的方法 +Form对象的常用属性 +Form对象的常用方法 +访问表单元素 +通过elements集合 +通过表单元素的name属性直接访问 +表单元素对象 +Input元素 +Select元素 +Textarea元素 +表单事件处理 +onSubmit事件 +onReset事件 +表单验证示例 +实际应用示例 +动态创建表单 +表单数据序列化 +使用FormData对象(现代方法) +常见技巧和注意事项 +1. 禁用提交按钮防止重复提交 +2. 表单自动填充检测 +3. 表单字段依赖关系 +总结 +作业 +Form对象 +什么是Form对象 +Form对象代表HTML中的表单元素(
标签) +是Document对象的一个重要组成部分 +用于收集用户输入数据并提交到服务器 +提供了访问和操作表单元素的方法和属性 +获取Form对象的方法 +// 1. 通过getElementById() +let form = document.getElementById("myForm"); + +// 2. 通过表单名称 +let form = document.forms["formName"]; +// 或者 +let form = document.forms.formName; + +// 3. 通过索引(从0开始) +let form = document.forms[0]; + +// 4. 通过querySelector() +let form = document.querySelector("#myForm"); +Form对象的常用属性 +属性 描述 +action 表单提交的URL地址 +method 表单提交方法(GET或POST) +name 表单名称 +target 表单提交后在哪里显示响应 +elements 表单中所有控件的集合 +length 表单中控件的数量 +// 示例 +let form = document.forms[0]; +console.log(form.action); // 获取表单action属性 +console.log(form.method); // 获取表单method属性 +console.log(form.name); // 获取表单名称 +Form对象的常用方法 +方法 描述 +submit() 提交表单 +reset() 重置表单 +// 提交表单 +form.submit(); + +// 重置表单 +form.reset(); +访问表单元素 +通过elements集合 +let form = document.forms[0]; + +// 通过索引访问 +let firstElement = form.elements[0]; + +// 通过name属性访问 +let usernameInput = form.elements["username"]; + +// 获取元素数量 +let elementCount = form.elements.length; +通过表单元素的name属性直接访问 +// 如果表单元素有name="username" +let usernameInput = form.username; +// 或者 +let usernameInput = form["username"]; +表单元素对象 +Input元素 +let input = form.elements["inputName"]; + +// 常用属性 +input.value // 当前值 +input.type // 类型(text, password, email等) +input.name // 名称 +input.disabled // 是否禁用 +input.readOnly // 是否只读 +input.checked // 对于checkbox/radio是否选中 +Select元素 +let select = form.elements["selectName"]; + +// 常用属性 +select.options // 所有选项的集合 +select.selectedIndex // 当前选中项的索引 +select.value // 当前选中项的值 +select.length // 选项数量 + +// 获取选中项 +let selectedOption = select.options[select.selectedIndex]; +Textarea元素 +let textarea = form.elements["textareaName"]; + +// 常用属性 +textarea.value // 当前文本内容 +textarea.name // 名称 +textarea.rows // 行数 +textarea.cols // 列数 +表单事件处理 +onSubmit事件 +// 方法1:在HTML中指定 +// + +// 方法2:通过JavaScript绑定 +form.onsubmit = function(event) { + // 验证表单 + if (!validateForm()) { + event.preventDefault(); // 阻止表单提交 + return false; + } + // 表单验证通过,正常提交 +}; + +// 方法3:使用addEventListener(推荐) +form.addEventListener("submit", function(event) { + // 验证表单 + if (!validateForm()) { + event.preventDefault(); // 阻止表单提交 + return; + } + // 表单验证通过,正常提交 +}); +onReset事件 +form.onreset = function() { + return confirm("确定要重置表单吗?"); +}; +表单验证示例 +function validateForm() { + let form = document.forms["myForm"]; + let username = form.elements["username"].value; + let email = form.elements["email"].value; + + // 验证用户名 + if (username == null || username == "") { + alert("用户名不能为空"); + return false; + } + + // 验证邮箱 + let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(email)) { + alert("邮箱格式不正确"); + return false; + } + + return true; // 验证通过 +} +实际应用示例 +动态创建表单 +// 创建表单元素 +let form = document.createElement("form"); +form.action = "/submit"; +form.method = "post"; + +// 创建输入框 +let usernameInput = document.createElement("input"); +usernameInput.type = "text"; +usernameInput.name = "username"; +usernameInput.placeholder = "请输入用户名"; + +// 创建提交按钮 +let submitBtn = document.createElement("input"); +submitBtn.type = "submit"; +submitBtn.value = "提交"; + +// 添加元素到表单 +form.appendChild(usernameInput); +form.appendChild(submitBtn); + +// 添加表单到页面 +document.body.appendChild(form); +表单数据序列化 +function serializeForm(form) { + let formData = []; + + for (let i = 0; i < form.elements.length; i++) { + let element = form.elements[i]; + + // 跳过没有name属性的元素和禁用的元素 + if (!element.name || element.disabled) { + continue; + } + + // 处理不同类型的元素 + if (element.type === "checkbox" || element.type === "radio") { + if (element.checked) { + formData.push(encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value)); + } + } else { + formData.push(encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value)); + } + } + + return formData.join("&"); +} + +// 使用示例 +let form = document.forms[0]; +let serializedData = serializeForm(form); +console.log(serializedData); +使用FormData对象(现代方法) +// 创建FormData对象 +let form = document.forms[0]; +let formData = new FormData(form); + +// 添加额外数据 +formData.append("timestamp", Date.now()); + +// 发送数据到服务器 +fetch("/submit", { + method: "POST", + body: formData +}) +.then(response => response.json()) +.then(data => console.log(data)) +.catch(error => console.error(error)); +常见技巧和注意事项 +1. 禁用提交按钮防止重复提交 +form.onsubmit = function() { + let submitBtn = this.querySelector("input[type='submit']"); + submitBtn.disabled = true; + submitBtn.value = "提交中..."; + + // 在一定时间后重新启用按钮(防止网络问题导致一直禁用) + setTimeout(() => { + submitBtn.disabled = false; + submitBtn.value = "提交"; + }, 5000); + + return true; +}; +2. 表单自动填充检测 +// 检测表单字段是否被自动填充 +function checkAutofill() { + let inputs = form.querySelectorAll("input"); + inputs.forEach(input => { + if (input.value && !input.classList.contains("filled")) { + input.classList.add("autofilled"); + } + }); +} +3. 表单字段依赖关系 +// 根据一个字段的值改变另一个字段的状态 +let countrySelect = form.elements["country"]; +let stateInput = form.elements["state"]; + +countrySelect.onchange = function() { + if (this.value === "USA") { + stateInput.disabled = false; + } else { + stateInput.disabled = true; + stateInput.value = ""; + } +}; +总结 +Form对象是Web开发中处理用户输入的关键部分。通过JavaScript操作Form对象,我们可以: + +获取和设置表单属性 +访问表单中的各个元素 +进行表单验证 +控制表单提交行为 +动态创建和修改表单 +作业 + +
+
1. 取票功能
+ +
+
+
+
2. 文本区域调整高度
+ + + +
+
+
+
3. 课程选择(最多6门)
+ C语言
+ 机械制图
+ 单片机
+ 自动控制
+ 传感器
+ 高等数学
+ 计算机基础
+ Oracle数据库
+ 商务英语
+ PLC设计基础
+
+
+
+
+
4. 问答题
+

电影《变相怪杰》的主演是谁?

+ 布拉德·皮特
+ 亚当·桑德勒
+ 金凯瑞
+ 杰夫·丹尼尔斯
+ +
+
+
+
+
5. 爱好选择
+ 看电影
+ 听音乐
+ 演奏乐器
+ 打篮球
+ 看书
+ 上网
+ + + +
+
+
+
6. 城市选择
+ 选择省份: + + 选择城市: + +
+ + + \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251212-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251212-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..04f09e55ba3cd809dde39499f3aa67c5be4da874 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251212-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,83 @@ + +Promise与JSON +JSON (JavaScript Object Notation) +什么是JSON +JSON语法 +JSON与JS对象转换 +Promise +什么是Promise +Promise状态 +Promise基本用法 +Promise链式调用 +async/await语法 +Promise与JSON +JSON (JavaScript Object Notation) +什么是JSON +轻量级数据交换格式 +易于人阅读和编写 +易于机器解析和生成 +独立于语言的文本格式 +JSON语法 +// 对象表示 +{"name": "张三", "age": 25, "city": "北京"} + +// 数组表示 +[{"name": "张三"}, {"name": "李四"}] + +// 嵌套结构 +{ + "students": [ + {"name": "张三", "scores": [85, 92, 78]}, + {"name": "李四", "scores": [90, 88, 95]} + ] +} +JSON与JS对象转换 +// JS对象转JSON字符串 +let obj = {name: "张三", age: 25}; +let jsonStr = JSON.stringify(obj); + +// JSON字符串转JS对象 +let str = '{"name": "张三", "age": 25}'; +let jsonObj = JSON.parse(str); +Promise +什么是Promise +异步编程解决方案 +表示一个异步操作最终完成或失败的对象 +解决回调地狱问题 +Promise状态 +Pending(待定)- 初始状态 +Fulfilled(已成功)- 操作成功完成 +Rejected(已失败)- 操作失败 +Promise基本用法 +// 创建Promise +let promise = new Promise((resolve, reject) => { + let success = true; + if (success) { + resolve("操作成功"); + } else { + reject("操作失败"); + } +}); + +// 使用Promise +promise + .then(result => console.log(result)) + .catch(error => console.log(error)); +Promise链式调用 +fetch('/api/data') + .then(response => response.json()) + .then(data => processData(data)) + .then(result => console.log(result)) + .catch(error => console.error(error)); +async/await语法 +async function fetchData() { + try { + let response = await fetch('/api/data'); + let data = await response.json(); + console.log(data); + } catch (error) { + console.error(error); + } +} +Gitee - 基于 Git 的代码托管和研发协作平台 +北京奥思研工智能科技有限公司版权所有 \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251215-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251215-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..4c42c88bada2cd0f9157c84febb7822d28f0c136 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251215-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,29 @@ + +练习 +练习 +1. + let name = "ggb"; + let SCHOOL ="猪猪职业技术学院"; + document.write(name+SCHOOL); + + 2. + let value = 123; + document.write(typeof value); + + 3. + let age = 18; + age = 20; + document.write(age); + + 4. + let a = "李四"; + let b = 19; + let c = true; + document.write("姓名:李四,类型:" +typeof a,"
年龄:19,类型:"+typeof b,"
及格:true,类型:"+typeof c ); + + 5. + let a= undefined; + let b= null; + document.write("undefined 变量: undefined, 类型: "+typeof a,"
null 变量: null, 类型: "+typeof b) + +Gitee - 基于 Git 的代码托管和研发协作平台 \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251217-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251217-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..8230b02e70421b331aebe5c3d9fae3e0266138dd --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251217-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,36 @@ +练习 +7. + let num; + console.log("var 声明前访问 num:", num); + num = 123; + console.log("var 声明后访问 num:", num); + try { + console.log("let 声明前访问 str:", str); + } catch (err) { + console.log("let 声明前访问结果:", "ReferenceError(暂时性死区)"); + } + let str = "hello"; + console.log("let 声明后访问 str:", str); + try { + console.log("const 声明前访问 flag:", flag); + } catch (err) { + console.log("const 声明前访问结果:", "ReferenceError(暂时性死区)"); + } + const flag = true; + console.log("const 声明后访问 flag:", flag); + console.log("\n" + "var 声明会提升,但值为 undefined let 和 const 存在暂时性死区"); + + 8. + let name ="张三"; + let age = 20; + let score = 85; + console.log(`${name}今年${age}岁,考了${score}分,${score >= 60 ? '及格' : '不及格'}`); + + 9. + let a = 10; + let b = 3; + let c= a/b; + console.log(a+b); + console.log(a-b); + console.log(c.toFixed(2)); + console.log(a%b); \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251218-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251218-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..5e122a6072ead233b2d15f73eb1ccd10bae3db70 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251218-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,73 @@ +练习 +10. + let a = 123; + console.log(typeof a); + a="456"; + console.log(typeof a); + + 11. + let a = 5; + let b = 3; + function abc(a, b) { + let ab = a > b; + let ac = a === b; + let bc = a !== b; + return { + ab, + ac, + bc + }; + } + let result = abc(a, b); + console.log(`a>b: ${result.ab}`); + console.log(`a===b: ${result.ac}`); + console.log(`a!==b: ${result.bc}`); + + 12. + let x = "5"; + let y = 5; + let z = "5"; + function abc(x, y, z) { + let a = x == y; + let b = x == z; + let c = x === y; + let d = x === z; + return { + a, + b, + c, + d + }; + } + let result = abc(x,z,y); + console.log(`x == y: ${result.a}`); + console.log(`x == z: ${result.b}`); + console.log(`x === y: ${result.c}`); + console.log(`x === z: ${result.d}`); + + 13. + let age=25; + let hasLicense = true; + if(1860 || hasLicense == true){ + console.log('true(可以开车)'); + }else{ + console.log('false(不可以开车)'); + } + + 14. + let a = "5"+3; + console.log(a); + let b="5"-3; + console.log(b); + let c= true+1; + console.log(c); + let d="10"*"2"; + console.log(d); + + 15. + let a = +"123"; + console.log(a); + let b = -"45"; + console.log(b) + let c = !!"hello"; + console.log(c); \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251219-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251219-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..d8ae53371e394adad12a5833d591f99959617fd2 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251219-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,168 @@ +练习 +16. + let a= 5.8; + let b= 7; + if(b%2 == 0){ + console.log('为偶数'); + }else{ + console.log('为基数'); + } + console.log(~~5.8); + + 17. + let score = 85; + let dox = score >=60?'及格':'不及格'; + console.log(dox); + + 流程控制 + + 1. + let a=91; + if(a>90){ + console.log('优秀'); + }else if(a>80){ + console.log('良好'); + }else if(a>60){ + console.log('及格'); + }else{ + console.log('不及格'); + } + + 2. + let a= 0; + for(i=1;i<=100;i++){ + a=a+i; + } + console.log(a); + + 3. + let a=[1,2,3,4,5,6,7,8] + for(i=0;i<=a.length;i++){ + let num = a[i]; + if(num%2==0){ + console.log(num); + } + } + + 4. + let a=17; + console.log(a%a==0 && a%1==0); + + 5. + let n = 20; + let m = 3; + let a = []; + while (m < n) { + a.push(m) + m +=3; + } + console.log(a); + + 6. + let a = 1; + let dayOfWeek; + switch (a) { + case 1: + dayOfWeek = "今天是工作日,要上班" + break; + case 2: + dayOfWeek = "今天是工作日,要上班" + break; + case 3: + dayOfWeek = "今天是工作日,要上班" + break; + case 4: + dayOfWeek = "今天是工作日,要上班" + break; + case 5: + dayOfWeek = "今天是工作日,要上班" + break; + case 6: + dayOfWeek = "今天是周末,不用上班" + break; + case 7: + dayOfWeek = "今天是周末,不用上班" + break; + } + console.log(dayOfWeek); + + 7. + let a=["苹果","香蕉","橙子"]; + for(let b of a){ + console.log(b); + } + + 8. + let a = { + name: "张三", + age: "20", + city: "北京" + }; + for(let b in a){ + console.log(`${a[b]}`); + } + + 9. + let a = [26, 20, 60, 90]; + let b = null; + for (let i = 0; i < a.length; i++) { + let ab=a[i] + if(ab<0){ + console.log(`跳过所以负数: ${ab}`); + continue; + } + if(ab>50){ + b = ab; + } + console.log(b); + } + + 10. + for(let i = 1; i <= 9; i++) { + let a=''; + for(let j=1;j<=i;j++){ + a += `${j}*${i}=${j*i} ` + } + console.log(a); + } + + 11. + let age = 18; + + let status = age >= 18 ? '成年' : '未成年'; + console.log(status); + + if (age >= 18) { + status = '成年'; + } else { + status = '未成年'; + } + console.log(status); + + 12. + let a = Math.floor(Math.random()*100)+1; + let b; + while(true){ + let input = prompt("请输入数字"); + b=Number(input); + if(b>a){ + alert("太大了") + }else if(b= 60 ? '及格' : '不及格'} + +. 完成如下任务 + +题目描述: 计算两个数字 a 和 b 的加、减、乘、除、取余结果,并返回一个包含这些结果的对象 +输入示例: 10, 3 +输出示例: { 加: 13, 减: 7, 乘: 30, 除: 3.33, 余: 1 } + +完成如下任务 +题目描述: 将字符串 "123" 转换为数字类型,将数字 456 转换为字符串类型,并分别返回它们的值和类型 +输出示例: 转换后的数字: 123, 类型: number 转换后的字符串: "456", 类型: string + +完成如下任务 +题目描述: 比较两个变量 a 和 b,返回 a 是否大于 b、是否等于 b、是否不等于 b 的布尔值结果 +输入示例: 5, 3 +输出示例: { 大于: true, 等于: false, 不等于: true } + \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251224-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251224-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..a17365dae1511ff6aedec3f111c1ce562c6c488d --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251224-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,96 @@ +完成如下任务 +题目描述: 给定一个分数 score,判断成绩等级:90 分以上为"优秀",80-89 分为"良好",60-79 分为"及格",60 分以下为"不及格" +输入示例: 85 +输出示例: "良好" +完成如下任务 +题目描述: 使用 for 循环计算 1 到 n 的累加和 +输入示例: 100 +输出示例: 5050 + +完成如下任务 +题目描述: 遍历数组 arr,输出所有偶数 +输入示例: [1, 2, 3, 4, 5, 6, 7, 8] +输出示例: [2, 4, 6, 8] + +完成如下任务 +题目描述: 判断给定数字 num 是否为质数(只能被 1 和自身整除的大于 1 的自然数) +输入示例: 17 +输出示例: true + +完成如下任务 +题目描述: 使用 while 循环找出小于 n 的所有 3 的倍数 +输入示例: 20 +输出示例: [3, 6, 9, 12, 15, 18] + +完成如下任务 +题目描述: 使用 switch 语句根据星期几输出不同的信息 +输入示例: dayOfWeek = 1 (周一) +输出示例: "今天是工作日,要上班" + +完成如下任务 +题目描述: 使用 for...of 循环遍历数组 +输入示例: ['苹果', '香蕉', '橙子'] +输出示例: 依次输出每个水果名称 + \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251225-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251225-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..b049fb34f5b18c46bdbb50da9e57d2849081d52e --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251225-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,108 @@ +使用公网 IP添加记录 + +使用ping查看网站连接 + +登录服务器 + +创建文件 + +touch xxx 创建一个新的空文件 +vim xxx.txt 打开/创建一个文件 +创建文件夹 + +mkdir +切换目录 + +cd +列出目录清单 + +ls 列出指定目录下的内容(如果未指定则指列出当前目录) +安装软件 + +apt install nginx -y +更新软件 + +完成如下任务 + +题目描述: 使用 for...in 循环遍历对象的属性 +输入示例: { name: "张三", age: 20, city: "北京" } +输出示例: name: 张三 age: 20 city: 北京 + +完成如下任务 +题目描述: 使用 break 和 continue 控制循环流程 +输入示例: 查找数组中第一个大于 50 的数,跳过所有负数 +输出示例: 演示 break(跳出循环)和 continue(跳过本次循环)的使用 + +完成如下任务 +题目描述: 使用嵌套循环打印九九乘法表 +输出示例: 11=1 12=2 22=4 13=3 23=6 33=9 ... + +完成如下任务 +题目描述: 使用条件运算符和 if-else 对比,实现同样的逻辑 + +输入示例: age = 18 + +输出示例: const status = age >= 18 ? '成年' : '未成年'; (三元运算符) if (age >= 18) { status = '成年'; } else { status = '未成年'; } + + +完成如下任务 +题目描述: 实现一个简单的猜数字游戏,使用循环和条件判断 + +输出示例: 生成 1-100 随机数,用户猜测,给出"太大"、"太小"或"猜对了"的提示 + + \ No newline at end of file diff --git "a/\351\237\246\344\271\276\345\274\272/20251226-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\237\246\344\271\276\345\274\272/20251226-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..7d8b711fcd194dd00afe530508cba439cb917bb4 --- /dev/null +++ "b/\351\237\246\344\271\276\345\274\272/20251226-\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,70 @@ +完成如下任务 +题目描述: 计算并返回给定数组 arr 中所有元素的总和 +输入示例: [ 1, 2, 3, 4 ] +输出示例: 10 + +完成如下任务 +题目描述: 合并数组 arr1 和数组 arr2。不要直接修改数组 arr,结果返回新的数组 +输入示例: [1, 2, 3, 4], ['a', 'b', 'c', 1] +输出示例: [1, 2, 3, 4, 'a', 'b', 'c', 1] + +完成如下任务 +题目描述: 统计数组 arr 中值等于 item 的元素出现的次数 + +输入示例: [1, 2, 4, 4, 3, 4, 3], 4 + +输出示例: 3 + + +完成如下任务 +题目描述(15 分): 找出数组 arr 中重复出现过的元素(不用考虑返回顺序) + +输入示例: [1, 2, 4, 4, 3, 3, 1, 5, 3] + +输出示例: [1, 3, 4] + + +完成如下任务 +题目描述: 删除数组 arr 中的指定元素 item,返回新数组(不修改原数组) +输入示例: [1, 2, 3, 4, 2, 5], 2 +输出示例: [1, 3, 4, 5] + +Gitee - 基于 Git 的代码托管和研发协作平台 +北京奥思研工智能科技有限公司版权所有 \ No newline at end of file diff --git "a/\351\241\276\346\254\243\346\234\210/20251110-JS\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\241\276\346\254\243\346\234\210/20251110-JS\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..fd59da8183f9d930a2818e74ffca303c05d3ca6e --- /dev/null +++ "b/\351\241\276\346\254\243\346\234\210/20251110-JS\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,60 @@ +# 笔记 + +#### JavaScript在HTML中的应用 + +- 在页面中直接嵌入JavaScript代码 +- 链接外部JavaScript文件 +- 作为标签的属性值使用 + + + +注:JavaScript严格区分字母大小写 + + + +# 作业 + +##### 作业一: + +```html + + + + + + 输出老子的名言 + + + + + +``` + + + +##### 作业二: + +```html + + + + + + Document + + + + + + +``` + +```js +function qqq(){ + alert("hello"); +} + +``` + diff --git "a/\351\241\276\346\254\243\346\234\210/20251112-JS\346\225\260\346\215\256\347\261\273\345\236\213\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\351\241\276\346\254\243\346\234\210/20251112-JS\346\225\260\346\215\256\347\261\273\345\236\213\347\254\224\350\256\260+\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..51e31f7204061dab1ee93ccb2600ea532c4a8af6 --- /dev/null +++ "b/\351\241\276\346\254\243\346\234\210/20251112-JS\346\225\260\346\215\256\347\261\273\345\236\213\347\254\224\350\256\260+\344\275\234\344\270\232.md" @@ -0,0 +1,86 @@ +# 笔记 + +**数据类型:** + +- 数值型 +- 字符串型 +- 布尔型 + + + + + +# 作业 + +##### 作业一 + +```html + + + + + + Document + + + + + +``` + +##### 作业二 + +```html + + + + + + Document + + + + + +``` + +##### 作业一 + +```html + + + + + + + 输出人物的个人信息 + + + + +
+ +
+ + + +``` + diff --git "a/\351\241\276\346\254\243\346\234\210/20251113-JS\350\277\220\347\256\227\347\254\246\344\275\234\344\270\232.md" "b/\351\241\276\346\254\243\346\234\210/20251113-JS\350\277\220\347\256\227\347\254\246\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..76a75b8dce8371c3daa8e4bec6b383c1a79cccb3 --- /dev/null +++ "b/\351\241\276\346\254\243\346\234\210/20251113-JS\350\277\220\347\256\227\347\254\246\344\275\234\344\270\232.md" @@ -0,0 +1,140 @@ +##### 作业一 + +```html + + + + + + Document + + + + + +``` + +##### 作业二 + +```html + + + + + + + Document + + + + + + + +``` + +##### 作业三 + +```html + + + + + + Document + + + + + +``` + +##### 作业四 + +```html + + + + + + Document + + + + + +``` + +##### 作业五 + +```html + + + + + + 计算员工的实际收入 + + + + + +``` + +##### 作业六 + +```html + + + + + + Document + + + + + + + +``` + diff --git "a/\351\241\276\346\254\243\346\234\210/20251114-JS\346\235\241\344\273\266\345\210\244\346\226\255\344\275\234\344\270\232.md" "b/\351\241\276\346\254\243\346\234\210/20251114-JS\346\235\241\344\273\266\345\210\244\346\226\255\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..07ffb3ff0fc30e478b7cdad8eff35d4591b13fdd --- /dev/null +++ "b/\351\241\276\346\254\243\346\234\210/20251114-JS\346\235\241\344\273\266\345\210\244\346\226\255\344\275\234\344\270\232.md" @@ -0,0 +1,98 @@ +##### 作业二 + +```html + + + + + + Document + + + + + +``` + +##### 作业三 + +```html + + + + + + Document + + + + + +``` + +##### 作业四 + +```html + + + + + + Document + + + + + +``` + diff --git "a/\351\255\217\351\212\256\346\263\223/20251110-js\345\237\272\347\241\200\347\254\224\350\256\260.md" "b/\351\255\217\351\212\256\346\263\223/20251110-js\345\237\272\347\241\200\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..7540424bf4a51b8dd84e58cd692f6a55ea154f32 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251110-js\345\237\272\347\241\200\347\254\224\350\256\260.md" @@ -0,0 +1,118 @@ +# JavaScript 基础笔记 + +## 1. 编程语言概述 + +### 1.1 常见编程语言 +- **前端语言**:JavaScript, TypeScript +- **后端语言**:C#, Java, Python, Go, PHP, Swift, Kotlin +- **系统级语言**:C/C++, Rust + +### 1.2 高级语言与低级语言的区别 +- **高级语言**:更接近人类自然语言,易于理解和编写 + - 优势:开发效率高,代码可读性强,跨平台性好 + - 代表:JavaScript, Python, Java, C#等 +- **低级语言**:更接近计算机硬件的语言,如汇编语言和机器语言(二进制代码101101) + - 优势:执行效率高,可直接操作硬件 + - 代表:汇编语言,部分低级功能的C/C++代码 + +## 2. JavaScript 简介 + +### 2.1 JavaScript 的特点 +- **脚本语言**:无需编译,直接由浏览器解释执行 +- **弱类型语言**:变量类型可动态改变 +- **面向对象**:支持对象编程,但基于原型而非类(ES6引入class) +- **事件驱动**:通过事件响应用户操作 +- **跨平台**:可在不同浏览器中运行 + +### 2.2 JavaScript 的组成部分 +- **ECMAScript**:核心语法标准 +- **DOM (Document Object Model)**:文档对象模型,操作网页元素 +- **BOM (Browser Object Model)**:浏览器对象模型,操作浏览器功能 + +## 3. JavaScript 的使用方式 + +### 3.1 内联方式 +将JavaScript代码直接写在HTML标签的事件属性中 + +```html + + + +``` + +### 3.2 嵌入式 +将JavaScript代码写在HTML文件的` + +``` + +**script.js 文件内容:** +```javascript +// 这是外部JavaScript文件 +alert('这是从外部文件加载的JavaScript'); +``` + +## 4. 基本语法 + +### 4.1 变量声明 +```javascript +// 使用var声明变量(函数作用域) +var name = 'JavaScript'; + +// 使用let声明变量(块级作用域,ES6) +let age = 25; + +// 使用const声明常量(块级作用域,ES6) +const PI = 3.14159; +``` + +### 4.2 运算符 +- **算术运算符**:+, -, *, /, %, ++, -- +- **赋值运算符**:=, +=, -=, *=, /=, %= +- **比较运算符**:==, ===, !=, !==, >, <, >=, <= +- **逻辑运算符**:&&, ||, ! + +### 4.3 字符串与转义字符 +在JavaScript中,字符串是最常用的数据类型之一。当我们需要在字符串中包含一些特殊字符时,就需要使用转义字符。 + +#### 4.3.1 转义字符的概念 +转义字符是以反斜杠(\\)开头的特殊字符序列,用于表示那些难以直接输入的字符。 + +#### 4.3.2 常用转义字符列表 + +| 转义字符 | 描述 | 示例 | +|---------|------|------| +| \\ | 反斜杠 | `"\\"` → "\\" | +| \' | 单引号 | `'\'Hello\''` → "'Hello'" | +| \" | 双引号 | `"\"Hello\""` → '"Hello"' | +| \n | 换行符 | `"Hello\nWorld"` → 输出时换行 | +| \t | 制表符 | `"Hello\tWorld"` → 输出时产生Tab空格 | +| \r | 回车符 | `"Hello\rWorld"` → 光标回到行首 | +| \b | 退格符 | `"Hel\blo"` → "Hello" | +| \f | 换页符 | 用于打印机换页 | +| \0 | 空字符 | 表示字符串结束 | + +# 练习 +```html + + + +``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251112-js\345\237\272\347\241\200\347\273\203\344\271\240.md" "b/\351\255\217\351\212\256\346\263\223/20251112-js\345\237\272\347\241\200\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..f269ea71bcce8074b8147b7053934baf3e9a4499 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251112-js\345\237\272\347\241\200\347\273\203\344\271\240.md" @@ -0,0 +1,44 @@ +# 练习 + +```html + +``` + +# 演示 +![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251116182124947.png) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251113-js\345\276\252\347\216\257\347\273\203\344\271\240.md" "b/\351\255\217\351\212\256\346\263\223/20251113-js\345\276\252\347\216\257\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..b2318475d248e65461fce655c4b7558cad77ec51 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251113-js\345\276\252\347\216\257\347\273\203\344\271\240.md" @@ -0,0 +1,101 @@ +# 练习 +```html + + + +``` + +# 效果 +![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251116182545752.png) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\351\255\217\351\212\256\346\263\223/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..6846e12b94f4e77095a2b37e60ea394768a8d7b9 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" @@ -0,0 +1,112 @@ +# 练习 + +```html + + +``` + +# 效果图 + +![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251116183031305.png) \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251110-js\347\254\224\350\256\260.md" "b/\351\273\204\346\267\274\346\236\227/20251110-js\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..2bb1468132567bc85a9c40a06c3b0833cfc25575 --- /dev/null +++ "b/\351\273\204\346\267\274\346\236\227/20251110-js\347\254\224\350\256\260.md" @@ -0,0 +1,56 @@ +## wed前端核心技术 + +1.HTML +2.css +3.JavaScript + +## wed前端框架 + +1.react facebook react16 +2.vue 尤雨溪 vue3 +3.angula2 谷歌 + +## 全栈(全干工程师)-前端+后端 +1.前端 + +- vue3 + +- react + +2.后端 + +- C# asp.net core +- java springboot springcloud springmvc +- python Django +- C/C# +- 汇编语言 +- 二进制 +- nodejs +- go +- php +- vb +- dephi +- 易语言 +- lisp +- rust +- ruby +- lua + +## 练习 +1.输出老子的名言 在WebStorm工具中直接嵌入JavaScript代码,在页面中输出老子的名言“千里之行,始于足下。” +```html + + + +``` +2.输出明日学院的官网地址 在html文件中调用外部JavaScript文件,在页面中显示对话框,对话框中输出明日学院官方地址。 +```html + + + +``` +```js +alert('http://www.mingrisoft.com') +``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251112-Js\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\350\277\220\347\256\227\347\254\246.md" "b/\351\273\204\346\267\274\346\236\227/20251112-Js\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\350\277\220\347\256\227\347\254\246.md" new file mode 100644 index 0000000000000000000000000000000000000000..0926810ee5987ba560dddde3c4e71616baddadc0 --- /dev/null +++ "b/\351\273\204\346\267\274\346\236\227/20251112-Js\346\225\260\346\215\256\347\261\273\345\236\213\344\270\216\350\277\220\347\256\227\347\254\246.md" @@ -0,0 +1,99 @@ +## 一、JavaScript笔记 +### 数据类型 +1.数值型 +2.字符串型 +3.布尔型 +4.特殊数据类型 + +### 运算符 +1.算术运算符 + +| 运算符 | 描述 | 示例 | +|-----|-----|-----| +| + | 加运算符 | 5+7 //返回值为12 | +| - | 减运算符 | 9-3 //返回值为6 | +| * | 乘运算符 | 5*6 //返回值为30 | +| / | 除运算符 | 12/2 //返回值为6 | +| % | 取模运算符 | 7%5 //返回值为2 | +| ++ | 自增运算符。该运算符的使用有两种情况,即i++(在使用i之后,使i的值加1)和++i(在使用i之前,先使i的值加1) | i=2;j=i++ //j的值为2,i的值为3 i=2;j=++i //j的值为3,i的值为2 | +| -- | 自减运算符。该运算符的使用有两种情况,即i--(在使用i之后,使i的值减1)和--i(在使用i之前,先使i的值减1) | i=7;j=i-- //j的值为7,i的值为6 i=7;j=--i //j的值为6,i的值为6 | + +2.字符串运算符 + +3.比较运算符 + +4.赋值运算符逻辑运算符 + +5.条件运算符 + +6.其他运算符 + +7.运算符的优先级和结合性 + +## 练习 +训练3.输出俄罗斯的国土面积 俄罗斯是世界上国土面积最大的国家,其面积约为17100000km²平方米。将该页面定义在变量中,并输出俄罗斯的国土面积。 +```html + + + +``` +训练4.输出人物的个人信息 将郭靖的姓名、性别、年龄、身高和武功这些个人信息定义在变量中,并在页面输出。 +```html + +

个人信息

+ + +``` +综合练习1.输出《九阴神功》心法 使用转义字符输出张无忌所练的《九阴神功》的心法。 +```html + +``` +综合练习2.计算员工的实际收入 假设某员工的月薪为6500元,专项扣除费用共500元,个人所得税起征点是5000元,税率为3%,计算该员工的实际收入。(提示:实际收入=(月薪-专项扣除)-(月薪-专项扣除-个税起征点)*税率) +```html + +``` +综合练习3.判断2024年2月的天数 闰年2月的天数是29天,非闰年2月的天数是28天,应用条件运算符判断2024年2月的天数。 +```html + +``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251113-js\350\277\220\347\256\227\347\254\246.md" "b/\351\273\204\346\267\274\346\236\227/20251113-js\350\277\220\347\256\227\347\254\246.md" new file mode 100644 index 0000000000000000000000000000000000000000..ee5aeb6ef569689fae5327afa1e7af17e74906d0 --- /dev/null +++ "b/\351\273\204\346\267\274\346\236\227/20251113-js\350\277\220\347\256\227\347\254\246.md" @@ -0,0 +1,108 @@ +## 一、JavaScript笔记 +### 运算符 +1.条件运算符 + +2.其他运算符 + +- 逗号运算符 + +- typeof运算符 + +| 数据类型 | 返回值 | +|-----|-----| +| 数值 | number | +| 字符串 | string | +| 布尔值 | boolean | +| undefined | undefined | +| null | object | +| 对象 | object | +| 函数 | function | + +- new运算符 + +## 练习 +训练5.计算本息合计 假设某银行定期存款3年的年利率为2.75%,某客户的存款金额为100000元,计算该客户存款3年后的本息合计是多少。(提示:本息合计=存款金额+存款金额*年利率*存款期限)。 +```html + +``` +训练6.判断考试成绩是否合格 考试成绩达到60分以上表示合格。周星星的英语考试成绩是65分,使用条件运算符判断该考试成绩是否合格。 +```html + +``` +训练7.计算梯形稻田的面积 有一块梯形稻田,稻田上边缘长为30m,下边缘长为50m,高度为30m,计算这块梯形稻田的面积 +```html + +``` +### 3.4实践与练习 +综合1.判断身体质量指数 身体质量指数(BMI)是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。以男性为例,BMI值低于20表示体重过轻;BMI值为20~25表示体重适中;BMI值为25~30表示体重过重;BMI值为30~35表示非常肥胖。假如某男性的BMI值为23,判断该男性的体重在哪一个范围。 +```html +```html + +``` +综合2.循环输出年份和月份 为了使用户能够方便地选择年、月、日等日期方面的信息,可以把它们放在下拉列表中,编写程序,通过循环语句输出年份和月份。 +```html + +``` +综合3.输出10行10列的表格 应用循环语句输出10行10列的表格,并在单元格中输出对应的数字。 +```html + + +
+``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/20251114-\347\254\254\344\270\211\347\253\240\347\273\203\344\271\240.md" "b/\351\273\204\346\267\274\346\236\227/20251114-\347\254\254\344\270\211\347\253\240\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..a4e312e7c22e2bfb6c0a6c9091c5e5004289a48a --- /dev/null +++ "b/\351\273\204\346\267\274\346\236\227/20251114-\347\254\254\344\270\211\347\253\240\347\273\203\344\271\240.md" @@ -0,0 +1,140 @@ +## 第三章练习 +训练1.获取数字中的最小值 定义4个数值型变量,值分别为26、17、10、20,应用简单if语句获取这4个数字中的最小值。 +```html + +``` +训练2. 判断空气污染程度 空气污染指数(API)是评估空气质量状况的一组数字,如果空气污染指数为0~100,则空气质量状况属于良好;如果空气污染指数为101~200,则空气质量状况属于轻度污染;如果空气污染指数为201~1300,则空气质量状况属于中度污染;如果空气污染指数大于300,则空气质量状况属于重度污染。假设某城市今天的空气污染指数为56,判断该城市的空气污染程度。 +```html + +``` +训练3.判断当前季节 将当前的月份定义在变量中,使用switch语句判断当前月份属于哪个季节。 +```html + +``` +训练4.输出员工每一年的工资 某企业正式员工的工作时间每增加一年,工龄工资增加50元。假设该企业的某员工已经工作了5年,他的基本工资为3000元,应用do...while语句计算并输出该员工每一年的实际工资情况。 +```html + +``` +训练5.鸡兔同笼 有若干只鸡、兔同在一个笼子里,从上面数,有35个头,从下面书,有94只脚,使用for语句计算鸡的数量和兔的数量。 +```html + +``` +训练6.计算1-1000所有65的倍数的数字之和 在for循环语句中应用continue语句,计算1-1000所有65的倍数的数字之和。 +```html + +``` +训练7.输出尚未使用的办公卡位 某公司新建3×3个办公卡位,现只有第1排第3个和第3排第2个卡位被使用,输出尚未使用的卡位。 +```html + +``` \ No newline at end of file diff --git "a/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\203\344\271\2401.png" "b/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\203\344\271\2401.png" new file mode 100644 index 0000000000000000000000000000000000000000..d8fdba8d5a3ce884a7de4abe8e4e9f4e881265e1 Binary files /dev/null and "b/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\203\344\271\2401.png" differ diff --git "a/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\203\344\271\2402.png" "b/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\203\344\271\2402.png" new file mode 100644 index 0000000000000000000000000000000000000000..7a6f000d9e4a98094ceba3e0ad4ae8f0c8886837 Binary files /dev/null and "b/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\203\344\271\2402.png" differ diff --git "a/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\203\344\271\2403.png" "b/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\203\344\271\2403.png" new file mode 100644 index 0000000000000000000000000000000000000000..07ea5132a9c5e28101847477798f023e7e7d0055 Binary files /dev/null and "b/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\203\344\271\2403.png" differ diff --git "a/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\203\344\271\2404.png" "b/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\203\344\271\2404.png" new file mode 100644 index 0000000000000000000000000000000000000000..7daf2b9eca1819b24c3da2549725cab81cf22350 Binary files /dev/null and "b/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\203\344\271\2404.png" differ diff --git "a/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\274\345\220\2101.png" "b/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\274\345\220\2101.png" new file mode 100644 index 0000000000000000000000000000000000000000..186e607618d65d6f324ba7b2c858989f7cc5d495 Binary files /dev/null and "b/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\274\345\220\2101.png" differ diff --git "a/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\274\345\220\2102.png" "b/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\274\345\220\2102.png" new file mode 100644 index 0000000000000000000000000000000000000000..0c6014bb913a4804c8d790ea87ed82252e351fe5 Binary files /dev/null and "b/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\274\345\220\2102.png" differ diff --git "a/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\274\345\220\2103.png" "b/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\274\345\220\2103.png" new file mode 100644 index 0000000000000000000000000000000000000000..20aa60801ef0a3d4a7250eadcd936b3acfe71b66 Binary files /dev/null and "b/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\347\273\274\345\220\2103.png" differ diff --git "a/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\350\256\255\347\273\2035\346\234\254\346\201\257.png" "b/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\350\256\255\347\273\2035\346\234\254\346\201\257.png" new file mode 100644 index 0000000000000000000000000000000000000000..90d25b51928f52701340aea8632c85bc7d75702b Binary files /dev/null and "b/\351\273\204\346\267\274\346\236\227/\345\233\276\347\211\207/\350\256\255\347\273\2035\346\234\254\346\201\257.png" differ