Javascript的四种输出类型比较

全文完整示例代码为:

<DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>js输出情况</title>
	</head>

	<body>
		<h2>第一种输出:alert</h2>
		<button type="button" οnclick="alert_output()">点击这里</button>
		<script>
			function alert_output(){
				alert(Date());
			}
		</script>

		
		<hr/>
		<h2>第二种输出:写入到HTML元素 innerHTML</h2>
		<button type="button" οnclick="getDate2()">点击这里显示日期</button>
		<p>日期为:<span id="date2"></span></p>
		<script>
			function getDate2(){
				var x2=document.getElementById("date2");
				x2.innerHTML=Date();
			}
		</script>


		<hr/>
		<h2>第三种输出:写到HTML文档document.write()</h2>
		<button type="button" οnclick="getDate3()">点击这里显示日期</button>
		<script>
			function getDate3(){
				document.write(Date());
			}
		</script>


		<hr/>
		<h2>第四种输出:输出到控制台console.log()</h2>
		<script>
			var a=6;
			var b=9;
			var c=a+b+1;
			console.log("c的值为:"+c);
			console.log("日期为:"+Date());
		</script>
	</body>
</html>


1. 第一种输出类型为弹出警告窗alert()。

    优点:可以直观的展示数据,用于调试;

    缺点:窗口弹出之后程序不会继续执行下去,页面死掉了;    

   

2. 第二种输出类型为写入到HTML元素 innerHTML。innerHTML是DOM(文档对象模型)的一个属性,直观解释就是使用它能够 选择性的改变这个HTML文档里面的某一个元素。例如,可以为文档里的一个<p></p>标签设置一个id="demo",通过选择这 个id来进行html元素的改变。

    优点:可以更加精确的控制刷新这个页面的某一个或某几个元素;


3. 第三种输出类型为写出到HTML文档 document.write()。写法可以是

    输出变量:document.write(a); 

    输出字符串:document.write("hello world!"); 

    输出调用函数的结果:document.write(Date());  

    缺点:当执行完整个文档后,若document.write()直接写入了当前文档,那么写入的内容就直接显示在当前文档上,此时输入文档流关闭。若当执行完整个文档后,我们需要触发点击事件来加载document.write()语句,此时就会出现一个新的文档覆盖了当前文档,新的文档将会显示document.write()输出的内容。


4. 第四种输出类型为控制台输出 console.log()。括号中的写法与document.write()类似。

    查看控制台输出时,在浏览器页面中右击,选择“检查”,然后点击“Console”,即可查看。

    优点:它的输出与alert()不同,不影响程序的继续运行;可用其进行调试。



Javascript的四种输出类型就讲解完成了,如果有其它疑问,欢迎进行评论!!!

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值