javascript入門中 - だるろぐ

こんばんはjavascript1年生です。
何か数ヶ月前にも似たような事やってた気がするけど気のせいということにする。

server.psgi

use strict;
use warnings;
use Text::Xslate;
use Plack::Builder;
use Path::Class;
use Encode qw/encode_utf8/;
use JSON::XS ();

sub gen_objs {
    my @res;
    for (1..3) {
        push @res, {key => "foo$_"};
    }
    \@res;
}

my $tx = Text::Xslate->new(
    syntax     => 'TTerse',
    tag_start  => '[%',
    tag_end    => '%]',
    path => ["."],
    cache => 0,
    #type => "text",
);
my $json = JSON::XS->new;
my $html = "tmpl.html";
my $var = $json->encode(gen_objs);
my $stash = {
    var => $var,
};
my $body = encode_utf8($tx->render($html, $stash));
my $root = file(__FILE__)->dir->absolute->stringify;
my $app = sub {
    my $env = shift;
    return [
        '200',
        [ 'Content-Type' => 'text/html' ],
        [ $body ],
    ];
};

builder {
    enable "Plack::Middleware::Static",
        path => qr/(?:css|html?|js)$/,
        root => $root;

    $app;
};

tmpl.html

<html>
    <head>
        <script type="text/javascript" src="/js.js"></script>
    </head>
    <body>
        <form name="jsform">
            <input type="button" value="do!" onclick='mkDiv([% var | raw %])'><br />
        </form>
    </body>
</html>

js.js

function mkDiv(dat) {
    (function (json) {
        for (var i=0; i<json.length; i++) {
            var d = document.createElement('div');
            d.innerHTML = json[i].key;
            d.style.backgroundColor = "snow";
            document.body.appendChild(d);
        }
    })(dat);
}

動的に動くのがおもすれー。あとxslateいいなあ。