JavaScript 数据输出｜JavaScript 教程

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

JavaScript 显示数据

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

使用 window.alert() 弹出警告框。

使用 document.write() 方法将内容写到 HTML 文档中。

使用 innerHTML 写入到 HTML 元素。

使用 console.log() 写入到浏览器的控制台。

使用 window.alert()

示例代码

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

效果展示：

操作 HTML 元素

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

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

示例代码

效果展示：

我的第一个段落。

以上 JavaScript 语句（在 标签中）可以在 web 浏览器中执行：

document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。

innerHTML = “段落已修改。” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

在本教程中

在大多数情况下，在本教程中，我们将使用上面描述的方法来输出：

上面的例子直接把 id=”demo” 的 元素写到 HTML 文档输出中：

写到 HTML 文档

出于测试目的，您可以将JavaScript直接写在HTML 文档中：

示例代码

效果展示：

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

写到控制台

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 “Console” 菜单。

实例 console 截图：

谷歌控制台详解

用F12打开浏览器控制台，控制台中有以下分类：

Elements : 页面中的元素都在这个里面，经常用来调式页面的样式。

Network : 包含了所有的资源文件（html、css、js、图片、向后台请求的数据接口等），并告诉我们每一个文件加载完成的事件；这样我们可以针对加载时间过长的资源进行相关优化。

Sources : 包含了我们项目中的html、js、css所有的源代码，很多程序员扒一些优秀网站代码的时候就用到了它。

Resources : 当前网站本地存储的数据（cookie、localStorage、sessionStorage）。

Console : 当前页面向控制台输出的数据就在这里显示了。

Toggle device toolbar ：控制台左上角有一个手机、PC转换图标按钮，单击可以进入手机端模拟器，这里有模拟各种主流手机型号的手机尺寸的选项，也可以自己自定义添加对应的手机尺寸；我们的移动端开发就是在这个模拟器中完成的。

我们还可以利用控制台对js代码加断点进行页面bug调试。