我们知道,JavaScript共由三部分组成:EMCAScript(基本语法)、BOM(浏览器对象模型)、DOM。

在浏览器对象模型中,把浏览器的各个部分都用了一个对象进行描述,如果我们要操作浏览器的一些属性,就可以通过浏览器对象模型的对象进行操作

下面我们来介绍一下浏览器对象模型的基本的对象:

window  代表了一个新开的窗口
location 代表了地址栏对象。
screen 代表了整个屏幕的对象

window对象常用的方法

//open()   打开一个新的窗口(参数一:打开的地址,参数二:是否为新的浏览器窗口,参数三:新窗口属性,参数四:用来替代的地址)
window.open("2.html","_blank","height=400px,width=600px,toobar=no,location=yes,top=200px","用来替代的地址"); //resizeTo() 将窗口的大小更改为指定的宽度和高度值
window.resizeTo(300,200); //moveBy() 相对于原来的窗口移动指定的x、y值
window.moveBy(100,0);//谷歌浏览器貌似不支持了 //moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
window.moveTo(100,0);//谷歌浏览器貌似不支持了 //setInterval() 每经过指定毫秒值后就会执行指定的代码 //clearInterval() 根据一个任务的ID取消的定时任务 //setTimeout() 经过指定毫秒值后执行指定 的代码一次

事件

定义:当发生一个事件之后,会触发特定的方法

那么如何注册一个事件呢?

  • 事件的注册方式
 //方式一: 直接在html元素上注册
<body onload="ready()"> function ready(){
alert("body的元素被加载完毕了..");
} //方式二:先在js代码找到对应的对象再注册,一般推荐使用这种方式,可以增强可维护性 var bodyNode = document.getElementById("body"); bodyNode.onload = function(){
alert("body的元素被加载完毕");
}
  • 常用的事件
鼠标点击相关:
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。 鼠标移动相关:
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。 焦点相关的:
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。 其他:
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。

location对象

此对象是浏览器地址栏对象,所以我们能够改变地址栏信息,或者进行其他的一些改变。

想要获取到url只需要使用location.href即可。

有两个比较常用的东西:

//href : 设置以及获取地址栏的对象
location.href = "http://www.baidu.com";//每天总在莫名其妙的给百度打广告。。 //reload() 刷新当前的页面
location.reload();

screen对象

  • 常用的方法
availHeight 获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。
  • 使用方法
document.write("获取系统屏幕的工作区域高度:"+screen.availHeight+"<br/>");
document.write("获取系统屏幕的工作区域宽度:"+screen.availWidth+"<br/>");
document.write("获取屏幕的垂直分辨率:"+screen.height+"<br/>");
document.write("获取屏幕的水平分辨率:"+screen.width+"<br/>");

这一讲我们学习的是BOM(浏览器对象模型)

从下一节开始,我们将开始学习JavaScript的最后一个部分,DOM编程。

JavaScript学习总结(六)的更多相关文章

  1. JavaScript学习总结(六)——前端模块化开发

    早期的javascript版本没有块级作用域.没有类.没有包.也没有模块,这样会带来一些问题,如复用.依赖.冲突.代码组织混乱等,随着前端的膨胀,模块化显得非常迫切. 前端模块化规范如下: 一.前端模 ...

  2. JavaScript学习总结(六)——JavaScript判断数据类型总结

    最近做项目中遇到了一些关于javascript数据类型的判断处理,上网找了一下资料,并且亲自验证了各种数据类型的判断,在此做一个总结吧! 一.JS中的数据类型 1.数值型(Number):包括整数.浮 ...

  3. arcgis api for javascript 学习(六) 地图打印

    1.本文应用arcgis api for javascript对发布的动态地图进行打印,打印的为PDF格式,打印出来如图: 2.需要特别注意的是:我们在运行代码前,需要打开PrintingTools, ...

  4. JavaScript学习 - 基础(六) - DOM基础操作

    DOM: DOM定义了访问HTML 和XML 文档的标准:1.核心DOM 针对结构化文档的标准模型2.XMK DOM 针对XML文档的标准模型3.HTML DOM 针对HTML文档的标准模型 DOM节 ...

  5. JavaScript学习(六)

    这里要注意: 1.num为NaN(因为str的开头不是数字) 2.NaN和NaN是不等的 3.NaN也是number.

  6. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  7. JavaScript学习总结——转

    JavaScript学习总结(一)——JavaScript基础 JavaScript学习总结(二)——逻辑Not运算符详解 JavaScript学习总结(三)——逻辑And运算符详解 JavaScri ...

  8. 前端学习 第六弹: javascript中的函数与闭包

    前端学习 第六弹:  javascript中的函数与闭包 当function里嵌套function时,内部的function可以访问外部function里的变量 function foo(x) {   ...

  9. JavaScript学习基础部分

    JavaScript学习基础 一.简介 1.JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比方说 Internet Explorer. Mozilla.Firefo ...

  10. Javascript学习5 - 函数

    原文:Javascript学习5 - 函数 在Javascript中,函数和对象是交织在一起的.有些函数的特性与对象相关联.这一点的内容在第六部分会讨论到. 这一部分主要讨论函数与其它比较熟悉的语言( ...

随机推荐

  1. redis学习(四)

    一.Redis 键(key) 1.Redis 键命令用于管理 redis 的键. 2.Redis 键命令的基本语法如下:redis 127.0.0.1:6379> COMMAND KEY_NAM ...

  2. 开源DDD设计模式框架YMNNetCoreFrameWork第6篇-.net Core Logging和Nlog结合

    源码地址:https://github.com/topgunymn/YMNNetCoreFrameWork 遇到的坑:使用了Nlog以后,.NETcore自带的日志等级不起作用,只有nlog配置配置文 ...

  3. 102-PHP多维数组的元素输出

    <?php //定义一个三维数组 $grade=array('class1'=>array('stu1'=>array('yuwen'=>85,'shuxue'=>95, ...

  4. Java对象序列化输入输出

    在网上看到一篇有关于对象序列化的代码,自己仿着写了把 在Java中,entity通过implements Serializable,然后使用ObjectInputStream和ObjectOutput ...

  5. javaweb历史上最简单的使用Ajax判断用户名是否被注册(不跳转页面奥!)

    关于前端: 使用jquery-3.3.1.js记得要导入奥---最后我会附加我的源码的 哎我也不多说了新手加菜鸟jquery真的不太懂!看代码吧!个别地方我会写上我对本程序的理解. 关于后台也就是se ...

  6. 开发者在行动-政府侧IT需求志愿者招募令(第一弹)

    京东云与AI推出了[应急资源信息发布平台],在打通物资供需的同时,各地政府及公益组织可发布疫情信息化产品开发及运维服务的IT需求,如疫情防控统计.物资供需信息收集等IT管理.需求通过评审后平台将帮助发 ...

  7. 五、React事件方法(自写一个方法(函数),然后用按钮onClick触发它、自写方法改变this指向3种写法、

    上接:https://www.cnblogs.com/chenxi188/p/11782349.html 项目目录: my-app/ README.md node_modules/ package.j ...

  8. MongoDB Limit

    版权所有,未经许可,禁止转载 章节 MongoDB 入门 MongoDB 优势 MongoDB 安装 MongoDB 数据建模 MongoDB 创建数据库 MongoDB 删除数据库 MongoDB ...

  9. js如何操作或是更改sass里的变量

    /*上网搜索了好多方法,最终只有这一种比较适合*/ 参考: https://blog.csdn.net/weixin_44392565/article/details/85755592 https:/ ...

  10. apt-get install oracle-java8-installer时Err:7 http://ppa.launchpad.net/webupd8team/java/ubuntu xenial/main amd64 Packages 404 not found

    所有其他网址都有效,而不是amd64端点. 然后,当运行apt-get install oracle-java8-installer时,出现以下错误: Package oracle-java8-ins ...