快捷導(dǎo)航

JavaScript中alert的使用方法超詳細(xì)介紹

更新時(shí)間：2024年01月09日 09:47:23 作者：安心學(xué)編程

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

alert作用效果

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

alert使用方法

方法一：直接寫在script標(biāo)簽內(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(("這是一個(gè)警告！"));
    </script>
</head>
<body>
    <p>alert（）方法用于顯示帶有一條指定消息和一個(gè)確認(rèn)的按鈕的警告框。</p>
</body>
</html>

注意：

本應(yīng)該執(zhí)行主體部分的p標(biāo)簽，但是并沒有執(zhí)行；
這是因?yàn)樵趕cript中直接定義alert標(biāo)簽，alert之后的腳本都不會(huì)運(yùn)行；
只有在點(diǎn)擊確認(rèn)之后，關(guān)閉警示框之后，才會(huì)執(zhí)行；
此類方法，雖然簡(jiǎn)單但是不建議使用，會(huì)影響用戶體驗(yàn)。

方法二：寫在body的某個(gè)標(biāo)簽內(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屬性中，單擊后，會(huì)彈出警告框 -->
    <button onclick="alert('點(diǎn)什么點(diǎn)！')">你點(diǎn)我一下</button>
    <br>
    <!-- 將alert寫在超鏈接的herf屬性中，點(diǎn)擊超鏈接，會(huì)彈出警告框 -->
    <a href="javascript:alert('叫你別點(diǎn)！點(diǎn)什么點(diǎn)')" rel="external nofollow" >別點(diǎn)我</a>
    <br>
    <p>來試試看</p>
</body>
</html>

注意：

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

方法三：使用外部alert

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

<!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(("這是一個(gè)警告！"));
    </script>

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

注意：

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

alert使用實(shí)例

<!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標(biāo)記內(nèi)定義兩個(gè)JS函數(shù)</h4>
    <p>無返回值函數(shù)：message()</p>
    <p>有返回值函數(shù)：sum(x,y)</p>
    <form>
        <input name="btnCallJS" type="button" onclick="message();" value="計(jì)算并顯示兩個(gè)數(shù)的和">
    </form>
</body>
</html>