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 相关文章推荐
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
JavaScript设计模式初探
Jan 07 Javascript
Javascript动画效果(1)
Oct 11 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
js实现自定义进度条效果
Mar 15 Javascript
Node.js安装配置图文教程
May 10 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
vue移动端项目缓存问题实践记录
Oct 29 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
PHP的PDO操作简单示例
2016/03/30 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
豆瓣网的jquery代码实例
2008/06/15 Javascript
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
公务员培训自我鉴定
2014/02/01 职场文书
超市总经理岗位职责
2014/02/02 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
mysql如何查询连续记录
2022/05/11 MySQL
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL