javascript学习札记
1.在页面中导入js(这里<c:url会将context路径加入到整个js请求路径中)
<script type="text/javascript" src="<c:url value='/js/formOperation.js'/>"></script>
注意：这里面貌似不可以定义本页面的js，调用的时候有可能导致其它的js用不了.
2.在事件中直接调用js
<input type="submit" value=" 创建功能 " onclick="javascript:{return checkFormElement();document.createFuncsForm.submit();}">
点击submit后首先会执行带返回值的checkFormElement()，若返回值为false表单将不会被提交，否则执行document.createFuncsForm.submit()提交表单.
3.在超链接中调用js(常用的是点击删除链接时弹出确定删除对话框，用法同2)
out.write(" <a href=catServlet?action=delete&id=" + cat.getId() + " onclick=\"return confirm('确定删除?');\">删除</a>");
当在弹出的对话框中选择否，链接将不会跳转，选择确定，则会跳转.
4.解决js缓存问题(请求同一个路径时将会使用缓存中的js).
<script type="text/javascript" src="<c:url value='/js/formOperation.js?time=<%new Date(); %>'/>"></script>
这里面在请求的js路径后面加上日期的查询字符串，使得每次请求的路径都不同，将不会使用缓存中的js(好像也可以在请求的jsp,action等路径做类似操作).
注意：貌似使用ajax,dwr也能解决这样的问题.
5.在js中使用国际化消息(其它java实现的动态消息也可以)
<fmt:bundle basename="messages">
alert('<fmt:message key="formcheck.isnull"><fmt:param value="功能名称"/></fmt:message>');
</fmt:bundle>
6.js实现的倒计时器(可以用于定时页面跳转)
function timer(sec){
var time = document.getElementById('time');
sec--;
time.innerHTML = "<b>" + sec + "</b>";
if(sec != 0)
window.setTimeout('timer(' + sec + ')', 1000);
}
7.js实现的trim功能
/**trim掉数据空格及制表符等.*/
function trim(srcValue){
if(srcValue.length == 0){
return "";
}
//将被trim的字符集合(用字符串表示.)
//b表示退格符，f表示换页符.
var trimStr = new String(" \n\t\r\b\f");
var head;
var end;
for(head = 0; head < srcValue.length;head++){
if(trimStr.indexOf(srcValue.charAt(head)) != -1)
continue;
else
break;
}
if(head == srcValue.length){
return "";
}
for(end = srcValue.length-1; end >= head;end--){
if(trimStr.indexOf(srcValue.charAt(end)) != -1)
continue;
else
break;
}
var v = srcValue.substring(head, end+1);
return v;
}
8.表单校验(需要调用上面的trim功能)
<script type="text/javascript" >
<!--
//校验表单元素
function checkFormElement(){
var funcDescValue = document.getElementById('funcDescId').value;
funcDescValue = trim(funcDescValue);
if(funcDescValue.length == 0){
alert('<fmt:message key="formcheck.isnull"><fmt:param value="功能名称"/></fmt:message>');
return false;
}
else
document.getElementById('funcDescId').value = funcDescValue;
var menuFuncCodeValue = document.getElementById('menuFuncCode').value;
menuFuncCodeValue = trim(menuFuncCodeValue);
if(menuFuncCodeValue.length == 0){
alert('<fmt:message key="formcheck.isnull"><fmt:param value="功能代码"/></fmt:message>');
return false;
}
else
document.getElementById('menuFuncCode').value = menuFuncCodeValue;
if(document.getElementById('menuParentFuncDesc').value == -1){
alert('<fmt:message key="formcheck.mustselect"><fmt:param value="父功能名称"/></fmt:message>');
return false;
}
var menuPageHrefValue = document.getElementById('menuPageHref').value;
menuPageHrefValue = trim(menuPageHrefValue);
if(menuPageHrefValue.length == 0){
alert('<fmt:message key="formcheck.isnull"><fmt:param value="功能访问路径"/></fmt:message>');
return false;
}
else
document.getElementById('menuPageHref').value = menuPageHrefValue;
return true;
}
9. 单击按钮或链接实现页面跳转
<script type="text/javascript">
function viewCategories(){
window.location.href = "/ForSSH/category/viewCategory.action";
}
</script>
10.单击链接调用js代码
<a href="javascript:doTrade()">单击跳转</a>
或者<a href="javascript:" onclick="doTrade()">单击跳转</a>
11.获得web application的上下文
function getContextPath(){
var contextPath = document.location.pathname;
var index =contextPath.substr(1).indexOf("/");
contextPath = contextPath.substr(0,index+1);
delete index;
return contextPath;
}