一.JavaScript条件语句
脚本的威力体现在它们可以根据人们给出的各种条件做出决策，javascript使用条件语句来做判断
条件语句(conditianal statement)通过判断表达式的值来决定执行还是跳过某些语句，包括if语句和switch语句
在 JavaScript 中，我们可使用以下条件语句：
if语句：
if- 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句?- 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
if..else嵌套语句
switch语句：
switch 语句?- 使用该语句来选择多个代码块之一来执行
1.if语句
if语句是最常见的条件语句。if语句的条件必须放在if后面的圆括号内，条件的求值结果永远是一个布尔值，即只能是true或false。花括号中的语句，不管它们有多少条，只有在给定条件的求值结果是true的情况下才会执行
格式：? ?if(条件){执行代码}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>if语句</title>
<script type="text/javascript">
var num=5;//赋值
if(10>num){//判断值是否为true
alert("小于");//如果为true，则执行代码
}
</script>
</head>
<body>
</body>
</html>
?
2.if...else 语句
格式：??if(条件){执行代码1}else{执行代码2}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>if else 语句</title>
<script type="text/javascript">
var h = new Date().getHours();//提取现在值
if (h < 12) {//判断
alert("早上好！");//为true时
}else{
alert("下午好！");//为false时
}
</script>
</head>
<body>
</body>
</html>
?
3.if...else if....else 语句
格式：??if(条件1){执行代码1}else if(条件2){执行代码2}......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>条件语句</title>
<script type="text/javascript">
var mon=new Date().getMonth();//取值
h=mon+1;
if (h >= 1 && h < 4) {//判断
alert("春季");//为true时
} else if (h >= 4 && h < 7) {//为false时，继续判断
alert("夏季");//为true时
} else if (h >= 7 && h < 10) {//为false时，继续判断
alert("秋季");//为true时
} else {
alert("冬季");//为false时
}
</script>
</head>
<body>
</body>
</html>
?
4.if..else嵌套语句
当在if/else语句中嵌套使用if语句时，必须注意确保else语句匹配正确的if语句
格式：
if(false){
if(false){
alert("true true");
}else{
alert("true false");
}
}else{
if(true){
alert("false true ");
}else{
alert("false false ");
}
}例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>if 嵌套</title>
<script type="text/javascript">
var h = new Date().getHours(); //提取现在的时间值
var day = new Date().getDay(); //提取星期值
if (day > 5) { //判断
alert("周末"); //为true时
if (h < 12) { //判断
alert("早上好！"); //为true时
} else {
alert("下午好！"); //为false时
}
} else {
alert("周内"); //为false时
if (h < 12) { //判断
alert("早上好！"); //为true时
} else {
alert("下午好！"); //为false时
}
}
</script>
</head>
<body>
</body>
</html>
?第一个值
?第二个值
5.switch 语句
当所有的分支都依赖于同一个表达式的值时，else if并不是最佳解决方案。
在这种情况下，重复计算多条if语句中的条件表达式是非常浪费的做法，而switch语句正适合处理这种情况
switch语句执行一个多路分支，首先计算expression的值，然后查找case子句的表达式是否和expression的值相同。如果找到匹配的case，那么将会执行这个case对应的代码块。如果找不到匹配的case，那么将会执行default标签中的代码块。如果没有default标签，switch语句将跳过它的所有代码块。
格式：
switch(条件) {
? ? ?case 常量1: 执行代码块 1 ;[break;]
? ? ?case 常量2: 执行代码块 2 ;[break;]
? ? ?.....
? ? ?case 常量n: 执行代码块 n ;[break;]
? ? ?default: 剩下的
}
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>switch语句</title>
<script type="text/javascript">
var day=new Date().getDay();
switch (day) {
case 1:
alert("今天星期一");
break;
case 2:
alert("今天星期二");
break;
case 3:
alert("今天星期三");
break;
case 4:
alert("今天星期四");
break;
case 5:
alert("今天星期五");
break;
case 6:
alert("今天星期六");
break;
default:
alert("今天星期天");
break;
}
</script>
</head>
<body>
</body>
</html>
?
使用switch语句时，要注意以下几点：
【1】由于每次执行switch语句时，并不是所有的case表达式都能执行到，因此，应该避免使用带有副作用的case表达式，比如函数调用表达式和赋值表达式，最安全的做法是在case表达式中使用常量表达式
【2】default标签一般都出现在switch的末尾，位于所有case标签之后，当然这是最合理也是最常用的写法，实际上，default标签可以放置在switch语句内的任何地方
【3】switch语句中，对每个case的匹配操作实际上是'==='恒等运算符比较，而不是'=='相等运算符比较，因此，表达式和case的匹配并不会做任何类型转换
二.JavaScript 循环
条件语句把javascript中的代码变成一条条的分支路径，而循环语句(looping statement)就是程序路径的一个回路，可以让一部分代码重复执行。
它们的工作原理几乎一样：只要给定条件仍能得到满足，包含在循环语句里的代码就将重复地执行下去。一旦给定条件的求值结果不再是true，循环也就到此为止。
JavaScript 支持不同类型的循环：
for?- 循环代码块一定的次数
for...in?- 循环遍历对象的属性
while?- 当指定的条件为 true 时循环指定的代码块
do...while?- 同样当指定的条件为 true 时循环指定的代码块
1.for
for 循环是您在希望创建循环时常会用到的工具。
for语句提供了一种比while语句更加方便的循环控制结构，用for循环来重复执行一些代码的好处是循环控制结构更加清晰
格式：
for (语句 1;?语句 2;?语句 3){
? ? ? ?被执行的代码块
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for循环语句</title>
<script type="text/javascript">
for (var i = 1; i <= 10; i++) {//循环【当i的值小于10时，则使i的值i++，再次循环】
alert(i);//输出
}
</script>
</head>
<body>
</body>
</html>
2.for...in
for/in语句也使用for关键字，但它和常规的for循环是完全不同的一类循环
格式：for(var 变量 in 数组/对象){被执行的代码块}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for in语句</title>
<script type="text/javascript">
var obj = { //对象
name: "zhnagsan",
age: 23,
address: "西安"
};
for (var myname in obj) {
alert(myname); //输出对象中的属性
}
</script>
</head>
<body>
</body>
</html>
3.while
while语句属于前测试循环语句，也就是说，在循环体内的代码被执行之前，就会对出口条件求值
格式：?
while(判断条件){
? ? ? ? 被循环执行的代码
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>while 循环</title>
<script type="text/javascript">
var i = 1; // 初始条件
while (i <= 10) {//判断
alert(i);//输出代码
i++;//递增
}
</script>
</head>
<body>
</body>
</html>
4.do...while
do while语句是后测试循环，即退出条件在执行循环内部的代码之后计算。这意味着在计算表达式之前，至少会执行循环主体一次
格式：
do{
? ??被循环执行的代码
}while(判断条件);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>do while语句</title>
<script type="text/javascript">
var i = 1; // 初始条件
do {
alert(i); //执行的代码
i++; //递增
} while (i <= 10) //判断
</script>
</head>
<body>
</body>
</html>
do/while循环和普通的while循环有两点语法方面不同：
【1】do/while循环要求必须使用关键字do来标识循环的开始，用while来标识循环的结尾并进入循环条件判断
【2】do/while循环用分号结尾。如果while循环体使用花括号括起来，则while循环也不用使用分号做结尾
三.JavaScript 跳转语句
跳转语句(jump statement)可以让解释器跳转到程序的其他部分继续执行，包括break、continue和return语句
1.break语句
单独使用break语句的作用是立即退出最内层的循环或switch语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>break</title>
<script type="text/javascript">
for (var i = 1; i <= 10; i++) {//初始值，判断，递增
alert(i);//执行代码
if (i == 5) {//当值为5时
break;//终止
}
}
</script>
</head>
<body>
</body>
</html>
2.continue语句
continue语句和break语句非常类似，但它不是退出循环，而是转而执行下一次循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>continue</title>
<script type="text/javascript">
for (var i = 5; i >= 0; i--) {//初始值，判断，递减
if (i == 2) {//当值为5时
continue;//终止
}
alert(i);//执行代码
}
</script>
</head>
<body>
</body>
</html>
3.return语句
函数调用是一种表达式，而所有表达式都有值。函数中的return语句就是指定函数调用后的返回值
四.?JavaScript?错误
当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。
可能是语法错误，通常是程序员造成的编码错误或错别字。
可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。
可能是由于来自服务器或用户的错误输出而导致的错误。
当然，也可能是由于许多其他不可预知的因素。
当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。
描述这种情况的技术术语是：JavaScript 将抛出一个错误。
1.JavaScript try 和 catch
try?语句允许我们定义在执行时进行错误测试的代码块。
catch?语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句?try?和?catch?是成对出现的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>try catch</title>
<script>
var txt = "";
function message() {
try {
adddlert("Welcome guest!");
} catch (err) {
txt = "本页有一个错误。\n\n";
txt += "错误描述：" + err.message + "\n\n";
txt += "点击确定继续。\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
</html>
2.finally 语句
finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>finally语句</title>
</head>
<body>
<p>不管输入是否正确，输入框都会再输入后清空。</p>
<p>请输入 5 ~ 10 之间的数字：</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">点我</button>
<p id="p01"></p>
<script>
function myFunction() {
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if (x == "") throw "值是空的";
if (isNaN(x)) throw "值不是一个数字";
x = Number(x);
if (x > 10) throw "太大";
if (x < 5) throw "太小";
} catch (err) {
message.innerHTML = "错误: " + err + ".";
} finally {
document.getElementById("demo").value = "";
}
}
</script>
</body>
</html>
?
没有输出显示的是：值是空的?
输出的不是数字显示：值不是一个数字
输出比5小的，显示的是：太小
输出比10大的，显示的是：太大
3.Throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Throw 语句</title>
</head>
<body>
<p>请输出一个 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</button>
<p id="message"></p>
<script>
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if (x == "") throw "值为空";
if (isNaN(x)) throw "不是数字";
x = Number(x);
if (x < 5) throw "太小";
if (x > 10) throw "太大";
} catch (err) {
message.innerHTML = "错误: " + err;
}
}
</script>
</body>
</html>
?
五.JavaScript?变量提升
1.JavaScript?变量提升
JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
声明提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变量提升</title>
</head>
<body>
<p id="demo"></p>
<script>
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
var x; // 声明 x
</script>
</body>
</html>
??
2.JavaScript 初始化不会提升
JavaScript 只有声明的变量会提升，初始化的不会。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初始值不会提升</title>
</head>
<body>
<p id="demo"></p>
<script type="text/javascript">
var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
var y = 7; // 初始化 y
</script>
</body>
</html>
?
六.javascript:void(0)
javascript:void(0)?中最关键的是?void?关键字，?void?是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接</title>
</head>
<body>
<a href="#">空连接</a>
<a href="javascript:void(0);">死链接</a>
</body>
</html>
?
href="#"与href="javascript:void(0)"的区别
#?包含了一个位置信息，默认的锚是#top?也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用?#?来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。