ソースコードで学ぶWebプログラミング

javascriptプログラミングの基礎

javascriptは、WebサイトのUI(ユーザーインターフェイス)開発やUX(ユーザーエクスペリエンス)開発に利用されるスクリプト言語です。動的にhtmlを書き換えたり、cssの変更を行なうことが出来ます。

javascriptの記述箇所と読み込む方法

javascriptでは、主にブラウザで稼働するプログラムを作成します。ブラウザに表示されるHTMLタグ内に記述する方法と、別ファイルとして保存して、HTMLタグで読み込む方法があります。

HTML内での記述位置は、一般的に</body>近くに配置する事が多いです。理由としては、javascript内でHTML要素を操作する場合、HTMLパース後でなければうまく動かないため、対象のHTML要素よりも下に記述します。

最上部の配置でも動作するように、javascript側でHTMLパース後に処理を行なうコーディングにすることも出来ます。またdefer属性を使えば、HTMLパース後のDOMツリーが構築された後に実行させる事ができます。

/* HTMLに埋め込む */ <script> /* ここにコードを記述 */ </script> /* 別ファイルに記述して読み込む */ <script src="ファイルパス" charset="UTF-8"></script> /* HTMLパース後に実行 */ <script> window.addEventListener('load',function(){ /* ここにコードを記述 */ }); </script> /* DOMツリー構築後、記述順に実行される */ <script src="ファイルパス1" charset="UTF-8" defer></script> <script src="ファイルパス2" charset="UTF-8" defer></script>

javascriptの変数、配列、連想配列の扱い方

javascriptの基本処理となる変数の扱いです。javascriptの変数には、数値や文字列、論理値などの型があり、オブジェクトになっています。配列や連想配列もオブジェクトになっていて、オブジェクトは、その型特有のプロパティやメソッドを利用できます。

プロパティやメソッドは、「.」でアクセスできます。例えば、var a= []; とした場合、変数は配列になるので、a.length のようなプロパティや、a.push() などのメソッドが使えるようになっています。

/* 数値 */ var n = 100; /* 16進表記の文字列に */ n = n.toString(16); /* 文字列 */ var s = 'もじ'; /* 文字列の結合 */ s = s + 'れつ'; s += 'れつ'; /* 文字列内の文字列を置換する 例では改行コードを除去 */ s = s.replace(/[\r\n]/g,''); /* 文字列を区切り文字で配列に */ var a = s.split(''); /* 配列 */ var a = ['B','C']; /* 配列の最初に追加 */ a.unshift('A'); /* 配列の最後に追加 */ a.push('D'); /* 配列の最初を除去して取り出し */ var a1 = a.shift(); /* 配列の最後を除去して取り出し */ var a4 = a.pop(); /* 配列を結合 */ var a = ['A','B'],b = ['C','D']; var c = a.concat(b);//['A','B','C','D'] /* 配列から抜き出し 0から数えて第1引数から第2引数未満まで */ var a = ['A','B','C','D']; var b = a.slice(1, 2);//['B'] /* 連想配列オブジェクト */ var a = {key1:'value1',key2:'value2'}; /* 連想配列に追加 */ a.key3 = 'value3'; /* 配列、連想配列のキーリストを取り出す */ var keys = Object.keys(a); /* 配列、連想配列の値リストを取り出す */ var values = Object.values(a); /* 配列を区切り文字で結合して文字列に */ var s = a.join(',');

javascriptの制御構文

条件ごとに処理を変えたり、繰り返し処理を行いたい時の制御構文です。javascriptでは、for() 内でカウンタ変数を var で宣言します。厳密には配列ではない変数をループ処理させる場合は、.length で要素数を取って要素数で回します。

/* 条件で処理を分ける */ if (A) { /* Aの場合の処理 */ } else if (B) { /* Bの場合の処理 */ } else { /* いずれも一致しない場合の処理 */ } /* 三項演算子 qがtrueでA、falseでB */ var q = true; var r = q ? 'A': 'B'; /* 指定回数、繰り返し同じ処理を行わせる */ for (var i=0;i<10;i++) { } /* 配列、連想配列を順番に処理する */ for (var i in a) { /* i がキーに */ var val = a[i]; } /* 連想配列に不要な要素がある場合 */ for (var i=0,len=a.length;i<len;i++) { var val = a[i]; } /* 条件分岐 */ switch (x) { case 'A': /* Aの場合の処理 */ break; case 'B': /* Bの場合の処理 */ break; default: /* いずれも一致しない場合の処理 */ }

javascriptの関数とクラスの作り方

javascriptでは、関数もオブジェクトになっています。関数オブジェクトには、プロパティやメソッドを設定できるので、オブジェクト指向プログラミングのクラスを作成できます。オブジェクト指向で言うところの継承元に prototype プロパティでアクセスできるので、メソッドは prototype プロパティへ設定するのが一般的です。

/* 関数を定義 */ var funcA = function(){ /* 処理内容 */ } /* 関数を実行 */ funcA(); /* 関数を登録 elは対象のエレメント */ el.onclick = funcA; /* クラスとコンストラクタを定義 */ var ClassA = function(){ /* メンバ変数を定義 */ this.propA = ''; } /* メソッドを定義 */ ClassA.prototype.methodA = function(){} /* インスタンスを作成 */ var CLSA = new ClassA();

javascriptでHTMLエレメントを選択する方法

javascriptは、一般的にブラウザで動作するプログラムなので、ブラウザ上に表示されるHTMLがパース(解析)され、利用しやすい状態となったもの(DOM)を操作できます。

DOMの中には、そのWebページ上のタグ構造がすべて入っているため、操作する場合は、対象とするHTMLエレメントを特定する必要があります。具体的には、documentやエレメントのメソッドを利用してエレメントを選択し、プロパティやメソッドで操作します。

/* id属性で取得 */ var el = document.getElementById('id1'); /* class属性で取得 複数で返す */ var els = document.getElementsByClassName('class1'); /* タグ名で取得 複数で返す */ var els = document.getElementsByTagName('h2'); /* CSSセレクターで要素を1つ取得 */ var el = document.querySelector('#id1'); /* エレメント内からCSSセレクターで要素を1つ取得 */ var el = el.querySelector('#id1'); /* CSSセレクターで要素をすべて取得 */ var els = document.querySelectorAll('p'); /* エレメント内からCSSセレクターで要素をすべて取得 */ var els = el.querySelectorAll('p'); /* 複数で取得した場合、for() と length で配列操作 */ for (var i=0,len=els.length;i<len;i++) { /* エレメント */ var el = els[i]; }

javascriptでHTMLエレメントの判定をする方法

javascriptのDOM操作では、対象となるエレメントを特定する必要がありますが、id属性やclass属性だけでは区別できない場合もあります。特に動的な動作を行わせる場合は、エレメントの状態での判定も必要となってきます。

/* 属性値の有無で判定 */ if (el.hasAttribute('checked')) {} /* タグ名(大文字)で判定 */ if (el.tagName=='DIV') {} /* id属性で判定 */ if (el.id=='id1') {} /* name属性で判定 */ if (el.name=="name1") {} /* クラスの状態で判定 */ if (el.className=='current') {} /* 属性を取得して判定 */ if (el.getAttribute('flag1')) {} /* 要素全体で判定 */ var c = el.outerHTML; if (c=='要素全体のタグ') {}

javascriptでHTMLエレメントの属性を変更する方法

Webプログラミングでは、ユーザーのブラウザからの入力に合わせて、動的な反応を起こす処理がよく行われます。そのブラウザ表示の変更を行なうのが、この属性の変更にあたります。例えば、エレメントのclassやstyleの変更を行って、エレメントの外観を変えていくことになります。

/* 属性を設定 */ el.setAttribute('id', 'id2'); /* 属性を削除 */ el.removeAttribute('checked'); /* エレメント内のHTML要素を設定 */ el.innerHTML = '<b>テキスト</b>'; /* エレメント内のテキストを設定 */ el.textContent = '表示テキスト'; /* 高さを設定 単位も必要 */ el.style.height = '100px'; /* 幅を設定 単位も必要 */ el.style.width = '200px'; /* 要素を非表示に */ el.style.display = 'none'; /* 要素をblock表示 他inline、inline-blockなど */ el.style.display = 'block';

javascriptでイベントを登録する方法

ここでのイベントとは、ブラウザ上でのユーザー操作に対して発生するものです。イベントハンドラと呼ばれる特定の事象用処理に関数を登録することで、イベント処理を行なうことが出来ます。イベントハンドラはエレメントの onclick、onresize などのプロパティに対して、関数を一つ登録できます。

イベント処理を複数登録したい場合は、エレメントのメソッド .addEventListener() を使い、イベントリスナーに登録を行います。

/* クリックされた時に実行する関数を登録 */ el.onclick = funcA; /* イベントを複数登録する場合 */ el.addEventListener('click', funcA); el.addEventListener('click', funcB); /* input、select、textareaなどが変更された時 */ el.onchange = funcA; /* マウスボタンが押された時 */ el.onmousedown = funcA; /* マウスボタンが離された時 */ el.onmouseup = funcA; /* マウスカーソルがエレメント内に入った時 */ el.onmouseenter = funcA; /* マウスカーソルがエレメントの上で動いている時 */ el.onmousemove = funcA; /* マウスカーソルがエレメントから外れた時 */ el.onmouseleave = funcA; /* スマホ、タブレットでタッチが開始された時 */ el.ontouchstart = funcA; /* スマホ、タブレットでタッチ中に動いた時 */ el.ontouchmove = funcA; /* スマホ、タブレットでタッチ後、指が離れた時 */ el.ontouchend = funcA; /* イベントを発火させる */ el.dispatchEvent(new Event('click'));

javascriptでデバッグする方法

javascriptの動作状況は、ブラウザで確認できますが、変数の状態なども確認することが出来ます。確認したいコード箇所で、console.log() などを記述するだけです。consoleは、ほとんどのブラウザで対応しています。

chromeでは、メニューの「その他のツール」→「デベロッパーツール」で開発者用画面を開けますが、「Console」タブにログ等が表示されます。 Firefoxでは、メニューの「ウェブ開発」→「開発ツールを表示」で開発者用画面を表示、「コンソール」タブにログ等が表示されます。

/* コンソールにオブジェクトの内容を表示 */ console.log( o ); /* その時点でのオブジェクトを表示 */ console.log( JSON.parse(JSON.stringify(o)) ); /* 表形式でオブジェクトを表示 */ console.table( o ); /* 処理時間の計測 */ console.time('ラベル名'); /* ここに計測する処理コード */ /* 処理終了後 */ console.timeEnd('ラベル名');