1. 前言

之前我们只讲过一个JS语句：alert，用于弹窗显示信息。一般这种程序显示信息的语句，可以称之为输出语句，意思是程序输出信息给用户看。

JS常用的输出语句有3种，今天逐一介绍下。

2. 弹窗输出

可以使用alert()语句进行弹窗输出，括号中间的内容，即为弹窗显示的信息。此处需要格外注意的是，如果输出数字，可以直接写到括号中，如果要输出英文字母或者汉字，则需要使用双引号将英文或汉字包裹起来。至于为何要使用双引号包裹，我们后续章节会详细解析，现在我们只需要记住就OK了。

如下示例：

 <script>// 弹窗输出数字：123alert(123);// 弹窗输出汉字：你好啊，因为是汉字，所以需要双引号包裹alert("你好啊");</script>

运行代码后，会先弹窗显示数字123，然后弹窗显示汉字你好啊。

3. 网页内容输出

可以通过document.write()语句，将括号中的信息输出到网页内容部分。

同样，当括号内是数字时，可以直接写数字，而当括号内是英文或者汉字时，需要用双引号包裹起来。

如下示例：

<body>网页原有内容<br><script>// 将123输出到网页内容document.write(123);// 将你好啊输出到网页内容document.write("你好啊");</script>
</body>

body区域已经有网页原有内容<br>，然后又通过document.write向网页内容区域输出了123和你好啊，所以最终运行效果如下：

4. 控制台输出

一般来说，弹窗输出用于给用户展示一些重要提示信息，例如登录用户名或者密码错误。

而使用document.write的方式，输出到网页内容区域，这种用法很少，因为直接在body里面写内容岂不是更方便，为啥还要用document.write，多此一举。

还有一种输出方式，其实是前端开发人员最常用的，就是开发者工具的控制台输出。也就是输出的信息不在网页上显示，而是显示到控制台，这种方式一般是程序员调试使用的。

如下代码：

     <script>// 将123输出到控制台console.log(123);// 将你好啊输出到控制台console.log("你好啊");</script>

运行后，我们按【F12】打开控制台，如下图：

可见，console.log()会将括号中间的信息，输出到控制台显示。

5. 小结

alert用来弹窗提示，但是浏览器提供的弹窗太丑了，所以并不常用。

document.write用于输出到网页内容区域，这种方式不如直接在body中写内容方便，所以也不常用。

console.log可以将信息打印到控制台，网页上并不会显示，程序员会通过该语句调试程序，使用频率还是很高的。

零基础JavaScript入门教程(8)–JS之输出语句相关推荐

零基础JavaScript入门教程(6)–JS之使用开发者工具
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 打开开发者工具 3. 小结 1. 前言在上一篇中,我们曾经演示过一个错误实例: <!DOCTYPE html> <h ...
零基础JavaScript入门教程(1)–走进JavaScript的世界
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. JS的历史 3. JS的地位 4. JS与HTML.CSS的区别 5. JS是真正的编程语言 6. JS的组成部分 7. 小结 1. 前 ...
零基础JavaScript入门教程(2)–在网页中使用JS
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 网页中使用JS 3. 小结 1. 前言上一篇,给大家聊了很多关于JS的事情,大家想必已经迫不及待,想知道如何在网页中使用JS. 本篇就 ...
零基础JavaScript入门教程(37)-揭开JS对象的面纱
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 怎么设计JS的对象 3. 揭开JS对象的面纱 4. 小结 1. 背景之前我们讲了,JS对象其实是现实社会中事物的镜像,它可以表达.描述 ...
零基础JavaScript入门（第三天）
一.JavaScript 流程控制-循环 1.循环循环目的 :实际问题中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句 JS 中的循环在Js 中,主要有三种类型的循 ...
零基础Bootstrap入门教程(0)--教程背景与目录
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 教程目录 3. 源码下载 1. 背景在学习完成HTML/CSS/JS/jQuery零基础入门教程后,自然而然我们要进入Bootstra ...
零基础CSS入门教程(1)–初识CSS
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. HTML与CSS区别 3. CSS有哪些功能 4. 如何学习CSS 1. 前言学习CSS是离不开HTML的,HTML是CSS的基础,如 ...
零基础SSM入门教程(0)--教程背景与目录
点此查看零基础JavaWeb全栈文章目录及源码下载 1. 背景本教程的出发点是写一个比较条理,比较全面的SSM系列教程,首先造福自己.理顺自己的知识体系,然后也造福大众,因为网上现存的资源相对比较 ...
取得数组下标_《零基础C++入门教程》——（8）搞定二维数组与循环嵌套
一.学习目标了解二维数组的使用方法了解循环嵌套的使用方法目录预备第一篇,使用软件介绍在这一篇,C++与C使用的软件是一样的,查看这篇即可:<零基础看得懂的C语言入门教程>--(二) ...

零基础JavaScript入门教程(8)–JS之输出语句

本文目录