9.HTML5 JavaScript DHTML

最新推荐文章于 2023-01-01 22:22:56 发布

原创最新推荐文章于 2023-01-01 22:22:56 发布 · 772 阅读

0 ·

CC 4.0 BY-SA版权

1.DHTML模型

window对象

navigator
frames
location
history
document
- all
- body
- forms
  - elements
- anchors
- links
- images
- ...
screen

<body id="bd">
	<a href="http://www.crazyit.org">疯狂Java联盟</a><br />
	<img id="lee" src="http://www.crazyit.org/logo.jpg"
	alt="疯狂Java联盟" /><br />
	<form>
		<input type="text" name="user" value="文本框"/><br />
		<input type="button" id='bn' value="按钮"/>
	</form>
	<script type="text/javascript">
		// 访问body元素
		alert(document.body.id);
		// 访问第一个超链接
		alert(document.links[0].href);
		// 访问id或name为lee的图片
		alert(document.images['lee'].alt);
		// 访问页面的第一个表单
		form = document.forms[0];
		alert(form.innerHTML);
		// 访问表单里第一个元素
		alert(form.elements[0].value);
		// 访问表单里id或name为bn的元素
		alert(form.elements['bn'].value);
		// 下面的代码在Internet Explorer 6中可行
		alert(document.all['bn'].value);
	</script>
</body>

2.使用window对象

Window 对象属性

属性	描述	IE	F	O
closed	返回窗口是否已被关闭。	4	1	9
defaultStatus	设置或返回窗口状态栏中的默认文本。	4	No	9
document	对 Document 对象的只读引用。请参阅 Document 对象。	4	1	9
history	对 History 对象的只读引用。请参数 History 对象。	4	1	9
innerheight	返回窗口的文档显示区的高度。	No	No	No
innerwidth	返回窗口的文档显示区的宽度。	No	No	No
length	设置或返回窗口中的框架数量。	4	1	9
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。	4	1	9
name	设置或返回窗口的名称。	4	1	9
Navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。	4	1	9
opener	返回对创建此窗口的窗口的引用。	4	1	9
outerheight	返回窗口的外部高度。	No	No	No
outerwidth	返回窗口的外部宽度。	No	No	No
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。	No	No	No
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。	No	No	No
parent	返回父窗口。	4	1	9
Screen	对 Screen 对象的只读引用。请参数 Screen 对象。	4	1	9
self	返回对当前窗口的引用。等价于 Window 属性。	4	1	9
status	设置窗口状态栏的文本。	4	No	9
top	返回最顶层的先辈窗口。	4	1	9
window	window 属性等价于 self 属性，它包含了对窗口自身的引用。	4	1	9
screenLeft screenTop screenX screenY	只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。	4	1	9

Window 对象方法

方法	描述	IE	F	O
alert()	显示带有一段消息和一个确认按钮的警告框。	4	1	9
blur()	把键盘焦点从顶层窗口移开。	4	1	9
clearInterval()	取消由 setInterval() 设置的 timeout。	4	1	9
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。	4	1	9
close()	关闭浏览器窗口。	4	1	9
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。	4	1	9
createPopup()	创建一个 pop-up 窗口。	4	No	No
focus()	把键盘焦点给予一个窗口。	4	1	9
moveBy()	可相对窗口的当前坐标把它移动指定的像素。	4	1	9
moveTo()	把窗口的左上角移动到一个指定的坐标。	4	1	9
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。	4	1	9
print()	打印当前窗口的内容。	5	1	9
prompt()	显示可提示用户输入的对话框。	4	1	9
resizeBy()	按照指定的像素调整窗口的大小。	4	1	9
resizeTo()	把窗口的大小调整到指定的宽度和高度。	4	1.5	9
scrollBy()	按照指定的像素值来滚动内容。	4	1	9
scrollTo()	把内容滚动到指定的坐标。	4	1	9
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。	4	1	9
setTimeout()	在指定的毫秒数后调用函数或计算表达式。	4	1	9

要引用窗口中的一个框架，可以使用如下语法：

frame[i]		//当前窗口的框架
self.frame[i]	//当前窗口的框架
w.frame[i]	//窗口 w 的框架

要引用一个框架的父窗口（或父框架），可以使用下面的语法：

parent		//当前窗口的父窗口
self.parent	//当前窗口的父窗口
w.parent 		//窗口 w 的父窗口

要从顶层窗口含有的任何一个框架中引用它，可以使用如下语法：

top		//当前框架的顶层窗口
self.top		//当前框架的顶层窗口
f.top		//框架 f 的顶层窗口

新的顶层浏览器窗口由方法 Window.open() 创建。当调用该方法时，应把 open() 调用的返回值存储在一个变量中，然后使用那个变量来引用新窗口。新窗口的 opener 属性反过来引用了打开它的那个窗口。

一般来说，Window 对象的方法都是对浏览器窗口或框架进行某种操作。而 alert() 方法、confirm() 方法和 prompt 方法则不同，它们通过简单的对话框与用户进行交互。

<body id="bd">
	<a href="http://www.crazyit.org">疯狂Java联盟</a><br />
	<img id="lee" src="http://www.crazyit.org/logo.jpg" alt="疯狂Java联盟" /><br />
	<form>
		<input type="text" name="user" value="文本框"/><br />
		<input type="button" id='bn' value="按钮"/>
	</form>
	<script type="text/javascript">
		// 访问body元素
		alert(document.body.id);
		// 访问第一个超链接
		alert(document.links[0].href);
		// 访问id或name为lee的图片
		alert(document.images['lee'].alt);
		// 访问页面的第一个表单
		form = document.forms[0];
		alert(form.innerHTML);
		// 访问表单里第一个元素
		alert(form.elements[0].value);
		// 访问表单里id或name为bn的元素
		alert(form.elements['bn'].value);
		// 下面的代码在Internet Explorer 6中可行
		alert(document.all['bn'].value);
	</script>
</body>

<script type="text/javascript">
	//修改窗口的状态栏文字。
	window.status="自定义状态栏文字";
</script>

2.1 访问历史

window.history.back（）
window.history.foward（）
window.history.go（intValue）前进或后退intValue。

2.2 访问页面URL

window.loaction.hostname：主机名称

window.loaction.href

window.loaction.host：主机地址

window.loaction.port

window.loaction.pathname：文件地址

window.loaction.protocol：装载该文档的协议

<script type="text/javascript">
	var loc = window.location;
	var locStr = "当前的location信息是:\n";
	// 遍历location对象的全部属性
	for (var propname in loc)
	{
		locStr += propname + ": " + loc[propname] + "\n"
	}
	alert(locStr);
</script>

2.3 主机屏幕信息

<script type="text/javascript">
	alert(window.screen);
	var str = "当前的屏幕信息是:\n";
	// 遍历screen对象的所有属性
	for(var propname in window.screen)
	{
		str += propname + ": " + window.screen[propname] + "\n"
	}
	alert(str);
</script>

2.4 弹出窗口

<script type="text/javascript">
	// 获取当前屏幕的大小
	var width = window.screen.width;
	var height = window.screen.height;
	// 打开一个新的满屏窗口
	window.open("status.html", "_blank", "left=0, top=0, width=" + width + ", height=" + height  + ", toolbar = no, menubar = no, resize = no");
	// 关掉自身
	window.close();
</script>

2.5 确认对话框和输入对话框

<a href="http://www.crazyit.org" onClick= "return confirm('请确认是否导航到疯狂Java联盟');">疯狂Java联盟</a>

	你的名字是：
	<span id="name"></span>
	<script type="text/javascript">
		name = prompt("请输入你的名字：" ,"");
		document.getElementById("name").innerHTML = name;
	</script>

2.6 使用定时器

<body οnlοad="setTime();">
	<span id="tm"></span>
	<script type="text/javascript">
		// 定义定时器变量
		var timer;
		// 保存页面运行的起始时间
		var cur = new Date().getTime(); 
		var setTime = function()
		{
			// 在tm元素中显示当前时间
			document.getElementById("tm").innerHTML =  new Date().toLocaleString();
			// 如果当前时间比起始时间大于60秒，停止定时器的调度
			if (new Date().getTime() - cur > 60 * 1000)
			{
				// 清除timer定时器
				clearInterval(timer);
			}
		}
		// 指定每隔1000毫秒执行setTime()函数一次
		timer = setInterval("setTime();" , 1000);
	</script>
</body>

<body>
	<span id="tm"></span>
	<script type="text/javascript">
		// 定义定时器变量
		var timer;
		// 保存页面运行的起始时间
		var cur = new Date().getTime(); 
		var setTime = function()
		{
			// 在tm元素中显示当前时间
			document.getElementById("tm").innerHTML
				= new Date().toLocaleString();
			// 如果当前时间比起始时间小于等于60秒，执行定时器的调度
			if (new Date().getTime() - cur <= 60 * 1000)
			{
				// 指定延迟1000毫秒后执行setTime()函数。
				window.setTimeout("setTime();" , 1000);
			}
		}
		// 直接调用setTime()函数
		setTime();
	</script>
</body>

2.7 navigator和地理位置

不同平台的信息并不完全相同。

<script type="text/javascript">
	alert(window.navigator);
	var browser = "当前的浏览器信息是:\n";
	// 遍历该浏览器的全部属性
	for(var propname in window.navigator)
	{
		// 将所有属性名、属性值连缀在一起
		browser += propname + ": " + window.navigator[propname] + "\n"
	}
	alert(browser); 
</script>

2.7.1 geolocation属性

Geolocation对象

getCurrentPosition（onSuccess，onError，options）
int watchCurrentPosition（onSuccess，onError，options）

返回监视器的标识id。相当于周期性调用getCurrentPosition方法。

clearWatch（watchId）：用于停止持续监听地理位置。

2.7.1.1 获取成功的回调函数onSuccess

function （position）｛｝

position包含属性

timestamp
coords
- longitude：经度
- latitude：纬度
- altitude：高度
- accuracy：返回经纬度的精确值，以米为单位。
- altitudeAccuracy：返回高度的精确值，以米为单位。
- speed：移动速度或null。
- heading：移动方向，以正北方向顺时针转过的角度来表示。
- timestamp：获取地理位置的时间戳

2.7.1.2 获取失败的回调函数onError

function （error）｛｝

code：返回错误代码
- 用户拒绝位置服务
- 无法获取地理位置
- 获取地理位置信息超时
message

2.7.1.3 其他选项options

该参数是一个js对象，支持以下属性

enableHightAccuracy：指定是否要求高精度的地理位置信息。
timeout：获取地理位置的超市时间。
maximumAge：地理信息的缓存时间。

2.7.2 获取地理位置

<script type="text/javascript">
	var geoHandler = function(position)
	{
		var geoMsg = "用户的所在的地理位置信息是：<br/>";
		geoMsg += "timestamp属性为：" + position.timestamp + "<br/>";
		// 获取Coordinates对象，该对象里包含了详细的地理位置信息
		var coords = position.coords;
		// 遍历Coordinates对象的所有属性
		for(var prop in coords)
		{
			geoMsg += prop + "-->" + coords[prop] + "<br/>";
		}
		// 输出地理位置信息
		document.writeln(geoMsg);
	}
	var errorHandler = function(error)
	{
		// 为不同错误代码定义错误提示
		var errMsg = {
			1: '用户拒绝了位置服务',
			2: '无法获取地址位置信息',
			3: '获取地理位置信息超时'
		};
		// 弹出错误提示
		alert(errMsg[error.code]);
	}
	// 获取地理位置信息
	navigator.geolocation.getCurrentPosition(geoHandler
		, errorHandler
		, {
			enableHighAccuracy:true,
			maximumAge:1000
		});
</script>

2.7.3 在google Map上定位

https://developers.google.com/maps/documentation/javascript/basics

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 在地图上定位 </title>
	<style type="text/css">
		html { height: 100% }
		body { height: 100%; margin: 0px; padding: 0px }
		#map_canvas { height: 100% }
	</style>
	<script type="text/javascript" 
		src="http://maps.google.com/maps/api/js?sensor=false">
	</script>
	<script type="text/javascript">
		function initialize() 
		{
			navigator.geolocation.getCurrentPosition(function(position)
			{
				// 获取浏览器提供的地理位置信息
				var latlng = new google.maps.LatLng(position.coords.latitude , position.coords.longitude);
				// 设置创建Google地图的选项
				var myOptions = {
					zoom: 16,
					center: latlng,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				// 获取页面上的map_canvas组件
				var mapDiv = document.getElementById("map_canvas");
				// 创建Google地图，指定把地图显示到mapDiv组件上
				var map = new google.maps.Map(mapDiv , myOptions);
				// 在地图上创建标记
				var marker = new google.maps.Marker({
					position: latlng,
					animation: google.maps.Animation.BOUNCE,
					map: map
				});
				// 设定标注窗口，并指定该窗口中的注释文字
				var info = new google.maps.InfoWindow({
				  content: "我在这里!"
				});
				// 打开标注窗口
				info.open(map, marker);
			},
			function(error){alert("您的浏览器没有提供地理位置信息！");}
			,
			{
				enableHighAccuracy:true,
				maximumAge:1000
			});
		}
	</script>
</head>
<body οnlοad="initialize()">
	<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

2.8 document对象

Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C 标准.

Document 对象集合

集合	描述	IE	F	O	W3C
all[]	提供对文档中所有 HTML 元素的访问。	4	1	9	No
anchors[]	返回对文档中所有 Anchor 对象的引用。	4	1	9	Yes
applets	返回对文档中所有 Applet 对象的引用。	-	-	-	-
forms[]	返回对文档中所有 Form 对象引用。	4	1	9	Yes
images[]	返回对文档中所有 Image 对象引用。	4	1	9	Yes
links[]	返回对文档中所有 Area 和 Link 对象引用。	4	1	9	Yes

Document 对象属性

属性	描述	IE	F	O	W3C
body	提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie	设置或返回与当前文档有关的所有 cookie。	4	1	9	Yes
domain	返回当前文档的域名。	4	1	9	Yes
lastModified	返回文档被最后修改的日期和时间。	4	1	No	No
referrer	返回载入当前文档的文档的 URL。	4	1	9	Yes
title	返回当前文档的标题。	4	1	9	Yes
URL	返回当前文档的 URL。	4	1	9	Yes

Document 对象方法

方法	描述	IE	F	O	W3C
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。	4	1	9	Yes
getElementById()	返回对拥有指定 id 的第一个对象的引用。	5	1	9	Yes
getElementsByName()	返回带有指定名称的对象集合。	5	1	9	Yes
getElementsByTagName()	返回带有指定标签名的对象集合。	5	1	9	Yes
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。	4	1	9	Yes
write()	向文档写 HTML 表达式或 JavaScript 代码。	4	1	9	Yes
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。	4	1	9	Yes

2.8.1 动态页面

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 动态页面 </title>
</head>
<body>
	<script type="text/javascript">
		// 计数器
		var n = 0;
		var win = null;
		// 用于显示弹出窗口显示提示信息的函数
		var show = function(msg)
		{
			// 判断弹出窗口是否为空
			if ((win == null) || (win.closed)) 
			{
				// 打开一个新的弹出窗口
				win = window.open("","console" ,"width=340,height=220,resizable");
				// 将弹出窗口的文档打开成一个text/html文档
				win.document.open("text/html");
			}
			// 让弹出窗口得到焦点
			win.focus();
			// 在弹出窗口装载的文档中输出信息
			win.document.writeln(msg); 
		}
	</script>
	<!-- 激发事件的按钮 -->
	<input type="button" value="单击" οnclick="show('您单击了按钮:' + ++n + '次。<br/>');">
</body>
</html>

2.8.2 读写cookie

<script type="text/javascript">
var setCookie = function(name , value)
{
	// 定义变量，保存当前时间
	var expdate = new Date();
	// 将expdate的月份 + 1。
	expdate.setMonth(expdate.getMonth() + 1);
	// 添加Cookie
	document.cookie = name + "=" + escape(value) ; + "; expires=" + expdate.toGMTString() +  ";";
}
var getCookie = function(name) 
{
	// 访问Cookie的name开始处
	var offset = document.cookie.indexOf(name)
	// 如果找到指定Cookie
	if (offset != -1) 
	{
		// 从Cookie名后位置开始搜索
		offset += name.length + 1;
		// 找到Cookie名后第一个分号（;）
		end = document.cookie.indexOf(";", offset) ;
		// 如果没有找到分号
		if (end == -1)
		{
			end = document.cookie.length;
		}
		// 截断字符串中Cookie的值
		return unescape(document.cookie.substring(offset, end));
	}
	else
	{
		return "";
	}
}
setCookie('user' , 'crazyit.org');
alert(getCookie('user'));
</script>

2.9 HTML5新增的浏览器分析

2.9.1 分析时间性能

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 分析页面加载时间 </title>
	<script type="text/javascript">
		// 记录进入页面的时刻
		var start = new Date().getTime();
		var load = function()
		{
			// 获取页面加载完成时的时刻。
			var now = new Date().getTime();
			var page_load_time = now - start;
			alert("页面加载时间: " + page_load_time);
		}
	</script>
</head>
<body οnlοad="load();">
<img src="http://www.crazyit.org/logo.jpg" alt="疯狂Java联盟"/>
</body >
</html>

performance.timing包含了进入该页面的时刻。

PerformanceTiming 接口包含了当前页面中与时间相关的信息.

Performance.timing 只读属性会返回这样的一个对象.

属性

Performance 接口不包含任何继承属性.

PerformanceTiming.navigationStart Read only

Is an unsigned long long representing the moment, in miliseconds since the UNIX epoch, right after the prompt for unload terminated on the previous document in the same browsing context. If there is no previous document, this value will be the same as PerformanceTiming.fetchStart.

PerformanceTiming.unloadEventStart Read only