而DOM可以形成一棵树:
DHTML:动态的HTML,不是一种语言,是多项技术综合体的简称
其中包含了HTML,CSS,DOM,JavaScript
这四个语言在动态html页面定义时,是如何负责的?
html:负责提供标签,对数据进行封装,目的是便于对标签中的数据进行解析
简单说:html是用标签封装属性
css:负责提供样式属性,对标签中的数据进行样式的定义
简单说:对数据进行样式定义
DOM:负责将标签型文档以及文档中所有内容进行解析,并封装成对象,在对象中定义了更多的属性和行为,便于对对象进行操作。
简单说:将文档和标签以及其他内容变成对象
JS:负责提供程序设计语言,对页面中的对象进行逻辑操作。
简单说:负责页面的行为定义,也就是页面的动态效果,所以Js是动态效果的主力编程语言
DHTML + XMLhttpRequest = AJAX 通讯服务端
BOM , Navigator,History对象
BOM:Browser Object Model:浏览器对象模型
这个模型方便于操作浏览器
而浏览器对应的对象就是window对象,API文档查看Window
<!--定义个一个事件源,通过对事件源的触发,获取想要结果,点击按钮获取信息-->
<!--
<input type="button" value="演示Window" onclick="alert('xx')"/>
-->
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
function MyWindow(){
alert("nihao");
//如果想知道浏览器中的信息,就需要使用Window对象navigator
var name = window.navigator.appName;//浏览器名
var version = window.navigator.appVersion;//平台版本,常见XX版本过低,要升级
/*document.writeln(name);
document.write("<hr>")
document.writeln(version);*/
out(name);
out(version);
/*History
* back:从历史列表中装入前一个URL,就是浏览器的后退
* forward:从历史列表中装入下一个URL
* go:指定一个
* */
history.back();
}
function goBack(){
window.history.back();
}
</script>
<!--定义事件源,注册事件相关联的动作-->
<input type="button" value="演示Window" onclick="MyWindow()"/>
<input type="button" value="返回上一页" onclick="goBack()"/>
<body>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
function WindowLacation(){
//var pro = location.protocol;
var text = location.href;
//alert(text);
//给Location的href属性设置一个值,并对其值进行解析,如果是http,进行链接访问
location.href = "http://www.sina.com.cn";
}
</script>
<!--定义事件源,注册事件相关联的动作-->
<input type="button" value="演示Lacation" onclick="WindowLacation()"/>
</body> <script type="text/javascript">
var timeid;
function windowMethod(){
// var flag = window.confirm("确定退出?");//弹出一个窗口,确定/取消
// alert(flag);
//window.setTimeout("alert('time out run')",4000);//4秒后弹出
timeid = window.setInterval("alert('time out run')",2000);//每两秒弹出
//关闭,对应的clearInteval
}
//window.open(...);//流氓广告的原理
function windowopen(){
window.open("Adventor.html","_blacnk","height=500","width=500","status=yes",
"toolbar=yes","menubar=yes","location=yes");//放外面,不用点直接打开
/* window.open("","_blacnk","height=200","width=200","status=no",
"toolbar=no","menubar=no","location=no");传说中的广告*/
//close();当前窗口,执行close关闭,会有提示,因为当前窗口是你打开,close执行的是,自动打开的窗
}
function windowclose(){
window.close();
}
function Stop(){
clearInterval(timeid);
}
function windowMove(){
// moveBy(10,10);//点一下横坐标移到10,纵坐标移到10,指的是整个窗口
// moveTo(20,20);//移到指定的坐标点
//resizeBy()调整窗口尺寸
//resizeTo()
/*for(var x = 1;x<50;x++){
moveBy(10,0);
moveBy(0,10);
moveBy(-10,0);
moveBy(0,-10);
}//QQ抖动窗口,就是这个原理,返回一个程序,使对方的窗口执行
*/
// scrollBy(10,10);//将窗口滚动x和y的偏移量
// scrollTo();
}
</script>
<input type="button" value="window方法" onclick="windowMethod()" />
<input type="button" value="窗口移到" onclick="windowMove()" />
<input type="button" value="窗口打开" onclick="windowopen()" />
<input type="button" value="停止" onclick="Stop()" /> <script type="text/javascript">
/*//事件的使用:
//定义好 事件 = 处理方式
onunload = function(){// 对象卸载完触发 3
alert("onunload run");
}
onload = function(){//浏览器打开,对象一加载完触发 1
alert("onload run");
}
onbeforeunload = function(){
alert("onbeforeunload run");//对象卸载前触发 2
}*/
onload = function(){
window.status("加载完啦");//状态栏,状态栏中的文字,可以使用JS
每隔一秒显示一个字
}
</script> <script type="text/javascript">
//演示弹窗,页面一加载,就执行
//在当前页面中定义广告页面脚本,在onload事件中完成广告的弹窗
onload = function(){
window.open("Adventor.html","_blacnk","height=200","width=200","status=no",
"toolbar=no","menubar=no","location=no");
}
</script><body>
<h1>广告</h1>
<h2>打广告</h2>
<script type="text/javascript" >
//setTimeout("close()",3000);
onunload = function(){//关掉就弹
window.open("Adventor.html","_blacnk","height=200","width=200","status=no",
"toolbar=no","menubar=no","location=no");
}
setInterval("focus()",1000);//focus(),使焦点放在当前广告窗口,管不了,也不能最小化
</script>
</body>原文:http://blog.csdn.net/wjw0130/article/details/41788297