| 编程（Programming）是编定程序的中文简称，就是让计算机代码解决某个问题，对某个计算体系规定一定的运算方式，使计算体系按照该计算方式运行，并最终得到相应结果的过程。为了使计算机能够理解（understand）人的意图，人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。 【实例名称】 JS实现划词搜索 【实例描述】 在一段文本中选择一个单词，然后调用Google的搜索功能对此单词进行搜索，这就是本例要实现的划词搜索功能。 【实例代码】 <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;
//页面加载时动态创建div
document.onmousedown=recordobj;
//鼠标按下时触发的事件
document.ondblclick=dbclick;
//窗体双击时触发的事件
document.onmouseup=showselect;
//鼠标弹起时触发的事件
var eventObj;
var isDouble=false;
var allow=true;
//是否启用划词搜索 function isallow()
{
if(allow){
allow=false;
alert('已经关闭');
}
else{
allow=true;
alert('已经打开');
}
} function dbclick()
//双击事件
{
isDouble=true;
}
function recordobj()
//当前操作对象
{
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();
//实现选择
//设置选中文本的样式-带下划线-变颜色
event.srcElement.innerHTML=event.srcElement.
innerHTML.replace("begin","<u style='FONT-WEIGHT: bold;COLOR: #ff3366'>")
.replace("end","</u>");
}
googleDiv(str)
//实现选定文本的搜索
isDouble=false;
} function googleDiv(str)
{
var obj=document.getElementById("googleDiv");
//获取动态添加的div
if(str.length>0)
{
obj.style.display="block";
//显示div
obj.style.position="absolute";
//设置div绝对位置
obj.style.zindex=999;
obj.style.posTop=document.body.scrollTop+event.y-25;
//div的Y坐标
obj.style.posLeft=document.body.scrollLeft+event.x+5;
//div的X坐标
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()//动态添加div标签
{
var mobj = document.createElement("div");
//创建div标签
mobj.id="googleDiv";
//设置div标签的id
document.body.appendChild(mobj);
//将div添加到窗体中
}
</SCRIPT>
<INPUT type="button" onclick="isallow()" value="关闭/打开划词功能">
<p>This is Test ,please Select,it's will google</p>
</body>
</html>
【运行效果】 划词后的效果 
搜索的效果 
【难点剖析】 本例的难点有3个，获取用户选择的词，动态弹出div层让用户调用搜索功能，调用Google实现搜索。获取用户选择的词在“showselect”方法中实现，主要依靠“createRaIlge”和“select”两个文本区域选择方法。动态弹出div层是常见的层特效，就是设置层的隐藏和显示。调用Google搜索的实现在“googleDiv”方法中完成，这里注意传递给Google的参数。 【源码下载】 为了JS代码的准确性，请点击：划词搜索 进行本实例源码下载
使用编程语言写的程序，由于每条指令都对应计算机一个特定的基本动作，所以程序占用内存少、执行效率高。
| 
