Javascript中的对话框-详解

最新推荐文章于 2024-04-20 14:57:38 发布

坚持@success

最新推荐文章于 2024-04-20 14:57:38 发布

阅读量1.2k

点赞数 19

分类专栏：前端文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_72210904/article/details/135733143

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

对话框

在 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 代码中，我们对其进行说明：

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

对于确认框，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 中提供了以下关键字。

break	else	new	var	case
finally	return	void	catch	for
switch	while	continue	function	this
with	default	if	throw	delete
in	try	do	instanceof	typeof
abstract	enum	int	short	boolean
export	interface	static	byte	extends
long	super	char	final	native
synchronized	class	float	package	throws
const	goto	private	transient	debugger
implements	protected	volatile	double	import
public	async	await	yield	let

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

注释

在 HTML 中，它的注释是：

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

在 CSS 中，它的注释是：

/* 这是 CSS 的注释 */

而在 JS 中，它的注释有以下几种：

1. 第一种注释叫单选注释，采用双斜线。
// 这是单选注释

2. 多行注释，类似于 CSS 注释
/*
这是JS的多行注释，
可以换行的
*/

3. 文档注释
/*!
 这是文档注释，将来在 JS 压缩时
 文档注释不允许删除
 */

坚持@success

关注

19
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
Javascript中的对话框-详解

对于确认框，JS 中提供的是 confirm，这个确认框需要提供提示的确认信息。在这里，我使用 javascript: 这个前缀，目的是让浏览器在解析时，不要使用默认的解析方式来解析 a 标签，而是采用 JS 的语法来解析这个 a 标签。由于 JS 是一种面向对象的脚本语言，它是一种编程语言，因此它就存在一些具有特殊意义的单词，这个单词就是关键字。')">删除</a></td>')">删除</a></td>确认框一般用于我们在做删除操作时，为了避免用户误操作，我们通过在用户删除数据时，给他一个确认提示。
复制链接

扫一扫