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写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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结合表单实现一些简单功能的例子
2011/06/04 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
php获取图片信息的方法详解
2015/12/10 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
JS实现可改变列宽的table实例
2013/07/02 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
基于vue实现分页效果
2017/11/06 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
Django 多环境配置详解
2019/05/14 Python
python处理excel绘制雷达图
2019/10/18 Python
详解python中docx库的安装过程
2019/11/08 Python
python程序输出无内容的解决方式
2020/04/09 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
护理自荐信范文
2013/10/05 职场文书
对标管理实施方案
2014/03/12 职场文书
个人工作总结范文2014
2014/11/07 职场文书
初婚未育证明样本
2015/06/18 职场文书
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers