JavaScript由淺到深【含案例原始碼】-有解無憂

1.什么是JavaScript

1.1.JavaScript概念

一門客戶端腳本語言
* 運行在客戶端瀏覽器中的，每一個瀏覽器都有JavaScript的決議引擎
* 腳本語言：不需要編譯，直接就可以被瀏覽器決議執行了

1.2.JavaScript功能

可以來增強用戶和html頁面的互動程序，可以來控制html元素，讓頁面有一些動態的效果，增強用戶的體驗,為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果，通常JavaScript腳本是通過嵌入在HTML中來實作自身的功能的

2.ECMAScript：客戶端腳本語言的標準

2.1.基本語法

2.1.1.與HTML結合方式:

內部JS:
定義<script>，標簽體內容就是js代碼
外部JS：
 定義<script>，通過src屬性引入外部的js檔案

注意：
1. <script>可以定義在html頁面的任何地方，但是定義的位置會影響執行順序，
2. <script>可以定義多個，

2.1.2.注釋

單行注釋寫法：//內容
多行注釋寫法：/* 內容 */

2.1.3.資料型別

原始資料型別(基本資料型別)：
1. number：數字型別，整數/小數/NaN(not a number 一個不是數字的數字型別)
2. string：字串型別，字串 “baidaguo”
3. boolean: 有true和false兩種情況
4. null：空位占位符
5. undefined：未定義，如果一個變數沒有給初始化值，則會被默認賦值為undefined

參考資料型別：是的就是那個萬物皆物件中的那個物件

2.1.4.變數

生命周期:從它們被宣告的時間開始,而區域變數會在函式運行以后被洗掉,全域變數會在頁面關閉后被洗掉，
區域變數:在 JavaScript 函式內部宣告的變數(使用 var)是變數,只能再內部訪問
全域變數:全域可用所有的頁面或腳本皆可用

<script>
	var userId = 1001; //全域變數:整個script腳本中都可用,要注意先后順序
	function printMessage() {
		var userName = "白大鍋";//區域變數:只在當前函式中生效 
		document.write(userId);//使用全域變數的時候，保證使用(方法被呼叫)之前定義并賦值
		document.write(message);
    printMessage();
</script>
<script>
    function printMessage2() {
		var userName2 = "李白2";
		document.write(userId);//這里也可以使用userId 
		//document.write(userName1);//錯誤:呼叫不到printMessage函式中的區域變數 
		document.write(userName2);//正確:可以使用自己函式中的區域變數
}
</script>

2.1.5.運算子

學習運算之前先小試牛刀下:

var a=10;
var b1=a++;
var b2=++a;
var b3=a+++++a+a++;
var b4=1+2+“3”;
var b5=100-“5”;
var b6=12&&21；
var b7=12||21;
b1到b7的值大家知道嗎？

一元運算子：只有一個運算元的運算子
++，-- ， +(正號)
* ++ --: 自增(自減)
* ++(–) 在前，先自增(自減)，再運算
* ++(–) 在后，先運算，再自增(自減)
* +(-)：正負號
* 注意：在JS中，如果運算元不是運算子所要求的型別，那么js引擎會自動的將運算元進行型別轉換
* 其他型別轉number：
* string轉number：按照字面值轉換，如果字面值不是數字，則轉為NaN（不是數字的數字）
* boolean轉number：true轉為1，false轉為0

算數運算子

<script type="text/javascript">
var a;
a=1+2;
document.write("a="+a+"<br>");
a=1+null;
document.write("a="+a+"<br>");
a=1+NaN;
document.write("a="+a+"<br>");
a=true+false;                                                              
document.write("a="+a+"<br>");
a=true+4;
document.write("a="+a+"<br>");
a="3"+2+1;
document.write("a="+a+"<br>");
a=1+2+"3";
document.write("a="+a+"<br>");
</script>

答案如下:
在這里插入圖片描述

賦值運算子
= += -+…

小試牛刀:

var a=10;
a+=5;等價于a=a+5;
a*=5;等價于a=a*5;
a-=5;等價于a=a-5;
a%=5;等價于a=a%5;

比較運算子
< >= <= == ===(全等于)
* 比較方式
1. 型別相同：直接比較
* 字串：按照字典順序比較，按位逐一比較，直到得出大小為止，
2. 型別不同：先進行型別轉換，再比較
* ===：全等于，在比較之前，先判斷型別，如果型別不一樣，則直接回傳false

邏輯運算子
&& || !
* 其他型別轉boolean：
1. number：0或NaN為假，其他為真
2. string：除了空字串("")，其他都是true
3. null&undefined:都是false
4. 物件：所有物件都為true

注意:（1）任何型別的數值進行兩次非運算都能轉換成布爾型；
（2）邏輯&&運算如果第一個是true則輸出結果是第二個，如果第一個是false則輸出結果是第一個；（因為有短路現象）；
（3）邏輯||運算如果第一個是true則輸出結果是第一個，如果第一個是false則輸出是第二個，（因為有短路現象）

三元運算子
* 語法：
* 運算式? 值1:值2;
* 判斷運算式的值，如果是true則取值1，如果是false則取值2；

運算子的優先級
1.先算優先級高的再算優先級低的
2.優先級一樣則從左到右計算

JS特殊語法：

比較運算	描述
===	絕對等于(值和型別均相等)
!==	不絕對等于(值和型別有一個不相等，或兩個都不相等)

練習：99乘法表

<!DOCTYPE html>
		<html lang="en">
		<head>
		    <meta charset="UTF-8">
		    <title>99乘法表</title>
		    <style>
		        td{
		            border: 1px solid;
		        }
		    </style>
		    <script>
		        document.write("<table  align='center'>");
		        //1.完成基本的for回圈嵌套，展示乘法表
			        for (var i = 1; i <= 9 ; i++) {
			            document.write("<tr>");
			            for (var j = 1; j <=i ; j++) {
			                document.write("<td>");
			                 //輸出  1 * 1 = 1
		                document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");
		                document.write("</td>");
		            }
		            /*//輸出換行
		            document.write("<br>");*/
		            document.write("</tr>");
		        }
		        //2.完成表格嵌套
		        document.write("</table>");
		    </script>
		</head>
		<body>
		</body>
		</html>

2.2.基本物件

2.2.1.Function：函式(方法)物件

創建：
1. var fun = new Function(形式引數串列,方法體); //忘掉吧
2.
function 方法名稱(形式引數串列){
方法體
}
3.
var 方法名 = function(形式引數串列){
方法體
}

方法：

屬性：
length:代表形參的個數

特點：
1. 方法定義是，形參的型別不用寫,回傳值型別也不寫，
2. 方法是一個物件，如果定義名稱相同的方法，會覆寫
3. 在JS中，方法的呼叫只與方法的名稱有關，和引數串列無關
4. 在方法宣告中有一個隱藏的內置物件（陣列），arguments,封裝所有的實際引數
5. 呼叫：
方法名稱(實際引數串列);

2.2.2. Array:陣列物件(陣列型別、長度可變)

創建：
1. var arr = new Array(元素串列);
2. var arr = new Array(默認長度);
3. var arr = [元素串列];

方法
join(引數):將陣列中的元素按照指定的分隔符拼接為字串
push() 向陣列的末尾添加一個或更多元素，并回傳新的長度，

屬性
var nameArr=[“寶玉”,“黛玉”,“湘云”];
var len=nameArr.length; //獲取陣列的長度，因為是屬所以不是length()

2.2.3.Boolean

2.3.4. Date：日期物件

創建日期物件：
var date1 = new Date();
var date2 = new Date(milliseconds);
var date3 = new Date(dateString);
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

日期物件方法：
toLocaleString()：回傳當前date物件對應的時間本地字串格式
getTime():獲取毫秒值，回傳當前如期物件描述的時間到1970年1月1日零點的毫秒值差

2.2.5. Math：數學物件

創建：
var num=Math.random();// 回傳 0 ~ 1 之間的亂數，
var max=Math.max(12,34,-90,9);//回傳 n個數值中的最大值，
var min=Math.min(12,34,-90,9);//回傳 n個數值中的最小值，

方法：
random():回傳 0 ~ 1 之間的亂數，含0不含1
ceil(x)：對數進行上舍入，
floor(x)：對數進行下舍入，
round(x)：把數四舍五入為最接近的整數，

Math常用屬性：
var pi=Math.PI;//回傳圓周率

2.2.6. RegExp：正則運算式物件

正則運算式：使用單個字串來描述、匹配一系列符合某個句法規則的字串搜索模式，搜索模式可用于文本搜索和文本替換
1. 單個字符:[]
如： [a] [ab] [a-zA-Z0-9_]
* 特殊符號代表特殊含義的單個字符:
\d:單個數字字符 [0-9]
\w:單個單詞字符[a-zA-Z0-9_]
2. 量詞符號：
?：表示出現0次或1次
*：表示出現0次或多次
+：出現1次或多次
{m,n}:表示 m<= 數量 <= n
* m如果預設： {,n}:最多n次
* n如果預設：{m,} 最少m次
3. 開始結束符號
* ^:開始
* $:結束

正則物件：
1. 創建
1. var reg = new RegExp(“正則運算式”);
2. var reg = /正則運算式/;
2. 方法
test(引數):驗證指定的字串是否符合正則定義的規范

語法
var reg=new RegExp(/正則運算式主體/,修飾符(可選)); 或更簡單的方法
var reg=/正則運算式主體/修飾符(可選);

案例:

var reg=new RegExp(/kaikeba/i);
var reg = /kaikeba/i; //此處定義了一個一個正則運算式， kaikeba 是一個正則運算式主體 (用于檢索)，i 是一個修飾符 (搜索不區分大小寫)，

3.事件簡單學習

常用HTML事件:

事件描述
onchange	HTML 元素改變
onclick	用戶點擊 HTML 元素
onmouseover	用戶在一個HTML元素上移動滑鼠
onmouseout	用戶從一個HTML元素上移開滑鼠
onkeydown	用戶按下鍵盤按鍵
onload	瀏覽器已完成頁面的加載
onfocus	元素獲取焦點時觸發
onblur	元素失去焦點時觸發

代碼:

<body>
			<img id="light" src="img/off.gif"  onclick="fun();">
			<img id="light2" src="img/off.gif">			
			<script>
			    function fun(){
			        alert('我被點了');
			        alert('我又被點了');
			    }			
			    function fun2(){
			        alert('咋老點我？');
			    }			
			    //1.獲取light2物件
			    var light2 = document.getElementById("light2");
			    //2.系結事件
			    light2.onclick = fun2;
			    </script>
		</body>
* 案例1：電燈開關
	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>電燈開關</title>	
	</head>
	<body>
	<img id="light" src="img/off.gif">
	<script>
	    /*
	        分析：
	            1.獲取圖片物件
	            2.系結單擊事件
	            3.每次點擊切換圖片
	                * 規則：
	                    * 如果燈是開的 on,切換圖片為 off
	                    * 如果燈是關的 off,切換圖片為 on
	                * 使用標記flag來完成	
	     */
	    //1.獲取圖片物件
	    var light = document.getElementById("light");
	    var flag = false;//代表燈是滅的， off圖片
	    //2.系結單擊事件
	    light.onclick = function(){
	        if(flag){//判斷如果燈是開的，則滅掉
	            light.src = "img/off.gif";
	            flag = false;
	        }else{
	            //如果燈是滅的，則打開
	            light.src = "img/on.gif";
	            flag = true;
	        }
	       }
	</script>
	</body>
	</html>

效果展示:
在這里插入圖片描述
點擊:

4.BOM(Browser Object Model，中文瀏覽器物件模型)

Window：視窗物件

創建
方法
與彈出框有關的方法：
alert() 顯示帶有一段訊息和一個確認按鈕的警告框，
confirm() 顯示帶有一段訊息以及確認按鈕和取消按鈕的對話框，
* 如果用戶點擊確定按鈕，則方法回傳true
* 如果用戶點擊取消按鈕，則方法回傳false
prompt() 顯示可提示用戶輸入的對話框，
* 回傳值：獲取用戶輸入的值
與打開關閉有關的方法：
close() 關閉瀏覽器視窗，
* 誰呼叫我，我關誰
open() 打開一個新的瀏覽器視窗
* 回傳新的Window物件
3. 與定時器有關的方式
setTimeout() 在指定的毫秒數后呼叫函式或計算運算式，
* 引數：
1. js代碼或者方法物件
2. 毫秒值
* 回傳值：唯一標識，用于取消定時器
clearTimeout() 取消由 setTimeout() 方法設定的 timeout，
setInterval() 按照指定的周期（以毫秒計）來呼叫函式或計算運算式，
clearInterval() 取消由 setInterval() 設定的 timeout，

屬性：
1. 獲取其他BOM物件：
history
location
Navigator
Screen:
獲取DOM物件
document

特點
* Window物件不需要創建可以直接使用 window使用， window.方法名();
* window參考可以省略，方法名();

Location：地址欄物件

創建(獲取)：
1. window.location
2. location
方法：
* reload() 重新加載當前檔案，重繪
屬性
* href 設定或回傳完整的 URL，

History：歷史記錄物件

創建(獲取)：
1. window.history
2. history
方法：
* back() 加載 history 串列中的前一個 URL，
* forward() 加載 history 串列中的下一個 URL，
* go(引數) 加載 history 串列中的某個具體頁面，
* 引數：
* 正數：前進幾個歷史記錄
* 負數：后退幾個歷史記錄
屬性：
* length 回傳當前視窗歷史串列中的 URL 數量，

5.DOM

概念： Document Object Model 檔案物件模型
* 將標記語言檔案的各個組成部分，封裝為物件，可以使用這些物件，對標記語言檔案進行CRUD的動態操作

W3C DOM 標準被分為 3 個不同的部分：
* 核心 DOM - 針對任何結構化檔案的標準模型
* Document：檔案物件
* Element：元素物件
* Attribute：屬性物件
* Text：文本物件
* Comment:注釋物件
* Node：節點物件，其他5個的父物件
* XML DOM - 針對 XML 檔案的標準模型
* HTML DOM - 針對 HTML 檔案的標準模型

核心DOM模型：
* Document：檔案物件

創建(獲取)：在html dom模型中可以使用window物件來獲取
1. window.document
2. document
方法：
獲取Element物件：
1. getElementById() ：根據id屬性值獲取元素物件，id屬性值一般唯一
2. getElementsByTagName()：根據元素名稱獲取元素物件們，回傳值是一個陣列
3. getElementsByClassName():根據Class屬性值獲取元素物件們，回傳值是一個陣列
4. getElementsByName(): 根據name屬性值獲取元素物件們，回傳值是一個陣列
創建其他DOM物件：
createAttribute(name)
createComment()
createElement()
createTextNode()
屬性
Element：元素物件
獲取/創建：通過document來獲取和創建
方法：
1. removeAttribute()：洗掉屬性
2. setAttribute()：設定屬性
* Node：節點物件，其他5個的父物件
* 特點：所有dom物件都可以被認為是一個節點
* 方法：
* CRUD dom樹：
* appendChild()：向節點的子節點串列的結尾添加新的子節點，
* removeChild() ：洗掉（并回傳）當前節點的指定子節點，
* replaceChild()：用新節點替換一個子節點，
* 屬性：
* parentNode 回傳節點的父節點，

HTML DOM

標簽體的設定和獲取：innerHTML
使用html元素物件的屬性
控制元素樣式
1. 使用元素的style屬性來設定
如：
//修改樣式方式1
div1.style.border = “1px solid red”;
div1.style.width = “200px”;
//font-size–> fontSize
div1.style.fontSize = “20px”;
2. 提前定義好類選擇器的樣式，通過元素的className屬性來設定其class屬性值，

5.1.事件監聽機制

概念：某些組件被執行了某些操作后，觸發某些代碼的執行，
* 事件：某些操作，如：單擊，雙擊，鍵盤按下了，滑鼠移動了
* 事件源：組件，如：按鈕文本輸入框…
* 監聽器：代碼，
* 注冊監聽：將事件，事件源，監聽器結合在一起，當事件源上發生了某個事件，則觸發執行某個監聽器代碼，

常見的事件：

點擊事件：
1. onclick：單擊事件
2. ondblclick：雙擊事件
焦點事件
1. onblur：失去焦點
2. onfocus:元素獲得焦點，
加載事件：
1. onl oad：一張頁面或一幅影像完成加載，
滑鼠事件：
1. onm ousedown 滑鼠按鈕被按下，
2. onm ouseup 滑鼠按鍵被松開，
3. onm ousemove 滑鼠被移動，
4. onm ouseover 滑鼠移到某元素之上，
5. onm ouseout 滑鼠從某元素移開，
鍵盤事件：
1. onkeydown 某個鍵盤按鍵被按下，
2. onkeyup 某個鍵盤按鍵被松開，
3. onkeypress 某個鍵盤按鍵被按下并松開，
選擇和改變
1. onchange 域的內容被改變，
2. onselect 文本被選中，
表單事件：
1. onsubmit 確認按鈕被點擊，
2. onreset 重置按鈕被點擊，

幾個Js案例原始碼分享

百度網盤分享需要自取即可有學到的三連支持呀~
鏈接：JavaScript案例原始碼
提取碼：0n4r

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

標籤：其他

上一篇：Javascript 事件

下一篇：JavaScript學習之BOM（BOM，Windows事件，JavaScript執行機制）