一个Web开发的客户端基础技术测试Demo

新近插手了一个Web开发的客户端基础技术测试,即便对于做前台开发的程序员来说相比简单,但对此一向做后台代码编写的程序员想控制前台开发的功底的话,应该是一个相比较好的Demo。对于Web初学者的话,也是一个包括相比全的示范。

没有复杂的说理、公式和测算,却有这几个出手实践的内容

先看看实际要求,这里直接把测试要求发了上去。需要留意的是,无法应用Dreamware或者Visual
Studio智能工具,最好使用记事本纯手工编制,最多接纳EditPlus帮助一下。

从没始终地学术性阐述,却富含完整的连串实战

图片 1图片 2WEB开发的客户端基础技术测试要求
WEB开发的客户端基础技术测试

用朴实的语言和不长的篇幅,讲述了SOA精华的始末和实用的学识

文化技能重要涉及:HTML[50分] , CSS[20分] , JAVASCRIPT[30分]
*************************************************************************
请纯手工编写一个HTML页面,
心想事成会员注册材料填写的界面,
并用CSS控制其页面元素的外观,
动用JavaScript在表单提交前开展表单数据有效性验证.
*************************************************************************

带有了Axis2、Tuscany Java SCA、OSWorkflow、Apache ODE等开发工具

切实要求如下:
页面文件名:UserReg.htm

讲解了Web
Service、RMI、Spring集成、WS-BPEL、工作流技术、基于SOA的系列融为一体平台等技术内容

[HTML:5分]
凡事页面或页面局部使用表格举行布局

附书光盘中还有所有章节及项目案例的完全源代码

[HTML:30分]
对登记表单的要求:

挂号项目        表单元素            有效性要求

互联网给我们的IT技术和动用带来了太多、太快、太新的文化名词和天地。近来,SOA被学界、工程界、媒体炒得沸沸扬扬。不过似乎浪潮还没完,紧接着云总括、物联网这多少个新的名词又接踵而至,那多少个新的名词似乎又都和SOA有着复杂的涉及。是的,SOA不是一种纯粹的技能,而是一种面向服务的架构方法,更偏重于思考和艺术的拔取。

用户名        文本框            非空,不少于八位字符
密码        密码框            非空,不少于八位字符,不得为纯数字字符
确认密码        密码框        与密码一致
性别        单选按钮[一组多个]        必须挑选其中之一
婚否        复选框            无
年龄        列表框            必须提供
职业        可多选的列表框        无
照片        文件接纳上传按钮        相片文件必须是JPG图片*.jpg
天性签名    多创作本框        不超越200个字符

本书特点

职业列表框中的选项请自行设计,但起码提供五项.

近来,市面上有关SOA的书籍已有一对,大多令人看了如同知道了定义却又不能入手,浅显易懂、适合国人口味、又实战性强的可谓凤毛麟角。基于那种情况,我和本人所在的集团在转业科研和档次开支的底蕴上,想付出出一本上手较快、实战性强的关于SOA的书本。由此全书:

[HTML:10分]
表单内应当提供 
[确认登记]付给按钮 
[再次填写]重置按钮 
[闭馆窗口]命令按钮

一贯不复杂的驳斥、公式和测算,却有过多出手实践的内容;

[HTML:5分]
表单之外,放置一个超链接,文本为 登录 ,指向UserLogin.htm页面.
另一超链接,文本为 重临首页 ,指向Index.htm页面

尚未始终的学术性讲演,却包含完整的档次实战;

CSS样式应用的渴求:

用扎扎实实的言语和不长的字数,讲述了SOA精华的内容和实用的学问。

[CSS:5分]
为持有文件输入的表单元素[含文本框,密码框,多行文本框]概念一个 类拔取器 ,并应用.
渴求:边框为1像素的黑色细线边框,文本颜色为紫色.

由衷希望本书能够对常见IT界的仇人们有着襄助。

[CSS:5分]
为拥有的按钮[含提交,重置和指令按钮]概念一个 类选用器 ,并应用.
务求:边框为1像素的褐色细线边框,文本颜色为白色,文本加粗,背景颜色为#abcdef.

我和我所在的团协会如今承担了成千上万有关SOA的体系,如河北省“十一五”重点科技计划项目“基于SOA-BPM组合架构的智能敏捷的第三方物流管理音讯技术研究”,“创设业物流数据交换平台的研商与落实”,“一种物流音信序列融为一体中间件LESB的钻研与贯彻”等纵向课题;也有许多用到了SOA架构的横向课题,如四川省物流公共信息平台有限集团的要紧产学研专项江西省物流公共新闻平台(http://www.hnwlw.net)。在多年的研究与开发过程中,形成了一支研发团队,也积累了一定的成果。

[CSS:5分]
使用HTML标记接纳器以及锚伪类采用器,对页面内所有的超链接举办外观控制.
要求 :
超链接的文字字号为14px
仅在鼠标悬停状态时才有下划线,此外情况时从没下划线.
访问过的超链接有灰色边框.

本书内容

[CSS:5分]
适龄采纳样式表,对全部页面,表格及里面的行,单元格举行外观控制.
页面的普通文字大小为14px,字体为甲骨文
挂号体系提醒的文字字号为16px加粗体现,表单元素有效性验证的指示文本字号12px倾斜展现,
且为藏蓝色.

全书内容共分为8章。第1章表达了SOA的着力概念,并主讲了什么样准备好开发工具;第2章通过实例体验了Tuscany研发的计划思想,并逐渐落实这些思想;第3章介绍了Web
Service模型、角色与操作这一个基本的概念,以及怎么着使用Axis2和Tuscany Java
SCA来支付Web Service(Service)。

JAVASCRIPT应用的要求:

第4章要精晓SCA节点、SCA域、资源包等基本概念,并学会开发分布式应用;第5章则要知道Tuscany
Java
SCA与Spring是何等促成合并的;第6章要了解WS-BPEL的基本概念,以及如何来利用WS-BPEL定义业务流程,学会使用Apache
ODE引擎来推行WS-BPEL流程。第7章学习了工作流技术的基本概念,并详尽介绍了一种开源的工作流软件OSWorkflow。

[JAVASCRIPT:10分]
年纪列表框中的选项包含从18岁到60岁的年龄,使用脚本动态生成.

第8章则详细介绍了依照SOA的体系融为一体平台的设计与落实,剖析了阳台实现的关键技术、报文数据互换的思想,以及安排管理体系的落实,接收和中转报文的实现,任务队列调度的法子,并在光盘中付出了这一个平台的一切源代码。

其中
[JAVASCRIPT:15分]
交给按钮被点击后,举办表单数据有效性验证,
比方可行规则验证通过,则表单以POST模式提交到DoReg.htm页面;
一经有一项或多项规则未通过,则运用对话框警告用户,并阻碍提交.

在本书的编撰过程中,我拿到了自我所在集体成员们的用力支援。文振华助教、王如龙助教、黄友森助教举行了一心指引;潘果、杨立雄、杨晓峰、罗铁清、唐爱国、孙美清、西米莎、王莹、伍江杭、杨烺、张益林、黄婧等帮衬打点了有些材料或参预了项目标实战开发;还有电子工业出版社的孙学瑛先生无微不至的问世服务工作,在此一并表示感谢。

重置按钮被点击后 ,表单数据应该复苏到开头状态.

本书可用作总计机或看似专业高年级本科生、硕士的SOA课程教材或教材参考书,也可作为软件研发人士的支动手册、培训教材,适合有早晚Java开发基础的读者阅读。

[JAVASCRIPT:5分]
关门按钮被点击后,页面所在的浏览器窗口应关闭.

由于岁月仓促,加之作者水平有限,存在不当和不足在所难免,还请广大读者原谅。如有问题和思辨需要交换,欢迎您和我们交换,我的牵连邮箱是dengziyun@126.com。也热情欢迎有志之士前来参预我们的研发团队。

其它的渴求:
[5分]
设若代码格式突出,命名规范,有适度的讲明,则额外加5分.

邓子云

下边是自己所形成的一个效益:
图片 3

二〇一〇年一月于星城马赛

下边是自身的落实代码:

 

图片 4<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
图片 5<HTML>
图片 6<HEAD>
图片 7<TITLE> 用户注册 </TITLE>
图片 8<META http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
图片 9<META NAME=”Author” CONTENT=””>
图片 10<META NAME=”Keywords” CONTENT=””>
图片 11<META NAME=”Description” CONTENT=””>
图片 12
图片 13<!– <LINK rel=”stylesheet” type=”text/css” href=”style/style.css”> –>
图片 14图片 15<style type=”text/css”>图片 16   /**//*  CSS 的设置  */
图片 17图片 18 /**//*  input 的设置  */
图片 19图片 20.myText{图片 21}{ border-width:1px; border-color:green; color:blue}
图片 22图片 23 /**//*  input 的 Button 设置  */
图片 24图片 25.myButton{图片 26}{ border-width:1px; border-color:blue; color:white; font-weight:bold; background-color:”#abcdef” }
图片 27图片 28 /**//*  表格的题目 Caption 设置  */
图片 29图片 30.myCaption{图片 31}{ font-size:25px; font-family:”宋体”; font-weight:bold; }
图片 32图片 33 /**//*  Table 的设置  */
图片 34图片 35.myTable{图片 36}{ font-size:14px; font-family:”宋体”; border-style:double; border-width:4px; border-color:black;}
图片 37图片 38 /**//* 标题文本的设置  */
图片 39图片 40.myTitle{图片 41}{ font-size:16px; font-weight:bolder;background-color=”#fedcba” }
图片 42图片 43 /**//* 指示文本的安装  */
图片 44图片 45.myReg{图片 46}{ font-size:12px; font-style:italic; color:red;}
图片 47图片 48 /**//* HTML标识的装置  */
图片 49图片 50a{图片 51}{ font-size:14px; text-decoration:underline;}
图片 52图片 53 /**//* 锚伪类的安装  */
图片 54图片 55a:link{图片 56}{text-decoration:none;}  /**//* 去掉下划线  -普通状态,没有此外操作- */
图片 57图片 58a:visited{图片 59}{border:1px solid #999999;}  /**//* border相关的3个属性的装置  -使用后的图景- */
图片 60图片 61a:hover{图片 62}{}   /**//*  -鼠标悬停状态- */
图片 63图片 64a:active{图片 65}{border-color:gray;}   /**//*  -鼠标点击后的情形- */
图片 66
图片 67</style>
图片 68
图片 69<!– <script src=”test.js” ></script> –>
图片 70图片 71<script language=”JavaScript”>图片 72   /**//*  JavaScript 的设置  */
图片 73 function myRusult()
图片 74图片 75 图片 76{
图片 77
图片 78    // 判断用户名的格式 
图片 79    var user = document.getElementById(“userName”).value; // 依照 ID 获取文本  innerText
图片 80    //var user = document.form.userName.value;            // 依据 name 获取文本
图片 81    if( user.length < 8 )
图片 82图片 83    图片 84{
图片 85       window.alert(“用户名长度小于8位!”);
图片 86       return false;
图片 87    }
图片 88
图片 89    // 判断密码的格式 
图片 90    var psw = document.form.passWord.value;
图片 91    if( psw.length < 8 || isNaN(psw)==false )
图片 92图片 93    图片 94{
图片 95        window.alert(“密码长度无法小于8位,并且不可以全体为数字!”);
图片 96       return false;
图片 97    }
图片 98
图片 99    // 判断重复密码的格式 
图片 100    var repsw = document.form.repassword.value;
图片 101    if( repsw != psw)
图片 102图片 103    图片 104{
图片 105       window.alert(“密码不等同!”);
图片 106       return false;
图片 107    } 
图片 108
图片 109    // 判断性其它格式 
图片 110     var subject = “”;
图片 111    for( var i=0; i<document.form.sex.length; i++)
图片 112图片 113    图片 114{
图片 115        if(document.form.sex[i].checked)
图片 116图片 117        图片 118{
图片 119            subject = document.form.sex[i].value;
图片 120            break;
图片 121        }  
图片 122    }
图片 123    if( subject == “”)
图片 124图片 125    图片 126{
图片 127       window.alert(“请接纳性别!”);
图片 128       return false;
图片 129    }
图片 130
图片 131    // 判断年龄的格式
图片 132    var index = document.form.age.selectedIndex;
图片 133    var uage = document.form.age.options[index].value;
图片 134    if( uage == “”)
图片 135图片 136    图片 137{
图片 138        window.alert(“请接纳年龄!”);
图片 139        return false;
图片 140    }
图片 141
图片 142    // 职业的选项充分
图片 143    var jobs = “”;
图片 144    for(var i=0;i<document.form.selectJob.options.length;i++)
图片 145图片 146    图片 147{
图片 148        if(document.form.selectJob.options[i].selected ==true)
图片 149图片 150        图片 151{
图片 152            jobs += document.form.selectJob.options[i].text; //text    取出其文件,也可以取value
图片 153        }
图片 154    }
图片 155    if(jobs == “”)
图片 156图片 157    图片 158{
图片 159        window.alert(“请选取工作!”);
图片 160          return false;
图片 161    }
图片 162
图片 163    // 判断是否上传的是*.jpg的图片
图片 164    var myFile = document.form.File.value;
图片 165    var str = myFile.substr( myFile.lastIndexOf(“.”) + 1);
图片 166    if( str.toLowerCase() != “jpg” )
图片 167图片 168    图片 169{
图片 170        window.alert(“上传的公文必需是*.jpg的文件!”);
图片 171        document.form.File.focus();
图片 172        return false;
图片 173    }
图片 174
图片 175    // 判断个性签名是否在500个字符内
图片 176    var myTextarea = document.form.qianming.value;
图片 177    if(myTextarea.length > 200)
图片 178图片 179    图片 180{
图片 181        window.alert(“个性签名无法超过200个字符!”);
图片 182        document.form.qianming.focus();
图片 183        return false;
图片 184    }
图片 185
图片 186    return true;
图片 187 }
图片 188
图片 189 function myClose()
图片 190图片 191 图片 192{
图片 193    if(confirm(“是否关闭窗口?”))
图片 194图片 195    图片 196{
图片 197       window.opener = null;
图片 198       window.close();
图片 199    }
图片 200 }
图片 201</script>
图片 202</HEAD>
图片 203
图片 204<BODY>
图片 205<p align=”center”>
图片 206<a href=”Index.htm”>重临首页</a>
图片 207<a href=”UserLogin.htm”>登录</a>
图片 208</p>
图片 209<form  method=”post” name=”form” onSubmit=”return myRusult();” action=”DoReg.htm”>
图片 210<Table border=”1px” cellspacing=”0″ align=”center” class=”myTable”>
图片 211  <caption align=”top” class=”myCaption”>填写会员注册材料</caption>
图片 212
图片 213  <tr>
图片 214      <!– HTML中的颜色设置 bgcolor=”#CBCBCB” –>
图片 215      <td class=”myTitle”>用户名:</td>
图片 216      <td><input type=”text” name=”userName” id=”userName” value=”” class=”myText”></input></td>
图片 217      <td class=”myReg”>非空,不少于八位字符</td>
图片 218  </tr>
图片 219
图片 220  <tr>
图片 221
图片 222      <td class=”myTitle” >密码:</td>
图片 223      <td><input type=”password” name=”passWord” value=”” class=”myText”></td>
图片 224      <td class=”myReg”>非空,不少于八位字符,不得为纯数字字符</td>
图片 225  </tr>
图片 226
图片 227  <tr>
图片 228      <td class=”myTitle”>确认密码:</td>
图片 229      <td><input type=”password” name=”repassword” value=”” class=”myText”></td>
图片 230      <td class=”myReg”>与密码一致</td>
图片 231  </tr>
图片 232
图片 233  <tr>
图片 234      <td class=”myTitle”>性别:</td>
图片 235      <td><input type=”radio” name=”sex” value=”man” >男
图片 236          <input type=”radio” name=”sex” value=”woman” >女
图片 237      </td>
图片 238      <td class=”myReg”>必须拔取其中之一</td>
图片 239  </tr>
图片 240
图片 241  <tr>
图片 242      <td class=”myTitle”>婚否:</td>
图片 243      <td><input type=”checkbox” name=”hun” value=”hun”></td>
图片 244      <td>&nbsp</td>
图片 245  </tr>
图片 246
图片 247  <tr>
图片 248      <td class=”myTitle”>年龄:</td>
图片 249      <td><select name=”age”>
图片 250            <option value=””>  ——-  </option>
图片 251图片 252            <script>图片 253
图片 254                for(var i=18;i<61;i++)
图片 255图片 256                图片 257{
图片 258                   document.write(“<option value='”+ i +”‘>”+ i +”岁</option>”);
图片 259                }
图片 260            </script>
图片 261          </select>
图片 262      </td>
图片 263      <td class=”myReg”>必须提供</td>
图片 264  </tr>
图片 265
图片 266  <tr>
图片 267      <td class=”myTitle”>职业:</td>
图片 268      <td>
图片 269          <select name=”selectJob” value=”selectJob” multiple=”true” >
图片 270              <option >人事管理</option>
图片 271              <option >电脑相关</option>
图片 272              <option >金融相关</option>
图片 273                 <option >物流管理</option>
图片 274              <option >教育事业</option>
图片 275          </select>
图片 276      </td>
图片 277      <td>&nbsp</td>
图片 278  </tr>
图片 279
图片 280  <tr>
图片 281      <td class=”myTitle”>相片:</td>
图片 282      <td><INPUT type=”file” name=”File” id=”File” class=”myText”>
图片 283          </td>
图片 284      <td class=”myReg”>相片文件必须是JPG图片*.jpg</td>
图片 285  </tr>
图片 286
图片 287  <tr>
图片 288      <td class=”myTitle”>个性签名:</td>
图片 289      <td>
图片 290           <textarea name=”qianming” cols=”20″ rows=”5″ class=”myText”></textarea>
图片 291      </td>
图片 292      <td class=”myReg”>不超过200个字符</td>
图片 293  </tr>
图片 294
图片 295  <tr>
图片 296      <td class=”myTitle”>&nbsp</td>
图片 297      <td> 
图片 298          <input type=”submit” name=”submit” value=”确认登记” class=”myButton”></input>
图片 299          <input type=”reset”  name=”reset” value=”重新填写” class=”myButton”></input>
图片 300          <input type=”button”  name=”btnClose” value=”关闭窗口” class=”myButton” onclick=”myClose();” href=””></input>
图片 301      </td>
图片 302      <td>&nbsp</td>
图片 303  </tr>
图片 304</Table>
图片 305<form>
图片 306</BODY>
图片 307</HTML>

图片 308

有关认证:

书名:SOA实践者说:分布式环境下的体系融为一体

为了简单起见,我将Javascript
和CSS
都合并到HTML
当中来了。在其实的支付中,提出依旧将她们各自用单独的文书存放,再在HTML
中引用进来。

作者:邓子云

CSS
的外表引用:
在HTML的<head>中添加<link
rel=”stylesheet” type=”text/css” href=”style.css”>,然后把CSS
写在style.css文件中即可。

ISBN 978-7-121-11954-5

Javascript
的外表引用:
在HTML的<head>中添加<script
type=”text/javascript” src=”Queue.js”></script>,然后把Javascript
写在Queue.js文件中即可。

出版日期:二〇一〇年1二月

*也足以动态加载JS脚本(参考):*
动态加载JS脚本的4种方法
怎么在HTML文件中科学的引用js文件中的函数

定价:49.00元(含光盘1张)

此外,为了阅读的福利,我在代码中添加了不少的诠释。关于注释,在HTML、Javascript
和CSS
中都具有出入:

开本:16开

       
HTML
中使用:
<!– HTML的注释
–>

页码:340

Javascript
中使用: /* 
JavaScript的注释 
*/  和   //
JavaScript的注释

作者简介

          
CSS
中使用: /* 
CSS的注释 
*/

邓子云,副助教、高级工程师、系统分析师、项目管理师、高级程序员、高级项目首席营业官。曾任马赛银行高级项目首席执行官,希赛音讯技术有限公司副总总裁,现湖北现代物流职业技术大学物流新闻系系老总、甘肃省物流公共消息平台有限公司副总总裁、湖北省湘物联物流咨询有限集团副总经理。曾获陕西省教学名师、浙江省青年骨干讲师等荣誉称号。

(
关于HTML、Javascript
和CSS
的注明是自身在采取后的下结论,错漏之处还请斧正!)

掌管了山东省着重产学研项目“陕西省物流公共音讯平台一期工程”的建设,主持了“创建业物流数据交流平台的探究与贯彻”、“一种物流音信序列融为一体中间件LESB的研商与落实”等省部级十一五科技攻关课题3项,“布里Stowe银行小额支付系列”、“台中银行财库行横向联网系统”等横向课题10余项,著有专著4本,主编10本,发布有学术小说40余篇,所刊载的创作与舆论累计达550万字,作品发行量超越10万册,得到省部级奖励多次,致力于J2EE开发技术及物流信息化方面的研讨。

演示下载

悠长活跃在软件系统研发和商家信息化咨询一线,积累了丰裕的科研与工程实践经验,具有独到的讲课风格。

本书用踏实的言语和不长的字数,讲述了SOA的精髓内容和实用的文化,带有很强的实战性,并有全体的品种实战。全书内容共分为8章,涵盖了Axis2、Tuscany
Java SCA、OSWorkflow、Apache ODE等开发工具,讲解了Web
Service(Service)、RMI、Spring集成、WS-BPEL、工作流技术、基于SOA的连串融为一体平台等技能内容,附书光盘中还有所有章节及项目案例的完全源代码。

本书可看做总括机或接近专业高年级本科生、大学生的SOA课程教材或教材参考书,也可视作软件研发人士的支付手册、培训教材,适合有自然Java开发基础的读者读书。

Leave a Comment.