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 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
详解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
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
js 表单验证方法(实用)
2009/04/28 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
Js apply方法详解
2017/02/16 Javascript
详解angular element()方法使用
2017/04/08 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
python实现从ftp服务器下载文件
2020/03/03 Python
python实现数字炸弹游戏
2020/07/17 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
Why do we need Unit test
2013/01/03 面试题
两则小学生的自我评价分享
2013/11/14 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
小学家长评语大全
2014/04/16 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android