JavaScript是一门Web编程语言,用来实现网页的交互功能,它和HTML、CSS共同组成了个Web开发的基础工具集合,也是前端开发者必备的技能;学习JavaScript教程可以了解它在网页开发中的所有特性和相关概念,让我们能够更加快速的去开发Web应用。
条件语句是一组命令的集合,当指定条件为真时执行相应命令。JavaScript中包含两种条件语句:if...else和switch。
JavaScript if...else 条件语句
若逻辑条件为真时执行一组语句。通过可选的else子句执行另一组语句。
Syntax
For single statement:
if (condition)
statement_1
[else
statement_2]
执行一下Example:
在以下示例中,if else语句用于检测输入分数是否大于50。
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>JavaScript if else statement : Example-1</title>
</head>
<body>
<h1 style="color: red">JavaScript : if else statement</h1>
<h3>Here the if else statement check whether the input marks is greater than 50 or not.</h3>
<hr />
<form name="form1" action ="#">
Input the marks<input type="text" name="text1" value=" " />
<input type="button" value="Marks check"
onclick='marksgrade()' />
</form>
<script src="if-else-example1.js"></script>
</body>
</html>
执行一下JS代码
function marksgrade()
{
if (document.form1.text1.value>50)
console.log('Marks is greater than 50.');
else
console.log('Marks is less than or equal to 50.');
}
执行一下JavaScript if...else if 语句
处理多个条件时,可使用else if。
语法示例
statement_1
else if (condition_2)
statement_2
...
else if (condition_n_1)
statement_n_1
else
statement_n
代码说明
condition_1、condition_2:可以是任何计算结果为 true 或 false 的 JavaScript 表达式。条件表达式必须包裹在圆括号中。若条件计算结果为 true,则执行 statement_1 中的语句;否则,执行 statement_2 中的语句。
statements_1、statements_2:可为任意JavaScript语句,包括更深层级的嵌套if语句。
最佳实践是使用块语句({...})执行多条语句。相关语法如下:
语法示例
{
statements_1
}
else
if(condition_2)
{
statements_2
}
示例:
此处if else if…语句根据某些条件判断数学成绩等级。
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>JavaScript if else if... statement : Example-1</title>
</head>
<body>
<h1 style="color: red">JavaScript : if else if statement</h1>
<h3>Here the if else if.. statement check the grade of Math. with following condition : </h3>
<hr />
<p style="color:green;font-weight:bold">A+ (marks>=90) : A (marks>=80 and marks<90) : B+ (marks>=70 and marks<80) : B (marks>=60
and marks<70) : C (marks<60) </p>
<form name="form1" action ="#">
Input the Math. marks<input type="text" name="text1" value=" " />
<br /><br />
<input type="button" value="Marks check"
onclick='marksgrade()' />
</form>
<script src="if-else-if-example1.js"></script>
</body>
</html>
执行一下JS代码
function marksgrade()
{
if (document.form1.text1.value >=90)
alert('Grade A+');
else
if (document.form1.text1.value >=80 && document.form1.text1.value <90)
{
alert('Grade A');
}
else
if (document.form1.text1.value >=70 && document.form1.text1.value <80)
{
alert('Grade B+');
}
else
if (document.form1.text1.value >=60 && document.form1.text1.value <70)
{
alert('Grade B');
}
else
alert('Grade C');
}
执行一下JavaScript 嵌套if语句
将一个if语句置于另一个if语句内部称为嵌套。请参阅以下语法:
语法示例
{
if (condition)
{
if (condition)
{
statement_1
}
else
{
statement_2
}
}
}
else
{
statement_3
}