JavaScript中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的使用方式1</title>
    <script type="text/javascript">
        alert(("这是一个警告！"));
    </script>
</head>
<body>
    <p>alert（）方法用于显示带有一条指定消息和一个确认的按钮的警告框。</p>
</body>
</html>

<!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>

// 定义一个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>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>head中定义JS函数</title>
    <script type="text/JavaScript">
        function message(){
            alert("调用JS函数！sum(100+200) = " + sum(100,200));}
        function sum(x,y) {
            return x+y;
        }
    </script>
</head>
<body>
    <h4>head标记内定义两个JS函数</h4>
    <p>无返回值函数：message()</p>
    <p>有返回值函数：sum(x,y)</p>
    <form>
        <input name="btnCallJS" type="button" onclick="message();" value="计算并显示两个数的和">
    </form>
</body>
</html>