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表示,第三个参数则是选择‘否’时候的索引。
答案部分同样也是这种方法构建:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function createAnswer(id, name, desc){ var answer = new Object; answer.ID = id; answer.Name = name; answer.Description = desc; return answer; } var aAnswers = new Array();
其余部分就是和界面之间的交互了。有兴趣的自己打开该链接自己看源码吧。连接在此:rpwt.sinapp.com. 不在这里堆砌代码了。 需要提一下的是,在选择索引答案的时候,用了一个小技巧。
var qid = "ABCDEFGH".indexOf(id); 这里利用ABCD等相对的位置,刚好对应的是答案的数组下表。所以不用在去循环一遍数组来找答案了。
应用的表现如下