编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。 【实例名称】 经典的ListView列表框 【实例描述】 ListView是C/S开发中的一个控件,类似于资源管理器中浏览文件的效果。本例使用microsoft提供的一个Object组件,实现ListView浏览效果。 【实例代码】 <html>
<head>
<title>列表-本站(www.xue51.com)</title>
<style>
body { font-size: 10px }
table { font-size: 12px }
</style>
<script language = 'javascript'>
function InitList(theList, theTable, iEnd, iId, checkIt)
//初始化列表的方法
{
var colWidth = (document.body.clientWidth - 200) / iEnd
//设置列宽度
with(theList)
{
View = 3
//列表框的样式
BorderStyle = 0
//设置列表的边框
GridLines = true
//设置列表的表格线
Checkboxes = checkIt
//设置列表的复选框
FullRowSelect = true
//选择某单元格时,是否选中整行
for(var i = 0; i < iEnd; i ++)
{
//逐列添加表头
ColumnHeaders.Add(i + 1, 'Col' + i,
theTable.rows[0].cells[i].innerText, colWidth)
}
for(var i = 1; i < theTable.rows.length; i ++)
{
//逐列添加列表项
myList.ListItems.Add( i, 'Key' + theTable.rows[i]
.cells[iId -1].innerText.replace(" ", ""), theTable.rows[i].cells[0]
.innerText.replace(" ", ""))
for(var j = 1; j < iEnd; j ++)
{
ListItems(i).SubItems(j) = theTable.rows[i].cells[j]
.innerText.replace(" ", "")
}
}
}
}
</script>
<script language = 'javascript' for =
'myList' event = 'ItemClick(Item)'>
var theValue = ""
//定义选择项变量
theValue = Item.Text + Item.Key
//设置选择项内容
for(i = 1; i <= Item.ListSubItems.Count; i ++)
theValue = theValue + "\n" + Item.ListSubItems(i).Text
//当前列表项内容
myValue.value = theValue
//在文本框中显示列表内容
</script>
</head>
<body onload = 'InitList(myList, myTale, 4, 5, false)'
scroll = 'no' bgcolor = 'buttonface' topmargin='0' leftmargin='0'>
<table border='0' cellpadding='0' cellspacing='0'
style='border-collapse: collapse' width='100%' height='100%'>
<tr>
<td nowrap>
<script language = 'javascript'>
document.write( "<object classid='clsid:BDD1F04B-858B-11D1
-B16A-00C0F0283628' style = 'width:" + (document.body.clientWidth - 150)
+ ";height:" + document.body.clientHeight + "' id='myList'></object> ")
</script>
<table border = '1' id = 'myTale' style = 'display:none'>
<tr id = 'tablehead'>
<td id = 'mytd'>
编号
</td>
<td id = 'Td1'>
名称
</td>
<td id = 'Td2'>
价格
</td>
<td id = 'Td3'>
数量
</td>
<td id = 'Td4'>
备注
</td>
</tr>
<tr id = 'mytr'>
<td id = 'Td5'>00001
</td>
<td id = 'Td6'>ajax学习
</td>
<td id = 'Td7'>13.00
</td>
<td id = 'Td8'>200
</td>
<td id = 'Td9'>新书第一批
</td>
</tr> </table>
</td>
<td nowrap width='150' align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" width="100%" id="AutoNumber1">
<tr>
<td> </td>
</tr>
<tr>
<td> 内容:</td>
</tr>
<tr>
<td>
<textarea rows="10" name="myValue" cols = '16'>
</textarea>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
【运行效果】
【难点剖析】 本例的重点是ojbect组件的使用。ListView是Microsoft为IE浏览器提供的一个复杂列表框控件,可实现列表项的编辑、排序和显示。要引用此控件,必须在Object元素中指明该控件的“classid”属性,具体引用方法可参考代码。 【源码下载】 本实例JS代码下载
使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。 |