| 編程(Programming)是編定程序的中文簡(jiǎn)稱,就是讓計(jì)算機(jī)代碼解決某個(gè)問(wèn)題,對(duì)某個(gè)計(jì)算體系規(guī)定一定的運(yùn)算方式,使計(jì)算體系按照該計(jì)算方式運(yùn)行,并最終得到相應(yīng)結(jié)果的過(guò)程。為了使計(jì)算機(jī)能夠理解(understand)人的意圖,人類就必須將需解決的問(wèn)題的思路、方法和手段通過(guò)計(jì)算機(jī)能夠理解的形式告訴計(jì)算機(jī),使得計(jì)算機(jī)能夠根據(jù)人的指令一步一步去工作,完成某種特定的任務(wù)。這種人和計(jì)算體系之間交流的過(guò)程就是編程。 【實(shí)例名稱】 JS實(shí)現(xiàn)劃詞搜索 【實(shí)例描述】 在一段文本中選擇一個(gè)單詞,然后調(diào)用Google的搜索功能對(duì)此單詞進(jìn)行搜索,這就是本例要實(shí)現(xiàn)的劃詞搜索功能。 【實(shí)例代碼】 <html>
<head>
<title>劃詞搜索-本站(www.xue51.com)</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<SCRIPT language=Javascript>
document.body.onload=adddiv;
//頁(yè)面加載時(shí)動(dòng)態(tài)創(chuàng)建div
document.onmousedown=recordobj;
//鼠標(biāo)按下時(shí)觸發(fā)的事件
document.ondblclick=dbclick;
//窗體雙擊時(shí)觸發(fā)的事件
document.onmouseup=showselect;
//鼠標(biāo)彈起時(shí)觸發(fā)的事件
var eventObj;
var isDouble=false;
var allow=true;
//是否啟用劃詞搜索 function isallow()
{
if(allow){
allow=false;
alert('已經(jīng)關(guān)閉');
}
else{
allow=true;
alert('已經(jīng)打開(kāi)');
}
} function dbclick()
//雙擊事件
{
isDouble=true;
}
function recordobj()
//當(dāng)前操作對(duì)象
{
eventObj=event.srcElement;
}
function showselect() {
var str="";
if(event.srcElement.tagName!="A"&&event.srcElement.tagName!=
"INPUT"&&event.srcElement==eventObj&&!isDouble&&allow)
{
var oText=document.selection.createRange();
//獲取選擇文本
if(oText.text.length>0)
//如果文本存在
{
str=oText.text;
oText.text="begin"+oText.text+"end";
//包裝被選中的文本
}
oText.select();
//實(shí)現(xiàn)選擇
//設(shè)置選中文本的樣式-帶下劃線-變顏色
event.srcElement.innerHTML=event.srcElement.
innerHTML.replace("begin","<u style='FONT-WEIGHT: bold;COLOR: #ff3366'>")
.replace("end","</u>");
}
googleDiv(str)
//實(shí)現(xiàn)選定文本的搜索
isDouble=false;
} function googleDiv(str)
{
var obj=document.getElementById("googleDiv");
//獲取動(dòng)態(tài)添加的div
if(str.length>0)
{
obj.style.display="block";
//顯示div
obj.style.position="absolute";
//設(shè)置div絕對(duì)位置
obj.style.zindex=999;
obj.style.posTop=document.body.scrollTop+event.y-25;
//div的Y坐標(biāo)
obj.style.posLeft=document.body.scrollLeft+event.x+5;
//div的X坐標(biāo)
obj.style.widht=80;
//div的寬度
obj.innerHTML="<a target=_blank href=http://www.google.com/
search?ie=UTF-8&oe=UTF-8&q="+str+" style='BORDER-RIGHT: royalblue thin solid;
BORDER-TOP: royalblue thin solid; FONT-WEIGHT: bold;
BORDER-LEFT: royalblue thin solid; CLIP: rect(auto auto auto auto);
COLOR: #ffffff; BORDER-BOTTOM: royalblue thin solid;
BACKGROUND-COLOR: inactivecaption; TEXT-DECORATION: none'>搜索</a>";
}
else
{
obj.style.display="none";
}
} function adddiv()//動(dòng)態(tài)添加div標(biāo)簽
{
var mobj = document.createElement("div");
//創(chuàng)建div標(biāo)簽
mobj.id="googleDiv";
//設(shè)置div標(biāo)簽的id
document.body.appendChild(mobj);
//將div添加到窗體中
}
</SCRIPT>
<INPUT type="button" onclick="isallow()" value="關(guān)閉/打開(kāi)劃詞功能">
<p>This is Test ,please Select,it's will google</p>
</body>
</html>
【運(yùn)行效果】 劃詞后的效果 
搜索的效果 
【難點(diǎn)剖析】 本例的難點(diǎn)有3個(gè),獲取用戶選擇的詞,動(dòng)態(tài)彈出div層讓用戶調(diào)用搜索功能,調(diào)用Google實(shí)現(xiàn)搜索。獲取用戶選擇的詞在“showselect”方法中實(shí)現(xiàn),主要依靠“createRaIlge”和“select”兩個(gè)文本區(qū)域選擇方法。動(dòng)態(tài)彈出div層是常見(jiàn)的層特效,就是設(shè)置層的隱藏和顯示。調(diào)用Google搜索的實(shí)現(xiàn)在“googleDiv”方法中完成,這里注意傳遞給Google的參數(shù)。 【源碼下載】 為了JS代碼的準(zhǔn)確性,請(qǐng)點(diǎn)擊:劃詞搜索 進(jìn)行本實(shí)例源碼下載
使用編程語(yǔ)言寫的程序,由于每條指令都對(duì)應(yīng)計(jì)算機(jī)一個(gè)特定的基本動(dòng)作,所以程序占用內(nèi)存少、執(zhí)行效率高。 |