JavaScript

 

JavaScriptリファレンスページ:http://www.tohoho-web.com/js/index.htm

 

IEでスクリプトエディタを使用できるようにすることを解説したページ:http://labs.gmo.jp/blog/ku/2007/03/iejavascript.html

 

FireBugの超入門ページ:http://www.atmarkit.co.jp/fjava/rensai4/devtool10/devtool10_1.html

 

Eclipseプラグイン(未使用):http://www.moongift.jp/2009/08/javascript_debug_toolkit/

 

<script> タグ

JavaScript は、<script></script> の間に記述する。
 
<script type="text/javascript">
         window.alert("Hello JavaScript");
</script>
注)type属性はHTML4.01から採用になった属性。スクリプトがJavaScriptであることを示す。これまではlanguage属性が使われていたが、今後はtype属性を使うようにしよう。
 

未対応ブラウザへの配慮

JavaScript に未対応のブラウザが、スクリプト部分を HTML の一部として画面に表示してしまうのを防ぐために、スクリプト全体を <!--  // --> でコメントアウトする。
何故コメントアウト?とは、この様な理由からであった。また、<noscript></noscript> の間には、JavaScript をサポートしていないブラウザに対するメッセージを記述する。

 

<script type="text/javascript">
<!--
document.write("Hello JavaScript");
// -->
</script>
<noscript>
JavaScript未対応
</noscript>
注)ただし、これらは必須ではない。記述しなくてもとりあえずは動く。最近のブラウザでJavaScriptに対応していないものはほとんど見かけないので冗長といえば冗長である。

 

サンプルコード(ボタン、リンク、関数呼び出し、引数渡し、変数定義、条件分岐、文字列結合、ダイアログ表示):

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">

<title>サンプル</title>

<form action="#">

<input type="button" value="Show Navigator" onclick=showNavigator(1);>

</form>

<br>

<a href="javascript:showNavigator(2)">Show Navigator</a>

 

<script type="text/javascript">

       function showNavigator(type) {

              var info;

              if (type == 1)

                     info = "[" + navigator.appName + "]" + "\nis your browser's name.";

              else

                     info = "[" + navigator.appVersion + "]" + "\nis your browser's version.";

              window.alert(info);

       }

</script>

</body>

</html>

 

サンプルコード(事前確認、確認ダイアログ):

<script type="text/javascript">

<!--

function check() {

    if (window.confirm("Are your sure?")) {

        return true;

    } else {

        return false;

    }

}

 

function done() {

       window.alert("Done.");

}

// -->

</script>

<a href="javascript:done()" onclick="return check()">実行</a>

<form action="javascript:done()"><input type="submit" value=" OK "

       onclick="return check();"></form>

 

サンプルコード(部品値取得、ボタンイベント呼び出し、計算、部品値取得代入):

<script type="text/javascript">

       <!--

       function func() {

              window.alert("here");

              var xx = parseFloat(document.F1.T1.value);

              var yy = parseFloat(document.F1.T2.value);

              document.F1.T3.value = xx + yy;

       }

       // -->

</script>

<form name="F1" action="#">

       <input type="text" name="T1" value=1>  +  <input type="text" name="T2" value=2>

       &nbsp;<input type="button" value=" = " onclick=javascript:func();>&nbsp;

       <input type="text" name="T3">

</form>

 

onClickなどのイベントハンドラが、InternetExplorerでは正常に動くが、FireFoxでは正常に動かないように見えるトラブル:

解)結論から言うと、これはonClick等のイベントハンドラによるものではなく、一部プロパティがブラウザ固有のものであったため、その部分でJavaScriptの処理がエラーで落ちていたからである。

例)

<script type="text/javascript">

       <!--

       function func() {

              alert("here");

              alert(window.event.type);          // FFは対応していないイベントプロパティ

              var xx = parseFloat(document.F1.T1.value);

              var yy = parseFloat(document.F1.T2.value);

              document.F1.T3.value = xx / yy;

       }

       // -->

</script>

<form name="F1" action="#">

       <input type="text" name="T1" value=1>  /  <input type="text" name="T2" value=2>

       &nbsp;<input type="button" value=" = " onclick="javascript:func();" >&nbsp;  // どちらのブラウザからでも正常に呼び出せる

       <input type="text" name="T3">

</form>

 

<input type="button" value="Button Event Type"

       onclick="javascript:alert(event.type);">   // IE,FFともに対応しているプロパティ

 

<input type="text" onkeypress="javascript:alert(window.event.keyCode);">

<input type="button" value="Event Button"

       onclick="javascript:alert(window.event.button);">

eventオブジェクトの扱いは難しい。IEFFEclipseのサーバ等、様々なブラウザでの扱いに一貫性がないので、デバッグは困難を極める。

必要最小限の場合、もしくは使用するブラウザが単一で無い限り、使わないほうが無難であろう。

 

JavaScriptのクロージャ:

JavaScriptでもクロージャを扱っている。JavaScriptの場合は「関数を返す関数」が定義できる。ただし、「関数を返す関数」を呼び出してそのまま処理を実行することが期待できない。関数を表す変数を定義して(下の例ではvar f)から、それを呼び出す必要がある。惜しい。

例)

<script language="JavaScript">

function atrim(str) {

       var no = 1;

       return function (str) {

              var newstr = str.replace(/^\s+|\s+$/g, "");

              return no++ + ": " + newstr + "<br>";

       };

}

var f = atrim();

document.write(f('     Kotaro Doi  '));

document.write(f('     Akiko Doi   '));

document.write(f('     Hinako Doi  '));

document.write(f('     Yuiko Doi '));

</script>

この例だと変数fが、関数atrimを参照しているが、このfに参照されている関数atrimは、「変数noJavaでいうフィールド)と無名関数(return function(str) {...};まで)」を参照している。atrimnoという状態と、それを自身で処理する関数を持っている。これをクロージャという。