Javascript的四种输出类型比较

原创 2018年04月15日 15:59:26

全文完整示例代码为:

<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的四种输出类型就讲解完成了,如果有其它疑问,欢迎进行评论!!!

JavaScript使用for循环完成打印出四种形式的九九乘法表

Document //形式一 document.write(""); for (var i = 1; i document.write(""); for (var j = 1; j docume...
  • luorongsong_1994
  • luorongsong_1994
  • 2017-10-24 21:03:50
  • 421

php 类型介绍(四中标量类型+数组)

php支持八种原始类型:   四种标量类型: 1、 boolean 布尔型 2、 integer 整型 3、 float 浮点型(也做double) 4、string (字符串)   ...
  • snn1410
  • snn1410
  • 2012-07-09 17:13:23
  • 3529

JavaScript String类常用方法比较

转自:http://hi.baidu.com/%C5%ED%BD%F0%BD%F0%BB%D4%BB%D4/blog/item/8789010433f42613738da5e2.html JS对...
  • xanxus46
  • xanxus46
  • 2012-06-24 13:38:18
  • 3589

AssetBundle加载的四种方式(补充 三,四)

#region 第三种类型 /// /// 路径有本地和远程,本地可以加file:// 或者file:/// 路径要完整的本地路径,这个位置卡了很久,经过多次尝试得到最终正确的路径...
  • qq_27032631
  • qq_27032631
  • 2017-08-29 11:50:56
  • 177

四种排序算法(js)

今天整理一下我理解的四种排序算法,分别是:冒泡排序、选择排序、插入排序、和快速排序。除了快速排序让我有点蒙以外,其他三种排序自我感觉还是很好理解和书写的。...
  • moliy133
  • moliy133
  • 2016-10-31 15:43:51
  • 259

JavaScript实现四种界面的九九乘法表

实现效果如下所示: 1: 2: 3: 4: 实现代码如下所示: Insert title here function Mult_01(...
  • suwu150
  • suwu150
  • 2016-11-05 12:09:16
  • 1604

JavaScript中Date对象之日期大小比较(三)

在form表单验证日期大小的比较经常被我们用到,本节介绍javaScript中日期的大小比较: 比较日期只要我们将其转换成number型可以方便比较。 1.Date中的三个静态函数 Date.now(...
  • pro_monkeyking
  • pro_monkeyking
  • 2017-03-17 17:09:23
  • 1431

J2EE常见的四种架构类型

  • 2009年04月08日 10:08
  • 1KB
  • 下载

C++四种类型转换机制

本文主要借鉴自cplusplus中关于类型转换的内容。传统的类型转换主要有以下两种形式:double x = 10.3; int y; y = int (x); // functional no...
  • Swartz2015
  • Swartz2015
  • 2017-04-07 21:50:32
  • 1784

JavaScript中变量的类型及其比较

在JavaScript中变量包含两种不同数据类型的值,一种是基本类型值,一种是引用类型值。基本类型值是指那种数据值可以完全保存在栈内存中的简单数据片段,包括Undefined,Null,String,...
  • chang_yuan_2011
  • chang_yuan_2011
  • 2012-08-23 01:39:36
  • 2598
收藏助手
不良信息举报
您举报文章:Javascript的四种输出类型比较
举报原因:
原因补充:

(最多只允许输入30个字)