页面设计

〖摘要:〗
<html>
<head>
<title>judge</title>
<script type="text/javascript">
function judge(obj){//用于判断
var newValue = trim(obj.value);
if(isInteger(newValue)){
alert(newValue+"是整数");
}

var booleanValue=isBooleanExp(newValue);//布尔值
if(booleanValue==true || booleanValue==false){
alert(newValue+"是一个布尔值,它的结果是:"+booleanValue);
}
if(hasChineseCharacter(newValue)){
alert(trim(obj.value)+':含有中文');
}
if(isIP(newValue)){
alert(newValue+"是一个ip地址");
}
if(isIdNum(newValue)){
alert(newValue+"是一个身份证号");
}
if(!isInteger(newValue)&&isFloat(newValue)){
alert(newValue+"是一个浮点数");
}
if(isValidDate(newValue)){
alert(newValue+"是一个有效的日期");
}
}
function ltrim(str){//去掉字符串左边的空格
var whitespace = new String(" \t\n\r");//空格字符
var strObj = new String(str);
     if (whitespace.indexOf(strObj.charAt(0)) != -1){
         var j=0, i = strObj.length;
         while (j < i && whitespace.indexOf(strObj.charAt(j)) != -1){
            j++;
          }
         strObj = strObj.substring(j, i);
     }
     return strObj;
}
function rtrim(str){//去掉字符串右边的空格
var whitespace = new String(" \t\n\r");//空格字符
var strObj = new String(str);
if (whitespace.indexOf(strObj.charAt(strObj.length-1)) != -1){
var i = strObj.length - 1;
while (i >= 0 && whitespace.indexOf(strObj.charAt(i)) != -1){
i--;
}
strObj = strObj.substring(0, i+1);
}
return strObj;
}
function trim(str){//去掉两边空格
return ltrim(rtrim(str));
}
function isDegit(str){//判断是否是数字
var pattern=/^[0-9]\d*$/;
return pattern.test(str);
}
function isInteger(str){//判断是否是整数
var pattern= /^-?[1-9]\d*$/;
return pattern.test(str);
}
function isBooleanExp(str){//是否是布尔表达式
var op = new Array();//布尔值
op[0]="==";
op[1]=">";
op[2]=">=";
op[3]="<";
op[4]="<=";
op[5]="!=";
for(var i=0;i<op.length;i++){
if(str.indexOf(op)>0){
var opIndex=str.indexOf(op);
var leftCode = str.substring(0,opIndex);//左边值
var rightCode = str.substr(opIndex+op.length);//右边值
return eval(leftCode+op+rightCode);
}
}
}
function hasChineseCharacter(str){//是否含有中文字符;使用正则
var pattern = /[\u4e00-\u9fa5]/;//[\u4e00-\u9fa5]为中文代码
return pattern.test(str);
}
function isIP(str){//判断是否是一个ip地址
var pattern = /^\d\d{0,2}\.\d{1,3}\.\d{1,3}\.\d{0,2}\d$/;
return pattern.test(str);
}
function isIdNum(str){//判断是否是身份证号
if(str.length!=15 && str.length!=18){//检查长度
return false;
}
var returnBool = true;
for(var i=0;i<str.length;i++){//循环判断每一位是否是数字
if(!isInteger(str.charAt(i))&&i!=str.length-1){//最后一位可以是字母
returnBool = false;
}
}
return returnBool;
}
function isFloat(str){//判断是否是浮点数
var pattern=/^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$/;
return pattern.test(str);
}
function isValidDate(str){//是否是有效的年月日
//判断是否为日期(格式:yyyy年MM月dd日,yyyy-MM-dd,yyyy/MM/dd,yyyyMMdd)
var newStr="";
var year,month,day;
for(var i=0;i<str.length;i++){
if(isDegit(str.charAt(i))){
newStr+=str.charAt(i);
}
}
if(newStr.length!=8){
return false;
}
//分配日期
year = newStr.substr(0,4);
month=newStr.substr(4,2);
day=newStr.substr(6,2);
//判断
if (month < 1 || month > 12){
return false;
}
if (day < 1 || day > 31){
return false;
}
if ((month==4 || month==6 || month==9 || month==11) && day==31){
return false;
}
if (month==2){
var isleap=(year % 4==0 && (year % 100 !=0 || year % 400==0));
if (day>29){
return false;
}
if ((day==29) && (!isleap)){
return false;
}
}
return true;        
}
</script>
</head>
<body>
<form name="testForm" action="">
输入内容:<input type="text" id="content" name="content" value="">
<br>
<input type="button" name="buttonCheck" value="点击验证"
onclick="judge(document.getElementById('content'));">
</form>
</body><
继续阅读其余的  28 字
air_tuyh   2007-03-22 10:46:16 阅读:86  评论:0  引用:0
MVC:即模式,视图,控制器层简化用户开发进程。存在许多MVC的变体来适合不同的场景。而其中
对Web应用最使用的是Model2.

模型层
1.暴露被应用的封装的数据
2.允许业务逻辑在模型上完成

存在多种程序样式来建立模型,其中可使用Java对象来建立模型,这些对象是最简单也是最灵活的。


开发模型两个重要的设计特点:
1.系统所需的的全部交互和数据必须通过模型被暴露。
2.保持模型不可见,可以在任何类型的用户界面中使用它。

视图层
1.从模型中读数据并向用户展现它,不应该处理用户输入的验证或对模型进行修改。
2.不包含业务逻辑,但应包含描述逻辑。


控制层
响应用户输入,操作模型决定那个视图被显示。
在Model2中,控制层被分为若干个活动。每个活动代表用户想去完成的任务。
air_tuyh   2005-05-29 16:20:49 阅读:2981  评论:0  引用:0
开始我们的介绍之前,让我们要了解两个概念:
session,application
首先介绍一下session的概念:

  所谓session是微软首先提出的,在asp中最先集成。由于session的采用,大大方便了web开发员的工
作。一时间asp风靡全球。现在php4也加入session的支持,再度显示出open source 的强大力量。和
Cookie类似,设计Session的目的也是为了在一个访问期间在不同的页面间传输数据以解决http协议无状
态的问题,但Session更加简单、更加安全。Session 中文没有一个统一的译法,我习惯上译为会话。
关于session的意义大家都应该清楚: 其实是在浏览某个网站时,在浏览器没有关闭的情形之下,一个
web应用的开始和结束。一个session可以包括数次http的请求和应答,比如我们用freemail.263.net,
从login到logout或者超时就作为一个session 的生存期。每一个被创建的Session都有一个唯一的标识串
,叫session ID , 这个串被发送到客户端,同时在服务器端也生成了同样唯一的标识串入口,这个
标识串或者放在文本文件中,或者放在一个数据库中。然后程序可以在这个sessionID下注册一些
Session 变量。这些变量如同一般的变量一样可以保存文本或数值信息,可以通过Session被读出或写入。
session 的唯一标识一般是在系统内部唯一的session ID,一般是一个挺长的字符串。

application概念请参看:http://www.sdau.edu.cn/support/aspjc/part17/17-2.cfm.htm


下面开始我们的oscache之旅:

oscache在Web-tier中缓存已经处理过个jsp片段。
这有什么意义呢,它可以解决查询和重复相同的内容带来的资源浪费。

oscache通过把第一时间运行的请求所生成html片段缓存的方法来处理后续请求,被缓存的部分
展示给终端用户,以减少对数据库的访问。

实例:

<%@ page import="java.util.Date"%>
<%@ taglib uri=
"oscache" prefix="cache"%>

<body>
time <%=new Date()%> uncached.

<p>

<cache:cache key=
"tm" duration="10s">
time <%=new Date()%>time in the appliction scope
</cache:cache>

<p>

<cache:cache key=
"tm" duration="10s" scope="session">
time <%=new Date()%>cached in the session scope
).
</cache:cache>
</body>


输入标识符库:<%@ taglib uri="oscache" prefix="cache"%>
只有缓存片段存在,在缓存标识符
<cache:cache...> ... </cache:cache>
之间的代码不会执行。


下面介绍ocache标识库
<cache>:表示一个具有缓存能力的jsp片段
<usecached>:强行使用缓存内容
<flush>:清除特定缓存或全部缓存


0cache概念
1 cache key
使得多jsp页面之间共享缓存内容
2 scope
设定缓存范围(application ,session)的有效性
3 duration
配置缓存持续作用,有两种方法:
〈1〉<cache:cache time="10">
〈2〉SimpleDateFormat:<cache:cache duration="10s">
ISO-8601:<cache:cache duration="XXXXX">


附注:
1容错性:处理一个jsp发生异常或错误,你可通知oscache用缓存内容代替错误。
2硬盘持续:上述使用都是存储器持续,重新启动服务器后不会继续保存内容,
但是oscache也可被配置为使用硬盘缓存,重新启动服务器继续保存内容。

air_tuyh   2005-05-26 20:48:52 阅读:4382  评论:0  引用:0
〖摘要:〗
sitemesh一个系统,添加到Web应用中并促进模式HTML世界里的应用。
可从http://www.opensymphony.com/sitemesh/ 获得。

sitemesh仅处理html的内容,象图象,PDF文件和下载这样的媒体是被忽略的。

下面我们将用实例来介绍如何分析内容网页和装饰器如何被映射到网页。以及从sitemesh中获取
信息的一些技术。

整个事例用到login.jsp, date.jsp , 索引的index.html
配置文件decorators.xml
装饰文件:window.jsp ,simple.jsp
运用的样式表:style.css


目标是把内容与布局分离,一达到简化布局,以及重用代码的作用。


实质是使用simple.jsp,window.jsp以及提取的longin.jsp,date,jsp的实际主体来构成最终显示
给用户的页面。


布局主体是simple.jsp控制:它控制了网页的整体架构。

<%@ taglib uri=
"sitemesh-decorator" prefix="decorator" %>
<%@ taglib uri=
"sitemesh-page" prefix="page" %>

<html>
<head>
<title><decorator:title/></title>
<link rel=
"stylesheet" href="decorators/style.css">
<decorator:head/>
</head>
<body>

<table width=
"100%">
<tr>
<td class=
"title" colspan="2">
<decorator:title/>
</td>
</tr>
<tr>
<td class=
"body" valign="top">
<decorator:body/>
</td>
<td valign=
"top">

<page:applyDecorator name=
"window" page="date.jsp"/>

<page:applyDecorator name=
"window" title="Disclaimer">
This site is not legally binding in any way. <br>
All rights reserved. Elvis has left the building.
</page:applyDecorator>

</td>
</tr>
<tr>
<td class=
"footer" valign="top" colspan="2">
<b>Title:</b> <decorator:title/> <br>
<b>Author:</b> <decorator:getProperty property=
"meta.author"/> <br>
</td>
</tr>
</table>

</body>
</html>
这个文件将在decorators.xml中被定义,其中给出装饰器的名称,位置,模式匹配。
模式匹配可以使用通配符和正则表达式。在这对于simple.jsp使用了通配符*配置该
装饰器用来匹配Web应用中的所有网页。有关正则表达式的相关内容请参看本博客 http:
//192.168.0.3/blog3/meiking_archive_2005_05_20_18525.html)。

<decorators>

<decorator name=
"simple" page="/decorators/simple.jsp">
<pattern>*</pattern>
</decorator>


</decorators>

上面我们讨论了装饰器设计模式,将装饰器和内容组合,下面我们来看看如何运用组合设计模式

在页面中引用子装饰器 ,子内容。
让我们来看看一个子装饰器window.jsp


<%@ taglib uri=
"sitemesh-decorator" prefix="decorator" %>
<table class=
"window">
<tr>
<th><img src=
"decorators/snazzy.gif"><decorator:title/></th>
</tr>
<tr>
<td>
<decorator:body/>
</td>
</tr>
</table>

在回头看看simple.jsp在其中我们已经包含了window.jsp的运用,我们把他运用到了date.jsp
上,运用样式表date.jsp的主体内容应该会出现在最
继续阅读其余的  4135 字
air_tuyh   2005-05-21 21:50:36 阅读:5280  评论:4  引用:0
body{COLOR: #000033; FONT-FAMILY: 宋体,Verdana, Arial; FONT-SIZE: 9pt;
WORD-SPACING: 12px;text-align:center;
}
img{border:0; height:332;width:98%;margin:2% 4% 0% 4%
}
#logon{border:0; margin:0% 6% 0% 6%
}
#user {border:1px solid; margin:1px 2px 2px 2px; width:80px; height:18px;
font-size:12px; color:gray;
padding:2px; border:1px solid gray;
}
#button{width:30px;height:20px;margin:4% 4% 4% 4%
}
#foot{text-align :center;margin:4% 4% 4% 4%;
}
A:link {
COLOR: #000099; FONT-SIZE: 9pt; TEXT-DECORATION: none
}
A:visited {
COLOR: #000099; FONT-SIZE: 9pt; TEXT-DECORATION: none
}
A:active {
COLOR: #9900ff; FONT-SIZE: 9pt; TEXT-DECORATION: none
}
A:hover {
COLOR: #a7792e; FONT-SIZE: 9pt; TEXT-DECORATION: none
}
air_tuyh   2004-12-26 18:05:32 阅读:1193  评论:3  引用:0

<HTML>
<HEAD>
<TITLE> ip address </TITLE>

<style>
#a3{width:30;border:0;text-align:center}
#b3{border-width:1;border-color:red;border-style:solid;width:165;font-size:9pt;background-color:#FFD700}
</style>
<script>
function mask(obj){
obj.value=obj.value.replace(/[^\d]/g,'')
/*使输入确保式数字*/
key1=event.keyCode
/*获取键盘命令*/
if (key1==37 || key1==39)
{ obj.blur();
nextip=parseInt(obj.name.substr(2,1))
nextip=key1==37?nextip-1:nextip+1;
nextip=nextip>=5?1:nextip
nextip=nextip<=0?4:nextip
eval(
"ip"+nextip+".focus()")
}
if(obj.value.length>=3)
if(parseInt(obj.value)>=256 || parseInt(obj.value)<=0)
{
alert(parseInt(obj.value)+
"IP地址错误!")
obj.value=
""
obj.focus()
return false;
}
else{ obj.blur ();
nextip=parseInt(obj.name.substr(2,1))+1
nextip=nextip>=5?1:nextip
nextip=nextip<=0?4:nextip
eval(
"ip"+nextip+".focus()")
}
}
function mask_c(obj)
{
clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))
}
</script>
</HEAD>

<BODY>
[div id=b3 >
<input type=text name=ip1 maxlength=3 id=a3 onkeyup=
"mask(this)" onbeforepaste=mask_c()>.
<input type=text name=ip2 maxlength=3 id=a3 onkeyup=
"mask(this)" onbeforepaste=mask_c()>.
<input type=text name=ip3 maxlength=3 id=a3 onkeyup=
"mask(this)" onbeforepaste=mask_c()>.
<input type=text name=ip4 maxlength=3 id=a3 onkeyup=
"mask(this)" onbeforepaste=mask_c()>
[/div]
</BODY>
</HTML>


air_tuyh   2004-12-10 20:41:11 阅读:2317  评论:0  引用:0
花了一点时间把javascript的基本语法总结了一下,但是真正想学好javascript,
却是要到应用中去,到各个实际的实例当中去.这份总结只是对一个初学者在看
实例和开始写代码时,对语法点进行快速查询的工具.
学习javascript的实例在网上可以找到很多,模仿的时候要多思考,举一反三,
要在机器上测试代码的功能.


javascript基本语法

一.命名规则:javascript重的变量.常量.对象.函数名字必须以字母或"_"开头,
后面可以是字母,数字或"_"

二.数据值类型
javascript中数据的类型不是固定的,根据表达式的上下文解释器可以动态的处
理数据的实际类型.例如null数据在数值环境下相当于0,undefined数据在逻辑
环境下相当于false[color=maroon]
类型 说明
数 包含整数和浮点数
逻辑值 包括true和false
字符串 例如"hello"
空值 null
未定义 undefined[/color]

三.变量
使用前必须先声明
1.用赋值语句声明
2.用var关键词声明
作用域:函数内声明的是内部变量,函数外是全局变量.<script></script>不影
响全局变量的作用域

四.直接量
解释器当作数据本身的符号组合
1.数组直接量 groupmembers=["流星雨","black-god","idiot","weiking",,,,,]
有八个原属,仅最后一个逗号忽略
2.布尔直接量 true和false
3.浮点数直接量 例如0.7,-1.3,+322.32E-23,.23e-23
4.整数直接量 十进制, 八进制 , 十六进制 例如200,0237,0x32f
5.对象直接量 例如 pc={cpu:"celeron",overclock:true,ram:{size:"64M",type:"pc133"}}
6.字符串直接量 普通字符串和特殊字符串 例如"hello" ,'hello',\b


字符串直接量
符号 含义
\b 退格
\f 换页
\n 换行
\r 回车
\t 制表符
\' 单引号
\" 双引号
\\ 反斜杠
\XXX Latin-1编码的字符,XXX是三位八进制整数
\xXX Latin-1编码的字符,XX是两位十六进制整数
\uXXXX Unicode字符,XXXX是个四位十六进制整数



五,操作符
按照优先次序从低到高

,
= += -= *= /= %= <<= >>= >>>= &= ^= |=
?=
||
&&
|
^
&
== !=
<<= >>= in instandceof
<< >> >>>
+ -
* / %
! ~ - + -- typeof void delete
()
new
.[]


六.语句
1.while语句
2.break和continue语句 (1.2两条基本同c语言)
3.标记语句
<标记名>:<语句>
应用:break<标记名>;
continue<标记名>;

4.for...in对BR> <语句块>
}
例如:myfood={name:"rice",price:1.2,weight:0.5,warm:true,};
var list="myfood="
for(var i in myfood){
list+=i;
list+=":";
list+=myfoon;
list+=",";
}


5.with对象操作语句
with(<对象名>){
< 语句块>
}
例如:myfood={name:"rice",price:1.2,weight:0.5,warm:true,};
var can_afford,enough;
with(myfood){
if(price<2.0) can_afford=true;
if(weight>0.5)enough=true;
}



6.throw异常处理语句
throw<异常值>;

7.try...catch...finally异常处理语句
try{
<try语句块>
}catch(<异常值>){
<catch语句块>
}finally{
<finally语句块>
}

七.函数
1.函数定义
function<函数名>(<参数表>){
<语句块>
return<返回值>;
}
2.函数调用
<函数名>(<参数表>)
注:参数表是以数组对象方式传递的,这个数组对象的名称是arguments,可以在
函数中直接引用arguments数组成原来获取参数,例如arguments[arguments.length-1]
,arguments[0]

3.javascript的内建函数(在这只是列举出来,具体有关函数的说明,还要读者
自己在用中体会)
eval(<字符串>)
isFinite(<数值>)
isNaN(<值>)
parseFloat(<字符串>)
parseInt(<字符串>,<基数>)
Number(<对象>)
String(<对象>)
escape(<字符串>)
unescape(<字符串>)

4.对象
对象包含由变量构成的"属性",可包含其它对象,可与函数相关联构成"方法"
javascript本身提供了一些核心对象,自己还可以在脚本中定义新的对象.

5.对象定义和创建实例
1.<对象实例名>={<属性名1>:<属性值1>,...,<属性名n>:<属性值n>}
2.function<对象名>(<初始化参数表>){
this.<属性名1>=<属性值1>;
.......
this.<方法名1>=<方法函数1>;
.......
}
<对象名>.prototype=<对象原型名>;//确定新对象所要继承的对象
无须继承可以不要这步
<对象实例名>=new<对象名>;


6.使用对象的属性和方法
<对象名>.<属性名>
<对象名>.<方法名>(<参数表>)
<对象名>.["<属性名>"] //把对象看做是关联组

7.this的用法
代表当前的对象,在构造函数和方法函数中必须用this来引用当前对象实例
因为并非只有一个对象实例回访问这些函数

8.删除一个对象实例
delete<对象实例名>;

八.正则表达式
1.创建正则表达式方法.一直接初始化
二用new操作符建立新对象
例如 rel=/avc+/
re2=new RegExp("abc+")
使用构造函数的好处是可以在运行时编译正则表达式的内容,因此可以处理变化
的模式或者再运行中获得所需的模式 //这句话,我也没理解是什么意思
2.使用正则表达式的函数
exec
test
match
replace
split


备注:该基本语法总结 未写明正则表达式中的特殊字符表 未给出使用正则字符函数
的具体说明以及javascript内建函数说明.
air_tuyh   2004-11-26 21:47:25 阅读:3256  评论:0  引用:0
javascript是页面设计不可少的工具之一
它是面向对象的语言,知识点相对于java而言少的多,是个很灵活的语言.
而且对于已经学习了c语言的同学而言,是很容易掌握的.
对于想初步了解面向对象语言,是个不错的学前进修.
我也是刚开始学习它.不知道大家对它有什么看法.

air_tuyh   2004-11-25 19:27:57 阅读:1190  评论:0  引用:0
css和html学习
1.熟悉css和html代码的基本语法
大略的扫一遍,努力记住.(当然记不住也不要紧哦 ,毕竟是第一次嘛.不要为了记
住而花第二遍的时间,这样是可以,但是效率不高,得不偿失.)

2.找个非常简单而且结构清晰的网页,努力把它的结构看明白.测试(可以用dreamweaver)
它其中每一句代码的功能,直到都明白.(当然不是很明白也不要紧我们还有下面,下面会
帮助你更快更好的了解这个网页)

3.拿出你看的css和html代码的基本语法,利用工具(例如dreamweaver)在上述简单
的网页中一个一个的测试.(这一步是学习的关键,务必要每个知识点都明白)

4.找个复杂的但是结构清晰的网页,模仿她,在不看代码的情况下,把它作出来.
(第三步到第四步是个质的飞跃,如果你模仿的一模一样,祝贺你
你已经是个小高手了,接下来就只是熟练的问题了)

5.学了这么多当然是要做自己的网页了,这一步才是开始自己的创作.(到这一步
就不单纯是学习html和css的问题了.更多的和美学还有其它方面的知识挂钩了.

6.矣?你说还是不会,建议你适合你的学习方向.

注意:学习的关键就是不断的测试 ,测试再测试
air_tuyh   2004-11-20 21:36:56 阅读:1773  评论:1  引用:0
Copyright@2006 powered by YuLog