|
三图边框的制作（三）--JS代码
在“三图边框”里，外框的背景图会缓慢移动，这是源代码里有一段“JS”代码在起作用。在习之的博客：“做信纸，学代码（一～四）”中已经介绍了源代码里的HTML标签、CSS样式声明。本文介绍的JS（JavaScript）代码也是制作网页的源代码之一。这三者分别解决网页的“内容、展现和行为”。“行为”可以简单地理解为“动作和交互”，因此JS代码的作用之一就是使页面上的内容动起来，如习之介绍过的“跑马灯”、“幻灯”、“秋页飘飘”等等。利用JS的“交互行为”的例子如“播放器DIY”,只要按要求输入音乐地址和勾选一些选项就能得到一款自己的播放器。这就是读者与网页的交互行为。
JS源代码，通常称为“脚本语言”。电影脚本是指导演员如何动作的列表，JS脚本就是发给浏览器一道道命令的集合。它无须编译，浏览器会直接执行所遇到的每一行JS脚本。
JS源代码又与HTML、CSS不同，它更接近“程序语言”。它有：变量、数组、函数、条件语句、循环语句、定时器、事件处理等概念；学过计算机程序语言（如BASIC）的朋友会更容易理解和掌握它。JS与Flash里的脚本语言AS（Action Script）同源，因此也有很多共通之处。
本文不是介绍如何编写JS脚本，只是提供一些有关的知识。方便我们在学习别人的代码时，或拷贝一段现成的源代码时，不至于出错。
我们遇到的JS代码通常是在HTML文档里，代码实体包含在script标签内。例：
〈script type="text/javascript" language="javascript"〉
JS代码实体
〈/script〉
注意：script标签是必须要有结束标签的，拷贝代码时别掉了〈/script〉
在比较老的版本里，在代码实体前后还会用HTML的注释符号如下：
〈！--
JS代码实体
--〉
这是为了防止老版本的浏览器不认识JS，避免直接将代码显示在页面上而做的预防措施。拷贝这类代码时一定不能漏了注释的结束符号：--〉。
这对script标签理论上可以放在整篇源代码的任意位置，但必须放在被控制对象的后面，因此常见JS代码都集中放在整篇源代码的最后。这时要注意了，如果采用抹蓝的方式拷贝网页内容实体时，往往不能将这段JS代码一起拷贝过来。而采用拷贝源代码时，往往在源代码的最后会发现有数对script标签，不知道哪对是需要的。这就需要有点JS知识才能辨别，或者干脆全拷贝了，再逐对排除。
下面通过“三图边框”里的JS代码实例（采用的是本文边框里的JS，背景图是向左上方移动）介绍它是怎样工作的。
代码：
function bgmove2int(){ //初始化函数
if(!document.getElementById("bgmove2")) return; //检查有没有bgmove2的对象，如果无，结束
var moveObj = document.getElementById("bgmove2"); //如果有，确定这个对象为移动对象
var mx1=0; //定义一个变量 mx1，作为X方向的计数器，赋初值0
var my1=0; //定义一个变量 my1，作为Y方向的计数器，赋初值0
bgmove(); //执行移动函数bgmove
function bgmove(){ //移动函数开始
mx1=mx1-1; //X方向的计数器减1px
my1=my1-1; //Y方向的计数器减1px
moveObj.style.backgroundPositionX = mx1; //将X方向计数器的值送达移动对象，左移1px
moveObj.style.backgroundPositionY = my1; //将Y方向计数器的值送达移动对象，上移1px
setTimeout(bgmove,80); //80毫秒后重复执行bgmove，即隔80毫秒移1px
} //函数bgmove结束
} //函数bgmove2int结束
bgmove2int(); //页面加载结束后自动执行bgmove2int函数
上面的代码脚本内容逐行加了注释。在JS里的行内注释是用两条斜杠。在上篇博客提供的三图边框的代码里，最后一行JS代码前有两条斜杠 （//bgmove1int();），将这行语句当作了注释，从而使背景图不移动。如果想要让背景图动起来就必须删除这两条斜杠，将注释还原成语句。
这一篇有注释的代码，有兴趣的朋友可以读一读。因为里面太多术语，因此不一定弄懂它，只要关心与“三图边框”有关的几个要素：
1》移动目标（哪个背景图要移动？）
2》移动速度
3》移动方向
一。移动目标
在“初始化函数”的第一行里，有一个判别(if)：在HTML的源代码里有没有一个称为bgmove2的目标对象？如果没有程序中止；如果有继续执行下面的移动程序。
这就需要在HTML文档里，有个相应的对象，它是以id属性定义的：
id = "bgmove2" bgmove2 相当于是移动对象的名称。
在三图边框的源代码第一层的table里就有这样一个id属性，那么第一层边框的背景图就成了移动对象。如果将这个属性挪到第二层table里，那么就是第二层的背景图作为移动对象。
要注意两点：
1》id的唯一性。id = "bgmove2" 这样的设置在整篇HTML代码里只能有一个。如果有两个，那么JS不知道要移动两个中的哪一个，只能罢工不干了。习之发表的边框一集有12个，第一个称为bgmove1、第二个称为bgmove2等等，以保持名称的唯一性，当然在每个边框附加的JS代码里也要做相应的改动（有两处），以求上下对应。
2》JS对字符的大小写敏感。在HTML里，大小写通用，table与TABLE、Table是等价的，因此id与ID也等价。但是在JS里大小写是敏感的，bgmove2≠Bgmove2。这是初学者最容易犯错的地方。
知道了这个规律，就很容易在其他的背景边框上作出背景移动的效果来。只要在需要移动的有背景图的table里加上id属性设置，再在代码的最后添上一段JS代码，前后的对象名称（id）需要一致。
二。移动速度 速度=步长/周期时间
这段JS里，步长就是变量mx1和my1的增量，现在是 1px。
周期时间在定时器里设置： setTimeout(bgmove,80) 。它的含义是：暂停80毫秒后执行bgmove函数，因为这个定时器就在bgmove函数体内，因此造成了循环执行bgmove函数，使背景图不断的移动，周期时间为80ms。
要改变速度，可以改变步长和周期时间。通常步长取最小值1px，只改变周期时间，因为步长太大会有跳跃感。
三。移动方向 JS代码里有下面一组语句：
mx1=mx1-1;
my1=my1-1;
这是赋值语句，含义是：将变量mx1原有的值减1后回送给mx1。
在网页上的坐标方向是：X指向右、Y指向下。
上面两个语句每一步使X、Y方向均减1px，那么移动方向就指向左上方。
如果 mx1 = mx1 ; //mx1的值不变;
my1 = my+1 ;
效果是向下移动。如此，可以有八个移动方向的组合。
三图边框里的移动代码JS虽然简单，没有几行，但是它应用JS的语句类型和语法现象已经不少了：变量定义、赋值语句、if语句、函数及调用、定时器、控制CSS等等。 开始学习JS会觉得很难，不像HTML那么直观。因此对于我们老年朋友，先只要知道个大概，能将现成的拷贝过来用就可以了。继而能替换一些数据，如目标、速度、方向、图片地址等等。
无论是HTML还是JS，习之的体会是“写代码容易，排错难”。有时候只为一个错误的标点，可能耽误一整天。因此学习源代码，从开始就要注意“书写规范”。
|
