JavaScript学习笔记

由于平时一直在使用GWT，写的是Java，最终编写的java都变成了JavaScript，所以干脆学习了一下javaScript。 这是第一个javascript习作。放在新浪的平台上面了。名字是性格测试。效果请自己点开看看吧。

这个小程序内部其实非常简单，就是构造了一个工厂方法来创建一个所以表单。根据不同的答案走向不同的分之。最终给出来一个结果。 其实本来是看到了一篇测试性格的文章。具体请百度吧，关键字是‘性格测试，动物’。 

该应用界面布局非常简单，最顶层是一个textaere，来存放测试者已经做过的题目以及答案。中间是题目的内容，内容后面跟着的是两个按钮，供测试者来选择之用。

代码如下：

    <tr><td colspan="3"><textarea type="textaere" rows="20" cols="100" id="oldanswer" value="" style="width:500px;" readonly></textarea></td></tr>
    <tr><td colspan="3" height="6px"></td></tr>
    <tr><td><input type="text" id="inputDesc" value="你喜欢独自旅行" style="width:380px;" readonly></input></td>
    <td><input type="button" id="yesRadio" onClick="yesIdOnClick()" value="是" style="width:60px;text-align:center;"></input></td>
    <td><input type="button" id="noRadio" onClick="noIdOnClick()"  value="否" style="width:60px;text-align:center;"></input><br/></td></tr>

界面效果如下图：

 

说完了UI，来说说程序的核心部分，算法吧。就是Javascript部分。

Javascript采用了个函数来创建题目部分，这部分主要是填充题目之间的关联。

var iCurrentQuestionId = 1;
    var bIsEnd = false;
    
    function createQuestion(id, yid, nid, desc) {
        var question = new Object;
        question.ID = id;
        question.yesID = yid;
        question.noID = nid;
        question.Description = desc;
        
        return question;
    }

    var aQuestions = new Array();
    var i = 0;
    aQuestions[i++] = createQuestion(1, 2, 3, "你喜欢独自旅行");
    aQuestions[i++] = createQuestion(2, 4, 5, "你每星期都会去逛街");
    。。。。。。。。
    aQuestions[i++] = createQuestion(17, "B", 18, "你喜欢和不同类型的异性交往");
    aQuestions[i++] = createQuestion(18, 19, "C", "你常在半夜想些伤心的事情");
    aQuestions[i++] = createQuestion(19, "D", 20, "你认为自己双重人格严重");
    aQuestions[i++] = createQuestion(20, "E", 21, "你敢于主动向喜欢的人表白");
    aQuestions[i++] = createQuestion(21, "F", "G", "你会定期去健身院");

这里代码构建出了题目走向，第一个参数是当前索引，第二个参数是玩家选择‘是’的时候下一个题目的索引，当然了，如果是最终结果，则有ABCDEFG表示，第三个参数则是选择‘否’时候的索引。

答案部分同样也是这种方法构建：

View Code

其余部分就是和界面之间的交互了。有兴趣的自己打开该链接自己看源码吧。连接在此：rpwt.sinapp.com. 不在这里堆砌代码了。 需要提一下的是，在选择索引答案的时候，用了一个小技巧。

var qid = "ABCDEFGH".indexOf(id); 这里利用ABCD等相对的位置，刚好对应的是答案的数组下表。所以不用在去循环一遍数组来找答案了。

广告时间，本人的个人小站地址： http://www.871b.com