目錄
(1)實例代碼—οnclick="alert('Hello World');
(1)實例代碼—script代碼塊、alert("您好,我是alert自動彈出框!");
(1)實例代碼— 在js文件中封裝方法、script代碼塊通過屬性src引入
(1)實例代碼—document、getElementById、value
-----前言
上篇文章介紹了有關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 開發工具,鼠標停留在方法名上,可以看到它的方法說明,如下: