JavaScriptに関する初心者〜中級者向けのFAQを兼ねた基礎知識集です。設置前に是非ご一読下さい。
JavaScriptではCGIと違い、アクセスカウンターや掲示板などの サーバー側のファイルに書きこむ必要のあるプログラムを作る事が出来ません。
これは、CGIがサーバー側で動くプログラムに対して、 JavaScriptはクライアントサイド（見てる人のシステム側）で動作するプログラムという違いがあるからです。
以下はJavaScriptで出来ないことの主な例です。（*WWWにおける）
じゃあ逆に、JavaScriptで何が出来るの？という方は、 やはり当サイトのサンプルプログラムなどを ご覧頂いた方が理解する上で早道だと思います。
JavaScriptのプログラムは、<script>〜</script>のタグの間に記述します。 例えば以下の様なJavaScriptがあった場合、
<script type="text/javascript">
function clock() {
now = new Date();
window.status = now;
setTimeout("clock()",1000);
}
</script>
上記の赤色の部分がJavaScriptのプログラム部分に当ります。
なお、JavaScriptに未対応(<script>タグ未対応)のブラウザにて、ソースコードの部分が丸見えになってしまうのを防ぐため、 通常あわせてコメントタグ <!-- -->を用います。
<script type="text/javascript">
<!--
function clock() {
now = new Date();
window.status = now;
setTimeout("clock()",1000);
}
//-->
</script%gt;
上記の様に記述する事により、JavaScript未対応ブラウザでも中身をそのまま表示してしまうという問題を防ぎます。
JavaScriptに対応しているブラウザや端末の一覧です。なおデータは2001年3月現在のものです。
備考：i-modeやEzWeb、J-SkyWebはJavaScriptに対応していません。
ご自分のサイトにJavaScriptを使用するに辺り、考えておいた方がいいことはまず、 「どのブラウザでも閲覧できるか」ということです。 ダイナミックHTMLなどの新機能を使ったページは、JavaScriptに対応していない環境や古いブラウザでは、 満足に閲覧出来ない事があります。
IEのシェアが9割以上を占め、またそれに加えNetscapeやOperaなどのJavaScriptが利用可能ブラウザのシェア をあわせるとほぼ100%に近いシェアがある現在、ほとんどの環境でJavaScriptは利用可能だと思います。 しかし同時にセキュリティの面で、JavaScriptの機能をオフにしているユーザーや、 近年増えている携帯電話（i-ModeなどはJavaScript未対応です）などの端末を利用した ネット利用者も少なくない事を忘れてはいけないと思います。
そのような場合の対策としては、多少面倒ですが それぞれの環境に対応したページを用意したり、 JavaScriptに対応していない環境には[<NOSCRIPT>]を使って 代わりのコンテンツや警告を表示したり、 古いブラウザでは、[こちらのサンプル]を参考にして、 対応していないブラウザ用にコンテンツやメッセージを表示することが必要だと思います。
基本的な事ですが、複数のブラウザをインストールしておき、 それぞれのブラウザでもきちんとコンテンツの閲覧が出来る かテストする事も大事だと思います。
様々な環境の方々がインターネットを利用しています。 当然、全てのユーザーがJavaScript対応のブラウザ利用されているとは限りません。 またJavaScript対応のブラウザを利用されていても、 中にはセキュリティーの観点からJavaScriptの設定をオフにしている方々もいます。 このようなユーザーがJavaScriptの設置したページを閲覧した場合、 正常に表示されない事があります。 このような場合、<NOSCRIPT>タグを用いると、 警告メッセージや代わりのコンテンツを表示する事が出来ます。
<NOSCRIPT>
現在お使いのブラウザがJavaScriptに対応していない可能性があります。
このサイトを正常に閲覧する為にはJavaScript対応ブラウザをご利用されるか、
JavaScriptの設定をオンにして下さい。
なお<a href="main.htm">入り口はこちら</a>です。
</NOSCRIPT>
この<NOSCRIPT>タグは、Netscape2.0xでは未対応なので タグの中身のコンテンツも表示されてしまうのですが、 今現在 Netscape2.0xのユーザーはほとんどいないと思いますし、 また表示されても問題無い文章ですので、実用には問題無いと思います。
IE3.0やNetscape3.0以前のバージョンなどでは、 JavaScriptのエラーが起きたときエラーダイアログが自動的に表示されます。 しかし、最近のIE5.0以降や、Netscape4.0以降では例え JavaScriptのエラーが起きても標準設定のままではエラーダイアログが表示されません。 エラーダイアログを表示させるようにするには、以下のように設定を行います。
上の設定方法は日本語版の設定方法ですが、英語版でも手順は同様だと思います。(違ったらゴメンナサイ)
ブラウザにバージョンが存在するように、JavaScriptにもバージョンというのが存在します。 新しいバージョンになるにつれて、新機能が増えています。 主なブラウザ別対応は以下の通りになっています。
なおこれらは、ECMAという標準化団体により標準化作業が行われています。
＊ 2005年1月現在この定義は既に古いものとなってしまいました。 現在のバージョンなどについては調査次第更新したいと思います。
HTMLではタグを大文字で書こうが、小文字で書こうが問題無く認識されますが、 JavaScriptにおいては、小文字と大文字は厳密に区別されます。 例えば、最終更新日を表す、 "document.lastModified" というプロパティがありますが、 これを "DOCUMENT.LASTMODIFIED"と記述したり、"document.lastmodified"と記述した場合は 全くの別物になってしまい、場合によってはエラーなどが発生してしまいます。
JavaScriptのコードは半角の英数字と記号を用いて記述するため、 スクリプト中に全角の文字やスペースは使用出来ません。 もしスクリプトド中にこの全角文字＆スペースが混ざっているとエラーが発生して、 プログラムが動作しません。
なお、文字列として使用する場合には問題ありません（""や''でテキストを囲む時）。 またコメント行の中で使用するのも問題はありません。
全角のスペースなどが紛れ込んでると気付きにくいものです。 エラー表示の行を参考にそのあたりを調べてみるといいでしょう。
スクリプトの中でファイルや文字列を使用する場合、大抵”...”で囲むか’...’で囲みます。 この２つに意味合い的に違いはありません。どちらを使っても構いません。
ただ一つだけ注意する点があり、それは"..."の中では新しい " がそのまま使用出来ないのです。以下の例を見てください。
var msg = "こんにちはー！元気ですか？最近忙しくて私はちょっぴり"お疲れ"です";
スクリプトの一部分を上記のように書き換えるとエラーが起きます。なぜでしょうか？ それは"お疲れ"の ” がスクリプトの実行の際ミスリードされ、 そこの部分で文字が終わりと勘違いされてしまうためです。要は"..."の間では ” はそのままでは使用できないんですね。 では ” を使いたい場合はどうすればいいんでしょうか。下記の書き換え例を見てください。
var msg = "こんにちはー！元気ですか？最近忙しくて私はちょっぴり\"お疲れ\"です";
”の前に￥をつけるようにしました。こうすることによりエラーが出なくなります。 \はエスケープ文字といい詳しく知りたい方はJavaScriptの参考書などを参考にしてください。
なおこの様な問題は、スクリプト中でHTMLを書き出す時によく起こります。 HTMLタグでは要素を"..."や"..."で囲む事が多いからですね。
多くの場合、どちらに記述しても問題はないです。 （*つまり、<head>に書かれた <script>〜</script>を そのまま<body>の中に移し変えても、ほとんどの場合は問題ないです。)
しかし、プログラムによっては<BODY>タグの中に 書くとエラーが発生するような場合がありますので、必要に応じて使い分ける事が好ましいです。 以下に例を挙げます。
なお、HTMLタグを書き出す場合などを抜かしては、なるべく<HEAD>タグの中にJavaScriptを 記述する事が好ましいと思われます。
プログラムの中にちょっとしたメモ書きを残したい場合が出てきます。 そういう場合には、//をコメントの先頭に付けて
//メモ書き
とします。この場合//の後ろから改行までをコメントとして扱います。 複数行に渡って、コメントを残したい場合は、
/*メモ書き
のてすと*/
と、コメントを/* .. */で挟む事によりその間にある文字全てを（改行も含めて） コメントとして扱います。
HTMLで言う所の、<!-- -->と同じです。
当サイト内のサンプルの中にも幾つか、コメント行の書かれた部分がありますが、 必要無い部分ではあるので、その部分は削除して頂いても動作には何の支障もありません。
ダイナミックHTMLとは、IE4.0以降実装されたDocument Object Modelを土台にしつつ、 JavaScriptなどのスクリプト言語を通して動的なHTMLを作り出す手法一般のことを指します。 誤解を恐れずに言うのなら「動くホームページを作り出す技術」です。
あくまでもダイナミックHTMLを表現する一つの言語としてJavaScriptが位置付けられてるに過ぎず、 正確な意味でダイナミックHTMLとJavaScriptがイコールではありません。
とはいえこのダイナミックHTMLですが、提唱された当時は色々騒がれましたが、 今となってはこの言葉自体形骸化してしまった感じが否めません。 それだけこの技術が浸透してしまったとも言えるでしょうが。 それなので、JavaScriptとダイナミックHTMLの違いを今あえて認識する必要はないと思います。
きっとJavaScriptに触れるうちにJavaScriptを本格的に学びたいと考える方がいると思います。 ここでは、学ぶにはどうしたらいいかの一例をご紹介します。(自分の体験からですが)
まず学ぶための近道としては、色々なJavaScriptに触れてみて、 そして出来うる限りに色々といじったりする事が大事だと思います。 始めは、ただ単に文字を書き換えたり色を書き換えたりするだけでいいと思います。 そのうち、どこをいじるとどうなるかが感覚として掴めてくると思います。「習うより慣れろ」です。
また同時に入門書を一冊買うか、もしくはウェブでJavaScriptの講座を開いている所がありますので、 とりあえずそちらの方を見てみると良いでしょう。
当サイトのサンプルは全て改造など自由ですので、入門書などを参考に適当に改造などしてみてください。 どんな風に改造するも自由です。繰り返し色々やってみるのが効果的だと思います。 そうです始めはパクリでもいいのです！（ごめんなさい、やや暴論です）
JavaScriptはプログラム言語としてはかなり簡単な方なので、 プログラムの入門にも最適だと思います。頑張ってください。
JavaCにあるJavaScriptのソースをコピーして、自分のページに貼り付けたが動作しないの場合の対策方法です。
まず一番始めに、「JavaScriptのデモがちゃんと動作しているか？」 を確認してください。JavaCのサンプルのページでは全てプログラムのデモを行っています。 このデモがお使いのブラウザできちんと動いているかを確認してください。 このデモが動いてないようでしたら、ブラウザがそのスクリプトに対応していないため、設置をしても動作の確認は出来ません。
JavaCのサンプルは動いているのに、自分のページに設置したら動かなくなったという場合は、以下のことを確認してください。
主に画像の操作を目的としたスクリプトの場合、 サンプルのソースをそのまま貼り付けても画像は表示されません。 これは画像パスがきちんと設定されていないからです。 この場合についての対策や修正方法は [Q. 画像が表示されない]をご覧下さい。
サンプルページのソースの中で、 赤字になっている部分は動作するために必要最低限な部分です。 まずこの赤字の部分がきちんと全て、 自分のホームページに貼り付けられているか確認しましょう (<BODY>タグの中にあるonloadの指定を忘れてないかなどにも注意）。
またその際、<HEAD>〜</HEAD>タグの間にある <SCRIPT>〜</SCRIPT>の部分はご自分のホームページに貼り付ける際も、 そのまま<HEAD>〜</HEAD>タグの間に設置してください。
一部のホームページ製作ソフトでは、 ソースを貼り付けるとソフト自身の解釈の為に勝手に書き換えてしまい、 JavaScriptが動作しなくなってしまう場合があります。 そのような場合は、 そのソフトの自動構文チェックの設定（またはそれに類する設定）をオフにするか、 もしくはテキストエディタなどで編集するようにして下さい。
なお、サンプルのソースをそのまま貼り付けた時は問題無く動作するが、 自分のページ用に少し書き換えたら途端に動作しなくなった、というような場合は [エラー対策(2)]をご参照下さい。
まず先に[エラー対策(1)]の方をご覧下さい。
さて、JavaScriptのサンプルソースを自分好みに色々と書き換えていたら 動作しなくなった、という場合ですがそのような場合は以下のような原因が考えられます。
個人的な経験則から言わせてもらうと、原因は１、２が多いです。
(1)が起きる原因はテキストを書き換えたときそのテキストがちゃんと、 "..."や'...'で囲まれていない時や、"..."や'...'で囲まれたテキストの中で、 "や'と使ってしまった時です。 また、(2)はタグのID/nameの指定を間違えてしまっている場合などに多く発生します。
(5)の事例に関しては正直、初心者の方では対処が難しいと思います。 その場合はご自分で何とか頑張って頂くか、諦めて頂くしかないかだと思います。 一応当サイトでは、当サイトのスクリプト同士競合をしないように設計されています。（が、それでも万全ではありません）
なお、上記のような原因で動作しない場合、大抵エラーが表示されます。 （[エラーを表示させる為の設定方法について]） そのエラーダイアログの中にはエラーの詳細について書かれています。 正直JavaScript経験の無い方にとって、 エラーメッセージの内容について理解する事は難しいと思いますが、 エラーの際はどこの行でエラーが起きたかその行が表示されます（ラインとか）。 とりあえずその行の辺りを調べてみるのがいいと思います。
サンプルのスクリプトを書き換えて文字やスピードなどの設定を行う時は、 一気に全部書き換えずに部分部分を少しずつ書き換えて、 その度にブラウザで確認するという作業を行えば、問題点を探す上で非常に有利となります。
当サイトのサンプルソースは、コピー＆ペーストすれば すぐそのまま設置が出来るものばかりですが、 一部画像を使用したスクリプトなどは、 きちんと画像のパスを設定しないと動作しないものがあります。 このような場合は、貼り付けた後自分の環境に合わせた設定を行ってください。
画像のパスやファイル名の指定方法は、<img src=".....">タグのsrcの中身と一緒です。 なので、画像パスを設定したのに表示されないという方は同じページ内に <img src=".....">タグをテスト用に設置して、srcに利用する画像パスを 指定してちゃんと画像が出るか確かめてください。 <img>タグで指定しても画像が出ない場合は、 画像パスの指定ミス（ディレクトリが違う、ファイル名の大文字小文字の間違い、 ファイル名の中に全角文字が含まれている。）が考えられます。よくご確認下さい。
当サイトの一部のサンプルでは、<A href="javascript:命令">のような形で javascript:スキームを使って命令を呼び出しています。しかしこの方法だと、BGMを流している場合やGIFアニメーションを使用しているページでは、 クリック時に音楽やGIFアニメーションが停止してしまいます。
対策としては、 href="javascript:命令" と書かれている部分を href="#" と書き換え、 同じタグの中に onclick="命令" を追加します。
例えば以下のような場合、
<a href="javascript:alertMsg()">ページ情報</a>
を次のように書き換えます。
<a href="#" onclick="alertMsg()">ページ情報</a>
|
元ソースコード <SCRIPT Language="JavaScript"> <!-- //関数の定義 function callmsg() { alert("こんにちわ。"); } //--> </SCRIPT> <A Href="httt://www.yahoo.co.jp" onMouseover="callmsg()"> |
|
改造後ソースコード <SCRIPT Language="JavaScript"> <!-- function callmsg() { alert("こんにちわ。"); } //--> </SCRIPT> <FORM Mathod="POST"> <INPUT Type="button" value="CLICK" onClick="callmsg()"> </FORM> |
ボタンをクリックするとメッセージが表示されたと思います。
他にもonloadイベントを使って<BODY>に、
<BODY onLoad="callmsg()">
とすると、ページが読みこまれるとメッセージを出します。
どんな仕掛けになっているかは大体、お分かり頂けたかと思います。
マウスオーバーにしろ、ボタンクリックにしろ、ページオンロードにしろ、
結局は同じアクション（メッセージを表示する）が起きています。
これは、それぞれのイベントに対して、同じ"callmsg()"を使っているから、
同じ事が起きるわけです。
例えば、"openwindow()"という新しいウインドウを開くというものがあったとすると、
上記と同じような法則を当てはめる事が出来るのです。
(onMouseover="openwindow()" , onclick="openwindow()" etc...)
イベントは他にもonMouseoutや、onUnloadなど色々有ります。
ここでの例はもっとも簡単な改造の例なのですが、
これを理解できれば応用範囲が広いので出来るようになっておくといいと思います。
HTMLに記述すべきJavaScriptプログラムを別ファイルに記述して、
それをHTMLファイル内から呼び出して利用する事が出来ます。
ファイルには.jsという拡張子を付ける必要があります。
なおそのファイルの中では<SCRIPT>タグでコードを囲む必要がありません。
これのメリットとしては、
Microsoftの提供するScript Encoderというプログラムを 使用する事により、スクリプトの暗号化が出来ます。 暗号化したスクリプトに対応しているブラウザは、Windows版のIE5.0以上のみです。 JavaScriptのコードやHTMLソースを公開したくない場合などに有効です。 （…どれほどの安全性があるのかは不明ですが。）