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 读书笔记索引贴
Jan 11 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 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 时间转换Unix时间戳代码
2010/01/22 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
flash 得到自身url参数的代码
2009/11/15 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
python读写csv文件方法详细总结
2019/07/05 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
班级道德讲堂实施方案
2014/02/24 职场文书
模具专业求职信
2014/06/26 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis