第六课:通过表单发送和接受信息
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">
<!-- hide me from older browsers
function updateReadout(the_zone)
{
// get the current UTC time
//
var now = new Date();
var the_hours = now.getUTCHours();
var the_minutes = now.getUTCMinutes();
var the_seconds = now.getUTCSeconds();
// adjust for selected time zone
//
if (the_zone == "newyork")
{
the_hours = the_hours - 4;
} else if (the_zone == "sanfran") {
the_hours = the_hours - 7;
} else if (the_zone == "tokyo") {
the_hours = the_hours + 9;
}
// now fix the hours if over 24 or under 0
//
if (the_hours < 0)
{
the_hours = the_hours + 24;
} else if (the_hours > 24) {
the_hours = the_hours - 24;
}
// put zeros in front of minutes and seconds if necessary
the_minutes = formatTime(the_minutes);
the_seconds = formatTime(the_seconds);
// now put the time in the text box
var the_time = the_hours + ":" + the_minutes + ":" + the_seconds;
window.document.clock_form.readout.value = the_time;
}
function formatTime(the_time)
{
if (the_time < 10) {
the_time = "0" + the_time;
}
return the_time;
}
function updateClock()
{
var selected_zone = "";
for (var loop=0; loop < window.document.clock_form.zones.length; loop++)
{
if (window.document.clock_form.zones[loop].checked == true)
{
selected_zone = window.document.clock_form.zones[loop].value;
}
}
updateReadout(selected_zone);
}
// show me -->
</script>
</head>
<body>
<form name="clock_form">
<input type="text" name = "readout"/>
<input type="button" value="update" onClick="updateClock();"/><br/>
San Francisco <input type="radio" name = "zones" value = "sanfran" onClick="updateReadout('sanfran');"/><br/>
New York <input type="radio" name = "zones" value = "newyork" onClick="updateReadout('newyork');"/><br/>
London <input type="radio" name = "zones" value = "london" onClick="updateReadout('london');"/><br/>
Tokyo <input type="radio" name = "zones" value = "tokyo" onClick="updateReadout('tokyo');"/><br/>
</form>
</body>
</html>
分享到:
相关推荐
JavaScript,也被称为JS,是一种广泛应用于网页和网络应用的编程语言,主要负责实现客户端的交互性和动态效果。作为“Web的三大核心技术”之一,JavaScript与HTML(超文本标记语言)和CSS(层叠样式表)共同构建了...
这篇"JavaScript入门新手学习笔记"提供了全面的学习资源,适合初学者系统性地掌握这一技术。 笔记可能包含了以下关键知识点: 1. **基础语法**:JS的基础包括变量(var、let、const)、数据类型(如字符串、数字、...
这份"javascript入门学习笔记"旨在为初学者提供一个全面且深入的JavaScript学习路径。 一、基础语法 JavaScript的基础包括变量、数据类型、操作符、流程控制等。变量用于存储数据,数据类型分为基本类型(如字符串...
【标题】:“JavaScript入门笔记(二)” 在“JavaScript入门笔记(二)”中,我们将深入探讨JavaScript这门广泛应用于Web开发的脚本语言的核心概念,以及如何利用它来增强网页的交互性和动态性。这篇笔记可能包括了...
在"JavaScript入门课件与笔记"中,你可以找到一系列帮助初学者掌握这门语言的资源。这些课件可能包含了从基础语法到高级特性的详细讲解,旨在帮助“小白”逐步建立起对JavaScript的理解。 1. **基础语法**:...
根据提供的文件信息,我们可以整理出一系列关于JavaScript的基础知识点,这些知识点特别适合初学者入门学习。 ### JavaScript基础概念 **JavaScript**是一种广泛使用的编程语言,它主要用于网页开发,为静态的HTML...
javascript入门笔记包括javascript简介、javascript语法、javascript流程控制、函数、数组等
一个周前自己较系统地学完 javascript,但老感觉自己对基础语法部分的掌握不够扎实,javascript 的基础语法内容实在是丰富灵活,但这部分是进大厂必不可缺的知识,于是花了不少时间耐心整理了这篇笔记,以此夯实基础...
这篇学习笔记主要涵盖了JavaScript的基础语法和客户端JavaScript的相关知识。 1. **JavaScript基本语法**: - **变量声明**:未声明的变量尝试读取时会产生错误,而写入未声明的变量会创建一个全局变量。 - **...
这份笔记涵盖了JavaScript的基础语法、核心概念以及高级特性,旨在构建一个完整的知识体系,帮助读者从入门到精通。 1. **JavaScript基础** - 变量与数据类型:JavaScript支持动态类型,包括基本类型(如数字、...
以下是对标题和描述中提到的JavaScript知识点的详细解释: ### 1. 自定义函数 JavaScript中的函数是第一类对象,可以作为变量赋值、作为参数传递或作为其他函数的返回值。自定义函数使用`function`关键字定义,参数...
这份“javascript学习笔记整理知识点整理”是针对初学者的一份宝贵资料,涵盖了JavaScript的基础知识,旨在帮助新手快速入门并掌握这门语言的核心概念。 一、变量与数据类型 在JavaScript中,变量用于存储数据。...
JAVASCRIPT从入门到精通读书笔记.pdf
JavaScript是一种广泛应用于网页和网络应用的轻量级、解释型的编程语言,主要用来增加网页的交互性和动态功能。JavaScript与Java虽然名字相似,但两者是完全不同的语言,JavaScript主要是在客户端的浏览器上运行,而...
本压缩包"JavaScript入门课堂随堂笔记.zip"包含了丰富的学习资料,旨在帮助初学者掌握这门重要的编程语言。 1. **基础语法**: JavaScript的基础包括变量声明(var、let、const)、数据类型(如字符串、数字、布尔...
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料,这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
这份笔记是对JavaScript基础知识的总结,内容丰富且覆盖了JavaScript编程的多个核心方面,适合初学者作为入门参考或对有经验的开发者作为复习材料。在实际使用JavaScript开发中,理解和掌握这些知识点是非常重要的,...
以上是对给定文件中JavaScript学习笔记的部分内容进行的详细解读,涵盖了JavaScript的基础知识、语法、数据类型、函数、对象、数组、DOM编程、AJAX以及JSON和jQuery的简介,旨在为初学者提供全面的入门指南。