今日のプロジェクト演習（第３回）

本日の情報学プロジェクト１（enchant.jsを使ってなんかスマホアプリを作る）の記録です。学生以外には情報がありませんので無視してください。ちなみに学生は３年生で１年次にJavaを学習している前提で話しを進めています。なお、JavaScriptとenchant.jsはドットインストールにすばらしい動画解説があります。そちらへどうぞ。

今日は話しながらの演習だったので過程を以下に記します。流れとポイントを思い出すのに使ってください。来年、同じテーマでやるとしたら僕自身のためでもあります。

以下からenchant.jsをダウンロードしデスクトップに保存し展開します。

Link: enchant.jsのページ

ここからドットインストール流です。

展開したフォルダ（wise9-enchant.js-31c9d38）の中にgameというフォルダを作成します。そこに、wise9-enchant.js-31c9d38下にあるenchant.jsとwise9-enchant.js-31c9d38/examples/beginner/hellobearにあるindex.htmlを、gameフォルダにコピーします。

index.htmlのenchant.jsのパスをsrc="../../../dev/enchant.js"からsrc="enchant.js"に変更します。

で、下記の？？？の中に以下を入力していきます。あとは説明調というよりメモ書きです。受講者にわかる程度に省略しています。

<!doctype html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
？？？
</body>
</html>

まず、body中にhelloといれてSafariで表示してみます。

次に、以下のように書き換えます。Javascriptで同じことができますな。

     <script>
          document.write("hello");
     </script>

Javaと同じようにfor文も使えまっせ。

     <script>
          for (int i=0; i<10; i++) 
               document.write("hello");
     </script>

で、出ない。そう。intがないの。変数の型は代入時に決まるのね。varを使います。ちなみにvarはなくてもいい。。。違いは今説明しない。

     <script>
          for (var i=0; i<10; i++) 
               document.write("hello");
     </script>

じゃ、代入する前はどんな型か？。。。undefined。代入する前はどんな型かわからないからわかりませーんってことらしいのね。

          var v;
          document.write(v);

整数入れてみるよ。

          var v = 0;
          document.write(v);

文字列だって入れられる。

          var v = "hello";
          document.write(v);

じゃ、変数の型を調べたくなったら？ typeofってのがあるらしいので都度しらべてね。

         var v = "hello";
          document.write(typeof v);

javascriptの型は、number、boolean、string、null、undefinedがあるようです。Javaでいうfloatやdoubleやintはみーんなnumberになるんだね。

次は値の判定。以下の結果はどうなるか？

          var v = 123;
          document.write(v == 123);

そして以下の結果は？

          var v = 123;
          document.write(v == "123");

変だよね。。。でも便利でもある。でもしっかり型も含めて比較したい場合は以下。これで内容も型も同じかどうかをチェックしてくれる。当然以下はfalseになるね。

          var v = 123;
          document.write(v === "123");

次、配列。宣言は簡単なやつとJavaっぽいのがある。以下のような感じ。

          var v = [];  //var v = new Array();　←Javaっぽいやつ

値のセットも取得もJava的。ただ、異なる型の要素を同じ配列変数に入れることができる。しかもサイズを最初に決めていないので連続でない場所（０、１、１０）といったところに書き込むこともできる。配列のサイズはJavaと同じね。lengthで取得できる。

         var v = [];
         v[0] = 0;
         v[1] = "hello";
         v[10] = true;
          for (var i = 0; i < v.length; i++) {
               document.write(v[i]);
          }

で、最後に２次元配列をわざわざ使って？九九の表を作ってもらいました。ベタですが以下のような感じでした。

<body>
    <script>
        var v = [];
        for (var i = 0; i < 9; i++) {
            v[i] = [];
            for (var j = 0; j < 9; j++) {
                v[i][j] = (i + 1) * (j + 1);
            }
        }
        var str = "<table>";
        for (var i = 0; i < 9; i++) {
            str += "<tr>";
            for (var j = 0; j < 9; j++) {
                str += "<td>" + v[i][j] + "</td>";
            }
            str += "</tr>";
        }
        str += "</table>";
        document.write(str);
    </script>
</body>

基礎というには足りているかわかりませんが、とりあえず以上で今日の演習終了。一応、来週で基礎を終える予定です。来週は連想配列とObjectとスコープ。。。

memorandums

日々の生活で問題解決したこと、知ってよかったことなどを自分が思い出すために記録しています。

今日のプロジェクト演習（第３回）