JavaScript FAQ

JavaScriptに関する初心者〜中級者向けのFAQを兼ねた基礎知識集です。設置前に是非ご一読下さい。

基礎知識
  1. JavaScriptでは出来ないこと
  2. JavaScriptの記述方法と記述場所
  3. JavaScriptが動作する環境とブラウザ
  4. JavaScriptを設置するに当って考えておくべき事
  5. JavaScript未対応の環境の為に - <NOSCRIPT>
  6. 自分が使用しているブラウザのバージョンを調べる方法
  7. JavaScriptのデバッグが出来るようにする (エラーを出すようにする)
  8. JavaScriptのバージョンについて
  9. 小文字・大文字の区別
  10. 全角文字と全角スペース
  11. ".." と '..' の関係
  12. <HEAD>タグの中に書くJavaScriptと、<BODY>タグの間に書くJavaScriptの違い
  13. コメント行 (メモ書き)
  14. JavaScriptとダイナミックHTMLって違うの?ダイナミックHTMLって何?
  15. JavaScriptを勉強したい
設置編
  1. エラー対策 - 設置したJavaScriptが動作しない
  2. エラー対策 - 設置したJavaScriptが動作しない2 (エラーが出る)
  3. エラー対策 - 画像が表示されない
  4. エラー対策 - クリックをしたら音楽やアニメーションが止まってしまった
  5. JavaScriptでHTMLを出力する方法とその際の注意 - document.write()
  6. 改造 - サンプルの改造 (初級編)
  7. 改造 - サンプルの改造 (文章書き換え編)
  8. ハイパーリンクからJavaScriptを呼び出す
  9. 一つのアクション(onloadやonClickなど)で2つ以上の命令を実行したい
  10. 外部JavaScriptファイル(.jsファイル)って? - jsファイルのつくりかた
発展編
  1. コードの暗号化

Q. JavaScriptでは出来ないこと

JavaScriptではCGIと違い、アクセスカウンターや掲示板などの サーバー側のファイルに書きこむ必要のあるプログラムを作る事が出来ません

これは、CGIがサーバー側で動くプログラムに対して、 JavaScriptはクライアントサイド(見てる人のシステム側)で動作するプログラムという違いがあるからです。

以下はJavaScriptで出来ないことの主な例です。(*WWWにおける)

じゃあ逆に、JavaScriptで何が出来るの?という方は、 やはり当サイトのサンプルプログラムなどを ご覧頂いた方が理解する上で早道だと思います。

Q. 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未対応ブラウザでも中身をそのまま表示してしまうという問題を防ぎます。

Q. JavaScriptが動作する環境とブラウザ

JavaScriptに対応しているブラウザや端末の一覧です。なおデータは2001年3月現在のものです。

備考:i-modeやEzWeb、J-SkyWebはJavaScriptに対応していません。

Q. JavaScriptを設置するに当って考えておくべき事

ご自分のサイトにJavaScriptを使用するに辺り、考えておいた方がいいことはまず、 「どのブラウザでも閲覧できるか」ということです。 ダイナミックHTMLなどの新機能を使ったページは、JavaScriptに対応していない環境や古いブラウザでは、 満足に閲覧出来ない事があります。

IEのシェアが9割以上を占め、またそれに加えNetscapeやOperaなどのJavaScriptが利用可能ブラウザのシェア をあわせるとほぼ100%に近いシェアがある現在、ほとんどの環境でJavaScriptは利用可能だと思います。 しかし同時にセキュリティの面で、JavaScriptの機能をオフにしているユーザーや、 近年増えている携帯電話(i-ModeなどはJavaScript未対応です)などの端末を利用した ネット利用者も少なくない事を忘れてはいけないと思います。

そのような場合の対策としては、多少面倒ですが それぞれの環境に対応したページを用意したり、 JavaScriptに対応していない環境には[<NOSCRIPT>]を使って 代わりのコンテンツや警告を表示したり、 古いブラウザでは、[こちらのサンプル]を参考にして、 対応していないブラウザ用にコンテンツやメッセージを表示することが必要だと思います。

基本的な事ですが、複数のブラウザをインストールしておき、 それぞれのブラウザでもきちんとコンテンツの閲覧が出来る かテストする事も大事だと思います。

Q. JavaScript未対応の環境の為に - <NOSCRIPT>

様々な環境の方々がインターネットを利用しています。 当然、全てのユーザーがJavaScript対応のブラウザ利用されているとは限りません。 またJavaScript対応のブラウザを利用されていても、 中にはセキュリティーの観点からJavaScriptの設定をオフにしている方々もいます。 このようなユーザーがJavaScriptの設置したページを閲覧した場合、 正常に表示されない事があります。 このような場合、<NOSCRIPT>タグを用いると、 警告メッセージや代わりのコンテンツを表示する事が出来ます。

<NOSCRIPT>
現在お使いのブラウザがJavaScriptに対応していない可能性があります。
このサイトを正常に閲覧する為にはJavaScript対応ブラウザをご利用されるか、
JavaScriptの設定をオンにして下さい。
なお<a href="main.htm">入り口はこちら</a>です。
</NOSCRIPT>

この<NOSCRIPT>タグは、Netscape2.0xでは未対応なので タグの中身のコンテンツも表示されてしまうのですが、 今現在 Netscape2.0xのユーザーはほとんどいないと思いますし、 また表示されても問題無い文章ですので、実用には問題無いと思います。

Q. JavaScriptのデバッグが出来るようにする (エラーを出すようにする)

IE3.0やNetscape3.0以前のバージョンなどでは、 JavaScriptのエラーが起きたときエラーダイアログが自動的に表示されます。 しかし、最近のIE5.0以降や、Netscape4.0以降では例え JavaScriptのエラーが起きても標準設定のままではエラーダイアログが表示されません。 エラーダイアログを表示させるようにするには、以下のように設定を行います。

上の設定方法は日本語版の設定方法ですが、英語版でも手順は同様だと思います。(違ったらゴメンナサイ)

Q. JavaScriptのバージョンについて

ブラウザにバージョンが存在するように、JavaScriptにもバージョンというのが存在します。 新しいバージョンになるにつれて、新機能が増えています。 主なブラウザ別対応は以下の通りになっています。

なおこれらは、ECMAという標準化団体により標準化作業が行われています。

* 2005年1月現在この定義は既に古いものとなってしまいました。 現在のバージョンなどについては調査次第更新したいと思います。

Q. 小文字と大文字の区別

HTMLではタグを大文字で書こうが、小文字で書こうが問題無く認識されますが、 JavaScriptにおいては、小文字と大文字は厳密に区別されます。 例えば、最終更新日を表す、 "document.lastModified" というプロパティがありますが、 これを "DOCUMENT.LASTMODIFIED"と記述したり、"document.lastmodified"と記述した場合は 全くの別物になってしまい、場合によってはエラーなどが発生してしまいます。

Q. 全角文字と全角スペース

JavaScriptのコードは半角の英数字と記号を用いて記述するため、 スクリプト中に全角の文字やスペースは使用出来ません。 もしスクリプトド中にこの全角文字&スペースが混ざっているとエラーが発生して、 プログラムが動作しません。

なお、文字列として使用する場合には問題ありません(""や''でテキストを囲む時)。 またコメント行の中で使用するのも問題はありません。

全角のスペースなどが紛れ込んでると気付きにくいものです。 エラー表示の行を参考にそのあたりを調べてみるといいでしょう。

Q. ".." と '..' の関係

スクリプトの中でファイルや文字列を使用する場合、大抵”...”で囲むか’...’で囲みます。 この2つに意味合い的に違いはありません。どちらを使っても構いません。

ただ一つだけ注意する点があり、それは"..."の中では新しい " がそのまま使用出来ないのです。以下の例を見てください。

var msg = "こんにちはー!元気ですか?最近忙しくて私はちょっぴり"お疲れ"です";

スクリプトの一部分を上記のように書き換えるとエラーが起きます。なぜでしょうか? それは"お疲れ"の ” がスクリプトの実行の際ミスリードされ、 そこの部分で文字が終わりと勘違いされてしまうためです。要は"..."の間では ” はそのままでは使用できないんですね。 では ” を使いたい場合はどうすればいいんでしょうか。下記の書き換え例を見てください。

var msg = "こんにちはー!元気ですか?最近忙しくて私はちょっぴり\"お疲れ\"です";

”の前に¥をつけるようにしました。こうすることによりエラーが出なくなります。 \はエスケープ文字といい詳しく知りたい方はJavaScriptの参考書などを参考にしてください。

なおこの様な問題は、スクリプト中でHTMLを書き出す時によく起こります。 HTMLタグでは要素を"..."や"..."で囲む事が多いからですね。

Q. <HEAD>タグの中に書くJavaScriptと、<BODY>タグの間に書くJavaScriptの違い

多くの場合、どちらに記述しても問題はないです。 (*つまり、<head>に書かれた <script>〜</script>を そのまま<body>の中に移し変えても、ほとんどの場合は問題ないです。)

しかし、プログラムによっては<BODY>タグの中に 書くとエラーが発生するような場合がありますので、必要に応じて使い分ける事が好ましいです。 以下に例を挙げます。

- 主に<HEAD>タグの中に書くJavaScript
  • コンテンツが表示される前にプログラム全てを読み込んでおきたい場合。
  • HTMLの中から呼び出す関数を定義する場合。
- 主に<BODY>タグの中に書くJavaScript
  • HTMタグを書き出す場合。(document.write()など)

なお、HTMLタグを書き出す場合などを抜かしては、なるべく<HEAD>タグの中にJavaScriptを 記述する事が好ましいと思われます。

Q. コメント行 (メモ書き)

プログラムの中にちょっとしたメモ書きを残したい場合が出てきます。 そういう場合には、//をコメントの先頭に付けて

//メモ書き

とします。この場合//の後ろから改行までをコメントとして扱います。 複数行に渡って、コメントを残したい場合は、

/*メモ書き
のてすと*/

と、コメントを/* .. */で挟む事によりその間にある文字全てを(改行も含めて) コメントとして扱います。

HTMLで言う所の、<!-- -->と同じです。

当サイト内のサンプルの中にも幾つか、コメント行の書かれた部分がありますが、 必要無い部分ではあるので、その部分は削除して頂いても動作には何の支障もありません。

Q. JavaScriptとダイナミックHTMLって違うの?ダイナミックHTMLって何?

ダイナミックHTMLとは、IE4.0以降実装されたDocument Object Modelを土台にしつつ、 JavaScriptなどのスクリプト言語を通して動的なHTMLを作り出す手法一般のことを指します。 誤解を恐れずに言うのなら「動くホームページを作り出す技術」です。

あくまでもダイナミックHTMLを表現する一つの言語としてJavaScriptが位置付けられてるに過ぎず、 正確な意味でダイナミックHTMLとJavaScriptがイコールではありません。

とはいえこのダイナミックHTMLですが、提唱された当時は色々騒がれましたが、 今となってはこの言葉自体形骸化してしまった感じが否めません。 それだけこの技術が浸透してしまったとも言えるでしょうが。 それなので、JavaScriptとダイナミックHTMLの違いを今あえて認識する必要はないと思います。

Q. JavaScriptを勉強したい

きっとJavaScriptに触れるうちにJavaScriptを本格的に学びたいと考える方がいると思います。 ここでは、学ぶにはどうしたらいいかの一例をご紹介します。(自分の体験からですが)

まず学ぶための近道としては、色々なJavaScriptに触れてみて、 そして出来うる限りに色々といじったりする事が大事だと思います。 始めは、ただ単に文字を書き換えたり色を書き換えたりするだけでいいと思います。 そのうち、どこをいじるとどうなるかが感覚として掴めてくると思います。「習うより慣れろ」です。

また同時に入門書を一冊買うか、もしくはウェブでJavaScriptの講座を開いている所がありますので、 とりあえずそちらの方を見てみると良いでしょう。

当サイトのサンプルは全て改造など自由ですので、入門書などを参考に適当に改造などしてみてください。 どんな風に改造するも自由です。繰り返し色々やってみるのが効果的だと思います。 そうです始めはパクリでもいいのです!(ごめんなさい、やや暴論です)

JavaScriptはプログラム言語としてはかなり簡単な方なので、 プログラムの入門にも最適だと思います。頑張ってください。

Q. エラー対策(1) - 設置したJavaScriptが動作しない

JavaCにあるJavaScriptのソースをコピーして、自分のページに貼り付けたが動作しないの場合の対策方法です。

まず一番始めに、「JavaScriptのデモがちゃんと動作しているか?」 を確認してください。JavaCのサンプルのページでは全てプログラムのデモを行っています。 このデモがお使いのブラウザできちんと動いているかを確認してください。 このデモが動いてないようでしたら、ブラウザがそのスクリプトに対応していないため、設置をしても動作の確認は出来ません。

JavaCのサンプルは動いているのに、自分のページに設置したら動かなくなったという場合は、以下のことを確認してください。

画像を使ったスクリプトではないか?(画像が表示されない場合)

主に画像の操作を目的としたスクリプトの場合、 サンプルのソースをそのまま貼り付けても画像は表示されません。 これは画像パスがきちんと設定されていないからです。 この場合についての対策や修正方法は [Q. 画像が表示されない]をご覧下さい。

ソースを指定の個所に、必要な分だけ貼り付けているか?

サンプルページのソースの中で、 赤字になっている部分は動作するために必要最低限な部分です。 まずこの赤字の部分がきちんと全て、 自分のホームページに貼り付けられているか確認しましょう (<BODY>タグの中にあるonloadの指定を忘れてないかなどにも注意)。

またその際、<HEAD>〜</HEAD>タグの間にある <SCRIPT>〜</SCRIPT>の部分はご自分のホームページに貼り付ける際も、 そのまま<HEAD>〜</HEAD>タグの間に設置してください。

ホームページ製作ソフトを利用しているか?

一部のホームページ製作ソフトでは、 ソースを貼り付けるとソフト自身の解釈の為に勝手に書き換えてしまい、 JavaScriptが動作しなくなってしまう場合があります。 そのような場合は、 そのソフトの自動構文チェックの設定(またはそれに類する設定)をオフにするか、 もしくはテキストエディタなどで編集するようにして下さい。

なお、サンプルのソースをそのまま貼り付けた時は問題無く動作するが、 自分のページ用に少し書き換えたら途端に動作しなくなった、というような場合は [エラー対策(2)]をご参照下さい。

Q. エラー対策(2) - 設置したJavaScriptが動作しない(エラーが出る)

まず先に[エラー対策(1)]の方をご覧下さい。

さて、JavaScriptのサンプルソースを自分好みに色々と書き換えていたら 動作しなくなった、という場合ですがそのような場合は以下のような原因が考えられます。

  1. 文字列の"や'の閉め忘れや、HTMLタグの出力失敗。>参照
  2. 大文字・小文字を取り間違えている。英語の綴りを間違えている。>参照
  3. 全角スペースや全角文字がプログラムの中に紛れ込んでいる。>参照
  4. プログラムの1行終了を示す、;(セミコロン)の付け忘れ。
  5. 複数のJavaScriptサンプルを同じページ内に設置した時の不具合。

個人的な経験則から言わせてもらうと、原因は1、2が多いです。

(1)が起きる原因はテキストを書き換えたときそのテキストがちゃんと、 "..."や'...'で囲まれていない時や、"..."や'...'で囲まれたテキストの中で、 "や'と使ってしまった時です。 また、(2)はタグのID/nameの指定を間違えてしまっている場合などに多く発生します。

(5)の事例に関しては正直、初心者の方では対処が難しいと思います。 その場合はご自分で何とか頑張って頂くか、諦めて頂くしかないかだと思います。 一応当サイトでは、当サイトのスクリプト同士競合をしないように設計されています。(が、それでも万全ではありません)

なお、上記のような原因で動作しない場合、大抵エラーが表示されます。 ([エラーを表示させる為の設定方法について]) そのエラーダイアログの中にはエラーの詳細について書かれています。 正直JavaScript経験の無い方にとって、 エラーメッセージの内容について理解する事は難しいと思いますが、 エラーの際はどこの行でエラーが起きたかその行が表示されます(ラインとか)。 とりあえずその行の辺りを調べてみるのがいいと思います。

サンプルのスクリプトを書き換えて文字やスピードなどの設定を行う時は、 一気に全部書き換えずに部分部分を少しずつ書き換えて、 その度にブラウザで確認するという作業を行えば、問題点を探す上で非常に有利となります。

Q. エラー対策 - 画像が表示されない

当サイトのサンプルソースは、コピー&ペーストすれば すぐそのまま設置が出来るものばかりですが、 一部画像を使用したスクリプトなどは、 きちんと画像のパスを設定しないと動作しないものがあります。 このような場合は、貼り付けた後自分の環境に合わせた設定を行ってください。

画像のパスやファイル名の指定方法は、<img src=".....">タグのsrcの中身と一緒です。 なので、画像パスを設定したのに表示されないという方は同じページ内に <img src=".....">タグをテスト用に設置して、srcに利用する画像パスを 指定してちゃんと画像が出るか確かめてください。 <img>タグで指定しても画像が出ない場合は、 画像パスの指定ミス(ディレクトリが違う、ファイル名の大文字小文字の間違い、 ファイル名の中に全角文字が含まれている。)が考えられます。よくご確認下さい。

Q. エラー対策 - クリックをしたら音楽やアニメーションが止まってしまった

当サイトの一部のサンプルでは、<A href="javascript:命令">のような形で javascript:スキームを使って命令を呼び出しています。しかしこの方法だと、BGMを流している場合やGIFアニメーションを使用しているページでは、 クリック時に音楽やGIFアニメーションが停止してしまいます。

対策としては、 href="javascript:命令" と書かれている部分を href="#" と書き換え、 同じタグの中に onclick="命令" を追加します。

例えば以下のような場合、

<a href="javascript:alertMsg()">ページ情報</a>

を次のように書き換えます。

<a href="#" onclick="alertMsg()">ページ情報</a>

Q. サンプルの改造(初級編)
JavaScriptのサンプルプログラムをちょっと改造してみたいと思う方がいらっしゃるかと思います。 初級編では、もっとも簡単な改造方法からご紹介したいと思います。

公開されているJavaScriptプログラムには、HTMLタグの中で onClick="???" や onLoad="???" 、 onMouseover="???"という記述が見当たる サンプルがあると思います。
例えば、以下の様なハイパーリンクタグがあったとします。
<A Href="httt://www.yahoo.co.jp" onMouseover="callmsg()">
このハイパーリンクタグに触れると(これがonMouseoverの意味) callmsg()という関数を呼び出し実行します。 この例において、onover()という関数は「アラートメッセージを表示する関数(命令)」だとします。
ちなみに関数って何って言う方は気にしないで、 ただ単に「このリンクに触れるとアラートが出てメッセージが表示される」と思っておいて下さい。
このプログラムは以下のようになっています。
元ソースコード

<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など色々有ります。

ここでの例はもっとも簡単な改造の例なのですが、 これを理解できれば応用範囲が広いので出来るようになっておくといいと思います。

Q. プログラムを改造したい(文章編)
自分のページにJavaScriptを設置した時、 プログラムによって画面に表示された文字や文章を、 自分流に書き換えたいと思う場面が出てくると思います。
ほとんどの場合は、そのHTMLファイルをエディタなどで開き その画面に表示された文章と同じ文字の列をソースから検索して見つけ、 その部分を直接書きかえれば問題無く出来ます
ただし、書き換える前に頭に入れておくべき事が幾つかありますので、 以下に簡単な説明を書きます。

JavaScriptでは文字列は全て""(ダブルクォート)、 もしくは''(シングルクォート)の間に記述されています。

"ほげほげ"
'文字列'

上記の例で言うと、緑色の太字部分が直接書き換え可能な文字列となります。
""や''の間では好きな文書を自由に入れることが可能ですが、 一つ注意しておくべき事があります。 ""で囲んだ文字列の中では"(ダブルクォート)が、 ''で囲んだ文字列の中では'(シングルクォート)が、 それぞれそのまま使用する事が出来ません。例えば、

"<A href="http://www.yahoo.co.jp/"> Yahoo Japan</A>"

と書き換えた場合はエラーが発生してしまいます。 (理由は、文字列は"で始まって"で終わるため、href=の後ろの"で 文字列終了と判断されてしまう為です。)
これをエラーが出ないようにする為には、"(ダブルクォート)の前に \(エスケープ)をつけてやるか、もしくは"を'に替える必要があります。

"<A href=\"http://www.yahoo.co.jp/\"> Yahoo Japan</A>"
又は、
"<A href='http://www.yahoo.co.jp/'> Yahoo Japan</A>"
Q. ハイパーリンクからJavaScriptを呼び出す
ボタンをクリックすると起動するJavaScriptプログラムがあります。 これをボタンを使わずにハイパーリンクへのクリックで起動させるようにするには、 "http:"のプロトコルの代わりに"javascript:"プロトコルを指定し、 その後ろに続けて関数名を記述します。

例えば、
<input type="button" onclick="parapara()">
をハイパーリンクタグに置き換えると、
<a href="javascript:parapara()">
となります。
Q. 一つのアクションで複数のJavaScriptプログラムを動かしたい
一つのアクション(ページのロードやボタンのクリックなど)で、 複数のJavaScriptを同時に動かしたい場合は、セミコロン";"を挟んで記述します。

例えば、
<BODY onload="clock()">
という時計プログラムと、
<BODY onload="scrollmsg()">
という流れるメッセージプログラムの2つを同じページ内で使用したい場合があると思います。 その場合は、それぞれの関数名(onload=""の中の文字の事です)の後ろにセミコロンを付けて併記します。
<BODY onload="clock();scrollmsg()">
こう指定する事により、2つのプログラムを同じページ内で使用する事が出来ます。
Q. 外部JavaScriptファイル(.jsファイル)って?

HTMLに記述すべきJavaScriptプログラムを別ファイルに記述して、 それをHTMLファイル内から呼び出して利用する事が出来ます。 ファイルには.jsという拡張子を付ける必要があります。 なおそのファイルの中では<SCRIPT>タグでコードを囲む必要がありません。

これのメリットとしては、

などがあります。
対応している主なブラウザは、IE3.02以上、Netscape3.0以上などです。
なおインターネット上で使用する場合は、サーバー側の設定が必要です。
大手プロバイダーなどでは既に設定済みの所も多いです。
Q. コードの暗号化

Microsoftの提供するScript Encoderというプログラムを 使用する事により、スクリプトの暗号化が出来ます。 暗号化したスクリプトに対応しているブラウザは、Windows版のIE5.0以上のみです。 JavaScriptのコードやHTMLソースを公開したくない場合などに有効です。 (…どれほどの安全性があるのかは不明ですが。)

Q.

[ Information ]