JavaScript奮闘記始めました｜最初に覚える基本的ルール覚書ページ

JavaScriptの基本知識と概念

JavaScriptとはホームページの正体であるHTML内に埋め込まれたプログラム。

ページ閲覧者がブラウザでHTMLを開くと、そこには必要なJavaScriptのソース、もしくはその.jsファイルのURLが書かれており、ブラウザがそのプログラムを実行。

もちろんWindowsOSもJavaScriptを実行できるが、ホームページ作者が閲覧者に提供するのはもっぱら上記。

JavaScriptの挙動とデバッグ環境

JavaScriptはインタープリタ言語で、ブラウザ、つまりは閲覧者側のデバイス上で翻訳され実行。

文法上のスペルミス一つでもあるとそこで停止。うんともすんとも言わなくなります。つまり、作る側からすると何が不満なのか分からないので非常に困ります。

それを解決するのが各所から提供されるデバッグ環境で、筆者が好んで使うのは以下。

こーいうのはたくさんあり、好みのものをGoogleで探して確保しておく必要があります。

デバッグ時にはキャッシュクリア忘れるな

ホームページに求められるのはページの表示速度。そのため容量の大きなJavaScriptには長期間のキャッシュ保持期間を設定することが多いです。

ソースを改変しアップロード→いつものブラウザでデバッグ→直した筈なのに意味不明な動き。

つまり、JavaScriptをアップロードし直したつもりなのに、ブラウザにキャッシュされたものが動いてしまうケース。

なので、

ローカル変数とグローバル変数の宣言書き方

下の例ではsがグローバル変数宣言、teihen、takasaがローカル変数宣言。

var s;
s = menseki(20,30);
function menseki(teihen,takasa) {
		var teihen;
		var takasa;
		return teihen * takasa;
}

配列の宣言と挙動

配列の宣言はvar aan = [];と記述。これが先述のデバッグ環境で推奨される書き方。最大要素数の設定は不要の模様。ローカル、グローバルの定義は上の通常変数と同じ。

以下は配列に設定されたキーワードがURL内に含まれる場合に1を返す関数です。

var aan = [];
aan[0] = 'oikawanao';
aan[1] = 'tsutsumisayaka';
aan[2] = 'nagaseai';
aan[3] = 'ootsukasaki';
var = judge;
judge = search(url);
function search(url) {
			var find = 0;
	for (var i=0;i<aan.length;i++){
		if( url.indexOf(aan[i]) != -1 ){
			find = 1;
		}
	}
			return find;
}

シングルクォート’とダブルクォーテーション”の使い分け

HTMLタグを操作することを目的とした言語なので、例えば内部リンクタグを変数に代入することも。
<a href=”/code/js/javascript-1st.html”>JavaScript奮闘記始めました</a>

なので、文字列の指定にはシングルクォーテーション”とダブルクォーテンション“”両方が使用可能。

一般的にHTMLタグ内はダブルクォーテンション””を使うので「JavaScript内はシングル”を使う」と自分でルールを決めておいた方が無難。

var aan = [];
aan[0] = 'oikawanao';
aan[1] = 'tsutsumisayaka';
aan[2] = 'nagaseai';
aan[3] = 'ootsukasaki';
var = link[];
	for (var i=0;i<aan.length;i++){
link[i] = '<a href="/favarite/'+aan[0]+'.html">色褪せぬ伝説のスター名鑑 No.'+i+'</a>';</script>
	}

混乱必至のJavaScriptの演算子

中途半端な便利を目指した結果か、演算子が混乱を招く仕様となってるのがJavaScriptの特徴。

勘違いを起こしやすいインクリメント演算子i++や代入演算子+=も使用可能。

中でも、混乱の原因となるのが等価演算子==。文字列の数値リテラルとNumber型の数値を等価判定できるもの。それを除外するのが厳密等価演算子===。変換なしで等価な場合のみ成立。

インタープリタ故の文末記号必須

文末記号は;。

;があることで空白、改行、タブが無視できます。WordPressのプラグインなどで圧縮機能がありますが、文末が明示されてるため無駄な空白文字を削除してロードさせられます。CSSも同じ。

ただし、それにまつわるコメントアウト記号//は要注意。コメントアウトの位置が悪く、ブラウザのバージョンアップによりJavaScriptが動かなくなってたなどのトラブルも。if文の途中など。

なのでコメントアウト//は必ず文末記号;の後。