JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)

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 截图：

程序中调试是测试，查找及减少bug(错误)的过程。

注意这个console.log() 对于ie8及以下版本会报错，测试后注意注释掉。

赞 (0)

相关推荐

  • JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)

    JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)

    JavaScript 输出 JavaScript 没有任何打印或者输出的函数. JavaScript 显示数据 JavaScript 可以通过不同的方式来输出数据: 使用 window.alert() 弹出警告框. 使用 document.write() 方法将内容写到 HTML 文档中. 使用 innerHTML 写入到 HTML 元素. 使用 console.log() 写入到浏览器的控制台. 使用 window.alert() 你可以弹出警告框来显示数据: <!DOCTYPE html>

  • 简介alert()与console.log()的不同

    简单的说alert 是弹出提示而console.log是在调试工具里打日志,下面具体给大家列出alert()与console.log()的不同点, [1]alert() [1.1]有阻塞作用,不点击确定,后续代码无法继续执行 [1.2]alert()只能输出string,如果alert输出的是对象会自动调用toString()方法 e.g. alert([1,2,3]);//'1,2,3' [1.3]alert不支持多个参数的写法,只能输出第一个值 e.g. alert(1,2,3);//1 [

  • javascript中alert()与console.log()的区别

    [1]alert() [1.1]有阻塞作用,不点击确定,后续代码无法继续执行 [1.2]alert()只能输出string,如果alert输出的是对象会自动调用toString()方法 e.g. alert([1,2,3]);//'1,2,3' [1.3]alert不支持多个参数的写法,只能输出第一个值 e.g. alert(1,2,3);//1 [2]console.log() [2.1]在打印台输出 [2.2]可以打印任何类型的数据 e.g. console.log([1,2,3]);//[

  • javascript 中的console.log和弹出窗口alert

    主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是: 1.他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是console能看到对象的内容. 2.console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作. 3.onsole里面的内容非常丰富,你可以在控制台输入:console,然后就可看到: Console {memory: Memo

  • JS实现获取word文档内容并输出显示到html页面示例

    本文实例讲述了JS实现获取word文档内容并输出显示到html页面.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var w = new ActiveXObject('Word.Application'); va

  • JavaScript输出所选择起始与结束日期的方法

    JavaScript输出所选择起始与结束日期的方法

    本文实例讲述了JavaScript输出所选择起始与结束日期的方法.分享给大家供大家参考,具体如下: 一直在用公司的报表工具做报表,报表里最常用的查询条件就是开始日期.结束日期. 自己会一点html和js,于是就想用html+JavaScript来实现选择查询日期,以及做出相应. 实现之后,觉得这个还是比较简单的,N年前学的html和javascript,总算是派上用场了,人人都可以开发网页. 这个代码要在谷歌的chrome浏览器中,日期选择才能有效果(代码中的input元素Type属性值date

  • javascript实现对话框功能警告（alert 消息对话框）确认（confirm 消息对话框）

    我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字.如果你不点击"确定",就不能对网页做任何操作,这个小窗口就是使用alert实现的. 注:alert弹出消息对话框(包含一个确定按钮). 语法: alert(字符串或变量);  注意: 1. 在点击对话框"确定"按钮前,不能进行任何其它操作. 2. 消息对话框通常可以用于调试程序. 3. alert输出内容,可以是字符串或变量,与document.write 相似. <title>a

  • javascript 时间显示代码集合(Date对象)

    javascript时间函数 javascript提供了Date对象来进行时间和日期的计算. Date对象有多种构造函数: new Date() //当前时间 new Date(milliseconds) //距离起始时间1970年1月1日的毫秒数 new Date(datestring) //字符串代表的日期与时间.此字符串可以使用Date.parse()转换,比如"Jannuary 1, 1998 20:13:15" new Date(year, month, day, hours

  • jQuery html()方法使用不了无法显示内容的问题

    $("#content").html(data.content); $("#content")[0].innerHTML = data.content; 今天遇到jquery中的html方法使用不了,只能用完最基本的innerHTML把内容展示出来.具体原因还没找到,肯定跟内容有关,展示不了的html放上来供以后检查原因,是我收到csdn的一封邮件. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Trans

  • 比较简洁的JavaScript 实时显示时间的脚本 修正版

    JavaScript显示时间,时间还在走动着!不是一个静态的效果! function Time() 定义一个函数.  { if (!document.layers&&!document.all)  return 由于IE与Netscape对JavaScript的解释不同,造成浏览的效果不同,所以要分别写代码.这句话判断一下用户所使用的浏览器,如果两者都不是,就返回.  var timer=new Date() 定义一个新的变量,名字为timer,为一个新的Date的对象.  var hou

随机推荐