肉渣教程

JS 输出

上一节 下一节

JavaScript输出

这里的输出,其实是一种形象的说法,主要指JS有哪些方式可以把程序中的数据展示给用户或开发者看;有如下4种常用方式:

  • 利用HTML元素的innerHTML属性来写入到指定元素的内容中
  • 通过document.write()写入到HTML页面中
  • 通过alert方法来弹出提示信息
  • 通过console.log()将信息输出到浏览器控制台(console)

使用innerHTML

<h2 id="demo"></h2>
<script>
document.getElementById("demo").innerHTML = "反清复明";
</script>

运行一下

使用document.write()

<!DOCTYPE html>
<html>
<body>

<h1>反清复明</h1>
<p>地振高冈,一派西山千古秀</p>

<script>
document.write( "门朝大海,三合河水万年流" );
</script>

</body>
</html>

运行一下


但是如果在文档加载完毕后使用document.write()方法,则会先清空原有的所有HTML页面内容。慎用!这只是测试时用的,正式场合慎用!慎用!慎用!

<!DOCTYPE html>
<html>
<body>

<h1>反清复明</h1>
<p>地振高冈,一派西山千古秀</p>

<button type="button" onclick="document.write('门朝大海,三合河水万年流');">click me</button>

</body>
</html>

运行一下

使用alert()

alert()等价于window.alert(),一般来说,window可以省略不写。

alert( "计算机大牛宁有种乎?" );

运行一下

使用console.log()

console.log()主要是用来debug的;通过console.log()可将信息输出到浏览器控制台(console)。下面的例子运行后,页面是空的,因为信息被输出到浏览器控制台了。

如何打开浏览器控制台,请自行去搜索,比如你可以去搜“chrome open console”即可,学习编程,尽量用纯英文去搜索想要解决的问题。

<!DOCTYPE html>
<html>
<body>

<script>
console.log("反清复明");
console.log("地振高冈,一派西山千古秀");
console.log("门朝大海,三合河水万年流");
</script>

</body>
</html>

运行一下


JS 输出

上一节 下一节