JavaScript初心者の為の基礎知識です。FAQも兼ねてます。
HTMLは知ってるが、JavaScriptについてはほとんど無知という方向けです。 スクリプトをご自分で改造してみたい方などは是非一読しておいて下さい。
JavaScriptのプログラムは、<SCRIPT> </SCRIPT>のタグの間に記述します。
例えば以下の様なソースコードがあった場合、
<script language="javascript">
function clock() {
now = new Date();
window.status = now;
setTimeout("clock()",1000);
}
</script>
上記の赤色の部分がJavaScriptのプログラム部分に当ります。
なお、JavaScriptに未対応のブラウザにて、
ソースコードの部分が丸見えになってしまうのを防ぐため、
コメントタグ <!-- -->を用います。
<script language="javascript">上記の様に記述する事により、 JavaScript未対応ブラウザでも中身をそのまま表示してしまうという事を防ぎます。
<!--
function clock() {
now = new Date();
window.status = now;
setTimeout("clock()",1000);
}
//-->
</script>
HTMLではタグを大文字で書こうが、小文字で書こうが問題無く認識されますが、 JavaScriptにおいては、小文字と大文字は厳密に区別されます。 例えば、最終更新日を表す、"document.lastModified"というプロパティがありますが、 これを "DOCUMENT.LASTMODIFIED"と記述したり、"document.lastmodified"と記述した場合は 全くの別物になってしまい、場合によってはエラーなどが発生してしまいます。
JavaScriptのコードは半角の英数字と記号を用いて記述するため、 コード中に全角の文字やスペースは使用出来ません。
コード中にこの全角文字＆スペースが混ざっているとエラーが発生して、 プログラムが動作しません。
なお、文字列として使用する場合には問題ありません。（""や''でテキストを囲む時）。 またコメント行の中でも問題はありません。
例えば、Last Updateのサンプルを改造して、 色を付けようと考えて、以下のようにしたとします。
document.write("最終更新日：<font color="#0000ff">",document.lastModified,"</font>);
多くの場合、どちらに記述しても問題はないです。
しかし、プログラムによっては<BODY>タグの中に 書くとエラーが発生するような場合がありますので、必要に応じて使い分ける事が好ましいです。 以下に例を挙げます。
- 主に<HEAD>タグの中に書くJavaScript
- コンテンツが表示される前にプログラム全てを読み込んでおきたい場合。
- HTMLの中から呼び出す関数を定義する場合。
- 主に<BODY>タグの中に書くJavaScript
- HTMタグを書き出す場合。(document.write()など)
なお、HTMLタグを書き出す場合などを抜かしては、なるべく<HEAD>タグの中にJavaScriptを 記述する事が好ましいと思われます。
プログラムの中にちょっとしたメモ書きを残したい場合が出てきます。 そういう場合には、//をコメントの先頭に付けて
//メモ書き
とします。この場合//の後ろから改行までをコメントとして扱います。 複数行に渡って、コメントを残したい場合は、
/*メモ書き
のてすと*/
と、コメントを/**/で挟む事によりその間にある文字全てを（改行も含めて） コメントとして扱います。
HTMLで言う所の、<!-- -->と同じですね。
当サイトないのサンプルの中にも幾つか、コメント行の書かれた部分がありますが、 必要無い部分ではあるので、その部分は削除して頂いても構いません。
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など色々有ります。
ここでの例はもっとも簡単な改造の例なのですが、 これを理解できれば応用範囲が広いので出来るようになっておくといいと思います。
自分のページに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>"
JavaScriptを使おうと自分のWebページに設置した時、 エラーウインドウが表示されてプログラムが動作しないという自体に直面する事があると思います。 これは、エラーウインドウに表示される内容を見て どの部分に問題があるか判断しなくてはならないのですが、初心者の方には結構難解な問題だと思います。
ここではよく起きやすいエラーについて紹介したいと思います。
(1)大文字・小文字を取り間違えている。英語の綴りを間違えている。＞参照
(2)全角スペースや全角文字がプログラムの中に紛れ込んでいる。＞参照
(3)文字列の"や'の閉め忘れ。＞参照
(4)プログラムの1行終了を示す、;(セミコロン)の付け忘れ。
上記のような原因でエラーが起きている場合は多いです。 エラーが起きた場合、どこの行で起きたのかを示してくれます。 その行の前後を調べてみるといいでしょう。
さて、複数のプログラムを設置した場合、 組み合わせによってはエラーなどが発生し、正常に動作しない場合があります。 このような場合、二つのプログラムの間で同じ変数名、関数名などを使用している為 エラーが起きている可能性があります。
正直、プログラミング経験の無い方にとっては
自分のサイトにJavaScriptを設置するに辺り、幾つか考えておくべき事があります。
1)設置するJavaScriptプログラムがどのブラウザに対応しているか。
2)JavaScriptに未対応、又は設置するJavaScriptに対応していないブラウザ向けの対策。
3)上記の事を踏まえ、どの環境でもページのコンテンツを謁見出来るようにする。
様々な環境の方々がインターネットを利用しています。 当然、全てのユーザーがJavaScript対応のブラウザ利用されているとは限りません。 またJavaScript対応のブラウザを利用されていても、 中にはJavaScriptの設定をオフにしている方々もいます。 このようなユーザーがJavaScriptの設置したページを閲覧した場合、 正常に表示されない事があります。 このような場合、<NOSCRIPT>タグを用いると、 警告メッセージや代わりのコンテンツを表示する事が出来ます。<NOSCRIPT>この<NOSCRIPT>タグは、Netscape2.0xでは未対応なので タグの中身のコンテンツも表示されてしまうのですが、 今現在 Netscape2.0xのユーザーはほとんどいないと思いますし、 また表示されても問題無い文章ですので、実用には問題無いと思います。
現在お使いのブラウザがJavaScriptに対応していない可能性があります。
このサイトを正常に閲覧する為にはJavaScript対応ブラウザをご利用されるか、
JavaScriptの設定をオンにして下さい。
</NOSCRIPT>
ブラウザにバージョンが存在するように、JavaScriptにもバージョンというのが存在します。
新しいバージョンになるにつれて、新機能が増えています。
主なブラウザ別対応は以下の通りになっています。
JavaScript1.0: Netscape2.0以上 / InternetExplorer3.0以上
JavaScript1.1: Netscape3.0以上 / InternetExplorer4.0以上
JavaScript1.2: Netscape4.0以上 / InternetExplorer4.0以上
JavaScript1.3: Netscape4.5以上 / InternetExplorer5.0以上
ボタンをクリックすると起動するJavaScriptプログラムがあります。 これをボタンを使わずにハイパーリンクへのクリックで起動させるようにするには、 "http:"のプロトコルの代わりに"javascript:"プロトコルを指定し、 その後ろに続けて関数名を記述します。
例えば、
<input type="button" onclick="parapara()">
をハイパーリンクタグに置き換えると、
<a href="javascript:parapara()">
となります。
一つのアクション(ページのロードやボタンのクリックなど）で、 複数のJavaScriptを同時に動かしたい場合は、セミコロン";"を挟んで記述します。
例えば、
<BODY onload="clock()">
という時計プログラムと、
<BODY onload="scrollmsg()">
という流れるメッセージプログラムの２つを同じページ内で使用したい場合があると思います。 その場合は、それぞれの関数名（onload=""の中の文字の事です）の後ろにセミコロンを付けて併記します。
<BODY onload="clock();scrollmsg()">
こう指定する事により、２つのプログラムを同じページ内で使用する事が出来ます。
HTMLに記述すべきJavaScriptプログラムを別ファイルに記述して、 それをHTMLファイル内から呼び出して利用する事が出来ます。 ファイルには.jsという拡張子を付ける必要があります。 なおそのファイルの中では<SCRIPT>タグでコードを囲む必要がありません。
これのメリットとしては、などがあります。
- 複数のページで同じスクリプトを使い回せる。
- 読みこまれた.jsファイルはキャッシュされるので同じプログラムを複数のページで使う時、余計なトラフィックを発生させない。
- 長いスクリプトの場合、別ファイルに記述する事によりHTMLを簡素化出来る。
対応している主なブラウザは、IE3.02以上、Netscape3.0以上などです。
なおインターネット上で使用する場合は、サーバー側の設定が必要です。
大手プロバイダーなどでは既に設定済みの所も多いです。
JavaScriptを一番早く覚えるコツは、やはり他の方のWebページに掲載してある JavaScriptを自分で色々と改造してみるという事だと思います。
プログラミング経験がある方は、 リファレンス本などを一読すればすぐ覚えられるかと思いますが、 未経験の方は、よほどの方でないと投げ出してしまうか、 もしくはサンプルが理解出来ても 自分の作りたいものを作れないという状況に陥りやすいです。
改造と言っても難しいモノではなく、 表示されている文章を書き換えたり、onClickをonMouseoverなどに変えたり するような単純な事から始めてみるといいと思います。