JavaWeb專案-----JavaScript

OneLuckyGuy發表於2020-12-19
WebJavaScript

目錄

1.且和或運算

2.陣列

3.函式

4.物件

5.事件

1.onload事件

1.靜態註冊

2.動態註冊onload

2.靜態、動態註冊onclick事件

3.靜態動態註冊失去焦點事件onclur

4.註冊onchange事件

5.註冊onsubmit事件

6.DOM

7.正規表示式

8.校驗使用者名稱是否合法並提示。

9.全選、全不選、反選

10、當頁面中沒有name和id時可以用getElementsByTagName

11.節點的常用屬性和方法

12.createTextNode和 appendChild的使用

1.且和或運算

&&且運算有兩種情況：

第一種：當表示式全為真的時候返回最後一個表示式的值。

第二種：當表示式中，有為假的值時候返回第一個為假的表示式的值。

||或運算

第一種情況：當表示式全為假時，返回最後一個表示式的值。

第二種情況：當表示式有真的時候，返回第一個為真的表示式。

注意：二者皆有短路

2.陣列

<script type="text/javascript">
        var arr = [];
        arr[3] = 12;   //arr[0]、arr[1]、arr[2]的值時undefined。
</script>

3.函式

1.js裡面函式不能被過載，只能被覆蓋。

2.函式的隱藏引數arguments（形參），只在function函式內

  就是在function函式中不需要定義，但卻可以直接用來獲取所有引數的變數，跟Java的可變長引數一樣。public void fun(Object ...args);

可變長引數其實是一個陣列，

<!--函式-->
    <script type="text/javascript">
        //函式定義之後需要被呼叫才能執行
        function function1(){
            alert("function 被呼叫了");
        }
        function1();
        //有參函式定義
        function function2(a,b){
            alert("function2被呼叫了 a = " + a + "、b = " + b);
        }
        function2(12,"abc");
        function function3(num1,num2){
            var result = num1 + num2;
            return result;
        }
        alert(function3(100,50));
        //函式的第二種定義方法
        var fun = function (){
            alert("函式的第二種定義方法")
        }
    </script>

4.物件

Object形式的自定義物件

物件的定義：

<!--定義物件-->
    <script type="text/javascript">
        var obj = new Object();
        obj.name = "OneLuckGuy"
        alert(obj.name);
    </script>
<!--定義物件方式二-->
    <script type="text/javascript">
        var obj = {
            age:18,
            function1:function(){}
        }
        alert(obj.age)
    </script>

5.事件

事件是電腦輸入裝置與頁面進行互動的響應。我們稱之為事件。

常用的事件：

onload 載入完成事件： 頁面載入完成之後，常用於做頁面 js 程式碼初始化操作

onclick 單擊事件： 常用於按鈕的點選響應操作。

onblur 失去焦點事件： 常用用於輸入框失去焦點後驗證其輸入內容是否合法。

onchange 內容發生改變事件： 常用於下拉選單和輸入框內容發生改變後操作

onsubmit 表單提交事件： 常用於表單提交前，驗證所有表單項是否合法。

事件的註冊又分為靜態註冊和動態註冊兩種：

靜態註冊事件：通過 html 標籤的事件屬性直接賦於事件響應後的程式碼，這種方式我們叫靜態註冊。 動態註冊事件：是指先通過 js 程式碼得到標籤的 dom 物件，然後再通過 dom 物件.事件名 = function(){} 這種形式賦於事件 響應後的程式碼，叫動態註冊。

動態註冊基本步驟： 1、獲取標籤物件 2、標籤物件.事件名 = fucntion(){}

1.onload事件

1.靜態註冊

注意：onload是在body標籤內的屬性。

如果要給onload新增函式常常寫在head中就可以。。在body中也可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <script type="text/javascript">
        function function1(){
            alert("靜態註冊頁面onload事件，所有程式碼");
        }
    </script>
</head>
<!--靜態註冊onload事件
    onload事件時瀏覽器解析完頁面之後就會自動觸發的事件
-->
<body onload="function1()">

</body>
</html>

2.動態註冊onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <script type="text/javascript">
        window.onload = function(){
            alert("動態註冊頁面onload事件，所有程式碼");
        }
    </script>
</head>
<body>
</body>
</html>

 

2.靜態、動態註冊onclick事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    靜態註冊onclick-->
    <script type="text/javascript">
        function function1(){
            alert("靜態註冊onclick");
        }
    </script>
<!--    動態註冊onclick-->
    <script type="text/javascript">
        window.onclick = function (){
//            1.獲取標籤物件
//             document 是JavaScript提供的一個物件（文件）指整個頁面
//             get 獲取
//             Element 元素（就是標籤）
//             By 通過
//             Id id屬性
            //通過Id屬性獲取物件
            var btnObj = document.getElementById("btn02");
            btnObj.onclick = function(){
                alert("動態註冊onclick事件");
            }
        }
    </script>
</head>
<body>
    <button onclick="function1()">button1</button>
    <button id="btn02">button2</button>
</body>
</html>

3.靜態動態註冊失去焦點事件onclur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    靜態註冊onclur事件-->
    <script type="text/javascript">
        function onblurfun(){
            //console是控制檯物件，是由JavaScript語言提供，專門用來想瀏覽器的控制器列印輸出，用於測試使用。
            //log是列印的方法
            console.log("靜態註冊失去焦點事件");
        }
    </script>
<!--    動態註冊onclur事件-->
    <script type="text/javascript">
        window.onblur = function (){
            var elementById = document.getElementById("pass01");
            elementById.onblur = function (){
                console.log("動態註冊失去焦點事件");
            }

        }
    </script>
</head>
<body>
<!--注意這裡加的是onblurfun(),而不是onblurfun不要忘記括號-->
    user:<input type="text"onblur="onblurfun()"><br/>
    password:<input type="password" id="pass01"><br/>
</body>
</html>

4.註冊onchange事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    靜態註冊onchange事件-->
    <script>
        function onchangefun(){
            alert("靜態註冊onchange被呼叫");
        }
    </script>
<!--    動態註冊onchange事件-->
    <script>
        window.onload  = function(){
            var selectObj = document.getElementById("onchangefun1");
            selectObj.onchange = function (){
                alert("動態註冊onchange被呼叫");
            }
        }
    </script>
</head>
<body>
    請選擇國家：
    <select onchange="onchangefun()">
        <option>----selcect----</option>
        <option>Japan</option>
        <option>America</option>
        <option>China</option>
    </select>
    選擇城市:
    <select id="onchangefun1">
        <option>----select----</option>
        <option>New York</option>
        <option>San Francisco</option>
        <option>Chicago</option>
    </select>
</body>
</html>

5.註冊onsubmit事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function onsubmitfun(){
            alert("靜態onsubmit,發現不合法,組織提交");
            return false;
        }
    </script>
    <script>
        window.onload = function (){
            var submitObj = document.getElementById("onsubmitfun1");
            submitObj.onsubmit = function (){
                alert("動態onsubmit");
                //動態的發現不合法在後面不用加return
                //如果想要提交return true就可以了
                return false;
            }
        }
    </script>
</head>
<body>
<!--靜態阻止提交的時候要加return 才能夠得到返回值false-->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitfun()">
        <input type="submit" value="靜態表單">
    </form>
    <form action="http://localhost:8080" method="get" id="onsubmitfun1">
        <input type="submit" value="動態表單">
    </form>
</body>
</html>

6.DOM

Document 物件中的方法介紹

document.getElementById(elementId) 通過標籤的 id 屬性查詢標籤 dom 物件，elementId 是標籤的 id 屬性值

document.getElementsByName(elementName) 通過標籤的 name 屬性查詢標籤 dom 物件，elementName 標籤的 name 屬性值

document.getElementsByTagName(tagname) 通過標籤名查詢標籤 dom 物件。tagname 是標籤名

document.createElement( tagName) 方法，通過給定的標籤名，建立一個標籤物件。tagName 是要建立的標籤名

注： document 物件的三個查詢方法，如果有 id 屬性，優先使用 getElementById 方法來進行查詢 如果沒有 id 屬性，則優先使用 getElementsByName 方法來進行查詢 如果 id 屬性和 name 屬性都沒有最後再按標籤名查 getElementsByTagName 以上三個方法，一定要在頁面載入完成之後執行，才能查詢到標籤物件。

<!-- 獲取頁面輸入的value-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function function01(){
            var Obj = document.getElementById("user");
            alert(Obj.name + "*********" + Obj.id + "******" + Obj.value);

        }

    </script>
</head>
<body>
    使用者名稱:<input type="text" id="user" name="username" value="value">
    <button type="button" onclick="function01()" name="button1" id="btn01">
        button1
    </button>

</body>
</html>

7.正規表示式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 表示要求字串中，是否包含字母e
        // var patt = new RegExp("e");
        // var patt = /e/; // 也是正規表示式物件
        // 表示要求字串中，是否包含字母a或b或c
        // var patt = /[abc]/;
        // 表示要求字串，是否包含小寫字母
        // var patt = /[a-z]/;
        // 表示要求字串，是否包含任意大寫字母
        // var patt = /[A-Z]/;
        // 表示要求字串，是否包含任意數字
        // var patt = /[0-9]/;
        // 表示要求字串，是否包含字母，數字，下劃線
        // var patt = /\w/;
        // 表示要求 字串中是否包含至少一個a
        // var patt = /a+/;
        // 表示要求 字串中是否 *包含* 零個 或 多個a
        // var patt = /a*/;
        // 表示要求 字串是否包含一個或零個a
        // var patt = /a?/;
        // 表示要求 字串是否包含連續三個a
        // var patt = /a{3}/;
        // 表示要求 字串是否包 至少3個連續的a，最多5個連續的a
        // var patt = /a{3,5}/;
        // 表示要求 字串是否包 至少3個連續的a，
        // var patt = /a{3,}/;
        // 表示要求 字串必須以a結尾
        // var patt = /a$/;
        // 表示要求 字串必須以a打頭
        // var patt = /^a/;

        // 要求字串中是否*包含* 至少3個連續的a
        // var patt = /a{3,5}/;
        // 要求字串，從頭到尾都必須完全匹配
        // var patt = /^a{3,5}$/;

        var patt = /^\w{5,12}$/;

        var str = "wzg168[[[";

        alert( patt.test(str) );


    </script>
</head>
<body>

</body>
</html>

8.校驗使用者名稱是否合法並提示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function function01(){
            var Obj = document.getElementById("user");
            var usernametext = Obj.value;
            /*
            * 1./\w/表示包含數字字母和下劃線
            * 2./\W/表示包含非數字字母下劃線
            * 3./\d/表示包含數字
            * */
            var patt = /^\w{5,12}$/;
            var spanObj = document.getElementById("usernameSpan");

            /*
            * test()方法用於測試某個字串，是不是匹配我的規則
            * 匹配就返回true，不匹配就返回false
            * */
            if (patt.test(usernametext)){
                //alert("符合要求");
                spanObj.innerText = "符合要求";
                spanObj.innerText = "<img src='right.png'>"//也可與放圖片
            }else{
               //alert("不符合要求");
                spanObj.innerText = "不符合要求";
            }

        }

    </script>
</head>
<body>
    使用者名稱:<input type="text" id="user" name="username" value="value">
    <span id="usernameSpan" style="color: red;"></span>
    <button type="button" onclick="function01()" name="button1" id="btn01">
        校驗
    </button>

</body>
</html>

9.全選、全不選、反選

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全選
        function checkAll(){
        //讓所有核取方塊都選中
            //是一個集合，集合中每個元素都是一個dom物件
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = true;
            }

        }
        //全不選
        function checkNone(){
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = false;
            }
        }
        //反選
        function checkReverse(){
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = !hobbies[i].checked;
            }
        }
    </script>
</head>
<body>
    興趣愛好：
    <input type="checkbox" name="hobby" value="cpp">C++
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="js">JavaScript
    <br/>
    <button onclick="checkAll()">全選</button>
    <button onclick="checkNone()">全不選</button>
    <button onclick="checkReverse()">反選</button>
</body>
</html>

10、當頁面中沒有name和id時可以用getElementsByTagName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全選
        function checkAll(){
        //讓所有核取方塊都選中
            //是一個集合，集合中每個元素都是一個dom物件
            var tags = document.getElementsByTagName("input");
            for (var i = 0; i < tags.length; i++){
                tags[i].checked = true;
            }
        }
    </script>
</head>
<body>
    興趣愛好：
    <input type="checkbox" value="cpp">C++
    <input type="checkbox" value="java">Java
    <input type="checkbox" value="js">JavaScript
    <br/>
    <button onclick="checkAll()">全選</button>
</body>
</html>

上面三個dom的方法都要在頁面載入完之後才能用，可以寫在btn的函式裡因為當你點選頁面的butten時候

這時候頁面已經載入完成了

11.節點的常用屬性和方法

節點：主要指的是標籤物件，還包括註釋文字等東西

練習：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查詢</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
	window.onload = function(){
		//1.查詢#bj節點
		document.getElementById("btn01").onclick = function () {
			var bjObj = document.getElementById("bj");
			alert(bjObj.innerHTML);
		}
		//2.查詢所有li節點
		var btn02Ele = document.getElementById("btn02");
		btn02Ele.onclick = function(){
			var lis = document.getElementsByTagName("li");
			alert(lis.length)
		};
		//3.查詢name=gender的所有節點
		var btn03Ele = document.getElementById("btn03");
		btn03Ele.onclick = function(){
			var genders = document.getElementsByName("gender");
			alert(genders.length)
		};
		//4.查詢#city下所有li節點
		var btn04Ele = document.getElementById("btn04");
		btn04Ele.onclick = function(){
			//1 獲取id為city的節點
			//2 通過city節點.getElementsByTagName按標籤名查子節點
			var lis = document.getElementById("city").getElementsByTagName("li");
			alert(lis.length)
		};
		//5.返回#city的所有子節點
		var btn05Ele = document.getElementById("btn05");
		btn05Ele.onclick = function(){
			//1 獲取id為city的節點
			//2 通過city獲取所有子節點
			alert(document.getElementById("city").childNodes.length);
		};
		//6.返回#phone的第一個子節點
		var btn06Ele = document.getElementById("btn06");
		btn06Ele.onclick = function(){
			// 查詢id為phone的節點
			alert( document.getElementById("phone").firstChild.innerHTML );
		};
		//7.返回#bj的父節點
		var btn07Ele = document.getElementById("btn07");
		btn07Ele.onclick = function(){
			//1 查詢id為bj的節點
			var bjObj = document.getElementById("bj");
			//2 bj節點獲取父節點
			alert( bjObj.parentNode.innerHTML );
		};
		//8.返回#android的前一個兄弟節點
		var btn08Ele = document.getElementById("btn08");
		btn08Ele.onclick = function(){
			// 獲取id為android的節點
			// 通過android節點獲取前面兄弟節點
			alert( document.getElementById("android").previousSibling.innerHTML );
		};
		//9.讀取#username的value屬性值
		var btn09Ele = document.getElementById("btn09");
		btn09Ele.onclick = function(){
			alert(document.getElementById("username").value);
		};
		//10.設定#username的value屬性值
		var btn10Ele = document.getElementById("btn10");
		btn10Ele.onclick = function(){
			document.getElementById("username").value = "國哥你真牛逼";
		};
		//11.返回#bj的文字值
		var btn11Ele = document.getElementById("btn11");
		btn11Ele.onclick = function(){
			alert(document.getElementById("city").innerHTML);
			// alert(document.getElementById("city").innerText);
		};
	};
</script>
</head>
<body>
<div id="total">
	<div class="inner">
		<p>
			你喜歡哪個城市?
		</p>

		<ul id="city">
			<li id="bj">北京</li>
			<li>上海</li>
			<li>東京</li>
			<li>首爾</li>
		</ul>

		<br>
		<br>

		<p>
			你喜歡哪款單機遊戲?
		</p>

		<ul id="game">
			<li id="rl">紅警</li>
			<li>實況</li>
			<li>極品飛車</li>
			<li>魔獸</li>
		</ul>

		<br />
		<br />

		<p>
			你手機的作業系統是?
		</p>

		<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
	</div>

	<div class="inner">
		gender:
		<input type="radio" name="gender" value="male"/>
		Male
		<input type="radio" name="gender" value="female"/>
		Female
		<br>
		<br>
		name:
		<input type="text" name="name" id="username" value="abcde"/>
	</div>
</div>
<div id="btnList">
	<div><button id="btn01">查詢#bj節點</button></div>
	<div><button id="btn02">查詢所有li節點</button></div>
	<div><button id="btn03">查詢name=gender的所有節點</button></div>
	<div><button id="btn04">查詢#city下所有li節點</button></div>
	<div><button id="btn05">返回#city的所有子節點</button></div>
	<div><button id="btn06">返回#phone的第一個子節點</button></div>
	<div><button id="btn07">返回#bj的父節點</button></div>
	<div><button id="btn08">返回#android的前一個兄弟節點</button></div>
	<div><button id="btn09">返回#username的value屬性值</button></div>
	<div><button id="btn10">設定#username的value屬性值</button></div>
	<div><button id="btn11">返回#bj的文字值</button></div>
</div>
</body>
</html>

12.createTextNode和 appendChild的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            // 現在需要我們使用js程式碼來建立html標籤，並顯示在頁面上
            // 標籤的內容就是：<div>阪井泉水</div>
            var divObj = document.createElement("div"); // 在記憶體中 <div></div>

            var textNodeObj = document.createTextNode("阪井泉水"); // 有一個文字節點物件 #阪井泉水

            divObj.appendChild(textNodeObj); // <div>阪井泉水</div>

            // divObj.innerHTML = "阪井泉水"; // <div>阪井泉水</div>,但，還只是在記憶體中
            // 新增子元素
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>

</body>
</html>

 

相關文章