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 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
定义select的边框颜色
Apr 28 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
jQuery构造函数init参数分析
May 13 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
JS实现手写parseInt的方法示例
Sep 24 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 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
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
Python之PyUnit单元测试实例
2014/10/11 Python
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
python中defaultdict的用法详解
2017/06/07 Python
numpy排序与集合运算用法示例
2017/12/15 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
python groupby 函数 as_index详解
2019/12/16 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
父亲的菜园教学反思
2014/02/13 职场文书
生产文员岗位职责
2014/04/05 职场文书
应聘护士求职信
2014/07/21 职场文书
社区党员干部承诺书
2015/05/04 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
Python进程间的通信之语法学习
2022/04/11 Python