JavaWeb

最近学了很多新知识，特别是关于前端这块，什么HTML、CSS、JS、jquery、jsp这些设计页面的知识，最近在疯狂学习，只是没有怎么给大家分享，实在抱歉，但我又觉得前端页面不涉及到什么逻辑、原理，只是些需要记的东西，也不就一一分享。好了，我们现在废话不多说，开始进入正题吧。

JavaWeb, 顾名思义，我们也会猜想到这是要把java用在web上，用在我们的互联网上。我们肯定很好奇，我们上网时打开浏览器，那么多精彩丰富的页面是怎么做出来的，那些登录，注册，验证，跳转页面，搜索的功能又是怎么实现的？那些页面怎么那么人性化，我们想要的信息啥都有，还展示的那么漂亮整洁？
其实啊，很简单，只要我们保持这颗好奇心，一起探究下去，就一定能够知道。如果你现在觉得有决心、有信心，那我现在就告诉你。请继续往下看

HTML、CSS

我们网页页面是靠我们的超文本标记语言HTML做出来的。HTML语言是很简单，它的代码看过去一目了然，因为它没有任何需要逻辑处理的部分，它的核心就在于标签，标签也是挺见名知意的。比如表格标签 <table></table>。然后要在页面显示的内容就夹在标签里。如：<diiv>要显示的内容</div>。

当然我们还可以让内容显示好看一点，比如它的颜色形状等等都可以设置，那么就往我们的标签里添加并设置属性就好了。属性可能有时并不能满足用户的需求，这时我们需要用到CSS样式。我们可以用它给页面进行布局，进行定位等待一系列让页面显示更有人性化、丰富多彩的操作。

现在我写一个简单的HTML代码还有CSS样式，供大家参考

     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
    
    
            margin: 0px;
            padding:0px;
        }
        ul{
    
    list-style:none;}
     #nav{
    
    
         height: 50px;
         background:url(./repeat.png);
     }
     #nav ul li{
    
    
         width:200px;
         float:left;
     }
     #nav ul li a{
    
    
         display: block;
         width: 200px;
         height: 50px;
         line-height: 50px;
         text-decoration: none;
         font-size: 18px;
         font-weight: bold;
         color:blanchedalmond;
         text-align: center;
     }
     #nav ul li a:hover{
    
    
         background-color:white;
         color:blue
     }
    </style>
</head>
<body>
    <h1> 爱奇艺视频</h1>
<div id="nav">
    <ul>
        <li><a href="5.html" target="myframe">首页</a></li>
        <li><a href="1.html" target="myframe">美女视频</a></li>
        <li><a href="2.html" target="myframe">搞笑视频</a></li>
        <li><a href="3.html" target="myframe">影视经典</a></li>
        <li><a href="4.html" target="myframe" >娱乐视频</a></li>
    </ul>
</div>
    <div>
        <iframe src="5.html" name="myframe" width="1000" height="800" frameborder="none"></iframe>
    </div>
</body>
</html>

这是它的显示页面

在这里插入图片描述

怎么样，页面还算比较人性化吧，代码也不是很多，如果你了解这些标签和属性的话，再对照这显示的图片，是很容易懂的。好了，就到这儿，我们现在主要是讲怎么把我们引以自豪的java知识运用在页面上，那么页面显示就简单介绍到这里，如果不懂空闲时间再去补补吧。

现在我们开始下一个问题，那些登录注册、搜索跳转的功能该如何实现？搜索跳转这些功能是靠标签实现，在这个标签里加入地址属性就行了，这个不涉及我们的java。现在我们再来看登录注册功能是怎么实现的，以及还有网上的页面为什么有我们想要的信息，这些信息难道都是被开发人员输入进去的，可是为什么刚开始没有，我们输入之后就有了，比如我们的个人信息是在我们注册登录后才有的。好了，现在开始涉及我们的java知识了，请不要眨眼。

JSP、JS(JavaScript)、JQuery

可能要让你们失望一会儿，我们的java暂时还需要候场，因为如果不了解这三位大佬的话，我们的java是没办法闪亮登场的，因为它们都是我们了解JavaWeb的前奏，是为java登场做铺垫的，可以说是接待我们java的waitor。

首先我们来看JSP，JSP代码和HTML代码没什么区别，都是能够显示页面的代码，但是不同点在于它是可以嵌入我们的java语言。就是不仅可以写HTML代码，还可以写java代码，让两者完美兼容，这就是我们的JSP。很多人会觉得这样不是very good吗？NO,因为这样的话耦合度就过高了，而代码高手都是讲究耦合度的，耦合度过高对代码高手而言是绝不容许的，而初学者就很难看到这一点，因为我们做的项目还是太少了，或者是太简单了，不能着眼于大项目出发，大项目是希望耦合度越低越好，并且还需要团队配合，如果耦合度过高，测试项目出错的时候往往很难找出来，就算找出来了，可能牵一发而动全身，出错的代码一旦改了，那么和出错的代码有关联的全部都要改。所以JSP有优点也有缺点。请根据情况来使用。

现在我们来看JS，JS是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。所以看出来了吗？动态功能就是实现我们在网页上操作后执行的功能，登录注册亦是如此。同时JS可以接收我们页面的信息内容，无论是内容还是标签属性，它都可以接收。它还可以接收我们Java传过来的参数，这就是人人都重视的AJAX方法，AJAX之所以引起我们的关注，就是它能够完成我们前端页面与后端java代码的交互。这样也为我们解决了耦合度过高的问题，现在我给大家演示一下交互的工作流程：

现在我写一个我们常见的个人信息注册页面，用JS代码来验证我们输入的信息是否合理。供大家参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
    
    
        margin:0px;
        padding:0px;
    }

    #box{
    
    
        margin:100px;
        border:1px solid #ccc;
        background-color: cornflowerblue;
        width: 800px;
        height: 500px;
        position: absolute;
    }

    h1{
    
    
        margin-top:50px;
        position: relative;
        margin-left: 80px;
    }

    #txt{
    
    
        margin-left: 80px;
    }
    
    span{
    
    
        color:white;
    }

    #s1{
    
    
        margin-left: 90px;
    }

    #s2{
    
    
       margin-left: 100px;
    }
</style>
<body>
    <div id="box">
      <h1>个人信息登记表</h1><br/>
      <form id="txt" action="1.html" name="myform" onsubmit="return doSubmit()" method="post">

    登录账号：<input type="text" name="uname" onblur="checkUname()" />
     <span>6-18位有效字符（字母、数字、下划线）</span><br/><br/>    

    登录密码：<input type="password" name="pass1" onblur="checkPass1()"/> 
    <span>6-18位任意字符</span> <br/><br/>

    重复密码：<input type="password" name="pass2" onblur="checkPass2()"/> 
    <span>重复密码与登录密码保持一致</span><br/><br/> 

    性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:&nbsp;  
    <input type="radio" name="sex" value="1" onblur="radioChecked()"/>男 &nbsp;&nbsp;
    <input type="radio" name="sex" value="0" onblur="radioChecked()"/>女
    <span id="s1">必须选择一个</span> <br/><br/>

    年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄:&nbsp;  
    <input type="text" name="age" onblur="checkAge()"/>
    <span>大于0的任意两位数</span> <br/><br/>

    手机号码：</span><input type="text" name="phone" onblur="checkPhone()"/> 
    <span>由1开头的11位整数</span><br/><br/>

    邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:&nbsp;  
    <input type="text" name="email" onblur="checkEmail()"/>
    <span>有效的Email地址</span> <br/><br/>

    学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历:&nbsp;  
    <select name="education" onblur="seCheck()">
        <option value="0" name="edu" selected="selected">请选择</option>
        <option value="1" name="edu" >大专</option>
        <option value="2" name="edu" >本科</option>
        <option value="3" name="edu" >硕士</option>
        <option value="4" name="edu" >研究生</option>
        <option value="5" name="edu" >博士</option>
    </select><span id="s2">必须选择一个</span> <br/><br/>


    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>


    </form>
    </div>
</body>

<script>
    //验证登录账号
    function checkUname(){
    
    
        var uname1=document.myform.uname.value;
        //执行验证
        if(uname1.match(/^\w{
    
    6,18}$/)==null){
    
    
            alert("请输入6-18位的账号信息！");
            return false;
        }
        return true;
    }
 


    //验证登录密码
    function checkPass1(){
    
    
        var passOne = document.myform.pass1.value;
        //执行验证
        if(passOne.match(/^.{
    
    6,18}$/)==null){
    
    
           alert("请输入6-18位的任意字符的登录密码");
           return false;
        }
        return true;
    }

    //验证重复密码
    function checkPass2(){
    
    
        var passOne = document.myform.pass1.value;
        var passTwo = document.myform.pass2.value;
        //执行验证
        if((passTwo===passOne)!=true){
    
    
            alert("你输入的密码不一致");
            return false;
        }
        return true;
    }

     
    //验证单选按钮
    function radioChecked(){
    
    
        var sex1 = document.getElementsByName("sex");
        if(!sex1[0].checked && !sex1[1].checked){
    
    
            alert("必须选择一个单选按钮");
            return false;
        }
        return true;
    }

    //验证年龄
    function checkAge(){
    
    
        var age1 = document.myform.age.value;
        //执行验证
        if(age1.match(/^[0-9]{
    
    2}$/)==null){
    
    
            alert("请输入大于0的两位数的年龄");
            return false;
        }
        return true;
    }

    //验证手机号码
    function checkPhone(){
    
    
        var phone1 = document.myform.phone.value;
        
        if(phone1.match(/^1+[0-9]{
    
    10}$/)==null){
    
    
            alert("请输入由1开头的11位整数手机号码");
            return false;
        }
        return true;
    }


    //验证邮箱地址
    function checkEmail(){
    
    
        var email1= document.myform.email.value;

        if(email1.match(/^\w+@\w+(\.\w+){
    
    1,2}$/)==null){
    
    
            alert("请输入正确的Email信息");
            return false;
        }
        return true;
    }

    //验证学历
    function seCheck(){
    
    
      var edu1 = document.getElementsByName("edu");
      if(edu1[0].selected){
    
    
          alert("请选择学历")
          return false;
      }
      return true;
    }

    function doSubmit(){
    
    
        return checkUname() && checkPass1() &&checkPass2() &&radioChecked() &&checkAge() &&checkPhone() &&checkEmail() &&seCheck();
    }
</script>

</html>

这是它的显示页面

在这里插入图片描述

怎么样，把我的代码复制去测试一下，去感受一下JS功能的强大，你会发现你不按提示输入信息不行，因为它就会弹出温馨提示，不许你进行下一环节的输入。不知道你有没有觉得JS代码太过复杂，不好记，反正我有这种感觉，那么有没有简单的写法呢？像Java代码有很多类库，JS有吗？

有，它就是我将要说的JQuery，jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。使用它将大大减少我们要写的JS代码。让我们写起来更方便。我们现在知道JS可以获取页面标签以及标签内容，比如我们现在想获取<span></span> 标签，用JS写就是 document.getElementsByTagName("span")；用JQuery写就是$("span")。是不是少了很多，同样也方便我们阅读代码。

请期待下一篇博客

不好意思，重头戏来了，而我却掉链子了，其实我也不想，但是这博客我写着写着突然感觉页面越来越卡顿了。还有就是这场重头戏挺足的，因为光这铺垫我就写了一篇博客，但是这铺垫又不得不做，因为那是我们了解JavaWeb所必备的基础知识，限于文章篇幅的原因，只能留待下一篇博客。

不了解JavaWeb，你就错亿了，不信，你进来看

JavaWeb

HTML、CSS

JSP、JS(JavaScript)、JQuery

请期待下一篇博客

猜你喜欢