JavaScript(js)基礎-有解無憂

文章目錄

- 一、 JavaScript的使用
- - 1.body中的JavaScript
  - 2.head中的JavaScript
  - 3.body中的JavaScript函式
  - 4.head中的JavaScript函式
  - 5.外部的JavaScript函式
- 二、JavaScript的輸出
- - 1.使用window.alert()
  - 2.使用document.write()
  - 3.使用innerHTML
  - 4.使用console.log()
- 三、JavaScript注釋
- 四、JavaScript變數
- 五、JavaScript資料型別
- 六、JavaScript函式
- - 1.呼叫帶參函式
  - 2.帶有回傳值的函式
- 七、JavaScript作用域
- 八、JavaScript事件
- 九、JavaScript字串
- 十、JavaScript運算子
- 十一、JavaScript條件陳述句
- 十二、JavaScript回圈陳述句
- 十三、JavaScript型別轉換
- 十四、JavaScript正則運算式
- 十五、JavaScript錯誤例外
- 十六、JavaScript表單
- 十七、驗證API
- 十八、JavaScript this關鍵字
- 十九、JavaScript JSON
- 二十、JavaScript異步編程

JavaScript腳本必須位于<script></script>之間
腳本可被放置在HTML頁面中的<head></head>和<body></body>中

一、 JavaScript的使用

1.body中的JavaScript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			document.write("<h1>body中的JavaScript</h1>");
		</script>
	</body>
</html>

在這里插入圖片描述

2.head中的JavaScript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			document.write("<h1>head中的JavaScript</h1>");
		</script>
	</head>
	<body>
	</body>
</html>

在這里插入圖片描述

3.body中的JavaScript函式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="clock">看這里喲</div>
		<script>
			function myclock() {
				document.getElementById("clock").innerHTML=new Date();
			}
		</script>
		<br>
		<input type="button" onclick="myclock()" value="查看日期"/>
	</body>
</html>

在這里插入圖片描述

4.head中的JavaScript函式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>head中的JavaScript函式</title>
		<script>
			function myclock() {
				document.getElementById("clock").innerHTML=new Date();
			}
		</script>
	</head>
	<body>
		<div id="clock">看這里喲</div>
		<br>
		<input type="button" onclick="myclock()" value="查看日期"/>
	</body>
</html>

在這里插入圖片描述

5.外部的JavaScript函式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外部的JavaScript函式</title>
	</head>
	<body>
		<script src="js檔案的路徑">
		</script>
	</body>
</html>

二、JavaScript的輸出

輸出型別
使用window.alert()彈出提示框（alert前的window通常課省略不寫）
使用document.write()將內容寫到HTML檔案中
使用innerHTML寫入到HTML元素
使用console.log()寫入到瀏覽器的控制臺

1.使用window.alert()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			alert("這是使用window.alert()的輸出");
		</script>
	</body>
</html>

在這里插入圖片描述

2.使用document.write()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			document.write("這是使用document.write()的輸出");
		</script>
	</body>
</html>

在這里插入圖片描述

3.使用innerHTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="demo">
			這是輸出位置
		</div>
		<script>
			document.getElementById("demo").innerHTML="這是innerHTML的輸出"
		</script>
	</body>
</html>

在這里插入圖片描述

4.使用console.log()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			console.log("這是控制臺的輸出");
		</script>
	</body>
</html>

在這里插入圖片描述

三、JavaScript注釋

JavaScript不會執行注釋，我們可以添加注釋來對JavaScript進行解釋，提高代碼的可讀性

注釋型別
單行注釋：//
多行注釋：/* */

四、JavaScript變數

JavaScript變數可用于存放值和運算式
要求：

變數必須以字母開頭
變數也能以$ 和 _ 符號開頭
變數名稱對大小寫敏感

變數的宣告
我們使用 var 關鍵詞來宣告變數
如：var name；
變數宣告后為空值，如要賦值要使用等號
如：name = “小豬佩奇”;
也可以在宣告變數時直接賦值
如：var name = “小豬喬治”;

五、JavaScript資料型別

值型別（基本型別）	參考資料型別
字串（String）	物件(Object)
數字（Number）	陣列(Array)
布爾（Boolean）	函式(Function)
空（null）
未定義（Undefined）
Symbol

物件類代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>物件類的演示</title>
	</head>
	<body>
		<p id="demo">演示文本</p>
		<script>
			var student = {
				/*
				訪問物件屬性的兩種方式：
				1.student.name;
				2.student["name"];
				*/
				name:"郭靖",
				id:"191304",
				classid:"778899",
				information : function() {
					return this.name + this.id + this.classid;
				}
			};
			document.write(student.name + "<br>");
			document.write(student.id + "<br>");
			document.write(student.classid + "<br>");
			/*
			第二種輸出方法，呼叫函式進行輸出
			*/
			document.getElementById("demo").innerHTML = student.information();
		</script>
	</body>
</html>

在這里插入圖片描述

六、JavaScript函式

JavaScript函式語法
function functionname()
{
// 執行代碼
}

1.呼叫帶參函式

function myFunction(var1,var2)
{
代碼
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>		
		<button onclick="myFunction('小豬佩奇','123456')">請點擊</button>
		<script>
			function myFunction(name, id) {
				alert("我叫" + name + ",我的學號是" + id);
			}
		</script>

	</body>
</html>

在這里插入圖片描述

2.帶有回傳值的函式

function myFunction()
{
var x=5;
return x;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>		
		<div id="demo">
			
		</div>
		<script>
			function myFunction() {
				var data = new Date();
				return data;
			}
			document.getElementById("demo").innerHTML = myFunction();
		</script>

	</body>
</html>

在這里插入圖片描述

七、JavaScript作用域

作用域種類
區域作用域（區域變數）
全域作用域（全域變數）

區域作用域：變數在函式內宣告，變數為區域作用域，區域變數只能在函式內部訪問，
全域作用域：變數在函式外定義為全域變數，網頁中所有函式和腳本都可以使用，

注：如果變數在函式內沒有宣告（沒有使用 var 關鍵字），該變數為全域變數，

變數生命周期：

JavaScript 變數生命周期在它宣告時初始化，
區域變數在函式執行完畢后銷毀，
全域變數在頁面關閉后銷毀

八、JavaScript事件

JavaScript可以觸發HTML事件，
如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>		
		<button onclick="this.innerHTML=Date()">現在的時間是?</button>
	</body>
</html>

呼叫前：
在這里插入圖片描述
呼叫后：

其他作用：

頁面加載時觸發事件
頁面關閉時觸發事件
用戶點擊按鈕執行動作
驗證用戶輸入內容的合法性

九、JavaScript字串

JavaScript 字串用于存盤和處理文本，
字串可以是插入到引號中的任何字符，你可以使用單引號或雙引號
你可以使用索引位置來訪問字串中的每個字符，字串的索引從 0 開始
注意：
你可以在字串中使用引號，字串中的引號不要與字串的引號相同:

你也可以在字串添加轉義字符來使用引號：

轉義字符代碼	輸出
`\'`	單引號
`\"`	雙引號
`\\`	反斜杠
`\n`	換行
`\r`	回車
`\t`	tab(制表符)
`\b`	退格符
`\f`	換頁符

字串長度：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<script type="text/javascript">
			var text = "xiaozhupeiqi***";
			document.write("字串長度為：" + text.length);
		</script>
		
		
	</body>
</html>

在這里插入圖片描述

常用字串方法	描述
charAt()	回傳指定索引位置的字符
charCodeAt()	回傳指定索引位置字符的 Unicode 值
concat()	連接兩個或多個字串，回傳連接后的字串
indexOf()	回傳字串中檢索指定字符第一次出現的位置
lastIndexOf()	回傳字串中檢索指定字符最后一次出現的位置
split()	把字串分割為子字串陣列
substr()	從起始索引號提取字串中指定數目的字符
substring()	提取字串中兩個指定的索引號之間的字符
toLowerCase()	把字串轉換為小寫
toUpperCase()	把字串轉換為大寫
toString()	回傳字串物件值
trim()	移除字串首尾空白

十、JavaScript運算子

算術運算子：同java
賦值運算子：同java

用于字串的 “+” ："+" 運算符用于把文本值或字串變數加起來

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<button onclick="myFunction()">點擊這里</button>
		<p id="demo"></p>
	<script>
		function myFunction()
		{
			txt1="I am ";
			txt2="very good";
			txt3=txt1+txt2;
			document.getElementById("demo").innerHTML=txt3;
		}
	</script>
	</body>
</html>

在這里插入圖片描述
注：

兩個數字相加，回傳數字相加的和，如果數字與字串相加，回傳字串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<button onclick="myFunction()">點擊這里</button>
		<p id="demo"></p>
	<script>
		function myFunction()
		{
			var x = 10 + 15;
			var y = "5" + 10;
			var z = "hello" + 520;
			var flag = document.getElementById("demo").innerHTML = x + "<br>" + y + "<br>" + z;
		}
	</script>
	</body>
</html>

在這里插入圖片描述

比較運算子：

運算子	描述
==	等于
===	絕對等于（值和型別均相等）
!=	不等于
!==	不絕對等于（值和型別有一個不相等，或兩個都不相等）
>	大于
<	小于
>=	大于或等于
<=	小于或等于

邏輯運算子：

運算子	描述
`&&`	都為true結果為true，否則結果為false
`\|\|`	有一個為true結果為true
`!`	not，取反

條件運算子：

var name=(condition)?value1:value2

十一、JavaScript條件陳述句

if 陳述句 - 只有當指定條件為 true 時，使用該陳述句來執行代碼
if…else 陳述句 - 當條件為 true 時執行代碼，當條件為 false 時執行其他代碼
if…else if…else 陳述句- 使用該陳述句來選擇多個代碼塊之一來執行
switch 陳述句 - 使用該陳述句來選擇多個代碼塊之一來執行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<button onclick="myFunction()">點擊這里</button>
		<p id="demo"></p>
	<script>
		function myFunction()
		{
			var x;
			var d=new Date().getDay();
			switch (d)
    		{
  				case 6:x="今天是星期六";
    			break;
  				case 0:x="今天是星期日";
    			break;
    			/*
    			default 關鍵詞來規定匹配不存在時做的事情
    			*/
  				default:
    			x="期待周末";
  			}
			document.getElementById("demo").innerHTML=x;
		}
	</script>
	</body>
</html>

在這里插入圖片描述

十二、JavaScript回圈陳述句

for - 回圈代碼塊一定的次數
for/in - 回圈遍歷物件的屬性
while - 當指定的條件為 true 時回圈指定的代碼塊
do/while - 同樣當指定的條件為 true 時回圈指定的代碼塊
使用for/in可以回圈遍歷物件中的屬性
如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<button onclick="myFunction()">點擊這里</button>
		<p id="demo"></p>
	<script>
		function myFunction()
		{
			var x=1;
			var txt="";
			var student={name:"myd",id:"1913040150",age:20}; 
			for (x in student){
				txt=txt + "<br>" + student[x];
			}
			document.getElementById("demo").innerHTML=txt;
		}
	</script>
	</body>
</html>

在這里插入圖片描述

十三、JavaScript型別轉換

將數字轉換為字串

x.toString()

將布林值轉換為字串

false.toString() // 回傳 “false”
true.toString() // 回傳 “true”

將日期轉換為字串

String(new Date())
或者
obj = new Date()
obj.toString()

日期字串轉換的函式：

方法	描述
getDate()	從 Date 物件回傳一個月中的某一天 (1 ~ 31)
getDay()	從 Date 物件回傳一周中的某一天 (0 ~ 6)
getFullYear()	從 Date 物件以四位數字回傳年份
getHours()	回傳 Date 物件的小時 (0 ~ 23)
getMilliseconds()	回傳 Date 物件的毫秒(0 ~ 999)
getMinutes()	回傳 Date 物件的分鐘 (0 ~ 59)
getMonth()	從 Date 物件回傳月份 (0 ~ 11)
getSeconds()	回傳 Date 物件的秒數 (0 ~ 59)

將字串轉換為數字

Number(“3.14”) // 回傳 3.14
Number(" “) // 回傳 0
Number(”") // 回傳 0
Number(“99 88”) // 回傳 NaN

Number中字串轉為數字的方法：

方法	描述
parseFloat()	決議一個字串，并回傳一個浮點數
parseInt()	決議一個字串，并回傳一個整數

將布林值轉換為數字

Number(false) // 回傳 0
Number(true) // 回傳 1

將日期轉換為數字

d = new Date();
Number(d)

自動轉換型別

5 + null // 回傳 5 null 轉換為 0
“5” + null // 回傳"5null" null 轉換為 “null”
“5” + 1 // 回傳 “51” 1 轉換為 “1”
“5” - 1 // 回傳 4 “5” 轉換為 5

自動轉換為字串

當你嘗試輸出一個物件或一個變數時 JavaScript 會自動呼叫變數的 toString() 方法

十四、JavaScript正則運算式

正則運算式是由一個字符序列形成的搜索模式，
當你在文本中搜索資料時，你可以用搜索模式來描述你要查詢的內容，
正則運算式可以是一個簡單的字符，或一個更復雜的模式，
正則運算式可用于所有文本搜索和文本替換的操作，

search() 方法用于檢索字串中指定的子字串，或檢索與正則運算式相匹配的子字串，并回傳子串的起始位置，

search() 方法使用正則運算式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<button onclick="myFunction()">點擊這里</button>
		<p id="demo"></p>
	<script>
		function myFunction()
		{
    		var str = "Hello World!"; 
    		/*
    		 * /runoob/i  是一個正則運算式，
				runoob  是一個正則運算式主體 (用于檢索)，
				i  是一個修飾符 (搜索不區分大小寫)，
    		 */
    		var n = str.search(/World/i);
    		document.getElementById("demo").innerHTML = n;
		}
	</script>
	</body>
</html>

在這里插入圖片描述
search() 方法使用字串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<button onclick="myFunction()">點擊這里</button>
		<p id="demo"></p>
	<script>
		function myFunction()
		{
    		var str = "Hello World!"; 
    		var n = str.search("World");
    		document.getElementById("demo").innerHTML = n;
		}
	</script>
	</body>
</html>

在這里插入圖片描述

replace() 方法用于在字串中用一些字符替換另一些字符，或替換一個與正則運算式匹配的子串，
replace() 方法使用正則運算式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<p>替換World 為 Girl</p>
		<button onclick="myFunction()">點擊這里</button>
		<p id="demo">Hello World</p>
		<script>
			function myFunction()
			{
    			var str = document.getElementById("demo").innerHTML; 
    			var txt = str.replace(/World/i,"Girl");
    			document.getElementById("demo").innerHTML = txt;
			}
		</script>
	</body>
</html>

在這里插入圖片描述
replace() 方法使用字串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<p>替換World 為 Girl</p>
		<button onclick="myFunction()">點擊這里</button>
		<p id="demo">Hello World</p>
		<script>
			function myFunction()
			{
    			var str = document.getElementById("demo").innerHTML; 
    			var txt = str.replace("World","Girl");
    			document.getElementById("demo").innerHTML = txt;
			}
		</script>
	</body>
</html>

在這里插入圖片描述

test() 方法用于檢測一個字串是否匹配某個模式，如果字串中含有匹配的文本，則回傳 true，否則回傳 false，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<script>
			var text=new RegExp("love");
			document.write(text.test("freedom and love are beautiful"));
		</script>
	</body>
</html>

在這里插入圖片描述

exec() 方法用于檢索字串中的正則運算式的匹配，該函式回傳一個陣列，其中存放匹配的結果，如果未找到匹配，則回傳值為 null，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<script>
			var text=new RegExp("love");
			document.write(text.exec("freedom and love are beautiful"));
		</script>
	</body>
</html>

在這里插入圖片描述

十五、JavaScript錯誤例外

try 陳述句測驗代碼塊的錯誤，
catch 陳述句處理錯誤，
throw 陳述句創建自定義錯誤，
finally 陳述句在 try 和 catch 陳述句之后，無論是否有觸發例外，該陳述句都會執行，

使用同java代碼中一樣

十六、JavaScript表單

JavaScript 驗證輸入的數字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<h1>JavaScript 驗證輸入</h1>
		<p>請輸入 1 到 10 之間的數字：</p>
		<input id="num">
		<button type="button" onclick="myFunction()">提交</button>
		<p id="demo"></p>
		<script>
			function myFunction() {
    		var x, text;

    		// 獲取輸入值
    		x = document.getElementById("num").value;
    		if (isNaN(x) || x < 1 || x > 10) {
        		text = "輸入錯誤";
    		} else {
        		text = "輸入正確";
    		}
    		document.getElementById("demo").innerHTML = text;
			}
		</script>
	</body>
</html>

在這里插入圖片描述

郵箱驗證

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function Form(){
				var x=document.forms["myForm"]["email"].value;
				var atpos=x.indexOf("@");
				var dotpos=x.lastIndexOf(".");
				if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
					alert("不是一個有效的 e-mail 地址");
  					return false;
				}
			}
		</script>
	</head>
	<body>	
		<form name="myForm" onsubmit="return Form();" method="post">
		Email: <input type="text" name="email">
		<input type="submit" value="提交">
		</form>
	</body>
</html>

在這里插入圖片描述

以下兩種驗證方法可查閱資料細看，與HTML驗證比較看待

JavaScript 表單驗證
資料驗證

十七、驗證API

約束驗證DOM方法

方法	描述
checkValidity()	如果 input 元素中的資料是合法的回傳 true，否則回傳 false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<p>輸入數字并點擊驗證按鈕:</p>
		<input id="id1" type="number" min="100" max="1000" required>
		<button onclick="myFunction()">驗證</button>
		<p>如果輸入的數字小于 100 或大于1000，會提示錯誤資訊，</p>
		<p id="demo"></p>
		<script>
			function myFunction() {
    			var inpObj = document.getElementById("id1");
    			if (inpObj.checkValidity() == false) {
        			document.getElementById("demo").innerHTML = inpObj.validationMessage;
        			//validationMessage可參考下表屬性
    			} else {
        			document.getElementById("demo").innerHTML = "輸入正確";
    			}
			}
		</script>
	</body>
</html>

在這里插入圖片描述

約束驗證 DOM 屬性

屬性	描述
validity	布爾屬性值，回傳 input 輸入值是否合法
validationMessage	瀏覽器錯誤提示資訊
willValidate	指定 input 是否需要驗證

十八、JavaScript this關鍵字

在方法中，this 表示該方法所屬的物件，
如果單獨使用，this 表示全域物件，
在函式中，this 表示全域物件，
在函式中，在嚴格模式下，this 是未定義的(undefined)，
在事件中，this 表示接收事件的元素，
類似 call() 和 apply() 方法可以將 this 參考到任何物件，

十九、JavaScript JSON

JSON 英文全稱 JavaScript Object Notation
JSON 是用于存盤和傳輸資料的格式，
JSON 通常用于服務端向網頁傳遞資料，

JSON 語法規則

資料為鍵/值對
資料由逗號分隔
大括號保存物件
方括號保存陣列

JSON 資料 - 一個名稱對應一個值
如："name":"小豬佩奇"

JSON 物件：JSON 物件保存在大括號內
如：{"name":"小豬喬治", "url":"www.qiaozhi.com"}

JSON 陣列：JSON 陣列保存在中括號內
如：

"sites":[
    {"name":"佩奇", "url":"www.peiqi.com"}, 
    {"name":"喬治", "url":"www.qiaozhi.com"},
    {"name":"gyt", "url":"www.tb.com"}
]

JSON 字串轉換為 JavaScript 物件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<h2>為 JSON 字串創建物件</h2>
		<p id="demo"></p>
		<script>
			var text = '{ "sites" : [' +
				'{ "name":"peiqi" , "url":"www.peiqi.com" },' +
				'{ "name":"qiaozhi" , "url":"www.qiaozhi.com" },' +
				'{ "name":"gyt" , "url":"www.tb.com" } ]}';
			obj = JSON.parse(text);
			// parse方法見下表
			document.getElementById("demo").innerHTML = obj.sites[2].name + " " + obj.sites[2].url;
		</script>
	</body>
</html>

在這里插入圖片描述

函式	描述
JSON.parse()	用于將一個 JSON 字串轉換為 JavaScript 物件
JSON.stringify()	用于將 JavaScript 值轉換為 JSON 字串

二十、JavaScript異步編程

異步（Asynchronous, async）是與同步（Synchronous, sync）相對的概念
同步按你的代碼順序執行，異步不按照代碼順序執行，異步的執行效率更高

簡單示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<p>回呼函式等待 3 秒后執行，</p>
		<p id="demo"></p>
		<script>
			function print() {
    			document.getElementById("demo").innerHTML="Hello World!";
			}
			setTimeout(print, 3000);
		</script>
	</body>
</html>

在這里插入圖片描述

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

標籤：其他

上一篇：springboot電信客戶忠誠度（原始碼下載）

下一篇：C1-3 web基礎與布局