javascript入门笔记(五)

wanyin940 · 发表于 2013-2-7 14:43:32

第六课：通过表单发送和接受信息

1.小例子：两个文本框的值相乘，结果出现在第三个文本框中：
<html>
<head>
<title>A Very Simple Calculator</title>
<script type = "text/javascript">
function multiplyTheFields()
{
    var number_one = window.document.the_form.field_one.value;
    var number_two = window.document.the_form.field_two.value;
    var product = number_one * number_two;
    window.document.the_form.the_answer.value = product;
}
</script>
</head>
<body>
<form name = "the_form">
Number 1: <input type = "text" name = "field_one"/> <br/>
Number 2: <input type = "text" name = "field_two"/> <br/>
The Product: <input type = "text" name = "the_answer"/> <br/>
<a href = "#" onClick = "multiplyTheFields(); return false;">Multiply them!</a>
</form>
</body>
</html>
2. 不同表单原色可以处理的事件：
按钮                 onClick 鼠标单击
复选框              onClick 鼠标单击
单选按钮           onClick 鼠标单击
文本框              onChange 修改文本框内容，然后单击文本框外部
文本区              onChange 修改文本区的内容，然后单击文本区外部
下拉菜单或选择列表   onChange   改变了下拉菜单或选择列表中的选项
表单                         onSubmit 在某个文本框中按回车键或者单击

小例子：带onSubmit按钮浏览器跳转：
<html>
<head>
<title>A Simple Browser</title>
</head>
<body>
Type a URL and then either click the submit button or just press ENTER.

<form name = "the_form" onSubmit = "window.location = window.document.the_form.the_url.value; return false;">

<input type = "text" name = "the_url" value = "http://" />
<input type = "submit" value = "Go there!" />
</form>
</body>
</html>

可以将window.document.the_form换成this。

3. 将下拉菜单作为导航菜单：
<html>
<head>
<title>A Pull-Down Menu for Navigation</title>

<script type = "text/javascript">
function visitSite(the_site)
{
window.location = the_site;
}
</script>

</head>
<body>
<h1>Use the pull-down menu to choose where you want to go</h1>
<form name = "the_form">
<select name = "the_select" onChange = "visitSite(this.options[this.selectedIndex].value);">
<option value = "http://www.nostarch.com/">No Starch Press</option>
<option value = "http://www.nytimes.com/">The New York Times</option>
<option value = "http://www.theonion.com/">The Onion</option>
</select>
</body>
</html>

4.任何HTML元素都可以带有id属性，可以用document.getElementById("xxxx")来找到那个元素。

5.简单各地时钟显示：

<html><head><title>Chapter 7 Assignment</title>
<script type="text/javascript">

</script>
</head>
<body>
<form name="clock_form">
<input type="text" name = "readout"/>
<input type="button" value="update" /><br/>
San Francisco <input type="radio" name = "zones" value = "sanfran" /><br/>
New York <input type="radio" name = "zones" value = "newyork" /><br/>
London <input type="radio" name = "zones" value = "london" /><br/>
Tokyo <input type="radio" name = "zones" value = "tokyo" /><br/>
</form>
</body>
</html>

		自动登录	找回密码
密码			立即注册

javascript入门笔记(五)

浏览过的版块