JavaScript

lamu_js

已于 2022-05-17 22:13:58 修改

阅读量164

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

于 2022-05-17 21:52:16 首次发布

本文链接：https://blog.youkuaiyun.com/lamu_js/article/details/124828894

本文详细介绍了JavaScript的三大组成部分——核心语法、DOM和BOM，并重点讲解了BOM中的window对象及其常用方法，如onload、onscroll和onresize事件。此外，还涉及了JS全局方法、History对象、navigator对象的使用，以及如何通过open()方法控制窗口的打开和关闭。同时，文章演示了图片预览和文件读取的实现，提供了实用的前端开发技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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>