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的面向对象的特性实现限制试用期
Aug 04 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 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语法(3)
2006/10/09 PHP
MySQL修改密码方法总结
2008/03/25 PHP
php auth_http类库进行身份效验
2009/03/19 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
python实现随机密码字典生成器示例
2014/04/09 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
两道JAVA笔试题
2016/09/14 面试题
保送生自荐信范文
2013/10/06 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
失职检讨书大全
2015/01/26 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
React 高阶组件HOC用法归纳
2021/06/13 Javascript
MySQL分区表管理命令汇总
2022/03/21 MySQL
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js
windows server2008 开启端口的实现方法
2022/06/25 Servers