Yycom项目经验总结(ASP与JAVASCRIPT)

  

        Yycom项目是一个表单输入、存储的系统，使用ASP+ORACLE构建。特点是前台表单很多，需要写很多数据库存储的语句，需要大量使用JAVASCRIPT进行前台的编程。

JAVASCRIPT经验

JAVASCRIPT是一种非强类型的语言，变量定义时可以只是用 var i; 的形式来定义。

在javascript中可以用转义字符/"来在字符串中代表"，而在vbscript中则使用""(两个双引号)来在字符串中代表"。

关于数组的使用

如果要在不同的页面间传递数组，可以将数组用分隔符连接成字符串，传递到相就页面之后再分解开来。

下面的例子演示了数组的插入、删除、合并、分解

< script language = " javascript " >
     var  arrobj  =   new  Array();
     var  i;
     var  comstr;
    
     // 把数组看做栈，向数组中压入数据，在后面被压入的数据在数组中的索引值大
     for ( i  =   0  ; i  <   10  ; i ++  ) ... {
        arrobj.push(i);
    }
    
     // arrobj.length是数组的长度，在这里值为10
     for ( i  =   0  ; i  <  arrobj.length; i ++  ) ... {
        document.write(arrobj[i]);
    }
    document.write( " <br> " );
    
     // arrobj.splice(5,3);删除数组中从索引5(第六个元素)开始的3个元素，其他用法请参考手册
     // 这样删除的话，arrobj.length的值会减3
    arrobj.splice( 5 , 3 );

     for ( i  =   0  ; i  <  arrobj.length; i ++  ) ... {
        document.write(arrobj[i]);
    }
    document.write( " <br> " );

     // arrobj.join("|");以“｜”连接各个元素，函数返回连接好的字符串，数组应该不变
    document.write(comstr  =  arrobj.join( " | " ) );
    document.write( " <br> " );
    
     // comstr.split("|");将字符串分离成数组，返回字符串数组    
    arrobj  =  comstr.split( " | " );

     for ( i  =   0  ; i  <  arrobj.length; i ++  ) ... {
        document.write(arrobj[i]);
    }
    document.write( " <br> " );
</ script >

数组的赋值类似C的指针:

var  x  =  [ 10 ,  9 ,  8 ];
var  y  =  x;
x[ 0 ]  =   2 ;
alert( " The value of y's first element is:  "   +  y[ 0 ]);

关于数组的一篇好文章:http://blog.iyi.cn/start/2006/12/javascript_3.html

对select控件的使用

下面这个例子展示了增加OPTION、删除所有OPTION、显示当前选定的OPTION的文本、选中第一个OPTION的功能

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 "   />
< title > 无标题文档 </ title >
< script language = " javascript " >
     // 向select控件中增加option
     var  i = 0 ;
     function  myadd(oArea)
     ... {
        var oOption = document.createElement('OPTION');
        oOption.text = i;
        oOption.value = i++;
        oArea.options.add(oOption);
    }
    
     // remove all options in the select box
     function  RemoveAllOptions(selectObj)
     ... {
        var i; 
        for( i = selectObj.length-1 ; i >= 0 ; i--)...{
            selectObj.remove( i );
        }
    }
    
     // 显示当前选中的OPTION的文本
     function  ShowOptionText(selObj)
     ... {        
        alert(selObj.options[selObj.selectedIndex].text);
    }
    
    
     function  SelectFirst(selObj)
     ... {
        selObj.options[0].selected = true;
    }     
</ script >
</ head >

< body >
< p >& nbsp; </ p >
< form id = " form1 "  name = " form1 "  method = " post "  action = "" >
   < label >
   < select name = " area " >
   </ select >
   </ label >
   < input type = " button "  name = " Submit "  value = " 增加OPTION "  onclick = " myadd(this.form.area) "   />
   < input type = " button "  name = " Submit2 "  value = " 删除所有OPTION "  onclick = " RemoveAllOptions(this.form.area) "   />
   < input type = " button "  name = " Submit22 "  value = " 显示当前选定的OPTION的文本 "  onclick = " ShowOptionText(this.form.area) "   />
   < label >
   < input type = " button "  name = " Submit3 "  value = " 选中第一个OPTION "  onclick = " SelectFirst(this.form.area) "   />
   </ label >
</ form >
</ body >
</ html >

 

innerHTML的使用

通过innerHTML，可以动态的改变html代码，改动后的HTML代码，与平常直接编写的HTML代码有同样的效用，比如说使用innerHTML增加了一个TEXT控件，同样可以用各种方式通过NAME得到这个控件的值。

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 "   />
< title > innerHTML outerHTML </ title >
< script language = " javascript " >
function ChangeDiv(divName)
... {
    document.getElementById(divName).innerHTML += "1234";
}
</ script >
</ head >

< body >
< div id = " mydiv " ></ div >
< label >
< input type = " button "  name = " Submit "  value = " ChnageDiv "  onclick = " ChangeDiv('mydiv') "   />
</ label >
</ body >
</ html >

区别 innerHTML outerHTML innerText outerText

< div  id ="div" >< input  name ="button"  value ="Button"  type ="button" >< font  color ="green" >< h2 > This is a DIV! </ h2 ></ font ></ div >
< input  name ="innerHTML"  value ="innerHTML"  type ="button"  OnClick ="alert(div.innerHTML);" >
< input  name ="outerHTML"  value ="outerHTML"  type ="button"  OnClick ="alert(div.outerHTML);" >
< input  name ="innerText"  value ="innerText"  type ="button"  OnClick ="alert(div.innerText);" >
< input  name ="outerText"  value ="outerText"  type ="button"  OnClick ="alert(div.outerText);" >

当div标签用在<table>与<tr>之间这样的非常规位置时,使用innerHTML等时不能得到正确的值,这时可以不使用DIV标签,改把ID值放在TR等标签中,再使用.

字符串与正则表达式的使用

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 "   />
< title > Test String </ title >
</ head >

< body >
< script language = " javascript " >

function  execDemo(){
    var  s;
    var  re  =   new  RegExp( " d(b+)(d) " , " ig " );
    var  str  =   " cdbBdbsbdbdz " ;
   document.write(str + " <br> " );
   document.write( " 正则表达式 " +   " d(b+)(d) "   +   " <br> " );
    var  arr  =  re.exec(str);
   s  =   " $1 contains:  "   +  RegExp.$ 1   +   " " ;
   s  +=   " $2 contains:  "   +  RegExp.$ 2   +   " " ;
   s  +=   " $3 contains:  "   +  RegExp.$ 3 ;
    return (s);
}
function  RegExpTest(){
   var  ver  =  Number(ScriptEngineMajorVersion()  +   " . "   +  ScriptEngineMinorVersion())
   if  (ver  >=   5.5 ){                  //  测试 JScript 的版本。
     var  src  =   " The rain in Spain falls mainly in the plain. " ;
    document.write(src  +   " <br> " );
     var  re  =   / w +/ g;                //  创建正则表达式模式。
    document.write( " /w+/g " +   " <br> " );
     var  arr;
     while  ((arr  =  re.exec(src))  !=   null )
       document.write(arr.index  +   " - "   +  arr.lastIndex  +   " "   +  arr  +   " <br> " );
  }
   else {
    alert( " 请使用 JScript 的更新版本 " );
  }
}
function  MatchDemo(){
    var  r, re;          //  声明变量。
    var  s  =   " The rain in Spain falls mainly in the plain " ;
   document.write(s  +   " <br> " );
    // re = /ain/i;    // 创建正则表达式模式。
   re  =   / ain / ig;     //  创建正则表达式模式。
   r  =  s.match(re);    //  尝试匹配搜索字符串。
    return (r);          //  返回第一次出现 "ain" 的地方。
}
function  MatchDemo2(){
    var  r, re;          //  声明变量。
    var  s  =   " The rain in Spain falls mainly in the plain " ;
   document.write(s  +   " <br> " );
   re  =   / ain / i;     //  创建正则表达式模式。
    // re = /ain/ig;    // 创建正则表达式模式。
   r  =  s.match(re);    //  尝试匹配搜索字符串。
    return (r);          //  返回第一次出现 "ain" 的地方。
}

function  execDemo2()
{
    var  s;                                 // Declare variable.
    var  re  =   new  RegExp( " d(b+)(d) " , " ig " );  // Regular expression pattern.
    var  str  =   " cdbBdbsbdbdz " ;
   document.write(str  +   " <br> " );   
   document.write( " 正则表达式: "   +   " d(b+)(d) "   +   " <br> " );           // String to be searched.
    var  arr  =  re.exec(str);                // Perform the search.
   s  =   " $1 returns:  "   +  RegExp.$ 1   +   " <br> " ;
   s  +=   " $2 returns:  "   +  RegExp.$ 2   +   " <br> " ;
   s  +=   " $3 returns:  "   +  RegExp.$ 3   +   " <br> " ;
   s  +=   " input returns :  "   +  RegExp.input  +   " <br> " ;
   s  +=   " lastMatch returns:  "   +  RegExp.lastMatch  +   " <br> " ;
   s  +=   " leftContext returns:  "   +  RegExp.leftContext  +   " <br> " ;
   s  +=   " rightContext returns:  "   +  RegExp.rightContext  +   " <br> " ; 
   s  +=   " lastParen returns:  "   +  RegExp.lastParen  +   " <br> " ;
    return (s);                             // Return results.
}


// ////////////////////////////////////////////////////////
     var  str  =   " abcdefghijklmnopqrstuvwxyz " ;
    document.write( " <h1> "   +  str  +   " </h1> " );
    document.write( " <br />==========================================================================<br /> " );
    document.write(  " d在str中的位置  " +  str.indexOf(  " d "  ) );  // d在str中的位置
    document.write( " <br />==========================================================================<br /> " );
    document.write(  " 从右边往左找,第一个x的位置  "   +  str.lastIndexOf(  " x "  ) );  // 从右边往左找,第一个x的位置
    document.write( " <br />==========================================================================<br /> " );
    document.write(  " 第三个字符  "   +  str.charAt(  2  ) );    // 第三个字符
    document.write( " <br />==========================================================================<br /> " );
    document.write(  " 得到第5到9个字符串  "   +  str.substring( 5 , 9 ));
    
     // 正则表达式
     var  myreg  =   / hij / ;
    document.write( " <br />==========================================================================<br /> " );
    document.write(  " 把正则表达式/hij/替换成8  "   +  str.replace(myreg, " 8 " ) );
    document.write( " <br />==========================================================================<br /> " );
    document.write(  " 正则表达式的match(i)  "   +  MatchDemo() );
    document.write( " <br />==========================================================================<br /> " );
    document.write(  " 正则表达式的match(ig)  "   +  MatchDemo() );
    document.write( " <br />==========================================================================<br /> " );
    document.write(  " 执行正则表达式  "   +  execDemo2())
    document.write( " <br />==========================================================================<br /> " );
document.write(  " 正则表达式的查找 $1...$9 属性 "   +  execDemo() );
    document.write( " <br />==========================================================================<br /> " );

     // 正则表达式的用法
    RegExpTest();
    re  =   / rst / ;
    document.write( " <br />==========================================================================<br /> " );
    document.write(  " 测试str中是否有匹配/rst/的字符串  "   +  re.test(str) );
    document.write( " <br />==========================================================================<br /> " );
document.write( " 转换为大写  "   +  str.toUpperCase());
    document.write( " <br />==========================================================================<br /> " );
document.write( " 转换为小写  "   +  str.toLowerCase());
    document.write( " <br />==========================================================================<br /> " );
document.write( " 转换为字符串  " +  str.toString());
    document.write( " <br />==========================================================================<br /> " );
document.write( " 转换为整数  "   +  (parseInt( " 23 " ) + parseInt( " 3 " )) );
     var  escapeStr;
    escapeStr  =  escape( " 我的名字叫马牛我的Email是:manioster[at]gmail.com " );
    document.write( " <br />==========================================================================<br /> " );
document.write( " escape 方法返回一个包含了 charstring 内容的字符串值（ Unicode 格式）。所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替，其中 xx 等于表示该字符的十六进制数。 " +  escapeStr);
    document.write( " <br />==========================================================================<br /> " );
document.write( " unescape: 解码用 escape 方法进行了编码的 String 对象 "   +  unescape(escapeStr));
    
     // 测试正则表达式的$ 属性
</ script >

</ body >
</ html >

项目中的其他功能:

打开,关闭框架中的左栏
上传前预览图片