学IT网-在线学习IT知识

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: html css js php
查看: 691|回复: 0

JavaScript 教程-JavaScript 输出

[复制链接]

1380

主题

1382

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
11316
发表于 2017-7-31 11:14:25 | 显示全部楼层 |阅读模式
JavaScript 输出

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


使用 window.alert()
你可以弹出警告框来显示数据:
实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>

  4. <h1>我的第一个页面</h1>
  5. <p>我的第一个段落。</p>

  6. <script>
  7. window.alert(5 + 6);
  8. </script>

  9. </body>
  10. </html>
复制代码



尝试一下 »


操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:
实例
  1. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">!DOCTYPE</span> <span class="highATT" style="color: rgb(0, 0, 204);">html</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
  2. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">html</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
  3. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">body</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>

  4. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">h1</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>我的第一个 Web 页面<span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/h1</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>

  5. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">p</span> <span class="highATT" style="color: rgb(0, 0, 204);">id=</span><span class="highVAL" style="color: rgb(170, 17, 17);">"demo"</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>我的第一个段落<span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/p</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>

  6. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">script</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
  7. document.getElementById("demo").innerHTML = "段落已修改。";
  8. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/script</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>

  9. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/body</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
  10. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/html</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
复制代码



尝试一下 »

以上 JavaScript 语句(在 <script> 标签中)可以在 web 浏览器中执行:
document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = "Paragraph changed." 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

在本教程中
在大多数情况下,在本教程中,我们将使用上面描述的方法来输出:
下面的例子直接把 id="demo" 的 <p> 元素写到 HTML 文档输出中:

写到 HTML 文档
出于测试目的,您可以将JavaScript直接写在HTML 文档中:
实例
  1. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">!DOCTYPE</span> <span class="highATT" style="color: rgb(0, 0, 204);">html</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
  2. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">html</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
  3. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">body</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>

  4. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">h1</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>我的第一个 Web 页面<span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/h1</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>

  5. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">p</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>我的第一个段落。<span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/p</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>

  6. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">script</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
  7. document.write(Date());
  8. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/script</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>

  9. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/body</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
  10. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/html</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
复制代码



尝试一下 »


请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。

实例
  1. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">!DOCTYPE</span> <span class="highATT" style="color: rgb(0, 0, 204);">html</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
  2. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">html</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
  3. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">body</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>

  4. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">h1</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>我的第一个 Web 页面<span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/h1</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>

  5. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">p</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>我的第一个段落。<span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/p</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>

  6. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">button</span> <span class="highATT" style="color: rgb(0, 0, 204);">onclick=</span><span class="highVAL" style="color: rgb(170, 17, 17);">"myFunction()"</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>点我<span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/button</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>

  7. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">script</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
  8. function myFunction() {
  9.     document.write(Date());
  10. }
  11. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/script</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>

  12. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/body</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
  13. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/html</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
复制代码



尝试一下 »



写到控制台
如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。
实例
  1. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">!DOCTYPE</span> <span class="highATT" style="color: rgb(0, 0, 204);">html</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
  2. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">html</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
  3. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">body</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>

  4. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">h1</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>我的第一个 Web 页面<span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/h1</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>

  5. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">script</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
  6. a = 5;
  7. b = 6;
  8. c = a + b;
  9. console.log(c);
  10. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/script</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>

  11. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/body</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
  12. <span class="highLT" style="color: rgb(17, 119, 0);"><</span><span class="highELE" style="color: rgb(17, 119, 0);">/html</span><span class="highGT" style="color: rgb(17, 119, 0);">></span>
复制代码



尝试一下 »



您知道吗?
程序中调试是测试,查找及减少bug(错误)的过程。

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|小黑屋|学IT网-在线学习IT知识,学习编程知识 ( 京ICP备17027470号-2

GMT+8, 2019-11-17 18:06 , Processed in 0.035828 second(s), 34 queries .

Powered by xueit.wang 1.0

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表