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 Screenwidth 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.不过主要讲 ...
随机推荐
- ssh keys管理工具
原文地址:https://rtyan.github.io/%E5%B7%A5%E5%85%B7/2017/09/12/ssh-keys-manager.html 引言 我有两个github账户,一个是 ...
- Linux系统下C语言如何调用scalapack中的函数
在并行计算中经常需要调用scalapck(并行化的lapack)函数库里面的函数进行编程,这里简单介绍在C语言如何调用scalapck中的矩阵向量乘的函数. 注意:scalapack中的函数是用for ...
- java基于注解的redis自动缓存实现
目的: 对于查询接口所得到的数据,只需要配置注解,就自动存入redis!此后一定时间内,都从redis中获取数据,从而减轻数据库压力. 示例: package com.itliucheng.biz; ...
- group by 多字段分组
在平时的开发任务中我们经常会用到MYSQL的GROUP BY分组, 用来获取数据表中以分组字段为依据的统计数据.比如有一个学生选课表,表结构如下: Table: Subject_Selection S ...
- DevTool开发者工具
DevTool开发者工具 chrome的开发者工具可以说是十分强大了,是web开发者的一大利器,作为我个人而言平时用到的几率很大,相信大家也很常见,但是不要仅仅停留在点选元素看看样式的层面上哦,跟着我 ...
- Brotli、Deflate、Zopfli、LZMA、LZHAM、Bzip2六种无损数据压缩性能比较
这里比较了六种数据压缩算法,结果表明Brotli算法会代替普遍使用的Deflate算法.分别用Canterbury compression corpus,web contentcorpus,和 enw ...
- 201521123091 《Java程序设计》第5周学习总结
Java 第五周总结 第五周的作业. 目录 1.本章学习总结 2.Java Q&A 3.使用码云管理Java代码 4.PTA实验 1.本章学习总结 1.1 尝试使用思维导图总结有关多态与接口的 ...
- 201521123096《Java程序设计》第八周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 实验中使用了s ...
- 201521123020 《Java程序设计》第6周学习总结
本周学习总结 书面作业 1.clone方法 1.1 Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 答:需要将protected改为pu ...
- 201521123033《Java程序设计》第3周学习总结
1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 2. 书面作 ...