BlogJava-礼必风-随笔分类-Javascript&Ajax

Ajax 简介

礼必风 — Thu, 14 Dec 2006 06:56:00 GMT

摘要: 五年前，如果不知道 XML，您就是一只无人重视的丑小鸭。十八个月前，Ruby 成了关注的中心，不知道 Ruby 的程序员只能坐冷板凳了。今天，如果想跟上最新的技术时尚，那您的目标就是 Ajax。阅读全文

礼必风 2006-12-14 14:56 发表评论

通用js客户端表单验证函数

礼必风 — Wed, 15 Nov 2006 11:52:00 GMT

一、用法简介：
表单验证函数放在了functions.js文件里了，在你所需要做验证的网页文件里，包含该脚本文件。一般语法为:

2 比较两个表单项的值是否相同

3 表单项只能为数字和"_",用于电话/银行帐号验证上,可扩展到域名注册等

4 表单项输入数值/长度限定

4 表单项输入字符/长度限定

6 限定表单项不能输入的字符

礼必风 2006-11-15 16:59 发表评论

JS的数据类型和变量

礼必风 — Wed, 15 Nov 2006 08:58:00 GMT

JavaScript 有六种数据类型。主要的类型有 number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。

String 字符串类型:字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串。）如：“The cow jumped over the moon.”
数值数据类型：JavaScript 支持整数和浮点数。整数可以为正数、0 或者负数；浮点数可以包含小数点、也可以包含一个 “e”（大小写均可，在科学记数法中表示“10的幂”）、或者同时包含这两项。

Boolean 类型：可能的 Boolean 值有 true 和 false。这是两个特殊值，不能用作 1 和 0。

Undefined 数据类型：一个为 undefined 的值就是指在变量被创建后，但未给该变量赋值以前所具有的值。

Null 数据类型：null 值就是没有任何值，什么也不表示。

object类型：除了上面提到的各种常用类型外，对象也是JavaScript中的重要组成部分，这部分将在后面章节详细介绍。

在 JavaScript 中变量用来存放脚本中的值，这样在需要用这个值的地方就可以用变量来代表，一个变量可以是一个数字，文本或其它一些东西。

　　 JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，变量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。可以使用 var 语句来进行变量声明。如：var men = true; // men 中存储的值为 Boolean 类型。

        变量命名:JavaScript 是一种区分大小写的语言，因此将一个变量命名为 computer 和将其命名为 Computer是不一样的。
        另外，变量名称的长度是任意的，但必须遵循以下规则：
        1.第一个字符必须是一个字母（大小写均可）、或一个下划线(_)或一个美元符 ($)。
        2.后续的字符可以是字母、数字、下划线或美元符。
        3.变量名称不能是保留字。

礼必风 2006-11-15 16:58 发表评论

ajax基础(client)

礼必风 — Wed, 15 Nov 2006 08:58:00 GMT

ajax架构中主要涉及的技术：

client: 用 javascript的DOM 操作 server端返回的xml文件

server: servlet + DAO，用于生成client端所需的xml文件并返回

下面主要介绍client的代码：

1 //先假设server传过来如下的xml文件内容：
2 xml version="1.0" encoding="gb2312" ?>
3 < students >
4       < student name ="木鱼子" >
5            < job > Programmer job >
6            < salary > 3000 salary >
7       student >
8       < student name ="丁磊" >
9            < job > 网易CEO job >
10            < salary > 100000 salary >
11       student >
12       < student name ="陈天桥" >
13            < job > 盛大CEO job >
14            < salary > 120000 salary >
15       student >
16 students >

1 //类的构造，传入xml文档和需要处理的标签名称
2 function DataSet(xmldoc, tagLabel) {
3 this.rootObj = xmldoc.getElementsByTagName(tagLabel)
4
5 //3个方法定向,方便调用
6 this.getCount = getCount
7 this.getData = getData
8 this.getAttribute = getAttribute
9 }

1 //3个方法函数定义
2 function getCount(){
3 return this.rootObj.length
4 }
5
6 function getData(index, tagName){
7   if (index >= this.count){
8         return "index overflow"
9    }
10 var node = this.rootObj[index]
11 var str = node.getElementsByTagName(tagName)[0].firstChild.data
12 return str
13 }
14
15 function getAttribute(index, tagName) {
16    if (index >= this.count){
17         return "index overflow"
18    }
19 var node = this.rootObj[index]
20 var str = node.getAttribute(tagName)
21 return str
22 }

//使用DataSet类获取所需标签集合

1 function updateByXML(xmlDoc) {
2       var studentDS = new DataSet(xmlDoc,"student");
3       var count = studentDS.getCount()
4       for(i=0;i < count ;i++) {
5           var name = studentDS.getAttribute(i,"name")
6            var job = studentDS.getData(i,"job")
7            var salary = studentDS.getData(i,"salary")
8            alert(name + "," + job + "," + salary)
9       }
10 }

//操纵DOM，创建table，显示获得的数据，用这种方法显示数据，容易让用户接受！~^_^

1 // 首先要确定document对象中，有没有定义table
2 function deleteOldTable() {
3      delRow = document.getElementsByTagName( " table " ).length
4
5       if (delRow == 0 ) {
6             return ;
7        }
8
9       var node = document.getElementsByTagName( " table " )[delRow - 1 ]; // 表格
10       var c = node.childNodes.length
11
12       for (i = 0 ;i < c;i ++ ) {
13        node.removeChild(node.childNodes[ 0 ]); // 删除全部单元行
14      }
15
16 }

1 // 传入DataSet的一个实例即可
2 function makeTable(m_ds) {
3      deleteOldTable()      // 先清除以前的结果
4
5       var table = document.createElement( " table " );
6      table.setAttribute( " border " , " 1 " );
7      table.setAttribute( " width " , " 100% " );
8
9      document.body.appendChild(table);
10       var header = table.createTHead();
11       var headerrow = header.insertRow( 0 );
12      headerrow.insertCell( 0 ).appendChild(document.createTextNode( " 姓名 " ));
13      headerrow.insertCell( 1 ).appendChild(document.createTextNode( " 职业 " ));
14      headerrow.insertCell( 2 ).appendChild(document.createTextNode( " 工资 " ));
15
16       for ( var i = 0 ;i < m_ds.getCount();i ++ ) {
17            var name = m_ds.getAttribute(i, " name " )
18            var job = m_ds.getData(i, " job " )
19            var salary = m_ds.getData(i, " salary " )
20            var row = table.insertRow(i + 1 );
21           row.insertCell( 0 ).appendChild(document.createTextNode(name));
22           row.insertCell( 1 ).appendChild(document.createTextNode(job));
23           row.insertCell( 2 ).appendChild(document.createTextNode(salary));
24      }
25 }

以上就是javascript的DOM的基本使用方法，作为ajax的基础，掌握这个是非常重要滴！~

礼必风 2006-11-15 16:58 发表评论

js常用函数

礼必风 — Wed, 15 Nov 2006 08:55:00 GMT

1.常规函数
　　javascript常规函数包括以下9个函数：
　　(1)alert函数：显示一个警告对话框，包括一个OK按钮。
　　(2)confirm函数：显示一个确认对话框，包括OK、Cancel按钮。
　　(3)escape函数：将字符转换成Unicode码。
　　(4)eval函数：计算表达式的结果。
　　(5)isNaN函数：测试是(true)否(false)不是一个数字。
　　(6)parseFloat函数：将字符串转换成符点数字形式。
　　(7)parseInt函数：将符串转换成整数数字形式(可指定几进制)。
　　(8)prompt函数：显示一个输入对话框，提示等待用户输入。例如：
　　(9)unescape函数：解码由escape函数编码的字符。
2.数组函数
　　javascript数组函数包括以下4个函数：
　　(1)join函数：转换并连接数组中的所有元素为一个字符串。例:

程序代码
function JoinDemo()
{
var a, b;
a = new Array(0,1,2,3,4);
b = a.join("-");//分隔符
return(b);//返回的b=="0-1-2-3-4"
}
　
　(2)langth函数：返回数组的长度。例：
　　　　
程序代码
function LengthDemo()
{
var a, l;
a = new Array(0,1,2,3,4);
l = a.length;
return(l);//l==5
}

　　(3)reverse函数：将数组元素顺序颠倒。例：
　　　
程序代码
function ReverseDemo()
{
var a, l;
a = new Array(0,1,2,3,4);
l = a.reverse();
return(l);
}
　　(4)sort函数：将数组元素重新排序。例：
　　　　
程序代码
function SortDemo()
{
var a, l;
a = new Array("X" ,"y" ,"d", "Z", "v","m","r");
l = a.sort();
return(l);
}
3.日期函数
　　javascript日期函数包括以下20个函数：
　　(1)getDate函数：返回日期的“日”部分，值为1～31。例：
　　　
程序代码
function DateDemo()
{
var d, s = "Today's date is: ";
d = new Date();
s += (d.getMonth() + 1) + "/";
s += d.getDate() + "/";
s += d.getYear();
return(s);
}
　　(2)getDay函数：返回星期几，值为0～6，其中0表示星期日，1表示星期一，...，6表示星期六。例：
　　　
程序代码
function DateDemo()
{
var d, day, x, s = "Today is: ";
var x = new Array("Sunday", "Monday", "Tuesday");
var x = x.concat("Wednesday","Thursday", "Friday");
var x = x.concat("Saturday");
d = new Date();
day = d.getDay();
return(s += x[day]);
}
　　(3)getHouse函数：返回日期的“小时”部分，值为0～23。例。
　　　
程序代码
function TimeDemo()
{
var d, s = "The current local time is: ";
var c = ":";
d = new Date();
s += d.getHours() + c;
s += d.getMinutes() + c;
s += d.getSeconds() + c;
s += d.getMilliseconds();
return(s);
}
　　(4)getMinutes函数：返回日期的“分钟”部分，值为0～59。见上例。
　　(5)getMonth函数：返回日期的“月”部分，值为0～11。其中0表示1月，2表示3月，...，11表示12月。见前面的例子。
　　(6)getSeconds函数：返回日期的“秒”部分，值为0～59。见前面的例子。
　　(7)getTime函数：返回系统时间。
　　　
程序代码
function GetTimeTest()
{
var d, s, t;
var MinMilli = 1000 * 60;
var HrMilli = MinMilli * 60;
var DyMilli = HrMilli * 24;
d = new Date();
t = d.getTime();
s = "It's been "
s += Math.round(t / DyMilli) + " days since 1/1/70";
return(s);
}
　　(8)getTimezoneOffset函数：返回此地区的时差(当地时间与GMT格林威治标准时间的地区时差)，单位为分钟。
　　　
程序代码
function TZDemo()
{
var d, tz, s = "The current local time is ";
d = new Date();
tz = d.getTimezoneOffset();
}

　　if (tz 的链接点的名称，另一个函数link设定的URL地址。
　　(2)big函数：将字体加到一号，与...标签结果相同。
　　(3)blink函数：使字符串闪烁，与...标签结果相同。
　　(4)bold函数：使字体加粗，与...标签结果相同。
　　(5)charAt函数：返回字符串中指定的某个字符。
　　(6)fixed函数：将字体设定为固定宽度字体，与...标签结果相同。
　　(7)fontcolor函数：设定字体颜色，与标签结果相同。
　　(8)fontsize函数：设定字体大小，与标签结果相同。
　　(9)indexOf函数：返回字符串中第一个查找到的下标index，从左边开始查找。
　　(10)italics函数：使字体成为斜体字，与...标签结果相同。
　　(11)lastIndexOf函数：返回字符串中第一个查找到的下标index，从右边开始查找。
　　(12)length函数：返回字符串的长度。(不用带括号)
　　(13)link函数：产生一个超级链接，相当于设定的URL地址。
　　(14)small函数：将字体减小一号，与...标签结果相同。
　　(15)strike函数：在文本的中间加一条横线，与...标签结果相同。
　　(16)sub函数：显示字符串为下标字(subscript)。
　　(17)substring函数：返回字符串中指定的几个字符。
　　(18)sup函数：显示字符串为上标字(superscript)。
　　(19)toLowerCase函数：将字符串转换为小写。
　　(20)toUpperCase函数：将字符串转换为大写。

//校验是否全由数字组成

程序代码
function isDigit(s)
{
var patrn=/^[0-9]{1,20}$/;
if (!patrn.exec(s)) return false
return true
}

//校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串

程序代码
function isRegisterUserName(s)
{
var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
if (!patrn.exec(s)) return false
return true
}

//校验用户姓名：只能输入1-30个以字母开头的字串

程序代码
function isTrueName(s)
{
var patrn=/^[a-zA-Z]{1,30}$/;
if (!patrn.exec(s)) return false
return true
}

//校验密码：只能输入6-20个字母、数字、下划线

程序代码
function isPasswd(s)
{
var patrn=/^(\w){6,20}$/;
if (!patrn.exec(s)) return false
return true
}

//校验普通电话、传真号码：可以“+”开头，除数字外，可含有“-”

程序代码
function isTel(s)
{
//var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?(\d){1,12})+$/;
var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
if (!patrn.exec(s)) return false
return true
}

//校验手机号码：必须以数字开头，除数字外，可含有“-”

程序代码
function isMobil(s)
{
var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
if (!patrn.exec(s)) return false
return true
}

//校验邮政编码

程序代码
function isPostalCode(s)
{
//var patrn=/^[a-zA-Z0-9]{3,12}$/;
var patrn=/^[a-zA-Z0-9 ]{3,12}$/;
if (!patrn.exec(s)) return false
return true
}

//校验搜索关键字

程序代码
function isSearch(s)
{
var patrn=/^[^`~!@#$^%&*()+=|\\\][\]\{\}:;\'\,.<>/?]{1}[^`~!@$%^&()+=|\\\][\]\{\}:;\'\,.<>?]{0,19}$/;
if (!patrn.exec(s)) return false
return true
}

程序代码
function isIP(s) //by zergling
{
var patrn=/^[0-9.]{1,20}$/;
if (!patrn.exec(s)) return false
return true
}

礼必风 2006-11-15 16:55 发表评论

JS事件集

礼必风 — Wed, 15 Nov 2006 08:51:00 GMT

javascript事件查询综合

click() 对象.click() 使对象被点击。

closed 对象.closed 对象窗口是否已关闭true/false

clearTimeout(对象) 清除已设置的setTimeout对象

clearInterval(对象) 清除已设置的setInterval对象

confirm("提示信息") 弹出确认框，确定返回true取消返回false

cursor:样式更改鼠标样式 hand crosshair text wait help default auto e/s/w/n-resize

event.clientX 返回最后一次点击鼠标X坐标值；

event.clientY 返回最后一次点击鼠标Y坐标值；

event.offsetX 返回当前鼠标悬停X坐标值

event.offsetY 返回当前鼠标悬停Y坐标值

document.write(document.lastModified) 网页最后一次更新时间

document.ondblclick=x 当双击鼠标产生事件

document.onmousedown=x 单击鼠标键产生事件

document.body.scrollTop; 返回和设置当前竖向滚动条的坐标值，须与函数配合,

document.body.scrollLeft; 返回和设置当前横向滚动务的坐标值，须与函数配合，

document.title document.title="message"; 当前窗口的标题栏文字

document.bgcolor document.bgcolor="颜色值"; 改变窗口背景颜色

document.Fgcolor document.Fgcolor="颜色值"; 改变正文颜色

document.linkcolor document.linkcolor="颜色值"; 改变超联接颜色

document.alinkcolor document.alinkcolor="颜色值"; 改变正点击联接的颜色

document.VlinkColor document.VlinkColor="颜色值"; 改变已访问联接的颜色

document.forms.length 返回当前页form表单数

document.anchors.length 返回当前页锚的数量

document.links.length 返回当前页联接的数量

document.onmousedown=x 单击鼠标触发事件

document.ondblclick=x 双击鼠标触发事件

defaultStatus window.status=defaultStatus; 将状态栏设置默认显示

function function xx(){...} 定义函数

isNumeric 判断是否是数字

innerHTML xx=对象.innerHTML 输入某对象标签中的html源代码

innerText divid.innerText=xx 将以div定位以id命名的对象值设为XX

location.reload(); 使本页刷新，target可等于一个刷新的网页

Math.random() 随机涵数,只能是0到1之间的数,如果要得到其它数,可以为*10,再取整

Math.floor(number) 将对象number转为整数，舍取所有小数

Math.min(1,2) 返回1,2哪个小

Math.max(1,2) 返回1,2哪个大

navigator.appName 返回当前浏览器名称

navigator.appVersion 返回当前浏览器版本号

navigator.appCodeName 返回当前浏览器代码名字

navigator.userAgent 返回当前浏览器用户代标志

onsubmit onsubmit="return(xx())" 使用函数返回值

opener opener.document.对象控制原打开窗体对象

prompt xx=window.prompt("提示信息","预定值"); 输入语句

parent parent.框架名.对象控制框架页面

return return false 返回值

random 随机参数（0至1之间）

reset() form.reset(); 使form表单内的数据重置

split("") string.split("") 将string对象字符以逗号隔开

submit() form对象.submit() 使form对象提交数据

String对象的 charAt(x)对象反回指定对象的第多少位的字母

lastIndexOf("string") 从右到左询找指定字符，没有返回-1

indexOf("string") 从左到右询找指定字符，没有返回-1

LowerCase() 将对象全部转为小写

UpperCase() 将对象全部转为大写

substring(0,5) string.substring(x,x) 返回对象中从0到5的字符

setTimeout("function",time) 设置一个超时对象

setInterval("function",time) 设置一个超时对象

toLocaleString() x.toLocaleString() 从x时间对象中获取时间，以字符串型式存在

typeof(变量名) 检查变量的类型，值有：String,Boolean,Object,Function,Underfined

window.event.button==1/2/3 鼠标键左键等于1右键等于2两个键一起按为3

window.screen.availWidth 返回当前屏幕宽度(空白空间)

window.screen.availHeight 返回当前屏幕高度(空白空间)

window.screen.width 返回当前屏幕宽度(分辨率值)

window.screen.height 返回当前屏幕高度(分辨率值)

window.document.body.offsetHeight; 返回当前网页高度

window.document.body.offsetWidth; 返回当前网页宽度

window.resizeTo(0,0) 将窗口设置宽高

window.moveTo(0,0) 将窗口移到某位置

window.focus() 使当前窗口获得焦点

window.scroll(x,y) 窗口滚动条坐标，y控制上下移动，须与函数配合

window.open() window.open("地址","名称","属性")

属性:toolbar(工具栏),location(地址栏),directions,status(状态栏),menubar(菜单栏),scrollbar(滚动条),resizable(改变大小), width(宽),height(高),fullscreen(全屏),scrollbars(全屏时无滚动条无参数),channelmode(宽屏),left(打开窗口x坐标),top(打开窗口y坐标)

window.location = 'view-source:' + window.location.href 应用事件查看网页源代码;

a=new Date(); //创建a为一个新的时期对象

y=a.getYear(); //y的值为从对象a中获取年份值两位数年份

y1=a.getFullYear(); //获取全年份数四位数年份

m=a.getMonth(); //获取月份值

d=a.getDate(); //获取日期值

d1=a.getDay(); //获取当前星期值

h=a.getHours(); //获取当前小时数

m1=a.getMinutes(); //获取当前分钟数

s=a.getSeconds(); //获取当前秒钟数

对象.style.fontSize="文字大小";

单位：mm/cm/in英寸/pc帕/pt点/px象素/em文字高

1in=1.25cm

1pc=12pt

1pt=1.2px(800*600分辩率下)

文本字体属性：

fontSize大小

family字体

color颜色

fontStyle风格，取值为normal一般,italic斜体,oblique斜体且加粗

fontWeight加粗,取值为100到900不等,900最粗,light,normal,bold

letterSpacing间距,更改文字间距离,取值为,1pt,10px,1cm

textDecoration:文字修饰;取值,none不修饰,underline下划线,overline上划线

background:文字背景颜色,

backgroundImage:背景图片,取值为图片的插入路径

点击网页正文函数调用触发器：

1.onClick 当对象被点击

2.onLoad 当网页打开,只能书写在body中

3.onUnload 当网页关闭或离开时,只能书写在body中

4.onmouseover 当鼠标悬于其上时

5.onmouseout 当鼠标离开对象时

6.onmouseup 当鼠标松开

7.onmousedown 当鼠标按下键

8.onFocus 当对象获取焦点时

9.onSelect 当对象的文本被选中时

10.onChange 当对象的内容被改变

11.onBlur 当对象失去焦点

onsubmit=return(ss())表单调用时返回的值

直线 border-bottom:1x solid black

虚线 border-bottom:1x dotted black

点划线 border-bottom:2x dashed black

双线 border-bottom:5x double black

槽状 border-bottom:1x groove black

脊状 border-bottom:1x ridge black

1.边缘高光glow(color=颜色,strength=亮光大小)

2.水平翻转fliph() 使对象水平翻转180度

3.垂直翻转flipv() 使对象垂直翻转180度

4.对象模糊blur(add=true/false direction=方向 strength=强度) add 指定是否按印象画派进行模糊; direction 模糊方向; strength模糊强度

5.对象透明alpha(opaction=0-100,finishopacity=0-100,style=0/1/2/3) opaction 对象整体不透明值; finishopacity 当对象利用了渐透明时该项指定结束透明位置的不透明值; style 指定透明方式:0为整体透明，1为线型透明，2为圆型透明，3为矩形透明

6.去除颜色chroma(color=颜色值)使对象中颜色与指定颜色相同区域透明

7.建立阴影dropshadow(color=阴影颜色,offx=水平向左偏离像素,offy=水平向下偏离像素)

8.去色gray()使对象呈灰度显示

9.负片效果invert()使对象呈底片效果

10.高光light()使对象呈黑色显示

11.遮盖mask(color=颜色)使整个对象以指定颜色进行蒙板一次

opacity 表透明度水平.0~100,0表全透明,100表完全不透明

finishopacity表想要设置的渐变透明效果.0~100.

style 表透明区的形状.0表统一形状.1表线形.2表放射形.3表长方形.

startx.starty表渐变透明效果的开始时X和Y坐标.

finishx,finishy渐变透明效果结束时x,y 的坐标.

add有来确定是否在模糊效果中使有原有目标.值为0,1.0表"否",1表"是".

direction设置模糊的方向.0度表垂直向上,45度为一个单位.默认值是向左270度.left,right,down,up.

strength 只能用整数来确定.代表有多少个像素的宽度将受到模糊影响.默认是5个.

color要透明的颜色.

offx,offy分别是x,y 方向阴影的偏移量.

positive指投影方式.0表透明像素生成阴影.1表只给出不透明像素生成阴影..

AddAmbient:加入包围的光源.

AddCone:加入锥形光源.

AddPoint加入点光源

Changcolor:改变光的颜色．

Changstrength:改变光源的强度．

Clear:清除所有的光源．

MoveLight:移动光源．

freq是波纹的频率，在指定在对象上一区需要产生多少个完事的波纹．

lightstrength可对于波纹增强光影的效果．显著0~100正整数，正弦波开始位置是0~360度．0表从0度开始，25表从90度开始．

strength表振幅大小．

hand style="cursor:hand"

crosshair style="cursor:crosshair"

text style="cursor:text"

wait style="cursor:wait"

default                       style="cursor:default"

help                          style="cursor:help"

e-resize style="cursor:e-resize"

ne-resize style="cursor:ne-resize"

n-resize style="cursor:n-resize"

nw-resize style="cursor:nw-resize"

w-resize style="cursor:w-resize"

s-resize style="cursor:s-resize"

sw-resize style="cursor:sw-resize "

se-resize style="cursor:se-resize"

auto style="cursor:auto"

礼必风 2006-11-15 16:51 发表评论