下文笔者讲述javascript调试程序时,常使用的输出信息的方法分享,如下所示
JavaScript输出信息的方式
方式1：
alert() 函数来弹出提示框
方式2:
confirm() 函数来弹出一个对话框
方式3：
document.write() 方法将内容写入到HTML文档中
方式4:
innerHTML 将内容写入到 HTML 标签中
方式5:
console.log()在浏览器的控制台输出内容
alert函数示例
alert(message);
message:提示框中输出内容
alert函数的另一种写法:
window.alert(message)
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var a = 88,
b = 99;
window.alert("a * b = " + a * b);
</script>
</body>
</html>
confirm()函数
confirm()函数同alert()函数相似
都是window对象下的函数
confirm()函数提示的信息：
会有一个 确定 和 取消 按钮
点击“确定”,会返回true
点击“取消”,会返回false
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var res = window.confirm("这里是要显示的内容");
if(res == true){
alert("你点击了“确定”按钮");
}else{
alert("你点击了“取消”按钮");
}
</script>
</body>
</html>
console.log()
console.log()函数的功能:
向浏览器的控制台输出信息
console.log()语法:
console.log(message);
参数说明:
message:为待输出的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var arr = ["Chrome","Firefox","Edge","Safari","Opera"];
console.log(arr);
</script>
</body>
</html>
document.write()
document.write()方法的功能:
向html文档写入html信息
注意事项:
写入html信息，会被浏览器渲染运行
document.write()方法的语法:
document.write(exp1, exp2, exp3, ...);
参数说明:
exp1、exp2、exp3:
向文档中写入的内容
注意事项:
document.write()可接收多个参数,参数之间使用逗号分隔
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("<p>现在的时间是：</p>");
document.write(Date());
</script>
</body>
</html>
innerHTML
innerHTML是一个属性：
借助这个属性可设置指定html标签中的内容
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="demo">JavaScript 输出</div>
<script type="text/javascript">
var demo = document.getElementById("demo");
console.log(demo.innerHTML);
demo.innerHTML = "<h2>innerHTML</h2>"
</script>
</body>
</html>