function warn_on_submit() {
alert("/n________________________________________________/n/n" +
" Your query is being submitted.../n" +
"please be aware that complex queries such as yours/n" +
" can require a minute or more of search time./n/n "+
" please be patient.");
var msg = "/nyou are about to experience the most/n/n" +
" -=| awesome |=-/n/n" +
"web page takes an average of 15 minutes to /n" +
"download over a 56k modem connection ./n/n" +
"Are you ready for a 'good' time,dude????";
if(confirm(msg)) {
location.replace("http://www.yahoo.com.cn");
} else {
location.replace("http://www.sina.com.cn");
}
var n = prompt("what is your name?","");
document.write("<hr><h1>welcome to my home page," + n + "</h1><hr>");
}
defaultStatus = "welcome to my WebSite.";
</SCRIPT>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function displayTimeInStatusLine() {
var d = new Date(); //获取当前时间
var h = d.getHours(); //提取小时
var m = d.getMinutes(); //提取分钟
var ampm = (h >= 12)?"PM":"AM"; //判断是上午还是下午
if(h > 12) h-=12; //将24小时计时形式转换成12小时计时形式
if(h==0) h = 12; //把0点转换成午夜
if(m < 10) m = "0" + m; //把0分转换成00分,
var t = h + ':' + m + '' + ampm; //将所有的值连接起来
defaultStatus = t; //在状态栏中显示
setTimeout("displayTimeInStatusLine()",60000); //1分钟调用
}
//-->
</SCRIPT>
</HEAD>
<BODY οnlοad="displayTimeInStatusLine();">
hello world
</BODY>
</HTML>
Navigator对象,Screen对象,以及Window对象的控制方法
window.navigator引用的是包含Web浏览器总体信息的Navigator对象,它有五个主要属性:
<?xml version="1.0" encoding="gb2312"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>window方法</title>
<meta name="title" content="" />
<SCRIPT LANGUAGE="JavaScript">
<!--
var x= 0,y = 0,w = 200, h = 200; //窗口的位置和大小
var dx = 5,dy = 5; //窗口的速率
var interval = 100; //更新的毫秒数
//创建要移动的窗口
//javascript:URL是一种现实短文档的简单方法
//最后一个参数指定了窗口的大小
var win = window.open('javascript:"<h1>BOUNCE!</h1>"',"","width=" + w + ",height=" + h);//设置窗口的初始位置
win.moveTo(x,y);
//每隔指定的毫秒数就是用setInterval()调用bounce()方法
//保存返回值,以便我们能通过把它传递给clearInterval()方法来停止动画
var intervalID =window.setInterval("bounce()",interval);
//每隔指定的毫秒数,该函数就将窗口移动(dx,dy)个单位
//当窗口到达屏幕的边界时,它将弹回
function bounce() {
//如果用户关闭了窗口,就停止动画
if(win.closed) {
clearInterval(intervalID);
return;
}
//如果达到右边界或左边界,就弹回
if ((x+dx>(screen.availWidth -w)) || (x+dx < 0))
{
dx = -dx;
}
//如果到达上边界或下边界,就弹回
if((y+dy >(screen.availHeight -h)) || (y+dy <0))
{
dy = -dy;
}
//更新窗口的当前位置
x +=dx;
y +=dy;
//最后把窗口移到新位置
win.moveTo(x,y);
}
//-->
</SCRIPT>
</head>
<body >
<form>
<input type ="button" value="stop" οnclick="clearInterval(intervalID);win.close();">
</form>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
function setcolor(w) {
//生成一种随机色
var r = Math.floor((Math.random() * 256)).toString(16);
var g = Math.floor((Math.random() * 256)).toString(16);
var b = Math.floor((Math.random() * 256)).toString(16);
var colorString = "#" + r + g + b;
//把框架的背景设置为该随机颜色
w.document.write("<body bgcolor='" + colorString + "'></body>");
w.document.close();
//安排在一秒后再次调用该方法
//由于调用框架的setTimeout()方法时,其中的字符串将在框架的环境中执行
//所以必须给顶级窗口的属性加上前缀'parent'
w.setTimeout('parent.setcolor(parent.' + w.name + ')',1000);
//我们还可以用更简单的方式来实现这一点。
//setTimeout('setcolor(' + w.name + ')',1000)
}
//-->
</SCRIPT>
</HEAD>
<frameset rows="33%,33%,34%" cols="33%,33%,34%" οnlοad="for (var i = 0;i < 9;i++)setcolor(frames[i]);">
<frame name="f1" src="javascript:''">
<frame name="f2" src="javascript:''">
<frame name="f3" src="javascript:''">
<frame name="f4" src="javascript:''">
<frame name="f5" src="javascript:''">
<frame name="f6" src="javascript:''">
<frame name="f7" src="javascript:''">
<frame name="f8" src="javascript:''">
<frame name="f9" src="javascript:''">
</frameset>
</BODY>
</HTML>
表单和表单元素
javascript 的 Form 对象代表了一个HTML表单。通常在Document对象的属性forms[]数组的元素中可以找到Form对象。在这个数组中,Form对象是按照它们在文档中出现的顺序存放的。所以,document.forms[0]指的就是文档中的第一个表单。
Form对象最有趣的属性是elements[]数组,它包含表示各种表单输入元素的javascript对象。也是按照顺序存放的。document.forms[0].elements[0];
通过调用Form对象的submit()方法可以提交表单,调用reset()方法可以重置表单元素。
命名表单和表单元素
表单元素的属性 type(一个只读字符串,标识表单元素的类型。)form(对包含该元素的Form对象的只读引用。)name(由html的name性质指定的只读字符串)value(一个可读可写的字符串,指定了表单元素包含或表示的值)
表单元素的事件处理程序
onclick(当用户在元素上点击鼠标时触发)
onchange(当用户改变了元素表示的值时触发,button和其相关元素通常不支持这个事件处理程序,因为它们没有可编辑的值。注意,该事件处理程序不是用户每次在文本框中敲击一个键都会触发。它只是在用户改变了一个元素的值,并把输入焦点移到了其它表单元素时才会触发也就是说,这个事件处理程序的调用说明发生了完整的改变)
onfocus(在表单元素收到输入焦点时触发)
onblur(在表单元素失去输入焦点时触发)
切换按钮
checkbox元素和radio元素都是切换按钮,它们有两种不同的视觉状态即可以被选中或取消。用户可以通过点击切换来改变它的状态。
文本框
Text元素可能是HTML表单核javascript程序中最常用的元素。它允许用户输入简短的、单行的文本串。它的value属性表示用户输入的文本。
Select元素和Option元素
select元素表示用户可以选择的选项(由Option元素表示)集合。Select元素可以用两种截然不同的方式操作,type属性的值由它的配置决定。如果<select>标记有multiple性质,就允许用户进行多项选择。因为一个select元素表示所有选项的集合<option>。这些对象存储在select元素的options[]数组中。因为select元素表示选项的集合,没有value属性。不过每个option对象都定义了value属性。
当用户选中或取消一个选项时,select元素将触发它的onchange事件处理程序。对于“单选”型的select元素,可读可写的属性selectedIndex用数字指定了当前被选中的选项。对于"多选"型的select元素。要确定选中了哪些选项,必须遍历options[]数组的所有元素,检查每个option对象的selected属性的值。
除了selected属性外,option元素还有text属性,设置这一属性可以改变显示给用户的文本。value属性也是可读可写的字符串,制定了提交表单时要发送给web服务器的字符串。
可以通过把options.length设置为想要的选项数来截取option元素的数组,把options.length设置为0可以删除所有option对象。可以把options[]数组的某个元素设置为null,从而在select元素中删除一个option对象。在删除一个option对象后,options[]数组中的位于这个option对象后的元素会被自动前移,以填充空位。
option元素定义了构造函数option(),可以动态创建新的option元素,把它们附加在options[]数组的尾部可以给select元素增加新选项。
如:var zaire = new Option("zaire","azire",false,false);
var countries = document.address.country;//获取select对象
countries.options[countries.options.length] =zaire;