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实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
构建一个JavaScript插件系统
Oct 20 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 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数据集构建JSON格式及新数组的方法
2012/11/07 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python求解平方根的方法
2015/03/11 Python
python threading模块操作多线程介绍
2015/04/08 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
印尼网上商店:Alfacart.com
2019/03/11 全球购物
银行柜员应聘推荐信范文
2013/11/24 职场文书
合作协议书怎么写
2014/04/18 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
防沙治沙典型材料
2014/05/07 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
个人担保书格式范文
2014/05/12 职场文书
陕西导游词
2015/02/04 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
Python基础之进程详解
2021/05/21 Python
用Python生成会跳舞的美女
2022/01/18 Python