JavaScript中alert的使用方法超詳細介紹

更新時間：2024年01月09日 09:47:23 作者：安心學編程

JS中的alert作用是在瀏覽器中彈出一個警告框,而使用alert有三種方式,不同的方式所呈現(xiàn)的效果也不相同,這篇文章主要給大家介紹了關于JavaScript中alert使用方法的相關資料,需要的朋友可以參考下

alert作用效果

alert（）方法用于顯示帶有一條指定消息和一個確認的按鈕的警告框。

alert使用方法

方法一：直接寫在script標簽內(nèi)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中alert的使用方式1</title>
    <script type="text/javascript">
        alert(("這是一個警告！"));
    </script>
</head>
<body>
    <p>alert（）方法用于顯示帶有一條指定消息和一個確認的按鈕的警告框。</p>
</body>
</html>

注意：

本應該執(zhí)行主體部分的p標簽，但是并沒有執(zhí)行；
這是因為在script中直接定義alert標簽，alert之后的腳本都不會運行；
只有在點擊確認之后，關閉警示框之后，才會執(zhí)行；
此類方法，雖然簡單但是不建議使用，會影響用戶體驗。

方法二：寫在body的某個標簽內(nèi)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中alert的使用方式1</title>
</head>
<body>
    <!-- 將alert寫在onclick屬性中，單擊后，會彈出警告框 -->
    <button onclick="alert('點什么點！')">你點我一下</button>
    <br>
    <!-- 將alert寫在超鏈接的herf屬性中，點擊超鏈接，會彈出警告框 -->
    <a href="javascript:alert('叫你別點！點什么點')" rel="external nofollow" >別點我</a>
    <br>
    <p>來試試看</p>
</body>
</html>

注意：

這種情況不會出現(xiàn)像方法一的問題；
但是在一個頁面中，可能會出現(xiàn)多個alert標簽；
不容易維護，所以也不建議使用。

方法三：使用外部alert

// 定義一個alert_usage3_out.js文件，用于專門存放alert標簽
alert("這是一個外部文件的警告");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中alert的使用方式2</title>
</head>
<body>
    <script type="text/javascript" src="alert_usage3_out.js">
    // 加入src=“路徑”，就可以鏈接此文件
    alert(("這是一個警告！"));
    </script>

<script type="text/javascript" >
    // 加入src=“路徑”，就可以鏈接此文件
    alert(("這是一個警告！"));
    </script>
</body>
</html>

注意：

使用這種方式，需要記住外部alert的路徑，才能進行引用；
最好寫在同一個文件夾下；
該方式不會出現(xiàn)第一種方式的問題，不會影響用戶觀感，也易于維護；
但使用該方式后，這一個scrip標簽下的內(nèi)部alert就不能執(zhí)行了，只能重新寫一個script；
推薦使用這種方式。

alert使用實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>head中定義JS函數(shù)</title>
    <script type="text/JavaScript">
        function message(){
            alert("調(diào)用JS函數(shù)！sum(100+200) = " + sum(100,200));}
        function sum(x,y) {
            return x+y;
        }
    </script>
</head>
<body>
    <h4>head標記內(nèi)定義兩個JS函數(shù)</h4>
    <p>無返回值函數(shù)：message()</p>
    <p>有返回值函數(shù)：sum(x,y)</p>
    <form>
        <input name="btnCallJS" type="button" onclick="message();" value="計算并顯示兩個數(shù)的和">
    </form>
</body>
</html>