JavaScript+jQuery交互式Web前端开发(第2版)
上QQ阅读APP看书,第一时间看更新

1.3.3 JavaScript常用的输入输出语句

在实际开发中,为了方便数据的输入和输出,JavaScript提供了输入输出语句。常用的输入输出语句如表1-3所示。

表1-3 常用的输入输出语句

下面分别演示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()语句可以在网页中弹出一个警告框。

图1-11 prompt()语句的运行结果

图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所示。

图1-13 document.write()语句的运行结果

图1-14 console.log()语句的运行结果

由图1-14可知,在控制台中输出了“一年之计在于春,一日之计在于晨。”,说明使用console.log()语句能够在控制台中输出内容。

脚下留心:输出内容包含JavaScript结束标签的情况

如果输出的内容中包含 JavaScript 结束标签,则会导致代码提前结束。若要解决这个问题,需要使用“\”对结束标签的“/”进行转义,即使用“<\/script>”,示例代码如下。

document.write('<script>alert(1);<\/script>');

运行上述示例代码后,页面中会弹出一个警告框。如果没有使用“\”对结束标签进行转义,则</script>会被当成结束标签,使得页面不会弹出警告框,程序会报错。