客户端的JS

来源：互联网发布：淘宝闪电分期商户编辑：程序博客网时间：2024/05/12 17:16

window 对象及其属性方法

三种常用的window 方法是alert(),confirm()和prompt(),他们的功能都是弹出简单的对话框。alert()用于向用户显示消息。confirm()要求用点击ok 或 cancel 按钮来确认或取消某个操作。prompt()要求用户输入一个字符串

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>");
}

状态栏

除了创建时明确不使用状态栏的浏览器窗口，在每个浏览器窗口的底部都有一个状态栏（status line）,这是浏览器向用户显示消息的地方。程序中同样可以利用状态栏，它的内容由window对象的两个属性控制，即status和defaultStatus.

status主要用于存放瞬时消息.但有时你可能想在状态栏中显示一些非瞬时消息.如给浏览网页用户显示一条欢迎消息等.就要设置window对象的defalutStatus属性。

<SCRIPT LANGUAGE="JavaScript">
defaultStatus = "welcome to my WebSite.";
</SCRIPT>

超时设定和时间间隔

window对象的方法setTimeout()用来安排一个javascript的代码段在将来的某个指定时间运行。方法clearTimeout()用来取消那段代码的执行。

setInterval()和clearInterval()方法，它们的功能与setTimeout()和clearTimeout()相似，只不过它们会自动重新调度要反复运行的代码，无需代码自己进行再调度。

举个例子：在状态栏中动态显示时间，代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>

<BODY onload="displayTimeInStatusLine();">
hello world
</BODY>
</HTML>

Navigator对象，Screen对象，以及Window对象的控制方法

window.navigator引用的是包含Web浏览器总体信息的Navigator对象，它有五个主要属性：

appName(web浏览器的简单名称)，appVersion(浏览器的版本号或其他版本信息)，userAgent(浏览器在它的USER-AGENT HTTP标题中发送的字符串，这个属性通常包含appName和appVersion中的所有信息)，appCodeName(浏览器的代码名)，platform(运行浏览器的硬件平台)

Screen对象提供有关用户显示器的大小和可用颜色数量的信息。属性width和height指定的是以像素为单位的显示器大小。属性availWidth和availHeight指定的是实际可用的显示器大小，属性colorDepth指定可以显示的颜色数的以2为底的对数。

window对象的控制方法

window对象的open()方法可以打开一个新的浏览器窗口。有四个可选的参数，第一个参数是要在新窗口中显示的文档的URL；第二个参数是新打开的窗口的名字，这个名字可以作为<a>标记或<form>标记的target属性的值；第三个参数是特性列表，这些特性声明了窗口的大小和它的GUI装饰；第四个参数只在第二个参数命名的是一个已经存在的窗口时才有用。是一个布尔值，声明了由第一个参数指定的URL是应该替换掉窗口浏览历史的当前项（true）,还是应该在窗口浏览历史中创建的一个新的项（false）,后者为默认的设置。

方法close()将关闭一个窗口。

方法moveTo()可以将窗口的左上角移动到指定的坐标。方法moveBy()可以将窗口上移，下移或者左移，右移指定数量的像素。方法resizeTo()和resizeBy()可以按照相对数量和绝对数量调整窗口的大小。

方法focus()和blur()提供了对窗口的高级控制，调用focus()会请求系统将键盘焦点赋予窗口。blur()则会放弃.

方法scrollBy()会将窗口中显示的文档向左，向右或者向上，向下滚动指定数量的像素。scrollTo()会将文档滚动到一个绝对位置。

下面用window方法open(),close()和moveTo()举个例子，首先创建一个新窗口，然后使用方法setInterval（）反复调用一个函数，在屏幕上不断移动这个窗口。

<?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 >

窗口的location属性引用的是location对象，它代表该窗口中当前显示的文档的URL。location对象的href属性是一个字符串，它包含完整的URL文本。这个对象的其他属性（如protocol,host,pathname和search等）则分别声明了URL的各个部分。

location对象的search属性比较有趣。它包含的是问号之后的那部分URL,这部分通常是某个类型的查询字符串。

history属性引用的是该窗口的history对象。history对象最初是用来把窗口的浏览历史构造成近来访问过的URL的数组。

<!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>

</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;