JavaScript中的alert()函数使用技巧详解


Posted in Javascript onDecember 29, 2014

在JavaScript代码中,可以使用window对象的alert()函数来显示一段文本,从而进行程序的调试,或者向用户警示相关信息:

//Use window object's alert() function

window.alert("sample text");

这一写法可以简化为直接使用alert()函数:

//Simplified alert() usage

alert("sample text");

如果需要显示带换行的文本,可以使用\n:

//Use \n in alert()

alert("The first line\nThe second line");

如果需要使用制表符,可以用\t:

//Use \t in alert()

alert("Alex\t50\t34\nBob\t59\t38");

变量的使用

除了显示静态字符串外,alert()函数也可以接受变量,并将变量值与其它字符串进行拼接:

//Use variable in alert()

var word = "life";

alert("The magic word is: " + word + ". Don't panic.");

遗憾的是,尽管alert()函数可以接受变量,但能做的也仅止于这种字符串拼接操作;与另一种调试方法console.log()相反,alert()函数并不接受向字符串传参数的做法。以下述代码为例:

//Try to use parameter in alert(), will fail

var name = "Bob";

var years = 42;

alert("%s is %d years old.", name, years);

如果alert()函数接受字符串传?ⅲ?敲丛て诘氖涑鼋峁??崾恰?ob is 42 years old.”;但实际上alert()函数并不支持这么做,因此最终的输出结果为”%s is %d years old.”。

弹出窗口样式

由于alert()函数所使用的弹出框是浏览器系统对象而不是网页文档对象,因此无法通过在alert()函数中使用HTML标签来定义弹出框的样式 — HTML标签将会被原封不动的进行显示。对于以下代码:

//Try to use HTML tags in alert(), will fail

alert("<b>Test Text</b>");

输出结果并不是加粗的”Test Text”。

如果确实需要改变警示框的样式,可以有以下两种方案:

1.在alert()函数中使用Unicode字符。这种方案的好处是实现起来非常简单,但其局限性也很明显:Unicode字符的表现力非常有限。

2.不使用alert()函数,转而用HTML组件模拟弹出框(比如使用jQuery UI Dialog)。这种方案的优势是弹出框的表现力会很强,但对其的使用会增加前端代码的复杂度。

结语

alert()函数可以用来向用户警示信息,也可以用来调试程序。对于前者,使用jQuery UI Dialog等组件能大幅增加表现力及用户体验;而对于后者,由于alert()弹出框会阻断JavaScript代码的执行,因此在很多情况下,使用console.log()来对程序进行调试是一种更好的方案。

Javascript 相关文章推荐
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
Vue SSR 即时编译技术的实现
May 06 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 #Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 #Javascript
jQuery中clearQueue()方法用法实例
Dec 29 #Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 #Javascript
浅谈JavaScript Array对象
Dec 29 #Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 #Javascript
jQuery中dequeue()方法用法实例
Dec 29 #Javascript
You might like
第六节--访问属性和方法
2006/11/16 PHP
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
jquery animate 动画效果使用说明
2009/11/04 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
python 中字典嵌套列表的方法
2018/07/03 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
python中join()方法介绍
2018/10/11 Python
深入了解Django中间件及其方法
2019/07/26 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
2014年物资管理工作总结
2014/12/02 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server