第
1章 JavaScript/jQuery
1-1-1 JavaScript とは
JavaScript（ジャバスクリプト）は、HTML や CSS、また PHP などでは実現することの難しい、 さまざまな効果を Web ページ上で実現できるスクリプト言語です。 一時期「Web ページ作成に JavaScript を用いるべきではない」という風潮がありました。これは各 ブラウザで JavaScript に対する仕様が異なっていたことと、セキュリティホールがあったことが原 因でした。 しかし、現在ではそういった問題のほとんどが解決され、Web 作成に JavaScript の知識は欠かせな いものとなりました。1-1-2 JavaScript テスト環境の構築
JavaScript は、コードを記述するための「テキストエディタ」と、動作を確認するための「ブラウザ」 があれば、すぐに学習を開始できます。CGI や PHP の学習では必要なローカルサーバーの設定は必要 ありません。 ただし、JavaScript はコード内にエラーがあっても、動作チェックの際、ブラウザ上にそれを示すメ ッセージ類は表示されません。そこであらかじめスクリプトエラーの通知が表示されるように、ブラ ウザの設定を変更しておきましょう。 ＜IE9 の場合＞ [ツール]（Alt+X）の[インターネットオプション]をクリックする。 [詳細設定]タブをクリックする。 [ブラウズ]カテゴリーの[スクリプトエラーごとに通知を表示する]のチェックボックスをオンに する。 [OK]をクリックして決定する。 なお、この設定をしたままの状態では、普段のブラウジングの際にもメッセージが表示されますので、 JavaScript の学習が終わったら、解除しておく方がよいでしょう。1-1-3 JavaScript の書き方の基本
JavaScript は、HTML のソースコード内に埋め込むようにして記述します。 その時に使用するのが<script>タグです。
～HTML ソース～
<script type = "text/javascript"> <!-- javascript のコード //--> </script> ～HTML ソース～ 途中 <!-- ～ -->という表記をしています。これは HTML で「コメント」を表記したいときに利用 するものです。このようにわざわざ JavaScript コードの範囲をコメントアウトするのは、JavaScript に対応していない古いブラウザへの対応策です。しかし、最近では JavaScript 対応のブラウザを利 用しているユーザーが大半のため、この対応は必ずしも行わなければならないものではありません。 しかし、現状ではこのように表記するクリエイターが多いのも事実です。 本書ではソースコードの可読性を重視して、コメントアウトの表記は省きます。 ではテキストエディタで次の内容を入力して、jstest1.html という名前で任意のフォルダーに保 存しましょう（デスクトップやドキュメントにJavaScript 保存用の、新規フォルダーを作った方 が管理しやすいでしょう）。 ※各行の左端の数値は行数を表すものですので、入力の必要はありません。
ソース［1-3(1)］ jstest1.html
1 <html> 2 <head><title>JavaScript テスト</title></head> 3 <body> 4 これは JavaScript のテストです。 5 <script type = "text/javascript"> 6 window.alert('ようこそ！'); 7 </script> 8 </body> 9 </html> ※本講座では、HTML のソースコードを、JavaScript の動作に最低限必要な内容に留めています。練習では これでも問題なく動きますが、例えば、このソースなら、実際の運用時には DOCTYPE や meta タグなども 入力するようにしてください。ソースの入力とファイルの保存が終わったら、ブラウザで結果を確認しましょう。 （「jstest1.html」のファイルアイコンをダブルクリックして開いてください） ローカル環境で JavaScript を含むファイルを開こうとすると、セキュリティの警告メッセージが表 示されます（IE9 は画面の下部）。 JavaScript を含んだ覚えのないファイルや、他人が作ったファイルを開いたときに、このメッセージ が表示された場合は危険である可能性もありますが、自分が作ったファイルの時は問題ありません。 「ブロックされているコンテンツを許可」をクリックしてください。 Web ページが表示されると、すぐに小さなウィンドウが表示されて、「ようこそ！」というメッセー ジが表示されます。 ウィンドウの「OK」をクリックすると、ウィンドウが閉じます。 ブラウザの「更新」ボタンをクリックすると、何度でも実行できますので、何度も実行して結果を確 認しましょう。 なお、JavaScript では、記述したソースコードは上から（1 行目から）順に処理されます。 そのため、<script>～</script>以降（以下）のソースコードは、JavaScript の処理が終わらないと実 行されません。そのことを実際に確認しましょう。 ソースコードを以下のように修正しましょう。
ソース［1-3(2)］ jstest1.html
1 <html> 2 <head><title>JavaScript テスト</title></head> 3 <body> 4 これは JavaScript のテストです。 5 <script type = "text/javascript"> 6 window.alert('ようこそ！'); 7 </script> 8 学習をスタートしましょう！ 9 </body> 10 </html> ソースコードの修正が済んだら、ファイルを上書き保存して、ブラウザで画面を更新してみましょう。 更新直後は、ページ内には「これは JavaScript のテストです。」という文字しか表示されず、「学習 をスタートしましょう！」の文字は表示されていません。これは、現在ウィンドウを表示したところで処理がストップしているからです。「OK」ボタンをクリックした時点で、次の処理へ進むことがで き、「学習をスタートしましょう！」のメッセージが表示されます。 このような処理体系のため、他の HTML ソースの読み込みの邪魔にならないよう、JavaScript のコ ードを<body>要素内の最後、</body>直前に記述する書き方もよく用いられます。 ソースコードを以下のように修正しましょう。
ソース［1-3(3)］ jstest1.html
1 <html> 2 <head><title>JavaScript テスト</title></head> 3 <body> 4 これは JavaScript のテストです。 5 学習をスタートしましょう！6 <script type = "text/javascript"> 7 window.alert('ようこそ！'); 8 </script> 9 </body> 10 </html> この記述の順番であれば、「ようこそ！」ウィンドウが表示される前に、Web ページ内にすべての文 字列を表示できます。 また、<head>要素の配下に JavaScript のコードを記述することも一般的な方法です。こちらについ てはもう少し先で実際に学習します。 では次は、コードにエラーがあった場合の表示を見ておきましょう。 ソースコードを以下のように変更しましょう（window → windou）。
ソース［1-3(4)］ jstest1.html
7 windou.alert('ようこそ！'); ファイルを保存して、ブラウザの画面を更新すると、スクリプトにエラーがあることを知らせるメッ セージが表示されます。 [詳細表示]をクリックして、詳細を確認すると、エラーの原因となっている行が確認できます。ソースコードを以下のように戻しましょう（windou → window）。
ソース［1-3(5)］ jstest1.html
7 window.alert('ようこそ！'); JavaScript のソースが長くなってもパソコンが処理に悩むことはもちろんありませんが、人の目で見 たときに、どの部分でどの処理をしているのかが分かりにくくなります。そうなるとプログラムのメ ンテナンスも行いづらくなります。 そこで、必要に応じて「コメント表記」を利用しましょう。コメントとして表記した内容は、JavaScript の実行に影響を与えません。 ＜コメントの書き方①＞ //コメントの内容 ＜コメントの書き方②＞ /*複数行にわたる コメントの内容*/ ソースコードに以下のようにコメントを追加しましょう。ソース［1-3(6)］ jstest1.html
4 これは JavaScript のテストです。 5 学習をスタートしましょう！6 <script type = "text/javascript">
7 //アラートウィンドウの表示 8 window.alert('ようこそ！'); 9 </script> 10 </body> なお、JavaScript の文（ステートメント）の最後には、「セミコロン」を入力しますが、実は記述を 省略することも可能です。しかし、通常はいつも入力するようにしてください。
1-2-1 変数
プログラムでは様々なデータを扱います。その際にデータを「変数」という入れ物に格納したと仮想 して扱うことがよくあります。 変数という入れ物を用意する記述のことを「変数の宣言」と呼びます。変数の宣言には「var」という 命令を利用します。 ＜変数の宣言の例＞ var 任意の変数名 = 代入するデータ; 一般的なプログラム言語では、こういった変数の宣言や、データの型の指定が必須であることが多い のですが、JavaScript はあまりこれらのことは意識しなくても、問題なく動くスクリプトを作成でき ます。こういった点もプログラム初心者が気軽に使い始めることができる理由の一つです。 以下のようにコードを追加しましょう。ソース［2-1(1)］ jstest1.html
4 これは JavaScript のテストです。 5 学習をスタートしましょう！6 <script type = "text/javascript">
7 //変数の宣言 8 var msg = "こんにちは！"; 9 //アラートウィンドウの表示 10 window.alert(msg); 11 </script> 12 </body> 「var msg = "こんにちは！";」は、msg という変数を宣言して、“こんにちは！”という文字列を代 入しています。 「var」命令を使って変数の宣言をするのは初めの 1 回だけです。宣言を済ませた後で変数 msg に、 別の値を代入し直す時は、以下のように表記します。 以下のようにコードを追加しましょう。
ソース［2-1(2)］ jstest1.html
6 <script type = "text/javascript">
7 //変数の宣言
8 var msg = "こんにちは！"; //この行で宣言済み
9 //アラートウィンドウの表示
11 //変数 msg に別のデータを代入 12 msg = "ありがとう！"; 13 window.alert(msg); 14 </script> 15 </body> 変数 msg は、8 行目で宣言済みのため、12 行目では「var」は必要ありません。 最後に変数の練習として以下のようにコードを修正して実行しましょう。
ソース［2-1(3)］ jstest1.html
1 <html> 2 <head><title>JavaScript テスト</title></head> 3 <body> 4 <p>これは JavaScript のテストです。 5 学習をスタートしましょう！</p> 6 <script type = "text/javascript">7 //変数の宣言 8 var msg = "こんにちは！"; 9 var fruits_a = "りんご"; 10 var fruits_b = "みかん"; 11 var fruits_c = "ぶどう"; 12 var fruits_d = "もも"; 13 var fruits_e = "いちご"; 14 15 //ページ内に変数の内容を表示 16 document.write("<p>" + msg + "</p>"); 17 document.write(fruits_a + "<br>"); 18 document.write(fruits_b + "<br>"); 19 document.write(fruits_c + "<br>"); 20 document.write(fruits_d + "<br>"); 21 document.write(fruits_e + "<br>"); 22 </script> 23 </body> 24 </html> ※document.write()は画面上にデータを表示する命令です。+は文字列を結合する役割を持っていま す。document.write()文の中で、変数と通常の文字列をつなぐために使用します。
1-2-2 配列
先ほど、変数の宣言で「fruits_○」というよく似た名前の変数をいくつも用意しました。
ただ変数名が似ているだけでなく、代入するデータも「果物」という一つのグループに属していると 言えます。このような場合は「配列」に代入して扱うのも一つの方法です。
var 任意の配列名 = ['データ A','データ B','データ C','データ D','データ E'];
※シングルクォーテーションの箇所は、ダブルクォーテーションでも可。 以下のようにコードを編集しましょう。
ソース［2-2］ jstest1.html
1 <html> 2 <head><title>JavaScript テスト</title></head> 3 <body> 4 <p>これは JavaScript のテストです。 5 学習をスタートしましょう！</p> 6 <script type = "text/javascript">7 //変数の宣言 8 var msg = "こんにちは！"; 9 var fruits = ["りんご","みかん","ぶどう","もも","いちご"]; 10 11 //ページ内に変数の内容を表示 12 document.write("<p>" + msg + "</p>"); 13 document.write(fruits[0] + "<br>"); 18 document.write(fruits[1] + "<br>"); 19 document.write(fruits[2] + "<br>"); 20 document.write(fruits[3] + "<br>"); 21 document.write(fruits[4] + "<br>"); 22 </script> 23 </body> 24 </html> コードが随分省略できました。
1-3-1 条件分岐（if）
プログラムには条件分岐という制御構造があって、条件に応じて処理を分岐させることが出来ます。「if」 という構文を使用します。たとえば、変数に代入されている数値が 100 以上なら A の処理を、100 未満なら B の処理をという形です。 記述パターン① if(条件式){ 条件を満たしていた場合の処理 } 記述パターン② if(条件式){ 条件を満たしていた場合の処理 }else{ 条件を満たしていなかった場合の処理 } 記述パターン③ if(条件式 1){ 条件 1 を満たしていた場合の処理 }else if(条件式 2){ 条件 1 は満たしていないが、条件 2 は満たしていた場合の処理 }else{ 条件 2 を満たしていなかった場合の処理 } IF を利用した以下のコードを追加しましょう。ソース［3-1］ jstest1.html
1 <html> 2 <head><title>JavaScript テスト</title></head> 3 <body> 4 <p>これは JavaScript のテストです。 5 学習をスタートしましょう！</p> 6 <script type = "text/javascript">7 //変数の宣言
9 var fruits = ["りんご","みかん","ぶどう","もも","いちご"]; 10 var num = "80"; 11 12 //ページ内に変数の内容を表示 13 document.write("<p>" + msg + "</p>"); 14 document.write(fruits[0] + "<br>"); 15 document.write(fruits[1] + "<br>"); 16 document.write(fruits[2] + "<br>"); 17 document.write(fruits[3] + "<br>"); 18 document.write(fruits[4] + "<br>"); 19 20 //条件分岐（if）の処理 21 if(num >= 100){ 22 document.write("<p>よくできました！</p>"); 23 }else if(num >= 50){ 24 document.write("<p>ふつうです。</p>"); 25 }else{ 26 document.write("<p>もっとがんばりましょう！</p>"); 27 } 28 29 </script> 30 </body> 31 </html> 結果を確認したら、10 行目の変数 num に代入している数値を変更して、すべての分岐パターンが正 しく処理されているか確認しましょう。
