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/\345\274\240\351\271\217\347\277\224/20251117.md" "b/\345\274\240\351\271\217\347\277\224/20251117.md" new file mode 100644 index 0000000000000000000000000000000000000000..9cd0e71ac72377e6f35494989594dc38a45a9592 --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251117.md" @@ -0,0 +1,63 @@ +## 流程控制 + +### 判断 +- 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 (){} + +- 第一种定义方式：传统，原始方式 +```js +function getNameById(){ + // arguments关键字用于捕获调用函数时传入的参数（实际参数） + console.log(argumeents); +} +``` +- 箭头函数 +```js + let getNameById = (name,age) =>{ + console.log(name); + console.log(age); + } +``` +### 定义和调用 +- 定义可指定形象 +- 调用的时候可任意指定实参，也可以不指定 + +### 返回值 +- 有return,则有返回值，而且通常不为undefined +- 无return，总是私下返回一个undefined + +### 练习1 +```html + +``` +### 练习2 +```html + +``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251119.md" "b/\345\274\240\351\271\217\347\277\224/20251119.md" new file mode 100644 index 0000000000000000000000000000000000000000..ddee73671a7c6099daa91851e2186fb2132026e8 --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251119.md" @@ -0,0 +1,243 @@ +## 函数 +1. 函数参数 + +- function 自定义函数名（形参1，形参1，。。。）{函数体} + +2.函数返回值 + +- 基本类型（字符串、数字）：按值传递，函数内修改不影响外部变量 +- 引用类型（对象、数组）：按引用传递，函数内修改属性 / 元素会影响外部\ + +```js +function abs(ooo){ + ooo.name="李四"; +} +const person = {name:"张三"}; +abs(person); +console.log(person.name)//输出李四 +``` + +- 用return语句指定返回值，执行后立即退出函数 +- 无return时，默认返回undefined +- 箭头函数可省略，return 和大括号（单表达式场景）：const double = x=>2*2 + + +### 练习1 +```js + +``` + +### 练习2 +```js + +``` + +### 练习3 +```js + +``` + +### 练习4 +```js + +``` + +### 练习5 +```js + +``` + +### 练习6 +```js + + + + +
+ +``` + +### 练习7 +```js + +``` + +### 练习8 +```js + +``` + +### 练习9 +```js + +``` + diff --git "a/\345\274\240\351\271\217\347\277\224/20251120.md" "b/\345\274\240\351\271\217\347\277\224/20251120.md" new file mode 100644 index 0000000000000000000000000000000000000000..297d08302d4be3b9c45887ac4c13de9c63255b65 --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251120.md" @@ -0,0 +1,318 @@ +# JavaScript 内置对象用法总结 + +## 1. Math 对象 + +### 1.1 数学常数 + +```javascript +Math.PI; // 圆周率 π ≈ 3.14159 +Math.E; // 自然常数 e ≈ 2.718 +Math.SQRT2; // 2的平方根 ≈ 1.414 +``` + +### 1.2 取整方法 + +```javascript +Math.round(4.7); // 5 - 四舍五入 +Math.floor(4.7); // 4 - 向下取整 +Math.ceil(4.3); // 5 - 向上取整 +Math.trunc(4.7); // 4 - 去除小数部分 +``` + +### 1.3 随机数生成 + +```javascript +Math.random(); // 0-1之间的随机数 +Math.floor(Math.random() * 100); // 0-99的随机整数 +``` + +### 1.4 最大值最小值 + +```javascript +Math.max(1, 5, 3); // 5 - 返回最大值 +Math.min(1, 5, 3); // 1 - 返回最小值 +``` + +### 1.5 幂和平方根 + +```javascript +Math.pow(2, 3); // 8 - 2的3次方 +Math.sqrt(16); // 4 - 平方根 +Math.cbrt(8); // 2 - 立方根 +``` + +### 1.6 三角函数 + +```javascript +Math.sin(Math.PI / 2); // 1 - 正弦函数 +Math.cos(Math.PI); // -1 - 余弦函数 +Math.tan(Math.PI / 4); // 1 - 正切函数 +``` + +## 2. Date 对象 + +### 2.1 创建日期对象 + +```javascript +new Date(); // 当前时间 +new Date("2024-01-15"); // 指定日期字符串 +new Date(2024, 0, 15); // 指定年月日（月份0-11） +``` + +### 2.2 获取日期时间 + +```javascript +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 设置日期时间 + +```javascript +const date = new Date(); +date.setFullYear(2025); // 设置年份 +date.setMonth(5); // 设置月份（0-11） +date.setDate(20); // 设置日期 +date.setHours(15, 30, 0); // 设置小时、分钟、秒 +``` + +### 2.4 日期格式化 + +```javascript +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 时间戳 + +```javascript +const now = new Date(); +now.getTime(); // 1705309825123 - 毫秒时间戳 +Date.now(); // 1705309825123 - 当前时间戳 +``` + +### 2.6 日期计算 + +```javascript +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 事件监听 + +```javascript +// 添加事件监听 +element.addEventListener("click", function (event) { + console.log("元素被点击了"); +}); + +// 移除事件监听 +function handleClick(event) { + console.log("点击事件"); +} +element.removeEventListener("click", handleClick); +``` + +### 3.2 事件对象属性 + +```javascript +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 阻止默认行为 + +```javascript +// 阻止链接跳转 +link.addEventListener("click", function (e) { + e.preventDefault(); + console.log("阻止了默认跳转行为"); +}); + +// 阻止表单提交 +form.addEventListener("submit", function (e) { + e.preventDefault(); + console.log("阻止了表单提交"); +}); +``` + +### 3.4 阻止事件冒泡 + +```javascript +child.addEventListener("click", function (e) { + e.stopPropagation(); + console.log("子元素点击，阻止冒泡到父元素"); +}); + +parent.addEventListener("click", function () { + console.log("父元素点击"); // 不会执行 +}); +``` + +### 3.5 鼠标事件 + +```javascript +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 键盘事件 + +```javascript +document.addEventListener("keydown", function (e) { + console.log(`按下按键: ${e.key}, 键码: ${e.keyCode}`); +}); + +document.addEventListener("keyup", function (e) { + console.log(`释放按键: ${e.key}`); +}); +``` + +### 3.7 表单事件 + +```javascript +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 事件委托 + +```javascript +// 使用事件委托处理动态元素 +list.addEventListener("click", function (e) { + if (e.target.tagName === "LI") { + console.log("点击了列表项:", e.target.textContent); + } +}); +``` + +## 训练 1~3 + +```html + +``` + + +## 综合练习 + +```html + +``` + diff --git "a/\345\274\240\351\271\217\347\277\224/20251121.md" "b/\345\274\240\351\271\217\347\277\224/20251121.md" new file mode 100644 index 0000000000000000000000000000000000000000..baa82fb91fee6f1d18d782f5a95b54b15719afae --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251121.md" @@ -0,0 +1,231 @@ +# JavaScript 数组用法总结 + +## 1. 创建数组 + +### 1.1 字面量创建 +```javascript +const arr = [1, 2, 3, 4, 5] +``` + +### 1.2 构造函数创建 +```javascript +const arr = new Array(1, 2, 3) +``` + +### 1.3 创建空数组 +```javascript +const empty = [] +const withSize = new Array(5) // 创建长度为5的空数组 +``` + +## 2. 访问和修改元素 + +### 2.1 访问元素 +```javascript +const arr = ['a', 'b', 'c'] +console.log(arr[0]) // 'a' - 访问第一个元素 +``` + +### 2.2 修改元素 +```javascript +arr[1] = 'x' // ['a', 'x', 'c'] +``` + +### 2.3 数组长度 +```javascript +console.log(arr.length) // 3 +``` + +## 3. 添加和删除元素 + +### 3.1 末尾添加(push) +```javascript +arr.push('d') // ['a', 'b', 'c', 'd'] +``` + +### 3.2 末尾删除(pop) +```javascript +arr.pop() // ['a', 'b'] - 返回删除的元素 +``` + +### 3.3 开头添加(unshift) +```javascript +arr.unshift('z') // ['z', 'a', 'b', 'c'] +``` + +### 3.4 开头删除(shift) +```javascript +arr.shift() // ['a', 'b', 'c'] - 返回删除的元素 +``` + +## 4. 数组遍历 + +### 4.1 for循环 +```javascript +for (let i = 0; i < arr.length; i++) { + console.log(arr[i]) +} +``` + +### 4.2 forEach方法 +```javascript +arr.forEach(item => console.log(item)) +``` + +### 4.3 for...of循环 +```javascript +for (const item of arr) { + console.log(item) +} +``` + +## 5. 数组转换方法 + +### 5.1 map - 映射新数组 +```javascript +const doubled = [1, 2, 3].map(x => x * 2) // [2, 4, 6] +``` + +### 5.2 filter - 过滤元素 +```javascript +const evens = [1, 2, 3, 4].filter(x => x % 2 === 0) // [2, 4] +``` + +### 5.3 reduce - 累计计算 +```javascript +const sum = [1, 2, 3].reduce((acc, cur) => acc + cur, 0) // 6 +``` + +## 6. 查找和判断 + +### 6.1 find - 查找元素 +```javascript +const found = [1, 2, 3].find(x => x > 1) // 2 +``` + +### 6.2 includes - 包含检查 +```javascript +const hasTwo = [1, 2, 3].includes(2) // true +``` + +### 6.3 indexOf - 查找索引 +```javascript +const index = [1, 2, 3].indexOf(2) // 1 +``` + +## 7. 数组操作 + +### 7.1 slice - 切片 +```javascript +const arr = [1, 2, 3, 4, 5] +const part = arr.slice(1, 3) // [2, 3] - 不改变原数组 +``` + +### 7.2 splice - 删除/添加 +```javascript +arr.splice(1, 2, 'a', 'b') // 从索引1删除2个元素，添加'a','b' +``` + +### 7.3 concat - 合并数组 +```javascript +const newArr = [1, 2].concat([3, 4]) // [1, 2, 3, 4] +``` + +## 8. 排序和反转 + +### 8.1 sort - 排序 +```javascript +const sorted = [3, 1, 2].sort() // [1, 2, 3] +``` + +### 8.2 reverse - 反转 +```javascript +const reversed = [1, 2, 3].reverse() // [3, 2, 1] +``` + +## 9. 数组判断 + +### 9.1 Array.isArray +```javascript +Array.isArray([1, 2, 3]) // true +Array.isArray('hello') // false +``` + +### 9.2 every - 所有元素满足条件 +```javascript +const allPositive = [1, 2, 3].every(x => x > 0) // true +``` + +### 9.3 some - 至少一个元素满足条件 +```javascript +const hasNegative = [1, -2, 3].some(x => x < 0) // true +``` + +## 10. 字符串转换 + +### 10.1 join - 数组转字符串 +```javascript +const str = ['a', 'b', 'c'].join('-') // 'a-b-c' +``` + +### 10.2 split - 字符串转数组 +```javascript +const arr = 'a,b,c'.split(',') // ['a', 'b', 'c'] +``` + +## 11. 其他实用方法 + +### 11.1 fill - 填充数组 +```javascript +const filled = new Array(3).fill(0) // [0, 0, 0] +``` + +### 11.2 flat - 数组扁平化 +```javascript +const flattened = [1, [2, 3]].flat() // [1, 2, 3] +``` + +### 11.3 findIndex - 查找索引 +```javascript +const index = [1, 2, 3].findIndex(x => x > 1) // 1 +``` + +## 12. 数组解构 + +### 12.1 基本解构 +```javascript +const [first, second] = [1, 2, 3] // first=1, second=2 +``` + +### 12.2 跳过元素 +```javascript +const [first, , third] = [1, 2, 3] // first=1, third=3 +``` + +### 12.3 剩余元素 +```javascript +const [first, ...rest] = [1, 2, 3, 4] // first=1, rest=[2,3,4] +``` + +### 练习 +```js + let begin =new Date(2023,4,1); + let ending = new Date(2023,5,1); + + let abc = ending.getTime() - begin.getTime(); + let aab = abc/(1000*60*60); + document.write(`2023年5月1日到2023年6月1日 中间间隔：${aab}小时`); + + let a = new Date(); + let year = a.getFullYear(); + let month = a.getMonth() + 1; + let date = a.getDate(); + + let ending = new Date(2026,6,7); + + let abc = ending - a; + let getabc = abc/(1000*60*60*24); + document.write(`${eval(Math.ceil(getabc))}`) + + +``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251124.md" "b/\345\274\240\351\271\217\347\277\224/20251124.md" new file mode 100644 index 0000000000000000000000000000000000000000..b68dae2127f9f73fc263befa8c8f95ffe5fd5018 --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251124.md" @@ -0,0 +1,478 @@ +## String 的笔记 +### 一、核心概念梳理 +|比较方式| 关键字 / 方法| 作用| 适用场景| +|---|-----|----|----| +|引用比较| ==| 比较对象在堆中的地址| 判断两个变量是否指向同一对象| +|值比较| equals()| 比较字符串的实际内容| 判断字符串内容是否相同| +|忽略大小写值比较| equalsIgnoreCase()| 内容比较，忽略大小写| 如验证码、用户名比较| +|自然顺序比较| compareTo()| 按字典序比较，返回 int| 排序、大小判断| + +### 二、关键原理补充 +- 字符串常量池： +- 直接赋值的字符串（如 String s1 = "abc"）会存入常量池，相同值的字符串复用同一对象； +- new String("abc") 会在堆中创建新对象，即使值相同，地址也不同。 +- equals() 底层： +- String 重写了 Object 的 equals()，先判断地址，再逐字符比较内容。 +- compareTo() 规则： +- 返回 0：内容相同； +- 返回负数：当前字符串 < 参数字符串； +- 返回正数：当前字符串 > 参数字符串； +- （按字符的 Unicode 编码逐位比较，第一个不同字符的差值即为返回值） +### 三、完整代码示例 +```java +运行 +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 +1. 引用比较 (==)： +s1 == s2: true +s1 == s3: false +s3 == s4: false + +2. 值比较 (equals())： +s1.equals(s2): true +s1.equals(s3): true +s3.equals(s4): true + +3. 忽略大小写比较： +s1.equals(s5): false +s1.equalsIgnoreCase(s5): true + +4. 字典序比较 (compareTo())： +s1.compareTo(s6): 7 +s1.compareTo(s7): -6 +s1.compareTo(s8): 0 + +5. 特殊场景： +- s9.equals(""): true +- s10 == null ? true +- 五、避坑指南 +- 避免用 == 比较字符串内容：除非明确要判断是否为同一对象； +- Null 安全：调用 equals() 前，确保调用方非 null（或用 Objects.equals(a, b)）； +```java +运行 +// 安全写法：避免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()。 + +## 练习 + +```js + + + + 手机品牌销量排名 (Top 5) + + + + +
+ + + +``` + +### 练习2 ,3,4,5 +```js + 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 +```js + +``` +### 练习13 +```js + + + +
+ + + + +
+ 对应字母： +
+
+ + +``` +### 练习14 +```js + + + +
+

用户注册

+
+ + +
+
+ + +
+
+ +
+
+ + +``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251126.md" "b/\345\274\240\351\271\217\347\277\224/20251126.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\345\274\240\351\271\217\347\277\224/20251127.md" "b/\345\274\240\351\271\217\347\277\224/20251127.md" new file mode 100644 index 0000000000000000000000000000000000000000..739528080446c0e51166d4c14e6db3347d61f0ef --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251127.md" @@ -0,0 +1,495 @@ +# JavaScript 异常处理和程序调试总结 + +## 异常处理基础 + +### try-catch 语句 + +```javascript +try { + // 可能出错的代码 + const result = someUndefinedVariable + 1; +} catch (error) { + // 错误处理 + console.log("发生错误:", error.message); +} +``` + +### try-catch-finally 语句 + +```javascript +try { + console.log("尝试执行代码"); + throw new Error("自定义错误"); +} catch (error) { + console.log("捕获错误:", error.message); +} finally { + console.log("无论是否出错都会执行"); +} +``` + +## 错误类型 + +### Error - 基本错误类型 + +```javascript +try { + throw new Error("这是一个错误"); +} catch (error) { + console.log(error.name); // 'Error' + console.log(error.message); // '这是一个错误' +} +``` + +### TypeError - 类型错误 + +```javascript +try { + const obj = null; + obj.someMethod(); // 尝试调用null的方法 +} catch (error) { + console.log(error.name); // 'TypeError' +} +``` + +### ReferenceError - 引用错误 + +```javascript +try { + console.log(undefinedVariable); // 未定义变量 +} catch (error) { + console.log(error.name); // 'ReferenceError' +} +``` + +### SyntaxError - 语法错误 + +```javascript +try { + eval("const 123abc = 1;"); // 无效的变量名 +} catch (error) { + console.log(error.name); // 'SyntaxError' +} +``` + +### RangeError - 范围错误 + +```javascript +try { + const arr = new Array(-1); // 无效的数组长度 +} catch (error) { + console.log(error.name); // 'RangeError' +} +``` + +### URIError - URI 错误 + +```javascript +try { + decodeURIComponent("%"); // 无效的URI编码 +} catch (error) { + console.log(error.name); // 'URIError' +} +``` + +## 自定义错误 + +### 创建自定义错误类 + +```javascript +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})`); +} +``` + +### 使用自定义错误 + +```javascript +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}`); + } +} +``` + +## 错误处理模式 + +### 条件判断预防错误 + +```javascript +// 不好的做法 +function getLength(str) { + return str.length; // 如果str为null会出错 +} + +// 好的做法 +function getLengthSafe(str) { + if (str && typeof str === "string") { + return str.length; + } + return 0; +} +``` + +### 可选链操作符 + +```javascript +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 +``` + +### 空值合并运算符 + +```javascript +const input = null; +const value = input ?? "默认值"; +console.log(value); // '默认值' + +const count = 0; +const result = count ?? 100; +console.log(result); // 0 (0不是null或undefined) +``` + +## 调试方法 + +### console 调试方法 + +```javascript +// 基本日志 +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 语句 + +```javascript +function complexCalculation(a, b) { + debugger; // 执行到这里会暂停 + const result = a * b; + return result; +} + +const answer = complexCalculation(5, 10); +console.log(answer); +``` + +### 堆栈跟踪 + +```javascript +function functionA() { + functionB(); +} + +function functionB() { + functionC(); +} + +function functionC() { + console.trace("调用堆栈跟踪"); // 显示调用堆栈 +} + +functionA(); +``` + +## 异步错误处理 + +### Promise 错误处理 + +```javascript +fetch("/api/data") + .then((response) => response.json()) + .then((data) => console.log(data)) + .catch((error) => console.error("请求失败:", error)); +``` + +### async/await 错误处理 + +```javascript +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 错误处理 + +```javascript +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 + +```javascript +window.onerror = function (message, source, lineno, colno, error) { + console.log("全局错误:", message); + console.log("错误文件:", source); + console.log("错误位置:", lineno, ":", colno); + return true; // 阻止浏览器默认错误处理 +}; +``` + +### unhandledrejection 事件 + +```javascript +window.addEventListener("unhandledrejection", function (event) { + console.log("未处理的Promise拒绝:", event.reason); + event.preventDefault(); // 阻止浏览器默认错误提示 +}); +``` + +## 性能调试 + +### 性能测量 + +```javascript +// 使用 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`); +``` + +### 内存使用检查 + +```javascript +// 检查内存使用情况 +const memory = performance.memory; +console.log("已使用内存:", memory.usedJSHeapSize); +console.log("内存限制:", memory.jsHeapSizeLimit); +console.log("总堆大小:", memory.totalJSHeapSize); +``` + +## 最佳实践 + +### 具体的错误信息 + +```javascript +// 不好的做法 +throw new Error("操作失败"); + +// 好的做法 +throw new Error("用户注册失败: 邮箱已被使用"); +``` + +### 适当的错误层级 + +```javascript +function processUserData(userData) { + try { + validateUserData(userData); + saveToDatabase(userData); + } catch (error) { + if (error instanceof ValidationError) { + // 处理验证错误 + showUserError(error.message); + } else { + // 处理系统错误 + logSystemError(error); + showGenericError(); + } + } +} +``` + +### 错误日志记录 + +```javascript +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); + } +} +``` + +## 训练 + +```html + +``` + +- 效果图 + +![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/第九章训练.gif) + +## 综合 + +```html + +``` + +- 效果图 + ![](https://gitee.com/putians-first-life-qing/image-transmission-warehouse/raw/master/第九章综合.gif) diff --git "a/\345\274\240\351\271\217\347\277\224/20251128.md" "b/\345\274\240\351\271\217\347\277\224/20251128.md" new file mode 100644 index 0000000000000000000000000000000000000000..ede572ac111d9e506064a13680880a936c415482 --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251128.md" @@ -0,0 +1,490 @@ +## JavaScript 异常处理与程序调试笔记 +### 一、JavaScript 异常处理核心 +1. 异常的定义与类型 +- 本质：程序执行时偏离预期逻辑的意外事件，未处理会导致程序终止或产生错误输出。 +- 核心价值：增强程序健壮性（容错）、提升错误可排查性、优化用户体验。 +- 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 为空、登录态失效 + +2. 异常处理基本原则 +- 不滥用捕获：仅捕获可预测的异常，避免用 catch (e) {} 吞掉所有错误； +- 错误信息明确：包含「场景 + 原因 + 关键参数」，便于排查； +- 可恢复优先：处理后尽量让程序回归正常流程（如默认值兜底、重试）； +- 避免阻塞主线程：异步操作的异常需单独处理，不影响整体执行。 + +### 二、异常处理语法 +1. 基础结构：try-catch-finally +语法格式 +```js +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 也会执行。 +示例：处理类型错误 +```js +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') → 返回 "默认名称" +``` + +2. 主动抛出异常：throw 语句 +- 语法格式 +- throw 异常对象; // 可抛出 Error 实例、字符串、数字等（推荐 Error 实例） + +- 最佳实践 +- 优先抛出 Error 派生实例（保留 stack 调用栈），而非纯字符串 / 数字； +- 用于业务异常（如参数校验失败），明确中断异常流程。 +- 示例：主动抛出业务异常 +```js +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 位 +} +``` + +3. 自定义异常类 +场景 +区分 “系统异常” 和 “业务异常”，便于精准处理（如业务异常提示用户，系统异常上报监控）。 +实现方式（继承 Error 类） +// 自定义业务异常类 +```js +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); // 伪代码：上报监控 + } +} +``` + +4. 异步操作的异常处理 +```js +（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 程序调试技巧 +1. 基础调试：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;"); // 带样式输出 + +2. 浏览器调试工具（Chrome 为例） +-（1）调试面板核心功能（F12 打开） +- 面板 +- 用途 +- 关键操作 +- Sources +- 断点调试、查看源代码 +- 1. 点击行号添加断点；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} 次），不中断程- 序仅输出日志。 +3. 调试避坑指南 +- 避免用 alert() 调试：阻塞主线程，无法查看对象结构，且影响异步操作； +- 异步代码调试：async/await 可直接断点，Promise 需在 then/catch 中加断点，或使用日志断点； +- 生产环境调试： +- 保留 source-map（映射压缩前的源代码），但注意安全（避免暴露敏感逻辑）； +- 使用 console.debug() 输出调试信息（生产环境可通过浏览器过滤隐藏）； +- 排查 NaN/undefined 问题： +- 用 Number.isNaN() 判断 NaN（避免 == NaN，因 NaN 不等于任何值）； +- 用 typeof variable === "undefined" 判断未定义变量。 + +### 四、实战场景：异常处理最佳实践 + +1. 接口请求异常处理（fetch 示例） +```js +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; + } +} +``` +2. 函数参数校验异常 +```js +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); +} +``` +3. 全局异常捕获（兜底处理） +// 捕获同步代码异常 +```js +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 系列工具，高效定位问题； +- 最佳实践：参数校验前置、异常信息明确、全局兜底捕获、生产环境保留调试能力且兼顾安全。 + +## 练习 +```js +

第一题

+
+ +
+ +

第二题

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

第三题

+ + +

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

+ + + +

第四题

+ + +

宽度:

+

高度:

+ + + +

第五题

+
+ + + +
+ + +

第六题

+
+ + +

第七题

+
+ 用户名：
+ 密 码：
+
+
+ +``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251201.md" "b/\345\274\240\351\271\217\347\277\224/20251201.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\345\274\240\351\271\217\347\277\224/20251203.md" "b/\345\274\240\351\271\217\347\277\224/20251203.md" new file mode 100644 index 0000000000000000000000000000000000000000..3482a9b32711b0542ca041ac282e41b3de8f222d --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251203.md" @@ -0,0 +1,214 @@ +## 笔记 +1.getElementById()方法返回具有指定ID的元素。 +2.getElementsByTagName()方法返回具有指定标签名的元素集合。 +3.getElementsByName()方法返回具有指定类名的对象集合。 +4.querySelector()方法返回匹配指定CSS选择器的第一个元素 +5.querySelectorAll()方法返回匹配指定CSS选择器的所有元素 +6.createElement()方法用于创建一个新的元素节点 + +## 练习 +### 练习1,2 +``` js + + + + + +``` + +### 练习3 +``` js + + + +
+ + + +``` + +### 练习4 +``` js + + + + + + + +
+

李白《行路难•其一》

+

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

+

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

+

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

+

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

+

行路难，行路难，多歧路，今安在？

+

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

+
+ + + +``` + +### 练习5 +``` js + + + + 打开图片对话框 + + + + + +``` + +### 练习6 +``` js + + + + + +
+ + + + +``` diff --git "a/\345\274\240\351\271\217\347\277\224/20251204.md" "b/\345\274\240\351\271\217\347\277\224/20251204.md" new file mode 100644 index 0000000000000000000000000000000000000000..01df9e5529a4e8fee8052dc97ce5d3049573658a --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251204.md" @@ -0,0 +1,214 @@ +### 笔记 +``` +一、核心认知 +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`）、避免同步重排、高频事件节流防抖、删元素前解绑事件。 + +``` +### 练习 +```html + + + + + Document + + + + + + +
+ + + + + + + + + + + Document + + + + +
+ + 
+    夜空中最亮的星
+    能否听清
+    那仰望的人
+    心底的孤独和叹息
+    夜空中最亮的星
+    能否记起
+    曾与我同行
+    消失在风里的身影
+
+ + + + + +

最新电影资讯

+ + 输入影片资讯编号： + + + + +
+ + +
+ + + +

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

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

消散对白（节选）

+

丁禹兮

+

原諒我真的不太會告別

+

也沒想過有這一天

+

以為你隨口承諾的永遠

+

就可以敵過時間

+

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

+

新鮮感終歸不是愛

+

回憶在倒帶要怎麼釋懷?

+

說著放下卻陷入無限循環

+

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

+

卻不說答案

+

順其自然 隨冷風消散

+

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

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

广告内容标题

+

这里是广告的具体内容

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

2024年奥运会举办城市问答

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

网站内容

+

广告会5秒后自动消失

+ + + + + +``` + +### 练习4 +```js + + + +``` + +### 练习5 +```js + + + + + + +``` + +### 练习6 +```js + + + +
+ + +``` + +### 练习7 +```js + + + +
+ + + + + +
+ + + +``` + +### 练习8 +```js + + + + + + +``` +### 练习9 +```js + +
0
+ + + + +``` + + + diff --git "a/\345\274\240\351\271\217\347\277\224/20251210.md" "b/\345\274\240\351\271\217\347\277\224/20251210.md" new file mode 100644 index 0000000000000000000000000000000000000000..077759e688257b273e5ffd66511e61f080fd0eb5 --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251210.md" @@ -0,0 +1,342 @@ +## JavaScript Style 对象极简笔记 +一、Style 对象核心概念 +本质：封装 HTML 元素内联样式（style 属性）的对象（CSSStyleDeclaration），也可通过 getComputedStyle 获取元素最终渲染的计算样式（只读）。 +获取方式 +```javascript +运行 +// 内联样式（可写） +const inlineStyle = document.getElementById('box').style; +// 计算样式（只读，第二个参数为伪元素，无则传null） +const computedStyle = window.getComputedStyle(box, null); +``` +二、Style 对象的核心特性 +1. 样式属性的命名规则 +由于 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';| + +2. 样式值的格式 +- 设置样式值时，必须包含单位（除少数无单位属性如 z-index、opacity），且值为字符串类型： +```javascript +运行 +// 正确：带单位（px） +box.style.width = '200px'; +box.style.fontSize = '18px'; + +// 正确：无单位属性 +box.style.zIndex = '999'; +box.style.opacity = '0.8'; + +// 错误：缺少单位 +// box.style.height = 100; +``` + +三、核心操作 +1. 设置样式 +```javascript +运行 +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） +```javascript +运行 +// 添加类 +box.classList.add('active'); +// 移除类 +box.classList.remove('active'); +// 切换类（存在则删，不存在则加） +box.classList.toggle('active'); +// 判断是否包含类 +box.classList.contains('active'); +``` +五、常见场景 +```javascript +运行 +// 显示/隐藏 +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 +```js + +
郭小东是东
+ + + + +``` +### 练习2 +```js + + + + +``` +### 练习3 +```js + + + + +
+
HTML/CSS讨论区
+
JavaScript讨论区
+
C语言讨论区
+
Java讨论区
+
Android讨论区
+
Python讨论区
+
+ + + +``` +### 练习1 +```js + + + + + 图片1 + 图片2 + 图片3 + + + +``` +### 练习1 +```js + + + + 图片1 + 图片2 + 图片3 + + + +``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251211.md" "b/\345\274\240\351\271\217\347\277\224/20251211.md" new file mode 100644 index 0000000000000000000000000000000000000000..a9ce367493e8b163e3701a2d3d563b12abf83583 --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251211.md" @@ -0,0 +1,534 @@ +# Form对象 + +## 什么是Form对象 +- Form对象代表HTML中的表单元素（`
`标签） +- 是Document对象的一个重要组成部分 +- 用于收集用户输入数据并提交到服务器 +- 提供了访问和操作表单元素的方法和属性 + +## 获取Form对象的方法 +```javascript +// 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 | 表单中控件的数量 | + +```javascript +// 示例 +let form = document.forms[0]; +console.log(form.action); // 获取表单action属性 +console.log(form.method); // 获取表单method属性 +console.log(form.name); // 获取表单名称 +``` + +## Form对象的常用方法 + +| 方法 | 描述 | +|------|------| +| submit() | 提交表单 | +| reset() | 重置表单 | + +```javascript +// 提交表单 +form.submit(); + +// 重置表单 +form.reset(); +``` + +## 访问表单元素 + +### 通过elements集合 +```javascript +let form = document.forms[0]; + +// 通过索引访问 +let firstElement = form.elements[0]; + +// 通过name属性访问 +let usernameInput = form.elements["username"]; + +// 获取元素数量 +let elementCount = form.elements.length; +``` + +### 通过表单元素的name属性直接访问 +```javascript +// 如果表单元素有name="username" +let usernameInput = form.username; +// 或者 +let usernameInput = form["username"]; +``` + +## 表单元素对象 + +### Input元素 +```javascript +let input = form.elements["inputName"]; + +// 常用属性 +input.value // 当前值 +input.type // 类型（text, password, email等） +input.name // 名称 +input.disabled // 是否禁用 +input.readOnly // 是否只读 +input.checked // 对于checkbox/radio是否选中 +``` + +### Select元素 +```javascript +let select = form.elements["selectName"]; + +// 常用属性 +select.options // 所有选项的集合 +select.selectedIndex // 当前选中项的索引 +select.value // 当前选中项的值 +select.length // 选项数量 + +// 获取选中项 +let selectedOption = select.options[select.selectedIndex]; +``` + +### Textarea元素 +```javascript +let textarea = form.elements["textareaName"]; + +// 常用属性 +textarea.value // 当前文本内容 +textarea.name // 名称 +textarea.rows // 行数 +textarea.cols // 列数 +``` + +## 表单事件处理 + +### onSubmit事件 +```javascript +// 方法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事件 +```javascript +form.onreset = function() { + return confirm("确定要重置表单吗？"); +}; +``` + +## 表单验证示例 + +```javascript +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; // 验证通过 +} +``` + +## 实际应用示例 + +### 动态创建表单 +```javascript +// 创建表单元素 +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); +``` + +### 表单数据序列化 +```javascript +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对象（现代方法） + +```javascript +// 创建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. 禁用提交按钮防止重复提交 +```javascript +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. 表单自动填充检测 +```javascript +// 检测表单字段是否被自动填充 +function checkAutofill() { + let inputs = form.querySelectorAll("input"); + inputs.forEach(input => { + if (input.value && !input.classList.contains("filled")) { + input.classList.add("autofilled"); + } + }); +} +``` + +### 3. 表单字段依赖关系 +```javascript +// 根据一个字段的值改变另一个字段的状态 +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. 进行表单验证 +4. 控制表单提交行为 +5. 动态创建和修改表单 + +# 作业 + +```html + +
+
1. 取票功能
+ +
+
+
+
2. 文本区域调整高度
+ + + +
+
+
+
3. 课程选择（最多6门）
+ C语言
+ 机械制图
+ 单片机
+ 自动控制
+ 传感器
+ 高等数学
+ 计算机基础
+ Oracle数据库
+ 商务英语
+ PLC设计基础
+
+
+
+
+
4. 问答题
+

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

+ 布拉德·皮特
+ 亚当·桑德勒
+ 金凯瑞
+ 杰夫·丹尼尔斯
+ +
+
+
+
+
5. 爱好选择
+ 看电影
+ 听音乐
+ 演奏乐器
+ 打篮球
+ 看书
+ 上网
+ + + +
+
+
+
6. 城市选择
+ 选择省份： + + 选择城市： + +
+ + + +``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251212.md" "b/\345\274\240\351\271\217\347\277\224/20251212.md" new file mode 100644 index 0000000000000000000000000000000000000000..dc271b79d163cd77b06bd05338b5ed80ee87157c --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251212.md" @@ -0,0 +1,87 @@ +# Promise与JSON + +## JSON (JavaScript Object Notation) +### 什么是JSON +- 轻量级数据交换格式 +- 易于人阅读和编写 +- 易于机器解析和生成 +- 独立于语言的文本格式 + +### JSON语法 +```javascript +// 对象表示 +{"name": "张三", "age": 25, "city": "北京"} + +// 数组表示 +[{"name": "张三"}, {"name": "李四"}] + +// 嵌套结构 +{ + "students": [ + {"name": "张三", "scores": [85, 92, 78]}, + {"name": "李四", "scores": [90, 88, 95]} + ] +} +``` + +### JSON与JS对象转换 +```javascript +// 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状态 +1. Pending（待定）- 初始状态 +2. Fulfilled（已成功）- 操作成功完成 +3. Rejected（已失败）- 操作失败 + +### Promise基本用法 +```javascript +// 创建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链式调用 +```javascript +fetch('/api/data') + .then(response => response.json()) + .then(data => processData(data)) + .then(result => console.log(result)) + .catch(error => console.error(error)); +``` + +### async/await语法 +```javascript +async function fetchData() { + try { + let response = await fetch('/api/data'); + let data = await response.json(); + console.log(data); + } catch (error) { + console.error(error); + } +} +``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251215.md" "b/\345\274\240\351\271\217\347\277\224/20251215.md" new file mode 100644 index 0000000000000000000000000000000000000000..09fc0228cb2ec8390e10433d9d2f25621618ead2 --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251215.md" @@ -0,0 +1,28 @@ +### 练习 +```js +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) + +``` \ No newline at end of file diff --git "a/\345\274\240\351\271\217\347\277\224/20251217.md" "b/\345\274\240\351\271\217\347\277\224/20251217.md" new file mode 100644 index 0000000000000000000000000000000000000000..c6e7da1405d4d9974022abfd71a9b1f3a085c000 --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251217.md" @@ -0,0 +1,39 @@ +### 练习 + +```js +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/\345\274\240\351\271\217\347\277\224/20251218.md" "b/\345\274\240\351\271\217\347\277\224/20251218.md" new file mode 100644 index 0000000000000000000000000000000000000000..e0c7d42777d687e59e28d249eb1a3527c42ec12e --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251218.md" @@ -0,0 +1,75 @@ +### 练习 +```js +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/\345\274\240\351\271\217\347\277\224/20251219.md" "b/\345\274\240\351\271\217\347\277\224/20251219.md" new file mode 100644 index 0000000000000000000000000000000000000000..6deb100fc3199b0dd8b05585a94a33717ec0c342 --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251219.md" @@ -0,0 +1,172 @@ +### 练习 + +```js +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 + let string = "李四"; + let int = 19; + let bool = true; + document.writeln(` + 姓名：${string}，类型：${typeof int}
+ 年龄：${int}，类型：${typeof int}
+ 及格：${bool}，类型：${typeof bool} + `); + +``` + +5. 完成如下任务 + +- 题目描述： + 理解 null 和 undefined 的区别，分别创建这两种类型的变量并输出 +- 输出示例： + undefined 变量: undefined, 类型: undefined + null 变量: null, 类型: object + +```html + +``` + +6. 完成如下任务 + +- 题目描述： + 理解变量的作用域，演示块级作用域（let、const）和函数作用域（var）的区别 +- 输出示例： + let 和 const 有块级作用域 + var 只有函数作用域 + +```html + +``` + +7. 完成如下任务 + +- 题目描述： + 理解变量提升（Hoisting），对比 var、let、const 的行为 +- 输出示例： + var 声明会提升，但值为 undefined + let 和 const 存在暂时性死区 + +```html + +``` + +8. 完成如下任务 + +- 题目描述： + 使用模板字符串拼接变量和表达式 +- 输入示例： + name = "张三", age = 20, score = 85 +- 输出示例： + `${name}今年${age}岁，考了${score}分，${score >= 60 ? '及格' : '不及格'}` + +```html + +``` + +. 完成如下任务 + +- 题目描述： + 计算两个数字 a 和 b 的加、减、乘、除、取余结果，并返回一个包含这些结果的对象 +- 输入示例： + 10, 3 +- 输出示例： + { 加: 13, 减: 7, 乘: 30, 除: 3.33, 余: 1 } + +```html + +``` + +2. 完成如下任务 + +- 题目描述： + 将字符串 "123" 转换为数字类型，将数字 456 转换为字符串类型，并分别返回它们的值和类型 +- 输出示例： + 转换后的数字: 123, 类型: number + 转换后的字符串: "456", 类型: string + +```html + +``` + +3. 完成如下任务 + +- 题目描述： + 比较两个变量 a 和 b，返回 a 是否大于 b、是否等于 b、是否不等于 b 的布尔值结果 +- 输入示例： + 5, 3 +- 输出示例： + { 大于: true, 等于: false, 不等于: true } + +```html + +``` diff --git "a/\345\274\240\351\271\217\347\277\224/20251224.md" "b/\345\274\240\351\271\217\347\277\224/20251224.md" new file mode 100644 index 0000000000000000000000000000000000000000..47e12043fe2fa964940a9e96c691c8b65011ae6a --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251224.md" @@ -0,0 +1,153 @@ +## 笔记 + +![alt text](image.png) +![alt text](image-1.png) + +1. 完成如下任务 + +- 题目描述： + 给定一个分数 score，判断成绩等级：90 分以上为"优秀"，80-89 分为"良好"，60-79 分为"及格"，60 分以下为"不及格" +- 输入示例： + 85 +- 输出示例： + "良好" + +2. 完成如下任务 + +- 题目描述： + 使用 for 循环计算 1 到 n 的累加和 +- 输入示例： + 100 +- 输出示例： + 5050 + +```html + +``` + +3. 完成如下任务 + +- 题目描述： + 遍历数组 arr，输出所有偶数 +- 输入示例： + [1, 2, 3, 4, 5, 6, 7, 8] +- 输出示例： + [2, 4, 6, 8] + +```html + +``` + +4. 完成如下任务 + +- 题目描述： + 判断给定数字 num 是否为质数（只能被 1 和自身整除的大于 1 的自然数） +- 输入示例： + 17 +- 输出示例： + true + +```html + +``` + +5. 完成如下任务 + +- 题目描述： + 使用 while 循环找出小于 n 的所有 3 的倍数 +- 输入示例： + 20 +- 输出示例： + [3, 6, 9, 12, 15, 18] + +```html + +``` + +6. 完成如下任务 + +- 题目描述： + 使用 switch 语句根据星期几输出不同的信息 +- 输入示例： + dayOfWeek = 1 (周一) +- 输出示例： + "今天是工作日，要上班" + +```html + +``` + +7. 完成如下任务 + +- 题目描述： + 使用 for...of 循环遍历数组 +- 输入示例： + ['苹果', '香蕉', '橙子'] +- 输出示例： + 依次输出每个水果名称 + +```html + +``` diff --git "a/\345\274\240\351\271\217\347\277\224/20251225.md" "b/\345\274\240\351\271\217\347\277\224/20251225.md" new file mode 100644 index 0000000000000000000000000000000000000000..da411ecd032415801ecdbe979306c6c82794c679 --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251225.md" @@ -0,0 +1,145 @@ +## 笔记 + +![alt text](image.png) +![alt text](image-1.png) + +1. 使用公网 IP`添加记录` +2. 使用`ping`查看网站连接 +3. 登录服务器 +4. 创建文件 + - touch xxx 创建一个新的空文件 + - vim xxx.txt 打开/创建一个文件 +5. 创建文件夹 + - mkdir +6. 切换目录 + - cd +7. 列出目录清单 + - ls 列出指定目录下的内容（如果未指定则指列出当前目录） +8. 安装软件 + - apt install nginx -y +9. 更新软件 + +10. 完成如下任务 + +- 题目描述： + 使用 for...in 循环遍历对象的属性 +- 输入示例： + { name: "张三", age: 20, city: "北京" } +- 输出示例： + name: 张三 + age: 20 + city: 北京 + +```html + +``` + +9. 完成如下任务 + +- 题目描述： + 使用 break 和 continue 控制循环流程 +- 输入示例： + 查找数组中第一个大于 50 的数，跳过所有负数 +- 输出示例： + 演示 break（跳出循环）和 continue（跳过本次循环）的使用 + +```html + +``` + +10. 完成如下任务 + +- 题目描述： + 使用嵌套循环打印九九乘法表 +- 输出示例： + 1*1=1 + 1*2=2 2*2=4 + 1*3=3 2*3=6 3*3=9 + ... + +```html + +``` + +11. 完成如下任务 + +- 题目描述： + 使用条件运算符和 if-else 对比，实现同样的逻辑 + +- 输入示例： + age = 18 + +- 输出示例： + const status = age >= 18 ? '成年' : '未成年'; (三元运算符) + if (age >= 18) { status = '成年'; } else { status = '未成年'; } + + ```html + + ``` + +12. 完成如下任务 + +- 题目描述： + 实现一个简单的猜数字游戏，使用循环和条件判断 + +- 输出示例： + 生成 1-100 随机数，用户猜测，给出"太大"、"太小"或"猜对了"的提示 + + ```html + + ``` diff --git "a/\345\274\240\351\271\217\347\277\224/20251226.md" "b/\345\274\240\351\271\217\347\277\224/20251226.md" new file mode 100644 index 0000000000000000000000000000000000000000..68fae158b559ce1a3907e9976957fb558854e4b7 --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251226.md" @@ -0,0 +1,105 @@ +1. 完成如下任务 + +- 题目描述： + 计算并返回给定数组 arr 中所有元素的总和 +- 输入示例： + [ 1, 2, 3, 4 ] +- 输出示例： + 10 + +```html + +``` + +2. 完成如下任务 + +- 题目描述： + 合并数组 arr1 和数组 arr2。不要直接修改数组 arr，结果返回新的数组 +- 输入示例： + [1, 2, 3, 4], ['a', 'b', 'c', 1] +- 输出示例： + [1, 2, 3, 4, 'a', 'b', 'c', 1] + +```html + +``` + +3. 完成如下任务 + +- 题目描述： + 统计数组 arr 中值等于 item 的元素出现的次数 + +- 输入示例： + [1, 2, 4, 4, 3, 4, 3], 4 + +- 输出示例： + 3 + +```html + +``` + +4. 完成如下任务 + +- 题目描述（15 分）： + 找出数组 arr 中重复出现过的元素（不用考虑返回顺序） + +- 输入示例： + [1, 2, 4, 4, 3, 3, 1, 5, 3] + +- 输出示例： + [1, 3, 4] + +```html + +``` + +5. 完成如下任务 + +- 题目描述： + 删除数组 arr 中的指定元素 item，返回新数组（不修改原数组） +- 输入示例： + [1, 2, 3, 4, 2, 5], 2 +- 输出示例： + [1, 3, 4, 5] + +```html + +``` diff --git "a/\345\274\240\351\271\217\347\277\224/20251229.md" "b/\345\274\240\351\271\217\347\277\224/20251229.md" new file mode 100644 index 0000000000000000000000000000000000000000..ce1a0083f68a171093de9bea1c6c4988e51476a1 --- /dev/null +++ "b/\345\274\240\351\271\217\347\277\224/20251229.md" @@ -0,0 +1,57 @@ +## 笔记 + +### 练习 +```js +

欢迎学习javaScrip

+ --> + + + + + + + + +