FirebugとAjax（Firebugを使いつつresponseTextを表示）

投稿日時: 2007 年 8 月 10 日投稿者: admin

■サンプルソース

ダメな例

var request = createHttpRequest();//XMLHttpRequestの生成
request.open("POST","●●●");
request.send("");
request.onreadystatechange = callbackFunction;

こうすればOK

var request = createHttpRequest();//XMLHttpRequestの生成
request.onreadystatechange = callbackFunction;
request.open("POST","●●●");
request.send("");

Javascriptで再帰

投稿日時: 2007 年 8 月 9 日投稿者: admin

返信

再帰といえばハノイの塔ですが、もっともシンプルな「階乗」を扱います。

■前提

『階乗』とは、『5!』のように記載し『5×4×3×2×1』を意味する
『再帰』とは『ある関数内で再びその関数自身を呼び出す事』

■サンプル

下記に半角で数値を入力し計算をクリックすると、その値の階乗を計算してくれます。（但し大きな数値を入力するとInfinityになってしまいます）

■サンプルソース（JavaScript）

function calc(){
    var num = parseInt(document.forms[0].elements["num"].value);
    var answer = perform(num);
    alert(answer);
}
function perform(NUM){
    if(NUM == 1){
        return NUM;
    }
    else{
        return (NUM * perform(NUM-1));,
    }
}

■サンプルソース（HTML）

<form>
<input type="text" size="10" name="num" />
<input type="button" value="計算" onclick="calc();" />
</form>

■解説

まず5の階乗について考えると、5の階乗は4の階乗に5を掛けたもの･･･という事は4の階乗は、3の階乗に4を掛けたもの

求める階乗の値をnとし、ｎの階乗を求める関数をfuncとすると、求める値はfunc(n)である。上記の考え方を数式に反映させると、以下のようになる。

func(n) = n × func(n-1)

ここで永遠に再帰するといつかn=0の状態になるが、階乗というものは1までを掛ければよいので条件分岐し

if(n==1){return n;}

とし、それ以外の時のみ

else{return (n * perform(n-1));}

と再帰を実行するようにする。（サンプルソースではnをNUMと記載してます）

メリット

コードがシンプルに記述できる事

デメリット

メモリーを大量に消費する事

■おまけ

この問題を例えば再帰を使わずに解くと…

まずn個要素がある配列をつくる
その配列は差が1である
それをfor文で繰り返す
for文の中で掛け算をする

短く書くと以下のようになる。

(function(n){if(n > 0){return n * arguments.callee(n - 1)}else{return 1}})(5);

JavaScriptにおける継承（オブジェクト指向入門）

投稿日時: 2007 年 8 月 5 日投稿者: admin

■サンプル

下記のリンクをクリックすると選択数値に応じた面積などがアラートされます。

三角形	面積	公式
四角形	面積	公式

■サンプルスクリプト

function figure(NAME){
	var self = this;
	this.name = NAME;
	this.alert = function(){
		alert(self.name);
	}
}
function triangle(NAME){
	this.getArea = function(){
		var num1 = parseInt(document.forms["area"].elements["num1"].value);
		var num2 = parseInt(document.forms["area"].elements["num2"].value);
		return (num1 * num2 / 2);
	}
	figure.call(this,NAME);
	/*この記述が無い場合figureメソッドとは無関係のため当然figureクラスのalertメソッドは使えない。figureクラスのメソッドを使えるようにするためにfigureにcallメソッドで自身とfigureメソッド用の引数を渡す*/
}
function square(NAME){
	this.getArea = function(){
		var num1 = parseInt(document.forms["area"].elements["num1"].value);
		var num2 = parseInt(document.forms["area"].elements["num2"].value);
		return (num1 * num2);
	}
	figure.call(this,NAME);
}
tri = new triangle("底辺×高さ÷２");
sqr = new square("縦×横");

■サンプルHTML

<form action="#" name="area">
底辺の長さ
<select name="num1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
高さ
<select name="num2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
<table>
<tr>
<th>三角形</th>
<td><a href="javascript:alert(tri.getArea());">面積</a></td>
<td><a href="javascript:tri.alert();">形</a></td>
</tr>
<tr>
<th>四角形</th>
<td><a href="javascript:alert(sqr.getArea());">面積</a></td>
<td><a href="javascript:sqr.alert();">形</a></td>
</tr>
</table>

■解説

三角形と四角形の面積の求め方は異なるので全く同じ関数を使うわけにはいかない。しかし、例では「公式」を表示するアラートは引数を変えれば同じ関数で可能である。この方法を使えば・・・

共通の値、処理はfigureに追加
別個の値、処理は個々のメソッド（triangle、square）に追加

する事によりグローバル空間の汚染を最小限にできる

■おまけ

オブジェクト指向（OOP）とは『まとめて』『隠して』『沢山作る』。

JSON初心者がJSONに触ってみる

投稿日時: 2007 年 8 月 3 日投稿者: admin

■サンプルソース

<head>
<script type="text/javascript">
var jsonObject = {
    "name" : "JustOnePlanet",
    "blog" : "WordPress",
    "language" : ["JavaScript", "PHP", "Perl"],
    "num1" : 10,
    "num2" : 5,
    "boolean1" : true,
    "boolean2" : false
}
function test1(){
    if(jsonObject.boolean1){
        alert("TEST");
    }
}
function test2(){
    if(jsonObject.boolean2){
        alert("TEST");
    }
}
</script>
</head>
<body>
<ul>
<li><a href=”javascript:alert(jsonObject.name);”>alert(jsonObject.name);</a></li>
<li><a href=”javascript:alert(jsonObject.blog);”>alert(jsonObject.blog);</a></li>
</ul>
<ul>
<li><a href=”javascript:alert(jsonObject.language[0]);”>alert(jsonObject.language[0]);</a></li>
<li><a href=”javascript:alert(jsonObject.language[1]);”>alert(jsonObject.language[1]);</a></li>
<li><a href=”javascript:alert(jsonObject.language[2]);”>alert(jsonObject.language[2]);</a></li>
</ul>
<ul>
<li><a href=”javascript:alert(jsonObject.num1);”>alert(jsonObject.num1);</a></li>
<li><a href=”javascript:alert(jsonObject.num2);”>alert(jsonObject.num2);</a></li>
<li><a href=”javascript:alert(jsonObject.num1 + jsonObject.num2);”>alert(jsonObject.num1 + jsonObject.num2);</a></li>
</ul>
<ul>
<li><a href=”javascript:test1();”>if(jsonObject.boolean1){alert(”TEST”);}</a></li>
<li><a href=”javascript:test2();”>if(jsonObject.boolean2){alert(”TEST”);}</a></li>
</ul>
</body>

■サンプルを再現

下記、リンクをクリックするとJSONにおいて指定した要素をアラートして表示します

使用するJSONオブジェクト

var jsonObject = {
    "name"     : "JustOnePlanet",
    "blog"     : "WordPress",
    "language" : ["JavaScript","PHP","Perl"],
    "num1"     : 10,
    "num2"     : 5,
    "boolean1" : true,
    "boolean2" : false
}

JSONから文字列を取り出そう

alert(jsonObject.name);//JustOnePlanetと表示されます
alert(jsonObject.blog);//wordpressと表示されます

JSON内の配列から取り出そう

alert(jsonObject.language[0]);//JavaScriptと表示されます
alert(jsonObject.language[1]);//PHPと表示されます
alert(jsonObject.language[2]);//Perlと表示されます

JSONから数値を取り出そう

alert(jsonObject.num1);//10と表示されます
alert(jsonObject.num2);//5と表示されます
alert(jsonObject.num1 + jsonObject.num2);//15（上記の合計）と表示されます

JSONからブール値を使ってみよう

if(jsonObject.boolean1){alert(“TEST”);}//条件がTRUEなのでTESTと表示されます
if(jsonObject.boolean2){alert(“TEST”);}//条件がFALSEなので何も表示されません

■基本文法と解説

使用可能な基本型と利用法

使える基本型は文字列、数値、ブール値、nullの4つ
文字列はダブルクォーテーション（”）で囲まなければいけない。シングルクォーテーションは文字列を囲む際には使えない
数値は10進数表記のみ対応
数値の先頭に余分な0は表記できず、無限大infinityや非数NaNも使えない

使用可能な構造型

使える構造型はオブジェクト、配列の2つ
オブジェクトは名前と値のセットの集合体である
オブジェクトの名前は文字列しか許可されない（ex—“name”:“JustOnePlanet”）
値は上記使える基本型の全てが使える
名前と値の間は:（コロン）で区切られる
セット（名前：値）の間は,（カンマ）で区切られる（ex—“name”:”JustOnePlanet”,“blog”,”WordPress”）
配列は（ex—“配列名”:[“要素0″,”要素1″,”要素2″,”要素3”]）のように[]でくくり、,（カンマ）で区切る

その他（今回は知らなくても大丈夫ですが）

MIMEタイプはapplication/json
ファイル拡張子は.json
jsonのみで記述（もしくはレスポンス）する際は、下記のように全体を[]でくくる

[
    {
        "name"     : "JustOnePlanet",
        "blog"     : "WordPress",
        "language" : ["JavaScript", "PHP", "Perl"],
        "num1"     : 10,
        "num2"     : 5,
        "boolean1" : true,
        "boolean2" : false
    }
]

XMLよりJSONの方が高速でパースできる。

■参考

こちらも参考にしてみてください。JSON入門へ

CSSで2カラムレイアウトを実現しよう

投稿日時: 2007 年 8 月 1 日投稿者: admin

返信

■前置き

横2列（2カラム）レイアウトをしたいと考えている方対象
テーブルレイアウトからCSSに移行してる方など対象
HTMLを書いた事があればまぁ大丈夫かな

■見本

※あくまでも見本なので記載のソースとは異なります。

ヘッダー

サイドバー

コンテンツ

フッター

■HTMLソース（上記レイアウトをスタイル属性で：非推奨）

<div style="width: 400px;">
<div style="background-color: orange">ヘッダー部分</div>
<div style="width: 100px; float: left; background-color: red">サイドバー</div>
<div style="width: 300px; float: right; background-color: yellow">コンテンツ部分</div>
<div style="clear: both; width: 400px; background-color: orange">フッター部分</div>
</div>

もしくは

<div style="width: 400px;">
<div style="background-color: orange">ヘッダー部分</div>
<div style="width: 100px; float: left; background-color: red">サイドバー</div>
<div style="width: 300px; float: left; background-color: yellow">コンテンツ部分</div>
<div style="clear: both; width: 400px; background-color: orange">フッター部分</div>
</div>

なんで非推奨なのかというとスタイルシートとは文章とデザインを分ける目的で作られたのに上記だとHTML内にある。しかもタグの中に書いてあって見にくい。スタイルシートを使うメリットが少ない。

■HTMLソース（ヘッド内へ記述タイプ）

headタグ内に以下の記述をする。

<style type="text/css">
#wrapper {
width: 400px;
}
#header {
background-color: orange;
}
#menubar {
float: left;
width: 100px;
background-color: red;
}
#content {
float: right;
width: 300px;
background-color:blue;
}
#footer {
clear: both;
background-color: orange;
}
</style>

bodyタグ内に以下の記述をする。

<div id="wrapper">
<div id="header">ヘッダー部分</div>
<div id="menubar">サイドバー</div>
<div id="content">コンテンツ部分</div>
<div id="footer">フッター部分</div>
</div>

まぁ、書き方は色いろあると思うけど。

■解説

コンテンツの量（分量）に応じて縦の長さは変化します
最終的には<link rel=”stylesheet” type=”text/css” href=”” media=”” />や@importなどを使って外部のCSSファイルを読み込むようにしましょう。（上記、headタグ内のCSSは属性よりも編集しやすく論理構造から切り離されてはいますが、文章の論理構造を記述するべくHTMLファイル内にデザインがある事には変わりません）
上記ソースのメリットの一つとしてid=”content”をHTML上でmenubarより上に持っていける事があります。（音声ブラウザが上から読み上げる際、最初にコンテンツを読み上げてくれるため）

底辺の長さ：
高さ：