JavaScript基础知识（7）

最新推荐文章于 2022-03-22 20:23:18 发布
最新推荐文章于 2022-03-22 20:23:18 发布
阅读量120 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55689351/article/details/115014233
版权

JavaScript中的BOM对象

浏览器对象模型--Browser Object Model (BOM)

主要的对象属于window对象中的内容。

window对象我们不需要手动创建，是一个内置的对象，我们只管使用。

window对象中的属性

确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）

window对象中的函数

open()

方法用于打开一个新的浏览器窗口或查找一个已命名的窗口

close()

方法用于关闭浏览器窗口。

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口

  格式:window.open(URL,name,features,replace)

参数1-URL:要在新窗口中显示的文档的地址[可选的字符串].

              没有url[1.不写 2.空字符串]---窗口依然打开，只是没有内容

参数2--name:新窗口的名称.

可以用作标记 <a> 和 <form> 的属性 target 的值.

如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。

参数3-features:新窗口要显示的标准浏览器的特征【尺寸】

如果省略该参数，新窗口将具有所有标准特征。

参数4-replace:规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目.

true - URL 替换浏览历史中的当前条目。

false - URL 在浏览历史中创建新的条目。

 例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var butdom1=document.getElementById("but1");
				butdom1.onclick=function(){
					//window.open();  //about:blank--空白页
					//window.open("test.html","mytest","width:200,height:200",false);
					//window.open("https://www.baidu.com/","width:200,height:100",false)
					window.open("about:blank",false);			
				}
			}
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="测试open函数,打开新窗口"/>
	</body>
</html>

close() 方法用于关闭浏览器窗口。

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var butdom2=document.getElementById("but2");
				butdom2.onclick=function(){
					window.close();
				};
			}
		</script>
	</head>
	<body>
		<input id="but2" type="button" value="测试close函数,关闭窗口"/>
	</body>
</html>

 

 关于弹框的函数

警告框

window.alert("sometext");

确认框

window.confirm("sometext");

提示框

window.prompt("sometext","defaultvalue");

 

关于弹框的函数

警告框:window.alert("sometext");

确认框:window.confirm("sometext");

当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。

当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。

提示框:window.prompt("sometext","defaultvalue");

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值.

如果用户点击取消，那么返回值为 null。

参数1---提示信息

参数2---提示框的默认值

 例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var butdom1=document.getElementById("but1");
				butdom1.onclick=function(){
					//window.alert("测试警告框"); //标准写法
					alert("测试警告框"); //简化写法
				};
				var butdom2=document.getElementById("but2");
				butdom2.onclick=function(){
					var flag=window.confirm("确定要退出吗？");
					if(flag){
						window.close();
					}
				};
				var butdom3=document.getElementById("but3");
				butdom3.onclick=function(){
					var returnvalue=window.prompt("请输入姓名","admin");
					//点击取消，返回null;
					if(returnvalue==null){
						alert("点击了取消");
					}else{
						//点击确定，得到输入结果
						if(returnvalue.length==0){
							alert("空内容");
						}else{
							alert("输入的数据是="+returnvalue+",类型是=="+typeof returnvalue);
						}
					}
				};
			}
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="测试警告框"/><br>
		<input id="but2" type="button" value="测试确认框"/><br>
		<input id="but3" type="button" value="测试提示框"/>
	</body>
</html>

 

 

window对象中的子对象

 

screen

屏幕对象

location

页面的地址对象

history

历史对象

navigator

浏览器信息对象

 

window.screen 对象包含有关用户屏幕的信息。

  1. 总宽度和总高度  --- width   /  height
  2. 可用宽度和可用高度----availWidth  / availHeight
  3. 色彩深度----colorDepth
  4. 色彩分辨率---pixelDepth

 例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				//得到屏幕的总宽度和总高度
				var screen_width=window.screen.width;
				var screen_height=window.screen.height;
				//可用宽度和可用高度----availWidth  / availHeight
				var availWidth=window.screen.availWidth;
				var availHeight=window.screen.availHeight;
				//3.色彩深度----colorDepth
				var colorDepth=window.screen.colorDepth;
				//4.色彩分辨率---pixelDepth
				var pixelDepth=window.screen.pixelDepth;
				document.write("<h1>总宽度和总高度=="+screen_width+"*"+screen_height+"</h1>");
				document.write("<h1>可用宽度和可用高度=="+availWidth+"*"+availHeight+"</h1>");
				document.write("<h1>色彩深度=="+colorDepth+"</h1>");
				document.write("<h1>色彩分辨率=="+pixelDepth+"</h1>");
			}
		</script>
	</head>
	<body>
	</body>
</html>

 window对象中的子对象--[location--页面的地址对象]

 href 属性返回当前页面的 URL。

search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var textdom=document.getElementById("text1");
				var passdom=document.getElementById("pass1");
				var butdom=document.getElementById("but1");
				butdom.onclick=function(){
					var zhanghao=textdom.value;
					var passvalue=passdom.value;
					if(zhanghao.length==0 || passvalue==0){
						alert("账号密码不能为空!");
					}else{
						//href 属性返回当前页面的 URL。
						//alert(window.location.href);
						//window.location.href="success.html";
						//window.location.href="success.html?zhanghao="+zhanghao;
						window.location.href="success.html?zhanghao="+zhanghao+"&password="+passvalue;
					}
				};
			}	
		</script>
	</head>
	<body>
		<center>
			<table border="1px">
				<tr align="center">
					<td colspan="2"><h1>用户登录</h1></td>
				</tr>
				<tr align="center">
					<td>账号:</td>
					<td><input id="text1" type="text" value="账号"></td>
				</tr>
				<tr align="center">
					<td>密码:</td>
					<td><input id="pass1" type="password" value=""></td>
				</tr>
				<tr align="center">
					<td colspan="2"><input id="but1" type="button" value="登录"></td>
				</tr>
			</table>
		</center>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				//search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。
				//alert(window.location.search); //?zhanghao=qqqq&password=123456
				var querystr=window.location.search;
				var name=null;
				var pass=null;
				if(querystr.length==0){
					window.location.href="javascript5.html";
				}else{
				//?zhanghao=qqqq
				//var val=querystr.substring(querystr.lastIndexOf("=")+1,querystr.length);
				//var h1array=document.getElementsByTagName("h1");
				//h1array[0].innerHTML=val+",登录成功!";
				
				//?zhanghao=qqqq&password=123456
				var strarray=querystr.split("&");
				//strarray[0]---?zhanghao=qqqq
				//strarray[1]---password=123456
				for(var i=0;i<strarray.length;i++){
					var infoarray=strarray[i].split("=");
					if(infoarray[0]=="?zhanghao"){
						name=infoarray[1];
					}
					if(infoarray[0]=="password"){
						pass=infoarray[1];
					}
				}
				var h1array=document.getElementsByTagName("h1");
				h1array[0].innerHTML=name+","+pass+",登录成功!";
				}
			}
		</script>
	</head>
	<body>
			<center>
				<h1>登录成功!</h1>
			</center>
	</body>
</html>

 

window对象中的属性

确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）

有三种方法

1.对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari使用

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

2.对于 Internet Explorer 8、7、6、5使用

document.documentElement.clientHeight - 浏览器窗口的内部高度

document.documentElement.clientWidth - 浏览器窗口的内部宽度

或者

document.body.clientHeight - 浏览器窗口的内部高度

document.body.clientWidth - 浏览器窗口的内部宽度

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浏览器窗口的尺寸</title>
		<script>
			window.onload=function(){
				//1.对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari使用
				//var height=window.innerHeight;
				//var width=window.innerWidth;
				//document.write("<h1>"+height+"*"+width+"</h1>");
				//2.对于 Internet Explorer 8、7、6、5使用
				//var height=document.documentElement.clientHeight;
				//var width=document.documentElement.clientWidth;
				//var height=document.body.clientHeight;
				//var width=document.body.clientWidth;
				//document.write("<h1>"+height+"*"+width+"</h1>");
				
				var width=window.innerWidth || 
						document.documentElement.clientWidth || 
						document.body.clientWidth;
				var height=window.innerHeight || 
						document.documentElement.clientHeight ||
						document.body.clientHeight;
				document.write("<h1>"+height+"*"+width+"</h1>");
			}
		</script>
	</head>
	<body>
	</body>
</html>

window对象中的子对象--[history--历史对象]

back() - 与在浏览器点击后退按钮相同

forward() - 与在浏览器中点击按钮向前相同

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var butdom1=document.getElementById("but1");
				butdom1.onclick=function(){
					//forward() - 与在浏览器中点击按钮向前相同
					window.history.forward();
				}
			}
		</script>
	</head>
	<body>
		<h1><a href="test2.html">打开test2</a></h1>
		<input id="but1" type="button" value="向前-->"/>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var butdom1=document.getElementById("but1");
				butdom1.onclick=function(){
					//forward() - 与在浏览器中点击按钮向前相同
					window.history.forward();
				};
				var butdom2=document.getElementById("but2");
				butdom2.onclick=function(){
					//back() - 与在浏览器点击后退按钮相同
					window.history.back();
				}
			}
		</script>
	</head>
	<body>
		<h1><a href="test3.html">打开test3</a></h1>
		<input id="but1" type="button" value="向前-->"/>
		<input id="but2" type="button" value="向后 <--"/>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var butdom1=document.getElementById("but1");
				butdom1.onclick=function(){
					//back() - 与在浏览器点击后退按钮相同
					window.history.back();
				};
			}
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="向后 <--"/>
	</body>
</html>

window对象中的子对象--[navigator--浏览器的信息对象]

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		document.write("<h1>浏览器代号:"+window.navigator.appCodeName+"</h1>");
		document.write("<h1>浏览器名称:"+window.navigator.appName+"</h1>");
		document.write("<h1>浏览器版本:"+window.navigator.appVersion+"</h1>");
		document.write("<h1>启用Cookies:"+window.navigator.cookieEnabled+"</h1>");
		document.write("<h1>硬件平台:"+window.navigator.platform+"</h1>");
		document.write("<h1>用户代理:"+window.navigator.userAgent+"</h1>");
		document.write("<h1>用户代理语言:"+window.navigator.systemLanguage+"</h1>");
		</script>
	</head>
	<body>
	</body>
</html>

 

晚风yY
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript窗口功能指南之打开一个新窗口
hktl的专栏
03-22 1735
JavaScript窗口功能指南之打开一个新窗口（作者：听风编译　2001年01月19日 11:35）　　当你点击一个简单的链接打开一个新窗口时，你没有对新窗口任何控制权。浏览器以默认的功能打开新窗口。此外，你也不能使用JavaScript引用新窗口的window对象，因此你不可能操纵新窗口的属性。看看下面的JavaScript语句： 　　window.open("http://www.docjs
HTML表单密码正则表达式格式,javascript中添加表单验证（密码与确认密码，×××号码格式验证）...
weixin_29046035的博客
06-02 193
1.密码与确认密码的输入是否一致2.×××号为15位或者18位，否则输入错误function tijiao(){alert("验证");var passw=document.getElementById("password");//获取确认密码的输入值var passvalue=passw.value;alert(passvalue);var passt=document.getElementBy...
Javascript（五）javascript实现表单验证
一枝韩独秀的博客
08-05 8720
表单验证 为了保证用户提交的信息都是正确的，保证系统的安全性，验证是必不可少的，验证一般分为两种方式。 客户端验证：直接在客户端执行JS进行验证，验证的过程中和服务器端没有任何的交互 服务器端验证：页面将验证信息传回服务器端，服务器端进行验证，并将验证的结果发送回客户端 这两个验证都是必须的，因为客户端的验证安全性不是太高，但是可以防止80%以上的用户的误操作，可以减轻服务器端的压力，而且速...
javascript 打开链接
weixin_33788244的博客
04-18 82
http://www.cnblogs.com/xd502djj/archive/2010/11/10/1874107.html
BX1053: 各浏览器对 window.open() 的窗口特征 sFeatures 参数支持程度存在差异
weixin_30533797的博客
11-01 158
标准参考 无。 问题描述 使用 window.open 方法可以弹出一个新窗口，其中 open 方法的 sFeatures 参数选项在各浏览器中支持程度不一，这有可能导致同样的代码使各浏览器中弹出窗口形式产生巨大差异。 造成的影响 会造成不同浏览器中打开的窗口位置、尺寸出现差异；以及是否有地址栏、菜单栏、状态栏、滚动条和是否全屏等表现形式存在出入。 受影响的浏览器 所有浏览器...
javascript基础知识整理
10-29
对于刚开始学习js的朋友，非常有帮助，主要知识点都已经整理好了。
JavaScript基础知识学习笔记
10-25
本文是初学javascript的时候记的学习笔记，简单介绍了javascript的定义及用法，并附上示例，适合初学者们，老鸟请出门左转。
JavaScript基础知识整理
02-26
什么是JavaScript JavaScript一种直译式脚本语言，一种基于对象和事件驱动并具有安全性的客户端脚本语言； 也是一种广泛应用客户端web开发的脚本语言。 简单地说，JavaScript是一种运行在浏览器中的解释型的编程语言...
javascript基础知识
10-22
本文主要介绍javascript一些基础知识，比较实用，希望能给大家做一个参考。
DOM事件概念以及绑定事件解绑事件（含代码解析）
m0_60273757的博客
10-21 498
目录 什么是事件？ 事件三要素 事件的执行步骤 代码讲解 事件对象 概念 实例​ 高级事件 绑定事件 绑定HTML元素 绑定DOM对象 代码讲解 解绑事件 解绑HTML元素 解绑DOM对象 代码讲解 什么是事件？ HTML 事件是发生在 HTML 元素上的事情。 例如:HTML 页面完成加载、HTML input 字段改变时、HTML 按钮被点击；下图是一些常见的事件，在JavaScript里面我们常用的事件有很多鼠标事件和键盘事件。 ...
window.onload匿名方法采坑
weixin_45190226的博客
01-14 449
业务需求描述： 1.点击button按钮向span节点中添加文本内容。 2.设置span节点的边框样式，背景颜色，宽度和高度。 下面是原始错误的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>verification</title> </head> <style> #buttonObj{ma
JavaScript跨域与解决方案详解
a1396531115的博客
09-12 332
JavaScript跨域与解决方案详解跨域往往是JS中的一个重难点，不管我们是通过在HTML页面中使用<link>标签引入外部CSS样式，还是使用<javascript>引入外部JavaScript文件，或者在页面中使用<a>标签引用超链接，甚至是在页面中加载一张图片，都会涉及到跨域相关的知识。那么，什么是跨域呢？ 跨域是指在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或
JavaScript专项练习1
qq_48113035的博客
03-22 2431
1.如果要打开名为 “window2"的新窗口，可以通过（） window.open("http://www.w3school.com.cn","window2") 解析：window.open()方法是用指定的名称将指定的资源加载到浏览器上下文中，第一个参数是url，第二个参数是名称。 2.下面这段JavaScript代码的的输出是什么？ var myObject = { foo: "bar", func: function() { var self = thi
攻防世界——web高手进阶区题解
小锤队长的博客
10-01 2万+
目录 1,cat （Django，cURL漏洞） 2，ics-05（XCTF 4th-CyberEarth）（文件包含 + preg_replace函数漏洞） 3，ics-06（爆破id） 4，lottery（.git文件泄露） 5，NewsCenter(sql注入) 6，mfv（.git文件泄露 + php审计+ 命令执行） 7，Training-WWW-Robots（robo...
Promise的实现原理
LuckXinXin的博客
10-12 535
大致思路： 1、Promise的构造函数，只有一个函数参数resolver(resolve,reject)，而函数参数resolver的两个参数都是函数参数，第一个参数resolve表示处理成功执行的函数，reject表示失败执行的函数 在构造函数中的属性有state(保存当前promise的状态)；value（保存resolve或发生reject的错误原因）；queue（Array，同一个pro...
HTML DOM window.open() 方法
sisong的专栏
03-03 1167
定义和用法open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。语法window.open(URL,name,features,replace) 参数 描述 URL 一个可选的字符串，声明了
web前端经典面试题
热门推荐
gyq04551的博客
02-16 10万+
web前端面试题   其他问题 1、请谈谈你对性能优化的认识？ 网页内容 减少http请求次数 80%的响应时间花在下载网页内容(images, stylesheets, javascripts,scripts, flash等)。减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数，但页面内容较多可以采用以下技巧。 图片显示效果如左图 减少DNS查询次数 DNS查
javascript dom编程艺术阅读笔记
hexon804的专栏
02-16 1629
第二章 1.程序设计语言分为：解释型和编译型两大类；java或C++等语言需要一个编译器，将源代码翻译为直接在计算机上执行的二进制可执行文件的程序，属于编译型 javascript语言不需要编译器，只需要解释器；在www环境下，web浏览器负责完成解释和执行工作。对于代码中的错误，只有等到解释器实际执行到有关代 码时才会被发现 2.要求程序员必须对数据类型做出声明的程序设计语言被称为强类型
android手机应用源码Imsdroid语音视频通话源码.rar
最新发布
05-20
android手机应用源码Imsdroid语音视频通话源码.rar
JavaScript基础知识
08-02
回答: JavaScript是一门最流行的运行在浏览器的脚本语言，它与Java是两种完全不同的语言，无论在概念还是设计上。 JavaScript是一种轻量级的编程语言，可由所有的现代浏览器执行。它最早是在HTML网页上使用，用来给...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值