JavaScript入門
ＨＴＭＬとJavaScript
JavaScriptはHTMLと共に使用し、Webページを動的に変化させる事ができます。
PHPのようなサーバーサイドで実行するスクリプトではなく、端末側で実行します。したがって、サーバー側にあるデーターを引き出したりはできないのですが、端末側でページのリロードをする事なく画面を変更したり、ボタンを押した際にイベントを発生させたりする事ができます。
JavaScriptはＨＴＭＬの途中に埋め込んで使いますので、JavaScriptを使うためにはHTMLを知っておく必要があります。
PHPのようなサーバーサイドで実行するスクリプトではなく、端末側で実行します。したがって、サーバー側にあるデーターを引き出したりはできないのですが、端末側でページのリロードをする事なく画面を変更したり、ボタンを押した際にイベントを発生させたりする事ができます。
JavaScriptはＨＴＭＬの途中に埋め込んで使いますので、JavaScriptを使うためにはHTMLを知っておく必要があります。
JavaScriptの埋め込み
HTML上にJavaScriptを埋め込むためには、
<Script Language="JavaScript">
</Script>
で、JavaScriptを囲みます。
ただし、JavaScript非対応ブラウザで組み込むと、JavaScriptが丸見えになってしまうので、実際には
<!--
//-->
でさらに囲み、HTMLではコメント文とみなすようにします。
<Script Language="JavaScript">
</Script>
で、JavaScriptを囲みます。
ただし、JavaScript非対応ブラウザで組み込むと、JavaScriptが丸見えになってしまうので、実際には
<!--
//-->
でさらに囲み、HTMLではコメント文とみなすようにします。
関数
JavaScriptをＨＴＭＬ中に埋め込むと、ページを表示する際にそのまま実行されます。
ただし、大抵は関数にしておいて、ボタンを押すなどの何らかのアクションがあった際に呼び出されます。この場合、<head></head>の間にJavaScriptの宣言を書き、その中でfunctionを定義します。
function 関数名 (引数１, 引数２, …） {
処理
}
のように書きます。
ただし、大抵は関数にしておいて、ボタンを押すなどの何らかのアクションがあった際に呼び出されます。この場合、<head></head>の間にJavaScriptの宣言を書き、その中でfunctionを定義します。
function 関数名 (引数１, 引数２, …） {
処理
}
のように書きます。
オブジェクトとプロパティ
JavaScriptでは、VisualBasicのように、「オブジェクト」や「プロパティ」という概念があります。
たとえば、
document.input_form.subject
とすると、今表示されているドキュメント上にある、input_formという名のフォーム上にある、subjectという入力フォーム（＝オブジェクト）を示します。また、
document.input_form.subject.value
とすると、subject入力フォームの値（＝プロパティ）の事をさします。
つまり、
document.input_form.subject.value=1;
とすると、subjectフォームの値を１にする事ができるし、
if (document.input_form.subject.value==1)
とすると、もし１が入力されれば……という判断をする事もできます。
たとえば、
document.input_form.subject
とすると、今表示されているドキュメント上にある、input_formという名のフォーム上にある、subjectという入力フォーム（＝オブジェクト）を示します。また、
document.input_form.subject.value
とすると、subject入力フォームの値（＝プロパティ）の事をさします。
つまり、
document.input_form.subject.value=1;
とすると、subjectフォームの値を１にする事ができるし、
if (document.input_form.subject.value==1)
とすると、もし１が入力されれば……という判断をする事もできます。
This
This、つまり「この…」です。たとえば、this.form とすれば「今のフォーム」という意味になります。
<form name="input_form">
<input type="text" name="subject" OnChange="ChangeSubject(this.form)">
</form>
とした場合の、this.formは、document.input_formという意味になります。
また、
<form name="input_form">
<input type="text" name="subject" OnChange="ChangeSubject(this)">
</form>
とした場合のthisは、document.input_form.subjectという意味になります。
これにより、いちいち document.……という長ったらしいオブジェクト名を書かなくて済みます。
<form name="input_form">
<input type="text" name="subject" OnChange="ChangeSubject(this.form)">
</form>
とした場合の、this.formは、document.input_formという意味になります。
また、
<form name="input_form">
<input type="text" name="subject" OnChange="ChangeSubject(this)">
</form>
とした場合のthisは、document.input_form.subjectという意味になります。
これにより、いちいち document.……という長ったらしいオブジェクト名を書かなくて済みます。
変数
変数はPHPに似ていますが、頭に＄をつけません。ＰＨＰとJavaScripｔはしばしば併用して使われますが、変数名を混同してしまう事が多いようです。もし、JavaScriptエラーが出たら、頭に不要な＄がついてないかどうか確認してください。
変数に、型はありません。文字列、数値は自動判断します。
しかし、時にはこの自動判断が誤動作の原因になります。
例１）
if (subject==0)
この場合、subjectに実際に「０」が入っていても、「真」にならない場合があります。なぜなら、JavaScriptではPHPのような、変数の型を比較文で随時都合の良いように識別するのではなく、代入する際にすでに決定されているからです。
つまり、いったん文字としての’０’が代入されてしまうと、if文ではあくまで文字列の’０’であり、数値の０ではないのです。
例２）
goukei = input1 + input2;
この場合で、input1に１、input2に２が入っている場合、結果として３が期待できます。しかし、実際には「１２」になります。バグなのでしょうか。
実は、input1、input2に文字列としての’１’、’２’が入っている場合、「＋」記号は文字列の連結になってしまいます。
そこで、型を変換する命令を使います。
・文字列→数値
subject=Number(subject)
とする事によって、変数subjectに入っていた文字列’０’が、数値０に変換されます。
また、eval関数で代用できます。evalは、引数をJavaScriptのプログラムとみなす関数ですが、subject=eval(subject)とした場合に、subjectに文字列の'１'が入っていれば、数字の１が返ります。
・数値→文字列 string
数値を文字列に変換する場合、
subject=string(subject)
とする事によって、subject変数を明示的に文字列に変換する事ができます。
変数に、型はありません。文字列、数値は自動判断します。
しかし、時にはこの自動判断が誤動作の原因になります。
例１）
if (subject==0)
この場合、subjectに実際に「０」が入っていても、「真」にならない場合があります。なぜなら、JavaScriptではPHPのような、変数の型を比較文で随時都合の良いように識別するのではなく、代入する際にすでに決定されているからです。
つまり、いったん文字としての’０’が代入されてしまうと、if文ではあくまで文字列の’０’であり、数値の０ではないのです。
例２）
goukei = input1 + input2;
この場合で、input1に１、input2に２が入っている場合、結果として３が期待できます。しかし、実際には「１２」になります。バグなのでしょうか。
実は、input1、input2に文字列としての’１’、’２’が入っている場合、「＋」記号は文字列の連結になってしまいます。
そこで、型を変換する命令を使います。
・文字列→数値
subject=Number(subject)
とする事によって、変数subjectに入っていた文字列’０’が、数値０に変換されます。
また、eval関数で代用できます。evalは、引数をJavaScriptのプログラムとみなす関数ですが、subject=eval(subject)とした場合に、subjectに文字列の'１'が入っていれば、数字の１が返ります。
・数値→文字列 string
数値を文字列に変換する場合、
subject=string(subject)
とする事によって、subject変数を明示的に文字列に変換する事ができます。
イベント
JavaScriptでは、VisualBasicのように「イベント」によって命令を実行させる事ができます。
例）
<input type="text" name="subject" OnChange="ChangeSubject()">
の場合、入力フォームsubjectが変更されたら、ChangeSubject()関数が実行されます。
<input type="Button" name="A" value="ここを押せ！" OnClick="PushButton()">
の場合、ボタン「A」が押された場合、PushButton()関数が実行されます。
OnClickをalertを使って、ボタンを押したときにメッセージを出すことができます。
例）
<input type="text" name="subject" OnChange="ChangeSubject()">
の場合、入力フォームsubjectが変更されたら、ChangeSubject()関数が実行されます。
<input type="Button" name="A" value="ここを押せ！" OnClick="PushButton()">
の場合、ボタン「A」が押された場合、PushButton()関数が実行されます。
OnClickをalertを使って、ボタンを押したときにメッセージを出すことができます。
| 例） |
同様に、confirmを使うことでユーザーに選択をさせる事ができます。
| 例） |
<Script Janguage="JavaScript">
<!--
function au(){
alert("いきなりかい！");
}
function sousin(){
if (!confirm("本当に送信するんですか？")){
alert("やーめたっと");
}else{
alert("じゃあ送信するね・・って何を？");
}
}
//-->
</Script>
制御命令
制御命令は、PerlやPHPと同じ、Ｃ系の制御命令を使う事ができます。ただし、PHPのような変数の頭に$はつけません。
・for
for (cnt=0;cnt<10;cnt++) { … }
この場合、変数cntが０から９までの間、｛｝内の命令が実行されます。
・while
while(cnt<10) { … }
この場合、cntが１０未満の場合、｛｝内の命令が実行されます。
・if
if (cnt==1){ … }
この場合、cntが１なら、｛｝内の命令が実行されます。ただし、JavaScriptでは、数値と文字列は代入された地点で区別されるため、数値と文字列を把握して使わないと、期待通りの結果が得られない事があります。
また、goto文はありませんので、プログラムを強制的に分岐させる事はできません。
・for
for (cnt=0;cnt<10;cnt++) { … }
この場合、変数cntが０から９までの間、｛｝内の命令が実行されます。
・while
while(cnt<10) { … }
この場合、cntが１０未満の場合、｛｝内の命令が実行されます。
・if
if (cnt==1){ … }
この場合、cntが１なら、｛｝内の命令が実行されます。ただし、JavaScriptでは、数値と文字列は代入された地点で区別されるため、数値と文字列を把握して使わないと、期待通りの結果が得られない事があります。
また、goto文はありませんので、プログラムを強制的に分岐させる事はできません。
スタイルシートとの連動
JacaScriptを使って、スタイルシートの値（プロパティ）を動的に変化させると、ユーザーのキー操作に応じて画面を動的に（しかも大幅に）変更させる事ができます。
|
ソース
function modechange(mode) {
obj = document.getElementById("belt");
if (mode==1){
alert("オレ、参上！！");
obj.className="sword";
}
if (mode==2){
alert("僕に釣られてみる？");
obj.className="rod";
}
if (mode==3){
alert("オレの強さにお前が泣いた");
obj.className="ax";
}
if (mode==4){
alert("スタイルシートを切り替えてもいいよね 答えは聞いてない");
obj.className="gun";
}
}
ソース
function leftchange(mode) {
obj = document.getElementById("left");
if (mode==1){
alert("サイクロン");
obj.className="cycron";
document.w.hidari.value=1;
}
if (mode==2){
alert("ヒート");
obj.className="heat";
document.w.hidari.value=2;
}
if (mode==3){
alert("ルナ");
obj.className="runa";
document.w.hidari.value=3;
}
}
function rightchange(mode) {
obj = document.getElementById("right");
if (mode==1){
alert("ジョーカー");
obj.className="joker";
document.w.migi.value=1;
}
if (mode==2){
alert("メタル");
obj.className="metal";
document.w.migi.value=2;
}
if (mode==3){
alert("トリガー");
obj.className="toriger";
document.w.migi.value=3;
}
}
function hen() {
hidari=document.w.hidari.value;
migi=document.w.migi.value;
formname="";
if (hidari==1){
formname="サイクロン";
}
if (hidari==2){
formname="ヒート";
}
if (hidari==3){
formname="ルナ";
}
if (migi==1){
formname+="ジョーカー";
}
if (migi==2){
formname+="メタル";
}
if (migi==3){
formname+="トリガー";
}
alert(formname);
}
PHPとの連動
チェックボックスのチェックを全てチェックされたかどうか、あるいは、全てをチェックする／解除する場合は、
document.elements[cnt].name
がチェックボックス名かどうかで判別します。しかし、チェックボックスの数や名前が動的に変化する場合判別は難しく、ソースも複雑化します。JavaScriptのソースが複雑になると、その分だけエラー（○○はNullまたはオブジェクトではありません）が出る可能性が高くなるし、JavaScriptのエラーの原因を調べるのは困難です。
それを、もし
document.（チェックボックス名）.checked=true;
を必要な数分だけ書ければ、ループするより見た目シンプルになり、デバッグも楽になります。
そこで、PHPでJavaScriptソースを生成させます。チェックボックス名をPHPが動的に生成し、チェックボックスをオンにする処理も、PHPがループで生成します。慣れるまではPHPとJavaScriptという似て異なる言語が混在してややこしいのですが、全てをJavaScriptで判断するのに比べると比較的シンプルになります。
ただし、あまりボタンが多い時にこのテクニックを使うと、HTMLソースが異常に長くなり、ブラウザによっては「ページが表示できません」になる可能性があります。
document.elements[cnt].name
がチェックボックス名かどうかで判別します。しかし、チェックボックスの数や名前が動的に変化する場合判別は難しく、ソースも複雑化します。JavaScriptのソースが複雑になると、その分だけエラー（○○はNullまたはオブジェクトではありません）が出る可能性が高くなるし、JavaScriptのエラーの原因を調べるのは困難です。
それを、もし
document.（チェックボックス名）.checked=true;
を必要な数分だけ書ければ、ループするより見た目シンプルになり、デバッグも楽になります。
そこで、PHPでJavaScriptソースを生成させます。チェックボックス名をPHPが動的に生成し、チェックボックスをオンにする処理も、PHPがループで生成します。慣れるまではPHPとJavaScriptという似て異なる言語が混在してややこしいのですが、全てをJavaScriptで判断するのに比べると比較的シンプルになります。
ただし、あまりボタンが多い時にこのテクニックを使うと、HTMLソースが異常に長くなり、ブラウザによっては「ページが表示できません」になる可能性があります。
ソース
function allcheck(fm){
<?
for ($cnt=0;$cnt<10;$cnt++){
?>
fm.ckbx<? print $cnt; ?>.checked=true;
<?
}
?>
}
function allkaijo(fm){
<?
for ($cnt=0;$cnt<10;$cnt++){
?>
fm.ckbx<? print $cnt; ?>.checked=false;
<?
}
?>
}
日付、時刻の取得
JavaScriptで日付時刻が取得できます。
today = new Date();
としておき、todayオブジェクトの要素から、年月日時分秒を取得します。
today = new Date();
としておき、todayオブジェクトの要素から、年月日時分秒を取得します。
| 現在の日付のオブジェクトを取得する | today = new Date(); |
| 年を取得 | today_year = today.getYear(); |
| 月を取得 | today_month = today.getMonth() + 1; |
| 分を取得 | today_day = today.getDate(); |
| 時を取得 | now_hours = today.getHours(); |
| 分を取得 | now_minutes = today.getMinutes(); |
| 秒を取得 | now_seconds = today.getSeconds(); |
月は０～１１が返りますので、実際に使うためには１を足します。
日付を取得したからといって、サイトのトップページとかに
と表示させてもあまり意味がありません。というのも、ここに表示されている時計は端末の時計の時刻であり、WindowsXPなら右下に表示されている時刻と同じだからです。JavaScriptは基本的にクライアントサイトスクリプトなので、AJAXを使わない限りサーバー時計を取得する事ができません。
という理由でJavaScriptを使って現在日付時刻を表示しているサイトは痛いサイトだという人すらいます。 「ゆうすけのホームページ」なる痛いサイトの見本にも今日の日付が表示されてたりします。 しかしながら、果たして本当にJavaScriptで日付を出すのは痛いサイトなのでしょうか？私は一概にそうだとも思えません。 日付や時刻をそのまま表示させる事はあまり意味はありませんが、時刻によって「おはようございます」「こんにちは」「こんばんは」と表示を切り替えたり、 月によって「寒くなってきましたね」みたいに表示をさせると、ちょっと気が利いてていい感じのサイトになると思います。
例）
こういうのは見に来た人にはどうでもいい表示なのですが、作る方がけっこう楽しかったりします。 実際、私などこういう表示に凝りだしたおかげでJavaScriptを覚えるキッカケにもなりましたし・・・。 それに見る人にとってどうでもいいような事でも、それを誰かに見せる事が作る人には面白かったりします。 また、単に日付を表示するだけでは何の意味もありませんが、仕事上で作るプログラムに日付時刻を取得しなければならない事は頻繁にあり、 日付時刻を取得してそれを利用する方法を知っておく事は、あとあと役に立ちます。
日付を取得したからといって、サイトのトップページとかに
と表示させてもあまり意味がありません。というのも、ここに表示されている時計は端末の時計の時刻であり、WindowsXPなら右下に表示されている時刻と同じだからです。JavaScriptは基本的にクライアントサイトスクリプトなので、AJAXを使わない限りサーバー時計を取得する事ができません。
という理由でJavaScriptを使って現在日付時刻を表示しているサイトは痛いサイトだという人すらいます。 「ゆうすけのホームページ」なる痛いサイトの見本にも今日の日付が表示されてたりします。 しかしながら、果たして本当にJavaScriptで日付を出すのは痛いサイトなのでしょうか？私は一概にそうだとも思えません。 日付や時刻をそのまま表示させる事はあまり意味はありませんが、時刻によって「おはようございます」「こんにちは」「こんばんは」と表示を切り替えたり、 月によって「寒くなってきましたね」みたいに表示をさせると、ちょっと気が利いてていい感じのサイトになると思います。
例）
こういうのは見に来た人にはどうでもいい表示なのですが、作る方がけっこう楽しかったりします。 実際、私などこういう表示に凝りだしたおかげでJavaScriptを覚えるキッカケにもなりましたし・・・。 それに見る人にとってどうでもいいような事でも、それを誰かに見せる事が作る人には面白かったりします。 また、単に日付を表示するだけでは何の意味もありませんが、仕事上で作るプログラムに日付時刻を取得しなければならない事は頻繁にあり、 日付時刻を取得してそれを利用する方法を知っておく事は、あとあと役に立ちます。
ブラウザ依存
JavaScriptを使う限り、ブラウザ依存の問題がどうしてもつきまどいいます。というのも、JavaScript自体に仕様が曖昧な部分があり、各ブラウザメーカーが独自に解釈してる部分があるためです。また、Microsoftで独自に拡張された命令が存在し、いまのところブラウザによっては期待通りの動作をしなかったり、左下に黄色い！マークが出てしまったりします。この辺の仕様の統一は、今後の課題といっていいでしょう。
今は、InternetExplorer、FireFox、Operaなどの各ブラウザを全てインストールして、それぞれに通用するように記述するか、ブラウザを判断して処理を切り替えるといった処理が必要になります。（サファリまで対応するとなると結構大変ですが・・・）
今は、InternetExplorer、FireFox、Operaなどの各ブラウザを全てインストールして、それぞれに通用するように記述するか、ブラウザを判断して処理を切り替えるといった処理が必要になります。（サファリまで対応するとなると結構大変ですが・・・）
このページの先頭へ
広告