• 1_1 window对象:定时器


     基本概念

    //1. window对象在浏览器中有两重身份
       一个是:ECMAscript中的global对象
    一个是:浏览器窗口的JavaScript接口
    这意味着网页中所有的对象 变量 函数 都以window作为其global对象  都可以访问其上定义的parseInt()等全局方法

    //2. window对象的属性在全局作用域中有效
       所以很多浏览器API及相关构造函数都以window对象属性的形式暴露出来

    //3. 如果文档包含框架(<frame> 或 <iframe> 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。

    1)global作用域

    //1 因为 window对象被复用为ECMAscript的global对象
       所以通过var声明的所有全局变量和函数都会变成window对象的属性和方法
        let 和 const 声明的变量 都是块级局部变量  不会添加给 全局对象window
    
    //2 JavaScript有很多对象都暴露在全局作用域中
        比如location对象和 navigator对象
       因而它们也是window对象的属性

    代码

    // var 声明的变量是全局作用域 它们自动成了window对象的成员
    var age = 100;
    var say = function () {
        console.log(this.age);//say()存在于全局作用域中 所以this.age 映射到 window.age
    }
    //变量age 和函数 say() 被声明在全局作用域中 他们自动称为了 window对象的成员
    console.log(window.age);//100
    say();//100
    window.say();//100
    
    
    // let const 声明的变量不会添加给全局对象window
    let age = 100;
    const say = function () {
        console.log(this.age);
    }
    //let 和 const 声明的变量和函数 不会把变量添加给全局对象
    console.log(window.age);//undefined
    say();//undefined
    window.say();//window.say不是函数

    2)窗口关系

    //1 三个基本对象
    top对象: 始终指向最上层(最外层)窗口 即浏览器窗口本身
    parent对象:始终指向当前窗口的父窗口
    self对象: 是终极window属性 始终会指向window。self对象和window对象就是同一个对象
    之所以要暴露self对象 就是为了和 top对象 parent对象 保持一致
    它们三个都是window的属性 window.top window.parent window.self

    //2 注意点
      如果当前窗口是最上层窗口 则parent 等于 top ( 都等于window )
      最上层的window如果不是 windo.open() 打开的 那么其name属性就不会包含值

    3)窗口位置与像素比

    4)窗口大小

    5)视口位置

    6)导航与打开新窗口

    . window.open() 用于导航到指定URL 也可以用于打开新浏览器窗口 接收4个参数
    1 要加载的url
    2 目标窗口
    3 特性字符串
    4 新窗口在浏览器历史记录中是否替代当前加载页面的布尔值
    通常只需要前三个参数 最后一个参数在不打开新窗口时才会使用
    如果第二个参数 是一个已经存在的窗口或窗格(frame)的名字 则会在对应的窗口或窗格中打开

    7)定时器

    //1 间隔定时器
    setTimeout(function () {
        console.log('你好');
    },1000);//接收两个参数
    //1 要执行的代码
    //2 在执行回调函数前等待的时间(毫秒)
    //2 重复定时器

    8)系统对话框

    1. 弹出消息 对话框 alert() 
    参数:给用户显示的字符串 如果传入的值不是字符串 则会调用这个值的 toString()方法进行转换
    返回值:没有 undefined

    2. 确认操作 对话框 confirm()
    用途: 让用户确认执行某个操作
    参数: 给用户显示的字符串 如果传入的值不是字符串 则会调用这个值的 toString()方法进行装换
    返回值:布尔类型 [点击 确认 返回 true] [点击 取消 或右上角的×号 返回 false]

    3. 获取输入 对话框 prompt()
    用途:让用户输入输入信息
    参数2个: 1显示给用户的信息 2输入框内默认的值
    返回值: [ 点击了 确定 返回用户输入的值 ] [ 点击了 取消 返回 null ]


    特性:

    调用上面三个方法 可以让浏览器调用系统对话框向用户显示消息
    这些对话框与浏览器中显示的网页无关 而且也不包含HTML
    它们的外观由操作系统或者浏览器决定 无法使用CSS设置
    它们都是同步模态对话框,即它们在显示的时候 代码会停止执行 在它们消失后 代码才会执行

    由于不需要HTML和css 所有系统对话框是web应用程序最简单快捷的沟通手段

    confirm代码

    //通过confirm的返回值 确定后续的操作
    if (confirm('你爱吃西瓜吗')) { alert('我也爱吃'); } else { alert('我也不爱吃'); }

    prompt代码

    let res = prompt('请输入您的姓名','张三');
    if (res !== null) {
        alert('欢迎' + res + '来到我的网站');
    }
  • 相关阅读:
    Redis的分布式锁
    Redis的雪崩、击穿、穿透
    psr规范
    Mysql的联(复)合索引
    nginx的location配置(二)
    nginx的location规则(一)
    easyswoole中队列的使用
    第三章 文件I/O
    移动语义及拷贝优化
    PHP对接tdzntech.com云平台电子免费券程序
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14794148.html
Copyright © 2020-2023  润新知