最近屌丝被迫学习typescript（不学就会被开除，5555），所以得先学javascript，这下可好，所有网页相关的东西都得要有所了解，否则没法忽悠boss。
今天学了一小会javascript，这里先做了一个简单的点灯游戏，算是练手吧。其中用到了jquery，否则事件绑定就会蛋疼了。
做为javascript的hello world，这个玩意就是下面这个东东。这里简单说一下实现方法。
效果图：
首先定义一个样式表，别忘了自定义的元素前都要加圆点，否则无效（菜鸟被这个玩意害了好多次啊）：
app.css
复制代码 代码如下:
body
{
    font-family: 'segoe ui', sans-serif;
}span {
    font-style: italic
}
.darkbutton {
    width:70px;
    height:70px;
    background-color:green;
}
.lightbutton {
    width:70px;
    height:70px;
    background-color:lightblue;
}
 .return {
    font-size:small;
 }
接下来实现整体布局吧，就是body标签中的东西，这个很简单，不多说了：
复制代码 代码如下:
turn all the light bulbs if you can!
    hello
横向：
纵向：
开始游戏
您已经移动了 0 步。
然后，先实现一个很简单的验证，在点击开始按钮后，判断用户输入是否是数字，并且是否在4-9的范围内。
复制代码 代码如下:
$(document).ready(function () {
    $(startbutton).click(function () {
        if (step > 0) {
            if (confirm('乃确定要重新开始游戏么？') === false)
                return;
        }        if (isnan($(x).val()) || isnan($(y).val())) {
            alert('横纵的单元格中之能输入数字。');
            return;
        }
        else if ($(x).val() = 10 || $(y).val() >= 10) {
            alert('横纵的数量不能小于 4，且不能大于 9。');
            return;
        }
        startgame();
    });     
});
$()就是使用的jquery库。基本上，这里用到的选择器主要有：$(“#xxx”) 第一个id为xxx的元素；$(“.xxx”) 样式为xxx的所有元素。
step是我定义的变量，用户记录用户按了多少次。
在每次用户按了开始按钮后，先把原来画的按钮清掉（如果有的话）。用jquery很容易实现，用样式去匹配就可以了：
复制代码 代码如下:
$(.darkbutton).remove();
$(.lightbutton).remove();
$(.return).remove();
然后就是生成一堆按钮了。这个很常规，不需要做什么解释：
复制代码 代码如下:
var grid = document.getelementbyid('content');for (var i = 1; i     for (var j = 1; j         var button = createbutton('bt' + i + j);
        grid.appendchild(button);
    }
    var ret = document.createelement('br');
    ret.classname = return;
    grid.appendchild(ret);
}
createbutton是一个方法，用于生成和设置html的元素。我这里button的id命名采用bt+行号+列号，这样方便知道以后按的是哪个按钮。为了方便期间，我规定行号和列号必须小于10（好偷懒啊），这也样直接取倒数第一个或第二个字符就知道坐标值了。
程序最重要的逻辑：按某个按钮改变自己和相邻按钮的状态。我们只需要把坐标取出来，再改变上下左右的按钮状态就行了（注意越界情况的判断），这里写一个判断吧：
复制代码 代码如下:
$(.darkbutton).click(function () {
    changebutton(this.id);    var x = this.id.charat(2);
    var y = this.id.charat(3);
    if (x - 1 > 0) {
        changebutton('bt' + (x - 1) + y);
    }
注意this是在jquery中定义的。如果不用jquery想拿到这个this那可不容易。要提醒一点的就是下面这一段代码：
复制代码 代码如下:
var newx = 1 + parseint(x);
if (x + 1     changebutton('bt' + newx + y);
}
如果不parseint，javascript会把1当作字符串和后面的x拼起来，这样id就不对了，所以把x转成int后相加即可（上面那个相减的情况不需要这样做）。这就是无类型语言的弊端之一吧，所以才会出现typescript（屌丝最近正在学的）。
重要部分都说完了，下面贴上htm文件所有的代码。
复制代码 代码如下:
turn the light
var step = 0;
        function startgame() {
            maxx = $(x).val();
            maxy = $(y).val();
            makegrid(maxx, maxy);
            step = 0;
            document.getelementbyid(step).innerhtml = step;
        }
        function makegrid(x, y) {
            $(.darkbutton).remove();
            $(.lightbutton).remove();
            $(.return).remove();
            var grid = document.getelementbyid('content');
            for (var i = 1; i                 for (var j = 1; j                     var button = createbutton('bt' + i + j);
                    grid.appendchild(button);
                }
                var ret = document.createelement('br');
                ret.classname = return;
                grid.appendchild(ret);
            }
            $(.darkbutton).click(function () {
                changebutton(this.id);
                var x = this.id.charat(2);
                var y = this.id.charat(3);
                if (x - 1 > 0) {
                    changebutton('bt' + (x - 1) + y);
                }
                if (y - 1 > 0) {
                    changebutton('bt' + x + (y - 1));
                }
                var newx = 1 + parseint(x);
                if (x + 1                     changebutton('bt' + newx + y);
                }
                var newy = 1 + parseint(y);
                if (y + 1                     changebutton('bt' + x + newy);
                }
                step++;
                document.getelementbyid(step).innerhtml = step;
            });
        }
        function changebutton(id) {
            var button = document.getelementbyid(id);
            if (button.classname === darkbutton) {
                button.classname = lightbutton;
            }
            else {
                button.classname = darkbutton;
            }
        }
        function createbutton(id) {
            var button = document.createelement('button');
            button.id = id;
            button.classname = darkbutton;
            return button;
        }
turn all the light bulbs if you can!
    hello
横向：
纵向：
开始游戏
您已经移动了 0 步。
如果想运行代码，只需要把最开始的样式表保存成app.css，然后把这一段完整的代码保存成default.htm，然后放在同一个文件夹下，用浏览器打开htm文件就行了（ie要启用activex）。
需要注意的是，这玩意和浏览器的兼容性有很大的关系，所以不保证在所有浏览器（和任意版本）上都能正常运行。。。
对了，最后多说一点。你可以用visual studio 2012来编辑html和javascript，会有intellisense，还可以直接加断点调试，非常方便。