【JavaScript】alert的使用方法 | 超详细

这篇具有很好参考价值的文章主要介绍了【JavaScript】alert的使用方法 | 超详细。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

alert作用效果

alert()方法用于显示带有一条指定消息和一个确认的按钮的警告框。

alert使用方法

方法一:直接写在script标签内 

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

注意:

  • 本应该执行主体部分的p标签,但是并没有执行;
  • 这是因为在script中直接定义alert标签,alert之后的脚本都不会运行;
  • 只有在点击确认之后,关闭警示框之后,才会执行;
  • 此类方法,虽然简单但是不建议使用,会影响用户体验。

javascript alert,Web,Web标签,JavaScript基础,javascript,前端,开发语言

方法二:写在body的某个标签内

<!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('叫你别点!点什么点')">别点我</a>
    <br>
    <p>来试试看</p>
</body>
</html>

注意:

  • 这种情况不会出现像方法一的问题;
  • 但是在一个页面中,可能会出现多个alert标签;
  • 不容易维护,所以也不建议使用。 

javascript alert,Web,Web标签,JavaScript基础,javascript,前端,开发语言 

javascript alert,Web,Web标签,JavaScript基础,javascript,前端,开发语言 

方法三:使用外部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的路径,才能进行引用;
  • 最好写在同一个文件夹下;
  • 该方式不会出现第一种方式的问题,不会影响用户观感,也易于维护;
  • 但使用该方式后,这一个scrip标签下的内部alert就不能执行了,只能重新写一个script;
  • 推荐使用这种方式。 

javascript alert,Web,Web标签,JavaScript基础,javascript,前端,开发语言文章来源地址https://www.toymoban.com/news/detail-763644.html

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函数</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>

到了这里,关于【JavaScript】alert的使用方法 | 超详细的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript系列从入门到精通系列第二十篇:使用工厂方法创建JavaScript对象,JavaScript构造函数详解,JavaScript类概念的介绍

    文章目录 一:使用工厂方法创建对象 1:原始写法 2:工厂方式 3:结果验证  二:构造函数 1:什么是构造函数 2:构造函数和普通函数的区别 3:构造函数的执行流程 三:类 1:什么是类 2:如何检查一个对象是否是个类的实例 3:Object的地位 四:构造函数修改 1:重大问题

    2024年02月08日
    浏览(40)
  • 使用JavaScript给图片添加图片水印的前端实现方法

    当涉及图片处理时,JavaScript是一种强大的工具。在本篇博客中,我们将学习如何使用JavaScript来给图片添加水印,并将其封装成一个函数,以便在需要的时候重复使用。 在开始之前,确保你已经准备好了以下内容:         1.一张待添加水印的图片。         2.水印图片。

    2024年03月15日
    浏览(60)
  • 前端使用 JavaScript 检测用户是否在线的6种方法

    1. 使用 navigator.onLine 属性: navigator.onLine 是一个布尔值,表示用户是否与互联网连接。当用户在线时,该属性的值为 true ,当用户离线时,该属性的值为 false 。可以通过监听 online 和 offline 事件来检测用户的在线状态变化。 2. 使用 navigator.connection 对象:` navigator.connection 对象

    2024年02月11日
    浏览(33)
  • 使用JavaScript关闭浏览器窗口的几种方法

    在Web开发中,有时候我们需要通过JavaScript来控制用户的浏览器行为,其中之一就是关闭浏览器窗口。本文将介绍几种使用JavaScript关闭浏览器窗口的方法,并提供相应的源代码示例。 使用window.close方法关闭窗口 要关闭当前窗口,可以使用window.close方法。这个方法会关闭当前浏

    2024年02月04日
    浏览(70)
  • JavaScript 使用 splice 方法删除数组元素可能导致的问题

    splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。 JavaScript 遍历数组并通过 splice 方法删除该数组符合某些条件的元素将会导致哪些问题? 当使用 splice 方法从 JavaScript 数组中删除元素时,可能会

    2023年04月23日
    浏览(41)
  • 【JavaScript】对象 ② ( 对象使用 | 调用对象属性 | 调用对象方法 | 变量与属性区别 | 函数与方法区别 )

    使用字面量创建对象要点 : 在上一篇博客 【JavaScript】对象 ① ( 对象概念 | 对象使用场景 | 使用字面量创建对象 | 空对象字面量 | 小括号 / 中括号 / 大括号 作用 ) 中 , 介绍了 使用 字面量 创建对象 , 有如下要点 : 键值对 : 对象字面量 中的 属性 和 方法 都是以 \\\" 键值对 \\\" 的形

    2024年04月14日
    浏览(52)
  • 使用JavaScript将数字格式化成千分位的n种方法

    1,使用数组方法: 1) 数字转字符串,字符串按照小数点.分割 2) 整数部分拆分成字符串数组,并倒叙 3) 遍历, 按照每三位添加逗号,号 4) 拼接整数部分+小数部分 2.使用字符串的substring截取 1) 数字转字符串,并按照小数点’.’分割 2) 整数部分对3取模,获取余数, 获得substring(0, 余数)的

    2024年02月04日
    浏览(54)
  • 【0基础教程】Javascript 里的分组正则Capturing Groups使用方法及原理

    一、从最简单开始 现有一个字符串: “1-apple” 需要解析出 1 和 apple 来,对应的正则表达式很简单: ^(d)-(.+)$ 其中, ^ 表示字符串的开始,然后一个圆括号包裹的内容表示一个\\\"组\\\": (d) 表示一组数字, (.+) 表示是一组任意值; $ 表示字符串的结束。 对应的代码: 注意,尽

    2024年02月08日
    浏览(57)
  • Python中使用execjs执行JavaScript代码:方法与常见错误解决方案

     简介和背景:          execjs 库的作用和重要性是在Python中执行JavaScript代码。它允许开发者在Python环境下调用JavaScript逻辑和功能,从而实现Python与JavaScript之间的交互。通过 execjs ,Python开发者可以利用JavaScript的强大功能和现有库,拓展Python应用的能力,实现跨语言的灵

    2024年02月10日
    浏览(34)
  • 带你揭开神秘的Javascript AST面纱之Babel AST 四件套的使用方法

    作者:京东零售 周明亮 这里我们初步提到了一些基础概念和应用: 分析器 抽象语法树 AST AST 在 JS 中的用途 AST 的应用实践 有了初步的认识,还有常规的代码改造应用实践,现在我们来详细说说使用 AST, 如何进行代码改造? 其实在解析 AST 这个工具上,有很多可以使用,上

    2023年04月12日
    浏览(25)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包