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 数值型和字符串型之间的转换
Jul 25 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
JS实现滑动插件
Jan 15 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
星际流派综述
2020/03/04 星际争霸
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
php生成zip文件类实例
2015/04/07 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
语义化 H1 标签
2008/01/14 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
Python 备份程序代码实现
2017/03/06 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
解决python删除文件的权限错误问题
2018/04/24 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
党日活动总结
2014/05/07 职场文书
运动会班级口号
2014/06/09 职场文书
辞职信如何写
2015/02/27 职场文书
个人优缺点总结
2015/02/28 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
解决MySQL报“too many connections“错误
2022/04/19 MySQL
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS