轻装上阵，安卓工程师之路---day03(JavaScript-DOM,BOM)
各个现有API的用处：
CSS：查询样式，例如：边框，文本，等
DHTML：查BOM和DOM对象的属性，事件，方法，等，功能较强
JavaScript语言参考手册，查询JS的内置对象的属性和方法
W3CShool手册，学习手册，相当于课件
01 JS数据类型--复合类型
复合类型分为三个子类型
一）对象
就是一系列属性和方法的集合，只是一种类似数组的特殊结构。其属性方法可增加的。
对象为分为四类
1）内置对象，例如：Date,Math,Number,String。。。
2）自定义对象，例如：Person，Car。。。
3）浏览器对象，即BOM，window，document。。。
4）扩展对象，ActiveXObject，将来如果想学AJAX技术的话，会接触到
二）数组
数组就是一群元素的集合
在JS中，定义数组的初始化大小不会影响最终向数组中添加的元素,可自由添加
在JS中，数组元素类型不限，即杂合类型
三）函数
一段具有一定功能的片段，例如：
function sayHello(){
函数体;
如果有返回值，要加上return;
}
02 BOM简介
BOM就是浏览器对象模型，即用JavaScript技术去操作浏览器的各个组成部份，为什么能操作呢？浏览器对象模型JavaScript是由浏览器中内置的JavaScript脚本解释器程序来执行JavaScript脚本语言的为了便于对浏览器的操作，JavaScript封装了对浏览器中的各个对象使得开发者可以方便的操作浏览器
学习JavaScript的重要作用之一：就是操作主流浏览器的每个组成部份，例如：状态栏，地址栏，。。。
学习JavaScript的重要作用之二：就是操作HTML/JSP/XML这些Web页面中的节点
03 BOM分类
BOM对象包括：
window 窗口
location 地址栏
screen 屏幕
document 文档
history 历史栏
navigator 浏览器
其实不止这些，可以到DHTML文档上去查询。
04 window对象
window对象是BOM浏览器对象模型的最顶层对象，类似于Java中的Object对象
一遇到<body>或<frameset>标签后，你们的浏览器自动创建window对象
window对象的常用方法：
open() 打开新窗口
alert() 显示一个警告框。
Confirm() 选择确定框。
prompt() 输入框
setTimeout() 一次性定时器
延时器
setInterval() 周期性定时器
鼠标点击相关：
onclick 在用户用鼠标左键单击对象时触发
ondblclick 当用户双击对象时触
鼠标移动相关：
onmouseout 当用户将鼠标指针移出对象边界时触发
onmousemove 当用户将鼠标划过对象时触发
焦点相关的：
onblur 在对象失去输入焦点时触发
按键相关的：
onkeyup 当用户释放键盘按键时触发
其他：
onchange 当对象或选中区的内容改变时触发
onsubmit 当表单将要被提交时触发
05 location_screen对象
location就是浏览器中的地址栏
href 设置或获取整个URL为字符串
reload() 重新装入当前页面，常用于刷新
screen就是包含关于客户屏幕和渲染能力的信息。
availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏
availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏
height 获取屏幕的垂直分辨率
width 获取屏幕的水平分辨率
06 document_history_navigator对象
document表示浏览器的文档区域
forms 获取页面所有表单对象
images 获取页面所有图片对象
links 获取所有含有href属性的超链接对象
referrer 获取将用户引入当前页面的位置URL
bgColor 设置或获取表明对象后面的背景颜色的值。
fgColor 设置或获取文档的前景(文本)颜色。
write() 在指定窗口的文档中写入一个或多个 HTML表达式
history表示浏览器的历史栏
length 获取历史列表中的元素数目
go(0) 从历史列表中装入URL，参数为0时表示浏览器刷新
页面刷新在目前学过的技术中（都是通过操作BOM）有如下二种方式：
location.reload();
history.go(0);
navigator对象是包含关于 Web 浏览器的信息
appName 获取浏览器的名称
appVersion 获取浏览器运行的平台和版本
07 form对象及其属性
form对象就是<form>标签
访问表单的方式:
document.forms[n]
document.表单名字
常用属性有：
action：提交到服务器的路径，例如：将表单提交到交来学的Servlet程序
method：以什么方式提交到服务器，例如：GET和POST
name：为每个<form>标签取一个名字，但要唯一
08 函数的三种定义方式
一）正常定义方式（重点)
function add(num1,num2){
return num1+num2;
}
二）构造函数方式
注意：构造函数方式定义javascript函数 注意Function中的F大写,因为它调用的是JavaScript的Function内置对象
var add = new Function("num1","num2","return num1+num2");
add(3,4);
三）无/匿名函数方式（重点)
var add = function(num1,num2){return num1+num2}
add(1,2);
09 DOM简介
关于DOM的学习，强烈建议到W3C School的浏览器脚本教程查询HTML DOM教程。
DOM文档对象模型，DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范。DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。
D，表示HTML/JSP/XML，今天我们只说HTML
O，表示对象，以对象的方式访问web页面中的元素
M，DOM是一套规则，在这DOM看来，所有的文档，加载到内存后，
都是一个倒状的树结构
10 节点的四种类型
一）文档节点[document] 整个文档就是一个文档节点：document
二）元素节点[xxxElement] 每一个HMTL标签都是一个元素节点
三）文本节点[xxxTextElement] 标签中的文字
四）属性节点[xxxAttributeElement] 标签的属性
任何一个文档，加载到内存后，都会形成一个倒状树结构，
树中的每个元素都是由节点组成的
11 node接口的常用api
getElementById()-->一个元素节点，需要用document对象调用
getElementsByName()-->一个数组，里面都是元素节点，需要用document对象调用
getElementsByTagName()-->一个数组，里面都是元素节点，可用document对象调用，也可用其它对象调用
hasChildNodes()-->有子节点返回true；无子节点返回false，只有元素节点有子节点，文本节点和属性节点不可能再包含任何子节点
nodeName 只读属性
nodeType 只读属性 ，元素节点：1；属性节点：2；文本节点：3；注释：8；文档节点：9
nodeValue 读写属性
getAttribute() 获取属性
getAttributeNode() 获取节点
setAttribute()创建或修改
removeAttribute()
replaceChild() 替换节点
本天重点代码集锦：
JavaScript对象创建：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>02_js.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
//自定义对象Person
function Person(xid,xname,xsal){
//xid,xname,xsal是形式参数，名字可以任意
//this.id表示该对象的属性
//this指向p
//属性
this.id = xid;
this.name = xname;
this.sal = xsal;
//方法，在JS中函数中可以再定义函数
this.run = function(){
document.write(p.name + "在跑<br/>");
}
}
</script>
<script type="text/javascript">
//创建Person对象
var p = new Person(2005,"赵君",3500);
//显示Person对象信息
document.write(p.id + "<br/>");
document.write(p.name + "<br/>");
document.write(p.sal + "<br/>");
p.run();
//我临时为Person对象添加属性和方法
p.city = "上海";
p.go = function(){
document.write(p.name+"在"+p.city+"工作过<br/>");
}
//调用属性和方法
p.go();
</script>
</body>
</html>
JavaScript二维数组的创建
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>03_js.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
//定义一个一维数组
var students = new Array(3);
//为数组元素设置值
students[0] = "哈哈";
students[1] = "呵呵";
students[2] = "嘻嘻";
students[3] = "笨笨";
students[4] = "聪聪";
students[5] = 123;
students[6] = false;
//显示
for(var i=0;i<students.length;i++){
document.write(students[i] + "<br/>");
}
</script>
<script type="text/javascript">
//定义一个二维数组
var students = new Array(3);
for(var i=0;i<students.length;i++){
students[i] = new Array(2);
}
//为数组元素设置值
students[0][0] = "哈哈";students[0][1] = 10000;
students[1][0] = "呵呵";students[1][1] = 12000;
students[2][0] = "嘻嘻";students[2][1] = 14000;
//显示
for(var i=0;i<students.length;i++){
document.write(students[i][0]+"----"+students[i][1]+"<br/>");
}
</script>
</body>
</html>
JavaScript动态获取可变参数方法
//因为JS为动态语言，所以参数初始可以不设定到后期用的时候再设定，而且只需要调用函数的属性arguments，即可获取当前参数的数组。再利用遍历即可获取全部参数
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>04_js.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
function show(){
//获取参数的个数
var size = show.arguments.length;
window.alert(size);
}
show("html","css","javascript");
show("html","css","javascript","xml");
show("html","css","javascript","xml","tomcat");
</script>
</body>
</html>
由于很多方法都是通过DHTML文档来查询，所以下面的代码，我只是省略的出示部分代码：
//将当前时间显示在浏览器的状态栏中
window.status = y+"年"+m+"月"+d+"日"+h+"时"+mi+"分"+s+"秒";
function openNewWindow(){
//打开一个新窗口，显示03号页面
window.open("03_window_open.html");
}
//显示一个确认框
function deleteLine(){
var flag = window.confirm("你确认要删除该本记录吗？");
f(flag == 1){
alert("请等待，正在删除中，，，");
}else{
;
}
}
function updateTime(){
var now = new Date();
var str = now.toLocaleString();
//将str变量的值，设置到span标签中去，下面写的代码，会提前用到DOM的知识
//innerHTML表示获取标签之间的内容
document.getElementById("time").innerHTML = str;
}
//每隔1秒钟将时间更新
window.setInterval("updateTime()",1000);
鼠标获取document区域的动态代码：
<script type="text/javascript">
//只要在浏览器有任何动态，浏览器就负责创建一个事件对象，名叫event
//当鼠标在浏览器的文档区域中不断移动时触发
window.document.onmousemove = function(){
//获取此时鼠标的x和y坐标
var x = event.clientX;
var y = event.clientY;
//设置到x和y这二个span标签中
document.getElementById("xID").innerHTML = x;
document.getElementById("yID").innerHTML = y;
}
//当鼠标从浏览器的文档区域中移出时触发
window.document.onmouseout = function(){
//设置0到x和y这二个span标签中
document.getElementById("xID").innerHTML = 0;
document.getElementById("yID").innerHTML = 0;
}
</script>
动态为标签添加事件
<input type="text" id="nameID"/>
<script type="text/javascript">
//定位input标签，并为其动态添加onblur事件
document.getElementById("nameID").onblur = function(){
//获取用户名，this表无名函数中，就表示调用的对象，即input标签
var name = this.value;
//判断长度
if(name.length > 0){
window.alert(name);
}else{
window.alert("用户名必填");
}
}
</script>
获取表单内容，并通过window的onsubmit方法阻止提交
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>10_bom_onchange_onsubmit.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form id="registerID" action="05_window_setTimeout_setInterval.html" method="POST">
<select id="city">
<option>选择省份</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
<option value="gz">广州</option>
</select>
<input type="submit" value="提交"/>
</form>
<script type="text/javascript">
//选中哪个城市，就以警告形式显示那个城市
document.getElementById("city").onchange = function(){
//获取选中的城市，这里的this表示select标签
//var value = this.value;
//获取选中option的索引号，从0开始
var i = this.selectedIndex;
//通过数组下标的形式获取option标签
var city = this[i].innerHTML;
//判断
if(city != "选择省份"){
//显示
alert(city);
}
}
</script>
<script type="text/javascript">
//点击提交按钮后，阻止表单提交
document.getElementById("registerID").onsubmit = function(){
var flag = true;
//onsubmit事件对应的函数，如果返回true则提交表单到action指定的地方处理
//onsubmit事件对应的函数，如果返回false则不提交表单
//项目中我们常用onsubmit事件对应的函数做表单验证
return flag;
}
</script>
</body>
</html>
Document的事件keyup被event捕获，在event中利用keycode来获取按下的键
<script type="text/javascript">
//对document对象添加onkeyup事件
document.onkeyup = function(){
//获取按健的unicode编码
//event是每个同学的浏览器自行创建的，因为每个浏览器内部机制不同，创建时略有区别
var unicode = event.keyCode;
//显示
window.alert(unicode);
}
</script>
<script type="text/javascript">
//获取屏幕的宽和高
var h = window.screen.availHeight;
var w = window.screen.availWidth;
alert(h+":"+w);
</script>
利用标签的集合获取他的子标签数组
<body>
<form name="register">
用户名：<input type="text" name="username"/>
密 码：<input type="password" name="password"/>
</form>
<form name="login">
用户名：<input type="text" name="username"/>
</form>
<hr/>
<img src="../images/contact.jpg" height="150px"/>
<img src="../images/lb.jpg"/>
<img src="../images/zgl.jpg"/>
<a href="#">去oracle</a><br/>
<a href="#">去ibm</a><br/>
<script type="text/javascript">
//document对象中有多少个表单
//var size = window.document.forms.length;
//alert(size);
//document对象中有多少张图片
//alert(document.images.length);
//获取第二个超连接中间的文本
alert(document.links[1].innerHTML);
</script>
</body>
为每个相同的input标签添加onclick事件，遍历添加事件
<body>
<input type="button" value="前景变红"/><br/>
<input type="button" value="前景变绿"/><br/>
<input type="button" value="前景变蓝"/><br/>
<font style="font-size:111">
打起精神来
</font>
<script type="text/javascript">
//为上述三个按钮动态添加单击事件
var inputElementArray = document.getElementsByTagName("input");
var size = inputElementArray.length;
for(var i=0;i<size;i++){
inputElementArray[i].onclick = function(){
//获取你点击的按钮的value属性值,this表示你点击的按钮
var tip = this.value;
//判断
if("前景变红" == tip){
//document.fgColor = "red";
document.fgColor = "red";
}else if("前景变绿" == tip){
//document.fgColor = "green";
document.fgColor = "green";
}else if("前景变蓝" == tip){
//document.fgColor = "blue";
document.fgColor = "blue";
}
}
}
</script>
</body>
<script type="text/javascript">
//获取浏览器的名字和版本
window.document.write(window.navigator.appName + "<br/>");
window.document.write(window.navigator.appVersion + "<br/>");
</script>
getElementsByName用法
<body>
<input type="text" name="tname" value="国庆66年_1" />
<br>
<input type="text" name="tname" value="国庆66年_2" />
<br>
<input type="text" name="tname" value="国庆66年_3" />
<br>
<script type="text/javascript">
//分别取得value的值
var inputElementArray = document.getElementsByName("tname");
var size = inputElementArray.length;
for(var i=0;i<size;i++){
//获取数组中的每一个input元素节点
var inputElement = inputElementArray[i];
//获取input元素节点的value属性值
var content = inputElement.value;
//显示
window.alert(content);
}
</script>
</body>
getElementsByTagName用法
<body>
<select multiple size="4">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</select>
<script type="text/javascript">
//通过document对象定位select元素节点
var selectElement = document.getElementsByTagName("select")[0];
//通过select对象定位所有的option元素节点
var optionElementArray = selectElement.getElementsByTagName("option");
//迭代
for(var i=0;i<optionElementArray.length;i++){
//取出每一个option元素节点
var optionElement = optionElementArray[i];
//获取option元素节点的value属性和标签之间的内容
var value = optionElement.value;
var html = optionElement.innerHTML;
alert(value + ":" + html);
}
</script>
</body>
hasChildNodes用法，分别获取元素，属性，文本节点
<body>
<select multiple size="3">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
<script type="text/javascript">
//select元素是否有子元素
//var selectElement = document.getElementsByTagName("select")[0];
//var flag = selectElement.hasChildNodes();
//alert(flag?"有子节点":"无子节点");
//option[2]元素是否有子元素
//var selectElement = document.getElementsByTagName("select")[0];
//var gzOptionElement = selectElement.getElementsByTagName("option")[2];
//var flag = gzOptionElement.hasChildNodes();
//alert(flag?"有子节点":"无子节点");
//广州元素是否有子元素
var selectElement = document.getElementsByTagName("select")[0];
var gzOptionElement = selectElement.getElementsByTagName("option")[2];
var gzTextElement = gzOptionElement.firstChild;
var flag = gzTextElement.hasChildNodes();
alert(flag?"有子节点":"无子节点");
</script>
</body>
获取nodeName，nodeType，nodeValue
//取得type属性名字nodeName，类型nodeType，值nodeValue
var inputElement = document.getElementById("tid");
var typeAttributeElement = inputElement.getAttributeNode("type");
var nodeName = typeAttributeElement.nodeName;//type
var nodeType = typeAttributeElement.nodeType;//2
var nodeValue = typeAttributeElement.nodeValue;//text
alert(nodeName+":"+nodeType+":"+nodeValue);
元素节点替换
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<ul id="city">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="gz">广州</li>
</ul>
<hr/>
<ul id="color">
<li id="red">红色</li>
<li id="green">绿色</li>
<li id="blue">蓝色</li>
</ul>
<script type="text/javascript">
//单击gz节点时，用color节点替换
document.getElementById("gz").onclick = function(){
//定位新节点
var colorElement = document.getElementById("color");
//this表示广州节点
//定位父节点
var cityElement = document.getElementById("city");
//替代
cityElement.replaceChild(colorElement,this);
}
</script>
</body>
</html>
removeAttribute,setAttribute方法的使用例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="button" value="生效" style="font-size:111px"/>
<input type="button" value="恢复" style="font-size:111px"/>
<script type="text/javascript">
//单击"生效"按钮，将其"失效"
document.getElementsByTagName("input")[0].onclick = function(){
//将按钮失效
this.setAttribute("disabled","disabled");
//修改按钮的value属性值
this.setAttribute("value","失效");
}
//单击"恢复"按钮，将其”生效“
document.getElementsByTagName("input")[1].onclick = function(){
document.getElementsByTagName("input")[0].removeAttribute("disabled");
document.getElementsByTagName("input")[0].setAttribute("value","生效");
}
</script>
</body>
</html>