JavaScript入门之语言基础第2/2页
更新时间:2011年10月21日 20:11:01 作者:
本文通过全面列举基础的JavaScript概念这一方式来阐述该语言的基本原理,以此来为初学者提供一个对语言的基本了解,随处可见的代码例子则是用来说明所有的这些概念是如何在语言中体现出来的
清单10. 使用比较运算符
document.write(10 == 1);
逻辑运算符
逻辑运算符通常是用来组合条件语句中的比较运算符。表5列出并描述了JavaScript语言中的所有可用的逻辑运算符。
表5. 逻辑运算符
运算符描述
&&与
||或
! 非
现在在变量和运算符方面你已经有些经验了,是时候了解如何创建一种比简单的变量有着更多存储内容的机制了。
数组
数组类似于变量,但不同之处在于它们可以把多个值和表达式放在一个名称之下。把多个值存放在一个变量中,这种做法造就了数组的强大。你可存放在 JavaScript数组中的数据的类型和数量都没有限制,在脚本中声明数组之后,你就可以随时访问数组中的任何项的任何数据。虽然数组可以保存 JavaScript语言的任何数据类型,包括其他数组,但最常见的做法是,把相类似的数据存储在同一个数组中,并给它指定一个与数组项有关联意思的名称。清单11提供的例子使用了两个独立的数组来各自存放相类似的数据。
清单11. 把相类似的值存放在数组中
复制代码 代码如下:
var colors = new Array("orange", "blue", "red", "brown");
var shapes = new Array("circle", "square", "triangle", "pentagon");
正如你见到的那样,是可以把所有的这些数据项都保存在一个数组中,但这是不符合逻辑的,且有可能会在以后给脚本带来问题,比如说在识别数组中存放的是什么数据时。
访问数组中的值很容易,但这里有一个陷阱存在。数组的ID总是从0而不是从1开始的,在第一次使用的时候你可能会有些困惑。ID从0开始递增,例如0、1、2、3等。要访问数组项的话你就必须要使用它的ID,其指向子项在数组中的位置(清单12)。
清单12. 把相类似的值保存在一个数组中
复制代码 代码如下:
var colors = new Array("orange", "blue", "red", "brown");
document.write("Orange: "+ colors[0]);
document.write("Blue: "+ colors[1]);
document.write("Red: "+ colors[2]);
document.write("Brown: "+ colors[3]);
也可以给数组中的某个位置赋值,或是更新数组中的某项的值,就像前面访问数组中的项的做法一样(清单13)。
清单13. 给数组中的特定位置赋值
复制代码 代码如下:
var colors = new Array();
colors[0] = "orange";
colors[1] = "blue";
colors[2] = "red";
colors[3] = "brown";
document.write("Blue: "+ colors[1]);
// 把blue更新成purple
colors[1] = "purple";
document.write("Purple: "+ colors[1]);
现在你已经很好地了解了变量、运算符和数组,接下来把你所学的东西运用到实践中,开始创建一些逻辑。
条件语句
条件语句是创建脚本语言或是编程语言中各种类型的逻辑的骨架,JavaScript语言也不例外。条件语句基于你所写的条件来确定要采取的行为,JavaScript语言有四种编写条件语句的方式,表6对此做了描述。
表6. 条件语句
语句描述
if如果某个特定条件为true的话就执行脚本
if...else 如果某个特定条件为true的话就执行某个脚本,
如果条件为false的话则执行令一个脚本
if...else if...else 如果不限个数的多个条件中之一为true的话就执行某个脚本,
如果所有的条件都为false的话 就执行其他的脚本
switch 执行许多脚本中的一个
如果你只想在某个条件为true时执行某个脚本的话,就使用if语句。清单14展示了如何使用带有比较运算符的if语句来在条件为true时执行脚本。
清单14. 使用if语句
复制代码 代码如下:
var num = 10;
if(num == 5)
{
document.write("num is equal to 5");
}
如果你打算在某个条件为true时执行一个脚本,而在条件为false时执行另一个脚本话,那么使用if...else语句,如清单15所示。
清单15. 使用if...else语句
复制代码 代码如下:
var num = 10;
if(num == 5)
{
document.write("num is equal to 5");
}
else
{
document.write("num is NOT equal to 5, num is: "+ num);
}
如果要基于不同的条件来执行不同的脚本的话,则使用if...else if...else语句,如清单16所示。
清单16. 使用if...else if...else语句
复制代码 代码如下:
var num = 10;
if(num == 5)
{
document.write("num is equal to 5");
}
else if(num == 10)
{
document.write("num is equal to 10");
}
else
{
document.write("num is: "+ num);
}
Swith语句不同于if语句,它们不能用来确定变量值是否大于或是小于另一个值。清单17给出的例子说明了使用switch语句来确定要执行的脚本的适当时机。
清单17. 使用switch语句
复制代码 代码如下:
var num = 10;
switch(num)
{
case 5:
document.write("num is equal to 5");
break;
case 10:
document.write("num is equal to 10");
break;
default:
document.write("num is: "+ num);
}
你可能已经注意到清单17用到了case子句、break语句和default子句。这些子句和语句对switch语句来说都是很重要的部分。case子句确定了switch的值是否与子句中用到的数据值相等;break语句中断——或是停止——switch语句执行语句的余下部分;而default子句则标明了在没有case语句执行的情况下或是已执行的case语句没有break语句的情况下,缺省要运行的脚本。例如,清单18说明了在已执行的case语句中如果没有break语句的话,多个case语句和default语句是如何执行的。
清单18. 通过不包含break的方式来执行多行代码
复制代码 代码如下:
var num = 10;
switch(num)
{
case 5:
document.write("num is equal to 5");
break;
case 10:
document.write("num is equal to 10");
default:
document.write("num is: "+ num);
}
这一脚本的结果先是一句“num is equal to 10”,后面再跟着一句“num is: 10”。这种情况有时被称为switch直落。
正如本节开头提到的那样,条件语句是任何脚本语言或是编程语言中的所有逻辑的骨架,不过如果不用函数的话,你得到的代码就会像纠缠不清的一团乱麻。
函数
有许多理由可用来证明函数是很有用的。函数是那些只能由事件或是函数调用来执行的脚本的容器,因此,在浏览器最初加载和执行包含在网页中的脚本的时候,函数并没有被执行。函数的目的是包含那些要完成某个任务的脚本,这样你就随时都能够执行该脚本和运行该任务。
构建一个函数很容易,其以function这一关键字作为开始,接着是一个空格,然后是函数的名称。你可以选择任何的字串来作为函数的名称,不过让函数的名称和其要执行任务之间有某种关联意思是很重要的。清单19给出了一个函数例子,该函数修改一个现有变量的值。
清单19. 构建一个简单的函数
复制代码 代码如下:
var num = 10;
function changeVariableValue()
{
num = 11;
}
changeVariableValue();
document.write("num is: "+ num);
清单19中的例子不仅说明了如何构建一个函数,还说明了如何调用函数来修改变量的值。在这一例子中你能够修改变量的值是因为,变量是在主脚本范围里做声明的,函数也是一样,因此函数知道变量的存在。然而,如果变量是在函数的内部做声明的话,那么在函数的外部你是不能访问该变量的。
函数还能够通过函数的参数来接受数据,函数可以有一个或多个形式参数,函数调用基于函数的形式参数个数可以有一个或多个实际参数。形式参数(形参,parameter)和实际参数(实参,argument)常会被弄混;形参是函数定义的组成部分,而实参则是在调用函数时用到的表达式。清单20给出了一个函数例子,该函数带有形参,函数调用则用到了实参。
清单20. 使用函数参数
复制代码 代码如下:
var num = 10;
function increase(_num)
{
_num++;
}
increase(num);
document.write("num is: "+ num);
这一例子中的函数递增了任何传递给它的实际参数的值,该例中的实际参数是一个你已预先声明了的变量。通过把它作为一个实际参数传递给函数,你把它的值递增成了11。
return语句在函数中也是常被用到的,它们在执行完函数中的脚本后返回一个值。例如,你可以把函数返回的值赋给一个变量。清单21中的例子说明了在执行脚本之后,如何从函数中返回一个值。
清单21. 在函数中使用return语句
复制代码 代码如下:
function add(_num1, _num2)
{
return _num1+_num2;
}
var num = add(10, 10);
document.write("num is: "+ num);
这一脚本的结果是“num is: 20”。这一函数的好处是,它可以把你传递给它的任意两个数字相加并返回相加后的值,你可以把该值赋给任何变量,而不是像清单20那样总是改变同一个变量的值。
循环
正如你已经见到的那样,数组是存储大量可重用数据的一种很棒的方式。但这不过是一个开始;for和while循环提供了遍历这些数组、访问它们的值和使用它们来执行脚本的功能。
JavaScript语言中最常用到的循环类型是for循环。for循环通常是这样构成的,先是一个赋了数值的变量,然后该变量使用一个比较运算符来和另一个值做比较,最后该数字值被递增或是递减。for循环中的比较通常是确定初始变量的数值是否小于或是大于另一个数值,接着在条件为true的这段时间内,循环运行,变量递增或是递减直到条件的计算结果为false。清单22给出的例子说明了如何编写一个for循环,当数值小于数组的长度时循环运行。
清单22. 构建一个for循环并遍历一个数组
复制代码 代码如下:
var colors = new Array("orange", "blue", "red", "brown");
for(var i=0; i
{
document.write("The color is: "+ colors[i] +"
");
}
数组的length属性提供了一个与数组中的子项个数相等的数值,再一次说明,这里容易让你出错的一点是,数组的ID是从0开始的,因此,如果数组中有4个子项的话,长度就是4,但数组中的索引则是0、1、2和3——没有4。
另一种循环类型是while循环,它们的执行速度比for循环快,但适用在一些不是遍历数组的情况中,比如说当某个条件为true时执行某个脚本。清单23展示了如何编写这样的一个while循环,即当数值变量小于10时执行某个脚本。
清单23. 构建while循环
复制代码 代码如下:
var i = 0;
while(i<10)
{
document.write(i +" ");
i++;
}
可以注意到,while循环中的脚本包含了一行代码,该行代码叠加数值变量直到while循环中的条件为false为止。没有这行代码的话,你得到的就是一个无限循环。
结论
JavaScript语言可以说是最受欢迎的语言之一,现在你明白这是为什么了。这一简单而又丰富的脚本语言带来了如此之多的可能性,它提供的工具允许网站访问者和下载后的网页进行交互,这一功能非常的强大。本文为理解JavaScript语言的基本原理奠定了基础,现在对你来说,要了解JavaScript库函数的作用方式,以及如何使用它们来简化网页客户端逻辑的编写过程都应该是更容易的事了。接下来要做到事情就是把这些概念付诸实践,并开始探索JavaScript对象。
相关文章
Javascript实例教程(19) 使用HoTMetal(6)
Javascript实例教程(19) 使用HoTMetal(6)...2006-12-12javascript操作html控件实例(javascript添加html)
几乎HTML所有标记都可以说是HTML的控件,如select, input, div, table等。html标签便捷的操作,深受大家的喜欢。如何使用javascript来操作HTML控件,下面我介绍下比较麻烦的几个控件2013-12-12基于JavaScript 数据类型之Boolean类型分析介绍
本篇文章小编为大家介绍,基于JavaScript 数据类型之Boolean类型分析介绍。需要的朋友参考下2013-04-04jQuery中文入门指南,翻译加实例,jQuery的起点教程
jQuery中文入门指南,翻译加实例,jQuery的起点教程...2007-02-02深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
这篇文章主要介绍了深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解,本文讲解了一般理论、按值传递、按引用传递、按共享传递(Call by sharing)、按共享传递是按值传递的特例等内容,需要的朋友可以参考下2015-03-03ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
这篇文章主要介绍了ECMAScript6的新特性箭头函数(Arrow Function)详细介绍,ECMAScript6其实就是JavaScript,它的新特性就是JS的新特性,引入只是时间问题,需要的朋友可以参考下2014-06-06
最新评论