R·ex / Zeng


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。 MUGer, hacker, developer, amateur UI designer, punster, Japanese learner.

【JS教程第一篇】语法当先

注意:本文发布于 2084 天前,文章中的一些内容可能已经过时。

本篇内容需要读者对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。
nullundefined表示空值,例如刚声明的变量值为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中的元素。

版权声明:除文章开头有特殊声明的情况外,所有文章均可在遵从 CC BY 4.0 协议的情况下转载。
上一篇: 【CSS教程第三篇】绚丽的特效
下一篇: 【JS教程第二篇】树型的文档

这是我们共同度过的

第 1559 天