javascript

&

tmlib.js 基礎


phi　

自己紹介


JavaScript の基礎

基礎のおさらい

  • 変数
  • 条件分岐
  • 繰り返し
  • 関数
  • 配列
  • オブジェクト

変数


値や文字列などを格納するもの
JavaScript では var を使って宣言します.

// 変数
var a = 100;
document.write(a);
document.write("<br />");

条件分岐

条件に応じて処理を分岐させることができます.
if (条件) { 処理A } else { 処理B }
という形で書きます.

// 条件分岐
var num = 6;
if (num%2 == 0) {
    document.write(num + " は偶数です.");
}
else {
    document.write(num + " は奇数です.");
}
document.write("<br />");

繰り返し

大量の要素に同じ処理を適応したい
場合などに便利です.
for (初期化式; 条件式; 増減式) { 処理 }
という形で記述します.

// 繰り返し
for (var i=0; i<10; ++i) {
    document.write(i);
}
document.write("<br />");

関数

複数の処理をまとめておき,
使いまわすことができます.
function (引数...) { 処理 };
という形で定義します.
// 関数
var println = function(str) {
    document.write(str);
    document.write("<br />");
};
println("Hello, world!");
println("こんにちは, 世界");

配列

配列とは複数のデータを扱うための
データ構造で, 数字をキーとして
要素の設定, 取得ができます.
// 配列
var arr = [1, 1, 2, 3, 5, 8, 13];
document.write(arr.join(", "));
document.write("<br />");
arr[7] = 21;
document.write(arr.join(", "));
document.write("<br />");

オブジェクト

配列同様複数のデータを扱うための
データ構造です.
.キーもしくは["キー"]という形でアクセスします.

// オブジェクト
var obj = {
    name: "phi",
    bloodType: "O",
    age: 24
};
document.write(obj.name);
document.write("<br />");
document.write(obj["name"]);
document.write("<br />");

tmlib.js の使い方基礎


  • main 処理を登録しよう
  • クラスを定義しよう

main処理を登録しよう

ページが読み込まれたタイミングで実行される
関数を登録することができます.
jQuery でいう ready のような機能.

// main 処理
tm.main(function() {
    alert("tmlib.js ちゃんと使えてるよ～ん♪");
});

クラスを定義しよう

tm.createClass でクラスを
定義することができます.
引数に渡した init が生成時に自動で呼ばれる
コンストラクタの役割を行います.
// クラスを定義しよう
var Hoge = tm.createClass({
    init: function(num) {
        this.num = num;
    },
    toString: function() {
        return "私の数値は{num}です!!".format(this);
    }
});
var hoge = Hoge(128);
document.write(hoge.toString());
document.write("<br />");





ありがとうございました

Made with Slides.com