JavaScriptでテトリスっぽいもの#1

今回はJavaScriptでテトリスっぽいものを作ってみたいと思います。

参考にさせて頂いたサイトはこちらです。

しかし、こちらでは解説が少ないので説明も付け加えつつ作成していきます。
あと、説明は2.JavaScriptとはから始めさせていただきます。

まずはJavaScriptの簡単な使い方から。

サンプルプログラムは以下です。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>Sample</title>

        <script type="text/javascript">
            alert("Hello, world!");
        </script>

    </head>
    <body>
        <p>Hello, world!</p>
    </body>
</html>

丁寧に解説していくと、HTMLのヘッド内でからがJavaScriptになっています。
中のtext/javascriptというのはMIMEタイプというものでWEBサーバ・ブラウザ間のデータ形式の取り決めです。
スクリプトの中でもJavaScriptを使いますよー、ってことを明示的にしているのですね。

で、次にalert〜の部分ですがこちらはサンプルプログラムを動かしてみたように警告画面を出るようにする命令です。

さて、次は少しJavaScriptに踏み込んだサンプルです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>Sample</title>
        <script type="text/javascript">

            function main() {
                var elm = document.getElementById("target");
                elm.innerHTML = "Hello, <strong>JavaScript!</strong>";
            }

        </script>
    </head>

    <body onload="main()">
        <p id="target">Hello, world!</p>
    </body>
</html>

function main(){}という何やら難しそうなものが出てきました。
これはmainという名前の関数を定義しますよー、という意味です。

次にfunction mainの中身を解剖していきましょう。
var elmというのはelmという名前の変数を作るという意味で、変数の中身にdocument.getElementByIdとあります。
これはdocumentオブジェクトにあるgetElementByIdというメソッドで、("")内の名前をIDとしHTML内のタグでidが使われた場合は要素を抽出して返す、という意味です。

で、このelmをオブジェクトとしinnerHTMLというメソッドを用いてHTMLを改変させるようにします。
改変内容は""の中で示されている通りに改変されます。

今回はHTMLのタグに見慣れぬものが追加されていますね？
そう、body内のonloadとp内のidです。
これはonloadでmainというJavaScriptの関数を使いますよーという宣言をしており、idではこのタグ内での要素（この場合はHello,world!）を抜き出してJavaScript内に投げています。

動作を順に追っていくと、

body内のonloadでfunction mainを読み込む
elmにdocument.getElementByIdで指定したtargetを代入する。
elmにあるHTMLをinnerHTMLで改変する。
改変された内容が表示

となります。

次に、上記プログラムに動的な処理を付け加えたものを作成します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>Sample</title>
        <script type="text/javascript">

            function main() {
                var elm = document.getElementById('target');
                elm.innerHTML = 'Hello, <strong>JavaScript!</strong>';
            }

        </script>
    </head>

    <body>
        <p id="target">Hello, world!</p>
        <input type="button" value="click" onclick="main()" />
    </body>
</html>

変更点はonloadが無くなったのとinputタグが追加されました。
では再びプログラムを追っていきましょう。

function内は変更点が無いのでスルー。
問題はbodyタグ内です。

bodyタグにonloadが無くなったためHTMLが読み込まれた時にはfunction mainが動作されなくなりました。
では、どこで読み込むのかというとinputタグ内で読み込みます。
inputを見ていくと、typeはどんな種類のinputを使うかというのが分かりますね。今回はbuttonを使用します。
valueはそのinputにどんな名前を使うかです。今回の場合はボタンにclickという名前が付いてます。

で、問題の箇所ですがonclickにmain()があります。
これはボタンが押された際にmain()が呼び出されるようになっているのです。

実際にブラウザ上で実行するとworldの部分がjavascriptになりました。

動作を追うと、

ブラウザ上にHello, worldとボタンを表示。
ボタンを押すとfunction main()が呼び出される。
以下前回のプログラムと同じ動作を行う。

今回はここまでです。
次回にこの続きから解説していきます。

JavaScriptでテトリスっぽいもの#2

生涯未熟

プログラミングをちょこちょこと。

JavaScriptでテトリスっぽいもの#1