javascript bom 编程

javascript bom 编程

BOM:

浏览器对象模型

DOM Window ：窗口Window Document

属性：

    status :状态栏

    self:自己

    top:顶层窗口

    parent:父窗口

方法

  alert();显示带有一段消息和一个确认按钮的警告框。

  confirm();显示有一段消息确认按钮和取消按钮的对话框弹出确认取消框点确定会返回true,否则返回 false

prompt();弹出一个带有输入文本的对话框会返回在文本框中输入的值

open();用于打开一个指定的窗口

  close();用于关闭当前窗口

  setInterval()

  setTimeout()

DOM Navigator

appName 浏览器名称

appVersion 浏览器版本

platform 操作系统

DOM Screen

width height

DOM History

go()//数字

back();//后退 go(-1)

forward()//前进 go(1)

DOM Location

  href属性:设置或返回完整的 URL。

事件

鼠标移动事件

onmouseover 悬停

onmouseout 移开

onmousemove移动

onclick点击

加载与卸载事件

  onload 加载

  onunload 关闭

  onbeforeunload关闭浏览器之前

聚焦与离焦事件

onfocus 得到焦点

onblur 推动焦点

键盘事件

  onkeydown 键盘按下

  onkeypress 键盘压住

  onkeyup 键盘弹起

提交与重置事件

onsubmit=" return 函数名()",而且函数一定要有返回值， true代表表单提交 false不提交

选择与改变事件

窗口通信:

浮动广告：

js删除对话框

js前进和后退

Location Screen Navigator

窗口通信示例代码：

1.02Window窗口通信.html

<html>

	<head>

		<title>Window对象</title>

		<meta name="keywords" content = "传智播客培训">

		<meta name="description" content = "北京传智播客培训">

		<meta name="description" content = "传智播客培训网页">

		<meta http-equiv= "content-type" content = "text/html;charset= utf-8">

		<style>

			div{

				width:200px;

				height:100px;

				border:1px solid red;

			}

		</style>

		<script>

			function sendHSW()

			{

				var ppVal = document.getElementById("pp").value;

				self.frames["nsw"].document.getElementById("username").value = ppVal;

			}

			function openWin(){

				open("02opener.html");

			}

		</script>

	</head>

	<body>

		<div id = "parentWin"></div><br/>

		<input type = "text"  id ="pp"/>

		<input type = "button" value = "父窗口传值给子窗口" onclick = "sendHSW()"><input type = "button" value ="Opener" onclick ="openWin()"> <br/><br/>

		<iframe src = "02Window.html" name = "nsw"></iframe>

	</body>

</html>

2.02Window.html

<html>

	<head>

		<title>子窗口</title>

		<meta name="keywords" content = "传智播客培训">

		<meta name="description" content = "北京传智播客培训">

		<meta name="description" content = "传智播客培训网页">

		<meta http-equiv= "content-type" content = "text/html;charset= utf-8">

	</head>

	<body>

		<input type = "text" id = "username"/>

		<input type = "button" value = "子窗口传值给父窗口" onclick = "sendSW()">

		<script>

			function sendSW(){

				var csw = document.getElementById("username").value;

				self.parent.document.getElementById("parentWin").innerHTML = csw;

			}

		</script>

	</body>

</html>

3.02opener

<html>

	<head>

		<title>Opener</title>

		<meta name="keywords" content = "传智播客培训">

		<meta name="description" content = "北京传智播客培训">

		<meta name="description" content = "传智播客培训网页">

		<meta http-equiv= "content-type" content = "text/html;charset= utf-8">

		<script>

			var ss = self.opener.document.getElementById("pp").value;

			alert(ss);

		</script>

	</head>

	<body>

	</body>

</html>

4.浮动广告示例代码：

<html>

	<head>

		<title>漂浮广告</title>

		<meta name="keywords" content = "传智播客培训">

		<meta name="description" content = "北京传智播客培训">

		<meta name="description" content = "传智播客培训网页">

		<meta http-equiv= "content-type" content = "text/html;charset= utf-8">

		<script>

		function changePosition()

		{

			//找到div

			var mydiv1 = document.getElementById("div1");

			//从新设置位置

			mydiv1.style.left =Math.random()*500+"px";

			mydiv1.style.top = Math.random()*500+"px"

			//过一秒过一次，设置定时器

			setTimeout("changePosition()",500);

		}

		setTimeout("changePosition()",500);

		</script>

	</head>

	<body>

		<div id = "div1" style = "position:absolute;top:20px;left:20px;"><img src = "2.jpg"/></div>

		<img src = "1.jpg"/>

	</body>

</html>

5.各种确定取消窗口

<html>

	<head>

		<title>漂浮广告</title>

		<meta name="keywords" content = "传智播客培训">

		<meta name="description" content = "北京传智播客培训">

		<meta name="description" content = "传智播客培训网页">

		<meta http-equiv= "content-type" content = "text/html;charset= utf-8">

		<script>

		function changePosition()

		{

			//找到div

			var mydiv1 = document.getElementById("div1");

			//从新设置位置

			mydiv1.style.left =Math.random()*500+"px";

			mydiv1.style.top = Math.random()*500+"px"

			//过一秒过一次，设置定时器

			setTimeout("changePosition()",500);

		}

		setTimeout("changePosition()",500);

		</script>

	</head>

	<body>

		<div id = "div1" style = "position:absolute;top:20px;left:20px;"><img src = "2.jpg"/></div>

		<img src = "1.jpg"/>

	</body>

</html>

6.各种确定取消窗口history screen Location

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

   <script>

	  function closeWin(){

		close();

	  }

	  //弹框

	  //1.alert();//警告

	  //2.confirm();//弹出一个确定取消框,点确定返回true,点取消返回false

	  //prompt();弹出一个提示输入框

	  function deleteRow(obj){

		var result = confirm("确定要删除吗？");

		if(result){

			//alert("删除成功");

			var pNode = obj.parentNode.parentNode;//td,tr

			pNode.parentNode.removeChild(pNode);//父亲杀孩子

		}

	  }

	  function getPwd(){

		var result = prompt('请输入您的银行卡密码','123456');

		alert(result);

	  }

   </script>

 </head>

 <body>

	<table width="500" align="center" border="1" cellspacing="0" bordercolor="blue" cellpadding="5">

		<tr>

			<td>编号</td>

			<td>姓名</td>

			<td>年龄</td>

			<td>操作</td>

		</tr>

		<tr>

			<td>1</td>

			<td>李赛</td>

			<td>23</td>

			<td><input type="button" value="删除" onclick="deleteRow(this)" /></td>

		</tr>

		<tr>

			<td>2</td>

			<td>齐航</td>

			<td>18</td>

			<td><input type="button" value="删除" onclick="deleteRow(this)" /></td>

		</tr>

	</table>

    <input type="button" value="关闭窗口" onclick="closeWin()"/>

	<input type="button" value="提示输入" onclick="getPwd()"/>

	<hr/>

	<input type="button" value="后退" onclick="history.back()"/>

 </body>

</html>

<body>

    <a href="03.html">打开03.html</a>

	<input type="button" value="前进" onclick="history.go(1)"/>

 </body>

<body>

<hr/>

	<input type="button" value="后退" onclick="history.back()"/>

 </body>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title>Location </title>

  <script>

		//Location 代表地址栏  href是它的一个属性

		function changeLocationsw(){

			location.href="http://www.baidu.com";

		}

		//-----------Screen---------------------------------

		function getScreeenInfo(){

			alert(screen.width+","+screen.height);

		}

		//------------Navigator----------------------------------

		function getNavigatorInfo(){

			alert(navigator.appName+"\n"+navigator.appVersion+"\n"+navigator.platform);

		}

  </script>

 </head>

 <body>

    <a href="#">百度</a>

	<input type="button" value="百度" onclick="changeLocationsw()" />

	<input type="button" value="SCREEN" onclick="getScreeenInfo()"/>

	<input type="button" value="Navigator" onclick="getNavigatorInfo()"/>

 </body>

</html>

7.js模式对话框

<html>

	<head>

		<title>js模式对话框</title>

		<meta name="keywords" content = "传智播客培训">

		<meta name="description" content = "北京传智播客培训">

		<meta name="description" content = "传智播客培训网页">

		<meta http-equiv= "content-type" content = "text/html;charset= utf-8">

		<script>

			function openModal()

			{

				//cal的值来至于window.returnValue返回的值，在打开的模式对话框中。

				var cval = window.showModalDialog("01model.html")

				//赋值

				document.getElementById("city").value = cval;

			}

		</script>

	</head>

	<body>

		<input type = "text"  id = "city"/><input type = "button" value = "请选择城市" onclick = "openModal()"/>

	</body>

</html>

8.键盘事件:

<html>

	<head>

		<title>键盘事件</title>

		<meta name="keywords" content = "传智播客培训">

		<meta name="description" content = "北京传智播客培训">

		<meta name="description" content = "传智播客培训网页">

		<meta http-equiv= "content-type" content = "text/html;charset= utf-8">

	<script>

		function appendKey(){

			document.getElementById("myDiv").innerHTML+="onkeydown----->";

		}

		function keypress(){

			document.getElementById("myDiv").innerHTML+="onkeypress----->";

		}

		function keyup(){

			document.getElementById("myDiv").innerHTML+="onkeyup----->";

		}

		function appendKeysw(){

			//A-Z  65-90 ,  a-z  97-122    ,  '0'-'9'  48-57

			//alert(event.keyCode);

			if(event.keyCode==13)

			   event.keyCode = 9;

		}

	</script>

 </head>

 <body>

  <input type="text" id="keyinfo" onkeydown="appendKey()" onkeypress="keypress()" onkeyup="keyup()" />

  <input type="text" id="keysw" onkeydown="appendKeysw()" />

  <input type="text" id="keysw" onkeydown="appendKeysw()" />

  <input type="text" id="keysw" onkeydown="appendKeysw()" />

  <div id="myDiv">

  </div>

 </body>

</html>

提交事件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <meta http-equiv = "content-type" content = "text/html;charset= utf-8">

  <title> 提交事件 </title>

	<!--

		提交事件:onsubmit

		1.是写在form表单中，而不是写在提交按钮中

		2.调用格式:onsubmit="return 函数名()"

		3.被调用的函数中一定要返回布尔值

	-->

	<script>

		function chk(){

			var username = document.getElementById("username").value;

			var pwd = document.getElementById("pwd").value;

			//正则

			var reg = /^[0-9a-zA-Z]{6,10}$/;

			if(!reg.test(username)){

				return false;

			}

			if(pwd==""){

				return false;

			}

			return true;

		}

	</script>

 </head>

 <body>

	<form action="01model.html" method="post" onsubmit="return chk()">

		用户名：<input type="text" id="username" name="username" /><br/>

		密码:<input type="password" id="pwd"  name="pwd"/></br/>

		<input type="submit" value="登录"/>

		<input type="reset" value="重置"/>

	</form>

 </body>

</html>

onchange事件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> 提交事件 </title>

  <script>

	function changeCity()

	{

		//1.得到省份下拉列表的选中值

		var provinceVal = document.getElementById("province").value;

		//2.找到城市下拉列表

		var cityObj = document.getElementById("city");

		//3.定义数组

		var citys = new Array();

		citys[0] = new Array("");

		citys[1] = new Array("济南","青岛");

		citys[2] = new Array("长沙","株洲");

		//4.1清除下拉列表

	    cityObj.options.length=0;

	    var city = citys[provinceVal];

		for(var i= 0;i<city.length;i++ )

		{

			cityObj.add(new Option(city[i],city[i]));// new Option(文本，值)

		}

	}

  </script>

 <head>

 <body>

	<select id = "province" onchange = "changeCity()">

		<option value = "0">请选择省份</option>

		<option value = "1">山东</option>

		<option value = "2">湖南</option>

	</select>

	<select id = "city"></select>

 </body>

 </html>

javascript bom 编程的更多相关文章

JavaScript的BOM编程，事件-第4章
目标 BOM编程 window和document对象 window对象的属性和方法 document对象的属性和方法 JavaScript中对象的分类浏览器对象:window对象 window对象, ...
读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
4、BOM编程/正则表达式
1. BOM编程 1.1. BOM编程基础全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行jav ...
4 BOM编程
4 BOM编程编程基础全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的 ...
BOM编程
1 BOM编程 1.1 入门 BOM就是浏览器对象模型编程,通过javascript引擎提供的四个浏览器对象,操作浏览器,这叫BOM编程 1.2 window对象(重点) window代表的是一个窗口 ...
JavaScript BOM DOM 对象
title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...
Javascript DOM 编程艺术（第二版）读书笔记——基本语法
Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...
Web Worker javascript多线程编程（一）
什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...
Web Worker javascript多线程编程（二）
Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

随机推荐

cobbler部署安装CentOS6.8
Linux运维:cobbler : 矮哥linux运维群:93324526 学习cobbler的话,必须先搞懂kickstart,原理不是,不懂如何排错. kickstart部署请点击这里 1. Co ...
Swing-setOpaque()用法-入门
先看API: public void setOpaque(boolean isOpaque) 如果为 true,则该组件绘制其边界内的所有像素.否则该组件可能不绘制部分或所有像素,从而允许其底层像素透 ...
201521123013 《Java程序设计》第8周学习总结
1. 本章学习总结 2. 书面作业 Q1.List中指定元素的删除(题目4-1) 1.1 实验总结 while(list.contains(str)) list.remove(str); Q2.统计文 ...
201521123040《Java程序设计》第2周学习总结
1. 本周学习总结本周学习目录: <1>回顾(Java程序) <2>掌握各种数据类型的使用 <3>掌握运算符和表达式的使用 <4>枚举类.String ...
201521123086《JAVA程序设计》第一周学习总结
本周学习总结 (1)初步了解java程序的运行环境,通过命令行语句编译简单的java程序 (2)使用notepad编写,cmd下进入文件夹编译程序 (3)学习使用各种快捷键补全代码 (4)能够区别jd ...
自定义win8资源管理器左侧导航窗格的方法
Win8自定义资源管理器左侧导航窗格: 快捷键Win+R – 输入regedit: 删除“网络”项目 HKEY_CLASSES_ROOTCLSID{F02C1A0D-BE21-4350-88B0-73 ...
201521123034《Java程序设计》第十周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...
201521123071 《JAVA程序设计》第十四周学习总结
第14周作业-数据库 1. 本周学习总结 1.1 以你喜欢的方式(思维导图.Onenote或其他)归纳总结多数据库相关内容. 1.使用JDBC将Java程序与数据库连接 1.1注册驱动 Class.f ...
201521123106 《Java程序设计》第10周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业本次PTA作业题集异常.多线程 finally 题目4-2 1.1 截图你的提交结果(出现学 ...
201521123019 《java程序设计》第13周学习总结
1. 本章学习总结 2. 书面作业 Q1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 访问cec ...

javascript bom 编程

javascript bom 编程的更多相关文章

随机推荐

热门专题