JavaScript(2) - iLeichun

JavaScript编码规范

分类:JavaScript 来源:网络时间:2010-8-22 11:57:32

JavaScript 编程语言作为最流行的客户端脚本语言，深受Web开发人员爱戴。JavaScript语法灵活，简单易懂，对代码的格式的要求也相对松散。也正因为如此，JavaScript 的编码规范也往往被轻视，开发过程中修修补补，最终也就演变成为后续维护人员的恶梦。为了此种恶梦不再发生，IBM高级软件工程师王丹丹对JavaScript 编程语言的编码规范进行了总结，现转载于此，供大家学习。全文如下：

对于熟悉C/C++或Java语言的工程师来说，JavaScript显得灵活，简单易懂，对代码的格式的要求也相对松散。很容易学习，并运用到自己的代码中。也正因为这样，JavaScript的编码规范也往往被轻视，开发过程中修修补补，最终也就演变成为后续维护人员的恶梦。软件存在的长期价值直接与编码的质量成比例。编码规范能帮助我们降低编程中不必要的麻烦。而 JavaScript代码是直接发送给客户浏览器的，直接与客户见面，编码的质量更应该受到关注。

本文浅谈JavaScript编程中关于编码规范的问题，分析其中缘由。希望引起更多Web 开发人员对JavaScript编码规范问题的关注和对软件产品质量问题的重视。

阅读全文>>

浏览(7613) | 评论(0)

js实现html表格增减

分类:JavaScript 来源:网络时间:2010-8-17 0:54:40

阅读全文>>

浏览(7384) | 评论(0)

常用的几个JS效果

分类:JavaScript 来源:网络时间:2010-8-16 0:15:42

1. 将彻底屏蔽鼠标右键oncontextmenu="window.event.returnValue=false"

<table border oncontextmenu=return(false)><td>no</table> 可用于Table

2. 取消选取、防止复制
<body onselectstart="return false">

3. 不准粘贴onpaste="return false"

4. 防止复制oncopy="return false" oncut="return false"

5. IE地址栏前换成自己的图标<link rel="Shortcut Icon" href="favicon.ico">

6. 可以在收藏夹中显示出你的图标<link rel="Bookmark" href="favicon.ico">

7. 关闭输入法<input style="ime-mode:disabled">

8. 永远都会带着框架

<script language="JavaScript"><!
if (window == top)top.location.href = "frames.htm" //frames.htm为框架网页
// ></script>

9. 防止被人frame

<SCRIPT LANGUAGE=JAVASCRIPT><!
if (top.location != self.location)top.location=self.location
// ></SCRIPT>

10. 网页将不能被另存为

<noscript><iframe src=*.html></iframe></noscript>

11. 查看网页源代码

<input type=button value=查看网页源代码
onclick="window.location = "view-source:"+ "http://www.pconline.com.cn"">

12.删除时确认

<a href="javascript:if(confirm("确实要删除吗?"))location="boos.asp?&areyou=删除&page=1"">删除</a>

阅读全文>>

浏览(7575) | 评论(0)

JS显示时间日期与星期

分类:JavaScript 来源:网络时间:2010-8-16 0:06:02

＜script language=javascript＞
　　today=new Date();
　　function date(){
　　this.length=date.arguments.length
　　for(var i=0;i＜this.length;i++)
　　this[i+1]=date.arguments }
　　var d=new date("星期日","星期一","星期二","星期三","星期四","星期五","星期六";
　　document.write(
　　"＜font color=##000000 style=’font-size:9pt;font-family: 宋体’＞ ",
　　today.getYear(),"年",today.getMonth()+1,"月",today.getDate(),"日",
　　d[today.getDay()+1],"＜/font＞" );
＜/script＞

阅读全文>>

浏览(7439) | 评论(0)

JavaScript检测表单内容格式

分类:JavaScript 来源:网络时间:2010-8-14 18:01:53

function chk(obj, chktype){

switch(chktype){

case 1://判断是否为空

if(obj.value == ""){

alert("请输入必要的字符。");

obj.focus();

obj.onselect();

}

break;

case 2://判断是否为数字

var reg = /^d+(.d+)?$/;

if(!reg.test(obj.value)){

alert("请输入数字。");

obj.focus();

obj.select();

}

break;

case 3://判断是否为用户名格式

var reg = /^[^d-_][w-]*[^-_]$/;

if(!reg.test(obj.value)){

alert("请输入正确的格式。");

obj.focus();

obj.select();

}

break;

case 4://判断是否为汉字

var reg = /^[u4E00-u9FA5]*$/;

if(!reg.test(obj.value)){

alert("你输入的不全是汉字。");

obj.focus();

obj.select();

}

break;

case 5://判断是否为邮箱格式

var reg = /^[^d-_][w-]*[^-_]@[^-][a-zA-Zd-]*[^-](.[^-][a-zA-Zd-]*[^-])*.[a-zA-Z]{3}(.[a-zA-Z]{2})?$/;

if(!reg.test(obj.value)){

alert("你输入正确的邮箱格式。");

obj.focus();

obj.select();

}

break;

case 6://判断是否为合法日期格式

var reg = /^(19|20)dd-(0|1)d-(0|1|2|3)d$/;

if(!reg.test(obj.value)){

alert("你输入正确的日期格式。");

obj.focus();

obj.select();

}

break;

}

阅读全文>>

浏览(7634) | 评论(0)

Javascript的document对象

分类:JavaScript 来源:网络时间:2010-8-13 23:46:42

对象属性

document.title                 //设置文档标题等价于HTML的<title>标签
document.bgColor               //设置页面背景色
document.fgColor               //设置前景色(文本颜色)
document.linkColor             //未点击过的链接颜色
document.alinkColor            //激活链接(焦点在此链接上)的颜色
document.vlinkColor            //已点击过的链接颜色
document.URL                   //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate       //文件建立日期，只读属性
document.fileModifiedDate      //文件修改日期，只读属性
document.fileSize              //文件大小，只读属性
document.cookie                //设置和读出cookie
document.charset               //设置字符集简体中文:gb2312

document.fileSize //文件大小，只读属性

document.cookie //设置和读出cookie

常用对象方法

document.write()                      //动态向页面写入内容
document.createElement(Tag)           //创建一个html标签对象
document.getElementById(ID)           //获得指定ID值的对象
document.getElementsByName(Name)      //获得指定Name值的对象
document.body.appendChild(oTag)

body-主体子对象

document.body                   //指定文档主体的开始和结束等价于<body></body>
document.body.bgColor           //设置或获取对象后面的背景颜色
document.body.link              //未点击过的链接颜色
document.body.alink             //激活链接(焦点在此链接上)的颜色
document.body.vlink             //已点击过的链接颜色
document.body.text              //文本色
document.body.innerText         //设置<body>...</body>之间的文本
document.body.innerHTML         //设置<body>...</body>之间的HTML代码
document.body.topMargin         //页面上边距
document.body.leftMargin        //页面左边距
document.body.rightMargin       //页面右边距
document.body.bottomMargin      //页面下边距
document.body.background        //背景图片
document.body.appendChild(oTag) //动态生成一个HTML对象

常用对象事件

document.body.onclick="func()"              //鼠标指针单击对象是触发
document.body.onmouseover="func()"          //鼠标指针移到对象时触发
document.body.onmouseout="func()"           //鼠标指针移出对象时触发

location-位置子对象

document.location.hash          // #号后的部分
document.location.host          // 域名+端口号
document.location.hostname      // 域名
document.location.href          // 完整URL
document.location.pathname      // 目录部分
document.location.port          // 端口号
document.location.protocol      // 网络协议(http:)
document.location.search        // ?号后的部分

常用对象事件

documeny.location.reload()          //刷新网页
document.location.reload(URL)       //打开新的网页
document.location.assign(URL)       //打开新的网页
document.location.replace(URL)      //打开新的网页

documeny.location.reload() //刷新网页

document.location.reload(URL) //打开新的网页

document.location.assign(URL) //打开新的网页

document.location.replace(URL) //打开新的网页

selection-选区子对象
document.selection

images集合(页面中的图象)

a)通过集合引用
document.images                 //对应页面上的<img>标签
document.images.length          //对应页面上<img>标签的个数
document.images[0]              //第1个<img>标签
document.images[i]              //第i-1个<img>标签

b)通过name属性直接引用
<img name="oImage">
document.images.oImage          //document.images.name属性

c)引用图片的src属性
document.images.oImage.src      //document.images.name属性.src

d)创建一个图象
var oImage
oImage = new Image()
document.images.oImage.src="1.jpg"
同时在页面上建立一个<img>标签与之对应就可以显示

示例代码(动态创建图象)：
<html>
<img name=oImage>
<script language="javascript">
       var oImage
       oImage = new Image()
       document.images.oImage.src="1.jpg"
</script>
</html>

<html>
<script language="javascript">
       oImage=document.caeateElement("IMG")
       oImage.src="1.jpg"
       document.body.appendChild(oImage)
</script>
</html>

forms集合(页面中的表单)

a)通过集合引用
document.forms                     //对应页面上的<form>标签
document.forms.length              //对应页面上<form>标签的个数
document.forms[0]                  //第1个<form>标签
document.forms[i]                  //第i-1个<form>标签
document.forms[i].length           //第i-1个<form>中的控件数
document.forms[i].elements[j]      //第i-1个<form>中第j-1个控件

b)通过标签name属性直接引用
<form name="Myform"><input name="myctrl"></form>
document.Myform.myctrl             //document.表单名.控件名

c)访问表单的属性
document.forms[i].name             //对应<form name>属性
document.forms[i].action           //对应<form action>属性
document.forms[i].encoding         //对应<form enctype>属性
document.forms[i].target           //对应<form target>属性
document.forms[i].appendChild(oTag) //动态插入一个控件

示例代码(form)：
<html>

<form name="Myform">
<input type="text" name="oText">
<input type="password" name="oPswd">
<form>
<script language="javascript">
//获取文本密码框的值
document.write(document.Myform.oText.value)
document.write(document.Myform.oPswd.value)
</script>
</html>

示例代码(checkbox)：
<html>

<form name="Myform">
<input type="checkbox" name="chk" value="1">1
<input type="checkbox" name="chk" value="2">2
</form>
<script language="javascript">
function fun(){
       //遍历checkbox控件的值并判断是否选中
       var length
       length=document.forms[0].chk.length
       for(i=0;i<length;i++){
       v=document.forms[0].chk[i].value
       b=document.forms[0].chk[i].checked
       if(b)
         alert(v=v+"被选中")
       else
         alert(v=v+"未选中")
       }
       }
</script>
<a href=# onclick="fun()">ddd</a>
</html>

示例代码(Select)：
<html>

<form name="Myform">
<select name="oSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>

<html>
<script language="javascript">
function changeText(){
document.getElementById("oDiv").innerText="NewText"
}
</script>
<Div id="oDiv" onmouseover="changeText()">Text</Div>
</html>