在前面一章的学习里,使得我们对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>

效果展示如下:

通过alert()弹窗输出


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>

innerHTML


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>

document.write()


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()

值得注意的是:在学习初期,要善于使用 console.log() 来辅助理解和调试代码。但随着技能提升,应尽快掌握并使用浏览器内置的断点调试器,这是更高效、更专业的调试方式。

总结:本节主要详细介绍了四种方式实现JS的输出,他们分别是:alert()弹窗、innerHTML、document.write()和console.log()。

点赞(163)

C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程,并配有习题和答疑,点击了解:

一点编程也不会写的:零基础C语言学练课程

解决困扰你多年的C语言疑难杂症特性的C语言进阶课程

从零到写出一个爬虫的Python编程课程

只会语法写不出代码?手把手带你写100个编程真题的编程百练课程

信息学奥赛或C++选手的 必学C++课程

蓝桥杯ACM、信息学奥赛的必学课程:算法竞赛课入门课程

手把手讲解近五年真题的蓝桥杯辅导课程

Dotcpp在线编译      (登录可减少运行等待时间)