<script type="text/javascript"> var steps = [[ {actor:"blackboard", type:"say", value: "1. 了解阶乘(factorial)"} ],[ {actor:"", type:"clear", value: "blackboard"}, {actor:"teacher", type:"say", value: "请看上面："}, {actor:"", type:"wait", value: 0.2}, {actor:"blackboard", type:"say", value: "1"}, {actor:"", type:"wait", value: 0.5}, {actor:"teacher", type:"say", value: "这是什么？"} ],[ {actor:"student", type: "say", value: "这是整数 1。"} ],[ {actor:"teacher", type: "say", value: "在 Ruby 中，这样写就能得到整数 1。"}, {actor:"", type:"wait", value: 0.2}, {actor:"teacher", type:"say", value: "如果我想得到 2 呢？"} ],[ {actor:"", type:"clear", value: "blackboard"}, {actor:"student", type: "say", value: "像上面这样："}, {actor:"", type:"wait", value: 0.2}, {actor:"blackboard", type:"show", value: "2"} ],[ {actor:"teacher", type: "say", value: "没错。有没有其他方式呢？"} ],[ {actor:"", type:"clear", value: "blackboard"}, {actor:"student", type: "say", value: "嗯……，上面这样也可以吧："}, {actor:"", type:"wait", value: 0.2}, {actor:"blackboard", type:"show", value: "2 * 1"} ],[ {actor:"teacher", type: "say", value: "对了。"}, {actor:"", type:"wait", value: 0.2}, {actor:"teacher", type:"say", value: "如果我想得到 6 呢？"} ],[ {actor:"", type:"clear", value: "blackboard"}, {actor:"student", type: "say", value: "像上面这样："}, {actor:"", type:"wait", value: 0.2}, {actor:"blackboard", type:"show", value: "3 * 2 * 1"} ],[ {actor:"teacher", type:"say", value: "24 呢？"} ],[ {actor:"", type:"clear", value: "blackboard"}, {actor:"student", type: "say", value: "像上面这样："}, {actor:"", type:"wait", value: 0.2}, {actor:"blackboard", type:"show", value: "4 * 3 * 2 * 1"} ],[ {actor:"teacher", type:"say", value: "类似这样的乘法表达式，你以前见过吗？"} ],[ {actor:"student", type:"say", value: "见过，这叫阶乘(factorial)。"} ],[ {actor:"", type:"clear", value: "blackboard"}, {actor:"teacher", type:"say", value: "没错。我们看看这个 Ruby 函数："}, {actor:"", type:"wait", value: 0.5}, {actor:"blackboard", type:"show", value: "def factorial(n)/n" + " if n == 1/n" + " n/n" + " else/n" + " n * factorial(n-1)/n" + " end/n" + "end"} ],[ {actor:"student", type:"say", value: "它的名字叫 factorial，它就是做阶乘的吧？"}, {actor:"", type:"wait", value: 0.5}, {actor:"student", type:"say", value: "不过看起来好像太简单了。"} ],[ {actor:"teacher", type:"say", value: "那你说说阶乘最简单的定义是什么？"} ],[ {actor:"student", type:"say", value: "最简单的定义是：n! = n * (n-1)!"} ],[ {actor:"teacher", type:"say", value: "那你再看看上面这个函数，"} ],[ {actor:"student", type:"say", value: "看到了，第五行，n * factorial(n-1)"}, {actor:"", type:"wait", value: 0.2}, {actor:"student", type:"say", value: "和刚才的定义很像。"} ],[ {actor:"teacher", type:"say", value: "没错。但是如果当 n 减到 1 了呢？"} ],[ {actor:"student", type:"say", value: "当然不能再往下乘了，否则结果就变成 0 了。"}, {actor:"", type:"wait", value: 0.2}, {actor:"student", type:"say", value: "所以当 n 为 1 的时候应该直接得到 1。"} ],[ {actor:"teacher", type:"say", value: "那你再看看上面这个函数，"} ],[ {actor:"student", type:"say", value: "看到了，第二行好像就是做这个判断的。"}, {actor:"", type:"wait", value: 0.2}, {actor:"student", type:"say", value: "如果满足这个条件，第三行就是返回 1 吧。"} ],[ {actor:"teacher", type:"say", value: "就是这样。现在你能不能描述一下这个函数的过程？"} ],[ {actor:"student", type:"say", value: "简单。如果参数为 1，则结果也为 1，"}, {actor:"", type:"wait", value: 0.5}, {actor:"student", type:"say", value: "否则结果为 n * factorial(n-1)。"} ]]; var currentStep = 0; var currentSubstep = 0; var currentStatus = "ready"; function toNormalString(str) { str = str.replace(/ /g, " "); str = str.replace(/</g, "<"); str = str.replace(/>/g, ">"); str = str.replace(/"/g, "/""); str = str.replace(/
/g, "/n"); return str; } function toHTML(str) { str = str.replace(/ /g, " "); str = str.replace(//g, ">"); str = str.replace(//"/g, """); str = str.replace(//n/g, "
"); return str; } function say() { var step = steps[currentStep]; var substep = step[currentSubstep]; var msg = substep.value; var element = document.getElementById(substep.actor); var content = toNormalString(element.innerHTML); if (content == " ") { content = ""; } if (content.length < msg.length) { element.innerHTML = msg.substring(0, content.length + 1); setTimeout(say, 100); } else { addSubstep(true); } } function wait() { var step = steps[currentStep]; var substep = step[currentSubstep]; addSubstep(false); setTimeout(nextStep, substep.value * 1000); } function doClear() { var step = steps[currentStep]; var substep = step[currentSubstep]; document.getElementById(substep.value).innerHTML = " "; addSubstep(true); } function show() { var step = steps[currentStep]; var substep = step[currentSubstep]; document.getElementById(substep.actor).innerHTML = toHTML(substep.value); addSubstep(true); } function addSubstep(autoNext) { currentSubstep += 1; if (autoNext) { setTimeout(nextStep, 100); } } function nextStep() { if (currentStep == steps.length) { return; } if (currentStatus == "ready") { currentStatus = "running"; document.getElementById("downArray").style.display = "none"; } var step = steps[currentStep]; var substep = step[currentSubstep]; if (currentSubstep == step.length) { currentSubstep = 0; currentStep += 1; currentStatus = "ready"; document.getElementById("downArray").style.display = ""; return; } if (substep.type == "say") { document.getElementById(substep.actor).innerHTML = " "; say(); } else if (substep.type == "clear") { doClear(); } else if (substep.type == "show") { show(); } else if (substep.type == "wait") { wait(); } } function attachEvent(elem, eventName, callback) { if (elem.addEventListener) { elem.addEventListener(eventName, callback, false); } else if (elem.attachEvent) { elem.attachEvent('on' + eventName, callback); } else { var currentEventHandler = elem['on' + eventName]; if (currentEventHandler == null) { elem['on' + eventName] = callback; } else { elem['on' + eventName] = function(e) { currentEventHandler(e); callback(e); } } } } function gotoNextStep() { if (currentStatus == "ready") { nextStep(); } } </script>
单击▼，一步一步学习 Ruby
▼
<script type="javascript"> attachEvent(document.getElementById("downArray"), "click", gotoNextStep); </script>
