JavaScript
プログラミング入門
—
西暦から和暦への変換
—
遠藤 美純 <[email protected]> 2015 年 8 月 15 日目 次
1 変数と条件分岐 2 1.1 JavaScriptの基本形 . . . . 2 1.2 文字出力と変数 . . . . 3 1.3 if文による条件分岐. . . . 4 2 フォームの利用 6 2.1 プログラミングを楽にするちょっとしたコツ . . . . 6 2.2 高度な条件分岐 . . . . 6 2.3 関数の利用 . . . . 6 2.4 データをブラウザから入力出来るようにする . . . . 7 2.5 既存のページを書き換える . . . . 8 2.6 最終的なイメージ . . . . 8 3 プログラムの細かな改良 9 3.1 さらにプログラムを改良してみよう . . . . 9 3.2 その他の技と例 . . . . 10 3.3 引数の利用 . . . . 11 4 応用: 繰り返し 12 4.1 基本形 . . . . 12 4.2 西暦和暦対応一覧表 . . . . 13 4.3 引数の利用 . . . . 13 5 応用: JavaScript における外部ライブラリ・データの利用 14 5.1 LightBox の利用 . . . . 14 5.2 JQueryの利用 . . . . 151
変数と条件分岐
1.1 JavaScript の基本形
JavaScriptはHTML に埋め込むこともできる。最も単純な例(“Hellow World”と 表示するス クリプト1) が以下となる。 <html> <head> <title>JavaScript</title> </head> <body> <h1>JavaScript</h1> <p> <script> document.write("Hellow World!"); </script> </p> </body> </html> + チェック: まずは、これを HTMLファイルに書き入れ、ブラウザで閲覧してみる。 1.1.1 普通の HTML と何が違うか 異なるところは以下の箇所である。 <script> document.write("Hellow World!"); </script> • <script>タグと、</script>タグで囲まれた部分が、実際に実行される部分である。 • document.write("ほげほげ")で、「ほげほげ」とブラウザの画面に出力する。 • 文の最後はセミコロン ;で終わる。 1JavaScriptのような簡便なプログラミング言語では、作成するプログラムのことをスクリプト(脚本)と呼ぶ。
1.1.2 実行環境としてのブラウザ
JavaScriptは大抵のブラウザで実行できるが、開発に当たってはFirefoxやGoogle Chromeな ど最新のブラウザを薦める。JavaScriptの実行の問題点を指摘してくれるコンソールがあるから である。 ブラウザを開き、キーボードで F12 を押す 1.1.3 高機能なエディタ ウィンドウズ標準の「メモ帳」は最低限の機能しかない。行数などの表示や、文字列の色分け、 自動インデントなどが出来る高機能なエディタを使っても良いだろう。学内で利用できるものに 「TeraPad」がある。 + チェック: TeraPad でHTML を開いてみよう。 1.2 文字出力と変数 1.2.1 西暦を和暦に変換しよう 単なる表示 document.write("西暦" + 2009 + "年は平成" + 21 + "年です"); 計算で求める。 document.write("西暦" + 2009 + "年は平成" + (2009 - 1988) + "年です"); + ヒント: <p>を使うと、段落を変えられる。出力の先頭に<p>を付け加えてみよう。 1.2.2 変数を使う 変数とは、特定の数値や文字列を代入しておく容れ物である。JavaScriptではvarで変数の利 用を宣言することで、変数を利用することが出来る。変数の名前には自由に付けて良いが2、使 える文字は英数字とアンダースコアである。 var seireki = 2009; 西暦の計算で使ってみる。 var seireki = 2009;
document.write("西暦" + seireki + "年は平成" + (seireki - 1988) + "年です");
数値を一カ所変えるだけで、異なる計算を行える。
var seireki = 1993;
document.write("西暦" + seireki + "年は平成" + (seireki - 1988) + "年です");
+ チェック: 同様に、明治や大正の計算を行うスクリプトも書く。 1.3 if 文による条件分岐 数値によって、計算方法を変更するには、if 文による条件分岐が必要となる。以下が基本形と なる。 if (条件) { 条件が真の場合に実行される } 西暦 1989以降の場合のみ平成への換算を行う。 var seireki = 2009; if (seireki >= 1989) {
document.write("西暦" + seireki + "年は平成" + (seireki - 1988) + "年です"); } 条件式で使われる>= や<= は関係演算子である。 関係演算子 例 意味 > x > y xはyより大きい >= x >= y xはyと同じか大きい < x < y xはyより小さい <= x <= y xはyと同じか小さい 等値演算子 例 意味 == x == y xとyは等しい 条件が偽の場合のブロックを含む例は以下の通りである。 if (条件) { 条件が真の場合に実行される } else { 条件が偽の場合に実行される }
平成以外に、昭和、大正、明治に、対応した条件分岐を書く場合は、条件分岐を入れ子にする 必要がある。そのための構文が以下である。 if (条件1) { 条件1が真の場合に実行される } else if (条件2) { 条件1が偽で、条件2が真の場合に実行される } else { いずれの条件も偽の場合に実行される } + チェック: 複数の条件を指定して、平成、昭和、大正、明治に対応した条件分岐を書く。 babababababababababababababababababababab 参考: 数字と文字の違い 2 + 3を計算し、その結果を表示する document.write(2 + 3); では文字列ではどうか。(文字はダブルクオーテーションマークで囲む。) document.write("創価" + "大学"); では文字列と数値を足すとどうか document.write("創価" + "大学" + 2 + 3); 数字には「数値」としての数字と、「文字」としての数字がある。JavaScriptでは文字列 と連結すると、数字は文字としての数字になる。数字を数値として計算したい場合は、数 字の箇所を括弧でくくる。 document.write("創価" + "大学" + (2 + 3)); これはどうなるか。 document.write("2" + "3");
2
フォームの利用
2.1 プログラミングを楽にするちょっとしたコツ 2.1.1 ショートカット Alt + TAB アクティブ・ウィンドウの切り替え Ctrl + v 貼り付け Ctrl + c コピー Ctrl + x 切り取り Ctrl + z やり直し(使えないアプリケーションあり) Ctrl + F 検索(使えないアプリケーションあり) HOME 行の先頭に移動 Ctrl + HOME 行の最後に移動 END 文書の先頭行に移動 Ctrl + END 文書の最終行に移動 2.1.2 ウィンドウの適切な配置 • なるべくウィンドウが重ならないように配置を行う。 • Windowsキーと左右カーソルキーで、画面のに分割ができる。 • 余分なツールバーなど非表示にすると、画面を広く使える。 • ウィンドウの切り替えが必要な場合はAlt + TAB で切り替えると良い。 2.2 高度な条件分岐 複数の条件を if文で指定するには以下を使う。 論理演算子 例 意味 && 式1 && 式2 式1が真でかつ式2が真 || 式1 || 式2 式1と式2のいずれかが真 2.3 関数の利用 これまでの実装では、スクリプトは一度しか実行できなかった。このスクリプトを複数回実行 するためには、関数としてまとめておく必要がある。function 関数名() { ここにプログラムを書く } 関数名(); // 関数の呼び出し 関数名(); // 関数の呼び出し (二回繰り返してみる) 実例: function calc() { var seireki = 2009;
document.write("西暦" + seireki + "年は平成" + (seireki-1988) + "年です"); } calc(); calc(); + チェック: 上記の関数の利用を試してみる。 2.4 データをブラウザから入力出来るようにする 2.4.1 フォームの利用 これまでは変数に調べたい西暦の年を直接書き込んでいたが、フォームを使うと、ブラウザか らインタラクティブにデータをスクリプトに渡すことが出来る。 <form name="input">
<input type="text" name="seireki">
<input type="button" value="計算" onclick="calc();"> </form>
inputという名前の Formに、seirekiという名前のテキスト入力欄と、計算というラベルの
付いたボタンを用意する。 計算というボタンを押すたびに、calc()という関数が呼び出される。 + チェック: 実際に実行してみよう。 2.4.2 入力データを関数に渡す このままではデータを入力欄に入れても、スクリプトでは受け取れていない。入力欄のデータ をスクリプトで受け取るには、ドキュメントのオブジェクトを指定する。
var seireki = document.input.seireki.value;
これはページの部品でinputという名前の付いた部品(この場合はForm)の中にある、seireki
という名前の付いた部品 (この場合はテキスト入力欄)のデータの値(value)を、seirekiという 変数に代入するという意味になる。 + チェック: プログラムを改良して、実行してみよう。 2.5 既存のページを書き換える このままだと、計算を行うと全く新しいページに、document.write で書いた内容のみ書かれ たものだけが表示される。別の西暦を調べようと思うと、戻るボタンを押して、再度入力欄のあ るページを開かなければならない。 新しいページを作ったりせず、既存のページの一部分を書き換えるように、結果を表示してみ よう。 まず、結果を表示する部分に以下の記述を付け加える。何も表示しない、単なる空の要素であ る。kekka という名前のついたp要素である。 <p id="kekka"></p> さらに、スクリプトで、この要素を書き換えるようにする。document.write の代わりに、以 下のように記述する。
var kekka_p = document.getElementById("kekka"); kekka_p.innerHTML = "変わります" document.getElementById("kekka") は、kekka という名前の付いた部品を探す。その部品 をここではkekka_p に入れている。 kekka_p.innerHTML は、kekka という名前の付いた部品の中身を示している。これに代入す ることで、その中身を書き換えることが出来る。 2.6 最終的なイメージ もちろん、昭和など別の年号への対応は if文で実装しなければならない。
<html> <head> <title>西暦と和暦の変換</title> </head> <body> <h1>西暦と和暦の変換</h1> <form name="input">
<input type="text" name="seireki">
<input type="button" value="計算" onclick="calc();"></p> </form>
<p id="kekka"></p> <script>
function calc() {
var seireki = document.input.seireki.value; var kekka_p = document.getElementById("kekka"); if (seireki >= 1989) {
kekka_p.innerHTML = "西暦"+seireki+"年は平成"+(seireki-1988)+"年です"; } } </script> </body> </html> + チェック: 上記の例などを参考にして、スクリプトを完成させる。
3
プログラムの細かな改良
3.1 さらにプログラムを改良してみよう • 対応していない年号については、対応していない旨表示する。 • 特定の年については、その年で起こったことを追加表示する • 1年は、元年と表示させる。 • もっとプログラムを簡潔に書けないか工夫してみる。• 自分で新たな機能を考えて付け加えてみよう。 3.2 その他の技と例 3.2.1 id に応じてデザインを変えてみる ページのデザインを変えるにはスタイルシートで指定を行う。基本的事項については以前授業 で紹介したスタイルシート入門3を参照すること。 今回のHTML の例では、変換結果を表示する場所にはkekka というID が付けられているこ とを利用して、変換結果を大きな文字、かつ赤い文字で表示するには以下のようにする。 HTML の該当箇所: <p id="kekka"></p> スタイルシートに追加する部分:
p#kekka { font-size: 220%; color: red;}
ここのp#kekka は、パラグラフ<p>の内 kekkaという ID を持つもののみに、このスタイル シートを適用させることを意味している。pとkekka は#でつなぐ。 + チェック: 自分のページにこれをうまく取り入れたり、さらにデザインを改善してみよう。 3.2.2 入力欄にフォーカス ページを開いた際に、入力欄にカーソルキーを表示(フォーカス) させる。ユーザがいちいち入 力欄をクリックする手間を省いてあげられる。フォーカスを当てたい input 要素にautofocus という属性を追加する。 <form name="input">
<input type="text" name="seireki" autofocus>
<input type="button" value="計算" onclick="calc();"> </form>
+ チェック: 自分のページにこれを取り入れよう。 3.2.3 現在の日時の取得
現在の時刻の取得にはDate オブジェクトを利用する。Dateオブジェクトを取得して変数now
に代入する。変数nowから年月日などのデータをそれぞれ取得できる。なお、月のみは 0から始 まるために、実際に利用する前に 1を足しておく必要がある。
3
var now = new Date();
var year = now.getFullYear(); var month = now.getMonth() + 1; var date = now.getDate();
var hour = now.getHours(); var min = now.getMinutes(); var sec = now.getSeconds();
document.write(year+"年"+month+"月"+date+"日"+hour+"時"+min+"分"+sec+"秒");
+ チェック: まずは、これをHTML ファイルに書き入れ、ブラウザで閲覧してみる。さらに、 現在の年月日を表示した上で、現在の和暦も表示するようにプログラムを改良する。 3.3 引数の利用 3.3.1 関数に値を渡す 関数を呼び出す際に、そこで使われる値を指定して呼び出す。その際に渡される値が引数 (ひ きすう) である。関数名の後の括弧に、渡す値が代入される変数を指定する。 例: 二つの値を渡してその合計を求める。 function func(a, b) { document.write(a + b) } func(2, 3) // 2 と 3 を渡して、その合計を表示する 3.3.2 現在の日時を渡して、和暦を表示する 既に作成してある関数 calcを改造して、西暦と表示する場所を引数で渡す。
function calc(seireki, place) {
// var seireki = document.in.seireki.value; <-- この行は削除 var kkk = document.getElementById(place); <-- ID は引数で指定 ...
<input type="button" value="計算"
onclick="calc(document.in.seireki.value, ’kekka’);"> さらに、今の時間をDate オブジェクトで調べて、別の箇所に表示を行う。 <p id="now"></p> <script>
var now = new Date();
var year = now.getFullYear(); calc(year, ’now’); </script> + チェック: スクリプトを適切に書き換えて、現在の日時表示とともに、現在の和暦も表示 する。
4
応用
:
繰り返し
既に作成した西暦和暦変換プログラムを改造して、西暦和暦の対応一覧表を作る。その際、繰 り返しと引数を用いる。 4.1 基本形 同じ動作を一定回数繰り返す制御構造が「繰り返し(ループ)」である。その代表的なものがfor 文である。 例: 10 回の繰り返しを行い、0から9の数字を表示する。for (i=0; i< 10; i++){ document.write(i) } iはカウンタを示す変数である。 • カウンタは0 で始まり(i=0) • 1ずつ増え(i++)4、 • 10以下の場合のみ(i<10)ブロック内の命令を実行する 4i = i + 1の省略形
4.2 西暦和暦対応一覧表
明治元年から今年までの対応表を表示させるには以下のように行う。
for (seireki=1868; i<2011; i++){ calc(); } ただ、このseireki をcalc に渡すには、以下の引数を用いる必要がある。 4.3 引数の利用 引数については11 ページを参照のこと。例えば以下のようにして、引数を関数に渡す。 function calc(seireki) {
document.write("西暦" + seireki + "年は平成" + (seireki-1988) + "年です"); }
for (i=1868; i<2011; i++){ calc(i);
}
5
応用
: JavaScript
における外部ライブラリ・データの利用
プログラムおよびデータは一から全て自分で作らなくても、他の誰かが提供してくれているも のを再利用することが出来る。
プログラムについてはライブラリとして提供される。データはAPI を通して提供される。ライ
ブラリならびに APIを利用すれば、単純なプログラムでも相当なことが実現可能となる。
ここではLightBox とJQuery、Wikipedia APIを紹介する。
5.1 LightBox の利用 5.1.1 LightBox とは LightBox は簡単にウェブページの高度な装飾を実現するためのライブラリである。スライド ショー的な画像の読み込みが有名である。 5.1.2 ダウンロードとインストール まずは最新の LightBox をダウンロードしてpublic_html 以下に展開しておく必要がある。 GoogleでLightBoxを検索すればすぐに見つかる。展開の際index.htmlを上書きしないように
気をつけること。具体的にはjs、css、imagesの3つのフォルダをpublic_htmlにコピーする。 5.1.3 HTML の記述 1. HEAD要素には スタイルシートとJavaScriptのリンクを、下記の通りにそのまま記載する。 2. 画像についてはリンクに rel="lightbox"を追加するだけでよい。さまざまな機能がある が、別途ページを参照すること。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<script src="js/jquery-1.7.2.min.js"></script> <script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" /> </head>
<body>
<a href="image_small.jpg" rel="lightbox"><img src="image.jpg"></a> </body>
</html>
5.2 JQuery の利用
JQueryは 簡単にウェブページに高度な機能を追加するためのライブラリである。前述の Light-BoxもこのJQueryを利用している。
5.2.1 準備
head 要素に以下を追加する。これによってJQueryのライブラリを読み込む。LightBoxを既 に導入している場合は、JQueryが既にロードされているはずなので、新たな記述は不要である。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> 5.2.2 例 これまでこう書いていたものが
var kekka_p = document.getElementById(’kekka’); kekka_p.innerHTML = "わかりません"; 簡単に、こう書き換えられる $("#kekka").html("わかりません"); ID には #をつけること 5.2.3 形式 何か（セレクタ）に対して、何か（メソッド）をする $(セレクタ).メソッド(引数);
5.2.4 さまざまな例 $("#kekka").css("color", "red"); // 文字の色を赤に $("#kekka").show(); // 表示する $("#kekka").hide(); // 隠す $("h1").slideDown(); // スライド表示 $("h1").slideUp(); // スライドしながら隠す $("#list").fadeIn(); // フェードイン（表示） $("#list").fadeOut(); // フェードアウト（隠す） 5.2.5 繋げることも可能
$("#kekka").html.("テスト！").css("color", "red").fadeIn();
5.3 JQuery による Wikipedia API の利用
5.3.1 大まかな枠組み
ここではJQueryから、外部のページにアクセスして、データを取り込む機能を利用する。 JavaScriptではJSONという形式でデータをやりとりする。さまざまなウェブサービスがJSON
でのデータのやりとりを提供している。今回はWikipedia API へのアクセスを試みる。
Wikipediaからキーワードを検索し、JSON形式のデータを取り込む。その際JQueryの機能
を使うことになる。 5.3.2 HTML 以下がHTML の例になる。注意すべきことは点ある。 1. HEAD 要素でJavaScript を読み込む。 • jquery-latest.min.js はインストールすることなく、直接提供者から使わせても らう。 • wikipedia.jsは自分で作成し、public_htmlに置く。 2. 関数 wikipedia では、入力欄の数値と、出力先のID を引数として渡す。 3. 出力先は<div> タグで指定する。<P>などのタグを内部で自由に使うため。
<html> <head> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="wikipedia.js"></script> </head> <body> <h1>西暦と和暦の変換</h1> <form name="input">
<input type="text" name="seireki"> <input type="button" value="送信"
onclick="wikipedia(document.input.seireki.value, ’info’);"> </form> <div id="info"></div> </body> </html> 5.3.3 JavaScript
以下のJavaScript をwikipedia.jsとして、public_htmlに置く。
function wikipedia(seireki, id) {
var e = document.getElementById(id); e.innerHTML = ""
var url = "http://wikipedia.simpleapi.net/api?output=json&callback=?"; $.getJSON(url, {"keyword": seireki+"年"},
function(data){
$.each(data, function(i, data){
e.innerHTML += "<h3>"+data.title+"</h3>"; e.innerHTML += data.body; }); }); } 以下それぞれを簡潔に説明する。
5.3.4 冒頭部分
function wikipedia(seireki, id) {
var e = document.getElementById(id); e.innerHTML = "" 関数では引数を二つ取る。最初が西暦年、もう一つが書き換えるHTML 要素のID となる。変 数eには そのHTML 要素のオブジェクトが代入され、innerHTML でまず中身を消去している。 5.3.5 API の URL
今回利用する Wikipedia APIの URL を指定する。細かなオプションは別途指定する。URL
やオプションについては Wikipedia APIページを参照する。
var url = "http://wikipedia.simpleapi.net/api?output=json&callback=?";
5.3.6 getJSON
getJSON は JQueryから利用できる関数である。引数は、1) API のURL、2) API へのオプ ション3)データを処理する関数、の三つである。
$.getJSON(url, {"keyword": seireki+"年"}, function(data){
$.each(data, function(i, data){
e.innerHTML += "<h3>"+data.title+"</h3>"; e.innerHTML += data.body; }); }); 1. 最初の引数は、先ほど指定した URLである。 2. 次の引数は検索キーワードとして seireki+"年"を指定する 3. 最後の引数では、取得したデータをHTML として出力する関数となっている。
