初心者のJavaScript あとがき [ ARTEMIS ]

月額972円（税込）からのLTE「OCN モバイル ONE」【NTTコミュニケーションズ】

2008.02.07 改

あとがき

とりあえずここまでで、初心者むけの解説を終りにします。
初心者向けにしては余計な事も書きすぎましたが、覚えると言う事は直線を真っ直ぐ進むわけではないと思います。ですから必要な時に必要な場所を読み返したりする事もあると思って書いています。

覚える為には、サンプルを真似る、改造する、自分で書く疑問に思ったら解決する、実験を繰り返すなどをする事が必要です。色々やっているうちに、だんだん自分の物になってくると思います。

あとJavaScriptはNetscapeが標準語でMicrosoftが方言という考え方は捨ててください。微妙に違いがある事は確かに面倒ですが、どっちが標準だろうが方言だろうがどちらもシェアは広いのでこの『２つで通用する物が標準』くらいに考えて置いて下さい。
では頑張って、より良いホームページをお作りください。m(__)m

特殊文字

top

javascript内で扱われる特殊文字を解説していなかったのでここで書いておきます。特殊文字は、直接記述するとコードと間違って解釈されてしまう物や特殊な意味を持たせた記述文字です。

\b バックスペース
\f フォームフィード
\n ラインフィード (改行)
\r キャリッジリターン
\t 水平タブ (ctrl + i キー)
\' シングルクォーテーション (')
\" ダブルクォーテーション (")
\\ 円記号 (\)

この様にシングルクォーテーション内にシングルクォーテーションをどうしても使う場合等は \' のように書きます。また、\ という文字はこの特殊文字を構成させる記号なので \ 自体を表現したい時は \\ と書きます。
\'と \" は最低でも覚えておいてくださいね。

整理整頓

top

◆変数・関数名
変数のページで書いていますが、変数の名前は後で見直す時に直感的に理解しやすい名前にしてください。覚え始めの頃は次から次へと新しい事を覚えるので、どんどん忘れて行きます。あとで見て、よくこんなプログラムが書けたなぁと思う事さえありますから。私の様に$を先頭に付けるのがほんとに良いかどうかわかりません、あなたなりの工夫をしてみてください。

◆コメントラベル
プログラムが大きくなればなるほど、全体を見渡しにくくなります。関数の数も増え、関数の中でのステートメントも増えます。どこからどこへ処理が渡っているのか? この関数は何をする関数だったっけ? など、プログラム中も、後で見返す時もわかりやすくした方が便利です。ですからコメントラベルを付ける癖を付けましょう。
ここで言うラベルとは、ステートメントのラベル(label)ではありません。

・ある処理をまとめて、コメントラベルを付けます。
/*------------------ クッキー処理 ---------------
$cookies :クッキー全体
$cookie :目的のクッキー
getcook():クッキー取得
setcook():クッキー発行
getcookdate:クッキー用日付取得作成
-------------------------------------------------*/
ここにクッキー関係の処理(関数や変数など)

・小さな処理に付けます。
//◆処理8 ここでブラウザを分ける ieは doie()、その他 donn()
if(navigator.useragent・・・・){ doie(); }else{ donn(); };

◆セミコロン
行末全部ではなく、ステートメントの終りにセミコロン(;)を付けます。
if(条件){
ステートメント;
ステートメント;
}
このセミコロンを付けなくてもjavascriptは動作します。だから付けなくても構いません。ステートメントの終りを明確にする為には付けた方が良いかも知れません。セミコロンを付けていると、ftp転送などの繰り返しで改行が狂った場合に、もしかしたら役に立つかも。。
if(条件){ ステートメント; ステートメント; }
これは成り立ちますので。

◆インデント
htmlを記述する上でも、見やすい理解しやすいコーディングをする為にインデント(字下げ)を行いますね? これと同様に、スクリプトのコーディングでもわかりやすくインデントをします。また、if文などでの複数ステートメントをまとめる {} 等を見やすく整理します。基本的には自分が見やすければそれでokです。

function dochange(){
    if(      )
    {    ステートメント;
         ステートメント;
    }
    else
    {    ステートメント;
         ステートメント;
    }
}

確認の仕方

top

プログラムを組んでいるとエラーが出たり、動かなかったり、思い通りの値のコントロールができていなかったりと様々なトラブルにみまわれます。もっとも単純な方法でどこまでプログラムが解釈されているか、あるいはその時点での値はどうなっているかを調べる方法として、私はよくalert()を使ってチェックしています。
例として

<script language="javascript">

$name = "";
alert(''); // #1
function getname(){
alert(''); // #2
	if( 条件 ){
	alert(''); // #3
	}else{  alert(''); // #4   }

	setname($name);
}

function setname( _n){
alert(); // #5
}
</script>

#1 alert(変数) の様にして、変数の値をアラートさせてみます。何らかの記述ミスで変数の代入ができてない場合や配列変数などの場合には定義ミスがあったりしますので。また、scriptタグを記述ミス等(scirptと書いてしまう等)ではこのjavascript自体が読み込まれないので読み込まれた時点で alert()が起動するはずなのに起動しないと言う事でミスが見つかります。

#2 alert("ok") などと記述します。これでこの関数が呼び出されているのか? が確かめられます。呼び出しているのにこのアラートが表示されない場合は、何らかの記述ミスがあるかもしれません。よく見直してみてください

#3 #4 これは if()条件分岐内に書いています。条件が2択になっていれば、どちらかが必ずアラートします。呼び出す時にかならず if(条件)が成立するはずなのに #4 のアラートが出る場合は条件が整わないと言う問題が見つかります。また、このif文内で変化する変数の値を調べたりこの時点での情報のチェックにも使います。

#5 ここの関数は getname()の最後で呼び出されています。その時に引数ももらっていますね? まずアラートが起動すれば、この関数の呼出しはされていると言う事になります。引数の値がどうなっているのか?のチェックは alert(_n) とすれば、ここの関数が受け取った引数の値がアラートされます。

この様に、一ヶ所一ヶ所、怪しいかな?と思われる場所に alert() を書いてはチェックしての繰り返しで間違っている場所を絞り込んで行きます。例では、5ヶ所に書いていますが一遍に5ヶ所も書くと、後で消し忘れたりしますので絞り込むように、alert() を書いてチェックしてみてください。

FireFoxなどでは空のalert()は『引数がない』って事無視されます。
空でもalert('') の様に書かないとalert() は起動しません。
ま、Netscape系はエラーコンソールがあるので alert()でチェックする必要はあまりないですが。

◆標準ブラウザ以外での確認
Netscape、FireFoxをメインで使っている方はIEで、IEをメインで使っている方はNetscape、FireFoxで確認する事を心がけてください。ついつい自分がメインで使っているブラウザのみで有効なスクリプトを書いている場合等もありますし。 netscapeもieも最新版が無料で手に入るわけですから、hp製作者はその両方での確認くらいしましょう。 hpは自分の趣味で作っているとしても、表に出して他人に見せるのが目的でしょうから hp製作者は無料でできる確認くらいは怠らないようにしましょうね。わざわざお金を掛けてとは言いませんから。
また、エラーのでない環境を書いておくとか、確認済みのブラウザを書いておくとかそういう配慮も必要な場合もあります。

←前

次→

専用ページから申し込むと
So-netより高い３万円CB

案ずるより産むが易し
使ってみれば疑問も解決

XREA+ (plus) 206円/月
( お試し7日間 )

CORE SERVER 428円/月
( お試し15日間 )

ロリポップ 270円/月
( お試し期間10日間 )

ヘテムル 1620円/月
( お試し期間15日間 )

さくら 129円/月
( お試し期間2週間 )

無駄な高額ドメイン管理料金払ってませんか？

バリュードメイン
ムームードメイン

【じゃらん】国内15,000軒の宿をネットで予約OK！5％ポイント還元！