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中面向对象技术的模拟
Sep 25 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
学习jQuey中的return false
Dec 18 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
JS中的BOM应用
Feb 02 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
微信小程序文章详情功能完整实例
Jun 03 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
正则表达式语法
2006/10/09 Javascript
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
js动态设置鼠标事件示例代码
2013/10/30 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
JS验证不重复验证码
2017/02/10 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Python迭代和迭代器详解
2016/11/10 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
在vscode中配置python环境过程解析
2019/09/28 Python
python实现猜单词游戏
2020/05/22 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
护士自我鉴定
2013/10/23 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
大学生在校表现评语
2014/12/31 职场文书
关于观后感的作文
2015/06/18 职场文书
换届选举主持词
2015/07/03 职场文书
公司车辆管理制度
2015/08/04 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript