Javascript中的对话框-详解

发布时间:2024年01月22日

目录

对话框

警告框

确认框

输入框

关键字

注释


对话框

在 Javascript(后面我就统一叫 JS 这个简称了)主要提供了三种对话框:警告框、确认框、输入框。

警告框

警告框是在 JS 中一般用于调试程序时所使用的,主要的目的是为了输出调试结果。也可以用于显示警告信息。

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>警告框</title>
</head>
<body>
<button οnclick="alert('不要一直点我!我会生气的^_^')">点击就会弹出警告框</button>
</body>
</html>

使用 alert 来弹出警告框,它里面需要给要警告的内容。

确认框

确认框一般用于我们在做删除操作时,为了避免用户误操作, 我们通过在用户删除数据时,给他一个确认提示。

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>确认框</title>
 ? ?<style>
 ? ? ? ?table {
 ? ? ? ? ? ?width: 500px;
 ? ? ? ? ? ?border-left: 1px solid #999999;
 ? ? ? ? ? ?border-top: 1px solid #999999;
 ? ? ? ? ? ?border-collapse: collapse;
 ? ? ?  }
 ? ? ? ?th, td {
 ? ? ? ? ? ?border-right: 1px solid #999999;
 ? ? ? ? ? ?border-bottom: 1px solid #999999;
 ? ? ?  }
 ? ? ? ?td {
 ? ? ? ? ? ?text-align: center;
 ? ? ?  }
 ? ?</style>
</head>
<body>
<table>
 ? ?<tr>
 ? ? ? ?<th>编号</th>
 ? ? ? ?<th>姓名</th>
 ? ? ? ?<th>操作</th>
 ? ?</tr>
 ? ?<tr>
 ? ? ? ?<td>1</td>
 ? ? ? ?<td>张三</td>
 ? ? ? ?<td><a href="javascript:confirm('你确定要删除么?删除后不能恢复!')">删除</a></td>
 ? ?</tr>
 ? ?<tr>
 ? ? ? ?<td>2</td>
 ? ? ? ?<td>李四</td>
 ? ? ? ?<td><a href="javascript:confirm('你确定要删除么?删除后不能恢复!')">删除</a></td>
 ? ?</tr>
</table>
</body>
</html>

在上面的 JS 代码中,我们对其进行说明:

  1. <a href="javascript:confirm('')"></a>:在 HTML 中,a 标签的作用有两个:一个作锚点;另一个就是做链接跳转的。在这里,我使用 javascript: 这个前缀,目的是让浏览器在解析时,不要使用默认的解析方式来解析 a 标签,而是采用 JS 的语法来解析这个 a 标签。

  2. 对于确认框,JS 中提供的是 confirm,这个确认框需要提供提示的确认信息。在弹出的确认框中有两个按键:一个是确定,一个是取消。当点击取消后不会做任何操作;当点击确定后才会执行相关的操作。其实这两个按钮返回的值就一个布尔值:true 和 false。

输入框

在与用户交互时,我们可以来接收用户的输入信息,此时就可以使用输入框了。

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>输入框</title>
</head>
<body>
<script>
 ? ?console.log(prompt())
</script>
</body>
</html>

我们可以使用 JS 提供的 prompt 这个方法来实现接收用户输入的值。

这个方法它有两个参数,第一个参数表示输入提示信息,第二个参数是默认值。

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>输入框</title>
</head>
<body>
<script>
 ? ?console.log(prompt('请输入数字', 20))
</script>
</body>
</html>

关键字

由于 JS 是一种面向对象的脚本语言,它是一种编程语言,因此它就存在一些具有特殊意义的单词,这个单词就是关键字。而关键字的特点是:1)是单词,2)所有字母小写。

在 JS 中提供了以下关键字。

breakelsenewvarcase
finallyreturnvoidcatchfor
switchwhilecontinuefunctionthis
withdefaultifthrowdelete
intrydoinstanceoftypeof
abstractenumintshortboolean
exportinterfacestaticbyteextends
longsupercharfinalnative
synchronizedclassfloatpackagethrows
constgotoprivatetransientdebugger
implementsprotectedvolatiledoubleimport
publicasyncawaityieldlet

注意:我们后续定义变量时不能直接使用这些关键字来进行定义。

注释

在 HTML 中,它的注释是:

<!-- 这是HTML注释 -->

在 CSS 中,它的注释是:

/* 这是 CSS 的注释 */

而在 JS 中,它的注释有以下几种:

1. 第一种注释叫单选注释,采用双斜线。
// 这是单选注释
?
2. 多行注释,类似于 CSS 注释
/*
这是JS的多行注释,
可以换行的
*/
?
3. 文档注释
/*!
 这是文档注释,将来在 JS 压缩时
 文档注释不允许删除
 */

文章来源:https://blog.csdn.net/m0_72210904/article/details/135733143
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。