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 UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 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/11/15 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
jquery json 实例代码
2010/12/02 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
python基础知识小结之集合
2015/11/25 Python
Python之os操作方法(详解)
2017/06/15 Python
python获取中文字符串长度的方法
2018/11/14 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
YUV转为jpg图像的实现
2019/12/09 Python
解决Python安装cryptography报错问题
2020/09/03 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
数控技术应用个人求职信范文
2014/02/03 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
2014年施工员工作总结
2014/11/18 职场文书
单位接收函格式
2015/01/30 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python