上图是用JavaScript编写的同学录程序的执行效果。程序的具体功能是通过将“鼠标左键单击的左框中按钮的标记”保存在Cookie中，实现了点击不同的按钮在右框内显示不同的内容。
[HTML文本]
＜html＞
＜head＞
＜meta http-equiv=”Content-Type” content=”text/html; charset=gb2312”＞
＜title＞同学录＜/title＞
＜script language=”JavaScript”＞
var ButtonSelected;// 用户按下的按钮的标记
function getCookie(name) .... // 读取Cookie值，代码省略
function setCookie(name,value) ....// 写Cookie值，代码省略
function deleteCookie(name) .... // 删除Cookie，代码省略
function refresh(i)// 保存按钮标记并刷新当前网页显示
setCookie(“ButtonSelected”,i);
history. (1) ;
function load() // 初始化Cookie值
var Expdate = new Date();
Expdate.setTime(expdate.getTime() + (5*24*60*60 + 1000));
ButtonSelected = 0;
setCookie(“ButtonSelected”, ButtonSelected, Expdate);
function Address(strName, strSex, strAddress, strMobile) // 设置通讯录字段的值
this.name = strName;
this.sex = strSex;
this.address = strAddress;
this.mobile = strMobile;
return this;
function initArray(iSize) // 初始化数组
if (initArray.argument.length)
this.length = iSize;
else
this.length = 0;
for (var i=0; i＜this.length; i++)
this[i] = null;
return this;
addresses = (2) ;// 创建一个存放5个记录的数组
addresses[0] = new Address(“高阳”,”男”,”上海市徐汇区”,”130000000”);
addresses[1] = new Address(“刘东升”,”男”,”北京市上地”,”135000000”);
addresses[2] = new Address(“王丽”,”女”,”成都市建设路”,”133000000”);
addresses[3] = new Address(“赵磊”,”男”,”沈阳市五里河”,”139000000”);
addresses[4] = new Address(“张强”,”男”,”南京市紫金山”,”138000000”);
function printAddress(ObjAddr) // 输出通讯录中的一行
return “＜TD＞” + objAddr.name + “＜/TD＞＜TD＞” + ObjAddr.sex + “＜/TD＞＜TD＞” + ObjAddr.address + “＜/TD＞＜TD＞” + ObjAddr.mobile +”＜/TD＞”;
＜/script＞
＜/head＞
＜body Onload = “ (3) ”＞
＜p align=”center”＞同学录＜/p＞
＜table border=”1” width=”882” height=”1” align=”left”＞
＜tr＞＜td width=”100” height=”26”＞
＜input type=”button” value=” 通讯录 “ name=”Btxl” OnClick=”refresh(1)”＞＜/td＞
＜td width=”766” height=”140” rowspan=”17” valign=”top” align=”center”＞
＜script＞
ButtonSelected = (4) ; // 读取上次点击的按钮的标记
if (ButtonSelected == 1)
document.write(“＜table border=1＞＜tr＞＜th＞姓名＜/th＞＜th＞性别＜/th＞”);
document.write(“＜th＞通信地址＜/th＞＜th＞手机号码＜/th＞＜/tr＞”)
for (var i=0; i＜address.length; i++)
document.write(“＜tr＞”);
document.write(printAddress(addresses[i]));
document.write(“＜/tr＞”);
document.write( (5) );
else if(ButtonSelected == 2)
// 若选择其他按钮则执行其他操作，代码省略
＜/script＞
＜/td＞
＜-- 省略网页结构性文档 --＞
＜/table＞
＜/body＞
＜/html＞
