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

ポク太郎です。

HTMLCSSと組み合わせホームページを動的に変化させるプログラム言語JavaScript。閲覧者にクイズ出したり、ページ内のHTMLタグ検出し目次を作ったり、何かのツールを作ったり。

HTMLと組み合わせて使うのでデバッグが大変ですが、ご自身のページに色々な要素を簡単に追加できます。

JavaScriptデビューした管理人が、“JavaScript奮闘記”と題し何かを作り上げる作業をどハマりしながら、勘違いの失敗しながら綴っていきます。

JavaScriptはブラウザさえあれば一切アプリを必要としないのでプログラムの勉強を試すのにも多少向いています。※実際向いてるか?というとデバッグの観点で難しい面があります。

本ページはそのJavaScriptの事始め、最初に知るべき基本的な知識をまとめます。


JavaScriptの基本知識と概念&デバッグ環境

JavaScriptの基本知識と概念

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

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

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

JavaScriptの挙動とデバッグ環境

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

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

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

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

HTML内へのJavaScriptの書き方と実行される順番

HTML内にJavaScriptを記述するにはこう書きます。直接書かれた前者の書き方を“インラインスクリプト”、別ファイル参照する後者の書き方を“src属性を持った<script>タグ”と呼びます。

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

または、上記から最初と最後の<script>、</script>タグを取り除いたものをhoge.jsと別ファイルに保存し、<script>タグ内にsrc属性でパスを指定。

<script async src="/hoge.js">
</script>

例ではasync=非同期属性も追加しています。

実行される順番HTMLの上から順に<script>タグが出現した順。非同期属性が付いてる場合はその読み込みが完了した時点で実行。詳しくはこちら。

つまり、ページ内の全HTMLタグ読込完状態を前提に作られたJavaScriptは、<body>の最後、</body>タグ直前に書けばOK←全タグ読込済後に実行されるのでエラーで止まることが無い。

デバイスごとに挙動が異なりトラブルに陥りやすいonload関数を使用しなくてよいことに。

onload関数…DOM構築完了時を検出してそのタイミングで実行させる方法。

変数、配列、関数宣言の書き方

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

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

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>
	}

実際にページ内に表示させる

HTML内に<div id=”debug”></div>を置き、

	//id="debug"タグのCSSのdisplay属性を消す。非表示にさせたい場合は'none'を代入。
	document.getElementById("debug").style.display = '';
	//id="debug"タグにテキストを記述する。
	document.getElementById("debug").innerHTML = 'ほげほげ';

JavaScriptの基礎知識まとめ

JavaScriptの基礎知識まとめ
1概念と挙動HTML内に埋め込まれたスクリプト言語。エラーがあると止まってしまうのでJavaScriptデバッグ環境を確保。実行の順番は<script>タグの出現順。
2ローカルとグローバル変数の宣言方法ロカール宣言:関数内でvar a;
グローバル宣言:関数外でvar a;
3配列の宣言var arry = [];が最も推奨される書き方。ローカル、グローバルの定義は上の通常変数と同じ。
4文字列の値指定方法HTMLタグ内と被らないようシングルクォーテーションが基本。

自分がいざ作ろうとする際に「あれ?正しい記述ってどうだっけ?」といつも分からなくなるものを列挙しました。

結局は自分の忘備録ですが、プログラムは徹底的に同一の正しい表現、同一の正しい書き方に統一するのが基本。そこアヤフヤにするとすべて自分に跳ね返ってきます。

コメント

タイトルとURLをコピーしました