Java Script 04-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_57519357/article/details/126697024

什么是BOM

使JavaScript 有能力与浏览器进行操作，window 代表整个浏览器窗口，同时也是页面的全局对象，Localhost 代表当前浏览器的地址信息，通过Localhost 获取地址信息或者操作浏览器的跳转页面。

BOM的一些常用方法

window.alert("警告框");

window.confirm("确定删除当前用户吗?");//确认框

window.prompt("请输入xxxx",'默认值');//提示框

window.setTimeout() //定时事件

window.clearTimeout(timer);// 清除延时器

window.clearInterval(timer);//执行清除定时器

练习：制作一个网页钟表

<body>
<h1></h1>
<button id="but">点我试试</button>
</body<

<script>
var but = document.getElementById("but");
but.onclick = function () {
   var timer =  window.setInterval(function () {
   var date = new Date();
   document.getElementsByTagName("h1")[0].innerHTML = date.getFullYear()+'年'+date.getMonth()+'月'+date.getDate()+'日'+'&nbsp;&nbsp;'+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
},1000);
</script>

如何当前BOM的信息

<body>
<button id="but">location.href</button>

<script>
console.log(location);
console.log(location.href);
console.log(location.origin);
console.log(location.protocol);
console.log('hostname:'+location.hostname); //当前主机名
console.log('host:'+location.host); //地址主机
console.log('port:'+location.port); //地址主机端口
console.log('pathname:'+location.pathname);//地址部分信息
console.log('search:'+location.search); //参数部分

var but = document.getElementById("but");
but.οnclick=function (){
location.href = './xxx.html';
}
</script>
</body>

什么是history，作用是什么

通过History 操作浏览器的前进与后退

history.back(); // 后退

history.go(1); //数字为1是前进一次，为负数比如-2是后退两步

history.forward(); // 前进

什么是Cookie

Cookie 是一些数据在用户的电脑上保存了, 当web服务器向浏览器发送web页面是在连接关闭后，服务器不记录用户信息.。

练习，创建一个cookie

function setCookie(cookieName, cookieValue, exda) { var date = new Date(); date.setTime(date.getTime() + (exda * 24 * 60 * 60 * 1000)); var expires = 'expires=' + date.getUTCDate(); document.cookie = cookieName + '=' + cookieValue + ';' + expires; }

 function setCookie(cookieName, cookieValue, exda) {
        var date = new Date();
        date.setTime(date.getTime() + (exda * 24 * 60 * 60 * 1000));
        var expires = 'expires=' + date.getUTCDate();
        document.cookie = cookieName + '=' + cookieValue + ';' + expires;
 }
setCookie('username', '张三', 1);

console.log(document.cookie);

function getCookie(cookieKey) {
    var key = cookieKey + '=';

    if (document.cookie.indexOf(key) != -1) {
       return  document.cookie.substring(key.length)
    }
    var cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
    var value = cookies[i].trim();
    if (value.indexOf(key)) {
    return cookies[i].substring(key.length, value.length);
      }
  }
}
console.log(getCookie('username'));

什么是WebStorage

WebStorage 是HTML5 本地存储解决方案之一，分为sessionStorage 和 localStorage。 sessionStorage ：将数据保存在session中，浏览器关闭就没了。 localStorage：一直将数据保存本地。
WebStorage的常用方法

localStorage.setItem() // 保存单个数据

localStorage.getItem() //读取单个数据

localStorage.removeItem(); //删除单个数据

localStorage.clear(); //删除所有

localStorage.key() //获取某个索引
箭头函数的格式

let fn = (参数) => { 方法体 } fn();//调用这个箭头函数
箭头函数的特点

当形参只有一个是小括号可以省略箭头函数中this 指向的是声明所在作用域下的this 如果函数体中只有一条语句可以省略大括号

箭头函数不能作为构造函数使用