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 >
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 ]);
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 >
< 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 >
< 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);" >
< 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 >
< 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 >
项目中的其他功能:
打开,关闭框架中的左栏
上传前预览图片