編程(Programming)是編定程序的中文簡(jiǎn)稱,就是讓計(jì)算機(jī)代碼解決某個(gè)問題,對(duì)某個(gè)計(jì)算體系規(guī)定一定的運(yùn)算方式,使計(jì)算體系按照該計(jì)算方式運(yùn)行,并最終得到相應(yīng)結(jié)果的過程。為了使計(jì)算機(jī)能夠理解(understand)人的意圖,人類就必須將需解決的問題的思路、方法和手段通過計(jì)算機(jī)能夠理解的形式告訴計(jì)算機(jī),使得計(jì)算機(jī)能夠根據(jù)人的指令一步一步去工作,完成某種特定的任務(wù)。這種人和計(jì)算體系之間交流的過程就是編程。 【實(shí)例名稱】 Ajax效果的字符串過濾 【實(shí)例描述】 在Microsoft提供的Ajax框架中,有個(gè)根據(jù)第一個(gè)字母選擇單詞的過濾實(shí)例。本例將學(xué)習(xí)如何使用正則實(shí)現(xiàn)這種效果。
【實(shí)例代碼】 <HTML><HEAD><TITLE>過濾字符實(shí)例-本站(www.xue51.com)</title>
<script type="text/javascript">
function filterlist(selectobj) {
// 過濾對(duì)象
this.selectobj = selectobj; //要過濾得字符-i表示忽略大小寫,""表示不忽略
this.flags = 'i';
// 要過濾的項(xiàng)-選擇是文本還是值
this.match_text = true;
this.match_value = false;
//調(diào)試參數(shù)
this.show_debug = false;
//初始化的方法
this.init = function() {
if (!this.selectobj) return this.debug('沒有實(shí)現(xiàn)過濾的控件');
if (!this.selectobj.options) return this.debug('過濾控件中沒有內(nèi)容');
//制作選擇項(xiàng)的副本
this.optionscopy = new Array();
if (this.selectobj && this.selectobj.options) {
for (var i=0; i < this.selectobj.options.length; i++) {
// 創(chuàng)建一個(gè)新的選擇項(xiàng)對(duì)象
this.optionscopy[i] = new Option();
// 設(shè)置選擇項(xiàng)的文本
this.optionscopy[i].text = selectobj.options[i].text;
// 設(shè)置選擇項(xiàng)的值
if (selectobj.options[i].value) {
this.optionscopy[i].value = selectobj.options[i].value;
} else {
this.optionscopy[i].value = selectobj.options[i].text;
}
}
}
}
this.reset = function() { //重置選擇項(xiàng)
this.set('');
} //實(shí)現(xiàn)過濾的方法
this.set = function(pattern) {
var loop=0, index=0, regexp, e;
if (!this.selectobj) return this.debug('沒有實(shí)現(xiàn)過濾的控件');
if (!this.selectobj.options) return this.debug('過濾控件中沒有內(nèi)容'); // 清空列表中的內(nèi)容
this.selectobj.options.length = 0; // 使用正則實(shí)現(xiàn)字符過濾-初始化正則
try {
regexp = new RegExp(pattern, this.flags); } catch(e) {
if (typeof this.hook == 'function') {
this.hook();
}
return;
}
// 循環(huán)添加過濾后的結(jié)果
for (loop=0; loop < this.optionscopy.length; loop++) {
// 定義選擇項(xiàng)
var option = this.optionscopy[loop];
// 實(shí)現(xiàn)正則式過濾
if ((this.match_text && regexp.test(option.text)) ||
(this.match_value && regexp.test(option.value))) {
// 使用過濾結(jié)果創(chuàng)建新選擇項(xiàng) this.selectobj.options[index++] =
new Option(option.text, option.value, false);
}
}
if (typeof this.hook == 'function') {
this.hook();
}
} //設(shè)置正則表達(dá)式的過濾標(biāo)志
this.set_ignore_case = function(value) {
if (value) {
this.flags = 'i';
} else {
this.flags = '';
}
}
this.debug = function(msg) { //調(diào)試方法
if (this.show_debug) {
alert('過濾結(jié)果: ' + msg);
}
}
this.init(); //調(diào)用初始化方法
}
</script>
</HEAD>
<BODY>
<H1>過濾字符實(shí)例</H1>
<FORM name=myform action=""><SELECT size=5 name=myselect> <OPTION>Aefdf
Rsses<OPTION>Lbadmn Adjlf<OPTION>Monica Betty<OPTION>Daniel
Jack<OPTION>Bill Gayes<OPTION>Lama Tampel<OPTION>Natty
Lees<OPTION>Harry J. Leoo<OPTION>Matty McColm<OPTION>Carrie-Anne
Moss<OPTION>Collin Chou<OPTION>Genevieve O'Reilly<OPTION>Harold Perrineau
Jr.<OPTION>Jada Pinkett Smith<OPTION>Adrian Rayment<OPTION>Neil
Rayment<OPTION>Bruce Spence<OPTION>Hugo Weaving<OPTION>Lambert
Wilson<OPTION>Anthony Wong</OPTION></SELECT>
<SCRIPT type=text/javascript>
var myfilter = new filterlist(document.myform.myselect); //調(diào)用過濾的方法
</SCRIPT>
<P>過濾: <A title="Clear the filter"
href="javascript:myfilter.reset()">重置</A> <A
title="Show items starting with A" href="javascript:myfilter.set('^A')">A</A> <A
title="Show items starting with B" href="javascript:myfilter.set('^B')">B</A> <A
title="Show items starting with C" href="javascript:myfilter.set('^C')">C</A> <A
title="Show items starting with D" href="javascript:myfilter.set('^D')">D</A> <A
title="Show items starting with E" href="javascript:myfilter.set('^E')">E</A> <A
title="Show items starting with F" href="javascript:myfilter.set('^F')">F</A> <A
title="Show items starting with G" href="javascript:myfilter.set('^G')">G</A> <A
title="Show items starting with H" href="javascript:myfilter.set('^H')">H</A> <A
title="Show items starting with I" href="javascript:myfilter.set('^I')">I</A> <A
title="Show items starting with J" href="javascript:myfilter.set('^J')">J</A> <A
title="Show items starting with K" href="javascript:myfilter.set('^K')">K</A> <A
title="Show items starting with L" href="javascript:myfilter.set('^L')">L</A> <A
title="Show items starting with M" href="javascript:myfilter.set('^M')">M</A> <A
title="Show items starting with N" href="javascript:myfilter.set('^N')">N</A> <A
title="Show items starting with O" href="javascript:myfilter.set('^O')">O</A> <A
title="Show items starting with P" href="javascript:myfilter.set('^P')">P</A> <A
title="Show items starting with Q" href="javascript:myfilter.set('^Q')">Q</A> <A
title="Show items starting with R" href="javascript:myfilter.set('^R')">R</A> <A
title="Show items starting with S" href="javascript:myfilter.set('^S')">S</A> <A
title="Show items starting with T" href="javascript:myfilter.set('^T')">T</A> <A
title="Show items starting with U" href="javascript:myfilter.set('^U')">U</A> <A
title="Show items starting with V" href="javascript:myfilter.set('^V')">V</A> <A
title="Show items starting with W" href="javascript:myfilter.set('^W')">W</A> <A
title="Show items starting with X" href="javascript:myfilter.set('^X')">X</A> <A
title="Show items starting with Y" href="javascript:myfilter.set('^Y')">Y</A> <A
title="Show items starting with Z" href="javascript:myfilter.set('^Z')">Z</A>
</P></FORM></BODY></HTML>
【運(yùn)行效果】  【難點(diǎn)剖析】 本例的重點(diǎn)是使用正則表達(dá)式實(shí)現(xiàn)字符的過濾,還實(shí)現(xiàn)了動(dòng)態(tài)添加列表項(xiàng)的功能。代碼中使用“new”關(guān)鍵字創(chuàng)建了RegExp對(duì)象,其用來提供簡(jiǎn)單的正則表達(dá)式支持功能。使用RegExp對(duì)象的“test”方法,可以對(duì)指定的字符串執(zhí)行一個(gè)正則表達(dá)式搜索,并返回一個(gè)布爾值指示是否找到匹配的模式。當(dāng)搜索到結(jié)果時(shí)就使用“new Option”動(dòng)態(tài)創(chuàng)建一個(gè)列表項(xiàng),同時(shí)添加到列表中。 【源碼下載】 為了JS代碼的準(zhǔn)確性,請(qǐng)點(diǎn)擊:Ajax效果的字符串過濾 進(jìn)行本實(shí)例源碼下載
使用編程語言寫的程序,由于每條指令都對(duì)應(yīng)計(jì)算機(jī)一個(gè)特定的基本動(dòng)作,所以程序占用內(nèi)存少、執(zhí)行效率高。 |