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 相关文章推荐
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
JavaScript类的写法
Sep 17 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 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
短波收音机简介
2021/03/01 无线电
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
jquery 可排列的表实现代码
2009/11/13 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
vue3.0 上手体验
2020/09/21 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
Python实现SMTP邮件发送
2020/06/16 Python
python退出循环的方法
2020/06/18 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
python实现二分查找算法
2020/09/18 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
仓库门卫岗位职责
2013/12/22 职场文书
争做文明公民倡议书
2014/08/29 职场文书
担保书怎么写 ?
2019/04/22 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript