tags:

JavaScript

JavaEEDay30 JavaScript

@toc

JavaScript 是 Web 的編程語言。
1.HTML 定義了網頁的內容
2.CSS 描述了網頁的佈局
3.JavaScript 網頁的行爲

JavaScipt 基本語法

一、 JS 函數定義

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第一運行JS</title>
		<!--
    		這裏在 head 標籤裏面藉助於 script 標籤引入外部的 JS 文件
    		type="text/javascript" 可視化的 JS 文件
    		src=" JS 文件路徑"，表示這個 JS 文件在什麼位置;
    		【注意】這裏 script 標籤是一個雙邊標籤，
    		但是在使用 Script 標籤引入外部的 JS文件時，裏面不能有任何的內容！
		-->
		<script type="text/javascript" src="hello.js" ></script>
		
		<!--
			【注意】如果說不需要 JavaScript 對於頁面進行繪製，
			則不需要把script標籤定義在head標籤裏面，
			只需要放到body裏面就可以了
		-->
		<script type="text/javascript">
			//這裏是在 Script 標籤裏面來書寫JS代碼
			alert("這裏是JavaScript");
			
			//這裏是在JavaScript裏面定義函數
			function method() {
				alert("這裏是一個JavaScript的方法");
			}
			
			function method(age, name, size) {
				alert("age:" + age + " name:" + name + " size:" + size);
			}
			
			function method(num1, num2) {
				return num1 + num2;
			}
			
			method(18, "貂蟬", "167");			
			var ret = method(5, 10);
			//在頁面中的控制檯中輸出
			console.log("ret : " + ret); 
			$s = method(10, 15);
			console.log("s:" + $s);
		</script>
	</head>
	<body>
	</body>
</html>

二、定義變量

在函數（方法）內部：
var 定義變量，則該變量爲局部變量，只能在方法的內部使用；
不使用 var 定義變量，則該變量爲全局變量，可以在任何地方使用；
在函數（方法）外部:
無論使用什麼形式定義變量，該變量均爲全局變量，可以在任何地方使用；

<body>
	<script type="text/javascript">
	/* 
	定義變量
	 var是一個關鍵字，只是用來聲明這是一個變量 ，不帶有任何數據類型約束
	 變量的數據類型有：number/string/boolean/undefined(未賦值)/object類型(值爲Null時候）
	*/
		var i = 23;  
		//number 
		console.log(typeof i);
		
		var s;
		//undefined在定義時未賦初值，無法確定數據類型
		console.log(typeof s); 
		
		//這裏可以這樣定義變量，但是有一些限制
		n = null;
		console.log(typeof n); //object
		
		function varTest() {
			m = 10;
			var t = 20;
			console.log("--->" + i); //---->true
			console.log("--->" + n); //---->null
		}
		
		varTest();
		
		console.log("--->" + m); //--->10
		console.log("--->" + t); //報錯；方法內使用var定義變量爲局部變量
	</script>
</body>

三、循環

for循環和 switch-case 使用和 Java 幾乎相同：

不同點：
在 JavaScript 當中，for循環的大括號不能作爲【變量作用域】的約束
只有 JavaScript 裏面方法大括號纔可以作爲【變量作用域的約束】
即 for 循環參數中定義的變量在 for 循環外部也可以使用；

<body>
	<script type="text/javascript">
	
  //switch循環
		var i = 2;
		switch (i){
			case 1:
				console.log("這裏是switch-case 1");
				break;
			case 2:
				console.log("這裏是switch-case 2");
				break;
			default:
				console.log("搞事情！！！");
				break;
		}

          //for循環
		for (var j = 0; j < 10; j++) {
			console.log("--->" + j);
		}
		console.log("???" + j); //？？？10

          //while循環
		var k = 10
		while (k-- > 0) {
			if (0 == k % 2) {
				console.log("JS就是這麼靈活");
			} else {
				console.log("你覺得好玩嗎?");
			}
		}
	</script>
</body>

四、字符串

整體的處理思路相似，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字符串方法</title>
	</head>
	<body>
		<script type="text/javascript">
			function stringTest() {
			
			    //新建字符串
				var str = "字符串是一個讓人又愛又恨的東西";
		        //截取字符串
				var subString = str.substring(2, 4);				
				console.log("subString:" + subString);  //subString:串是
				
				var urlStr = "wd=電腦&rsv_spt=1&rs1&f=3&rsv_bp=0&rsv_idx=2";
			    //分割字符串
				var arrays = urlStr.split("&");
				
				console.log(arrays);
				
				//尋找rsv_bp後面的值
				for (var i = 0; i < arrays.length; i++) {
					if (arrays[i].indexOf("rsv_bp") == 0) {
						console.log(arrays[i].substring(arrays[i].indexOf("=") + 1));
					}
				}
				
//在forEach裏參數是一個Callback 回調函數，給當前forEach提供處理數據的方式和方法
				arrays.forEach(function(item) {
					console.log("forEach:" + item);
				});
			}
			
			stringTest();
		</script>
	</body>
</html>

五、date 方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>日期使用</title>
	</head>
	<body>
		<script type="text/javascript">
			
			//獲取當前系統使用 new Date();
			var date = new Date();
			
			console.log(date);
			
			var day = date.getDate();
			var month = date.getMonth() + 1; //因爲從0開始
			var year = date.getFullYear();
			var seconds = date.getSeconds();
			var minutes = date.getMinutes();
			var hours = date.getHours();
			
			var time = year + "年" + month + "月" + day + "日" 
				+ hours + ":" + minutes + ":" + seconds ;
				
			document.writeln(time);//在頁面中打印
			document.writeln("<br />");
			document.writeln("<hr />");
			document.write("測試");
			document.write("在測試");
			
		</script>
	</body>
</html>

六、 Math

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Math</title>
	</head>
	<body>
		<script type="text/javascript">
			var i = Math.random();
			document.writeln(i);			
			document.writeln("<hr />");
			
			var xiangshangquzheng = Math.round(5.1); //向上取整
			document.writeln(xiangshangquzheng);	
			document.writeln("<hr />");
			
			var xiangxiaquzheng = Math.floor(5.1); //這三個裏面參數爲字符串數字也行
			document.writeln(xiangxiaquzheng);	
			document.writeln("<hr />");
			
			var n = Math.round(5.5); //四捨五入
			document.writeln(n);
		</script>
	</body>
</html>

七、數組的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>數組的定義</title>
	</head>
	<body>
		<script type="text/javascript">
			var arrays = new Array();//new ArrayList(); 類似於Java裏面的ArrayList
			arrays[0] = "雲姨";
			arrays[1] = "雲嬸兒";
			arrays[2] = "雲大娘";
			
			for (var i = 0; i < arrays.length; i++) {
				console.log(arrays[i]);
			}
			
			arrays.forEach(function(item) {
				console.log(item);
			});
			
			var doubleArray = [["a", "b", "c"],["d", "e", "f"]];
			
			for (var i = 0; i < 2; i++) {
				for (var j = 0; j < 3; j++) {
					console.log(doubleArray[i][j]);
				}
			}
			
			//高大上
			doubleArray.forEach(function(arr) {
				arr.forEach(function(item) {
					console.log("--->" + item);
				});
			});
		</script>
	</body>
</html>

八、 Dom 和事件（最重要）

getElementById(); 通過 ID 屬性獲取到對應的元素對象
getElementsByClassName(); 通過 Class 屬性，獲取到對應的元素對象數組
getElementsByName(); 通過 Name 屬性，獲取到對應的元素對象數組
getElementsByTagName(); 通過標籤名，獲取到對應的元素對象數組

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> DOM 和事件</title>
		<!--
			DOM :Document Object Model
			在 JS 中可以把頁面裏面的所有標籤看做是一個對象
		-->
		<style>
			#ydn { // id 標籤使用#
				color: yellow;
				font-size: 35px;
			}
			
			.yy {
				color: green;
				font-size: 20px;
			}
			
			p[name=ys] {
				color: red;
				font-size: 27px;
				display: none;
			}
		</style>
	</head>
	<body>
		<p id="ydn" class="yy">
			雲大娘準備考駕照，（報名三年了，科目一還沒考呢~~）
		</p>
		<p class="yy">
			雲姨準備在衆意西路買一套房子，也就4W一平米
		</p>
		<p name="ys">
			雲嬸準備買輛五菱榮光~~~
		</p>
		<!--
			這裏是button標籤，是一個按鈕
			click點擊
			使用button的onclick屬性，屬性的值是一個函數名()
		-->
		<button onclick="modify()">雲大娘考駕照</button> <br />
		<button onclick="buyHouse()">雲姨買房子</button> <br />
		<button onclick="buyCar()">雲嬸車</button> <br />
		<script type="text/javascript">
			function modify() {
				/*
				 * 通過ID屬性獲取到指定的標籤，因爲在HTML頁面中，ID屬性不可以重複
				 * getElementById(id屬性)，返回一個確定的標籤
				 */
				var aPtag = document.getElementById("ydn");
				aPtag.style.color = "purple"; //實際上就是在後面加上殊勳:style color = "purple"
			}
			
			function buyHouse() {
				/*
				 * getElementsByClassName();
				 * Elements 返回的是一個標籤的數組，因爲Class選擇器可以用到多個標籤上
				 */
				var pArray = document.getElementsByClassName("yy");
				pArray[1].innerHTML = "房子也不大，也就200平~~~";
			}
			
			function buyCar() {
				var pName = document.getElementsByName("ys");
				pName[0].style.display = "block"; //因爲原來的值隱藏了,這裏加上一個塊就會顯示出來
			}	
		</script>
	</body>
</html>

Js代碼用 script 調用時，放在 head 與 body 的區別

以下默認 head 標籤在 body 標籤上面，因爲 HTML 的加載順序是從上到下的，如果先寫再寫，就會先執行body的內容。
只是瀏覽器加載順序是從上到下，放在head中時，會在頁面加載之前加載到瀏覽器裏，放在body中時，會在頁面加載完成之後讀取。

如果把 javascript 放在 head 裏的話，則先被解析,但這時候 body 還沒有解析。（常規 html 結構都是 head 在前，body 在後）如果 head 的 js 代碼是需要傳入一個參數（在 body 中調用該方法時，纔會傳入參數），並需調用該參數進行一系列的操作，那麼這時候肯定就會報錯，因爲函數該參數未定義（undefined）。

因此定義一個全局對象，而這個對象與頁面中的某個按鈕（等等）有關時，我們必須將其放入 body 中，道理很明顯：如果放入 head，那當頁面加載 head 部分的時候，那個按鈕（等等）都還沒有被定義（也可以說是還沒有被加載，因爲加載的過程就是執行代碼的過程，包括了定義），你能得到的只可能是一個 undefind。

什麼時候應該將其寫在body主體裏呢？爲了實現某些部分動態地創建文檔。這裏比如製作鼠標跟隨事件，肯定只有當頁面加載後再進行對鼠標座標的計算。或者是filter濾鏡與javascript的聯合使用產生的圖片淡入淡出效果等。這個是在頁面加載的時候加載。

而爲什麼我們經常看到有很多的人把js腳本放到head裏面都不擔心出問題？因爲通常把javascript放在head裏的話，一般都會綁定一個監聽，當全部的html文檔解析完之後，再執行代碼：$(document).ready(function(){//執行代碼})

除此之外，**從JavaScript對頁面下載性能方向考慮：**由於腳本會阻塞其他資源的下載（如圖片等）和頁面渲染，直到腳本全部下載並執行完成後，頁面的渲染纔會繼續，因此推薦將所有的

<html>
<head>
   <title>Example</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <p>Change the world by simple products!</p>
   <script type="text/javascript" src="test1.js"></script>
</body>
</html>

JavaEEDay30 JavaScript

JavaEEDay30 JavaScript

JavaScipt 基本語法

一、 JS 函數定義

二、定義變量

三、循環

四、字符串

五、date 方法

六、 Math

七、數組的使用

八、 Dom 和事件（最重要）

Js代碼用 script 調用時，放在 head 與 body 的區別

CentOS 7 安裝 JDK 1.8

JavaEEDay31 XML

JavaDay29 CSS

JavaDay27 反射

JavaDay24 多線程與多進程

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

linux以太網驅動總結