スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
【--/--/-- --:--】 | スポンサー広告 | page top↑
第1回:【Javascriptを使ってみよう。】(きっと続かない)
皆様お久しぶりでございます。
6月に引っ越しを行ってから早3ヶ月が経とうとしています。
引っ越し後は恙無く過ごして・・・・・いませんorz
引っ越した途端に忙しくなってしまい、7時出社~23時過ぎ退社なんて生活に・・・
おかげでROもまともにログインできません。

なんの脈絡もないですが。

第1回:【Javascriptを使ってみよう。】

Javascriptってご存知ですか?
私もしばらく前まではHTMLの拡張くらいに考えていたんですが、実はかなり凄いです。
これを使えば、ページを動的に作成・書き換えなんでもできます。

とりあえずページを作りましょう。

☆----------☆----------☆----------☆----------☆----------☆

以下をhtmlという拡張子で保存してください。
(保存する際にエンコードで「utf-8」を選択してください)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"content="ラグナロク">
<title>テストページ</title>
<script type="text/javascript" src="neta.js"></script>
</head>
<body id="test_body">

<script type="text/javascript">
var table = CreatePage.tableCreate([["aaa","bbb"],["ccc","ddd"]]);
Tools.getElement("test_body").appendChild(table);
</script>

</body>
</html>

☆----------☆----------☆----------☆----------☆----------☆

以下を「neta.js」というファイル名で保存してください。
(保存する際にエンコードで「utf-8」を選択してください)

CreatePage={
/**
* 配列データからテーブルを作成
*/
tableCreate:function(rows){
// テーブルを作成
var table = document.createElement("table");
// テーブルのBodyを作成
var tbody = document.createElement("tbody");
// Bodyをテーブルに入れ子する
table.appendChild(tbody);
// 行でLoop
for (var rowIdx = 0; rowIdx < rows.length; rowIdx++) {
var cols = rows[rowIdx];
// 行を作成
var tr = document.createElement("tr");
// Bodyに入れ子する
tbody.appendChild(tr);
// 列でLoop
for (var colIdx = 0; colIdx < cols.length; colIdx++) {
// 列を作成
var td = document.createElement("td");
// 行に入れ子する
tr.appendChild(td);
// 行に入れ込むオブジェクトの形式で分岐
if (typeof cols[colIdx] == "object") {
// 行に入れ子する
td.appendChild(cols[colIdx]);
} else {
// 文字オブジェクトを作成
var tdStr = document.createTextNode(cols[colIdx]);
// 行に入れ子する
td.appendChild(tdStr);
}
}
}
// 出来上がったテーブルを返す
return table;
}
};

Tools={
/**
* IDからエレメントを取得
*/
getElement:function(id){
return document.getElementById(id);
}
};

☆----------☆----------☆----------☆----------☆----------☆

ファイルはできましたか?
では、同じフォルダに置いてください。
これで準備はOKです。
さっそくHTMLファイルをブラウザで見てみましょう。

あら不思議。
HTMLファイルのBodyにはタグを何も書いてないのにテーブルが表示されます。
まぁ、ここまで読んだ方は分かると思いますが、このテーブルはJavascriptで作成して表示しています。
jsファイル内のtableCreate関数に、テーブルを構成する配列を渡すとその通りに作ってくれます。
ちなみに、以下のように書き換えると、テーブルにテーブルを入れ子にすることもできるようにプログラムしてあります。

☆----------☆----------☆----------☆----------☆----------☆

var table = CreatePage.tableCreate([["aaa","bbb"],["ccc","ddd"]]);

↓   ↓   ↓   ↓   ↓

var tableTemp = CreatePage.tableCreate([[123,456]]);
var table = CreatePage.tableCreate([[tableTemp,"bbb"],["ccc","ddd"]]);

☆----------☆----------☆----------☆----------☆----------☆

Javascriptって凄いですねぇ。
私もつい最近まで、ここまでできるとは知りませんでした。
次はこの作成したテーブルの体裁を整えられるようにしてみたいと思います。
(時間とやる気があればですが・・・)
あと、そのうちExtJSの解説もやりたいなぁと考えてます。
ExtJS凄いです。
画面がちょー綺麗に作れます。
色々くせがありますが、慣れると凄くアクティブなページが作れます。

いつも気まぐれ、ゲームはどこに行った!?

今回はかりんぽの本職(プログラマー)を垣間見る内容でした(*゚∀゚)

テーマ:雑記 - ジャンル:日記

【2008/09/21 23:14】 | 雑記 | トラックバック(0) | コメント(2) | page top↑
<<第1回:【Ext JSを使ってみよう。】(きっと続かない) | ホーム | たぶん最後の更新>>
コメント
良いブログだね
応援ポチッ!
【2008/09/23 00:16】 URL | saeko #-[ 編集] | page top↑
ありがとうございます。
これからもたまに仕事で覚えたことを載せようかなと思ってます。
ゲームプレイ日記のはずなんですがねw
【2008/09/25 23:32】 URL | 焔星緋帝 #JalddpaA[ 編集] | page top↑
コメントの投稿












管理者にだけ表示を許可する

トラックバック
トラックバックURL
http://knightflags.blog34.fc2.com/tb.php/32-c3dabce2
この記事にトラックバックする(FC2ブログユーザー)
| ホーム |
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。