菜鳥的JavaScript自學筆記整理-有解無憂

整理學習了JavaScript的相關知識，因為筆者學過C++，所以感覺上手javascript比較容易，故本博文整理了一些JavaScript的特殊之處，（雖然筆者還沒有學習過java,但是我知道它兩應該是老婆和老婆餅的關系，）
本博文依據菜鳥教程進行學習與整理，感謝菜鳥教程提供的的大量實體練習：https://www.runoob.com/js/js-intro.html

JavaScript 基礎

JavaScript 是 Web 的編程語言，與筆者上一篇博文的HTML和CSS相比，區別在于：HTML定義網頁的內容，CSS規定網頁的布局，JavaScript 對網頁行為進行編程，它們三個都是在前端奔跑的好伙伴，

JavaScript 是腳本語言
JavaScript 是一種輕量級的編程語言，
JavaScript 是可插入 HTML 頁面的編程代碼，
JavaScript 插入 HTML 頁面后，可由所有的現代瀏覽器執行，

使用方法
可以在html中簡單插入，起到一個頁面的彈窗的效果，
在這里插入圖片描述
輸出方法：

JavaScript可以通過不同的方式來輸出資料︰
使用window.alert( ）彈出警告框，
使用document.write( )方法將內容寫到HTML檔案中，
使用innerHTML 寫入到HTML元素，
使用console.log（）寫入到瀏覽器的控制臺，

<!DOCTYPE html>
<html>
<body>
<script>
document.write("<h1>這是一個標題</h1>");
document.write("<p>這是一個段落</p>");
        alert("看板娘？？");
</script>
</body>
</html>

JavaScript相關語法

賦值運算子

<html>
<head> 
	<meta charset="utf-8"> 
</head>
<body>
	<p id="a"></p>
	<script>
		var x, y, z;
		x = 1;
		y = 2;
		z = (x + y) * 3;
		document.getElementById("a").innerHTML = z;
	</script>
</body>
</html>

<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
	<p id="a"></p>
		<script>
			document.getElementById("a").innerHTML = (1 + 2) * 3;	
		</script>
</body>
</html>

上面兩組代碼運行結果一樣，均為9，

書寫規范
JavaScript 字母的大小寫，JavaScript 對大小寫是敏感的，
JavaScript 中，常見的是駝峰法的命名規則：

var firstName=‘king’;//小駝峰
var FirstName=‘queen’;//大駝峰
var first_name=‘maizi’;//下劃線法

JavaScript代碼塊

<html>
<head> 
	<meta charset="utf-8"> 
</head>
<body>
	<h1>測驗頁面</h1>
		<p id="a">測驗a，</p>
		<div id="b">測驗b，</div>
		<p>
		<button type="button" onclick="myFunction()">點擊</button>
		</p>
	<script>
		function myFunction()
		{
			document.getElementById("a").innerHTML="hello！";
			document.getElementById("b").innerHTML="world！";
		}
	</script>
		<p>點擊上面的按鈕時，兩個元素會改變，</p>
</body>
</html>

運行結果：

變數創建
使用 var 關鍵詞來宣告變數

<html>
<head> 
	<meta charset="utf-8">  
</head>
<body>
	<p>點擊這里來創建變數，并顯示結果，</p>
	<button onclick="myFunction()">點擊</button>
	<p id="x"></p>
		<script>
			function myFunction()
			{
			var name="敲代碼的xiaolang";
			document.getElementById("x").innerHTML=name;	
			}
		</script>
</body>
</html>

運行結果：
在這里插入圖片描述

資料型別

var x = 5;           // 現在 x 為數字
var x = "John";      // 現在 x 為字串
var x1=34.00;      //使用小數點來寫
var x2=34;         //不使用小數點來寫
var y=123e5;      // 12300000
var z=123e-5;     // 0.00123
定義陣列方法：
var arr1 = new Array('a', 'b', 'c');    //這是一個預定義的陣列，在創建時初始化
var arr2 = ['a', 'b', 'c' ];       //在創建時初始化，更簡潔
var arr3 = new Array( );   var arr4 = [ ];     //這兩種是創建空的陣列

JavaScript物件

如果你學過C++，其實和C++蠻像的，JavaScript 物件是變數的容器，
通常 fullName() 是作為 person 物件的一個方法， fullName 是作為一個屬性，如果使用 fullName 屬性，不添加 (), 它會回傳函式的定義：

<html>
<head>
<meta charset="utf-8">  
</head>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
    firstName: "xiao",
    lastName : "lang",
    fullName : function()
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo1").innerHTML = "不加括號輸出函式運算式："  + person.fullName;
document.getElementById("demo2").innerHTML = "加括號輸出函式執行結果："  +  person.fullName();
</script>
	
</body>
</html>

運行結果：
在這里插入圖片描述

JavaScript 函式

下面的運行結果為2

<html>
<head> 
	<meta charset="utf-8"> 
</head>
<body>
	<p id="demo"></p>
		<script>
			function Function(a,b)
			{
				return a*b;
			}
		document.getElementById("demo").innerHTML=Function(1,2);
		</script>
</body>
</html>

呼叫帶引數的函式

<html>
<head> 
	<meta charset="utf-8"> 
</head>
<body>
	<p>請點擊其中的一個按鈕，來呼叫帶引數的函式，</p>
	<button onclick="Function('CSDN','敲代碼的xiaolang')">點擊這里</button>
	<button onclick="Function('stranger','friends')">點擊這里</button>
		<script>
			function Function(name,job)
			{
			alert("Hello " + name + ", Hi " + job);
			}
		</script>
</body>
</html>

在這里插入圖片描述
JavaScript 作用域
在 JavaScript 中, 作用域為可訪問變數，物件，函式的集合，

區域變數：在函式中通過var宣告的變數，
全域變數：在函式外通過var宣告的變數，
沒有宣告就使用的變數，默認為全域變數，不論這個變數在哪被使用，

<html>
<head> 
	<meta charset="utf-8">  
</head>
<body>
	<p>如果你的變數沒有宣告，它將自動成為全域變數：</p>
	<p id="demo"></p>
		<script>
			Function();
			document.getElementById("demo").innerHTML ="我的名字是 " + Name;
			function Function() 
			{
    			Name = "xiaolang";
			}
		</script>
</body>
</html>

運行結果：
在這里插入圖片描述

條件運算子

voteable=(age<18)?"年齡太小":"年齡已達到";
/*如果變數 age 中的值小于 18，則向變數 voteable 賦值 "年齡太小"，否則賦值 "年齡已達到"，*/

JavaScript this 關鍵字

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<h2>JavaScript <b>this</b> 關鍵字</h2>
	<p>實體中，<b>this</b> 指向了 <b>person</b> 物件，</p>
	<p>因為 person 物件是 fullName 方法的所有者，</p>
	<p id="demo"></p>
		<script>// 創建一個物件
			var person = 
			{
  				firstName: "敲代碼的",
  				lastName : "xiaolang",
  				fullName : function()
			{
    			return this.firstName + " " + this.lastName;
  			}
			};
// 顯示物件的資料
            document.getElementById("demo").innerHTML = person.fullName();
		</script>
</body>
</html>

運行結果：
在這里插入圖片描述
單獨使用 this

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<h2>JavaScript <b>this</b> 關鍵字</h2>
	<p>實體中，<b>this</b> 指向了 window 物件:</p>
	<p id="demo"></p>
		<script>
			var x = this;
			document.getElementById("demo").innerHTML = x;
		</script>
</body>
</html>

運行結果
在這里插入圖片描述
函式中使用 this（默認）

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
<h2>JavaScript <b>this</b> 關鍵字</h2>
	<p>實體中，<b>this</b> 表示 myFunction 函式的所有者：</p>
	<p id="demo"></p>
		<script>
			document.getElementById("demo").innerHTML = myFunction();
			function myFunction() 
			{
  				return this;
			}
		</script>
</body>
</html>

運行結果：
在這里插入圖片描述
PS：嚴格模式下，this 為 undefined，因為嚴格模式下不允許默認系結

事件中的this使用
在 HTML 事件中，this 指向了接收事件的 HTML 元素：

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<h2>JavaScript <b>this</b> 關鍵字</h2>
	<button onclick="this.style.display='none'">點擊后此按鈕消失</button>
</body>
</html>

運行結果：
在這里插入圖片描述
物件方法中系結

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<h2>JavaScript <b>this</b> 關鍵字</h2>
	<p>實體中，<b>this</b> 指向了 <b>person</b> 物件，</p>
	<p>因為 person 物件是 fullName 方法的所有者，</p>
	<p id="demo"></p>
		<script>// 創建一個物件
			var person = {
  				firstName: "敲代碼的",
  				lastName : "xiaolang",
  				fullName : function() {
    				return this.firstName + " " + this.lastName;
  		}
};
// 顯示物件的資料
			document.getElementById("demo").innerHTML = person.fullName();
		</script>
</body>
</html>

運行結果：
在這里插入圖片描述
顯式函式系結

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<h2>JavaScript this 關鍵字</h2>
	<p>實體中 <strong>this</strong> 指向了 person2，即便它是 person1 的方法:</p>
	<p id="demo"></p>
		<script>
			var person1 = {
  				fullName: function() {
    				return this.firstName + " " + this.lastName;
  		}
}
			var person2 = {
  				firstName:"敲代碼的",
  				lastName: "xiaolang",
}
			var x = person1.fullName.call(person2); 
			document.getElementById("demo").innerHTML = x; 
		</script>
</body>
</html>

運行結果
在這里插入圖片描述

JSON
JSON 是用于存盤和傳輸資料的格式，JSON 通常用于服務端向網頁傳遞資料，JSON 是一種輕量級的資料交換格式，JSON 使用 JavaScript 語法，但是 JSON 格式僅僅是一個文本

參考鏈接：https://www.runoob.com/json/json-tutorial.html

JSON 語法規則：
資料為鍵/值對，
資料由逗號分隔，
大括號保存物件，
方括號保存陣列，

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<h2>為 JSON 字串創建物件</h2>
	<p id="demo"></p>
		<script>
			/*創建 JavaScript 字串，字串為 JSON 格式的資料：*/
			var text = '{ "sites" : [' +
			'{ "name":"baidu" , "url":"www.baidu.com" },' +
			'{ "name":"Google" , "url":"www.google.com" },' +
			'{ "name":"bing" , "url":"www.bing.com" } ]}';	
			/*使用 JavaScript 內置函式 JSON.parse() 將字串轉換為 JavaScript 物件:*/
			obj = JSON.parse(text);
			document.getElementById("demo").innerHTML = obj.sites[0].name + " " + obj.sites[0].url;
		</script>
</body>
</html>

運行結果：
在這里插入圖片描述

要實作從JSON字串轉換為JS物件，使用 JSON.parse() 方法
要實作從JS物件轉換為JSON字串，使用 JSON.stringify() 方法

JavaScript 代碼規范
參考連接，此處不再整理：https://www.runoob.com/js/js-conventions.html

好，我繼續說…

JavaScript DOM 及事件

當網頁被加載時，瀏覽器會創建頁面的檔案物件模型（Document Object Model），HTML DOM 模型被構造為物件的樹，菜鳥教程上的圖感覺不好理解，筆者又在網上找了一張：
在這里插入圖片描述
DOM:DOM 稱為檔案物件模型，是一個表示和處理檔案的應用程式介面(API)，可以用于動態訪問、更新檔案的內容、結構和樣式，
DOM將網頁中檔案的物件關系規劃為節點層級，構成它們之間的等級關系，這種各物件間的層次結構被稱為節點樹，

結點的訪問
1.通過 id 查找 HTML 元素

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<p id="intro">hello world!</p>
	<p>該實體展示了 <b>getElementById</b> 方法!</p>
		<script>
			x=document.getElementById("intro");
			document.write("<p>文本來自 id 為 intro 段落: " + x.innerHTML + "</p>");
		</script>
</body>
</html>
/*如果找到該元素，則該方法將以物件（在 x 中）的形式回傳該元素，
如果未找到該元素，則 x 將包含 null，*/

運行結果：
在這里插入圖片描述
2.通過標簽名查找 HTML 元素

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
<p>hello world!</p>
<div id="main">
<p> DOM 是非常有用的，</p>
<p>該實體展示了  <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一個段落為：' + y[0].innerHTML);
</script>
</body>
</html>
/*本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素*/

運行結果：
在這里插入圖片描述
3.通過類名找到 HTML 元素

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<p class="intro">你好菜鳥!</p>
	<p>該實體展示了 <b>getElementsByClassName</b> 方法!</p>
		<script>
			x=document.getElementsByClassName("intro");
			document.write("<p>文本來自 class 為 intro 段落: " + x[0].innerHTML + "</p>");
		</script>
	<p><b>注意：</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法，</p>
</body>
</html>

運行結果：
在這里插入圖片描述
更多實體練習：https://www.runoob.com/jsref/met-document-getelementsbyclassname.html

事件的概述

學習本部分，為后期xss學習做鋪墊，

什么是事件
javascript與HTML之間互動就是通過事件實作的，事件就是檔案或瀏覽器視窗中發生的一些特定的互動瞬間事件在瀏覽器中是以物件的形式存在的，即event，觸發一個事件，就會產生一個事件物件event，
該event物件包含著所有與事件有關的資訊，包括導致事件的元素、事件的型別以及其他與特定事件相關的資訊

更多事件串列參考鏈接：https://www.runoob.com/jsref/dom-obj-event.html

對事件做出反應
在事件發生時執行 JavaScript，比如當用戶在 HTML 元素上點擊時，

<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<h1 onclick="this.innerHTML='瑪卡巴卡'">點擊文本!</h1>
</body>
</html>

HTML 事件屬性
向 HTML 元素分配事件，可以使用事件屬性，

<html>
<head> 
	<meta charset="utf-8">  
</head>
<body>
	<p>點擊按鈕執行 <em>displayDate()</em> 函式.</p>
	<button onclick="displayDate()">點這里</button>
		<script>
			function displayDate(){
				document.getElementById("demo").innerHTML=Date();
}
		</script>
	<p id="demo"></p>
</body>
</html>

可以生成一個訪問當前的時間：
在這里插入圖片描述
onload 和 onunload 事件
onl oad 和 onunload 事件會在用戶進入或離開頁面時被觸發，onload 和 onunload 事件可用于處理 cookie，

<html>
<head>
	<meta charset="utf-8">
</head>
<body onl oad="checkCookies()">
	<script>
		function checkCookies(){
			if (navigator.cookieEnabled==true){
			alert("Cookies 可用")
	}
			else{
			alert("Cookies 不可用")
	}
}
	</script>
	<p>彈窗-提示瀏覽器 cookie 是否可用，</p>	
</body>
</html>

運行結果：
在這里插入圖片描述
onchange 事件
onchange 事件常結合對輸入欄位的驗證來使用，

<html>
<head>
	<meta charset="utf-8">
</head>
<head>
	<script>
		function myFunction(){
			var x=document.getElementById("fname");
			x.value=x.value.toUpperCase();
}
	</script>
</head>
<body>
輸入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>當你離開輸入框后，函式將被觸發，將小寫字母轉為大寫字母，</p>
</body>
</html>

在這里插入圖片描述
onmouseover 和 onm ouseout 事件

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div onm ouseover="mOver(this)" onm ouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="滑鼠劃過此界面"
}
function mOut(obj){
	obj.innerHTML="滑鼠放上去"
}
</script>

</body>
</html>

運行結果：
在這里插入圖片描述
更多的實體練習可以在菜鳥上練習：https://www.runoob.com/js/js-htmldom-events.html

今天看了一個博主寫的C++面試時的考題，我覺得我已經失業了，說實話，我一個也答不上來，，，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292973.html

標籤：其他

上一篇：Node.js 模塊加載及包的管理

下一篇：網站前端性能優化終極指南