JavaScript DOM编程艺术学习心得系列 ——（五）JavaScript语法之循环语句、函数、对象

1. 循环语句

if 语句或许是最重要、最有用的条件语句了，他的唯一不足是无法完成重复性的操作。if 语句里，花括号中的代码块只能执行一次，如果你想多次执行，那就需要用到循环语句了。
循环语句可以让我们反复多次地执行同一段代码。循环语句有几种不同的类型，但他们的工作原理几乎一样：只要给定的条件能够得到满足，包含在循环语句中的代码就将一直重复的执行，当给定条件的求值结果不再是 true 时，循环也就结束了。

1.1 while 循环

while 循环与 if 语句非常相似，它们的语法几乎完全一样，唯一的区别就是：只要给定条件的求值结果是 true ，包含在花括号里的代码就会一直重复执行。如下代码所示：

var count = 1;
while (count < 4){
	alert(count);
	count++;
}

上面这段代码执行后，alert 对话框就会闪3次，执行结束后 count 的值就是4了。若是代码块中没有“ count++ ”的话，这个循环就将一直进行下去。像上面这样使用 while 循环，如果循环控制条件的首次求值结果是 false，那么后面花括号中的代码将一次也不会执行。但是，有些时候我们希望代码能够至少执行一次，这时候我们就需要用到 do…while 循环了。

var count = 1;
do{
	alert(count);
} while (count > 4);

像上面这样，alert 弹窗就会弹出一次显示一个“1”，之后因为1不大于4，这个循环就被终止了。

1.2 for 循环

用 for 循环来重复执行一些代码也很方便，它类似于 while 循环，而且事实上，for 循环只是刚才介绍的 while 循环的一种变体。用 for 循环来重复执行一些代码的好处是循环控制结构更加清晰。与循环有关的所有内容都包含在 for 语句的圆括号部分中，如下面所示：

for (var count = 1; count < 11; count++){
	alert(count);
}

与循环有关的所有内容都包含在 for 语句的圆括号里，如上面的代码运行后 alert 弹出框也会弹出10次。在 for 循环中因为经常用于对某个数组里的全体元素进行遍历处理，这往往需要用到数组的 array.length 属性，这个属性可以告诉我们在给定数组里的元素的个数。一定要记住数组下标是从0开始不是从1开始。

var beatles = Array("小明","小红","小刚","小力");
for (var count = 0; count < beatles.length; count++)
{
	alert(beatles[count]);
}

上述代码的运行结果就是分别有“小明”、“小红”、“小刚”、“小力”的 alert 弹出框。

2. 函数

如果你想要多次使用同一段代码，可以把它们封装成一个函数（function）。函数就是一组允许在你的代码里随时调用的语句。每个函数实际上都是一个短小的脚本。
作为一种良好的编程习惯，应该先对函数作出定义再调用它们：

function shout() {
	var beatles = Array("John","Paul","George","Ringo");
	for(var count = 0; count < beatles.length; count++){
		alert(beatles[count]);
	}
}

需要注意声明函数时代码不会执行，如果想要执行上面的代码，要像下面这样：

shout();

没错，就这么简单，直接调用函数名就可以，但是这个函数是无参函数，即没有参数。但是函数的真正威力体现在你可以把不同的数据传递给它们，而它们将使用这些数据去完成预定的操作。我们把传递给函数的数据称为参数（argument）。
JavaScript 提供了许多内建函数，在前面多次出现过的 alert 就是一例。这个函数需要我们提供一个参数，它将弹出一个对话框来显示这个参数的值。在定义函数时，你可以为它声明任意多个参数，只要用逗号把它们分隔开来就行。在函数内部，你可以像使用普通变量那样使用它的任何一个参数。

function common(num1,num2) {
	var total = num1 * num2;
	alert(total);
}

定义完这个函数后，我们可以像下面这样调用它：

common(10,2);

这样调用之后，弹出框中显示的就是数值20。下面写一个函数来计算摄氏度转华氏度，函数的真正价值体现在，我们可以把它们当做一种数据类型来使用，这意味着可以把一个函数的调用结果赋给一个变量：

function change(temp) {
	var result = temp * 1.8;
	result = result + 32;
	return result;
}
var temp_celsius = 23;
var temp_fahrenheit = change(temp_celsius);
alert(temp_fahrenheit);

这样最后弹出的结果就是23摄氏度转换的华氏度。

2.1 变量的作用域

前面讲过，作为一种好的编程习惯，在第一次对某个变量赋值时应该用 var 对其作出声明。当在函数内部使用变量时，就更应该这么做。
变量既可以是全局的，也可以是局部的。而在谈论全局变量与局部变量的区别时，我们其实就是在谈论变量的作用域（scope）。
全局变量（global variable）可以在脚本中的任何位置被引用。一旦你在某个脚本中声明了一个全局变量，就可以从这个脚本中的任何位置——包括函数内部——引用它。全局变量的作用域是整个脚本。
局部变量（local variable）只存在于声明它的那个函数的内部，在那个函数的外部是无法引用它的。局部变量的作用域仅限于某个特定的函数。
用 var 关键字可以明确地为函数变量设定作用域。如果在某个函数中使用了 var，那个变量就将被视为一个局部变量，它只存在于这个函数的上下文中；反之，如果没有使用 var ，那个变量就将被视为一个全局变量，如果脚本中已经有了一个同名的全局变量，那么这个函数就会改变那个全局变量的值。看一下下面这个例子：

function square(num) {
	total = num * num;
	return total;
}
var total = 50;
var number = square(20);
alert(total);

代码的运行结果就是全局变量 total 的值变成了400。我的本意是让 square（）函数只把它计算出来的平方值返回给变量 number，但因为没有把这个函数内部的 total 变量明确声明为局部变量，这个函数把名字同样是 total 的那个全局变量的值也改变了。按照我的本意的写法应该像下面这样：

function square(num) {
	var total = num * num;
	return total;
}

这样，全局变量 total 变得安全了，再怎么调用 square（）函数也不会影响到它。

3. 对象

对象（object）是一种非常重要的数据类型，但此前我们还没有认真对待它。对象是自包含的数据集合，包含在对象里的数据可以通过两种形式访问——属性（property）和方法（method）：

• 属性是隶属于某个特定对象的变量；
• 方法是只有某个特定对象才能调用的函数。
  对象就是由一些属性和方法组合在一起而构成的一个数据实体。
  在 JavaScript 里，属性和方法都使用“点”语法来访问：
  Object.property
  Object.method
  这里可以假设一个对象的名字是Person，他有两个属性 mood、age ，该对象还关联着函数 walk（）、sleep（）。那么，当我想要调用它们的时候，就要像下面这样：

Person.mood
Person.age
Person.walk()
Person.sleep()

如果我想要用 Person 对象描述一个人，需要创建一个 Person 对象的实例（instance）。实例是对象的具体个体。为给定对象对象创建一个新实例需要使用 new 关键字，如下所示：

var Person = {};
var jeremy = new Person;

上面的语句将创建出 Person 对象的一个新实例 jeremy。之后如果 Person 对象中有 age 、mood等属性，那么我们就可以像下面这样来检索关于 jeremy 的信息了：

jeremy.age
jeremy.mood

3.1 内建对象

在电视上的烹饪节目里，只要镜头一转，厨师就可以端出一盘美味的菜肴并跟大家说“这是我刚做好的。”JavaScript 与这种节目里的主持人颇有几分相似：它提供了一系列预先定义好的对象，这些可以拿来就用的对象称为内建对象（native object）。
你其实已经见过一些内建对象了，数组就是其中一种。当我们使用 new 关键字去初始化一个数组时，其实是在创建一个 Array 对象的新实例：

var beatles = new Array();
beatles.length;

在语句中，我们并没有提前声明 Array() 对象，但是可以直接使用，我们还使用了 Array（）对象的 length 属性来获得数组中元素的个数。其他可以直接使用的内建对象还有很多，比如 Math 对象、Date 对象这种，它们都提供了很多非常有用的方法。比如：

var num = 4.555;
var num = Math.round(num);//round 方法可以把十进制数舍入为一个接近的整数。
alert(num);
var current_date = new Date();//在创建Date对象的新实例时，JavaScript解释器将自动地使用当前日期和时间对它进行初始化。
var today = current_date.getDay();//getDay()方法可以告诉我们给定日期是星期几。

在编写 JavaScript 脚本时，内建对象可以帮助我们快速、简单地完成许多任务。

3.2 宿主对象

除了内建对象，还可以在 JavaScript 脚本中使用其他的已经预先定义好的对象。这些对象不是由 JavaScript 语言本身而是由它的运行环境提供的。这个环境就是浏览器。由浏览器提供的预定义对象被称为宿主对象（host object）。
宿主对象包括 Form、Image、Element 等。我们可以通过这些对象获得关于网页上表单、图像和各种表单元素等信息。

4. 没什么用的废话

到这里，我们就介绍完 JavaScript 语言的基础知识了，在后续内容中我们会用到很多这部分的基础知识，再往下就要开始学习关于 DOM 的知识了。