![JavaScript+jQuery交互式Web前端开发(第2版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/343/53035343/b_53035343.jpg)
1.3.3 JavaScript常用的输入输出语句
在实际开发中,为了方便数据的输入和输出,JavaScript提供了输入输出语句。常用的输入输出语句如表1-3所示。
表1-3 常用的输入输出语句
![](https://epubservercos.yuewen.com/4A56D3/31548658507748106/epubprivate/OEBPS/Images/figure-0020-0016.jpg?sign=1739152960-7a9AjuvuSSDOMOVGHqBX9QfH52U0RTZu-0-f2af5b76ff108428b7f5cc5e81a55e08)
下面分别演示prompt()语句、alert()语句、document.write()语句和console.log()语句的使用。
1.prompt()语句
使用prompt()语句实现在网页中弹出一个带有提示信息的输入框,示例代码如下。
prompt('请输入手机号:');
prompt()语句的运行结果如图1-11所示。
由图1-11可知,页面中弹出了一个输入框,提示用户“请输入手机号:”,说明使用prompt()语句可以在网页中弹出一个带有提示信息的输入框。
2.alert()语句
使用alert()语句实现在网页中弹出一个警告框,示例代码如下。
alert('这是一个警告框');
alert()语句的运行结果如图1-12所示。
由图1-12可知,页面中弹出了一个警告框,提示用户“这是一个警告框”,说明使用alert()语句可以在网页中弹出一个警告框。
![](https://epubservercos.yuewen.com/4A56D3/31548658507748106/epubprivate/OEBPS/Images/figure-0021-0017.jpg?sign=1739152960-9gNBA4WzWPZtfhx2eSgIRsDrck7b6I6q-0-0b3c4068e3a8ee13b16bda901b8be5aa)
图1-11 prompt()语句的运行结果
![](https://epubservercos.yuewen.com/4A56D3/31548658507748106/epubprivate/OEBPS/Images/figure-0021-0018.jpg?sign=1739152960-BLUeabADNdUBkOTr3U7bc1rfjl2lGkfY-0-872ecc2dffa0c51828fcd65edeef01c1)
图1-12 alert()语句的运行结果
3.document.write()语句
使用document.write()语句时,如果输出内容中含有HTML标签,则输出内容会被浏览器解析。下面使用 document.write()语句在页面中输出“谁知盘中餐,粒粒皆辛苦。”,示例代码如下。
document.write('谁知盘中餐,粒粒皆辛苦。');
document.write()语句的运行结果如图1-13所示。
由图1-13可知,页面中输出了“谁知盘中餐,粒粒皆辛苦。”,说明使用document.write()语句能够在网页中输出内容。
4.console.log()语句
使用console.log()语句在控制台中输出“一年之计在于春,一日之计在于晨。”,示例代码如下。
console.log('一年之计在于春,一日之计在于晨。');
上述示例代码运行后,需要在浏览器的控制台中查看输出的内容。首先按“F12”键启动开发者工具,然后切换到“Console”(控制台)面板,即可查看 console.log()语句的输出内容。
console.log()语句的运行结果如图1-14所示。
![](https://epubservercos.yuewen.com/4A56D3/31548658507748106/epubprivate/OEBPS/Images/figure-0021-0019.jpg?sign=1739152960-81ewWYe5E5l1UNWZndQi4PQbFuhQ3ot9-0-5a08ee79d2fe7e4737cb958f51443851)
图1-13 document.write()语句的运行结果
![](https://epubservercos.yuewen.com/4A56D3/31548658507748106/epubprivate/OEBPS/Images/figure-0021-0020.jpg?sign=1739152960-goMBYbCp0rodMt4BMvDB4DnZmw875QWU-0-be90cf7bfbf9e680c2c04d27539904c6)
图1-14 console.log()语句的运行结果
由图1-14可知,在控制台中输出了“一年之计在于春,一日之计在于晨。”,说明使用console.log()语句能够在控制台中输出内容。
脚下留心:输出内容包含JavaScript结束标签的情况
如果输出的内容中包含 JavaScript 结束标签,则会导致代码提前结束。若要解决这个问题,需要使用“\”对结束标签的“/”进行转义,即使用“<\/script>”,示例代码如下。
document.write('<script>alert(1);<\/script>');
运行上述示例代码后,页面中会弹出一个警告框。如果没有使用“\”对结束标签进行转义,则</script>会被当成结束标签,使得页面不会弹出警告框,程序会报错。