JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)


Posted in Javascript onDecember 14, 2016

JavaScript 输出

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

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据:
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

使用 window.alert()
你可以弹出警告框来显示数据:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

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

</body>
</html>

以上 JavaScript 语句(在 <script> 标签中)可以在 web 浏览器中执行:
document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
在本教程中
在大多数情况下,在本教程中,我们将使用上面描述的方法来输出:
下面的例子直接把 id="demo" 的 <p> 元素写到 HTML 文档输出中:
写到 HTML 文档
出于测试目的,您可以将JavaScript直接写在HTML 文档中:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<script>
document.write(Date());
</script>

</body>
</html>

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

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
  	document.write(Date());
}
</script>

</body>
</html>

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

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

实例 console 截图:

JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)

程序中调试是测试,查找及减少bug(错误)的过程。

注意这个console.log() 对于ie8及以下版本会报错,测试后注意注释掉。

Javascript 相关文章推荐
Javascript JSQL,SQL无处不在,
May 05 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
php+js实现倒计时功能
Jun 02 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
Javascript的比较汇总
Jul 25 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
js实现扫雷源代码
Nov 27 Javascript
详解jQuery中的事件
Dec 14 #Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 #Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 #Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 #Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 #Javascript
微信小程序 require机制详解及实例代码
Dec 14 #Javascript
js实现获取鼠标当前的位置
Dec 14 #Javascript
You might like
PHP注释实例技巧
2008/10/03 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
python处理中文编码和判断编码示例
2014/02/26 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
详解Python3定时器任务代码
2019/09/23 Python
Python新手学习函数默认参数设置
2020/06/03 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
大学学习计划书范文
2014/05/02 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
成人成长感言如何写?
2019/08/16 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
JS代码编译器Monaco使用方法
2021/06/11 Javascript
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL