diff --git "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/README.md" "b/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/README.md" deleted file mode 100644 index 36adf737d45b65733c6a247396bf44aaa36258d8..0000000000000000000000000000000000000000 --- "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/README.md" +++ /dev/null @@ -1,374 +0,0 @@ -# Web APIs - 第5天笔记 - -> 目标： 能够利用JS操作浏览器,具备利用本地存储实现学生就业表的能力 - -- BOM操作 -- 综合案例 - - -## js组成 - -JavaScript的组成 - -- ECMAScript: - - 规定了js基础语法核心知识。 - - 比如：变量、分支语句、循环语句、对象等等 - - -- Web APIs : - - DOM 文档对象模型， 定义了一套操作HTML文档的API - - BOM 浏览器对象模型，定义了一套操作浏览器窗口的API - - ![67604738945](assets/1676047389456.png) - -## window对象 - -**BOM** (Browser Object Model ) 是浏览器对象模型 - -- window对象是一个全局对象，也可以说是JavaScript中的顶级对象 -- 像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的 -- 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法 -- window对象下的属性和方法调用的时候可以省略window - - ![67604743636](assets/1676047436362.png) - -## 定时器-延迟函数 - -JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout - -**语法：** - -~~~JavaScript -setTimeout(回调函数, 延迟时间) -~~~ - -setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window - -间歇函数 setInterval : 每隔一段时间就执行一次， , 平时省略window - -清除延时函数： - -~~~JavaScript -clearTimeout(timerId) -~~~ - ->注意点 -> ->1. 延时函数需要等待,所以后面的代码先执行 ->2. 返回值是一个正整数，表示定时器的编号 - -~~~html - - - -~~~ - -## location对象 - -location (地址) 它拆分并保存了 URL 地址的各个组成部分， 它是一个对象 - -| 属性/方法 | 说明 | -| --------- | ---------------------------------------------------- | -| href | 属性，获取完整的 URL 地址，赋值时用于地址的跳转 | -| search | 属性，获取地址中携带的参数，符号 ？后面部分 | -| hash | 属性，获取地址中的啥希值，符号 # 后面部分 | -| reload() | 方法，用来刷新当前页面，传入参数 true 时表示强制刷新 | - -~~~html - -
- -
- 音乐 - 下载 - - - - -~~~ - -## navigator对象 - -navigator是对象，该对象下记录了浏览器自身的相关信息 - -常用属性和方法： - -- 通过 userAgent 检测浏览器的版本及平台 - -~~~javascript -// 检测 userAgent（浏览器信息） -(function () { - const userAgent = navigator.userAgent - // 验证是否为Android或iPhone - const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/) - const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/) - // 如果是Android或iPhone，则跳转至移动站点 - if (android || iphone) { - location.href = 'http://m.itcast.cn' - }})(); -~~~ - -## histroy对象 - -history (历史)是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退等 - -**使用场景** - -history对象一般在实际开发中比较少用，但是会在一些OA 办公系统中见到。 - - ![67604783479](assets/1676047834796.png) - -常见方法： - - ![67604784659](assets/1676047846593.png) - -~~~html - - - - - - -~~~ - -## 本地存储（今日重点） - -本地存储：将数据存储在本地浏览器中 - -常见的使用场景： - - 页面刷新数据不丢失 - -好处： - -1、页面刷新或者关闭不丢失数据，实现数据持久化 - -2、容量较大，sessionStorage和 localStorage 约 5M 左右 - -### localStorage（重点） - -**作用:** 数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失 - -**特性：**以键值对的形式存储，并且存储的是字符串， 省略了window - -![67604963508](assets/1676049635087.png) - -~~~html - - - - - - - - 本地存储-localstorage - - - - - - - -~~~ - -### sessionStorage（了解） - -特性： - -- 用法跟localStorage基本相同 -- 区别是：当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除 - -存储：sessionStorage.setItem(key,value) - -获取：sessionStorage.getItem(key) - -删除：sessionStorage.removeItem(key) - -### localStorage 存储复杂数据类型 - -**问题：**本地只能存储字符串,无法存储复杂数据类型. - -**解决：**需要将复杂数据类型转换成 JSON字符串,在存储到本地 - -**语法：**JSON.stringify(复杂数据类型) - -JSON字符串： - -- 首先是1个字符串 -- 属性名使用双引号引起来，不能单引号 -- 属性值如果是字符串型也必须双引号 - -~~~html - - - -~~~ - - - -**问题：**因为本地存储里面取出来的是字符串，不是对象，无法直接使用 - -**解决： **把取出来的字符串转换为对象 - -**语法：**JSON.parse(JSON字符串) - -~~~html - - - -~~~ - -## 综合案例 - -### 数组map 方法 - -**使用场景：** - -map 可以遍历数组处理数据，并且返回新的数组 - -**语法：** - -~~~javascript - - - -~~~ - ->map 也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。 -> ->map重点在于有返回值，forEach没有返回值（undefined） - -### 数组join方法 - -**作用：**join() 方法用于把数组中的所有元素转换一个字符串 - -**语法：** - -~~~html - - - -~~~ - - - - - - - - - diff --git "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676039814018.png" "b/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676039814018.png" deleted file mode 100644 index 5c46864a03d63d57998c0cffd2ee3373837d779c..0000000000000000000000000000000000000000 Binary files "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676039814018.png" and /dev/null differ diff --git "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676040472631.png" "b/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676040472631.png" deleted file mode 100644 index 5cd88714f28e05f3dc5afcb034de27aba8366a6a..0000000000000000000000000000000000000000 Binary files "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676040472631.png" and /dev/null differ diff --git "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676047389456.png" "b/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676047389456.png" deleted file mode 100644 index 021282c9ecbabb45664b908694c1c1bac297ce9c..0000000000000000000000000000000000000000 Binary files "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676047389456.png" and /dev/null differ diff --git "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676047436362.png" "b/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676047436362.png" deleted file mode 100644 index 8d5542e131ade2c769d60564c0ac4f1d5eafa351..0000000000000000000000000000000000000000 Binary files "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676047436362.png" and /dev/null differ diff --git "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676047834796.png" "b/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676047834796.png" deleted file mode 100644 index e9fdc8447571a3a819c66842c0b42bdcd49c392e..0000000000000000000000000000000000000000 Binary files "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676047834796.png" and /dev/null differ diff --git "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676047846593.png" "b/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676047846593.png" deleted file mode 100644 index 0b2cad08021f170097cb6ff659e2b7c4e30dcb01..0000000000000000000000000000000000000000 Binary files "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676047846593.png" and /dev/null differ diff --git "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676049635087.png" "b/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676049635087.png" deleted file mode 100644 index 99c54d8bce9b6895cd5af7ccd34df81f66e86f7a..0000000000000000000000000000000000000000 Binary files "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/1676049635087.png" and /dev/null differ diff --git "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/error.png" "b/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/error.png" deleted file mode 100644 index 7e7af318ffc788390e2f52cafd85ccf5663474e6..0000000000000000000000000000000000000000 Binary files "a/\346\237\263\345\262\232\346\243\256/20241125/04-\347\254\224\350\256\260/assets/error.png" and /dev/null differ diff --git "a/\346\237\263\345\262\232\346\243\256/20241125/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/css/index.css" "b/\346\237\263\345\262\232\346\243\256/241126/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/css/index.css" similarity index 100% rename from "\346\237\263\345\262\232\346\243\256/20241125/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/css/index.css" rename to "\346\237\263\345\262\232\346\243\256/241126/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/css/index.css" diff --git "a/\346\237\263\345\262\232\346\243\256/241126/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/desktop.ini" "b/\346\237\263\345\262\232\346\243\256/241126/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/desktop.ini" new file mode 100644 index 0000000000000000000000000000000000000000..ab17096eadd90af233dd943c062aec0c7c410f5d --- /dev/null +++ "b/\346\237\263\345\262\232\346\243\256/241126/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/desktop.ini" @@ -0,0 +1,4 @@ +[ViewState] +Mode= +Vid= +FolderType=Documents diff --git "a/\346\237\263\345\262\232\346\243\256/20241125/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250\346\241\210\344\276\213.html" "b/\346\237\263\345\262\232\346\243\256/241126/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250\346\241\210\344\276\213.html" similarity index 100% rename from "\346\237\263\345\262\232\346\243\256/20241125/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250\346\241\210\344\276\213.html" rename to "\346\237\263\345\262\232\346\243\256/241126/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250\346\241\210\344\276\213.html"