diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/README.md" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/README.md" new file mode 100644 index 0000000000000000000000000000000000000000..36adf737d45b65733c6a247396bf44aaa36258d8 --- /dev/null +++ "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/README.md" @@ -0,0 +1,374 @@ +# 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\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676039814018.png" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676039814018.png" new file mode 100644 index 0000000000000000000000000000000000000000..5c46864a03d63d57998c0cffd2ee3373837d779c Binary files /dev/null and "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676039814018.png" differ diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676040472631.png" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676040472631.png" new file mode 100644 index 0000000000000000000000000000000000000000..5cd88714f28e05f3dc5afcb034de27aba8366a6a Binary files /dev/null and "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676040472631.png" differ diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047389456.png" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047389456.png" new file mode 100644 index 0000000000000000000000000000000000000000..021282c9ecbabb45664b908694c1c1bac297ce9c Binary files /dev/null and "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047389456.png" differ diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047436362.png" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047436362.png" new file mode 100644 index 0000000000000000000000000000000000000000..8d5542e131ade2c769d60564c0ac4f1d5eafa351 Binary files /dev/null and "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047436362.png" differ diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047834796.png" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047834796.png" new file mode 100644 index 0000000000000000000000000000000000000000..e9fdc8447571a3a819c66842c0b42bdcd49c392e Binary files /dev/null and "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047834796.png" differ diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047846593.png" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047846593.png" new file mode 100644 index 0000000000000000000000000000000000000000..0b2cad08021f170097cb6ff659e2b7c4e30dcb01 Binary files /dev/null and "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047846593.png" differ diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676049635087.png" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676049635087.png" new file mode 100644 index 0000000000000000000000000000000000000000..99c54d8bce9b6895cd5af7ccd34df81f66e86f7a Binary files /dev/null and "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676049635087.png" differ diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/error.png" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/error.png" new file mode 100644 index 0000000000000000000000000000000000000000..7e7af318ffc788390e2f52cafd85ccf5663474e6 Binary files /dev/null and "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/error.png" differ diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/css/index.css" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/css/index.css" new file mode 100644 index 0000000000000000000000000000000000000000..bf537709ea7ef92a9f3564533646f812e737c65b --- /dev/null +++ "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/css/index.css" @@ -0,0 +1,71 @@ +* { + margin: 0; + padding: 0; +} + +a { + text-decoration: none; + color:#721c24; +} +h1 { + text-align: center; + color:#333; + margin: 20px 0; + +} +table { + margin:0 auto; + width: 800px; + border-collapse: collapse; + color:#004085; +} +th { + padding: 10px; + background: #cfe5ff; + + font-size: 20px; + font-weight: 400; +} +td,th { + border:1px solid #b8daff; +} +td { + padding:10px; + color:#666; + text-align: center; + font-size: 16px; +} +tbody tr { + background: #fff; +} +tbody tr:hover { + background: #e1ecf8; +} +.info { + width: 900px; + margin: 50px auto; + text-align: center; +} +.info input, .info select { + width: 80px; + height: 27px; + outline: none; + border-radius: 5px; + border:1px solid #b8daff; + padding-left: 5px; + box-sizing: border-box; + margin-right: 15px; +} +.info button { + width: 60px; + height: 27px; + background-color: #004085; + outline: none; + border: 0; + color: #fff; + cursor: pointer; + border-radius: 5px; +} +.info .age { + width: 50px; +} \ No newline at end of file diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/\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\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/\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" new file mode 100644 index 0000000000000000000000000000000000000000..0b076c8be160de151324bd39092c290a32a8f3a4 --- /dev/null +++ "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/\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" @@ -0,0 +1,157 @@ + + + + + + + + 学生信息管理 + + + + +

新增学员

+
+ 姓名: + 年龄: + 性别: + + 薪资: + 就业城市: + + +
+ + +

就业榜条数据

+ + + + + + + + + + + + + + + +
学号姓名年龄性别薪资就业城市操作
+ + + + + \ No newline at end of file