一些javascript的经验

Question

2． 页面参数校验
2.1字符判断
对页面元素进行字符型判断，由页面得到的元素值都是字符型的，直接使用”= =”来判断字符是否相等2.2日期判断
对页面进行日期的判断首先要对页面的字符数值进行日期的转换
日期输入一般为：YYYYMMDD
方法：
function checkDate(objname){
var tempname = objname;
var datename = document.getElementById(tempname);
if(datename.value.length != 8){
alert("输入日期格式不正确，请按照'YYYYMMDD'的格式输入");
return false;
}
var y,m,d;
y = datename.value.substring(0,4);
m = datename.value.substring(4,6);
d = datename.value.substring(6,8);

if(datename.value != ""){
if(!CheckDateMain(y,m,d)){
alert("输入日期格式不正确，请按照'YYYYMMDD'的格式输入");
datename.value = "";
datename.focus();
}
}
}
function CheckDateMain(year,month,day){
    if(!CheckNumberMain(year)){
        return false;
    }
    if(!CheckNumberMain(month)){
        return false;
    }
    if(!CheckNumberMain(day)){
        return false;
    }
    var dat = new Date(year - 1900, month - 1, day);
    if (dat.getMonth() == (month-1)) {
        return true;
    } else {
        return false;
    }
}2.3数值判断
对输入值进行整数型，浮点型，数字判断：
方法：
function CheckFloatMain(str){
    var rc=true;
    oneDecimal=false;
    if (str+"" == "undefined" || str == null){
rc=false;
    } else{
for(i=0;i<str.length;i++){
    ch=str.charAt(i);
    if(i==0 && ch=='-'){
continue;
    }
    if(ch=="." && !oneDecimal){
oneDecimal=true;
        continue;
    }
    if ((ch< "0") || (ch >'9')){
        rc=false;
        break;
    }
}
    }
    return rc;
}function CheckNumberMain(str){
    var rc=true;
    if (str+"" == "undefined" || str == null){
        rc=false;
    } else if(str.length==0){
rc=false;
    } else {
for(i=0;i<str.length;i++){
    if(str.charAt(i)<'0' || str.charAt(i)>'9'){
        rc=false;
        break;
    }
}
    }
    return rc;
}function CheckIntegerMain(str){
    var rc=true;
    if (str+"" == "undefined" || str == null){
rc=false;
    } else{
for(i=0;i<str.length;i++){
            if(i==0 && str.charAt(i)=='-'){
                continue;
            }
            if(str.charAt(i)<'0' || str.charAt(i)>'9'){
                rc=false;
                break;
            }
}
    }
    return rc;
}注意：在进行整数型，浮点型比较大小时都需要进行相应的转换，调用方法parseFloat()或parseInt()来转换2.4特殊格式转换
去除货币的逗号分割，方法：通过调用replace方法将逗号替换成非空格，例：
pn = primaryInsuredNumber.value.replace(',','');E_Mail格式校验，方法：
function CheckEmailMain(str){
    var CHAR_LETTER_NUMERIC=1;
    var CHAR_UNDERLINE=2;
    var CHAR_DOT=3;
    var CHAR_AT=4;
    var CHAR_DIVIDE=5;
    var CHAR_END=6;
    var CHAR_OTHER=7;
    var DIV_CHAR=',';    var rc=true;
    if (str+"" == "undefined" || str == null){
        rc=false;
        return rc;
    } else if(str.length==0){
        rc=true;
        return rc;
    }    var exit_flag=false;
    var total_char=str.length;
    var pos=0;
    var cur_char;
    var cur_status=0;
    while((pos<=total_char) && (!exit_flag)){
        if(pos==total_char){
          cur_char=CHAR_END;
        }
        else if (str.charAt(pos)=='.'){
          cur_char=CHAR_DOT;
        }
        else if (str.charAt(pos)==DIV_CHAR){
          cur_char=CHAR_DIVIDE;
        }
        else if(str.charAt(pos)=='_'){
          cur_char=CHAR_UNDERLINE;
        }
        else if(str.charAt(pos)=='@'){
          cur_char=CHAR_AT;
        }
        else if(((str.charAt(pos)>='a')&&(str.charAt(pos)<='z'))||((str.charAt(pos)>='A')&&(str.charAt(pos)<='Z'))||((str.charAt(pos)>='0')&&(str.charAt(pos)<='9'))||(str.charAt(pos)=='-')){
          cur_char=CHAR_LETTER_NUMERIC;
        }
        else{
          cur_char=CHAR_OTHER;
        }
        switch (cur_status){
          case -1://error
            rc=false;
            exit_flag=true;
            break;          case 0://initial status
            if((cur_char==CHAR_LETTER_NUMERIC)||(cur_char==CHAR_UNDERLINE)||(cur_char==CHAR_DOT)){
              cur_status=1;
            }
            else{
              rc=false;
              cur_status=-1;
            }
            break;
          case 1://user name
            if((cur_char==CHAR_LETTER_NUMERIC)||(cur_char==CHAR_UNDERLINE)||(cur_char==CHAR_DOT)){
              cur_status=1;
            }
            else if(cur_char==CHAR_AT){
              cur_status=2;
            }
            else{
              rc=false;
              cur_status=-1;
            }
            break;
          case 2://@
            if(cur_char==CHAR_LETTER_NUMERIC){
              cur_status=6;
            }
            else{
              rc=false;
              cur_status=-1;
            }
            break;          case 6://"."
            if(cur_char==CHAR_LETTER_NUMERIC){
              cur_status=6;
            }
            else if(cur_char==CHAR_DOT){
              cur_status=3;
            }
            else{
              rc=false;
              cur_status=-1;
            }
            break;          case 3://fisrt domain name
            if(cur_char==CHAR_LETTER_NUMERIC){
              cur_status=4;
            }
            else{
              rc=false;
              cur_status=-1;
            }
            break;
          case 4://not first domain name
            if(cur_char==CHAR_LETTER_NUMERIC){
              cur_status=4;
            }
            else if(cur_char==CHAR_DOT){
              cur_status=3;
            }
            else if(cur_char==CHAR_DIVIDE){
              cur_status=0;
            }
            else if(cur_char==CHAR_END){
              cur_status=5;
            }
            else{
              rc=false;
              cur_status=-1;
            }
            break;
          case 5://ok
            rc=true;
            exit_flag=true;
            break;
          default:
            rc=false;
            exit_flag=true;
            break;
        }
        pos++;
    }
    return rc;
}
使用正则表达式更为方便

Answer 1

3． 页面弹出窗口控制
页面弹出窗口分为两种方法：
方法一：采用window.open方法弹出窗口
该方法弹出的子窗口可以自由控制大小，查看源文件，可以通过config参数调整页面格式（fullscreen = 3）,可以在本页面进行页面刷新
方法二：采用window.showModealDialog方法弹出窗口
该方法弹出的是模态窗口，通过config参数固定页面大小和相关的样式，不可使用fullscreen方法，不可以进行自由控制大小，无法查看源文件，如果需要在模态窗口进行页面的刷新必需要在模态窗口外再套一层页面，具体操作方法：
父窗口：
father.html      调用方法window.showModelDialog(“./frameset.html”,””,””);
frameset.html 框架页面------------
<frameset rows=”100%”>
<frame src = “./child.html”>
</frame>
</frameset>
child.html 子窗口，可以进行页面刷新
如果不使用frameset进行页面固定，一旦刷新页面就会弹出一个新窗口4． 动态新增表格行
方法：
function onInsertrow(){
var SC = "font-size: 9pt;padding-center: 10pt;background-color: #FAFAFA";
var length=invoiceInfo.rows.length;
var index=length-1;
var objRow;
var objCel;
objRow = invoiceInfo.insertRow();
objRow.runtimeStyle.cssText=SC;

var objCel = objRow.insertCell(0);
objCel.innerHTML="<tr><td><input name='invoiceDTOList["+index+"].invoiceNo' type='text' value='' size='10' ></td>";
}对于页面元素select为导用数据表的需要使用下面的方法
在页面使用一段隐藏域
<table id='hiddenBaseTagTbl' style="display:none">
  <tr>
    <td>
      <lwc:bind path="invoiceWebDTO.invoiceDTOList[0].currencyCode"><egis:basecode type="list" name="${status.expression}" value="${status.value}" table="currency_table" defaultValue="01" allowNull="false" /></lwc:bind>
    </td>
  </tr>
</table>
动态新增的方法中改为：
var str = hiddenBaseTagTbl.rows[0].cells[0].innerHTML;
objCel = objRow.insertCell(1);
var replaceStr = "["+ index + "]";
objCel.innerHTML= str.replace("[0]", replaceStr);

Answer 2

5． 动态表格排序
对从输入库查询出的表格结果进行页面动态排序，方法：
var tmptables = document.all.tags("table");for (var i=0;i<tmptables.length;i++)  //遍历所有的页面表格
if (tmptables[i].sortable)  //判断标志位是否需要排序
attachTable(tmptables[i])var sortLine,sortCol;function tableToArray(tmptable)
{
var result = new Array();
if (tmptable.tHead == null)
{
for (var i=tmptable.firstChild.children.length-1;i>sortLine;i--)
{
var tmptr = tmptable.firstChild.children[i];//如果不存在thead的话就把tbody中在sortLine行之下的行排序
result[result.length] = tmptr.cloneNode(true);
}
}
else
{
for (var i=tmptable.children[1].children.length-1;i>-1;i--)
{
var tmptr =tmptable.children[1].children[i]; //如果存在thead的话则默认把tbody中的全部行排序
result[result.length] = tmptr.cloneNode(true);
}
}
return result;
}function parseDate(datestring){
return new Date(datestring);
}function sortArrayFloat(arg1,arg2) //根据指定的列按浮点数排序
{ 
if (parseFloat(arg1.children[sortCol].innerText) > parseFloat(arg2.children[sortCol].innerText)) return 1
else return -1
}
function sortArrayString(arg1,arg2) //根据指定的列按串排序
{ 
if (arg1.children[sortCol].innerText>arg2.children[sortCol].innerText) return 1
else return -1
}function sortArrayDate(arg1,arg2) //根据指定的列按串排序
{ 
if (parseDate(arg1.children[sortCol].innerText) > parseDate(arg2.children[sortCol].innerText)) return 1
else return -1
}function arrayToTable(ar,tmptable)
{
if (tmptable.tHead == null)
{
tmptbody = tmptable.firstChild;//如果不存在thead的话就把tbody中在sortLine行之下的行排序
for (var i=tmptbody.children.length-1;i>sortLine;i--)
{
var tmptr =tmptbody.children[i];
for (var j=0;j<tmptr.children.length;j++ )
{
tmptr.children[j].innerHTML = ar[tmptbody.children.length-i-1].children[j].innerHTML
}
}
}
else
{
tmptbody = tmptable.children[1];
for (var i=tmptbody.children.length-1;i>-1;i--)
{
var tmptr =tmptbody.children[i];
for (var j=0;j<tmptr.children.length;j++ )
{
tmptr.children[j].innerHTML = ar[tmptbody.children.length-i-1].children[j].innerHTML
}
}
}
}function sortTable()
{ var elm = event.srcElement;  //获取触发事件的对象
var tmptr = elm.parentNode;  //获取文档层次中的父对象
tmptable = tmptr.parentNode.parentNode;  //获得需要排序的表格 for (var i=0;i<tmptr.children.length; i++){  //遍历列，找出是哪一列需要排序
if (tmptr.children[i] == elm )
break
} sortCol = i;//获得被点击的列
sortLine = tmptable.sortLine;//获得被点击的行
var ar = tableToArray(tmptable);//把行转换为数组
if (elm.sortType == "float")
ar.sort(sortArrayFloat);//排序
else
ar.sort(sortArrayString);//排序 if (elm.reverse == true)
{
elm.reverse = false;
ar.reverse();
}
else
{
elm.reverse = true;
}
arrayToTable(ar,tmptable);
}function attachTable(tmptable)
// 为一个表格的一行添加事件
{
var line = 0;
//遍历需要排序的表的每一行，检查标志位，是否为表头元素
for (var i=0;i<tmptable.firstChild.children.length ; i++)
if (tmptable.firstChild.children[i].sortLine)
line = i ; var tds = tmptable.firstChild.children[line].children; //获得该表格表头元素的td标签对象集
for (var i=0;i<tds.length;i++){
tds[i].attachEvent("onclick",sortTable);  //添加事件
tds[i].style.cursor="hand";  //设置鼠标形状
tds[i].style.fontWeight="bold"  //设置字体
}
tmptable.sortLine=line;
}缺点：如果表格中出现有checkbox, select, radiobox这样的互动元素则无法对这些元素进行排序或对其他的值列进行排序时会导致这些元素的值丢失

Answer 3

E_Mail格式校验还有日期 输入值判断可以有正则表达式实现的
不要那么复杂

Answer 4

6． 页面跳转控制
方法一：由form提交表单进行页面跳转，一般通过submit按钮进行触发action，或者通过onclick事件进行手动form.submit提交，这里需要注意的是，采用get方法提交的话，提交的参数只允许1024个字节，超出返回则页面不会提交，只用使用post方法才可以提交方法二：页面重定向，采用window.location方法来跳转页面，该方法为get方法提交参数，可以在url后面通过?param1=value&param2=value的方法来附带参数，但是要控制在1024个字节之内，如果是传递中文的话可能会出现中文字符乱码的问题特殊情况的页面跳转：
子窗口关闭时父窗口进行页面跳转：
方法：在父窗口中增加方法，
<script language="javascript">
function getApplicationNameToTrans(){

var url = "/egis/generateQuestionnaireInfo.screen";
var retValue = window.showModalDialog(url,'','dialogHeight:800px;dialogWidth:1200px')

//window.open(url);
if (typeof(retValue) != "undefined"){
        if(retValue.flag = "fresh"){
window.location="/egis/refreshWorkTableController.do";
}
      }

}
</script>同一页面中上层frame对下层frame进行页面跳转：
方法：
<script language="javascript">
function onSearch(form){
var insuredid = form_list.appInsuredId.value;
    var url = "/egis/displayAppCoverages.do?appInsuredId=" + insuredid;
    var frm = window.parent.frames;
    frm(1).location=url;
}
</script>frameset中其中一frame控制对整个frameset进行页面刷新：
方法：
<script language="javascript">
function formback(){
var url = "/egis/coverageLongByInsured.do";
document.parentWindow.parent.location = url; 
}
</script>同一页面中对iframe进行页面跳转：
document.iframename.src = url 7． 父子窗口传值
非模态窗口传值：
父窗口方法：
function setApplicant(Name,No){
var applicantName = document.getElementById("newbusinessPreliminaryAssessDTO.applicantName");
var applicantNo = document.getElementById("policyApplicationDTO.applicantNo");

applicantName.value = Name;
applicantNo.value = No;
}
子窗口方法：
function choose_item(AgentName,AgentNo){
opener. setApplicant (AgentName,AgentNo);
window.close(0);
}模态窗口传值：
父窗口方法：
function getApplicationNameToTrans(){
var url = "/egis/generateQuestionnaireInfo.screen";
var retValue = window.showModalDialog(url,'','dialogHeight:800px;dialogWidth:1200px')
if (typeof(retValue) != "undefined"){
……
}
      }

}子窗口方法：
function test(value) {
var o = new Object();  
o.value = value;
   returnValue = o;
   window.close();
}

Answer 5

去google
在b/s开发中经常用到的javaScript技术
会有http://www.cnblogs.com/sadier/articles/57634.html
这有个链接

Answer 6

面向对象的JavaScript 
JavaScript 是一种解释型的、基于对象的脚本语言。尽管与 C++、C# 这样成熟的面向对象的语言相比，JavaScript的功能要弱一些，但对于它的预期用途而言，JavaScript的功能已经足够大了。但是由于各种各样的原因，我们在实际进行开发的过程中往往忽略了他基于对象的这一特性，以至JavaScript编写的程序显的杂乱无章。这样不仅不易于观看，更不易于修改。今天就让我们来看看JavaScript基于对象的这一特性。类：
function DelegateObject(){
    var obj = new Object();
    obj.value = "";
    obj.FormatString = null;
    obj.toString = function _toString(){
        if(obj.FormatString != null)
            return this.FormatString(this.Value);
        else
            return this.Value;
    }   
    return obj;
}
var obj = new DelegateObject();委托：
function DelegateObject(){
    var obj = new Object();
    obj.value = "";
    obj.FormatString = null;
    obj.toString = function _toString(){
        if(obj.FormatString != null)
            return this.FormatString(this.Value);
        else
            return this.Value;
    }   
    return obj;
}function ConvertToString(value){
    return "Result:" + value;
}
var obj = new DelegateObject();
obj.Value = "Hello World!";
obj.FormatString = ConvertToString;
document.write(obj.toString());重写：
function DelegateObject(){
    var obj = new Object();
    obj.toString = function _toString(){
        if(obj.FormatString != null)
            return this.FormatString(this.Value);
        else
            return this.Value;
    }   
    return obj;
}继承：
function DelegateObject(){
    var obj = new Object();
    obj.value = "";
    obj.FormatString = null;
    obj.toString = function _toString(){
        if(obj.FormatString != null)
            return this.FormatString(this.Value);
        else
            return this.Value;
    }   
    return obj;
}
function Class2(){
    var obj = new DelegateObject();
    return obj;
}
function ConvertTOString(value){
    return "Result:" + value;
}var obj = new Class2();
obj.Value  = "Hello World!";
obj.FormatString = ConvertTOString;
document.write(obj.toString());事件：
function EventHandler(){
    var eventobj = new Object();
    eventobj._eventHandler = null;
    eventobj.Activate = function _activate(){
        if(eventobj._eventHandler != null)
            eventobj._eventHandler();
    }
    eventobj.Add = function _add(eventHandler){
        eventobj._eventHandler = EventHandler;
    }
    eventobj.Remove = function _remove(){
        eventobj._eventHandler = null;
    }
    return eventobj;
}function mouseClick(){
    alert("Hello World!");
}var obj = new EventHandler();
obj.Add(mouseClick());
obj.Activate();
枚举：
function _StatusList(){
    var object = new Object();
    object.正常= "Normal";
    object.删除= "Delete";
    object.审核通过= "Auditing";
    object.驳回 = "OverRule";
    return object;
}
Object.prototype.StatusList = new _StatusList();
function TObject(){
    var obj = new Object();
    obj.Type = "YiZhu";
    obj.Status = Object.StatusList.审核通过;
}
alert(obj.Status);