前言：“當你停止嘗試時，就是失敗的時候。”你好!我是夢陽辰。快和我一起繼續學習起來吧！

如果你對JavaScript瞭解甚少，也許下面一篇文章對你有用！

文章目錄

01.JS的常用事件

1.blur失去焦點
光標失去
2.focus獲得焦點
光標獲得

3.change 下拉列表選中改變，或文本框內容改變。

4.click鼠標單擊
5.dbclick鼠標雙擊

6.keydown鍵盤按下
7.keyup鍵盤彈起

8.load頁面加載完畢
頁面全部加載完畢後，及所有的HTML元素加載完畢後發生。

9.mousedown鼠標按下
10.mouseover鼠標經過
11.mousemove鼠標移動
12.mouseout鼠標離開
13.mouseup鼠標彈起

14.reset表單重置
15.submit表單提交

16.select文本被選定
選中文本

任何一個事件都會對應一個事件句柄，事件句柄是在事件前添加on。onxxx這個事件句柄出現在一個標籤的屬性位置上。（事件句柄以屬性的形式存在）

回調函數：
回調函數的特點:自己把這個代碼寫出來了，但是這個函數不是自己負責調用，由其他程序負責調用該函數。

如：

<script>
function sayHello(){
alert("hello js!");
}
</script>
<!--註冊標籤的第一種方式，直接在標籤中使用事件句柄-->
<!--以下代碼的含義是，將sayHello函數註冊到按鈕上,等click事件發生後，該函數被瀏覽器調用，我們稱這個函數爲回調函數-->
<input type="button" value="hello" onclick="sayHello()"/>
<input type="button" value="hello2" id="mybtn"/>
<input type="button" value="hello2" id="mybtn2"/>

<!--第二種註冊事件的方式，是使用純JS代碼完成事件的註冊。-->
<script type ="text/javascript">
function doSome(){
alert("do some");
}
<!--第一步先獲取這個按鈕對象（document是內置對象，代表整個HTML頁面-->
var btnObj=document.getElementById("mybtn");
<!--第二步：給按鈕對象的onclick屬性賦值-->
btnObj.onclick=doSome;//注意寫函數名即可，不需要小括號,將會調函數doSome註冊到click事件上。

<!--或者直接用：-->

document.getElemetById("mybth2").onclick=function(){//匿名函數，在click事件發生後纔會調用。
	alert("test2");
}
</script>

對於以上程序來說，sayHello函數被其他程序調用。
即自己的寫的函數被別人調用了。

02.JS代碼的執行順序

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Js代碼的執行順序</title>
</head>
<body>
<script type="text/javascript">
   document.getElementById("btn").onclick=function () {
        alert("hello ");
   }
</script>
<input type="button" value="hello" id="btn">
</body>
</html>

會報錯：在id=”btn“的元素還沒有加載到內存時就執行了document.getElementById(“btn”).οnclick=function () {
alert(“hello”);
}

改進：
頁面加載完畢後，load事件發生。然後執行read()函數。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Js代碼的至此那個順序</title>
</head>
<body onload="read()">
<script type="text/javascript">
    function read() {
        document.getElementById("btn").onclick = function () {
            alert("hello")
        }
    }
</script>
<input type="button" value="hello" id="btn">
</body>
</html>

或者用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Js代碼的至此那個順序</title>
</head>
<body >
<script type="text/javascript">
   /* window.οnlοad=read;
    function read() {
        document.getElementById("btn").onclick = function () {
            alert("hello")
        }
    }*/
    //或者，頁面加載完畢後，load
    window.onload=function () {
        document.getElementById("btn").onclick = function () {
            alert("hello")
        }
    }
</script>
<input type="button" value="hello" id="btn">
</body>
</html>

將文本框改爲複選框：
需要掌握的點：
一個節點對象中只要有屬性都可以"."
然後可以更改其值。

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>設置節點屬性</title>
</head>
<script>
    onload=function () {
        document.getElementById("btn").onclick=function () {
            var mytext =document.getElementById("mytext");
            mytext.type="checkbox";
        }
    }
</script>
<input type="text" id="mytext"/>
<input type="button" value="將文本框改爲複選框" id="btn">
</body>
</html>

03.Js捕捉回車鍵

需求：在網頁登錄賬戶時，將用戶名和密碼填寫完成後需要用回車鍵確定登錄。

回車鍵的鍵值：13
ESC鍵的鍵值：27

對於“鍵盤事件對象”都有keyCode屬性來獲取鍵值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>捕捉回車鍵</title>
</head>
<body>
    <script type="text/javascript">
            window.onload=function () {
                var usernameElt =document.getElementById("username");
                usernameElt.onkeydown=function (event) {
                    //獲取鍵值
                    if(event.keyCode==13){
                        alert("登錄中...");
                    }
                }
            }
    </script>
    <input type="text" id="username">
</body>
</html>

04.JS的運算符

1.void運算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>void</title>
</head>
<body>
頁面頂部
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--把href後面的路徑消失，使頁面不跳轉,
void運算符：執行表達式，但不返回任何結果
而:javascript:代碼表示void()是一條JS代碼而非路徑。-->
    <a href="javascript:void(0)" onclick="window.alert('fade')">
        保留超鏈接的樣式，同時用戶點擊該超鏈接的時候執行一段JS代碼，單頁面不能跳轉
    </a>
</body>
</html>

05.JS的控制語句

1.if
2.switch
3.whilc
4.do…while…
5.for
6.break
7.continue
以上控制語句在其它語言都有涉及。如c,c++,Java…

8.for…in語句

如何創建JS數組？

var arr =[false,ture,..];//數組中數據類型隨意放，類似於python的類表

遍歷數組：

for(var i=0;i<arr.length;i++){
alert(arr[i]);
}

for(var i in arr){//類似於python
alert(arr[i]);
}
//for..in可以遍歷對象的屬性
User = function(username,password){
	this.username=username;
	this.password=password;
}
var u=new User("LiSi","afadfj13");
alert(u.username+","+u["password"]);
for(var ShuXingMing in u){
alert(u[ShuXingMing]);
}

9.with語句
形如：
alert(u.username);
alert(u.password);
可以改爲：
with(u){
alert(username);
alert(password);
}

06.設置和獲取文本框的value(DOM編程)

1.JavaScript;JS的核心語法。（ES規範/ECMA-262標準）
2.DOM:Document Object Model (文檔對象模型，對網頁當中的節點進行增刪改的過程。）HTML文檔別當做一棵樹DOM樹來看待。
var domObj = document.getElementById(“id”);
3.BOM：Browser Object Model(瀏覽器對象模型）
如：關閉和打開瀏覽器窗口，後退，前進，瀏覽器地址欄上的地址，都是屬於BOM編程。

DOM和BOM的區別和聯繫：
BOM的頂級對象是:window
DOM的頂級對象是：document

實際上BOM是包括DOM的:
如:

window.onload=function(){
var btnElt=document.getElementById("btn")；
alert(btnElt);
}

4.獲取文本框value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>獲取文本框的value</title>
</head>
<body>
    <script>
        window.onload=function(){
            var fad=document.getElementById("btn");
            fad.onclick=function () {
                //獲取username節點
                /*var fadName=document.getElementById("username");
                var ss=fadName.value;
                alert(ss);*/

                //或者
                /*alert(document.getElementById("username").value);*/

                //修改value
                alert(document.getElementById("username").value="Hello Meng!");
            }
        }
    </script>
    <input type="text" id="username"/>
    <input type="button" value="獲取文本框的value" id="btn"/>
    <hr>
    <script type="text/javascript">
        window.onload=function () {
            document.getElementById("bai").onclick=function () {
                //獲取第一個框的值
                document.getElementById("username3").value=document.getElementById("username2").value;
            }
        }
    </script>
    <input type="text" id="username2"/><br>
    <input type="text" id="username3"/><br><br><br>
    <input type="button" value="降低一個文本款的value複製到第二個文本框" id="bai"/>

<!--    blur事件：失去焦點事件,以下代碼中的this
代表的是當前input節點對象，this.value就是這個節點的value屬性-->

   <input type="text" onblur="alert(this.value)">
</body>
</html>

5.innerHTML和innerText操作div和span
兩者的相同點和區別：
相同點：都是設置元素內部的內容
不同點：
innerHTML會把後面的字符串當作一段HTML代碼解釋並執行。不是HTML當作普通文本輸出。

而innerText後面的字符串就算是一段HTML代碼，也會當作文本。

07.正則表達式

1.什麼是正則表達式
正則表達式：Regular Expression
正則表達式主要用在字符串格式匹配方面。

2.正則表達式實際上是一門獨立的學科，在Java語言中支持，c語言中也支持，javascript中也支持。

大部分編程語言都支持正則表達式。正則表達式最初使用在醫學方面。用來表示神經符號等。目前使用最多的是計算機編程領域。用作字符串匹配。包括搜索方面等。

3.正則表達式學習要求
第一：常見的正則表達式符號要認識
第二：簡單的正則表達式要會寫
第三：別人寫的正則表達式要看得懂
第四：在javascript當中，怎麼創建正則表達式對象
第五：在javascript當中，正則表達式對象有哪些方法。
第六:要能夠快速的從網絡上找到自己需要的正則表達式。並且測試其有效性。

4.常見的正則表達式符合：

.    匹配除換行符以外的任意字符
\w   匹配字母或數字或下劃線或漢字
\s   匹配任意的空白符
\d   匹配數字
\b   匹配單詞的開始或結束
^    匹配字符串的開始
$    匹配字符串的結束

\W   匹配不是字母或數字或下劃線或漢字的字符
\S   匹配任意不是空白符的字符
\D   匹配任意非數字的字符
\B   匹配不是單詞的開始或結束的位置
[^x]  匹配除了x以外的任意字符
[^aeiou]  匹配除了aeiou這幾個字母以外的任意字符


* 重複0次或更多次
+ 重複一次或更多次
? 重複零次或一次
{n} 重複n次
{n,}重複n次或更多次
{n,m}重複n到m次

[1-9] 表示1到9中的任意字符
[A-Za-z0-9] 表示A-Z,a-z,0-9中的任意一個字符。
[A-Za-z0-9-] 表示A-Z,a-z,0-9,-,中的任意一個字符。

5.簡單的正則表達式要會寫
QQ號的正則表達式：

^[1-9][0-9]{4,}$

6.別人寫的正則表達式要看得懂
email正則表達式：

^\w+([-+.]\w+)*@\w+([-.]\w)*\.w+([-.]\2+)*$

7.javascript當中，怎麼創建正則表達式對象

第一種創建方式：
var fox=/正則表達式/flags;

第二種創建方式：
var fox=new RegExp("正則表達式","flags");

關於flags:
	g:全局匹配
	i:忽略大小寫
	m:多行搜索（ES規範制訂以後才支持使用m)當前面是正則表達式的時候，m不能使用。

正則表達式的text（）方法。
ture/false=正則表達式.text(用戶填寫的字符串）;
ture:字符串格式匹配成功
false:字符串格式匹配失敗

改進：

trim函數去除字符串的前後字符

08.表單驗證(重點）

要求：
1.用戶名不能爲空
2.用戶名必須在6-14位之間
3.用戶名只能由數字和字母組成，不能含有其他符號（正則表達式)
4.密碼和確認密碼一致，郵箱地址合法
5.同意失去焦點驗證
6.錯誤提示信息統一在span標籤中提示，並且要求12號，紅色
7.文本框再次獲得焦點後，清空錯誤提示信息信息

直接看代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單驗證</title>
    <style type="text/css">
        span{
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        /**
         * 1.用戶名不能爲空
         * 2.用戶名必須在6-14位之間
         * 3.用戶名只能由數字和字母組成，不能含有其他符號（正則表達式)
         * 4.密碼和確認密碼一致，郵箱地址合法
         * 5.同意失去焦點驗證
         * 6.錯誤提示信息統一在span標籤中提示，並且要求12號，紅色
         * 7.文本框再次獲得焦點後，清空錯誤提示信息信息
         */
        //1.用戶名不能爲空
        window.onload=function () {
                //獲取username的span標籤對象
                var usernameErrorSpan=document.getElementById("usernameError");

                //獲取用戶名標籤對象
                var nameEle=document.getElementById("username");
                nameEle.onblur=function () {
                    //獲取用戶名
                    var name=nameEle.value;
                    //去除用戶名的前後空格
                    name=name.trim();
                    if(name===""){
                        usernameErrorSpan.innerText="用戶名不能爲空";
                    }
                    else{
                        //2.長度不同
                        if(name.length<6||name.length>14) {
                            usernameErrorSpan.innerText="用戶名不合法:用戶名長度應在6到14之間";
                        }
                        else{
                            //長度合法,繼續判斷用戶名是否有非法字符
                            var fff=/^[A-Za-z0-9]+$/;
                            var ok=fff.test(name);
                            if(ok){
                                //用戶名最終合法

                            }
                            else{
                                //用戶名有非法字符
                                usernameErrorSpan.innerText="用戶名只能由數字和字母組成";
                            }
                        }
                    }
                }
                //給username這個文本框綁定獲得焦點事件
                nameEle.onfocus=function () {
                    //清空非法value
                    if(usernameErrorSpan.innerText!=""){
                        nameEle.value="";
                    }
                    //清空span裏的錯誤提示信息
                    usernameErrorSpan.innerText="";
                }


            //獲取密碼框對象
            var passcode1Ele=document.getElementById("passcode1");
            //獲取確認密碼框對象
            var passcode2Ele=document.getElementById("passcode2")
            //獲取確認密碼框提示sapn對象
            var passcode2ErorrSpan=document.getElementById("passcode2Error");
                //給第二個密碼框綁定blur事件
                passcode2Ele.onblur=function () {

                    //獲取密碼
                    var passcode1=passcode1Ele.value;
                    //獲取確認密碼
                    var passcode2=passcode2Ele.value;
                    if(passcode1!=passcode2){
                        passcode2ErorrSpan.innerText="前後密碼輸入不一致！"
                    }
                    else{
                        //密碼一致
                    }
                }

                //給密碼框綁定focus事件，用來，當前後密碼不一致時清空密碼
                passcode2Ele.onfocus=function () {
                    if(passcode2ErorrSpan.innerText!=""){
                        passcode2Ele.value="";
                       passcode1Ele.value="";
                    }
                    passcode2ErorrSpan.innerText="";
                }

                //郵箱，獲取eamil標籤對象
            var emialEle=document.getElementById("email");
                //獲取email的span對象
            var emailErrorSpan=document.getElementById("emailError");
            //給email標籤綁定onblur事件
            emialEle.onblur=function () {
                //獲取email
                var email=emialEle.value;
                //獲取email的正則
                var fff=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                var ok=fff.test(email);
                if(ok){

                }
                else{
                    emailErrorSpan.innerText="郵箱地址不合法！";
                }
            }
            //給email綁定focus
            emialEle.onfocus=function () {
                if(emailErrorSpan.innerText!=""){
                    emialEle.value="";
                }
                emailErrorSpan.innerText="";
            }

            //給提交按鈕綁定鼠標單擊事件
            //獲取提交按鈕對象
            var submitEle=document.getElementById("submit1");
            submitEle.onclick=function () {
                //觸發username的blur,passcode的blur
                //不需要人工操作
                nameEle.focus();
                nameEle.blur()

                passcode2Ele.focus();
                passcode2Ele.blur();

                emialEle.focus();
                emialEle.blur();
                //當所有表單都合法時
                if(usernameErrorSpan.innerText==""&&passcode2ErorrSpan.innerText==""&&emailErrorSpan.innerText==""){
                    var userFormEle=document.getElementById("userForm");
                    userFormEle.submit();
                }
            }
        }
    </script>
    <form id ="userForm" action="http://localhost:8080/jd/save" method="post">
        用戶名<input type="text" name="username" id="username"/>
        <span id="usernameError"></span><br>
        密碼<input  type="text" id="passcode1"/><br>
        確認密碼<input type="text" id="passcode2"/>
        <span id="passcode2Error"></span><br>
        郵箱<input type="text" name="email" id="email"/>
        <span id="emailError"></span><br>
        <input type="button" value="註冊" id="submit1"/>&nbsp;
        <input type="reset"  value="重置"/>
     </form>
</body>
</html>

不要因爲怕被玫瑰的刺傷到你，就不敢去摘玫瑰。我是夢陽辰，期待與你相遇！

關注公衆號【輕鬆玩編程】回覆關鍵字“電子書”，“計算機資源”，“Java從入門到進階”，”JavaScript教程“，“算法”，“Python學習資源”，“人工智能”等即可獲取學習資源。

最通俗易懂的JavaScript進階教程

文章目錄

01.JS的常用事件

02.JS代碼的執行順序

03.Js捕捉回車鍵

04.JS的運算符

05.JS的控制語句

06.設置和獲取文本框的value(DOM編程)

07.正則表達式

08.表單驗證(重點）

我們能做到的，比想象的更多（夢陽辰---2020上半年總結）

你不得不知道的JSP知識點

（回溯算法）求解N皇后問題

Servlet進階教程（你不得不知道的Servlet知識點）

XML入門教程（XML這樣學）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結