济南盈讯科技有限公司

39. 程序设计--真正的基础！

引言

作为一个经验丰富的开发员，你迟早都会面对不懂技术的人群，不管你做的是什么他们都会觉得那是奇异的魔术。相反的，作为一个非技术性的人，不知道别人交付给你的成品是什么，这可是一个不好的开端。本文简单地讲解了程序设计的一些知识，希望对于所牵涉到的两方都有帮助，使他们能够克服这种无法交流的状况，并达到更加富有成效的境地。

本文也能帮助那些web开发新手了解一些一般的程序设计原理，在你开始学习如何编写JavaScript之前，有必要先学懂这些准则。本文的开头可能看起来有些乏味，但是相信我，如果你从一开始就记住这些基本原理的话，你的作品将会变得健壮得多，精悍而且有创新性得多（又叫做：惊艳指数高得多）。在你开始用某种程序语言进行编程之前（就本教程而言，是JavaScript），对最基础的程序设计基本法则的学习是很重要的

本文结构如下：

• 指令，我可以编写指令啦！
• 变量
  • 变量类型
    • 浮点型与整型
    • 布尔型
    • 字符串型
    • 数组型
    • 对象型
• 条件
• 循环语句
• 总结
• 练习题

指令，我可以编写指令啦！

程序设计最根本的形式就是将命令组合起来，并看着它们得到执行。程序设计是数学和语言学的混合物：你定义了大量的运算，并需要通过正确的语法来发出指令，告诉计算机来处理它们。在程序设计中，语法就是句法规则，并且各种程序设计语言的语法彼此大不相同。

比如说，下面的两段代码片段实现的是同样的效果，但前一段是用JavaScript编写的，而后一段是用PHP写的。

var fahrenheit = prompt('Enter temperature in Fahrenheit',0);
var celsius = (fahrenheit - 32) * 5 / 9;
alert(celsius);

$fahrenheit = $_GET['fahrenheit'];
$celsius = ($fahrenheit - 32) * 5 / 9;
echo $celsius;

自己试一试这个JavaScript写的华氏度到摄氏度的转换示例。

为了转化为操作或结果，程序设计语言需要经过解释。某些语言，比如JavaScript，是由web浏览器来解释的，你要做的就是将它们放在一个HTML文档中，并在浏览器中打开这个文档，从而让它们“一显身手”。其它的程序设计语言需要进行额外的翻译（编译）步骤，这样才能成为可执行文件。实际上，所有的计算机都只能读懂0和1的机器码，但在机器码以上还有多个层次的语言，每个层次的语言完成的是不同的任务。

在web环境中，解释和编译之间的界线已经开始模糊了，因为一些浏览器正在着手进行JavaScipt快速编译引擎的实验。不过对于这一点你也不用太担心；目前的规范还是要求解释JavaScript代码的。

变量

为了理解程序设计，我们首先来回顾一下代数学。如果你能记得起来的话，在学校里的代数学习是以下面这样的等式开始的：

3 + 5 = 8

如果你引入了一个未知数，比如下面的x，就可以开始演算了：

3 + x = 8

将常数移到等式的一边，你就可以算出x的值：

x = 8 - 3 
-> x = 5

如果你引入了一个以上的未知数，你的等式就更加多变了——这样你就使用了变量：

x + y = 8

你可以改变x和y的值，而等式依然成立：

x = 4
y = 4

或者

x = 3
y = 5

在程序设计语言中也是这样——在编程时，变量就是用来盛装那些可以变化的值的容器。变量可以包含所有类型的值，也可以用来容纳计算的结果。变量具有名字和值，名字和值之间由等号（＝）分开。变量名可以是任意的字母或单词，但要记住各种程序设计语言对于你可以使用的变量名各有不同的限制，因为有的单词是专供别的功能使用的。

为了简单起见，本文中我们用JavaScript来作程序设计语言范例（从逻辑上来讲这样做是很自然的，因为本web标准教程的这个部分全是关于JavaScript编程的！）下面的代码定义了两个变量，计算了这两个变量的和，并将计算结果定义为第三个变量。

注：此处的<script>标签的作用是告诉浏览器标签内的文本是脚本语言，并应当对其加以解释。类型属性"text/javascript"则告诉浏览器这是什么语言。

<script type="text/javascript">
var x = 5;
var y = 6;
var result = x + y;
</script>

解释程序将逐条地检查整段代码的指令，每条指令都以分号结束。分号告知解释程序一条指令的结束，就像在人类语言中句号或感叹号表示一个句子的结束一样。

用英语来讲，这一段代码的意思如下：

• 接下来的内容不是HTML的；生成一个能读懂基于文本的JavaScript类型的语言的翻译程序。
• 定义一个名叫x的新变量（就是var关键词），并给它赋一个大小为5的值。指令结束。
• 定义一个名叫y的新变量，并给它赋一个大小为6的值。指令结束。
• 定义一个名叫result的新变量，并将x加y的计算结果赋给它。语句结束。（由于result变量的赋值中有一个算式，解释程序会去查看x的值，然后查看y的值，将这两个值加总，并将result的值设置为计算结果——11）。
• 这个奇怪的语言终于结束了——回到HTML中，并告诉翻译程序离开这段代码。

你可以用变量来进行所有类型的计算，只需要在变量之间加入运算符即可。标准的计算方法有，用加号运算符实现加法，以及用减号运算符实现减法，等等。要实现乘法运算，你就得用星号（*），而除法运算是用斜杠（/）.要注意的是，前面加了双斜杠//的文本——这些文本是JavaScript中的注释。当JavaScript解释程序在脚本中遇到这两个符号时，就不会试图执行同一行中位于双斜杠后面的语句，而会直接跳过——因为这些是用来方便人们阅读代码的注释，而不是需要浏览器解释的代码。

<script type="text/javascript">
var x = 5;
var y = 6;
var z = 20;
var multiply = x * y * z;
// multiply的值为600 
var divide = x / y;
// divide will be 0.8333333333333334
var addAndDivide = (x + z) / y;
// addAndDivide = 4.166666666666667
var half = (y + z) / 2;
// half的值为13
</script>

如你所见，你可以对任意变量进行组合搭配，也可以在计算中同时使用变量与常量；还可以用括号对它们进行分组，以超越运算符的自然顺序（括号的优先级第一，然后是乘法或除法，然后是加减法，这些都是数学课上教过的标准）。

变量类型

然而，如果我们用简易计算器来完成所有运算的话，将会非常枯燥。计算机要更尖端一些，可以对更复杂的变量加以利用。这就是为什么会有变量类型的原因。变量有若干类型，并且不同的程序设计语言支持的类型也不同。最常见的有：

• 浮点型：类似1.21323, 4, 100004或0.123这样的数字
• 整型：像1, 12, 33, 140这样的自然数，而不是1.233
• 字符串型：像"boat", "elephant" 或 "damn, you are tall!"这样的一行文字
• 布尔型：或者是true或者是false，除此之外没有别的值了
• 数组：一个像1,2,3,4,'I am bored now'这样的值的集合
• 对象型：代表了一个对象。对象是一种构造，它试图通过属性和方法来建立真实世界中的事物的实例模型。比如说，你可以为一只猫建模，将其作为一个对象，并将其定义为有四条腿，一条尾巴，而且是姜黄色的。你还可以通过定义一个purr()方法来对它呜呜叫的方式进行定义，还有它可能会爱吃芝士汉堡包，可以给它定义一个getCheeseBurger()方法。你还可以重复使用这个cat对象来定义另一只所有属性都跟原来那只一样，但毛是灰色的猫。

JavaScript是一种“宽松类型”的语言，这就意味着你不必显式地声明变量的数据类型。你只需利用var关键字来表明自己正在声明的是一个变量就可以了，浏览器会根据上下文自行计算出你所使用的是什么数据类型，你也可以用引号将值括起来。

浮点型和整型

这些数据类型并没有什么神奇或怪异之处。你可以定义变量，并将它们的值设置为任何数字类型。

<script type="text/javascript">
  var fahrenheit = 123;
  var celsius = (fahrenheit - 32) * 5/9; 
  var clue = 0.123123;

</script>

浮点型和整型可以通过任意的数学运算符来加以修改。

布尔型

布尔型是一种简单的“是或非”的定义。你可以通过true或false来对其进行赋值。

<script type="text/javascript">

  var doorClosed = true;
  var catCanLeave = false;
</script>

字符串型

字符串是指可以包括任意字符的文本行。在JavaScript中，你可以通过将文本括在单引号或双引号中来定义字符串。

<script type="text/javascript">
  var surname = 'Heilmann';
  var name = "Christian";
  var age = '33';
  var hair = 'Flickr famous';
</script>

你可以用+号操作符来将字符串串联（一种技术术语，意思是“连接起来”）起来。要修改字符串，你需要用到程序设计语言提供给你的函数。但在另一方面，简单的串联跟下面所示的一样容易：

<script type="text/javascript">
  var surname = 'Heilmann';
  var name = 'Christian';
  var age = '33';
  var hair = 'Flickr famous';
  var message = 'Hi, I am ' + name + ' ' + surname + '. ';
  message += 'I am ' + age + 'years old and my hair is ' + hair;
  alert(message);
 </script>

试试看这个字符串连接示例。

+=操作符是“某某变量＝该变量自身＋”的缩写形式。这个脚本的结果就是字符串“Hi I am Christian Heilmann. I am 33 years old and my hair is Flickr famous”。

在用加号操作符来串联字符串和进行值的相加之间，有些细节问题需要记住。如果你想将两个值相加，你就应该确保这两个值都必须是数字，而不是字符串。串联对加法示例说明了二者之间的差别。“5”+“3” 的结果是53，而不是8！最简单的将字符串转化为数字的方法是在它前面加上一个"+"，就像这个例子里面的那样。

大多数程序设计语言都不会在意你用的是双引号还是单引号来将一个字符串括起来，只要你不把单双引号混用就行。为了防止JavaScript对字符串到底在哪里结束感到困惑，你需要用斜杠将包含在字符串中的引号注释出来：

<script type="text/javascript">
  // 这样声明将会导致程序出错， 因为解释程序不知道
  // '后面的东西到底是什么。此处声明的字符串会变成
  // 'Isn'.
  var stringWithError = 'Isn't it hard to get things right?';
  // 这样声明就不会出错了，这样程序就会运转正常
  var stringWithoutError = 'Isn\'t it hard to get things right?';
</script>

数组型

数组是一种非常强大的数据结构。一个数组就是一个值的集合，每个值都可以是变量，也可以是真正的数值。比如说：

<script type="text/javascript">
  var pets = new Array('Boomer','Polly','Mr.Frisky');
</script>

你可以通过数组计数器来访问每一个值，数组计数器就是该数组中的索引编号——可以把这看作是在一本书里进行章节的查寻一样。利用数组计数器来访问某个值的语法是arrayname[index]。因此，比如说pets[1]的结果就是字符串“Polly”。但是请等一下！我听到有人在问——Polly不是应该是pets[2]吗，因为它是这个数组中的第二个值？错——索引值可不是2，因为计算机是从0开始数起的，而不是1！这一点经常都会引起混淆和错误。

数组会自动为你提供一个特殊的信息源：length。如果你查看pets.length的值，就会得到3，因为在这个数组中一共放了3项值。

对于描述具有共同点的事物的集合，数组是一个很好的选择，而且每种程序设计语言都会附有许多方便的函数来对数组进行操作——排序，筛选，查找，等等。

对象型

如果你有一批物品，需要对其进行更详细的描述，而不只是一个流水号的话，数组就不能满足你的要求了，你需要的是创建一个对象。对象是程序设计中的一种数据结构，代表了或者说是模仿了真实的事物，就比如说人，车辆，或者是工具。

对象是程序设计中一个重要而又十分灵活，而且用途很多的组成部分，要在这里对它们进行详细阐述，恐怕就有点超出了本文的范围了。我们这样讲，一个对象就是一个带有若干属性的东西。比如说，假定你有一个人物对象；你就可以通过在各种属性前面加上一个点号，来对它们进行定义：

<script type="text/javascript">
  var person = new Object();
  person.name = 'Chris';
  person.surname = 'Heilmann';
  person.age = 33;
  person.hair = 'Flickr famous';
</script>

你可以通过点号来访问属性（person.age会得出33），或者用方括号来访问也可以（person['name']
的结果是“Chris”）。本教程随后就会教你更多关于JavaScript的知识。

以上这些就是关于变量可以取什么值类型的一个概括。程序设计的另一个重要部分就是你的程序的结构和逻辑。这就该轮到另外两个程序设计思想上场了：条件与循环。

条件

条件就是对某事的测试。条件对于程序设计来说是非常重要的，主要表现在以下几个方面：

首先，条件可以用来确保我们的程序能够运行，不管你交给它处理的是什么数据。如果你轻率地相信数据的话，就会陷入麻烦之中，而且你的程序也会失败。如果你的测试证明自己想要进行的事情是可行的，而且也具备了一切所需的正确格式的信息的话，这种情况就不会发生了，而你的程序也会稳定得多。采取这样的预防措施又叫做防御性编程。

条件可以帮你做的另一件事就是它可以进行分枝。你可能以前也遇到过分枝图，比如说在填写表单的时候。基本说来，这指的是对代码的各个“分枝”（部分）的执行，是否执行则取决于条件是否得到满足。

最简单的条件就是if语句，其语法是if(condition){ do this … }。只有当这个条件语句为真的时候，大括号内的代码才能得以运行。比如说，你可以对某个字符串进行测试，并根据其值来设置另一个字符串的值：

<script type="text/javascript">
var country = 'France';
var weather;
var food;
var currency;
if(country == 'England'){
  weather = 'horrible';
  food = 'filling';
  currency = 'pound sterling';
}
if(country == 'France'){
  weather = 'nice';
  food = 'stunning, but hardly ever vegetarian';
  currency = 'funny, small and colourful';
}
if(country == 'Germany'){
  weather = 'average';
  food = 'wurst thing ever';
  currency = 'funny, small and colourful';
}
var message = 'this is ' + country + ', the weather is ' + 
              weather + ', the food is ' + food + ' and the ' +
              'currency is ' + currency;
alert(message);
</script>

你可以自己在我那个关于天气的if语句示例中试试看这段代码。改变country变量的值，这样就可以看到不同的消息。

该示例中的条件部分就是后面跟着三个等号的country。三个等号的意思是该条件语句会测试country变量的值是否就是你所测试的那个值，以及是否是正确的变量（数据）类型。你也可以用双等于号来测试条件，但这个符号的意思是，无论x等于数字5还是等于字符“5”，if(x == 5)的值都为真。随着你的程序所要做的事不同，这个语句所导致的结果也会大不相同。

其它的条件测试案例：

• x > 0 - x是否大于零？
• x < 0 - x是否小于零？
• x <= 4 - x是否小于等于四？
• x != 'hello' - x是否不等于'hello'？
• x - x是否存在？

条件也可以进行嵌套。比如说，假设你想确保前面那个例子中的country变量是进行了设置的；你就可以这样做：

<script type="text/javascript">
var country = 'Germany';
var weather;
var food;
var currency;
if(country){
  if(country == 'England'){
    weather = 'horrible';
    food = 'filling';
    currency = 'pound sterling';
  }
  if(country == 'France'){
    weather = 'nice';
    food = 'stunning, but hardly ever vegetarian';
    currency = 'funny, small and colourful';
  }
  if(country == 'Germany'){
    weather = 'average';
    food = 'wurst thing ever';
    currency = 'funny, small and colourful';
  }
  var message = 'this is ' + country + ', the weather is ' + 
                weather + ', the food is ' + food + ' and the ' +
                'currency is ' + currency;
  alert(message);
}
</script>

你可以在我的那个安全天气的if语句示例中自己试试看。你可以改变country变量的值，来看看不同的弹出消息。

但是前面那个例子会一直尝试创建消息，不管country是否合用——所以如果抛出一个错误，或者声明“此项未定义，天气是…”的话，这个版本的安全性就会好了。如果country未定义，就不会创建消息。

此外，你可以用“或”或“与”语句来将各种条件串联起来，以分别测试是否某个语句为真，或两个语句都为真。在JavaScript中，“或”的表达方式为||而“与”则写成&&。假设你想测试x的值是否介于10和20之间——你就可以用条件声明if(x > 10 && x < 20)来实现。如果你想确保country是“England” 或 “Germany”二者之一，就可以用if(country == 'England' || country == 'Germany')。

此外还有else子句，每次只要第一个条件不为真，该子句就会被执行。如果你想对任何值做出反应，但要特别找出其中一个值来进行特殊处理的话，这个子句是非常有用的：

<script type="text/javascript">
  var umbrellaMandatory;
  if(country == 'England'){
    umbrellaMandatory = true;
  } else {
    umbrellaMandatory = false;
  }
</script>

条件是很有用的，但其作用稍微显得有限了些。如果你想反复进行某事的话又该怎么办呢？假设你的工作是为数组中每个值添加一个段落标签的话该怎么做呢？如果只用条件语句的话，你就得为你可能会遇到的所有不同长度的数组逐个进行硬编码了：

<script type="text/javascript">
  var names = new Array('Chris','Dion','Ben','Brendan');
  var all = names.length;
  if(all == 1){
    names[0] = '<p>' + names[0] + '</p>';
  }
  if(all == 2){
    names[0] = '<p>' + names[0] + '</p>';
    names[1] = '<p>' + names[1] + '</p>';
  }
  if(all == 3){
    names[0] = '<p>' + names[0] + '</p>';
    names[1] = '<p>' + names[1] + '</p>';
    names[2] = '<p>' + names[2] + '</p>';
  }
  if(all == 4){
    names[0] = '<p>' + names[0] + '</p>';
    names[1] = '<p>' + names[1] + '</p>';
    names[2] = '<p>' + names[2] + '</p>';
    names[3] = '<p>' + names[3] + '</p>';
  }

</script>

这真是很吓人，而且太不灵活了。程序设计的原意是使我们的工作更轻松，而如果你发现自己不断地重复编写同样的代码的话，你就可能在做错事了。良好的程序设计意味着将繁重的任务交给机器去做，而你只需要关注自己想要实现的目标就行了。

在这种情况下，我们就需要用循环来代替条件了，因为我们对数组中的每一项数据所做的是完全一样的事情，而数组的长度是无关紧要的。在下一章中我们会用循环来重新编写上面那个例子——对比一下这两段代码，你就会发现后者要精简得多！

循环

循环就是重复的条件，循环语句中会有一个变量随着每次循环而改变。最简单的循环形式就是for语句。该语句的语法与if语句相似，但选项要更多一些：

for(condition;end condition;change){
  // 执行吧，立即执行
}

一般而言，你用for循环所做的就是将大括号中的代码重复执行若干次。为了实现这一点，你需要定义一个迭代器，并在循环中不断地改变它的值，直到该变量的值满足结束条件（结束条件会引发解释程序退出该循环，并继续下一部分代码）。比如：

<script type="text/javascript" charset="utf-8">
  for(var i = 0;i < 11;i = i + 1){
    // 执行吧，立即执行
  }
</script>

此处我们定义了一个变量i，其初始值为0，然后进行检查，看是否该变量的值已经达到11（该变量值是否小于11？）。变动等式——i = i + 1——每循环一次就给i加上1，然后进行下一次迭代。这就意味着这项循环会执行11次。如果每次迭代给i加上2，就只会执行6次了：

<script type="text/javascript">
  for(var i = 0;i < 11;i = i + 2){
    // do it, do it now
  }

</script>

利用循环，上面的段落添加示例就会变得精简得多，也简单得多了：

<script type="text/javascript">
  var names = new Array('Chris','Dion','Ben','Brendan');
  var all = names.length;
  for(var i=0;i<all;i=i+1){
    names[i] = '<p>' + names[i] + '</p>';
  }
</script>

注意，你也可以在循环中将i作为该数组的计数器。这就是循环的威力之所在——你不仅可以重复执行同样的任务；而且在每次迭代中你都知道自己已经进行了多少次迭代。

总结

这——从非常非常精简的角度上来说——就是程序设计。你采用了变量和用户输入，并通过一种或另一种方式对它们进行改动，比较，循环，并返回它们的值。没什么奇妙的魔术，也不会太令人困惑，只不过是对于事物如何运转的一个非常简化的观点。在本文中我们还没有涉及到函数，但可以这么说，一旦你对某个任务进行了编程，而且你的程序在重复使用方面具有意义的话，你就可以将这段代码变成一个函数，这样就可以在任何需要用到该功能的地方重复执行你的代码了。在本教程随后的文章中将对函数进行更加详细的讨论。现在，我希望你对这些概念的认识比刚开始要稍微清楚一点儿了。

练习题

• 为什么var x = hello world这段代码会失败？
• 这段代码合法吗？var x = 'elephant';var y = "mouse";
• 这个条件语句所测试的是什么？if(x > 10 && x < 20 && x !== 13 && y < 10)
• 这个条件是做什么的？ if(b < 10 and b > 20)?

• 对带有 “peter”,“paul”,“mary”,“paddington bear”,“mr.ben”,“zippy”和“bagpuss”这些数据项的数组进行循环。给每个数据项添加一个段落并给每第偶数个数据项就添加一个class为“odd”的段落。提示：你可以通过同余运算符i % 2 == 0来测试每第偶数个数据项。

• < 上页
• 下页 >