js学习笔记9(BOM及案例)

<body>

    <!-- BOM浏览器对象模型 -->

    <!-- BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window -->

    <!-- BOM由一系列相关的对象构成,并且每个对象都提供了很多方法和属性 -->

    <!-- BOM缺乏标准,JavaScript语法的标准组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分,有许多兼容性问题 -->

    <!-- window对象是浏览器的顶级对象 ,它具有双重角色  :1.他是JS访问浏览器窗口的一个接口    2.它是一个全局对象,定义在全局作用域中的变量,函数都会变成window对象的属性和方法    -->

    <!-- 在调用的时候可以省略window,前面学习的对话框都属于window对象方法,如alert()  ,  prompt()等    它们的完整调用方式其实是 window.alert();  window.prompt(); 但是可以忽略window -->

    <!-- 注意!!window下有一个特殊属性:window.name   所以我们定义变量时一般不用 name,因为它是有特殊意义的 -->

    <!-- window常见事件 -->

    <!-- 1.窗口加载事件  :  window.onload = function(){}   或者 window.addEventLiatener('load',funtion(){})

    window.onload是窗口(页面)加载事件,当文档内容完全加载完成才会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数

    注意:!!1.有了window.onload 就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数

    2.window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准-->

<!-- 此处的script写在了最开头的style同样的位置

<script>

        /* window.onload = function(){

            var btn = document.querySelector('button');

            btn.addEventListener('click',function(){

                alert('点击了我');

            })

           

        } */

        window.addEventListener('load',function(){

            alert(22);

            var btn = document.querySelector('button');

            btn.addEventListener('click',function(){

                alert('点击了我');

            })

        })

        document.addEventListener('DOMContentLoaded',function(){

            alert(33);

        })        //注意!先弹出的33,也就是说先加载的DOMContentLoaded事件

    </script> -->

</head>

    <!-- <button>点击</button> -->

    <!-- 2.窗口加载事件(2):document.addEventListener('DOMContentLoaded',function(){})

    DOMContentLoaded事件被触发时,仅当DOM加载完毕,不包括样式表、图片、flash等(也就是不用等图片这些资源加载完才触发事件)

    如果页面图片很多的话,从用户访问到onload触发可能需要较长时间,交互效果就不能实现,必然影响用户的体验,此时用 DOMContentLoaded事件比较合适-->

    <!-- 调整窗口大小事件 resize() -->

    <!-- 注意!!只要窗口像素变化就会触发  ;  我们经常用这个事件完成响应式布局。window.innerWidth 是当前屏幕的宽度-->

  <!--   <div style="width:200px;height: 200px;background-color: aqua;"></div>

    <script>

        var div = document.querySelector('div');

        window.addEventListener('resize',function(){

            console.log('变化');

            if(window.innerWidth <=800){

                div.style.display = 'none';

            }else{

                div.style.display = 'block';

            }

        })

    </script> -->


 

    <!-- 定时器 -->

    <!-- 1.window.setTimeout(调用函数,[延迟的毫秒数])定时器 -->

   <!--  <script>

        //window可以省略

        setTimeout(function(){   //函数可以直接写在这儿,也可以写函数名(把函数单独写在外面,这里直接调用)

            console.log('时间到了');

        },2000);//单位为毫秒,如果不写默认为0 ;2000就是2秒;意思为隔多少秒再调用

        var timer1 = setTimeout(fn,3000);

        function fn(){

            console.log('爆炸了');

        }

        var timer2 =  setTimeout('fn()',4000);  //还有这种写法,但不提倡

        //通常一个页面中会有多个定时器,为了区分可以给这些定时器加标识符(起名字),比如这儿的 timer1 和 timer2

    </script> -->

    <!-- setTimeout()这个调用函数也称为回调函数 (时间到了才回头调用)callback -->

    <!-- onclick也是回调函数(因为他是点击之后才调用) -->

    <!-- 案例:五秒后自定关闭广告 -->

    <!-- <img src="image/1.jpg" alt="" class="ad">

    <script>

        var ad = document.querySelector('.ad');

        function close(){

            ad.style.display = 'none';

        }

        setTimeout(close,3000);

    </script> -->


 

    <!-- 停止定时器 window.clearTimeout(timeID(名字)) (windowkehulue)-->

   <!--  <button>点击停止计时器</button>

    <script>

        var btn = document.querySelector('button');

        var timer = setTimeout(function(){

            console.log('爆炸了');

        },5000)

        btn.addEventListener('click',function(){

            clearTimeout(timer);

        })

    </script> -->


 

    <!-- 2.setInternal()定时器 -->

    <!-- window.setInternal(回调函数,[间隔的毫秒数])  这个方法会!重复!调用一个函数,每个一个时间就调用一次 -->

    <!-- 基本规则与setTimeout一样,只是调用机制不一样 -->

   <!--  <script>

        var timer = setInterval(function(){

            console.log('调用了');

        },2000)

    </script> -->

    <!-- 停止setInterval()定时器    : window.clearInterval(intervalID); -->

<!--     <button class="begin">开启计时器</button>

    <button class="stop">停止计时器</button>

    <script>

        var begin = document.querySelector('.begin');

        var stop = document.querySelector('.stop');

        var timer = null;  //声明一个全局变量 这样可以让其他的访问

        begin.addEventListener('click',function(){

            timer = setInterval(function(){   //如果将var timer= setInterval写在函数里面,timer就变成了一个局部变量,其他函数等就不能访问这个变量了

                console.log('nihao');

            },1000);

        })

        stop.addEventListener('click',function(){

            clearInterval(timer);

        })

    </script> -->


 

    <!-- this指向问题 -->

<!--     <button>点击</button>

    <script>

        //this 指向问题 一般情况下this 指向的时那个调用它的对象

        //1.全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)

        console.log(this);  //window

        function fn(){

            console.log(this);  //window

        }

        window.fn();

        setTimeout(function(){

            console.log(this); //window

        })

        //2.方法调用中谁调用this就指向谁

        var btn =document.querySelector('button');

        btn.addEventListener('click',function(){

            console.log(this);  //button

        })

        //构造函数中this指向构造函数的实例

        function Fn(){

            console.log(this);  //指向 fn (也就是实例对象)

        }

        var fn = new Fn();

    </script> -->


 

    <!-- JS执行机制 -->

    <!-- JS是单线程,也就是,同一个时间只能做一件事(因为JavaScript这门脚本语言是为了处理页面中的交互以及操作DOM而诞生的,逼入我们对某个DOM元素进行添加和删除操作,不能同时进行,应该先添加,再删除)-->

    <!-- 单线程就意味着,所有任务都要排队,前一个任务结束,才会执行后一个任务,这样导致的问题有:如果JS执行时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞。 -->

    <!-- 👇为了解决这个问题 ,利用CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,于是,js中出现了同步和异步-->

    <!-- 同步和异步 -->

    <!-- 同步:前一个任务结束后再执行后一个任务,程序执行的顺序和任务的排列顺序一致的、同步的 -->

    <!-- 异步:在做一个任务的同时还可以做其他任务 -->

   <!--  <script>

        console.log(1);

        setInterval(function(){

            console.log(2);

        },1000)

        console.log(3);    //结果是1、3、2、2、2、(这意味着js先打印了3,因为2花费时间较长,js不会等待2打印完了才去打印3)

    </script> -->


 

    <!-- 将任务分为了两大类:同步任务、异步任务 -->

    <!-- 同步任务:同步任务都在主线程上执行,形成一个执行栈-->

    <!-- 异步任务:JS的异步是通过回调函数实现的   一般而言,异步任务有以下三种类型:1.普通事件,如click、resize等   2.资源加载,如load、error等    3.定时器,包括setInterval、setTimeout等    

    异步任务相关回调函数添加到任务队列中(任务队列也称消息队列) -->

    <!-- !!⭐执行机制:1.先执行执行栈中的同步任务    2.有异步任务先把异步任务放到任务队列中   3.继续执行执行栈中的任务,一旦执行栈中的任务都执行完毕之后,系统就会按此读取任务队列中的异步任务,被读取的异步任务结束等待状态放入执行栈最后,开始执行 -->

    <!-- 比如 现有四个事件 log(1) ; onclick ; log(2)  ; setInterval(fn,3000)

    执行机制:1.如果在3秒之前点击,那么顺序为  1、2、click、fn  2.如果在3秒之后点击,那么执行顺序为 1、2、fn、click    3.如果没有点击,那么顺序为 1、2、fn()

    在这之中 有一个异步进程处理,比如在这里,点击事件现被放入了异步进程处理当中,只有点击了才会把它放入任务队列当中-->

    <!--在执行完所有任务之后,还会去检查是否有新的任务队列的任务产生,如果有,就执行

    由于主线程不断地重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(event loop) -->


 

    <!-- location对象 -->

    <!-- window给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象 -->

    <!-- URL(统一资源定位符)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理他 -->

    <!-- URL的一般语法格式:protocol:host[:port]/path/[?query]#fragment     比如:http://www.itcast.cn/index.html?name=andy&age=18#link     其中,protocol是通信协议,常用如http,ftp,maito等    host是主机(域名)    port是端口号,省略时采用默认端口号80     path为路径 由0或者多个'/'符号隔开的字符串,一般用来表示主机上的一个目录或者文件地址     query是参数,以键值对的形式,通过&符号分隔开来     fragment 是片段, #后面的内容常见于链接,锚点-->

    <!-- location对象属性:  location.href获取或者设置整个URL    location.host返回主机(域名)    location.port返回端口号 如果没写返回空字符串    location.pathname返回路径    location.serch返回参数     location.hash返回片段

    重点记住:!!href和search -->

<!--

    <button>点击</button>

    <script>

        var btn = document.querySelector('button');

        btn.addEventListener('click',function(){

            // console.log(location.href);  //得到URL

            location.href = 'http://www.itcast.cn';  //跳转到另一个页面了

        })

    </script> -->



 

    <!-- location对象的方法 -->

<!--     <button>点击</button>

    <script>

        var btn = document.querySelector('button');

        btn.addEventListener('click',function(){

            // location.assign('http://www.itcast.cn');//location.assign()  跟href一样可以跳转页面(也称为重定向页面) 不同的是它可以记录浏览器历史,可以实现后退页面功能

   

    //location.replace() 替换当前页面,不记录历史,不能后退页面

    // location.replace('http://www.itcast.cn');

    //location.reload()  无参数时 , 重新加载页面,相当于刷新按钮或者f5   如果参数为true强制刷新 ctrl+f5

    location.reload();

})

    </script> -->


 

    <!-- navigator对象 -->

    <!-- navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发送到服务器的user-agent头部的值(也就是可以判断用户是用哪个浏览器打开的页面) -->

  <!--   <script>

        if((navigator.userAgent.match(/(phone|pad|pod|iphone|ipod|ios|ipad|Android|Mobile|BlackBerry|IEMobile|MQQBrower|JUC|Fennec|wosBrower|BrowerNG|WebOS|Symbian|Windows Phone)/i))){

            window.location.href="";//手机页面

        }else{

            window.location.href=""; //电脑页面

        }

    </script> -->

   

    <!-- history对象 (在一般实际开发中比较少用,但是会在一些OA系统中见到)-->

    <!-- back()可以后退功能     forword()前进功能     go(参数),前进后退功能,参数如果是1 前进一个页面,如果是-1,后退一个页面 -->

</body>

案例:

    <!-- 案例:倒计时 -->

    <!-- 分析:1.这个倒计时是不断变化的,所以要用定时器来自动变化(setInteval)    2.三个盒子里面分别放时、分、秒    3.三个盒子利用 innerHTML放入计算的小时分钟和秒数 -->

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        div{

            width: 200px;

            height: 200px;

            margin: 100px auto;

        }

        span{

            display: inline-block;

            background-color: black;

            color: aliceblue;

            width: 30px;

            height:25px;

            text-align: center;

           

        }

    </style>

</head>

<body>

    <div>

        <span class="hour">

            1

        </span>

        <span class="minute">

            2

        </span>

        <span class="second">

            3

        </span>

    </div>

    <script>

        var hour = document.querySelector('.hour');

        var minute = document.querySelector('.minute');

        var second = document.querySelector('.second');

        var inputTime= +new Date('2024-4-17 18:00:00'); //Date(time)就代表time时间的时间戳,此处为括号里时间的时间戳

        countTime();  //这里先调用一次这个函数,防止刷新时有空白(以为调用倒计时函数也会有时间间隔,一秒后才开启倒计时,所以刷新时会有一秒的时间盒子里不是倒计时而是最开始设置的数字1、2、3)

        setInterval(countTime,1000);   //开启倒计时

        function countTime(){      //countTime就是倒计时的意思

            var nowTime= +new Date();  //Date()里是空的就代表是当前时间的时间戳

            var times= (inputTime - nowTime)/1000;  //times表示用户输入的时间距离现在还有多少秒,注意!!这里除了1000,表示原来的总毫秒数除了1000变为了秒数   1s=1000ms;  

            var h=parseInt(times / 60 / 60 % 24);  //从秒数转换为小时

            h=h<10?'0'+h:h;

            hour.innerHTML = h;   //将得出的时间赋给盒子的内容

            var m=parseInt(times / 60 % 60);     // 从秒数转换为分钟

            m=m<10?'0'+m:m;

            minute.innerHTML = m;

            var s=parseInt(times % 60);        //从秒数转换为当前时间处于多少秒

            s=s<10?'0'+s:s;

            second.innerHTML = s;

        }

    </script>

 <!-- 案例:发送短信   :点击发送按钮之后要等多少秒才可以再次点击,防止重复发短信-->

    <!-- 分析: 1.按钮点击之后,会禁用按钮,disabled为true    2.同时按钮里面的内容会变化,注意button里面的内容通过innerHTML修改    3.里面的秒数是有变化的,因此需要用到定时器    4.定义一个变量,在定时器里面,不断递减     5.如果变量为0说明到时间了,需要停止计时器,按钮又可以恢复为初始状态-->

    手机号码:<input type="number"><button>发送</button>

    <script>

        var btn = document.querySelector('button');

        var t = 5;  //声明一个计数变量

        btn.addEventListener('click',function(){

            btn.disabled = true;

            var timer = setInterval(function(){

            if(t == 0){

                clearInterval(timer);//清楚计时器

                btn.disabled = false; //复原按钮

                btn.innerHTML = '发送';

                t = 5;  //要把t还原,这样下一次点击又可以从5开始

            }else{

                console.log('daozhel');

                btn.innerHTML = '还剩'+t+'秒';

                t--;

            }

            },1000);

        })

    </script>

    <!-- 案例:5秒后自动跳转页面

    利用倒计时设置时间,再用location.href改变URL -->

    <style>

        div{

            width: 300px;

            height: 200px;

            background-color: aqua;

            display: none;

            margin: 100px auto;

            text-align: center;

            line-height: 200px;

        }

    </style>

</head>

<body>

    <button>点击</button>

    <div>你将在5秒后跳转至另一个页面</div>

    <script>

        var btn = document.querySelector('button');

        var div = document.querySelector('div');

        btn.addEventListener('click',function(){

            var t = 5;

           setInterval(function(){

            if(t == 0){

                location.href = 'http://www.itcast.cn';

            }else{

                btn.style.display = 'none';

                div.style.display = 'block';

                div.innerHTML = '你将在'+t+'秒后跳转至另一个页面';

                t--;

            }

           },1000)

        })

    </script>

</body>

(案例:获取URL参数数据)

login.html:

 <!-- 案例:获取URL参数数据 (主要练习数据在不同页面中的传递)-->

    <!-- 案例分析:1.第一个登录页面,里面有提交表单,action提交到index.html页面    2.第二个页面,可以使用第一个页面的参数,这样实现了一个数据不同的传递效果    3.第二个页面之所以可以使用第一个页面的数据,是利用了URL里面的location.search参数    4.在第二个页面中,需要把这个参数提取     5.第一步去掉?利用substr    6.第二步利用=号分割键和值 split('=') -->

    <form action="index.html">

        用户名: <input type="text" name="uname"> <!--  暂时不能输入中文,会乱码,后面会解决-->

        <input type="submit" value="登录">

    </form>

index.html:

<div></div>

    <script>

        console.log(location.search);  //?uname = asd

        //1.先去掉?  substr('起始的位置',截取几个字符);

        var params = location.search.substr(1);  //从1开始截,一直截到最后

        var arr = params.split('=');  //得到数组,arr[0]是uname  arr[1]是asd

        var div = document.querySelector('div');

        div.innerHTML = arr[1] +'欢迎您!';  //把数据写入div中

    </script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值