Javascript的四种输出类型比较

全文完整示例代码为:

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

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

		
		<hr/>
		<h2>第二种输出:写入到HTML元素 innerHTML</h2>
		<button type="button" onclick="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" onclick="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的四种输出类型就讲解完成了,如果有其它疑问,欢迎进行评论!!!

阅读更多

没有更多推荐了,返回首页