用了一个礼拜的JavaScript，也算是找到了一些头绪，解决了过去几年一直没有解决的问题，过去似乎一直有种JavaScript恐惧症，总是害怕在Web中写JS，然而，这种恐惧在仅仅一天对JS的理解中烟消云散了。也正如其开发的初衷，它是为非程序员设计的语言，不会很难学习的。发表了一堆乱七八糟的感慨后，也记录一下我在应用中实际的一些心得吧。
因为用JS做一些 validate 操作，操作的基本上都是 form 中的元素，所以没有用到太多复杂的特性。
简单的说来JavaScript 是一种解释执行的脚本语言，弱类型，基于对象，事件驱动。
对我们的实际应用来说，最关键的东西要算事件驱动，所有的JS的操作都是在页面的事件被触发的情况下进行的，比如onclick 事件就是在鼠标点击某个元素的情况下进行的，我最常用到的有 onload, onchange, onblur, onclick其实还有很多很多的事件。在html中这么写，就可以使用这些事件了，比如我们的一个超链接<a href=”test.html” οnclick=”warning();”>，当鼠标点击这个超链接的时候，便调用了JS的warning方法。
再写一些这次写的一些JS中取得的经验了，为了简化说明，就直接用HTML了，没有用到struts的HTML Tags，会比较直观一点。
1. 验证是否为空
在form中，有一个文本框：<input type=”text” name=”username”>
在 JS 中，可以这样获取这个文本框对象：
var username = document.form[0].username;
这样去设置它的值。
username.value = “hiro”;
但是有时候页面的层次结构会比较复杂，可以使用这种方式获取该对象
var username = document.getElementsByName("username");
这里访问它的值的方式有些不太一样，因为该方法把页面中所有同名元素放入一个数组中。
username[0].value = “hiro”;
当然还有很多其它的方法可以达到这样的效果。
在上面获取了username这个文本框对象后，就可以判断其是否为空了
if(username[0].value.trim().length == 0)
alert(“You must filled this field”);
2. 验证和格式化数字
有些操作和1里面是一样的，就不重复，假设获取了一个txtAmount的文本框对象。
对其进行转换：
amount = parseFloat(txtAmount[0].value);
这时候要进行判断来检查这个转换是否成功，输入的内容是数字则转换成功，否则失败。
if(isNaN(amount))
alert(“转换失败”);
如果转换成功的话，再把结果保留两位小数后输出。
txtAmount[0].value=amount.toFixed(2);
3. 一个表单中可根据用户的选择进行各种不同的操作：保存，删除……
在一个这样的<form name=”form<chmetcnv w:st="on" unitname="”" sourcevalue="1" hasspace="False" negative="False" numbertype="1" tcsc="0"></chmetcnv>1” method=”post” action=”myapp/save.do”>
这样默认提交操作是保存，但是我们如果在按钮上做些动作，就可以改变默认的提交操作。
<input type=”button” name=”<state w:st="on"></state>del” value=”<state w:st="on"></state><place w:st="on"></place>del” οnclick=”delete();”>
在JavaScript中有对应的delete()方法
function delete()
{
document.forms[0].action="/delete.do”;
document.forms[0].submit();
}
这样，我们就把这个表单提交给了delete.do这个Action了，执行了delete()的操作。
4. Submit
有这样的一个需求，我们在一个表单中填写了一些数据，我们可以保存这个表单，这时只有自己能看到这个表单，也可以把这个表单提交给上级，也就是”Submit”操作，这时当点击了Submit这个按钮时，执行的是保存当前数据，再弹出一个新窗口，确认提交。
实现思路：在表单中保存一个hidden元素，名为 submitFlag，页面打开的时候默认为空，当点Submit的时候，将其设为submit，并传递到结果页面。JS方法可以这么写。
function submitForm()
{
document.forms[0].action="/save.do";
var submitFlag = document.getElementsByName("submitFlag");
submitFlag[0].value = "submit";
document.forms[0].submit();
}
下个页面中<body onload>时检查这个标记，来判断该标记是否为”submit”
var test = "<c:out value="${submitFlag}"/>";
if(test == "submit")
{
var submitFlag = document.getElementsByName("submitFlag");
submitFlag[0].value = "";
var win=window.open("/submit.do", "submit","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=0, resizable=0, copyhistory=no, width=600, height=350")
win.focus();
}
这时弹出一个新窗口，当我们确认时，提交原页面，并关闭这个窗口。
function saveSubmit()
{
window.opener.document.forms[0].action = "/saveSubmit.do";
window.opener.document.forms[0].submit();
window.close();
}
在新窗口中，可以使用window.opener来操作原来的窗口，这里修改了原来窗口的一些参数并提交。
其实JS使用是非常灵活的，我们在应用中好好的去用它，往往能取得事半功倍的效果。
推荐两本JS的参考书，都是O'Reilly出版的：
JavaScript The Definitive Guide 4th，很好的权威指南，涵盖了JS使用的各个方面。
JavaScript And DHTML Cookbook，很好的例程大全，包括了很多我们常用到的功能。
3838
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
