第 1 章 JavaScript/jQuery JavaScript とは JavaScript( ジャバスクリプト ) は HTML や CSS また PHP などでは実現することの難しいさまざまな効果を Web ページ上で実現できるスクリプト言語です一時期 Web ページ作成に

Size: px

Start display at page:

Download "第 1 章 JavaScript/jQuery JavaScript とは JavaScript( ジャバスクリプト ) は HTML や CSS また PHP などでは実現することの難しいさまざまな効果を Web ページ上で実現できるスクリプト言語です一時期 Web ページ作成に"

きよたつしげい
4 years ago
Views:

1 第 1 章 JavaScript/jQuery JavaScript とは JavaScript( ジャバスクリプト ) は HTML や CSS また PHP などでは実現することの難しいさまざまな効果を Web ページ上で実現できるスクリプト言語です一時期 Web ページ作成に JavaScript を用いるべきではないという風潮がありましたこれは各ブラウザで JavaScript に対する仕様が異なっていたこととセキュリティホールがあったことが原因でしたしかし現在ではそういった問題のほとんどが解決され Web 作成に JavaScript の知識は欠かせないものとなりました JavaScript テスト環境の構築 JavaScript はコードを記述するためのテキストエディタと動作を確認するためのブラウザがあればすぐに学習を開始できます CGI や PHP の学習では必要なローカルサーバーの設定は必要ありませんただし JavaScript はコード内にエラーがあっても動作チェックの際ブラウザ上にそれを示すメッセージ類は表示されませんそこであらかじめスクリプトエラーの通知が表示されるようにブラウザの設定を変更しておきましょう <IE9 の場合 > [ ツール ](Alt+X) の [ インターネットオプション ] をクリックする [ 詳細設定 ] タブをクリックする [ ブラウズ ] カテゴリーの [ スクリプトエラーごとに通知を表示する ] のチェックボックスをオンにする [OK] をクリックして決定するなおこの設定をしたままの状態では普段のブラウジングの際にもメッセージが表示されますので JavaScript の学習が終わったら解除しておく方がよいでしょう 3

2 1-1-3 JavaScript の書き方の基本 JavaScript は HTML のソースコード内に埋め込むようにして記述しますその時に使用するのが <script> タグです ~HTML ソース~ <script type = "text/javascript">  </script> ~HTML ソース~ 途中  という表記をしていますこれは HTML でコメントを表記したいときに利用するものですこのようにわざわざ JavaScript コードの範囲をコメントアウトするのは JavaScript に対応していない古いブラウザへの対応策ですしかし最近では JavaScript 対応のブラウザを利用しているユーザーが大半のためこの対応は必ずしも行わなければならないものではありませんしかし現状ではこのように表記するクリエイターが多いのも事実です本書ではソースコードの可読性を重視してコメントアウトの表記は省きますではテキストエディタで次の内容を入力して jstest1.html という名前で任意のフォルダーに保存しましょう ( デスクトップやドキュメントに JavaScript 保存用の新規フォルダーを作った方が管理しやすいでしょう ) 各行の左端の数値は行数を表すものですので入力の必要はありませんソース [1-3(1)] jstest1.html 4 これは JavaScript のテストです 5 <script type = "text/javascript"> 6 window.alert(' ようこそ!'); 7 </script> 8 </body> 9 </html> 本講座では HTML のソースコードを JavaScript の動作に最低限必要な内容に留めています練習ではこれでも問題なく動きますが例えばこのソースなら実際の運用時には DOCTYPE や meta タグなども入力するようにしてください 4

3 ソースの入力とファイルの保存が終わったらブラウザで結果を確認しましょう ( jstest1.html のファイルアイコンをダブルクリックして開いてください ) ローカル環境で JavaScript を含むファイルを開こうとするとセキュリティの警告メッセージが表示されます (IE9 は画面の下部 ) JavaScript を含んだ覚えのないファイルや他人が作ったファイルを開いたときにこのメッセージが表示された場合は危険である可能性もありますが自分が作ったファイルの時は問題ありませんブロックされているコンテンツを許可をクリックしてください Web ページが表示されるとすぐに小さなウィンドウが表示されてようこそ! というメッセージが表示されますウィンドウの OK をクリックするとウィンドウが閉じますブラウザの更新ボタンをクリックすると何度でも実行できますので何度も実行して結果を確認しましょうなお JavaScript では記述したソースコードは上から (1 行目から ) 順に処理されますそのため <script>~</script> 以降 ( 以下 ) のソースコードは JavaScript の処理が終わらないと実行されませんそのことを実際に確認しましょうソースコードを以下のように修正しましょうソース [1-3(2)] jstest1.html 4 これは JavaScript のテストです 5 <script type = "text/javascript"> 6 window.alert(' ようこそ!'); 7 </script> 8 学習をスタートしましょう! 9 </body> 10 </html> ソースコードの修正が済んだらファイルを上書き保存してブラウザで画面を更新してみましょう更新直後はページ内にはこれは JavaScript のテストですという文字しか表示されず学習をスタートしましょう! の文字は表示されていませんこれは現在ウィンドウを表示したところ 5

4 で処理がストップしているからです OK ボタンをクリックした時点で次の処理へ進むことができ学習をスタートしましょう! のメッセージが表示されますこのような処理体系のため他の HTML ソースの読み込みの邪魔にならないよう JavaScript のコードを <body> 要素内の最後 </body> 直前に記述する書き方もよく用いられますソースコードを以下のように修正しましょうソース [1-3(3)] jstest1.html 4 これは JavaScript のテストです 5 学習をスタートしましょう! 7 window.alert(' ようこそ!'); 8 </script> 9 </body> 10 </html> この記述の順番であればようこそ! ウィンドウが表示される前に Web ページ内にすべての文字列を表示できますまた <head> 要素の配下に JavaScript のコードを記述することも一般的な方法ですこちらについてはもう少し先で実際に学習しますでは次はコードにエラーがあった場合の表示を見ておきましょうソースコードを以下のように変更しましょう (window windou) ソース [1-3(4)] jstest1.html 7 windou.alert(' ようこそ!'); ファイルを保存してブラウザの画面を更新するとスクリプトにエラーがあることを知らせるメッセージが表示されます [ 詳細表示 ] をクリックして詳細を確認するとエラーの原因となっている行が確認できます 6

5 ソースコードを以下のように戻しましょう (windou window) ソース [1-3(5)] jstest1.html 7 window.alert(' ようこそ!'); JavaScript のソースが長くなってもパソコンが処理に悩むことはもちろんありませんが人の目で見たときにどの部分でどの処理をしているのかが分かりにくくなりますそうなるとプログラムのメンテナンスも行いづらくなりますそこで必要に応じてコメント表記を利用しましょうコメントとして表記した内容は JavaScript の実行に影響を与えません < コメントの書き方 1> // コメントの内容 < コメントの書き方 2> /* 複数行にわたるコメントの内容 */ ソースコードに以下のようにコメントを追加しましょうソース [1-3(6)] jstest1.html 4 これは JavaScript のテストです 5 学習をスタートしましょう! 7 // アラートウィンドウの表示 8 window.alert(' ようこそ!'); 9 </script> 10 </body> なお JavaScript の文 ( ステートメント ) の最後にはセミコロンを入力しますが実は記述を省略することも可能ですしかし通常はいつも入力するようにしてください 7

6 1-2-1 変数プログラムでは様々なデータを扱いますその際にデータを変数という入れ物に格納したと仮想して扱うことがよくあります変数という入れ物を用意する記述のことを変数の宣言と呼びます変数の宣言には var という命令を利用します < 変数の宣言の例 > var 任意の変数名 = 代入するデータ ; 一般的なプログラム言語ではこういった変数の宣言やデータの型の指定が必須であることが多いのですが JavaScript はあまりこれらのことは意識しなくても問題なく動くスクリプトを作成できますこういった点もプログラム初心者が気軽に使い始めることができる理由の一つです以下のようにコードを追加しましょうソース [2-1(1)] jstest1.html 4 これは JavaScript のテストです 5 学習をスタートしましょう! 7 // 変数の宣言 8 var msg = " こんにちは!"; 9 // アラートウィンドウの表示 10 window.alert(msg); 11 </script> 12 </body> var msg = " こんにちは!"; は msg という変数を宣言してこんにちは! という文字列を代入しています var 命令を使って変数の宣言をするのは初めの 1 回だけです宣言を済ませた後で変数 msg に別の値を代入し直す時は以下のように表記します以下のようにコードを追加しましょうソース [2-1(2)] jstest1.html 7 // 変数の宣言 8 var msg = " こんにちは!"; // この行で宣言済み 9 // アラートウィンドウの表示 10 window.alert(msg); 8

7 11 // 変数 msg に別のデータを代入 12 msg = " ありがとう!"; 13 window.alert(msg); 14 </script> 15 </body> 変数 msg は 8 行目で宣言済みのため 12 行目では var は必要ありません最後に変数の練習として以下のようにコードを修正して実行しましょうソース [2-1(3)] jstest1.html 4 <p> これは JavaScript のテストです 5 学習をスタートしましょう!</p> 7 // 変数の宣言 8 var msg = " こんにちは!"; 9 var fruits_a = " りんご "; 10 var fruits_b = " みかん "; 11 var fruits_c = " ぶどう "; 12 var fruits_d = " もも "; 13 var fruits_e = " いちご "; // ページ内に変数の内容を表示 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() 文の中で変数と通常の文字列をつなぐために使用します 9

8 1-2-2 配列先ほど変数の宣言で fruits_ というよく似た名前の変数をいくつも用意しましたただ変数名が似ているだけでなく代入するデータも果物という一つのグループに属していると言えますこのような場合は配列に代入して扱うのも一つの方法です var 任意の配列名 = [' データ A',' データ B',' データ C',' データ D',' データ E']; シングルクォーテーションの箇所はダブルクォーテーションでも可以下のようにコードを編集しましょうソース [2-2] jstest1.html 4 <p> これは JavaScript のテストです 5 学習をスタートしましょう!</p> 7 // 変数の宣言 8 var msg = " こんにちは!"; 9 var fruits = [" りんご "," みかん "," ぶどう "," もも "," いちご "]; // ページ内に変数の内容を表示 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> コードが随分省略できました 10

9 1-3-1 条件分岐 (if) プログラムには条件分岐という制御構造があって条件に応じて処理を分岐させることが出来ます if という構文を使用しますたとえば変数に代入されている数値が 100 以上なら A の処理を 100 未満なら B の処理をという形です記述パターン1 if( 条件式 ){ 条件を満たしていた場合の処理 } 記述パターン2 if( 条件式 ){ 条件を満たしていた場合の処理 }else{ 条件を満たしていなかった場合の処理 } 記述パターン3 if( 条件式 1){ 条件 1 を満たしていた場合の処理 }else if( 条件式 2){ 条件 1 は満たしていないが条件 2 は満たしていた場合の処理 }else{ 条件 2 を満たしていなかった場合の処理 } IF を利用した以下のコードを追加しましょうソース [3-1] jstest1.html 4 <p> これは JavaScript のテストです 5 学習をスタートしましょう!</p> 7 // 変数の宣言 8 var msg = " こんにちは!"; 11

10 9 var fruits = [" りんご "," みかん "," ぶどう "," もも "," いちご "]; 10 var num = "80"; // ページ内に変数の内容を表示 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>"); // 条件分岐 (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 } </script> 30 </body> 31 </html> 結果を確認したら 10 行目の変数 num に代入している数値を変更してすべての分岐パターンが正しく処理されているか確認しましょう 12

11 1-3-2 条件分岐 (switch) switch も条件によって処理を分岐する構文ですが if と異なるのは複数の条件を並列して表記できることですたとえば変数 fruits の値がりんごだったらアップルと表示しみかんだったらオレンジと表示したい場合以下のように記述できます switch(fruits){ case " りんご ": document.write(" アップル "); break; case " みかん ": document.write(" オレンジ "); break; default: document.write(" 該当なし "); } switch のイメージ図 if のイメージ図最後の default はいずれの case にも当てはまらなかったときの処理です各 case ブロックの最後に break と記述します switch は該当データの処理を終えても自動で処理を抜ける仕組みは組み込まれていません awitch を利用した以下のコードを追加しましょうソース [3-2] jstest1.html 27 } // 条件分岐 (switch) の処理 30 switch(fruits[0]){ 31 case " りんご ": 32 document.write(" アップル "); 33 break; 34 case " みかん ": 35 document.write(" オレンジ "); 36 break; 37 case " ぶどう ": 38 document.write(" グレープ "); 39 break; 13

JavaScriptでプログラミング

JavaScriptでプログラミング JavaScript でプログラミング JavaScript とはプログラミング言語の 1 つ Web ページ上でプログラムを動かすことが主目的 Web ブラウザで動かすことができる動作部分の書き方が C や Java などに似ている 2 JavaScript プログラムを動かすにはの範囲を 1. テキストエディタで入力 2..html というファイル名で保存

第 1 章 JavaScript/jQuery JavaScript とは JavaScript( ジャバスクリプト ) は HTML や CSS また PHP などでは実現することの難しい さまざまな効果を Web ページ上で実現できるスクリプト言語です 一時期 Web ページ作成に

第 1 章 JavaScript/jQuery JavaScript とは JavaScript( ジャバスクリプト ) は HTML や CSS また PHP などでは実現することの難しいさまざまな効果を Web ページ上で実現できるスクリプト言語です一時期 Web ページ作成に