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>

Note

请使用 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>

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

触发修改文章时间【fastadmincms开发记录】|fastadmincms二次开发,触发,修改,文章,时间,fastadmin,ms,开发,记录
触发修改文章时间【fastadmincms开发记录】
在tp5中过滤输入的零宽度字符【fastadmincms开发记录】|fastadmincms二次开发,在tp5中,过滤,输入,的零,宽度,字符,fastadmin,ms,开发,记录
在tp5中过滤输入的零宽度字符【fastadmincms开发记录】
处理tag标签中的0宽空格【fastadmincms开发记录】|fastadmincms二次开发,处理,tag,标签,中的,0宽,空格,fastadmin,ms,开发,记录
处理tag标签中的0宽空格【fastadmincms开发记录】
添加专题时tags标签id出错【fastadmincms开发记录】|fastadmincms二次开发,添加,专题,时tags,标签,id,出错,fastadmin,ms,开发,记录
添加专题时tags标签id出错【fastadmincms开发记录】
20230518----模板 广告【fastadmincms开发记录】|fastadmincms二次开发,20230518,模板,广告,fastadmin,ms,开发,记录
20230518----模板 广告【fastadmincms开发记录】
cms添加视频模型【fastadmincms开发记录】|fastadmincms二次开发,ms,添加,视频,模型,fastadmin,开发,记录
cms添加视频模型【fastadmincms开发记录】
新增单篇收费复制功能【fastadmincms开发记录】|fastadmincms二次开发,新增,单篇,收费,复制,功能,fastadmin,ms,开发,记录
新增单篇收费复制功能【fastadmincms开发记录】
添加开会员折扣功能【fastadmincms开发记录】|fastadmincms二次开发,添加,开会,折扣,功能,fastadmin,ms,开发,记录
添加开会员折扣功能【fastadmincms开发记录】

历史上的今天:05月02日

热门专题

云南巨榕教育投资集团有限公司|云南巨榕教育投资集团有限公司,巨榕教育集团,巨榕教育
云南巨榕教育投资集团有限公司
安徽中源管业|安徽中源管业,安徽中源管业mpp电力管,安徽中源管业cpvc电力管,安徽中源管业pe穿线管,安徽中源管业电力管,安徽中源管业排水管,安徽中源管业通信管,安徽中源管业管材
安徽中源管业
金诺幼儿园(春城路金诺幼儿园)|昆明官渡区幼儿园,幼儿园报名,官渡区幼儿园,春城路幼儿园,幼儿园招生,学前班,昆明幼儿园,金诺幼儿园,环城南路幼儿园,石井路幼儿园
金诺幼儿园(春城路金诺幼儿园)
安徽开放大学|安徽开放大学报名,安徽开放大学报考,安徽开放大学,什么是安徽开放大学,安徽开放大学学历,安徽开放大学学费,安徽开放大学报名条件,安徽开放大学报名时间,安徽开放大学学历,安徽开放大学专业
安徽开放大学
昆明综合高中|昆明综合高中
昆明综合高中
易捷尔高职单招|易捷尔高职单招,易捷尔高职单招培训,单招分数线,单招录取分数线,高职单招学校分数线
易捷尔高职单招
易捷尔单招|易捷尔单招,易捷尔单招培训,易捷尔单招报名,易捷尔单招考试,易捷尔单招培训学校,易捷尔单招分数
易捷尔单招
开放大学|开放大学报名,开放大学报考,开放大学,什么是开放大学,开放大学学历,开放大学学费,开放大学报名条件,开放大学报名时间,开放大学学历,开放大学专业
开放大学

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部