JavaScript

一 、javaScript的三个组成部分：

• 核心：基于ESMAScriptde标准的基本语法和数据类型。
• DOM：用于操作页面的元素，进行html与js交互。
• BOM：用于操作浏览器窗口，又称浏览器对象模型，浏览器与js交互。

二 、BOM 浏览器对象模型（Browser Object Model）的常用window对象基本有：

        document 文档、screen 屏幕、location 地址、navigator 浏览器对象、history 历史记录以及本地存储相关内容。

三、JS中常用到的全局方法：

• alert        警告提示
• confirm       确认提示框
• prompt       文本弹框
• setInterval       间隔调用
• setTimeout       延迟调用
• isNaN       是否为数字
• documen       文档

四 、window中常用的三个事件

        onload 窗口加载完毕触发、onscroll 窗口发生滚动触发、onresize 窗口大小发生变化触发

 window.onload = function(){
            //页面加载完毕 可以访问节点
            alert(window.mhy.innerText)
        }

window.onscroll = function(){
            console.log("页面滚动了")
            //垂直滚动距离
            var y = document.documentElement.scrollTop;
            //水平滚动距离
            var x = document.documentElement.scrollLeft;
            console.log(x,y)
        }

window.onresize = function(){
            console.log("窗口大小发生变化")
            console.log("宽: "+window.innerWidth+"，高:"+window.innerHeight)
        }

 五 、window中常用的方法

• screen方法 获取页面中想要的宽高
• location方法 获取 href 地址信息中想要的信息

  document.write("<br/>屏幕大小 宽：",screen.width,"<br/>屏幕大小 高：",screen.height)
  document.write("<br/>可用屏幕大小 高：",screen.availHeight,"<br/>可用屏幕大小宽：",screen.availWidth)
  document.write("<br/>可视区域窗口大小 高：",window.innerHeight,"<br/>可视区域窗口大小 宽：",window.innerWidth)

  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)

 六 、History对象 相当于浏览器的前进和后退按钮

function goForward(){
            history.forward()
        }
function goBack(){
            history.goBack()
        }

七 、 navigator对象 获取浏览器头信息，用来判断浏览器类型

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

八 、 open（）方法 用按钮实现窗口的来打开与关闭

var win;
function openWin(){
            win = window.open("https://so.lenovo.com.cn/","联想","width=400,height=400,top=400,left=400");
        }
function closeWin(){
            win.close();
        }

九 、图片预览

<h1>图片预览</h1>
<input type="file" name="" id="myf" value="" onchange="preImg()" multiple>
<!-- onclick 被点击，onchange值发生变化了 -->
<img src="" width="50%" id="mypic" alt="">
<script>
function preImg(){
         //找到图片
         var file = myf.file[0];
         //图片解码为base.64字符串并用create创建Object对象URL编码
         var src = window.URL.createObjectURL(file);
         //定义图片路径
         mypic.src = src;

}
</script>