JavaScript 输出

简介: 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() 方法在浏览器中显示 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(错误)的过程。
目录
相关文章
|
存储 Linux
Linux中的进程等待(超详细)
Linux中的进程等待(超详细)
534 1
|
XML Java 开发者
论面向方面的编程技术及其应用(AOP)
【11月更文挑战第2天】随着软件系统的规模和复杂度不断增加,传统的面向过程编程和面向对象编程(OOP)在应对横切关注点(如日志记录、事务管理、安全性检查等)时显得力不从心。面向方面的编程(Aspect-Oriented Programming,简称AOP)作为一种新的编程范式,通过将横切关注点与业务逻辑分离,提高了代码的可维护性、可重用性和可读性。本文首先概述了AOP的基本概念和技术原理,然后结合一个实际项目,详细阐述了在项目实践中使用AOP技术开发的具体步骤,最后分析了使用AOP的原因、开发过程中存在的问题及所使用的技术带来的实际应用效果。
300 5
|
数据格式
如何绘制热图?ggplot2入门笔记
如何绘制热图?ggplot2入门笔记
|
开发者 Sentinel 微服务
高并发架构设计三大利器:缓存、限流和降级问题之降级策略中的有限状态机的三种状态切换的问题如何解决
高并发架构设计三大利器:缓存、限流和降级问题之降级策略中的有限状态机的三种状态切换的问题如何解决
241 0
|
存储
MCS-51单片机的中断源
MCS-51单片机的中断源
847 1
|
算法 Java 计算机视觉
图像处理之颜色梯度变化 (Color Gradient)
图像处理之颜色梯度变化 (Color Gradient)
301 0
|
自然语言处理 安全 Unix
【天枢系列 01】Linux行数统计:命令对决,谁才是王者?
【天枢系列 01】Linux行数统计:命令对决,谁才是王者?
290 4
|
存储 机器学习/深度学习 人工智能
玩转AIGC | 使用阿里云NAS+PAI-EAS部署Stable Diffusion文生图模型
阿里云的AIGC存储解决方案是覆盖了数据收集、模型训练以及模型推理整个生命周期,本实验场景主要覆盖模型推理过程,介绍如何使用模型在线服务(PAI-EAS)以及文件存储NAS部署AIGC应用,快速生成图片。
14464 10
玩转AIGC | 使用阿里云NAS+PAI-EAS部署Stable Diffusion文生图模型
|
消息中间件 Java 关系型数据库
分布式系统第五讲:分布式事务及实现方案
分布式系统第五讲:分布式事务及实现方案
726 0
|
安全 Java 数据库
Spring Boot 3 + JWT + Security 联手打造安全帝国:一篇文章让你掌握未来!
`Spring Security`已经成为`java`后台权限校验的第一选择.今天就通过读代码的方式带大家深入了解一下Security,本文主要是基于开源项目[spring-boot-3-jwt-security](https://github.com/ali-bouali/spring-boot-3-jwt-security)来讲解Spring Security + JWT(Json Web Token).实现用户鉴权,以及权限校验. 所有代码基于`jdk17+`构建.现在让我们开始吧!
3665 1
 Spring Boot 3 + JWT + Security 联手打造安全帝国:一篇文章让你掌握未来!