`
xinklabi
  • 浏览: 1591059 次
  • 性别: Icon_minigender_1
  • 来自: 吉林
文章分类
社区版块
存档分类
最新评论

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

分享到:
评论

相关推荐

    个人Javascript学习笔记 精华版

    个人Javascript学习笔记 精华版 本资源为个人Javascript学习笔记的精华版,涵盖了Javascript的基础知识、事件处理、对象和系统函数、浏览器对象等方面的内容。下面是对每个知识点的详细说明: 1. 什么是JavaScript...

    javascript学习笔记讲解版参考.pdf

    JavaScript学习笔记讲解版参考.pdf是一份详尽的教程,涵盖了从基础到进阶的JavaScript知识。这份笔记首先从CSS样式表开始,引导读者理解网页样式的设置与应用。 1. CSS(Cascading Style Sheets)样式表是用于控制...

    javascript学习笔记整理知识点整理

    这份“javascript学习笔记整理知识点整理”是针对初学者的一份宝贵资料,涵盖了JavaScript的基础知识,旨在帮助新手快速入门并掌握这门语言的核心概念。 一、变量与数据类型 在JavaScript中,变量用于存储数据。...

    JavaScript学习笔记,javascript基础知识,基础语法整理.pdf

    JavaScript基础知识点总结 JavaScript是一种高级的、动态的、基于对象的客户端脚本语言。它是在网页上执行的脚本语言,能实现网页的交互功能。下面是该资源中的重要知识点总结: 一、 JavaScript 基本概念 * ...

    JavaScript学习笔记.pdf

    JavaScript学习笔记是一本关于JavaScript编程语言的教材,该教材通过丰富的实例,系统地介绍了JavaScript的基础知识和实际应用技巧,帮助读者一步步掌握客户端编程技术。本书共分为九章,每一章都有其特定的主题,...

    我的javascript学习笔记

    根据提供的文件信息,可以看出这份“我的javascript学习笔记”主要涵盖了JavaScript中的几个关键概念和技术要点,包括正则表达式、AJAX以及一些JavaScript的核心语言特性。接下来将这些知识点进行详细的整理和解释。...

    JavaScript 学习笔记集和代码库

    JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和...

    Javascript学习笔记___自学实用

    JavaScript学习笔记——深入理解基础与函数 在JavaScript中,学习基础知识是至关重要的,因为它是所有进一步编程技巧的基础。首先,我们需要了解JavaScript中的数据类型。在JavaScript中,有五种简单的数据类型:...

    Javascript学习笔记(传智播客视频学习笔记+代码)

    "Javascript学习笔记(传智播客视频学习笔记+代码)"是一份全面介绍JavaScript基础知识的学习资源,适用于初学者。这份笔记结合了传智播客的web前端培训视频内容,提供了丰富的理论讲解和实践代码,帮助读者从零开始...

    JavaScript学习笔记讲解

    这只是JavaScript学习笔记的一小部分,JavaScript还有更多高级特性和概念,如对象、数组、函数、类、模块、闭包等,以及DOM操作、事件处理、Ajax异步请求等内容,需要进一步深入学习和实践才能掌握。

    javaScript学习笔记.rar

    这个“javaScript学习笔记.rar”压缩包显然包含了作者在学习JavaScript过程中的心得和记录,对于初学者或者想要深入理解JavaScript的人来说,是一份宝贵的资源。 JavaScript与Java虽然名字相似,但两者实际上是不同...

    蓝杰JavaScript学习笔记

    《蓝杰JavaScript学习笔记》是一份综合性的JavaScript学习资料,主要涵盖了JavaScript在网页动态操作、DOM操作以及事件处理等方面的基础知识。这篇笔记通过多个实例文件,如`dynamicCreateTable.htm`、`...

Global site tag (gtag.js) - Google Analytics