本篇内容需要读者对HTML有基本的了解。
JavaScript(今后简称JS)是运行在用户浏览器上的一种脚本语言,它可以动态改变网页的内容,以及让网页与用户有交互。JS与Java可没有任何关系,要是硬扯关系的话,它俩就像雷锋和雷峰塔一样。
JS可以嵌在HTML文档中,也可以单独写成一个文件然后嵌入HTML,推荐使用后者。
打开你喜欢的纯文本编辑器,新建一个文件,保存为【文件名.js】,然后在head标签里加上这么一条:
<script src="你的JS文件路径"></script>
好了我们现在正式开始学习JS。当然,学习内容不会太难的,JS的语法自由度非常大,但是我们现在只打算学习其中的一部分。
输出
首先作为一个语言,JS可以对外输出一些东西。在你的JS文件中写上这么一句:
document.write("Hello world!");
然后刷新一下网页,会发现网页中多了一句“Hello world!”,这就是JS干的。这句话中document指的是HTML文档本身,它可以用一个叫write的方法往自身写东西,这里写的是“Hello world!”这句话。哦对了,建议在JS的每一个句子后面都加一个分号,虽说不加也可以,但是为了不在某些极端情况下产生歧义,还是加上吧。
如果把这句话改为alert("Hello world!"),那么文档中不会出现那句话,反而会弹出一个窗口,内容是这句话。因为alert方法是用来弹出窗口的。
JS区分大小写,也就是说,上面那句话改为Alert("Hello world!")就错了。
变量
变量是任何编程语言的核心,它们就像一个个容器,可以存各种各样的东西(专业的称呼为数据)。定义一个变量的语法是【var 变量名】。下面的句子定义了四个变量,名称分别是a、b、c和d:
var a, b, c, d;
如何往变量中存东西呢?很简单,用【变量名=变量值】就好了:
a = 0; b = 3.1415926; c = "Hello"; // d is an array d = [1, 0.6, "an array"];
变量类型
值得一提的是,变量中存储的东西是有类型区别的。变量a中存的是整数,b中存的是浮点数(其实就是小数),c中存的是字符串,也就是一段话(字符串一定要用一对英文双引号或单引号引起来啊!),d中存了一个数组,就是一个序列,序列有三项,第一项为整数,第二项为浮点数,第三项为字符串,当然还可以有更多的项。关于数组我们后面还要讲到。JS的数据类型主要有:
数字类型小数点可选,例如1,2.5,1.4e12(表示1.4×10^12)等。 字符串类型用一对单引号或双引号引起来的字符序列。 布尔类型可选值为true或false。 null、undefined表示空值,例如刚声明的变量值为undefined。 数组类型一个有序集合,引用a数组的第一个元素的方法是a[0](因为数组默认从0开始)。 对象可以理解为一个个“属性:值”的集合。其实所有变量都是对象,包括数字类型和字符串类型等基本类型。对象的定义和引用方法如下: 定义方法为【var a = { attr1: val1, attr2: var2, ... };】; 引用方法为【a.attr1】或【a["attr1"]】。
运算符
关于运算符,JS可以使用+、-、*、/(除法)、%(取余)等计算用的运算符,还有>、<、>=(大于等于)、<=(小于等于)、!=(不等于)、==(等于,注意一定不能写成一个等号!)等比较用的运算符。
函数
函数允许你把一段内容写成一个小模块。函数的定义以function开头,后面是函数名和参数列表,例如:
function myfunc(argument1, argument2, ...) { 要执行的代码段; }
啊对了,写在花括号{}中的是代码块,花括号的作用仅仅是将这些代码组合到一块。
注意这只是定义,函数本身并没有被执行。如果想执行的话,可以这么写:
myfunc(parameter1, parameter2, ...);
这会运行你写在函数中的代码段,其中argumentx被parameterx的值所替代。
在函数里可以用return来提前终止函数的执行,或者返回一个值,这样函数的值就可以被赋给某个变量:
a = myfunc(parameter1, parameter2, ...); document.write(a);
关于函数,以后还有更多要说的。
条件语句
可以用if-else语句来进行条件执行,例如一个猜数字的代码:
var guess = 20; if (guess > 60) { document.write("too large!"); } else if (guess < 60) { document.write("too small!"); } else { document.write("you got it!"); }
大概能猜出if语句的语法了吧?
还有个类似的语句叫switch,写起来大概是这样的:
var n = 60; switch (n) { case 0: document.write("none"); break; case 50: document.write("half"); break; case 100: document.write("full"); break; default: document.write("what?"); break; }
语法应该也很好猜吧?不过执行原理有点麻烦:先计算switch后面那个括号的值,然后从上到下看符合哪个case标签,如果某一项符合的话就从那儿开始执行。注意case只是标签,代码还会继续执行下面的标签里的内容。如果不希望这么做(正常人都不会希望的),请用break来阻止。
循环语句
用while语句来执行最普通的循环:
var i = 1, s = 0; while (i <= 100) { s += i; // 相当于s=s+i i++; // 相当于i=i+1 }
意思太好理解了!一开始让i=1,s=0,然后当i<=100的时候不断执行这两句话:【把i加到s上,i再加上1】,直到i的值大于100的时候,循环不再执行。当然,最终的s一定是5050吧。
用for语句来创建一个指定次数的循环:
var i, s = 0; for (i = 1; i <= 100; i++) { s += i; }
仔细对比一下这个与上面的while循环,你会发现它俩之间的联系的。
break可以跳出当前这个循环,continue则可以跳过当前这趟循环开始下一趟。
作业:写一个函数用来判断一个数是否既是奇数,又是个位为3的数,然后写一个for语句,输出1~1000中所有满足刚才那两个条件的数(用回车隔开)。
提示:函数名可以是【judge】,调用方法可以是【judge(i)】,判断i的个位是否为3可以用【i%10==3】这个表达式来判断,返回值应为【true或false】,输出一个数字和回车要用【document.write(i+"<br />")】(因为HTML中回车会被忽略,所以必须用<br />代替)。
下一篇中我们会讲到如何用JS自由地操纵HTML中的元素。