Javascript 的 alert, confirm, prompt 函数详解

Dear 丶 2024-05-28 10:13 51阅读 0赞

> **还是大剑师兰特**：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

![在这里插入图片描述][4eabd96c56c9464fa4ec4a5ed1785e79.png_pic_center]

<table> 
 <thead> 
  <tr> 
   <th>No.</th> 
   <th align="left">内容链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td align="left">Openlayers <a href="https://dajianshi.blog.csdn.net/article/details/136641287" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126706466" rel="nofollow"> 【源代码+示例300+】 </a></td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td align="left">Leaflet <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow"> 【源代码+图文示例 150+】 </a></td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td align="left">Cesium <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow"> 【源代码+图文示例200+】 </a></td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td align="left">MapboxGL<a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow"> 【源代码+图文示例150+】 </a></td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td align="left">前端就业宝典 <a href="https://blog.csdn.net/cuclife/category_12437862.html" rel="nofollow">【面试题+详细答案 1000+】</a></td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][744c5ca9a61140f4b5ebe879fb810b72.png_pic_center]

#### 文章目录 ####

*   *   *  alert
         *   *  示例代码
         *  confirm
         *   *  示例代码
         *  prompt
         *   *  示例代码
         *  注意事项

--------------------

`alert`, `confirm`, 和 `prompt` 是JavaScript中用于与用户进行简单交互的三个内置函数，它们可以弹出对话框来提示信息、获取确认或输入。

#### alert ####

`alert()`函数用于显示一个带有消息和确定按钮的警告对话框。用户必须点击确定才能关闭对话框并继续操作。

##### 示例代码 #####

alert("大剑师欢迎来到我的博客！");

#### confirm ####

`confirm()`函数显示一个带有消息和确定/取消按钮的对话框，用于让用户确认某个操作。它会返回一个布尔值：用户点击确定时返回`true`，点击取消时返回`false`。

##### 示例代码 #####

if (confirm("你确定要删除这条记录吗？")) {
        
        console.log("记录已删除。");
    } else {
        
        console.log("操作已取消。");
    }

#### prompt ####

`prompt()`函数显示一个对话框，允许用户输入文本，并提供一个确认和取消按钮。它接受两个参数：提示信息和可选的默认输入值。如果用户点击确认，函数返回用户输入的文本；点击取消则返回`null`。

##### 示例代码 #####

var name = prompt("请输入您的名字:", "大剑师");
    if (name !== null) {
        
        console.log("你好，" + name + "！");
    } else {
        
        console.log("你选择了不输入名字。");
    }

#### 注意事项 ####

1.  **阻塞性**：这三个函数都是同步且阻塞的，意味着在用户作出响应之前，浏览器不会执行后续的JavaScript代码。
2.  **用户体验**：频繁使用或不当使用这些对话框可能会严重影响用户体验，特别是在现代Web应用中，更推荐使用非阻塞式的UI设计。
3.  **样式限制**：这些对话框的样式是由浏览器控制的，无法通过CSS自定义其外观，这可能导致与网站整体风格不一致。
4.  **移动设备兼容性**：在移动设备上，这些对话框的表现可能与桌面浏览器有所不同，尤其是在不同的浏览器或操作系统上。
5.  **可访问性**：确保使用这些对话框时考虑到键盘用户和辅助技术用户的体验，例如，对话框应可通过Tab键导航。

综上所述，`alert`, `confirm`, 和 `prompt` 是基础的用户交互手段，在简单场景下非常实用，但应谨慎使用，特别是在追求流畅用户体验的现代Web应用开发中。

[4eabd96c56c9464fa4ec4a5ed1785e79.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/b4d3bd93055c4db9922048143023bc86.png
[744c5ca9a61140f4b5ebe879fb810b72.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/332b4418084c46848217328b09a2ab7f.png