Javascript基础(三)|青训营

45 阅读5分钟

五. JS 输出语句汇总(5种)

某些情况下,我们可能需要将程序的运行结果输出到浏览器中,JavaScript 中为我们提供了多种不同的输出语句来向浏览器中输出内容:

使用 alert() 函数来弹出提示框; 使用 confirm() 函数来弹出一个对话框; 使用 document.write() 方法将内容写入到 HTML 文档中; 使用 innerHTML 将内容写入到 HTML 标签中; 使用 console.log() 在浏览器的控制台输出内容。 接下来我们来分别介绍一下这 5 种不同的输出语句:

1. alert() 函数

使用 JS alert() 函数可以在浏览器中弹出一个提示框,在提示框中我们可以定义要输出的内容,语法格式如下:

alert(message);

其中 message 为要在提示框中输出的内容,需要注意的是,alert() 中只能输出文本内容。

alert() 函数是 window 对象下的一个函数,所以有时为了代码更严谨,我们也可以使用 window.alert() 的形式来调用 alert() 函数。

2. confirm() 函数

JS confirm() 函数与 alert() 函数相似,它们都是 window 对象下的函数,同样可以在浏览器窗口弹出一个提示框,不同的是,使用 confirm() 函数创建的提示框中,除了包含一个“确定”按钮外,还有一个“取消”按钮。如果点击“确定”按钮,那么 confirm() 函数会返回一个布尔值 true,如果点击“取消”按钮,那么 confirm() 函数会返回一个布尔值 false。

3. console.log()

使用 JS console.log() 可以在浏览器的控制台输出信息,我们通常使用 console.log() 来调试程序,其语法格式如下:

console.log(message);

其中 message 为要输出的内容,可以是字符串或者对象类型。与 window.alert() 和 window.confirm() 可以分别简写成 alert() 和 confirm() 不同,console.log() 不能简写。

4. document.write()

使用 JS document.write() 可以向 HTML 文档中写入 HTML 或者 JavaScript 代码,语法格式如下:

document.write(exp1, exp2, exp3, …);

其中 exp1、exp2、exp3 为要向文档中写入的内容,document.write() 可以接收多个参数,即我们可以一次向文档中写入多个内容,内容之间使用逗号进行分隔。

5. innerHTML

与前面介绍的几个函数不同,innerHTML 是一个属性而不是一个函数,通过它可以设置或者获取指定 HTML 标签中的内容。

六.JS if else语句:条件判断语句

条件判断语句是程序开发过程中一种经常使用的语句形式,和大部分编程语言相同,JavaScript 中也有条件判断语句。所谓条件判断,指的是程序根据不同的条件来执行不同的操作,例如根据年龄来显示不同的内容,根据布尔值 true 或 false 来判断操作是成功还是失败等。

JavaScript 中支持以下几种不同形式的条件判断语句:

if 语句; if else 语句; if else if else 语句; switc case 语句。

1. if 语句

if 语句是 JavaScript 中最简单的条件判断语句,语法格式如下:

if(条件表达式){
    // 要执行的代码;
}

123

当条件表达式成立,即结果为布尔值 true 时,就会执行 { } 中的代码。

2. if else 语句

if else 语句是 if 语句的升级版,它不仅可以指定当表达式成立时要执行的代码,还可以指定当表达式不成立时要执行的代码,语法格式如下:

if(条件表达式){ // 当表达式成立时要执行的代码 }else{ // 当表达式不成立时要执行的代码 }

3. if else if else 语句

if 和 if else 语句都只有一个条件表达式,而 if else if else 语句是它们更高级的形式,在 if else if else 语句中允许您定义多个条件表达式,并根据表达式的结果执行相应的代码,语法格式如下:

if (条件表达式 1) {
    // 条件表达式 1 为真时执行的代码
} else if (条件表达式 2) {
    // 条件表达式 2 为真时执行的代码
}
...
  else if (条件表达式N) {
    // 条件表达式 N 为真时执行的代码
} else {
    // 所有条件表达式都为假时要执行的代码
}

提示:if else if else 语句在执行过程中,当遇到成立的条件表达式时,会立即执行其后 { } 中的代码,然后退出整个 if else if else 语句,若后续代码中还有成立的条件表达式,则不会执行。

 七.switch case语句

JS switch case 语句与 if else 语句的多分支结构类似,都可以根据不同的条件来执行不同的代码;但是与 if else 多分支结构相比,switch case 语句更加简洁和紧凑,执行效率更高。

JavaScript switch case 语句的语法格式如下:

switch (表达式){
    case value1:
        statements1  // 当表达式的结果等于 value1 时,则执行该代码
        break;
    case value2:
        statements2  // 当表达式的结果等于 value2 时,则执行该代码
        break;
    ......
    case valueN:
        statementsN  // 当表达式的结果等于 valueN 时,则执行该代码
        break;
    default :
        statements  // 如果没有与表达式相同的值,则执行该代码
}

工作原理:

switch 后面的 (n) 是需要匹配的参数,可以是表达式,也可以(并通常)是变量。

然后表达式中的值会与 case 中的数字作比较,如果与某个 case 相匹配,那么其后的代码就会被执行。

break 的作用是防止代码自动执行到下一行。如果 JavaScript 遇到 break 关键词,它会跳出 switch 代码块。

default 关键词是默认模块,规定不存在 case 匹配时所运行的代码。

代码解释:

计算一次 switch 表达式
把表达式的值与每个 case 的值进行对比
如果存在匹配,则执行关联代码

break 关键字

switch 语句是逐行执行的,当 switch 语句找到一个与之匹配的 case 子句时,不仅会执行该子句对应的代码,还会继续向后执行,直至 switch 语句结束。为了防止这种情况产生,需要在每个 case 子句的末尾使用 break 来跳出 switch 语句。