JavaScript笔记二

流程控制

流程控制简介

• 顺序结构

  • 就是代码按照从上到下，从左到右的顺序执行。

  <script type="text/javascript">
  	var str = "从0到1";
  	var str2 = "系列图书";
  	var str3 = str + str2;
  	console.log(str3);
  	document.write(str3);
  </script>
  

• 选择结构

  • 根据条件判断来决定使用哪一段代码。

• 循环结构

  • 重复执行一段代码，直到条件不满足。

选择结构：if

单向选择：if

• 格式：

  if (条件) {
  
  }
  

• 这个“条件”，一般是一个比较表达式。

  var score = 100;
  if (score > 60) {
  	alert("那你很棒哦");
  }
  

双向选择：if...else...

var score = 10;
if (score < 60) {
	alert("补考！");
} else {
	alert("通过！");
}

• 可以使用三目运算符来代替双向选择

var score = 100;
var result = (score < 60) ? "补考！" : "通过！";
alert(result);

多向选择：if...else if...else...

var time = 14;
if (time < 12) {
	document.write("早上好！");
} else if (time > 12 && time < 18) {
	document.write("下午好！");
} else {
	document.write("晚上好！");
}

if语句嵌套

var gender = "女";
var height = 172;
if (gender == "男") {
	if (height > 170) {
		document.write("高个子男生");
	} else {
		document.write("矮个子男生");
	}
} else {
	if (height > 170) {
		document.write("高个子女生");
	} else {
		document.write("矮个子女生");
	}
}

选择结构：switch

• 不要忘记写break

var day = 5;
var week;
switch (day) {
	case 1:
		week = "星期一";
	break;
	case 2:
		week = "星期二";
	break;
	case 3:
		week = "星期三";
	break;
	case 4:
		week = "星期四";
	break;
	case 5:
		week = "星期五";
	break;
	case 6:
		week = "星期六";
	break;
	default:
		week = "星期日";
	
}
document.write(week); //星期五 

循环结构：while

• 满足某个条件下，重复执行某一段代码块。

var n = 1;
var sum = 0;
while (n <= 100) {
	sum=sum+n;
	n++;
}
document.write("1+2+3+...+100 = ", sum);

循环结构：do...while

• 无条件执行一次，再做判断

var n = 1;
var sum = 0;
do {
	sum += n;
	n++;
} while (n <= 100);
document.write("1+2+3...+100 = ", sum);

循环结构：for

for (var i = 0; i < 5; i++) {
	document.write(i+"<br/>");
}

题目：判断一个数是整数还是小数

// 判断一个数是整数还是小数?
// 利用parseInt和parseFloat两个方法
// 如果是整数，两个方法返回结果一样；否则就是小数了
var n = 3.14;
if (parseInt(n.toString()) == parseFloat(n.toString())){
	document.write(n+ " 是整数");
} else {
	document.write(n + " 是小数");
}

题目：水仙花数

• 所谓“水仙花数”是指一个3位数，其各位数字的立方和等于该数的本身。例如153就是一个水仙花数，因为153 = 13 + 53 + 33。

var str = "";
for (var i = 100; i < 1000; i++) {
	var a = i % 10; // 个位
	var b = (i / 10) % 10; // 十位
	b = parseInt(b); // 丢掉小数
	var c = parseInt(i / 100); // 百位
	
	if (i == (a*a*a + b*b*b + c*c*c)) {
		str += i + "、";
	}
}

document.write(str);
// 153、370、371、407、

初识函数

函数是什么？

• 先来看一段代码

var sum = 0;
for (var i = 1; i <= 50; i++) {
	sum += i;
}
document.write("50以内所有整数之和为：", sum);

• 上面这段代码实现的功能是：计算50以内所有整数之和。

• 如果要实现100以内所有数的和，应该怎么办呢？复制代码，很快实现了。

• 如果要你分别实现“50以内、100以内、150以内、200以内、250以内”所有整数之和。那岂不是要重复写5次相同的代码？

• 为了减轻这种重复的负担，js引入了函数的概念。

//定义函数
function sum(n) {
	var m = 0;
	for (var i = 1; i <= n; i++) {
		m += i;
	}
	document.write(n+"以内所有整数之和为：", m + "<br/>");
}

//调用函数
sum(50);
sum(100);

• 在js中，要使用函数，一般需要两个简单的2步。
  • 定义函数
  • 调用函数

函数的定义

• js中，函数可以分为两种：一种是有返回值的函数；另外一种是没有返回值的函数。

没有返回值的函数

• 对于函数的参数，是可以省略不写，当然可以是1个，2个或n个。

// 定义函数
function sum(a, b) { // 这里的参数是形参
	var sum = a + b;
	document.write(sum);
}

//调用函数
sum(1, 2);// 这里的参数是实参

• 函数如果只有定义部分，却没有调用部分，这是一点意义都没有的。如果函数只定义不调用，则JavaScript就会自动忽略这个函数，也就是不会执行这个函数。函数只有调用的时候，才会被执行。

有返回值的函数

• 有返回值的函数，指的是函数执行完之后，会返回一个值。
• 是否有返回值，只是多了一个return语句。

// 定义函数
function addSum(a,b) {
	var sum = a+b;
	return sum;
}

// 调用函数
var n = addSum(1, 2) + 100;
document.write(n);

全局变量和局部变量

• 根据作用域，变量可以分为如下2种。

  • 全局变量
  • 局部变量

• 全局变量一般在主程序中定义，其有效范围是从定义开始到程序结束。全局变量任何地方都可以用。

• 局部变量一般在函数中定义，其有效范围只限于函数之中，函数执行完就没了。

var a = "十里";
// 定义函数
function getMes() {
	var b = a + "桃花";
	document.write(b);
}

// 调用函数
getMes();
// 尝试使用函数内部的变量b
document.write(b);

函数的调用

• 如果一个函数仅仅是定义了二没有调用的话，则函数本身是不会执行的。
• js跟其他编程语言(如C、Java等)有很大不一样。js函数调用方式，常见有4种。

直接调用

// 定义函数
function test() {
	document.write("Hello World");
}

// 调用函数
test();

在表达式中调用

// 定义函数
function addSum(a,b) {
	var sum = a+b;
	return sum;
}

// 调用函数
var n = addSum(1, 2) + 100;
document.write(n);

在超链接中调用

• 在a元素的href属性中使用“javascript:函数名”的形式来调用函数。

<a href="javascript:test()">调用了一个函数</a>

在事件中调用

• js是基于事件的一门语言。像鼠标移动，单击，类似的事件很多。但一个事件产生的时候，我们就可以调用某个函数来针对这个事件作出响应。

<input type="button" onclick="test()" value="提交" />
<script type="text/javascript">
	function test() {
		alert("好好学习呀~");
	}
</script>

嵌套函数

• 在一个函数的内部定义另外一个函数。不过在内部定义的函数只能在内部调用，如果在外部调用，就会出错。

// 定义阶乘函数
function func(a) {
	// 嵌套函数定义，计算平方值的函数
	function multi(x) {
		return x * x;
	}
	var m = 1;
	for (var i = 1; i <= multi(a); i++) {
		m=m*i;
	}
	return m;
}
//调用函数
var sum = func(2) + func(3);
document.write(sum); //362904

• 这个例子中，func()函数内部定义了一个multi()。

• func(2)实现的是1x2x3x4，也就是4的阶乘。同理，func(3)实现的是1x2x3...x9，也就是9的阶乘。

• 嵌套函数非常强大，并且跟js重要的概念“闭包”有着直接关系。对于初学者，只需要知道有嵌套函数这一回事就行了。

内置函数

• 在JavaScript中，函数还可以分为“自定义函数”和“内置函数”。
• 自定义函数，指的是我们自定义的函数，前面学的就是自定义函数。
• 内置函数，指的是JavaScript内部已经定义好的函数，也就是说我们不需要自己写函数体，直接调用就行了。

//函数			说明
parseInt()		提取字符串中的数字，只限提取整数
parseFloat()	        提取字符串中的数字，可以提取小数
isFinite()		判断某一个数是否是一个有限数值
isNaN()			判断一个数是否是NaN值
escape()		对字符串进行编码
unescape()		对字符串进行解码
eval()			把一个字符串当做一个表达式一样去执行

题目：判断某一年是否是闰年

• 闰年的判断条件有两个。
  • 对于普通年，如果能被4整数，且不能被100整除的是闰年
  • 对于世纪年，能被400整除的是闰年

// 定义函数
function isLeapYear(year) {
	// 判断闰年的条件
	if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) {
		return year + "年是闰年";
	} else {
		return year + "年不是闰年";
	}
}
// 调用函数
document.write(isLeapYear(2018));

题目：求出任意5个数最大值

function getMax(a,b,c,d,e) {
	var maxNum;
	maxNum = (a > b) ? a : b;
	maxNum = (maxNum > c) ? maxNum : c;
	maxNum = (maxNum > d) ? maxNum : d;
	maxNum = (maxNum > e) ? maxNum : e;
	return maxNum;
}
document.write("5个数中的最大值为：" + getMax(3, 9, 1, 12, 50));

• 这个例子只是让大家熟悉一下函数的使用。

• 函数的内容是极其复杂的，我们这里只是学了点皮毛。