在前面一章的学习里,使得我们对JS有了一定的了解。现在,我们将正式介绍JS的基础知识。比如JS的语法、变量、数据类型、运算符、控制语句、函数等基础知识。
本节我们将详细介绍JS如何进行输出。由于JS没有专门用于打印或输出内容的函数(比如C++里有cout,C语言里有printf()函数),所以我们主要通过以下四种方法来输出数据:
1. 使用 window.alert() 弹出警告框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
alert('Hello JS!')
</script>
</html>效果展示如下:

2. 使用 innerHTML 写入到 HTML 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1></h1>
</body>
<script>
document.querySelector('h1').innerHTML='Hello JS!'
</script>
</html>
3. 使用 document.write() 方法将内容写到 HTML 文档中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
document.write(' <h1>Hello JS!</h1>')
</script>
</html>
4. 使用 console.log() 写入到浏览器的控制台。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
console.log('Hello JS!');
</script>
</html>
值得注意的是:在学习初期,要善于使用 console.log() 来辅助理解和调试代码。但随着技能提升,应尽快掌握并使用浏览器内置的断点调试器,这是更高效、更专业的调试方式。
总结:本节主要详细介绍了四种方式实现JS的输出,他们分别是:alert()弹窗、innerHTML、document.write()和console.log()。
C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程,并配有习题和答疑,点击了解:
一点编程也不会写的:零基础C语言学练课程
解决困扰你多年的C语言疑难杂症特性的C语言进阶课程
从零到写出一个爬虫的Python编程课程
只会语法写不出代码?手把手带你写100个编程真题的编程百练课程
信息学奥赛或C++选手的 必学C++课程
蓝桥杯ACM、信息学奥赛的必学课程:算法竞赛课入门课程
手把手讲解近五年真题的蓝桥杯辅导课程