您的位置：首页 > Web前端 > JavaScript

Codeproject—JavaScript For Beginners(5) Form_ Window_ Frame

2005-01-11 15:31 519 查看

Form

假定你有一个Form像这样:

<form name="aa">

<input type="text" size="10" value="" name="bb"><br>

<input type="button"

value="Click Here"onclick="alert(document.aa.bb.value)">

</form>

注意我们给了名字(Name)这个窗体和其中的成员,应此JavaScript可以获得访问到它们.

onBlur

如果你想要得用户的信息并且想要分别检查每种元素(例如：用户名字，密码，电子邮件)，警惕用户纠正错误的输入在离开之前,你可以利用onBlur.让我们看看onblur是怎样工作：

<html><head><script>

function emailchk()

{

var x=document.feedback.email.value

if (x.indexOf("@")==-1)

{

         alert("It seems you entered an invalid email address.")

         document.feedback.email.focus()

}

}

</script></head><body>

<form

name="feedback">

Email:<input type="text" size="20" name="email"

onblur="emailchk()"><br>

Comment: <textarea name="comment" rows="2" cols="20"></textarea><br>

<input type="submit" value="Submit">

</form>

</body></html>

如果你输入了不包含@的电子邮件地址,你将得到一个提示然你再次输入枢机. 什么是：x.indexOf(@)==-1? 这是一种Javascript方法能在一个字符串内搜寻字符并且寻找我们想要的。如果它找到它，将返回字符在字符串回内的位置。如果它不在，它将返回-1。因此，x.indexOf("@")==-1基本上的意思是： "如果字符串内不包括@，那么：

alert("It seems you entered an invalid email address.")

document.feedback.email.focus()

什么是focus()? 这是一种文本框的方法，它基本上迫使光标在被指定的文本框上,时其获得焦点. 与onbluro不同onsubmit 句柄是在<form>标记里面插入，而不在任何一种元素里面。让做一个例子：

<script>



</script>

<form name="login" onsubmit="return validate()">

<input type="text" size="20" name="userName">

<input type="text" size="20" name="password">

<input type="submit" name="submit" value="Submit">

</form>

注意:

if(document.login.userName.value==""). This means "If the box named userName of the form named login contains nothing, then...". return false. This is used to stop the form from submitting. By default, a form will return true if submitting. return validate() That means, "if submitting, then call the function validate()".

if(document.login.userName.value=="").它的意思是"如果窗体上中的文本框的值为””.".返回 false. 这常常被用于停止上的提交操作. 默认的,一个窗体如果提交了,将会返回True. return validate() 的意思是, "如果提交,然后调用函数 function validate()".

Protect a file by using Login (利用登陆保护文件)

让我们来试一个例子

<html><head>

<SCRIPT Language="JavaScript">

function checkLogin(x)

{

if ((x.id.value != "Sam")||(x.pass.value !="Sam123"))

{

         alert("Invalid Login");

         return false;

}

else

         location="main.htm"

}

</script>

</head><body>

<form>

<p>UserID:<input type="text" name="id"></p>

<p>Password:<input type="password" name="pass"></p>

<p><input type="button" value="Login" onClick="checkLogin(this.form)"></p>

</form>

</body></html>

|| 的意思试 "或者",!= 表示 "不等于". So we can explain the script: "If the id does not equal 'Sam', or the password does not equal 'Sam123', then show an alert ('Invalid Login') and stop submitting. Else, open the page 'main.htm'".

|| 的意思试 "或者",!= 表示 "不等于". 应此我们可以这样解释脚本: "如果id不等于 'Sam',或者密码不等于 'Sam123',然后停止提交显示警告框’Invalid Login’. 反之打开'main.htm'"页面.

Window

Open a window(打开一个window)

为了打开一个window,简单的我们使用"window.open()"方法:

<form>

<input type="button" value="Click here to see" onclick="window.open('test.htm')">

</form>

你可以替换 test.htm 用任何连接,例如你可以用 http://www.yahoo.com.
Size, toolbar, menubar, scrollbars, location, status

我们可以添加上面的脚本属性来控制window的尺寸,包含:toolbar,scrollbars等等.添加属性的语法是:

open("URL","name","attributes")

例如:

<form>

<input type="button" value="Click here to see"

onclick="window.open('page2.htm','win1','width=200,height=200,menubar')">

</form>

另外一个例子没有用到属性,但是尺寸也是改变了:

<form>

<input type="button" value="Click here to see"

onclick="window.open('page2.htm','win1','width=200,height=200')">

</form>

这里是可以添加的完整属性列表:

width	height	toolbar
location	directories	status
scrollbars	resizable	menubar

Reload(重载)

为了重载window,用这样的方法:

window.location.reload()

Close Window(关闭Window)

你可以用下面的代码:

<form>

<input type="button" value="Close Window" onClick="window.close()">

</form>

<a href="javascript:window.close()">Close Window</a>

Loading(装载)

最基本的语法是载入一个路径到window:

window.location="test.htm"

这类似与

<a href="test.htm>Try this </a>

让我们看看提供的这个例子,确认框允许用户选择两条去处:

<script>



</script>

Remote Control Window(远程控制window)

如果说你已经会了在当前window上打开一个新的window,然而,你会对如何控制两个window感兴趣.我们必须给一个定义一个名字在Window.Look下面:

aa=window.open('test.htm','','width=200,height=200')

通过给window的名称"aa",它允许你访问从这个window其中的任何东西从另外一个window.无论何时我们可以访问最新打开的window中的一切.例如,输出一段文字,我可以这样: aa.document.write("This is a test.").

现在,让我们看看如何改变背景色在另外的一个window中:

<html><head><title></title></head>

<body>

<form>

<input type="button" value="Open another page"

onClick="aa=window.open('test.htm','','width=200,height=200')">

<input type="radio" name="x" onClick="aa.document.bgColor='red'">

<input type="radio" name="x" onClick="aa.document.bgColor='green'">

<input type="radio" name="x" onClick="aa.document.bgColor='yellow'">

</form>

</body></html>

opener

使用 "opener"属性 ,我们可以访问主window从最近打开的window.

让我们建立一个主页面:

<html>

<head>

<title></title>

</head>

<body>

<form>

<input type="button" value="Open another page"

onClick="aa=window.open('test.htm','','width=100,height=200')">

</form>

</body>

</html>

然后建立一个远程控制的页面(在这个例子中是test.htm):

<html>

<head>

<title></title>

<script>

function remote(url){

window.opener.location=url

}

</script>

</head>

<body>

<p><a href="#" onClick="remote('file1.htm')">File

1</a></p>

<p><a href="#" onClick="remote('file2.htm')">File

2</a></p>

</body>

</html>

还是去试一试吧!

Frame(框架)

装载多个框架是最受欢迎的用途之一,并且改变不止一个框架的内容。我们可以说有一个父子框架：

<html>

<frameset cols="150,*">

<frame src="page1.htm" name="frame1">

<frame src="page2.htm" name="frame2">

</frameset>

</html>

我们可以添加一个连接在子框架中"frame1",它改变其中的内容不仅仅是page1,还有page2.下面的Html代码显示了这些:

<html>

<body>

<h2>This is page 1 </h2>

<a href="page3.htm"

onClick="parent.frame2.location='page4.htm'">Click Here</a>

</body>

</html>

注意:你必须用"parent.frameName.location" 去访问另外一个框架,”parent”代表父框架包含的frameset代码.

END

JavaScript For Beginners

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航