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 学习之旅 (1)
Feb 05 Javascript
Javascript 跨域访问解决方案
Feb 14 Javascript
JavaScript 对象的属性和方法4种不同的类型
Mar 19 Javascript
javascript数组去掉重复
May 12 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
简单的js表格操作
Sep 24 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 Javascript
简单使用webpack打包文件的实现
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
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
2011/08/23 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
python获取标准北京时间的方法
2015/03/24 Python
Python编程之event对象的用法实例分析
2017/03/23 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
Python单元测试简单示例
2018/07/03 Python
Python3多线程基础知识点
2019/02/19 Python
Python项目跨域问题解决方案
2020/06/22 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
应届生财务会计求职信
2013/11/05 职场文书
企业总经理岗位职责
2014/02/13 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
二审代理词范文
2015/05/25 职场文书
幸福终点站观后感
2015/06/04 职场文书
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js