JavaScript中alert、confrim、prompt的使用及区别【精选】

Hi i,m JinXiang

⭐ 前言 ⭐

本篇文章主要介绍JavaScript中alert、confrim、prompt的区别及使用以及部分理论知识

🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁

🍉博主收将持续更新学习记录获，友友们有任何问题可以在评论区留言

⭐一、alert

1、什么是alert？

2、使用alert

alert的定义和用法

alert的语法

alert的代码示例

3、总结alert

⭐二、confrim

1、什么是confrim？

2、使用confrim

confrim的定义和用法

confrim的语法

confrim的代码示例

3、总结confrim

⭐三、prompt

1、什么是prompt？

2、使用prompt

prompt的定义和用法

prompt的语法

prompt的代码示例

3、总结prompt

⭐alert、confrim和prompt的区别

⭐一、alert

1、什么是alert？

在JavaScript中，alert是一个内置函数，用于显示一个警告框，向用户显示一条消息。它是一种简单的弹出窗口，常用于给用户提供提示或警告信息。

alert函数接受一个字符串作为参数，这个字符串将作为消息显示在警告框中。例如：

alert("Hello, World!");

以上代码将在网页上弹出一个警告框，其中显示的消息是"Hello, World!"。用户需要点击"确定"按钮才能关闭警告框。

alert函数在JavaScript开发中的使用相对较少，因为它会阻塞代码执行，直到用户关闭警告框。通常，开发者更倾向于使用其他更灵活的方式来与用户进行交互，比如使用模态框或自定义弹窗组件。

2、使用alert

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

alert的语法：alert(message)

使用alert函数的基本语法如下：

alert("你好，我是一个警告框！");

提示框一般用于在网页中向用户显示一些提示或警告信息。例如，在表单验证时，如果用户输入的内容不符合要求，可以使用alert函数弹出一个提示框，告知用户输入有误。

alert的代码示例：显示一个按钮弹出警告框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function myFunction(){alert("你好，我是一个警告框！");
}
</script>
</head>
<body><input type="button" onclick="myFunction()" value="显示警告框" /></body>
</html>

alert是JavaScript中的一个内置函数，用于在网页上显示简单的警告框。它的使用方法是调用alert函数并传入要显示的消息作为参数。警告框会以模态的形式弹出并显示指定的消息，用户需要点击确定按钮才能关闭警告框。

3、总结alert

在使用alert函数时，需要注意以下几点：

alert函数会阻塞代码执行：当alert函数被调用时，代码的执行会暂停，直到用户点击提示框上的确定按钮。这意味着，在用户关闭提示框之前，代码不会继续执行。
提示框的样式和外观不可自定义：alert函数生成的提示框的样式和外观是由浏览器决定的，无法通过代码进行定制。不同浏览器可能有不同的提示框样式，且不支持自定义添加样式或图标。
提示框中只能显示文本信息：alert函数只能展示纯文本信息，不支持在提示框中添加HTML或其他富文本格式。如果需要展示复杂的内容，可以考虑使用其他方式，如弹出自定义模态窗口。
不支持用户输入或反馈：alert函数只能用于向用户展示信息，无法获取用户的输入或反馈。用户无法在提示框中输入任何内容或进行选择操作，只能通过点击确定按钮关闭提示框。
警惕滥用alert函数：过多使用alert函数可能会影响用户体验，因为频繁的提示框会打断用户的工作流程。应该适度使用alert函数，只在必要的情况下向用户展示重要的信息或警告。

需要注意的是，alert函数没有返回值，所以不能将alert函数的执行结果赋给一个变量或进行其他操作。它只是单纯地用于展示提示信息。

⭐二、confrim

1、什么是confrim？

confirm是JavaScript中的一个内置函数，用于在网页上显示一个确认框。与alert不同的是，confirm会显示一个包含确定和取消按钮的对话框，用于询问用户是否执行某个操作。

使用confirm函数时，需要传入一个字符串作为参数，作为对话框中显示的消息。当用户点击确定按钮时，confirm函数会返回true，表示用户确认执行操作；当用户点击取消按钮时，confirm函数会返回false，表示用户取消了操作。

var result = confirm("确认要删除该数据吗?");
if (result) {// 执行删除操作
} else {// 取消删除操作
}

confirm函数通常用于需要用户确认的重要操作，例如删除数据、提交表单等。通过询问用户是否确认执行操作，可以预防用户误操作或不正确的操作。

需要注意的是，confirm函数是阻塞的，即在用户作出选择之前，页面中的其他操作会被暂停。因此，在使用confirm函数时，应谨慎考虑对用户体验的影响，并在必要时使用其他异步的交互方式来代替。

2、使用confrim

confrim的定义和用法：confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。

confrim的语法：confirm(message)

使用confirm函数的基本语法如下：

var result = confirm("确认要执行操作吗?");

在确认框中，会显示一个包含确认和取消按钮的对话框，并显示传入的消息字符串。用户点击确认按钮时，confirm函数会返回true，表示用户确认执行操作；用户点击取消按钮时，confirm函数会返回false，表示用户取消了操作。

confrim的代码示例：显示一个确认框，提醒访客点击什么：

function myFunction(){var x;var r=confirm("按下按钮!");if (r==true){//执行操作x="你按下了\"确定\"按钮!";}else{//取消操作x="你按下了\"取消\"按钮!";}document.getElementById("demo").innerHTML=x;
}

在上述示例中，如果用户确认要按下按钮，则执行“按下了确定按钮”的动作；如果用户取消了按下按钮操作，则执行“按下了取消按钮”的动作。

需要注意的是，confirm函数返回的是一个布尔值，可以直接在if语句中使用。如果用户关闭了对话框而没有点击确认或取消按钮，则confirm函数将返回undefined。因此，在使用confirm函数时，最好在if语句中添加一个判断条件来处理这种情况。

3、总结confrim

confirm是JavaScript中一种常用的交互函数，用于显示一个确认对话框并获取用户的确认或取消操作。其基本语法为confirm(message)，其中message是一个字符串参数，用于显示在确认对话框中的消息。

使用confirm函数时，会显示一个带有确认和取消按钮的对话框，用户可以点击其中一个按钮来确定或取消操作。当用户点击确认按钮时，confirm函数返回true，表示确认操作；当用户点击取消按钮时，confirm函数返回false，表示取消操作。

我们可以根据confirm函数的返回值来进行相应的操作。常见的用法是将confirm函数的返回值存储在一个变量中，然后使用条件语句来根据用户的选择执行不同的操作。

总结confirm函数的使用方法：

使用confirm函数来显示一个确认对话框，并获取用户的确认或取消操作。
根据confirm函数的返回值来确定用户的选择。
可以将confirm函数的返回值存储在一个变量中，然后使用条件语句来根据用户的选择执行不同的操作。
需要注意在条件语句中处理用户关闭对话框的情况。

需要注意的是，如果用户关闭了对话框而没有点击确认或取消按钮，confirm函数将返回undefined。因此，在使用confirm函数时，最好在条件语句中添加一个判断条件来处理这种情况。

⭐三、prompt

1、什么是prompt？

prompt是JavaScript中一种常用的交互函数，用于显示一个提示框并获取用户的输入数据。其基本语法为prompt(message, defaultValue)，其中message是一个字符串参数，用于显示在提示框中的消息，defaultValue是一个可选参数，用于设置提示框中输入框的默认值。

使用prompt函数时需要注意以下几点：

默认值的设置：defaultValue参数是可选的，如果不提供默认值，则输入框将为空。如果需要在输入框中显示一个默认值，可以通过设置defaultValue参数来实现。请注意，即使设置了默认值，用户仍然可以编辑输入框中的内容。
返回值的处理：prompt函数返回用户输入的内容作为一个字符串。在后续处理用户输入的值时，可能需要进行类型转换，因为返回的值始终是字符串类型。如果用户点击取消按钮，返回值将为null，需要进行判断确保返回的值不为null再进行后续操作。
安全性考虑：由于输入框是由用户输入的，因此在处理用户输入时需要进行安全性考虑。用户可能输入恶意代码或非预期的内容，需要对输入进行验证、过滤或转义，以确保应用程序的安全性。
用户体验的优化：prompt函数会阻塞页面的执行，直到用户关闭提示框。这可能会影响用户体验，特别是在WEB应用中。因此，在使用prompt函数时，应考虑是否有更好的方式来实现用户交互，以提升用户体验。

使用prompt注意事项：

提示信息要明确、清晰。
默认值是可选的，可以设置一个默认值。
返回的值始终是字符串类型，可能需要进行类型转换。
返回值可能为null，需要进行判断。
需要对用户输入进行安全性处理。
考虑使用更好的方式提升用户体验。

2、使用prompt

prompt的定义和用法：prompt()方法用于显示可提示用户进行输入的对话框。

这个方法返回用户输入的字符串。

prompt的语法：prompt(message，defaultValue);

使用prompt函数的基本语法如下：

prompt(message, defaultValue)

其中，message是一个字符串，用于提示用户输入的信息。defaultValue是一个可选参数，用于设置输入框中的默认值。当用户点击提示框上的确定按钮时，prompt函数将返回用户输入的内容作为一个字符串。

参数	描述
message	可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。
defaultValue	可选。默认的输入文本。

prompt的代码示例：显示一个提示框，询问她/他的名字，然后编写一个页面的问候：

function myFunction(){ var person=prompt("请输入你的名字","Harry Potter"); if (person!=null && person!=""){ var x="你好 " + person + "! 今天感觉如何?"; document.getElementById("demo").innerHTML=x; } 
}