網頁搭建入門---javascript入門

JavaScript基礎語法

JS輸出

window.alert()警告框
document.write()寫到HTML文檔
innerHTML寫到HTML元素
console.log()寫到瀏覽器後臺

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js輸出</title>
</head>
<body>
	<p id="one"></p>
	<script type="text/javascript">
		/**
		window.alert() 警告框
		document.write() 寫到 HTML 文檔中
		innerHTML 寫到 HTML 元素
		console.log() 寫到瀏覽器的控制檯
		**/

		alert('helloworld');

		document.write('helloworld');

		document.getElementById('one').innerHTML = "this is p";

		console.log(123)
	</script>
</body>
</html>

JS變量

變量必須以字母開頭
變量也能以$和_開頭(不推薦)
變量區分大小寫

JS數據類型

字符串（String）
數字（Number）
布爾（Boolean）
數組（Array）
空（Null）
未定義（Undefined）

JS函數

函數是由事件驅動或者當他被調用執行的可重複使用的代碼塊
function a(參數){} 聲明會前置
var a = function(參數){}
函數中的return

JS中的運算符

賦值運算符
算術運算符
字符串的+運算符

JS的比較和邏輯運算符

<小於
>大於
==等於1==‘1’
===絕對等於（值和類型均相等）
!=不等於
&& and
|| or

JS條件語句和switch語句

條件語句 if else if else
switch 語句 switch case break default

JS的for循環和while循環

for -循環代碼塊一定的次數
for/in 循環遍歷對象
while 當指定條件爲true時循環指定的代碼塊

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js中for循環與while循環</title>
</head>
<body>
	<script type="text/javascript">
		/**
		 *
		 *  for - 循環代碼塊一定的次數
			for/in - 循環遍歷對象
			while - 當指定的條件爲 true 時循環指定的代碼塊
		 */
		
		for( var i = 0; i < 10 ; i++ ){
			console.log('i:'+ i);
		}

		var person = {
			name : 'json',
			age : 25,
			sg: 170
		}

		for( key in person ){
			console.log(person[key])
		}

		var count = 1;
		while( count < 10 ){
			count++ ;
			console.log('執行while循環');
		}
	</script>
</body>
</html>

JS中的break和continue語句

break可用於跳出循環
continue語句跳出本次循環，繼續執行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js Break 和 Continue 語句</title>
</head>
<body>
	<script type="text/javascript">
		/**
		 *  break 語句可用於跳出循環
			continue 語句跳出本次循環，繼續執行
		 */
		
		for (var i=0;i<10;i++){
		    if (i==3)
		    {
		        break;
		    }
		    console.log( "The number is " + i + "<br>");
		}



		for (var i=0;i<10;i++){
		    if (i==3){ 
		    	continue;
		    }
		    console.log("The number is " + i + "<br>");
		}
	</script>
</body>
</html>

JS HTML DOM

DOM簡介

獲得元素

document.getElementById()
document.getElementByTagName()
document.getElementByClassName()

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dom簡介</title>
</head>
<body>
	<div id="intro">helloworld</div>


	<div id="main">
		<p>The DOM is very useful.</p>
	</div>

	<div class="content">1</div>
	<div class="content">2</div>
	<div class="content">3</div>
	<div class="content">4</div>

	<script type="text/javascript">
		// 通過js獲取html標籤
		var intro = document.getElementById("intro");  // 通過id找html，唯一的


		var main = document.getElementById("main");
		var p = main.getElementsByTagName("p")[0];

		var content1 = document.getElementsByClassName("content")[0];
	</script>
</body>
</html>

修改HTML內容

document.getElementById(id).innerHTML="helloworld"

修改HTML屬性

element.getAttribute()
element.setAttribute()
element.src
element.href

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dom html</title>
</head>
<body>
	<div id="main" data="nihao">123</div>

	<img src="1.jpg" id="image" />

	<a id="goUrl" href="">調到百度</a>
	<script type="text/javascript">
		var main = document.getElementById("main");
		main.innerHTML= 'helloWorld';
		main.setAttribute("data", "buhao");
		main.setAttribute("dd", "ddname");

		var image = document.getElementById("image");
		image.src = "2.jpg";

		var goUrl = document.getElementById("goUrl");
		goUrl.href = "http://www.baidu.com"
	</script>
</body>
</html>

修改樣式

document.getElementById('id1').style.color='blue'

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dom css</title>
</head>
<body>
	<div id="main">helloworld</div>
	<script type="text/javascript">
		var main = document.getElementById("main");
		main.style.color = "blue";
		main.style.fontSize = "100px";
	</script>
</body>
</html>

DOM事件的不同寫法

<h1 οnclick="this.innerHTML="謝謝" >請點擊該文本</h1>
Element.οnclick=function(){displayDate()}
Element.addEventListener("click",function(){});(推薦使用)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dom 事件</title>
</head>
<body>
	<div οnclick="alert('helloworld')">按鈕</div>


	<div id="main">我是main</div>


	<div id="btn">我是btn</div>

	<script type="text/javascript">
		var main = document.getElementById("main");
		main.onclick = function(){
			alert("main被觸發了");
		}
		var btn = document.getElementById("btn");
		btn.addEventListener("click", function(){
			alert("btn被觸發了");
		});
	</script>
</body>
</html>

添加和刪除節點

document.createElement('p')
document.createTextNode("新增")
parent.appendChild(child)
parent.removeChild(child)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dom 節點</title>
</head>
<body>
	<div id="div1">
		<p id="p1">我是第一個p</p>
		<p id="p2">我是第二個p</p>
	</div>
	<script type="text/javascript">
		/**
		 *		document.createElement("p")  
				document.createTextNode("新增")
				parent.appendChild(child);
				parent.removeChild(child);
		 * 
		 */

		var p = document.createElement("p"); // <p></p>  
		var word = document.createTextNode("我是新增的p標籤");  // 我是新增的p標籤

		p.appendChild(word);  //<p>我是新增的p標籤</p>


		var div1 = document.getElementById("div1");
		div1.appendChild(p);  


		var p1 = document.getElementById("p1");
		div1.removeChild(p1);
	</script>
</body>
</html>

JS Window

所有瀏覽器都支持 window對象。它表示瀏覽器窗口。
所有 JavaScript全局對象、函數以及變量均自動成爲 window對象的成員。
全局變量是 window對象的屬性。
全局函數是 window對象的方法。

window的方法

window.open()-打開新窗口
window.close(0)-關閉當前窗囗
window.moveTo()-移動當前窗口
window.resizeTo()-調整當前窗口的尺寸

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Js window</title>
</head>
<body>
	<button οnclick="openwindow()">創建窗口</button>
	<button οnclick="myFunction()">調整窗口</button>
	<button οnclick="moveFunction()">移動窗口</button>
	<button οnclick="closeFunction()">關閉窗口</button>
	
	<script type="text/javascript">
		var w;
		
		function openwindow(){
			w=window.open('','', 'width=300,height=300');
		}


		function myFunction(){
			w.resizeTo(500,500);
			w.focus();
		}
		

		function moveFunction(){
			w.moveTo(700,500);
			w.focus();
		}
		

		function closeFunction(){
			w.close(700,500);
			w.focus();
		}
	</script>
</body>
</html>

window.screen

window.screen對象在編寫時可以不使用 window這個前綴。
screen.availWidth-可用的屏幕寬度
screen.availHeight-可用的屏幕高度

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>window screen</title>
</head>
<body>
	<script type="text/javascript">
		/**
		 *	screen.availWidth - 可用的屏幕寬度
			screen.availHeight - 可用的屏幕高度
			1920 * 1080
		 * 
		 */
		
		alert(screen.availWidth);

		alert(screen.availHeight);

	</script>
</body>
</html>

window.Location

location.hostname 返回web主機的域名
location.pathname 返回當前頁面的路徑和文件名
location.protocol 返回所使用的web協議http://或https://
location.href 返回(當前頁面的)整個URL

window.history

window.history 對象在編寫時可不使用 window這個前綴
history.backe() 與在瀏覽器點擊後退按鈕相同
history.forward()-與在瀏覽器中點擊按鈕向前相同
history.go()

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>window history</title>
</head>
<body>
	<script type="text/javascript">
		/**
		 *  window.history 對象在編寫時可不使用 window 這個前綴
			history.back() - 與在瀏覽器點擊後退按鈕相同
			history.forward() - 與在瀏覽器中點擊按鈕向前相同
			history.go()
		 */

		history    
		1、前端開發
		2、後端開發     
		3、移動開發    當前頁面

		history.go(-2)
	</script>
</body>
</html>

網頁搭建入門---javascript入門

JavaScript基礎語法

JS輸出

JS變量

JS數據類型

JS函數

JS中的運算符

JS的比較和邏輯運算符

JS條件語句和switch語句

JS的for循環和while循環

JS中的break和continue語句

JS HTML DOM

DOM簡介

獲得元素

修改HTML內容

修改HTML屬性

修改樣式

DOM事件的不同寫法

添加和刪除節點

JS Window

window的方法

window.screen

window.Location

window.history

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

Spring boot理財系統3 Swagger

Spring boot理財系統4 Jsonrpc

Spring boot理財系統1

Spring boot理財系統2 管理端

SSM到Spring Boot-從零開發校園商鋪平九（前端展示系統）

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

linux以太網驅動總結