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 相关文章推荐
QUnit jQuery的TDD框架
Nov 04 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
Vue仿今日头条实例详解
Feb 06 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 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的十大要点(上)
2009/02/04 PHP
php实现递归的三种基本方式
2020/07/04 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
python制作最美应用的爬虫
2015/10/28 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
简单了解Django模板的使用
2017/12/20 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
django ajax发送post请求的两种方法
2020/01/05 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
财务总监管理职责范文
2014/03/09 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书