JavaScript中的交互的方式alert,prompt,confirm的用法

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

一.alert的用法

1.alert 它会显示一条信息,弹出的这个带有信息的小窗口被称为模态窗。“modal” 意味着用户不能与页面的其他部分(例如点击其他按钮等)进行交互,直到他们处理完窗口。在上面示例这种情况下 —— 直到用户点击“确定”按钮。

例子:

<script>
  let message = '你有一个报错!';
  alert(message);  		//返回一个确定,弹出的窗叫做 模态窗
</script>

2 如图

JavaScript中的交互的方式alert,prompt,confirm的用法,前端,javascript,前端

二.prompt的用法

1.prompt 函数接收两个参数:

在这里插入代码片
result = prompt(title, [
default])
;

2.解释

浏览器会显示一个带有文本消息的模态窗口,还有 input 框和确定/取消按钮。

  • title 显示给用户的文本
  • default 可选的第二个参数,指定 input 框的初始值

3.访问者可以在提示输入栏中输入一些内容,然后按“确定”键。然后我们在 result 中获取该文本。或者他们可以按取消键或按 Esc 键取消输入,然后我们得到 null 作为 result。

4 例子:

<script>
   let age = prompt('请输入你的年龄?',18);
   console.log('你的年龄为', age);   //返回的含有确定和取消 ,后面的为可选择的项目
</script>


JavaScript中的交互的方式alert,prompt,confirm的用法,前端,javascript,前端
第二个参数为空的时候
JavaScript中的交互的方式alert,prompt,confirm的用法,前端,javascript,前端

三.confirm的用法

1.语法:

result = confirm(question);

confirm 函数显示一个带有 question 以及确定和取消两个按钮的模态窗口。

点击确定返回 true,点击取消返回 false

2.例子:

<script>
  let is_del = confirm('请确认是否删除数据?');
  console.log(is_del);      //返回的含有确定和取消,确定就是true,取消就是false
</script>

3.如图:

四.总结:

1.我们学习了与用户交互的 3 个浏览器的特定函数:

  • alert
    显示信息

  • prompt
    显示信息要求用户输入文本。点击确定返回文本,点击取消或按下 Esc 键返回 null。

  • confirm
    显示信息等待用户点击确定或取消。点击确定返回 true,点击取消或按下 Esc 键返回 false。

2.这些方法都是模态的:它们暂停脚本的执行,并且不允许用户与该页面的其余部分进行交互,直到窗口被解除。

3.上述所有方法共有两个限制:

  1. 模态窗口的确切位置由浏览器决定。通常在页面中心。
  2. 窗口的确切外观也取决于浏览器。我们不能修改它。

这就是简单的代价。还有其他一些方法可以显示更漂亮的窗口,并与用户进行更丰富的交互,但如果“花里胡哨”不是非常重要,那使用本节讲的这些方法也挺好。文章来源地址https://www.toymoban.com/news/detail-634798.html

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

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

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

相关文章

  • Layui的layer.confirm弹框用法,很详细

    Layui的弹框的官网示例代码 运行效果是这样的 解释: “纳尼?”就是弹框的内容 “btn”数组中的元素是弹框按钮的内容 标题这里没有填,默认就是“信息” 官网地址: https://layuion.com/docs/modules/layer.html#btn 就将标题改为“操作提示”,效果是这样的 代码如下: 信息框默认

    2024年01月25日
    浏览(54)
  • JavaScript 中的 Window.open() 用法详解

    window.open() 方法是 JavaScript 中的一个内置方法,用于在浏览器中打开一个新的窗口或标签页。 这个方法的语法是: 需要注意的是,由于弹出窗口的滥用已经成为了一个安全问题,现代浏览器通常会默认阻止 window.open() 方法的调用,除非是在用户的交互下触发的。因此,在实际

    2024年02月14日
    浏览(37)
  • 一文吃透JavaScript中的DOM知识及用法

       DOM : D ocument O bject M odel(文档对象模型),定义了用户操作文档对象的接口,可以说DOM是自HTML将网上相关文档连接起来后最伟大的创新。它使得用户对HTML有了空前的访问能力,并使开发者将HTML作为XML文档来处理。 本文知识导图如下:    DOM是网页的核心结构,无论是

    2023年04月08日
    浏览(51)
  • Lumeical Script------Script Prompt 中的两种输出方式

    有时候,和众多编程语言一样,我们需要在 Script Prompt 中打印一些我们已经得到的数据,这样可以方便我们调试代码和查看代码中是否有错误。关于在 Script Prompt 中打印数据,Lumerical Script 提供了两种方法。 如果大家觉得有用,就请点个赞吧~

    2024年02月03日
    浏览(33)
  • 【JavaScript】alert的使用方法 | 超详细

    alert()方法用于显示带有一条指定消息和一个确认的按钮的警告框。 注意: 本应该执行主体部分的p标签,但是并没有执行; 这是因为在script中直接定义alert标签,alert之后的脚本都不会运行; 只有在点击确认之后,关闭警示框之后,才会执行; 此类方法,虽然简单但是不

    2024年02月04日
    浏览(41)
  • 用通俗易懂的方式讲解大模型:Prompt 提示词在开发中的使用

    OpenAI 的 ChatGPT 是一种领先的人工智能模型,它以其出色的语言理解和生成能力,为我们提供了一种全新的与机器交流的方式。但不是每个问题都可以得到令人满意的答案,如果想得到你所要的回答就要构建好你的提示词 Prompt。本文将探讨 Prompt 提示词在开发中的应用和优势,

    2024年02月03日
    浏览(44)
  • 【34JavaScript let 和 const】JavaScript中的“let“和“const“关键字详解:作用、用法及区别

    // 使用 let 声明变量 let x = 10; // 在同一作用域内重新赋值 x = 20; // 在不同的作用域内使用 let 声明变量 function example() { let y = 30; console.log(x); // 输出:20 console.log(y); // 输出:30 } console.log(x); // 输出:20 console.log(y); // 报错:y is not defined // 使用 const 声明常量 const PI = 3.14159; // 尝

    2024年02月08日
    浏览(43)
  • JavaScript中的四种枚举方式

    字符串和数字具有无数个值,而其他类型如布尔值则是有限的集合。 一周的日子(星期一,星期二,...,星期日),一年的季节(冬季,春季,夏季,秋季)和基本方向(北,东,南,西)都是具有有限值集合的例子。 当一个变量有一个来自有限的预定义常量的值时,使用

    2024年02月03日
    浏览(56)
  • 什么是原型链(Prototype Chain)?它在JavaScript中有什么作用?请解释一下JavaScript中的“this”关键字的含义和用法。

    原型链(Prototype Chain)是一种在JavaScript中创建对象的方式,它允许我们通过继承来扩展对象的属性和方法。 在原型链中,每个对象都有一个原型对象(也称为“原型”或“ proto ”),该对象继承了其父对象的属性和方法。当我们在一个对象上定义一个属性或方法时,如果该

    2024年02月11日
    浏览(56)
  • 数据交互系列:简述vue项目中的两种请求方式(axios和vueResource)

    今天学习了vue的两种发送请求的方式,vueResource和axios,比较了两种方式的使用 VueResource模块发送请求 1. VueResource概述 VueJS的生态圈除了VueRouter之外,还有很多的插件,在网络请求中,vue是借助于vue-resource模块来进行异步请求,跨域请求。 vue-resource是Vue.js的一款插件,它可以

    2024年02月02日
    浏览(44)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包