From b9366fde69ed51519cf777d60ed9519ecb0c1a79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E5=BF=97=E5=BC=BA?= <3165279696@qq.com> Date: Thu, 28 Nov 2024 11:47:14 +0800 Subject: [PATCH] 1 --- .../04-\347\254\224\350\256\260/README.md" | 374 ++++++++++++++++++ .../assets/1676039814018.png" | Bin 0 -> 61783 bytes .../assets/1676040472631.png" | Bin 0 -> 49650 bytes .../assets/1676047389456.png" | Bin 0 -> 41862 bytes .../assets/1676047436362.png" | Bin 0 -> 66059 bytes .../assets/1676047834796.png" | Bin 0 -> 52073 bytes .../assets/1676047846593.png" | Bin 0 -> 30843 bytes .../assets/1676049635087.png" | Bin 0 -> 45017 bytes .../assets/error.png" | Bin 0 -> 60062 bytes .../css/index.css" | 115 ++++++ .../iconfont/iconfont.css" | 23 ++ .../iconfont/iconfont.ttf" | Bin 0 -> 2044 bytes .../iconfont/iconfont.woff" | Bin 0 -> 1316 bytes .../iconfont/iconfont.woff2" | Bin 0 -> 920 bytes ...\350\241\250\346\241\210\344\276\213.html" | 161 ++++++++ 15 files changed, 673 insertions(+) create mode 100644 "\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/04-\347\254\224\350\256\260/README.md" create mode 100644 "\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/04-\347\254\224\350\256\260/assets/1676039814018.png" create mode 100644 "\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/04-\347\254\224\350\256\260/assets/1676040472631.png" create mode 100644 "\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/04-\347\254\224\350\256\260/assets/1676047389456.png" create mode 100644 "\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/04-\347\254\224\350\256\260/assets/1676047436362.png" create mode 100644 "\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/04-\347\254\224\350\256\260/assets/1676047834796.png" create mode 100644 "\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/04-\347\254\224\350\256\260/assets/1676047846593.png" create mode 100644 "\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/04-\347\254\224\350\256\260/assets/1676049635087.png" create mode 100644 "\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/04-\347\254\224\350\256\260/assets/error.png" create mode 100644 "\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/\347\273\274\345\220\210\346\241\210\344\276\213-\345\255\246\347\224\237\347\273\237\350\256\241\350\241\250/css/index.css" create mode 100644 "\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/\347\273\274\345\220\210\346\241\210\344\276\213-\345\255\246\347\224\237\347\273\237\350\256\241\350\241\250/iconfont/iconfont.css" create mode 100644 "\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/\347\273\274\345\220\210\346\241\210\344\276\213-\345\255\246\347\224\237\347\273\237\350\256\241\350\241\250/iconfont/iconfont.ttf" create mode 100644 "\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/\347\273\274\345\220\210\346\241\210\344\276\213-\345\255\246\347\224\237\347\273\237\350\256\241\350\241\250/iconfont/iconfont.woff" create mode 100644 "\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/\347\273\274\345\220\210\346\241\210\344\276\213-\345\255\246\347\224\237\347\273\237\350\256\241\350\241\250/iconfont/iconfont.woff2" create mode 100644 "\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/\347\273\274\345\220\210\346\241\210\344\276\213-\345\255\246\347\224\237\347\273\237\350\256\241\350\241\250/\345\255\246\347\224\237\345\260\261\344\270\232\347\273\237\350\256\241\350\241\250\346\241\210\344\276\213.html" diff --git "a/\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/04-\347\254\224\350\256\260/README.md" "b/\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/04-\347\254\224\350\256\260/README.md" new file mode 100644 index 0000000..36adf73 --- /dev/null +++ "b/\345\210\230\345\277\227\345\274\272/17 \347\273\274\345\220\210\346\241\210\344\276\213 \345\255\246\347\224\237\347\273\237\350\256\241\350\241\250 \351\207\215\345\206\231/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 + +  + +## window对象 + +**BOM** (Browser Object Model ) 是浏览器对象模型 + +- window对象是一个全局对象,也可以说是JavaScript中的顶级对象 +- 像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的 +- 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法 +- window对象下的属性和方法调用的时候可以省略window + +  + +## 定时器-延迟函数 + +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 办公系统中见到。 + +  + +常见方法: + +  + +~~~html + + + + + + +~~~ + +## 本地存储(今日重点) + +本地存储:将数据存储在本地浏览器中 + +常见的使用场景: + +L6_j$UtMJXc7Mn=pHxAJOZ$4F8aq5QKl)d~|@2e~cxDB!3@^
z)7|$pyE03Zr*KYKT{IUsD43meK6O2a86Mnb53KEhJ_-PxcIUV0JR=_6Z!lep|BPUD
zC_9Q<_yv#&DY=%dpR6GBT8X$@vr3yZIWU??MRINghZxZlEs>LazJV1LYs$FoLTbSS
z^qQhK$^mv?CI#+;fog?_E%tLh-ml^@v#hpt82lw2K@rFeHC=k(XZVOmfhLb#VMMND
z)i{H;VVlPBw!_y*a#7lwmZOzdj@g=L@{Xl}K_H9LZ@)NXir3iC6*10tCW!GN+~onE
zmtGWO3BwRoLq4C$4)db3UE*qg9V9u5|LJiozGRP;W}Lb^Qn71$Ww+-ImWrIVXo#El
zITdeNdfQA$Ao$$o_G>4-a;2^3A*O|MQ1HPebOmeHcFwP|{f79siM@ry{;J`3?pbO9
zX@@|tD?GK}ZtbH*eoqLaR{k;-^4p(P;+o1r&j+$QJ3I4!jeVhh_6jXsVamHU(Y0Qe
z;+yiwg>MDDPuUIU1Zr7I1aEILSUWyPK3B<{1i6s-ZE=Q0NR3V00C4Cs+ugsMNXJdw
zz-Khff*nUL4p24P $o~uUU9f19V0;hdtTUE`yU=Mb_l1R(a94H5_tQ)!$wkKdCk=U5Kw7|
zKzJTXsI;Eb6`20T?Z3pEX*y;4YiX(xiUf L8j
zvc=mBtzl4{LoXL1i;?+RUl8K^c4eA{PcV{%lXZn{@Ec)=&picQHLfwno~DnyLaGS6O`|9H5Vrf=46+7FCAs!=7&WxV^fc(%ZGbUuhCiB
zWuroy%&WN1yQ7z$R
QgI*Wb*A$3uQHPDc*)f
z+v+KQ&5s8Rg(ME^-pwp*F7L6+u!Ic
U>6X(
z?+&~^K&_Zp`5YLu)A83ZiK)+DNv9WzEZ!+Acp(#t%lAZh5rCl3h`q&-#N=JD8qU1=
z;
z6$U50Nw+!d*N}yTl;O&RlD`?JzB;{_pP$EgEpKF6fk29M#+
kMQwymVKsUBh-%zIgiMZ6?iXh)1n!?rl@~@h(1Bm(9Db63CJ~?;=SB%X*vk
zyaeh!+K_a22KGmH-Q8a{Iy?e2b5{rPet$r*@J^gXE~T&EvcY)RQ}I4<3HqMue;gR5
zmK(N@jLKpyE4#y@ExS1qfts_z9+puhhM*l`0~eII8$QhGX+^^!XWM|h9Jn*-)&Fc`
zkIF^vA2gx)Bupl+2LgdHp;F;oIOQySzYFzL98*(QD*s!}&oGZopZM{)#+aBh;BsSp
zqls_G<=bql*WtPurp5L)!q)fKJt);8GJLKpK7}b})=w~#y{~VRTW{>~XX(TPLKgwN
zca2bGX1VUOm6UB8Yttr#3N*!CkN*B(zLaGW5<`;Dn_F)bvrFk&c?Yvaj5q7Eer!5W
zioah7PJZ)`uJ5{?yvAKiPIvuLDjF>SwffBBAKawK&PxnGReoNj$(?5qLuBr$$|;F)hEimQ}WlEP!Mggz4V~p!P<>$nP~i3c4rjvyJFMmOE{a%-tCiPdh*G{WbNq
zO=qD7fgO#~3{bg>Vt92c7&))S%(?QbMo3E0z=k
w_D
z?d@0jPcH!!G`8b#m@3eOlQ3l1pmeLKo?j0LPZXbXdwW3|J^j92uPhkrkwpZ*#;$9R
zNe?HVL02@NUoS5B1)PHWv5B_An!YRTf{CfoAOq%3QEUBI-sNt)>S|`|?I(Tm=rFXQ
zlPL<60g0#It3g(;RaPz4%KP0oNoD>?Rwl3;mO|Kt+E+c!IX=C&XgsZGUdXXM2;At&
zt+(|@2I>`#-aaScCC8at<&||xf_muV3ZL3!(0p1hp0PZ>?s^rn>TZkuoezwCB>I>n
zRx0v9W-W!9aQo!ZMUkxQlo|<&AuSk4%>h|?Z_QED>9znv}
z3$OfFr(L4HPT3cLH6!+1qe%Pwvb-zthaMz4