web快速入門之基礎篇-js:1_2、JavaScript 概述、基礎語法(案例效果演示)

目錄

-----前言

-----js代碼實例演示

1、html頁面彈出窗口

(1)實例代碼—οnclick="alert('Hello World');

(2)效果演示

2、使用script代碼塊_自動彈窗口

(1)實例代碼—script代碼塊、alert("您好,我是alert自動彈出框!");

(2)效果演示

3、添加調用script代碼塊的方法

(1)實例代碼

(2)效果演示

4、調用封裝在js文件中的方法

(1)實例代碼— 在js文件中封裝方法、script代碼塊通過屬性src引入

(2)效果演示

5、測試js中的特殊字符

(1)實例代碼

(2)效果演示

6、測試js中的類型轉換

(1)實例代碼

(2)效果演示

7、js輸入數據計算平方

(1)實例代碼—document、getElementById、value

(2)效果演示

8、js猜數遊戲

(1)實例代碼—三目運算符、onblur方法

(2)效果演示

9、js中的 == 和===, if條件語句

(1)實例代碼

(2)效果演示

----- ***初學者注意點


-----前言

上篇文章介紹了有關JavaScript 概述、基礎語法,詳見可參考博文:web快速入門之基礎篇-js:1_1、JavaScript 概述、基礎語法 ,本來是寫一篇博文的,然而感覺篇幅太長不方便查閱,所以另起一篇,這篇將寫一些例子來演示。

-----js代碼實例演示

1、html頁面彈出窗口

(1)實例代碼—οnclick="alert('Hello World');

我們先來看看一個例子,如下代碼:js01_(html彈出窗口).html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<!-- 編碼類型,:純文本html,字符類型utf-8 -->
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	</head>
	<body>
		<form>
			<!-- 
			onclick: 響應單擊事件;   
			alert:輸出 ; 
			字符串可用雙引號( “” )或單引號( ' ' ) ;  
			這裏用雙引號起衝突, 在Hello前面就認爲結束了
			  -->
			<input type="button" value="按鈕" οnclick="alert('Hello World');"/>
		</form>
	</body>
</html>

(2)效果演示

用谷歌瀏覽器打開運行,效果如下:

運行以後會出現一個按鈕,點擊按鈕以後會出現如上圖片效果

2、使用script代碼塊_自動彈窗口

(1)實例代碼—script代碼塊、alert("您好,我是alert自動彈出框!");

我們先來看看一個例子,如下代碼:js02_(script代碼塊_自動彈窗口).html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>

<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<!--
		type="text/javascript":類型爲純文本的javascript
		language="javascirpt":語言爲javascirpt(新版本一般不寫)
	-->
	<script type="text/javascript" language="javascirpt">
		// alert方法: 用於輸出;
		// 這裏沒寫js方法, 自動彈出
		alert("您好,我是alert自動彈出框!");
	</script>

</head>

<body>
</body>

</html>

 

(2)效果演示

用谷歌瀏覽器打開運行,效果如下:

3、添加調用script代碼塊的方法

(1)實例代碼

我們先來看看一個例子,如下代碼:js03_(添加調用script代碼塊的方法).html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>

<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<script type="text/javascript" language="javascirpt">
		//方法的定義:  function 方法名{ ... }
		function Method1() {
			alert("hello,我是script代碼塊裏面的方法!");
		}
	</script>

</head>

<body>
	<form>
		<!-- οnclick="Method1(); 響應script代碼塊的方法 -->
		<input type="button" value="按鈕" οnclick="Method1();" />
	</form>
</body>

</html>

(2)效果演示

用谷歌瀏覽器打開運行,效果如下:

運行以後會出現一個按鈕,點擊按鈕以後會出現如上圖片效果

4、調用封裝在js文件中的方法

(1)實例代碼— 在js文件中封裝方法、script代碼塊通過屬性src引入

我們先來看看一個例子,如下代碼:js04_(調用封裝在js文件中的方法).html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>

<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<!-- 把script代碼塊的方法,封裝在js文件中,通過屬性src引入 -->
	<script src="jsCode1.js" type="text/javascript" language="javascirpt"> </script>
</head>

<body>
	<form>
		<!-- οnclick="Method2(); 響應script代碼塊的方法 -->
		<input type="button" value="按鈕" οnclick="Method2();" />

	</form>
</body>

</html>

接下來我們來看看 js 代碼:jsCode1.js

//只能包含js代碼
//script代碼塊方法, 定義在這

function Method2(){
	alert("js in file");
}

(2)效果演示

用谷歌瀏覽器打開運行,效果如下:

5、測試js中的特殊字符

(1)實例代碼

我們先來看看一個例子,如下代碼:js05_(js中的特殊字符).html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>

<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script type="text/javascript" language="javascirpt">
		function Method3() {
			alert("ma\"r\'\ny"); //\ 進行轉義:半雙引號(")、半單引號(')、換行(\n)
			alert("\u4e00");// 一
		}
	</script>
</head>

<body>
	<form>
		<input type="button" value="測試特殊字符—按鈕" οnclick="Method3();" />
	</form>
</body>

</html>

(2)效果演示

用谷歌瀏覽器打開運行,效果如下:

代碼寫了2個alert彈出框,點擊確定會再次彈出,如下:

6、測試js中的類型轉換

(1)實例代碼

我們先來看看一個例子,如下代碼:js06_(測試js中的類型轉換).html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>

<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<script type="text/javascript" language="javascirpt">
		function Method1() {
			var s = "a";
			var n = 10;
			var b1 = true;
			var b2 = false;

			alert(s + n);//a10  字符串+數字
			alert(s + b1);//atrue 字符串+布爾類型
			alert(n + b1);//11 數字+布爾類型
			alert(b1 + b2);//1 布爾類型+布爾類型

		}
	</script>

</head>

<body>
	<form>
		<input type="button" value="類型轉換—按鈕" οnclick="Method1();" />
	</form>
</body>

</html>

(2)效果演示

用谷歌瀏覽器打開運行,依次會彈出:a10、atrue、11、1 的彈出框,這裏就不截圖了

7、js輸入數據計算平方

(1)實例代碼—document、getElementById、value

我們先來看看一個例子,如下代碼:js07_(js輸入數據計算平方).html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>

<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script src="jsCode2.js" type="text/javascript" language="javascirpt"></script>
</head>

<body>
	<form>
		<!--標識id,js文件可以通過對應, 獲取相應值-->
		<input type="text" id="txtNumber" />
		<input type="button" value="計算平方" οnclick="getSquare();" />

	</form>
</body>

</html>

接下來我們來看看 js 代碼:jsCode2.js


//只能包含js代碼
//script代碼塊方法, 定義在這

//計算錄入數值的平方
function getSquare(){
	//得到錄入的內容
	//document:代表整個文檔
	//getElementById:根據id獲取元素
	//value:與input的value對應->獲取對應屬性值
	var s = document.getElementById("txtNumber").value;

	//判斷是否爲一個數值
	if(isNaN(s)) {
		alert("請輸入數值");
	}else {
		//類型轉換,將字符串轉換爲浮點數
		var n = parseFloat(s);//12.35
		//計算
		alert(n*n);
	}	
}

(2)效果演示

用谷歌瀏覽器打開運行,效果如下:

8、js猜數遊戲

(1)實例代碼—三目運算符、onblur方法

我們先來看看一個例子,如下代碼:js08_(js猜數遊戲).html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>

<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script src="jsCode3.js" type="text/javascript" language="javascript"></script>
</head>

<body>
	<form>
		猜數遊戲: 1、內置好結果  2、錄入完畢   3、大了或者小了
		<!-- onblur: 當元素失去焦點後, 響應方法事件 -->
		<input type="text" οnblur="judgeNumber();" id="txt1" />
	</form>
</body>

</html>

接下來我們來看看 js 代碼:jsCode3.js


//只能包含js代碼
//script代碼塊方法, 定義在這

//猜數字
function judgeNumber(){
	var result = 10;
	var s = document.getElementById("txt1").value;
	var n = parseInt(s);
	//三目運算符:
	//n和result比較,彈出小了、大了或相等
	var r = result > n?"小了":"大了或相等";
	alert(r);
}

(2)效果演示

用谷歌瀏覽器打開運行,效果如下:

9、js中的 == 和===, if條件語句

(1)實例代碼

我們先來看看一個例子,如下代碼:js09_(js中的==和===, if條件語句 ).html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>

<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<!-- 	
		(1)a == b:比較值  
		(2)嚴格相等: a === b:比較值以及類型相同  -->
	<script type="text/javascript" language="javascript">
		function Method1() {
			var a = 100;
			var b = "100";
			if (a == b)
				alert("equal");
			if (a === b)
				alert("same");
			if ("" == 0)
				alert("sss");
		}
	</script>

</head>

<body>

	<form>
		<input type="button" value="按鈕" οnclick="Method1();" />
	</form>

</body>

</html>

(2)效果演示

用谷歌瀏覽器打開運行,依次彈出的是: equal、sss,這裏就不截圖了!

因爲雙等號比較的是值,三個等號比較的是值和類型

 

----- ***初學者注意點

1、當忘記寫</script>,會出現什麼都不顯示

2、自己寫的 js 文件,src="jsCode1.js" 這個js文件名引入的時候別寫錯啦

3、VSCode格式化的快捷鍵 alt + shfit + f

4、剛剛寫的 js 方法,其實可以放到一個 js 文件( jsCode4_all.js )裏面,如下:

script代碼塊,src 引入的時候名字對應上,別寫錯了。如: src="jsCode4_all.js"


//只能包含js代碼
//script代碼塊方法, 定義在這

function Method2(){
	alert("js in file");
}


//計算錄入數值的平方
function getSquare() {
	//得到錄入的內容
	//document:代表整個文檔
	//getElementById:根據id獲取元素
	//value:與input的value對應->獲取對應屬性值
	var s = document.getElementById("txtNumber").value;

	//判斷是否爲一個數值
	if (isNaN(s)) {
		alert("請輸入數值");
	} else {
		//類型轉換,將字符串轉換爲浮點數
		var n = parseFloat(s);//12.35
		//計算
		alert(n * n);
	}
}


//猜數字
function judgeNumber() {
	var result = 10;
	var s = document.getElementById("txt1").value;
	var n = parseInt(s);
	//三目運算符:
	//n和result比較,彈出小了、大了或相等
	var r = result > n ? "小了" : "大了或相等";
	alert(r);
}

5、用 VSCode 開發工具,鼠標停留在方法名上,可以看到它的方法說明,如下:

 

 

 

 

 

 

 

 

 

 

 

發佈了284 篇原創文章 · 獲贊 47 · 訪問量 13萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章