如何禁止在网页选取来防止复制操作？请看下面的实例。
提示：你可以先修改部分代码再运行。
2008年10月24日
2008年10月23日
2008年10月22日
设计一个通用表单验证函数
不管是动态网站,还是其它B/S结构的系统,都离不开表单，表单做为客户端向服务器提交数据的载体担当相当重要的角色。这就引出了一个问题,提交的数据合法吗?摆在我们面前的问题就是验证这些数据保证所提交的数据是合法的.所以,我们写了一个大堆的验证函数.当我们开始新的一个项目的开发时,我们又得写一大堆的验证函数,然后再调试这一大堆的函数…
本文将介绍一种方法来提高我的代码的可重用性,提高我们的开发效率.
个人以为表单的验证应该包含两部分:
第一,判断用户输入的数据是否合法.
第二,提示用户你的数据为什么是不合法的.
所以,我们的通用表单验证函数要实现的功能就是:
第一,取得用户输入的数据GetValue(el)
第二,验证用户的数据CheckForm(oForm)
IE支持自定义属性,这就是这个通用函数实现的基础
我们可以在表单元素上加入描述自身信息的属性.有点像XML吧.
check属性:该属性用于存储数据合法性的正则表达式.
warning属性:该性性用于存储出错误提示信息.
第三,返回有误的表单提示GoBack(el)
这三个步骤的触发事件是onsubmit,记住是return CheckForm(this)
搞错了就全功尽弃了 :)
<form onsubmit=”return CheckForm(this)”>
写到这里,整体框架就出来了,通过取得表单元素的check属性,取得字符串,构建正则表达式.再验证其值.如果通过验证就提交,如是数据不合法则取得表单元素的warning属性,产生提示信息.并返回到该表单元素.整个的框架也比较简单.
我们要做的就是写好正则表达式!
接下来我们来分析一下所有的表单元素
按其共性,我们将它们分为三类
每类表单的特点不一样,我们的目标就是写出通用的.
1.文输入框Text
<input type=”text” name=”txt”>
<input type=”password” name=”pwd”>
<input type=”hidden” name=”hid”>
<input type=”file” name=”myfile”>
<textarea name=”txts”></textarea>
2.单多选框Choose
<input type=”checkbox” name=”c”>
<input type=”checkbox” name=”c”>
<input type=”radio” name=”r”>
<input type=”radio” name=”r”>
3.单多下拉菜单Select
<select name=”sel”></select>
<select name=”sels” multiple></select>
讲了一堆”大道理”太抽象了,代码更有说服力!
提示：你可以先修改部分代码再运行。
2008年10月17日
判断表单的输入框是否为空，并用光标的焦点定指向输入框
我们通常设计表单都会碰到这样也个情况，一个表单内的文本框必须要输入内容，在没有输入内容提交时就会提示出错，那么如何防止客户端在没有输入时就提交表单呢？请看下面一个例子，如果您没有输入任何值时就会出现提示对话框。
示例：
提示：你可以先修改部分代码再运行。
2008年10月16日
2008年10月15日
2008年10月14日
在JavaScript中创建对象
使用JavaScript可以创建自己的对象。虽然JavaScript内部和浏览器本身的功能已十分强大，但JavaScript还是提供了创建一个新对象的方法。使其不必像超文本标识语言那样，求于或其它多媒体工具，就能完成许多复杂的工作。
在JavaScript中创建一个新的对象是十分简单的。首先它必须定义一个对象，而后再为该对象创建一个实例。这个实例就是一个新对象，它具有对象定义中的基本特征。
一、对象的定义
JavaScript对象的定义，其基本格式如下：
Function Object（属性表）
This.prop1=prop1
This.prop2=prop2
…
This.meth=FunctionName1;
This.meth=FunctionName2;
…
在一个对象的定义中，可以为该对象指明其属性和方法。通过属性和方法构成了一个对象的实例。如以下是一个关于University对象的定义：
Function university(name,city,creatDate URL)
This.name=name
This.city=city
This.creatDate=New Date(creatDate)
This.URL=URL
其基本含义如下：
Name－指定一个“单位”名称。
City－“单位”所在城市。
CreatDate－记载university对象的更新日期。
URL－该对象指向一个网址。
二、创建对象实例
一旦对象定义完成后，就可以为该对象创建一个实例了：
NewObject=New object();
其中Newobjet是新的对象，Object已经定义好的对象。例：
U1=New university(“云南省”，“昆明市”，"January 05,199712:00:00","http://www.YN.KM")
U2=New university(“云南电子科技大学”，“昆明”,"January 07,1997 12:00:00","htlp://www.YNKJ.CN")
三、对象方法的使用
在对象中除了使用属性外，有时还需要使用方法。在对象的定义中，我们看到This.meth=FunctionName语句，那就是为定义对象的方法。实质对象的方法就是一个函数FunctionName，通过它实现自己的意图。
例在university对象中增加一个方法，该方法是显示它自己本身，并返回相应的字串。
function university(name,city,createDate,URL)
This.Name=Name;
This.city=city;
This.createDate=New Date(creatDate)；
This.URL=URL；
This.showuniversity=showuniversity;
其中This.showuniversity就是定义了一个方法－－－showuniversity()。
而showuniversity()方法是实现university对象本身的显示。
function showuniversity()
For (var prop in this)
alert(prop+=”+this[prop]+”");
其中alert是JavaScript中的内部函数，显示其字符串。
四、JavaScript中的数组
使用New创建数组
JavaScript中没有提供像其它语言具有明显的数组类型，但可以通过function定义一个数组，并使用New对象操作符创建一个具有下标的数组。从而可以实现任何数据类型的存储。
a、定义对象的数组
Function arrayName(size){
This.length=Size;
for(var X=; X<=size;X++)
this[X]=0;
Reture this;
}
其中arrayName是定义数组的一个名子，Size是有关数组大小的值（1-size），即数组元素的个数。通过for循环对一个当前对象的数组进行定义，最后返回这个数组。
从中可以看出，JavaScript中的数组是从1到size，这与其它０到size的数组表示方法有所不同，当然你可根据需要将数组的下标由１到size调整到０到size－１,可由下列实现:
Function arrayName (size)
For (var X=0; X<=size;X++)
this[X]=0;
this.lenght=size;
Return this;
从上面可以看出该方法是只是调整了this.lenght的位置，该位置是用于存储数组的大小的。从而调整后的数组的下标将与其它语言一致。但请读者注意正是由于数组下标顺序由１到size，使得JavaScript中的对象功能更加强大。
b、创建数组实例
一个数组定义完成以后，还不能马上使用，必须为该数组创建一个数组实例：
Myarray=New arrayName(n);
并赋于初值：
Myarray[1]=“字串１”；
Myarray[2]=“字串２”；
Myarray[3]=“字串３”；
…
Myarray[n]=“字串n”；
一旦给数组赋于了初值后，数组中就具有真正意义的数据了，以后就可以在程序设计过程中直接引用。
创建多维数组
Function creatMArray(row,col){
var indx=0;
this.length=(row*10)+col
for(var x=1;x<=row;x++)
for(var y=1;y<=col;y++)
indx=(x*10)+y;
this[indx]=””;
}
myMArray=new creatMArray();
之后可通过myMArray[11]、myMArray[12]、myMArray[13]、myMArray[21]、myMArray[22]、myMArray[23]、
…来引用。
内部数组
在Java中为了方便内部对象的操作,可以使用窗体(Forms)、框架(Frames)、元素(element)、链接(links)和锚(Anchors)数组实现对象的访问。
anchors[]:使用《A name=“anchorName“》标识来建立锚的链接。
links[]: 使用<A href=”URL”>来定义一个越文本链接项。
Forms[]: 在程序中使用多窗体时,建立该数组。
Elements[]:在一个窗口中使用从个元素时,建立该数组。
Frames[]:建立框架时,使用该数组
anchors[]用于窗体的访问(它是通过《form name=“form1”》所指定的),link[]用于被链接到的锚点的访问(它是通过《a href=URL》所指定的)。Forms[]反映窗体的属性,而anchors[]反映Web页面中的链接属性。
有关锚数组的文档：
<HTML>
<HEAD>
<BODY>
<A NAME=”MyAnchorsName1”> 定义第一个锚名
HTML Code
<A NAME=”MyAnchorsName2”> 定义第二个锚名
HTML Code
<A HREF=”#MyAnchorsName1”>建立锚的链接
<A HREF=”#MyAnchorsName2″> 建立锚的链接
….
该文档段建立了两面全锚的链接,可通过Anchors[]访问这些锚。document.Anchors[0]反映第一个锚,而document.Anchors[1]反映第二个锚的有关信息。
2008年9月1日
利用JAVASCRIPT让IFRAME框架的高度自适应
页面内嵌不同的网页内容时，导致iframe的高度无法与实现内容或浏览器高度相匹配。窗口大小变换时，不能iframe不能进行自动调整。这里，我们利用JAVASCRIPT让IFRAME框架的高度自适应。
首先，写出如下的JS方法。
/**
* 内嵌页面的高度设置
*/
function handleFrameLoad() {
var hDoc = getBodyHeight(document);
var tblmain = document.getElementById('tblMain');
var mFrame = window.mainFrame;
var hFrameDoc = getFrameHeight(mFrame);
var hTable = hDoc-80; //减去该页面除iframe外其他控件所占的高度.
if(hFrameDoc > hTable) hTable = hFrameDoc;
tblmain.style.height = hTable;
mFrame.height = hTable;
if(window.mainFrame.moduleRight != null){
//表示该内嵌页，包含内嵌的页面，页iframe的id固定为moduleRight。
initFrameHeight(mFrame,hTable);
}
}
/**
* 获取当前页面的高度
*/
function getBodyHeight(doc){
if(doc.all) return doc.body.offsetHeight;
else return doc.body.scrollHeight;
}
/**
* 获取内嵌页中的高度.
* 若另含子内嵌(moduleRight)页时,应考虑该页面的高度.
*/
function getFrameHeight(mFrame){
var h1 = mFrame.document.body.offsetHeight;
var h2 = mFrame.document.body.scrollHeight;
if(mFrame.moduleRight != null){
var h3 = mFrame.moduleRight.document.body.scrollHeight;
if(h3 > h2) h2 = h3;
}
return h2;
}
/**
* 设置子内嵌页面的高度.
* 通过设置iframe所在table的高度来调整。
*/
function initFrameHeight(frame,hFrame){
var tbl = frame.document.getElementById('tblMainFrame');
tbl.style.height = hFrame;
}
主页面，在加载完毕（onload）、窗口大小调整(onresize)，以及iframe的加载完毕时，需调用:handleFrameLoad，代码如下:
<html>
<body onload="handleFrameLoad();" onResize="handleFrameLoad();">
<iframe src="" id="mainFrame" name="mainFrame" border=0 width=100% height=100% frameborder="0" marginwidth="0" hspace="0" scrolling="no" onload="handleFrameLoad();"/>
</body>
</html
其他内嵌页如下(注：此处的iframe高度设为100%，其高度由父页面通过设置table<tblMainFrame>的高度来进行调整)：
<html>
<body class="body" style="overflow:hidden;margin:0px;padding:0px">
<table width="100%" height="100%" id="tblMainFrame" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id='content' height=100%>
<iframe src="about:blank" width="100%" height="100%" name="moduleRight" id="moduleRight" frameborder="0" hspace="0"/>
</td>
</tr>
</table>
</body>
</html>