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 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
js a标签点击事件
Mar 30 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
JS实现li标签的删除
Apr 12 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
详细介绍Next.js脚手架完整搭建封装
Apr 26 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实现批量修改文件后缀名的方法
2015/07/30 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
php递归函数怎么用才有效
2018/02/24 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
python使用cPickle模块序列化实例
2014/09/25 Python
Python入门篇之字典
2014/10/17 Python
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
python中threading超线程用法实例分析
2015/05/16 Python
Python制作Windows系统服务
2017/03/25 Python
scrapy爬虫实例分享
2017/12/28 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
三严三实学习心得体会
2014/10/13 职场文书
财政局个人总结
2015/03/04 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
OpenCV-Python实现轮廓拟合
2021/06/08 Python