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;
}