不瞭解JavaWeb，你就錯億了，不信，你進來看

劉歇發表於2020-10-15
JavaWeb

JavaWeb

最近學了很多新知識，特別是關於前端這塊，什麼HTML、CSS、JS、jquery、jsp這些設計頁面的知識，最近在瘋狂學習，只是沒有怎麼給大家分享，實在抱歉，但我又覺得前端頁面不涉及到什麼邏輯、原理，只是些需要記的東西，也不就一一分享。好了，我們現在廢話不多說，開始進入正題吧。

JavaWeb, 顧名思義，我們也會猜想到這是要把java用在web上，用在我們的網際網路上。我們肯定很好奇，我們上網時開啟瀏覽器，那麼多精彩豐富的頁面是怎麼做出來的，那些登入，註冊，驗證，跳轉頁面，搜尋的功能又是怎麼實現的？那些頁面怎麼那麼人性化，我們想要的資訊啥都有，還展示的那麼漂亮整潔？
其實啊，很簡單，只要我們保持這顆好奇心，一起探究下去，就一定能夠知道。如果你現在覺得有決心、有信心，那我現在就告訴你。請繼續往下看

HTML、CSS

我們網頁頁面是靠我們的超文字標記語言HTML做出來的。HTML語言是很簡單，它的程式碼看過去一目瞭然，因為它沒有任何需要邏輯處理的部分，它的核心就在於標籤，標籤也是挺見名知意的。比如表格標籤 <table></table>。然後要在頁面顯示的內容就夾在標籤裡。如：要顯示的內容。

當然我們還可以讓內容顯示好看一點，比如它的顏色形狀等等都可以設定，那麼就往我們的標籤裡新增並設定屬性就好了。屬性可能有時並不能滿足使用者的需求，這時我們需要用到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程式碼的互動。這樣也為我們解決了耦合度過高的問題，現在我給大家演示一下互動的工作流程：

傳送前端頁面所需引數資訊
獲取AJAX所傳引數
把收到的引數返回給相應的頁面標籤位置
獲取頁面資訊
Java後臺邏輯處理
AJAX
頁面

現在我寫一個我們常見的個人資訊註冊頁面，用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所必備的基礎知識， 限於文章篇幅的原因，只能留待下一篇部落格。

相關文章