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 相关文章推荐
简单的JS多重继承示例
Mar 13 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
js实现异步循环实现代码
Feb 16 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 Javascript
vue路由缓存的几种实现方式小结
Feb 02 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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
python爬取内容存入Excel实例
2019/02/20 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
汉语言文学毕业生求职信
2013/10/01 职场文书
文明礼仪事迹材料
2014/01/09 职场文书
小学生操行评语大全
2014/04/22 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
年会邀请函范文
2015/01/30 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
小学作文之描写天气
2019/08/15 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers