JavaScript基础2_输出

2021/7/1 20:25:16

编程Tag： javascript 基础页面 html 内容文档输出 document write

本文主要是介绍JavaScript基础2_输出，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JavaScript 没有任何打印或者输出的函数。

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

使用 window.alert()

你可以弹出警告框来显示数据：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js输出</title>
	</head>
	<body>
		<script type="text/javascript">
			window.alert("js弹出警示框");
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 “id” 属性来标识 HTML 元素；
innerHTML 来获取或插入元素内容；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js输出</title>
	</head>
	<body>

		<!-- 定义原始标签 -->
		<p id="p01">原始p标签内容</p>
		<!-- 通过js代码就行修改html中的p标签 -->
		<script type="text/javascript">
			document.getElementById("p01").innerHTML="js修改后的p标签内容";
		</script>
		
	</body>
</html>

运行结果：
在这里插入图片描述
可见原始html中id为p01的p标签中的内容已被修改；

document.getElementById("p01") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。
innerHTML = "js修改后的p标签内容"" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

写到 HTML 文档

上一节举例用法中我们已经练习过document.write()的用法，这一节我们再看一下；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js输出</title>
	</head>
	<body>
		<p id="p01">原始p标签内容</p>
		<!-- 通过js代码就行修改html中的p标签 -->
		
		<script type="text/javascript">
			// 输出日期
			document.write(Date());
		</script>
		
	</body>
</html>

运行结果：

在这里插入图片描述

请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js输出</title>
	</head>
	<body>
	
		<p id="p01">原始p标签内容</p>	
		<script type="text/javascript">
		  // 定义一个名称为myDateFunction的函数
			function myDateFunction(){
				document.write(Date());				
			}
			
			
		</script>
		
		<!-- 点击按钮，点击后会触发myDateFunction()函数 -->
		<button type="button" onclick="myDateFunction()">点击</button>
		
	</body>
</html>

运行结果：
在这里插入图片描述

点击button之后：
在这里插入图片描述
发现点击之后原始的p标签内容已经不见了，也就是在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

写到控制台

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式，在调试窗口中点击 “Console” 菜单。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js输出</title>
	</head>
	<body>
	
		<p id="p01">原始p标签内容</p>	
		
		<script type="text/javascript">
			a=1;
			b=2.2;
			c=4;
			console.log(a+b+c);
			
		</script>
		
	</body>
</html>

运行结果：
在这里插入图片描述
点击F12之后：

在这里插入图片描述
主要是方便你调式javascript用的, 你可以看到你在页面中输出的内容。

相比alert他的优点是：

他能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。
console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。
console里面的内容非常丰富，你可以在控制台输入 console，然后就可看到：

在这里插入图片描述

document.getElementByle() 和 document.write() 的区别

前者覆盖时是覆盖部分标签，后者是直接覆盖整个页面内容；\

document.write() 方法可以用在两个方面：

页面载入过程中用实时脚本创建页面内容，用来追加一些标签。
清除当前页面内容(包括源文档的任何变量或值)。重新生成内容。
它的第 2 点和 document.getElementByle() 相区别。前者在清除全部页面内容，然后生成新的内容，即“覆盖文档"。

<script>
function myFunction()
{  
    document.write("糟糕，文档丢失了")
}
</script>
<button type="bulbon" onclick="myFunction()">覆盖文档</button>

点击按钮，括号里的内容则会全部覆盖文档。
后者：

<script>
document.getElementById("p01").innerHTML="段落已修改。";
</script>

这个仅仅只是替换了 id 为 p01 里的内容，没有覆盖页面。

这篇关于JavaScript基础2_输出的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！