| 编程（Programming）是编定程序的中文简称，就是让计算机代码解决某个问题，对某个计算体系规定一定的运算方式，使计算体系按照该计算方式运行，并最终得到相应结果的过程。为了使计算机能够理解（understand）人的意图，人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。 【实例名称】 JS编写表单验证样式 【实例描述】 实现表单验证的样式有很多，本例将使用一种类似AjaX效果的验证方法实现一个分数(数值型)的验证。 【实例代码】 <html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Check Score-本站（www.xue51.com）</title>
<style type="text/css">
#name div.text{
float:left;
width:118px;
font-size:12px;
text-align:right;
font-weight:bold;
}
#name div.redstar {
float:right;
width:10px;
font-size:12px;
text-align:right;
font-weight:normal;
color:#ff0000;
margin-right:3px;
}
div.input{
width:257px;
text-align:left;
float:left;
font-size:12px;
}
div.note{
width:310px;
float:right;
text-align:left;
font-size:12px;
color:#999999;
padding:3px;
line-height:130%;
background:#ffffff;
border:#ffffff 1px solid;
}
div.notetrue{
width:310px;
float:right;
text-align:left;
font-size:12px;
padding:3px;
line-height:130%;
color:#485E00;
background:#F7FFDD;
border:#485E00 1px solid;
}
div.noteawoke{
display: none;
width:310px;
float:right;
text-align:left;
font-size:12px;
color:#ff0000;
padding:3px;
line-height:130%;
background:#fff5d8;
border:#ff7300 1px solid;
background-repeat:no-repeat;
background-position:2 3px;
margin:0px;
}
</style>
</head>
<body>
<table>
<tr>
<td id="name"><div class="text">得分</div>
<div class="redstar">*</div></td>
<td><div class="input">
<input type="text" id="txtScore" /><div></td>
<td><div class="note" id="divTipInfo">
请输入 0-100 之间的数字！</div>
<div class="noteawoke" id="divAlarmInfo">
数据输入错误，重新输入！</div></td>
</tr>
</table>
<script type="text/javascript">
var oScore = document.getElementById("txtScore");
//获取输入文本框
var oNote = document.getElementById("divTipInfo");
//获取提示信息框
var oAlarm = document.getElementById("divAlarmInfo");
//获取警告信息框
oScore.onfocus = function()
{
oNote.className = "notetrue";
//获取焦点时改变样式
}
oScore.onblur = function()
//失去焦点时的方法
{
if (this.value != "")
{
var score = parseInt(this.value);
//转换数值类型
//判断输入内容是否符合条件
if (isNaN(score) || !(score>=0 && score<=100))
{
oAlarm.style.display = "block";
oNote.style.display = "none";
}
else
{
this.value = score;
oAlarm.style.display = "none";
oNote.className = "note";
oNote.style.display = "block";
}
}
else
{
//用户没有输入的情况下
oAlarm.style.display = "none";
oNote.className = "note";
oNote.style.display = "block";
}
}
</script>
</body>
</html>
【运行效果】  【难点剖析】 本例的重点是输入框的两个事件：“onfocus”和“onblur”。当输入框获得焦点时，改变提示框的样式，如果用户输入错误则显示警告信息框，隐藏提示框。本例中CSS样式表起到了很大的作用。 【源码下载】 为了JS代码的准确性，请点击：JS编写表单验证样式 进行本实例源码下载
使用编程语言写的程序，由于每条指令都对应计算机一个特定的基本动作，所以程序占用内存少、执行效率高。
| 
