JavaScript 输出

myzbx 2024-12-02 22:42 9 浏览

JavaScript 没有任何打印或者输出的函数。

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

使用 window.alert()

代码练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用 window.alert()</title>
</head>
<body>
<script>
    window.alert(5 + 6);
</script>
</body>
</html>

运行结果：

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id的名字) 方法。

代码练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作 HTML 元素</title>
</head>
<body>
<p id="q">你好，77！</p>
<script>
  document.getElementById("q").innerHTML="欢迎回家！";
</script>
</body>
</html>

运行结果：

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。

innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

写到 HTML 文档

代码练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>写到 HTML 文档</title>
</head>
<body>
<script>
    document.write(Date());
</script>
</body>
</html>

运行结果：

代码练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>写到 HTML 文档(1)</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<script>
    function myFunction()
    {
        document.write(Date());
    }
</script>
</body>
</html>

运行结果：

写到控制台

浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式，在调试窗口中点击 "Console" 菜单。

代码练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>写到控制台</title>
</head>
<body>
<p>
  浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
  a = 5;
  b = 6;
  c = a + b;
  console.log(c);
</script>
</body>
</html>

运行结果：

HTML 段落

上一篇：3_28用 p 元素代表段落(基础HTML和HTML5)
下一篇：什么是HTML

JavaScript 输出

JavaScript 显示数据

使用 window.alert()

操作 HTML 元素

写到 HTML 文档

写到控制台

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」