【相关推荐:javascript视频教程、web前端】
前言
在 JavaScript 中,不像 Java 没有任何打印或输出方法,通常使用以下语言 4 输出数据的方出数据。
- 使用
window.alert()
弹出警告框 - 使用
document.write()
写入内容 HTML 文档中 - 使用
innerHTML
写入到 HTML 元素 - 使用
console.log()
控制台写入浏览器
用它们来展示一个例子。
window.alert()
新建一个 HTML 然后使用文件 VSCode 写下以下代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>window.alert()</title> </head> <body> <p>弹窗显示</p> <script type="text/javascript"> window.alert("这是弹窗测试!"); </script> </body> </html>
接着用浏览器打开上述文件,打开时就会显示如下弹窗,点击确定后弹窗关闭,然后在网页中显示内容。
document.write()
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>document.write()</title> </head> <body> <p>写入 HTML 文档</p> <script type="text/javascript"> document.write(Date()); </script> </body> </html>
新建 HTML 浏览器打开文件并写入上述内容后,页面将显示以下内容 document.write()
写入当前时间是成功的。但需要注意的是,如果 document.write()
在内容加载前与其他内容同时加载,可与其他内容一起显示。但是,如果页面内容在加载后执行 document.write()
,那么之前页面加载完的内容都将被写入的内容所覆盖。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>document.write()</title> </head> <body> <p>写入 HTML 文档</p> <button onclick="showDate()">展示时间</button> <script type="text/javascript"> function showDate() { document.write(Date()); } </script> </body> </html>
以下是页面加载完成后的执行 document.write()
前后对比,说明页面加载后调用 document.write()
覆盖以前的页面内容。
前后
innerHTML
JavaScript 若要访问某一个 HTML 此时可以使用元素 document.getElementById(id)
然后可以使用方法 innerHTML
获取或插入元素内容。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>innerHTML</title> </head> <body> <p id="inner">操纵 HTML 元素</p> <button onclick="changeContext()">点击修改上述内容</button> <script type="text/javascript"> function changeContext() { document.getElementById("inner").innerHTML = "修改后的内容"; } </script> </body> </html>
修改前修改后
console.log()
要使用 console.log()
该方法需要我们的浏览器来支持调试一般推荐使用 Chrome。然后使用 F12
打开键打开调试模式,切换到调试窗口 Console
菜单。因为我在这里用的是 Edge
,所以显示的是控制台,主要自己的喜好选择浏览器,但一般更推荐 Chrome。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>console.log</title> </head> <body> <p>查看浏览器调试模式</p> <script type="text/javascript"> var num1 = 11; var num2 = 10; console.log(num1 num2); </script> </body> </html>
总结
以上是关于的 JavaScript 虽然输出的相关内容不同 Java 那样有类似 System.out.println()
打印和输出方法,但使用上述方法 4 基本满足日常开发需求的方法。
【相关推荐:javascript视频教程、web前端】
以上是实例代码的详细介绍JavaScript请更多关注输出数据多种方式的详细内容。php中文网其他相关文章!
