jsp 前台知识总结

一、总的来说这个阶段主要学习了一下这些方面的知识

(1)对已经掌握了的HTML进一步熟悉和细化

(2)以前不大熟悉的CSS有个更进一层的认识的掌握

(3)在VBscript的基础上全面学习了javascript,脚本语言块可以说基本的都应该能做的出来。

(4)前期也对java中的TCP协议和UDP协议系统的学习了一遍,也就是SOCKET编程一块的掌握了一些...

哎..一个月结束了才学了这么点东西 ,太慢了。

二、接下来我想对Serverlet服务器端的编程技术了解一点...

前期的例子总结:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>学生信息>>录入</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="top">
  <div id="topleft"><img src="images/log.jpg" /></div>
  <div id="topright"> <a href="#" >录入信息首页</a><span class="body1"> |</span> <a href="#"> 兰州城市学院</a></div>
</div>
<div id="daohang">
  <ul>
    <li><a href="#">学生信息注册</a></li>
    <li><a href="#">老师信息注册</a></li>
  </ul>
</div>
<form id="student" action="" method="get" οnsubmit="check(this);return false" >
  <div class="fordiv">
    <div class="head">个人信息:</div>
    <div class="fenge"></div>
    <div class="biaodan">
      <div id="xinxi">
        <p><span class="spanf">学号:</span>
          <input type="text" size="40" name="stu_num" οnkeydοwn="toNext1(this.form);" />
          <span id="span1" >*必填</span> </p>
        <p><span class="spanf">身份证号:</span>
          <input type="text" size="40" name="stu_ID" οnkeydοwn="toNext(this.form)" />
        </p>
        <p><span class="spanf">姓名:</span>
          <input type="text" size="20" name="stu_name" οnkeydοwn="toNext2(this.form)" />
          <span id="span2" >*必填</span> </p>
        <p><span class="spanf">性别:</span>
          <input type="radio" name="stu_sex" id="nan" style="border-color:#FFFFFF;" checked="checked"  οnkeydοwn="toNext(this.form)"/>
          男
          <input type="radio" name="stu_sex"  id="nv"  style="border-color:#FFFFFF;" οnkeydοwn="toNext(this.form)"/>
          女</p>
        <p><span class="spanf">出生年月:</span>
          <select id="year" size="1"οnkeydοwn="toNext(this.form)" >
          </select>
          &nbsp;年&nbsp;&nbsp;
          <select id="month" size="1"οnkeydοwn="toNext(this.form)" >
          </select>
          &nbsp;月&nbsp;&nbsp;
          <select id="day" size="1"οnkeydοwn="toNext(this.form)" >
          </select>
          &nbsp;日&nbsp;&nbsp;</p>
        <p><span class="spanf">所在院系:</span>
          <select id="engine" size="1" οnblur="ch_dp(this.form)">
          </select>
          &nbsp;院&nbsp;&nbsp;
          <select id="department" size="1"οnkeydοwn="toNext(this.form)"  >
          </select>
          &nbsp;系&nbsp;&nbsp;
          <select id="direction" size="1" οnkeydοwn="toNext(this.form)">
          </select>
          &nbsp;方向&nbsp;&nbsp;</p>
        <p><span class="spanf">所在宿舍:</span>
          <select id="lou" size="1" οnkeydοwn="toNext(this.form)" >
          </select>
          &nbsp;楼&nbsp;&nbsp;
          <select id="sushe" size="1" οnkeydοwn="toNext(this.form)">
          </select>
          &nbsp;号&nbsp;&nbsp;
          <select id="xiaosushe" size="1" οnkeydοwn="toNext(this.form)" >
          </select>
          &nbsp;室&nbsp;&nbsp;</p>
        <p><span class="spanf">毕业院校:</span>
          <input type="text" size="40" name="from_school" οnkeydοwn="toNext3(this.form)" />
          <span id=span3 >*必填</span> </p>
        <p><span class="spanf">手机:</span>
          <input type="text" size="12" name="ph_num" οnkeydοwn="toNext(this.form)" />
          &nbsp;&nbsp;座机:
          <input type="text" size="13" name="tel_num" οnkeydοwn="toNext4(this.form)" />
          <span id="span4" >*必填一个</span> </p>
      </div>
      <div id="zhaopian" ><img src="#" name="image" id=images /><br />
        <br />
        <br />
        <input name="file" type="file" size="30" maxlength="32" style="margin-left:50px;" οnkeydοwn="toNext(this.form)" οnblur="setSrc(this.form)"  />
      </div>
    </div>
  </div>
  <div class="fordiv">
    <div class="head">家庭信息:</div>
    <div class="fenge"></div>
    <div class="biaodan">
      <p><span class="spanf">家长姓名:</span>
        <input type="text" size="20" name="fam_name"  οnkeydοwn="toNext5(this.form)"/>
        &nbsp;&nbsp;称呼
        <select name="chenghu" οnkeydοwn="toNext(this.form)">
          <option selected="selected">父亲</option>
          <option >母亲</option>
        </select>
        <span id="span5" >*必填</span> </p>
      <p><span class="spanf">家庭住址:</span>
        <input type="text" size="40" name="fam_sta" οnkeydοwn="toNext6(this.form)" />
        <span id="span6" >*必填</span> </p>
      <p><span class="spanf">手机:</span>
        <input type="text" size="12" name="fmph_num"  οnkeydοwn="toNext(this.form)"/>
        &nbsp;&nbsp;座机:
        <input type="text" size="13" name="fmtel_num" οnkeydοwn="toNext7(this.form)" />
        <span id="span7" >*必填一个</span> </p>
      <p><span class="spanf">备注:</span>
        <textarea name="beizhu" cols="40" rows="7" οnkeydοwn="toNext(this.form)"></textarea>
      </p>
    </div>
  </div>
  <div class="fordiv">
    <div class="head">确认提交:</div>
    <div class="fenge"></div>
    <div class="biaodan" align="center" style="padding-bottom:30px;">
      <input type="submit" value="确 认 并 提 交" />
      &nbsp;&nbsp;
      <input type="reset" value="重新填写" name="chongtian"  />
    </div>
  </div>
</form>
<div id="foot">
 <div id="footright" style="float:left; width:60%; height:30px; padding-top:1px; padding-left:10%;"><p>Copyright@ 1998-2010 Tencent Inc. All Rights Reserved</p>
 </div>
 <div id="footleft" style="float:left; width:29%; height:30px; padding-top:1px; padding-left:0px;"><p>蔡晓龙 版权所有</p>
 </div>
</div>
<script language="javascript" src="stu_info.js">
</script>
</body>
</html>
其中的style.css文件内容

/* CSS Document */
a:link {
 color: #0b6ac8;
 text-decoration: none;
}
a:visited {
 text-decoration: none;
 color: #0b6ac8;
}
a:hover {
 text-decoration: none;
 color: #0b6ac8;
 font-size:13px;
}
a:active {
 text-decoration: none;
 color: #0b6ac8;
}
a {
 font-size: 12px;
}
.body1 {
 color: #666666;
 font-size: 12px;
}
span{
 color: #CCCCCC;
 margin-left:5px;
 }
body
{  margin-top:0px;
    margin-left:0px;
}
#top{
 width:100%;
 height:85px;
 padding-bottom:0px;
 padding-top:0px;
 padding-left:0px;
 padding-right:0px;
 /*border:#CCCCCC thin dashed;*/
 }
#topleft
{   width:29%;
 height:60px;
 float:left;  
 background-repeat:no-repeat;
 padding-left:20%;
 /*border:#CCCCCC thin dashed;*/
}
#topright{
 width:34%;
 height:60px;
 float:right;
 padding-left:15%;
 padding-right:0px;
 padding-bottom:2px;
 /*border:#CCCCCC thin dashed;*/
 }
#daohang{
 background-image:url(images/header-bg.gif);
 background-repeat:repeat-x;
 width:60%;
 height:35px;
 padding-top:0px;
 padding-right: 20%;
 padding-bottom: 0px;
 padding-left: 20%;
 float:left;
 /*border:#CCCCCC thin dashed;*/
 }
#daohang li{
 float:left;
 list-style-type:none;
 }
#daohang li a{
 text-decoration:none;
 font-weight:600;
 font-size:12px;
 padding-top:4px;
 /*margin-top:6%;
 margin-top:7px;
 line-height:24px;*/
 display:block;
 width:110px;
 
 text-align:center;
 background-color:#f2fbff;
 margin-left:3px;
 }
#daohang li a:hover{
 background-color:#b9e2fe;
 
 font-size:13px;
 color:#0b6ac8;
}
#foot{
 width:100%;
 height:40px;
 border-top: #8297a6 thin solid;
 background-color:#f6fbff;
 float:left;
}
#foot p{
 font-size:12px;
 font-weight:600;
 color:#666666;
 font-family:"Courier New", Courier, monospace;
 }
.fordiv{
 width:70%;
 padding-left:15%;
 padding-right:15%;
 padding-top:20px;
 float:left;
 }
.head{
 padding-left:20px;
 font-size:14px;
 color: #666666;
 
 }
.fenge{
 width:100%;
 height:15px;
 background-image:url(images/fenge.jpg);
 background-repeat:repeat-x;
 }
.biaodan{
 padding-left:90px;
 padding-right:0px;
 padding-top:15px;
 font-size:12px;
 font-family:"宋体";
 }
#xinxi{
 float:left;

 }
#zhaopian{
 float:left;
 
 }
#zhaopian img{
 width:180px;
 height:200px;
 margin-top:20px;
 margin-left:80px;
 border:#999999 1px solid ;
  }
.biaodan .spanf{
 display:block;
 text-align:right;
 width:100px;
 height:23px;
 float:left;
 margin-right:10px;
 margin-top:3px;
 color:#000000;
 letter-spacing:3px;
 
 }
.biaodan input{
 border: #7f9cba 1px solid;
 color: #333333;
 font-weight:600;
 font-family:Arial, Helvetica, sans-serif;
 }
.biaodan select{
 width:70px;
 border: #7f9cba 1px solid;
 color: #333333;
 font-weight:500;
 font-family:Arial, Helvetica, sans-serif;
 }
.biaodan textarea{
 border: #7f9cba 1px solid;
 color: #333333;
 font-weight:600;
 font-family:Arial, Helvetica, sans-serif;
 }

还有stu_info.js文件的内容

//添加年
var yuanxi=[["信息工程学院","数学学院","化学学院","文学院","体育学院"],[["计算机科学与技术"],["计算机外包"],["计算机网络"],["计算机教育"]],[["数学学院1"],["数学院2"]],[["环学院1"],["环学院2"]],[["文学院1"],["文学院2"]],[["体育学院1"],["体育学院2"]]];
//alert(yuanxi[0][4]);
//添加学院
for(var i=0;i<yuanxi[0].length;i++)
{
 var option1=document.createElement("OPTION");
 option1.text=yuanxi[0][i];
 option1.value=yuanxi[0][i];
 document.getElementById("engine").add(option1);
 }
//添加系别
var j=0;
function ch_dp(frm)
{
 j=0;
 var temp=frm.engine.value;
 for(var i=0;i<yuanxi[0].length;i++)
 {
  if(temp.match(yuanxi[0][i]))
  {
   j=i;
    for(var k=0;k<frm.department.options.length;k++)
     {
      frm.department.removeChild(frm.department.options[k]);
     }
    var temp1=yuanxi[j+1].length;
    for(var i=0;i<temp1;i++)
     {
      var option1=document.createElement("OPTION");
      option1.text=yuanxi[j+1][i];
      option1.value=yuanxi[j+1][i];
      frm.department.add(option1);
     }
  }
 }
 //清空options项
 
}
for(var i=1900;i<2010;i++)
{
 var option1=document.createElement("OPTION");
 option1.text=i;
 option1.value=i;
 document.getElementById("year").add(option1);
}
//添加月
for(var i=1;i<13;i++)
{
 var option1=document.createElement("OPTION");
 option1.text=i;
 option1.value=i;
 document.getElementById("month").add(option1);
 }
//添加宿舍楼
for(var i=1;i<20;i++)
{
 option1=document.createElement("OPTION");
 option1.text=i+"#";
 option1.value=i;
 document.getElementById("lou").add(option1);
 }
//添加宿舍号
for(var i=100;i<111;i++)
{
 option1=document.createElement("OPTION");
 option1.text="# "+i;
 option1.value=i;
 document.getElementById("sushe").add(option1);
}
//添加卧室号
for(var i=1;i<4;i++)
{
 option1=document.createElement("OPTION");
 option1.text=i +"#";
 option1.value=i;
 document.getElementById("xiaosushe").add(option1);
 }
function setSrc(frm)
{
 //alert(frm.file.value);
 frm.image.src=frm.file.value;
 }
function toNext(frm)
{
 if(window.event.keyCode==13)
 {
  window.event.keyCode=9;
  }
}
function toNext1(frm)
{
  if (window.event.keyCode==13&&frm.elements[0].value==""){
   
     //span1.innerText="学号不能为空";
     span1.style.color="FF0000";
     frm.elements[0].focus();
     window.event.returnValue=false;
    
  }
  else if(window.event.keyCode==13 && frm.elements[0].value!=""){
    window.event.keyCode=9;
    span1.style.color="CCCCCC";
 
  }
}
function toNext2(frm)
{
  if (window.event.keyCode==13&&frm.stu_name.value==""){
   
     //span1.innerText="学号不能为空";
     span2.style.color="FF0000";
     frm.elements[2].focus();
     window.event.returnValue=false;
    
  }
  else if(window.event.keyCode==13 && frm.elements[2].value!=""){
    window.event.keyCode=9;
    span2.style.color="CCCCCC";
 
  }
 
}
function toNext3(frm)
{
  if (window.event.keyCode==13&&frm.from_school.value==""){
   
     //span1.innerText="学号不能为空";
     span3.style.color="FF0000";
     frm.from_school.focus();
     window.event.returnValue=false;
    
  }
  else if(window.event.keyCode==13 && frm.from_school.value!=""){
    window.event.keyCode=9;
    span3.style.color="CCCCCC";
 
  }
 
}
function toNext4(frm)
{
  if (window.event.keyCode==13 &&(frm.ph_num.value=="" && frm.tel_num.value=="")){
     span4.style.color="FF0000";
     frm.ph_num.focus();
     window.event.returnValue=false;
    
  }
  else if(window.event.keyCode==13 && (frm.ph_num.value!=""||frm.tel_num.value!="")){
    window.event.keyCode=9;
    span4.style.color="CCCCCC";
 
  }
 
}
function toNext5(frm)
{
  if (window.event.keyCode==13&&frm.fam_name.value==""){
   
     //span1.innerText="学号不能为空";
     span5.style.color="FF0000";
     frm.fam_name.focus();
     window.event.returnValue=false;
    
  }
  else if(window.event.keyCode==13 && frm.fam_name.value!=""){
    window.event.keyCode=9;
    span5.style.color="CCCCCC";
 
  }
 
}
function toNext6(frm)
{
  if (window.event.keyCode==13&&frm.fam_sta.value==""){
   
     //span1.innerText="学号不能为空";
     span6.style.color="FF0000";
     frm.fam_sta.focus();
     window.event.returnValue=false;
    
  }
  else if(window.event.keyCode==13 && frm.fam_sta.value!=""){
    window.event.keyCode=9;
    span6.style.color="CCCCCC";
 
  }
 
}
function toNext7(frm)
{
  if (window.event.keyCode==13&&(frm.fmph_num.value==""&&frm.fmtel_num.value=="")){
   
     //span1.innerText="学号不能为空";
     span7.style.color="FF0000";
     frm.fmph_num.focus();
     window.event.returnValue=false;
    
  }
  else if(window.event.keyCode==13 && (frm.fmph_num.value!=""||frm.fmtel_num.value!="")){
    window.event.keyCode=9;
    span7.style.color="CCCCCC";
 
  }
 
}
function check(frm)
{
 if(frm.stu_num.value=="")
 {
  span1.style.color="FF0000"
  if(frm.stu_name.value=="")
  {
   span2.style.color="FF0000";
   if(frm.from_school.value=="")
   {
    span3.style.color="FF0000";
    if(frm.tel_num.value==""&&frm.ph_num.value=="")
    {
     span4.style.color="FF0000"
     if(frm.fam_name.value=="")
     {
      span5.style.color="FF0000";
      if(frm.fam_sta.value=="")
      {
       span6.style.color="FF0000";
       if(frm.fmtel_num.value==""&&frm.fmph_num.value=="")
       {
        span7.style.color="FF0000"
        }
       }
       
      }
     }
    }
   }
  
 }
 else if(frm.stu_name.value=="")
  {
   span2.style.color="FF0000";
   if(frm.from_school.value=="")
   {
    span3.style.color="FF0000";
    if(frm.tel_num.value==""&&frm.ph_num.value=="")
    {
     span4.style.color="FF0000"
     if(frm.fam_name.value=="")
     {
      span5.style.color="FF0000";
      if(frm.fam_sta.value=="")
      {
       span6.style.color="FF0000";
       if(frm.fmtel_num.value==""&&frm.fmph_num.value=="")
       {
        span7.style.color="FF0000"
        }
       }
       
      }
     }
    }
   }
 else if(frm.from_school.value=="")
   {
    span3.style.color="FF0000";
    if(frm.tel_num.value==""&&frm.ph_num.value=="")
    {
     span4.style.color="FF0000"
     if(frm.fam_name.value=="")
     {
      span5.style.color="FF0000";
      if(frm.fam_sta.value=="")
      {
       span6.style.color="FF0000";
       if(frm.fmtel_num.value==""&&frm.fmph_num.value=="")
       {
        span7.style.color="FF0000"
        }
       }
       
      }
     }
    }
  else if(frm.tel_num.value==""&&frm.ph_num.value=="")
    {
     span4.style.color="FF0000"
     if(frm.fam_name.value=="")
     {
      span5.style.color="FF0000";
      if(frm.fam_sta.value=="")
      {
       span6.style.color="FF0000";
       if(frm.fmtel_num.value==""&&frm.fmph_num.value=="")
       {
        span7.style.color="FF0000"
        }
       }
       
      }
     }
   else if(frm.fam_name.value=="")
     {
      span5.style.color="FF0000";
      if(frm.fam_sta.value=="")
      {
       span6.style.color="FF0000";
       if(frm.fmtel_num.value==""&&frm.fmph_num.value=="")
       {
        span7.style.color="FF0000"
        }
       }
       
      }
    else if(frm.fam_sta.value=="")
      {
       span6.style.color="FF0000";
       if(frm.fmtel_num.value==""&&frm.fmph_num.value=="")
       {
        span7.style.color="FF0000"
        }
       }
     else if(frm.fmtel_num.value==""&&frm.fmph_num.value=="")
       {
        span7.style.color="FF0000"
        }
        else
        {
         frm.submit();
         }
      
  
}

整体实现了这样一个表单验证的页面,里面的select子元素都是通过js动态添加的整个的布局也采用纯粹的css布局没用用到一点表格。当然里面表单的样式也是css改写过的.算是我的一份作业吧!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值