bom浏览器对象模型5.17

今日学习及分线内容如下：

一、screen屏幕

//词汇：document文档；write写入；

①.screen屏幕；screen.width/height:屏幕宽/高；

②.avail可用；screen.availWidth:可用屏幕的宽；screen.availHeight：可用屏幕的高；

③.inner内部；window.innerWidth：浏览器可视区域的宽；window.innerHeight：浏览器可视区域的高；

代码：

1. document.write("<br/>屏幕的宽"+screen.width);
    document.write("<br/>屏幕的高"+screen.height);

2.document.write("<br/>可用屏幕的宽"+screen.availWidth);
   document.write("<br/>可用屏幕的高"+screen.availHeight);

3.document.write("<br/>浏览器可视区域的宽"+window.innerWidth);
   document.write("<br/>浏览器可视区域的高"+window.innerHeight);

二、histroy历史记录

//词汇：forward前进；  back返回；

①.history.forward :前进一个页面；

②.history.back :后退一个页面；

③.history.go(1)/(-1) :前进/后退；

代码：

//<button type="button" οnclick="goForward()">前进</button>
  <button type="button" οnclick="goBack()">回退</button>
  //function goForward(){
              history.go(1);//前进一步
             }
            
   //function goBack(){
                history.back(-1);//后退一步
            }
三、location 地址 

//词汇：location地址栏 信息

location.href:地址信息       location.protocol:协议           location.hostname:域名             

location.pathname:路径    location.port:端口号          location.search:查询

location.hash:哈希/锚点

代码：

function reload(){
                location.reload();//普通刷新
                }
            document.write("<br/>地址信息："+location.href);
            document.write("<br/>协议："+location.protocol);
            document.write("<br/>域名："+location.hostname);
            document.write("<br/>路径："+location.pathname);
            document.write("<br/>端口号："+location.port);
            document.write("<br/>查询："+location.search);
            document.write("<br/>哈希："+location.hash);

四、navigator 

①.var ua=navigator.userAgent;--浏览器头信息

②.if（ua.includes("Mobile"))判断是否是手机

代码：

var ua=navigator.userAgent;
        document.write("<br/>"+ua);
        if（ua.includes("Mobile")){
            document.write("<br/>手机浏览器")
        }else{
            document.write("<br/>PC浏览器")
        }

五、open 方法

①.window.open(url,name,feature)url 打开的地址 name命令（窗口通信与查找）feature特性

②.open/close：打开新的浏览器/关闭

代码：

        var win;    
            
         function openWin(){
        win=window.open("http://www.baidu.com","baidu","width=400,height=400,top=200,left=200")
         }    
         function closeWin(){
                //自己打开才能自己关闭
                win.close();
            } 

六、win的常用事件 onload、onscroll、onresize

①.onscroll：滚动事件；

②.document.documentElement.scrollTop：滚动距离；

代码：

       window.onscroll = function(){
                console.log("页面滚动了");
              
                var t = document.documentElement.scrollTop;
        
                console.log(t);
            }

        window.onresize = function(){
                console.log("窗口的大小发生了变化");
                console.log("<br/>宽+window.innerWidth+"，"高："+window.innerHeight)
            }

七、字符串的编码 decode、encode

①.国际上用万国编码 utf-8    gb2312 国标   gbk 中文包含繁体字    

②.decodeUR    encodeURI   转/解url编码

③.decodeURIComponent     encodeURIComonpent     转/解URI编码（包含标点符号）

代码：

            var str = "，！"
            console.log(window.encodeURIComponent(str);)

八、图片预览

①.onclick 被点击，onchange 文本框的值发生了变化

代码：

            function preImg(){
            var file = myf.files[0];
            var src = window.URL.createObjectURL(file);
            mypic.src = src;
            }