で作成可能です。CHARACTER SETとかやら無くても大丈夫なときはありますが、設定に依存するので直接指定しちゃった方が安全です。

クリックなどはdocumentエレメントを使います。

Event.observe(document, 'click', funcTest, false);

ページ読み込み時はwindowを使います。

Event.observe(window, 'load', funcTest, false);

書式

Event.observe(element, name, observer, useCapture);

element

エレメントかID

name

イベントの名前。load、click、blur、focusなどなど

observer

関数の名前。イベントが発火したら呼び出される

useCapture

trueにするとイベントハンドラを処理し終わったらブラウザに処理が戻らない

サンプル

ページが読み込まれたら関数page_loaded()を実行。

Event.observe(window, 'load', page_loaded, false);

id=”button_id”のボタンがクリックされたら関数button_clicked()を実行。

Event.observe("button_id", 'click', button_clicked, false);

画面サイズが変更されたら関数window_changed()を実行

Event.observe(window, 'resize', window_changed, false);

幅は

function getWindowWidth(){
    if(window.innerWidth){
        return window.innerWidth;
    }else if(document.documentElement && document.documentElement.clientWidth){
        return document.documentElement.clientWidth;
    }else if ( document.body && document.body.clientWidth){
        return document.body.clientWidth;
    }
}

高さは

function getWindowHeight(){
    if(window.innerHeight){
        return window.innerHeight;
    }else if(document.documentElement && document.documentElement.clientHeight){
        return document.documentElement.clientHeight;
    }else if ( document.body && document.body.clientHeight){
        return document.body.clientHeight;
    }
}

で取得できます。

<script charset="utf-8" type="text/javascript" src="/js/prototype.js"> </script>

これを使えばHTMLのどの場所からでもjsを読み込むことができます。

というわけでHTMLにJavascriptを直接書く方法です。<script>タグで囲みます。

<SCRIPT TYPE="text/javascript">
<!--
ここに処理を書く
//-->
</SCRIPT>

<input type="radio" name="bd" value="A">A型
<input type="radio" name="bd" value="B">B型
<input type="radio" name="bd" value="O">O型
<input type="radio" name="bd" value="AB">AB型

やってみて分かったのですがinput radioの値の取得、設定に役に立つような関数はprototype.jsは持っていませんでした。なので$N()という関数を作成してみました。

[prototype.jsを拡張] name属性から配列を生成する関数$N()

$N()を使ってinput radioの値を取得したり設定したりします。

値の取得

var elms = $N('bd');
var strName = "";

for(i = 0; i < elms.length; i++){
    if(elms[i].checked){
        strName = elms[i].value;
    }
}

これでstrNameにはA、B、O、ABのいずれかが入ります。

値の設定

同じく$N()を使います。

var elms = $N('bd');

elms[3].checked = true;

上のHTMLだとAB型のradioボタンが選択されます。

function $N(element) {
  var elms = document.getElementsByName(element);

  elmArray = Array();

  for(i = 0; i < elms.length; i++){
    elmArray.push(Element.extend(elms.item(i)));
  }

  return elmArray;
}

これはdocument.getElementsByNameを使って任意のnameを持つエレメントの配列を返す関数です。例えば

A型
B型
O型
AB型

<input type="radio" name="bd" value="A">A型
<input type="radio" name="bd" value="B">B型
<input type="radio" name="bd" value="O">O型
<input type="radio" name="bd" value="AB">AB型

というHTMLがあったとします。$N()はこのようなradioボタンからname属性を使って配列を生成します。

elmArray = $N('bd');

で、こんな感じで使います。

var elms = $N('bd');

for(i = 0; i < elms.length; i++){
    if(elms[i].checked){
        alert(elms[i].value);
    }
}

<select id="select_id>
<option value="テスト">テスト</option>
<option value="ペスト">ペスト</option>
<option value="ネスト">ネスト</option>
<option value="レスト">レスト</option>
</select>

値の取得

selectでは、

var strName = $F(’select_id’);

と

var strName = $(’select_id’).value;

は問題なく動きます。また、

var strName = $(’select_id’).getAttribute(’value’);

はIEでは動くのですがfirefoxでは動かないので避けた方がいいです。

当然といえば当然なのですが

strName = $(’select_id’).innerHTML;

は全く動作しません。

値の設定

値の設定では

$(’select_id’).value = “テスト”;

だけが正しく動作します。値の設定には.valueを使うのが良さそうです。

$(’select_id’).setAttribute(’value’,”テスト”);

はIEでは動作するのですがfirefoxでは動作しません。

当然ながら

$(’select_id’).innerHTML = “テスト”;

は動作しません。

<input type="text" size="20" id="input_id" value="テスト">

値の取得

input type=”text”では、

var strName = $F(’input_id’);

と

var strName = $(’input_id’).value;

は問題なく動きます。また、

var strName = $(’input_id’).getAttribute(’value’);

も動くのですが、これはtextareaの時に使えないので避けた方がいいです。

当然といえば当然なのですが

strName = $(’input_id’).innerHTML;

は全く動作しません。

値の設定

かなり意外なのですが値の設定では

$(’input_id’).value = “テスト”;

だけが正しく動作します。値の設定には.valueを使うのが良さそうです。

$(’input_id’).setAttribute(’value’,”テスト”);

はIEでは動作するのですがfirefoxでは動作しません。

当然ながら

$(’input_id’).innerHTML = “テスト”;

は動作しません。