JavaScript 输出

╰+攻爆jí腚メ 2023-10-12 21:55 63阅读 0赞

## 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>

<table> 
 <tbody> 
  <tr> 
   <th> <p><img alt="" src="https://img-blog.csdnimg.cn/img_convert/f8c147c01f3f0ecac96f9278e9f55399.jpeg"></p> </th> 
   <td> <p>使用 document.write() 可以向文档写入内容。</p> <p>如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。</p> </td> 
  </tr> 
 </tbody> 
</table>

### 实例 ###

<!DOCTYPE html>  
<html>  
<body>  
  
<h1>我的第一个 Web 页面</h1>  
  
<p>我的第一个段落。</p>  
  
<button οnclick="myFunction()">点我</button>  
  
<script>  
function myFunction() \{  
document.write(Date());  
\}  
</script>  
  
</body>  
</html>

--------------------

### 写到控制台 ###

如果您的浏览器支持调试，你可以使用 **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 截图：

![8e2e6ba04ae97e0e6ec7756cf25208e0.jpeg][]

### 您知道吗? ###

<table> 
 <tbody> 
  <tr> 
   <th> <p><img alt="" src="https://img-blog.csdnimg.cn/img_convert/2045d26ac2efff564c61714d7f11e739.jpeg"></p> </th> 
   <td>程序中调试是测试，查找及减少 bug(错误)的过程。</td> 
  </tr> 
 </tbody> 
</table>

## **笔记** ##

> ### console.log()的用处 ###
> 
> 主要是方便你调式javascript用的, 你可以看到你在页面中输出的内容。
> 
> **相比alert他的优点是：**
> 
> 他能看到结构化的东西，如果是alert，弹出一个对象就是\[object object\],但是console能看到对象的内容。
> 
> console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。
> 
> console里面的内容非常丰富，你可以在控制台输入 console，然后就可看到：
> 
> ![6eefa1d731e911cdc8d497bbb5b470a8.jpeg][]

> document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
> 
> innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。
> 
> innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

> 您会经常看到 document.getElementById("id")。
> 
> 这个方法是 HTML DOM 中定义的。
> 
> DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。
> 
> 格式<script>
> 
> 那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。
> 
> 现在已经不必这样做了。
> 
> JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
> 
> **脚本位置**
> 
> 在 <head> 或者 <body> 的JavaScript
> 
> 外部脚本不能包含 <script> 标签。
> 
> **输出数据**
> 
> window.alert() 弹出警告框。
> 
> document.write() 方法将内容写到 HTML 文档中。
> 
> innerHTML 写入到 HTML 元素。
> 
> console.log() 写入到浏览器的控制台。
> 
> **输出内容**
> 
> 使用 document.write() 向文档输出写内容。
> 
> 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖
> 
> **写到控制台(调试模式)**
> 
> 使用 console.log() 方法在浏览器中显示 JavaScript 值。
> 
> F12 启用调试模式， 在调试窗口中点击 "Console" 菜单。

[8e2e6ba04ae97e0e6ec7756cf25208e0.jpeg]: https://img-blog.csdnimg.cn/img_convert/8e2e6ba04ae97e0e6ec7756cf25208e0.jpeg
[6eefa1d731e911cdc8d497bbb5b470a8.jpeg]: https://img-blog.csdnimg.cn/img_convert/6eefa1d731e911cdc8d497bbb5b470a8.jpeg