ボタンからJavaScriptを実行する仕組み
JavaScriptは、Webページのインターフェイスとの組み合わせによって実現されるプログラムです。今回は、Webブラウザのボタンやフォームへの入力操作などに合わせてプログラムを実行する手法を学びます。
JavaScriptは、基本的にはWebブラウザにページが、つまりプログラムが読み込まれた時点で実行されます。しかし、例外もあります。関数という形で定義されたものです。関数については、前回学んだように意味のあるひとまとまりの動作（を行なうブロック）に名前をつけて定義したものです。JavaScriptのプログラムがWebブラウザに読み込まれた時点では、このひとまとまりの動作に名前をつける、というところまでが実行され、実際にその動作をすることはありません。これが関数定義です。
さて、では、定義された関数は呼び出されるまで実行されません。ここでイベントモデルが出てきます。イベントモデルあるいはイベント駆動プログラム（Event Driven Program）というのは、Webページにおいて何らかのイベントが発生したときにプログラムを実行するというものです。例えばボタンをマウスでクリックした際に、マウスがクリックされたということをきっかけにプログラムが実行されます。
ボタンからJavaScriptを実行する仕組み
JavaScriptではHTMLの要素に様々などのようなときにイベント駆動のプログラムを起動させるかという指定を書いたイベントハンドラ（Event Handler）を設定することができます。以下に主なイベントハンドラの例を示します。他にもありますし、HTML要素によっては設定できるものとできないものがありますので、調べてみてください。
| タイプ | イベント | イベントの内容 |
|---|---|---|
| ページ等 | onload | ページ等の読み込み完了した時 |
| onunload | 他のページへの移動時、ページのクローズ時 | |
| onresize | サイズが変更された時 | |
| onscroll | スクロールした時 | |
| マウス | onclick | クリックした時 |
| ondblclick | ダブルクリックした時 | |
| onmousedown | マウスボタンを押した時 | |
| onmouseup | マウスボタンを放した時 | |
| onmouseover | マウスが重なった時 | |
| キー | onkeydown | キーが押し下げられた時 |
| onkeypress | キー入力があった時 | |
| onkeyup | 押し下げられたキーが放された時 | |
| フォーム | onchange | 内容が変更された時 |
| onsubmit | サブミットボタンが押された時 | |
| onreset | リセットボタンが押された時 | |
| フォーカス | onfocus | フォーカスされた時 |
| onblur | フォーカスが外れた時 |
これらのイベントハンドラとして関数を指定します。HTML上でイベントハンドラとして指定された関数は、ユーザが対象となる操作をした際に、Webブラウザによって自動的に呼び出されることになります。
では、実際にイベント駆動型のプログラムを実行してみましょう。次のプログラムは、HTMLでボタンを表示し、そのボタンがクリックされた際にアラートウインドウが表示されるプログラムです。
<script type="text/javascript">
function buttonClicked() {
window.alert("ボタンが押されました。");
}
</script>
<input type="button" value="Click me!" onclick="buttonClicked()" />
このプログラムを実行すると、下記のようなボタンが表示されます。実際に新しいページを作って上記のプログラムを入力してみてください。
上記のボタンを押すとアラートウインドウが表示されますね。では、どういう仕組みで動いているのかを説明していきます。
3行目で関数の名前を決めていますが、buttonClickedというのが関数名です。後ろに括弧がついていますが、関数名には括弧がつくという規則に則っています。buttonClicked( )関数の中身は、{から}までで定義されています。このプログラムでは、「window.alert("ボタンが押されました。");」の1行のみです。「window.alert("ボタンが押されました。");」は「ボタンが押されました。」というテキストを含むアラートウインドウを表示を表示するための命令です。つまり、buttonClicked( )という関数は、アラートウインドウを出す動作をするもの、ということになります。
ここで、JavaScript以外にイベントハンドラを指定する部分として8行目のinputタグがあります。8行目はHTMLにおいてボタンを表示するためのタグです。このHTMLの部分と<script>で囲まれた部分の順番は逆でも構いません。8行目の中に、「onclick="buttonClicked( )」という部分があります。これが、ボタンとJavaScriptのプログラムを結びつけているものになります。意味は「onclickつまりボタンがクリックされた場合に、buttonClicked( )関数を呼び出しなさい」というものになります。ボタンがマウスでクリックされると、onclickイベントが発生し、それがbuttonClicked( )関数につながり、アラートウインドウが表示されるという仕組みです。
次のプログラムを見てください。
<script type="text/javascript">
var word = "こんにちは";
// hello関数1
function hello1( ) {
var word = "こんばんは";
window.alert( word );
}
// hello関数2
function hello2( ) {
window.alert( word );
}
// hello関数3
function hello3( ) {
word= "こんばんは";
window.alert( word );
}
// hello関数4
function hello4( ) {
{
var word = "こんばんは";
}
window.alert( word );
}
</script>
<input type="button" value="hello1" onclick="hello1()">
<input type="button" value="hello2" onclick="hello2()">
<input type="button" value="hello3" onclick="hello3()">
<input type="button" value="hello4" onclick="hello4()">
実際の動きは下記のとおりです。ボタンを押してみましょう。何が起きているかわかりますか? ボタンを押す順序によっても動きが変わりますので、ブラウザのリロード機能などを駆使して動きを把握してみてください。デバッガを使うのもよいとおもいます。
hello1ボタンを押すと、「こんばんは」と表示されましたね。これは、8行目のwindow.alert()で表示されています。表示内容は、すぐ上の7行目において宣言されている変数wordの値です。
初めに、hello2ボタンを押すと、「こんにちは」と表示されます。これは、13行目の文でアラートを出しています。値としては、3行目において初期化したものです。ここで、7行目の代入文で代入された値が表示されていないことに注意してください。7行目の代入文が無関係なのはなぜでしょうか? 授業の第二回の時に「プログラムは基本的に上から下へ実行されます」と言いました。この規則に則ると、13行目のwindow.alert()より前に7行目の代入文があるので、wordの値は「こんばんは」になるはずです。しかし、6行目から9行目までは関数宣言です。関数宣言については前回簡単に説明しましたね。この部分は宣言であって、実際に他から呼び出されるまでは実行されることはありません。そのため、変数wordの値は変更されることはありません。しかし、この説明だと、一度hello1ボタンを押したあとでhello2ボタンを押すと、「こんばんは」と表示されるはずです。しかし実際には、たとえhello1ボタンを押した後にhello2ボタンを押しても「こんにちは」と表示されます。実は、このプログラムでは、3行目で宣言されているword変数と7行目で宣言されているword変数は別物なのです。これがスコープです。
では、クリック以外のイベントハンドラを見てみましょう。次のプログラムは文字列の上にマウスを持っていくと、背景色が変わるというプログラムです。
<script type="text/javascript">
function mouseOver( ){
// 色を変える要素を特定する
var obj = document.getElementById( "div1" );
// 背景色を変える
obj.style.backgroundColor = "yellow";
}
function mouseOut( ){
// 色を変える要素を特定する
var obj = document.getElementById( "div1" );
// 背景色を変える
obj.style.backgroundColor = "white";
}
</script>
<div id="div1" onmouseover="mouseOver( )" onmouseout="mouseOut( )">マウスカーソルを重ねてください。</div>
実際には下記のようになります。文字列にマウスカーソルを重ねると背景色が黄色に変わり、マウスカーソルを文字列から離すと背景色が白くなるのがわかりますね。
マウスカーソルを重ねてください。
それでは、プログラムを解説しましょう。このプログラムでは、2つの関数が定義されています。mouseOver( )とmouseOut( )です。
mouseOver( )の定義は3行目から9行目の7行になります。3行目は前と同じなので説明をする必要はないでしょう。4行目と7行目はコメントです。6行目にはプログラムを読みやすくするために空行が入っています。空行は適当な場所に見やすいように入れて構いません。よって、プログラムの本体は5行目と8行目になります。5行目では、色を変える場所を特定しています。今回、色を変える場所は「マウスカーソルを重ねてください」と書かれたブロックとしました。このブロックには「id="div1"」という形でid属性が指定されています。この属性を使って、プログラムの中で要素をて特定することができます。「document.getElementById(id属性);」というのが、要素を特定するための文です。特定した結果を=演算子を使って、objに代入しています。この時点でobjはHTML文書内の要素を表すようになります。そして、8行目において、その要素のスタイルにアクセスし、背景色を変更しています。「.style」がスタイルシートにアクセスすることを示しており、その中のbackgroundColor属性を変更している訳です。ここではyellowを指定して色を変更しています。この属性部分はCSSに相当しますので、いろいろやってみてください。
mouseOut()の定義は、11行目から17行目です。これはmouseOver()とほぼ同じなので、説明の必要はありませんね。
さて、では、HTMLの部分を見ていきましょう。21行目がHTMLの部分になります。基本的にはdiv要素で文字列「マウスカーソルを重ねてください。」を囲んだだけです。ただし、divにはいくつかの属性が指定されています。1つ目は先ほども出てきたid属性です。id属性は、同じドキュメント内では一意でなくてはなりません。ページを作る際には気をつけてください。2つ目と3つ目はイベントハンドラです。それぞれ、onmouseoverに対してmouseOver( )を、onmouseoutに対してmouseOut( )を指定しています。これは、div要素にマウスが重ねられた時にはmouseOver( )を呼び出し、マウスが外れたらmouseOut( )を呼び出すことを指定しています。このように、1つのHTML要素に対して複数のイベントハンドラを定義することも可能です。
WordPressの個人ページのホームで記事が複数表示されるとid属性が重なることがあるので、注意すること。
documentオブジェクトからgetElementById( )関数を使って引き出してきたオブジェクトは、elementクラスのオブジェクトになっています。これは、タグで囲まれたドキュメントの要素についての様々な情報を持っています。
| プロパティ名 | 内容 |
|---|---|
| value | その要素がinputタグで、value属性が指定されている場合、入力された文字列のテキストを持ちます。 |
| innerHTML | その要素内のHTMLのソースを持ちます。 |
| style | CSSなどのスタイル情報を持ちます。 |
| tagName | タグの名前の文字列です。 |
| title | title属性が指定されている場合、その文字列情報を持ちます。 |
| className | class属性が指定されている場合、その文字列情報を持ちます。 |
| id | id属性が指定されている場合、その文字列情報を持ちます。 |
| lang | その要素の言語設定の文字列情報を持ちます。 |
プロパティの中で、CSS（Cascade Style Sheet）などで指定することができるスタイル情報を持っているのが、styleプロパティになっています。このstyleプロパティもCSSStyleDeclarationというクラスのオブジェクトになっています。このクラスのオブジェクトが持つプロパティは、以下のサイトなどを参考にして下さい。
W3C Document Object Model CSS仕様
Dottoro Sytle Handling in JavaScript
ここでは、styleプロパティが持つ、共通で使われるプロパティのほんの一部を紹介します。これらは、文字列で指定します。
| プロパティ名 | 内容 |
|---|---|
| margin | 上下左右の４つのマージン（空間的余裕）を順番に持ちます。 |
| marginBottom | 下方向のマージンを持ちます。 |
| marginLeft | 左方向のマージンを持ちます。 |
| marginRight | 右方向のマージンを持ちます。 |
| marginTop | 上方向のマージンを持ちます。 |
| backgroundColor | 背景色のカラー情報を持ちます。 |
| color | テキストのカラー情報を持ちます。 |
| font | テキストが持つ６つのフォント情報を短い形式で持ちます。 |
| fontFamily | テキストのタイプフェースに関しての情報を持ちます。 |
| fontSize | テキストのフォントサイズの情報を持ちます。 |
| lineHeight | テキスト間の上下方向の距離に関しての情報を持ちます。 |
| textAlign | テキストの水平方向の揃えの情報を持ちます。center/justified/left/rightなど。 |
他にもたくさんあります。上記のリンクを辿ってみて下さい。
今回は、これまでに使ってきたHTMLの文法等をまとめておさらいします。
Webページを作成するためには、Hyper Text Markup Language (HTML)を使います。HTMLは1993年にバージョン1が標準化されてから、バージョンアップを重ねています。現在最新のバージョンは4.01です。HTML4.01が出版された後、HTMLの標準を決めているWorld Wide Web Consortium (W3C)は、XMLベースのXHTMLに移行することを決定し、XHTML1.0が策定されています。現在、世の中で使われている正式なバージョンのHTMLは、主にHTML4.01かXHTML1.0です。
XHTMLは、コンピュータが世界中のデータを扱い、その意味を理解でき、人間を支えてくれるような世界を実現する為に設計された言語でした。このため、複雑でページやツールを作るのが難しいものになりました。この事が原因で、XHTML1.1やXHTML2.0のようなXHTMLの流れは加速しませんでした。
このため、HTMLの新しいバージョンを作ろうという動きが出てきます。その結果作られたのがHTML5です。現時点ではまだ、HTML5は正式にはリリースされていません。しかし、多くのブラウザがHTML5のドラフト版に準拠するようになってきています。
ちなみに、W3Cの日本ブランチのオフィスはSFCにあります。τ棟の4Fにありますので、興味のある人は門戸を叩いてみてください。
本資料では、あまり説明もせずに幾つかのHTML要素を使ってきました。ここで、これらの要素についてまとめておきましょう。
その前に、そもそも「要素」とは何でしょうか? 「要素」というのは、HTML文章のパーツです。例えば、文章の中のある部分が重要であることを示す場合は、次のように書きます。この文章において、「<strong>」と「</strong>」で囲まれた部分が要素になります。
HTMLの<strong>要素</strong>の書き方は試験にでるかも知れません。
また、「<strong>」や「</strong>」自体を「タグ」と呼びます。「タグ」には「開始タグ」と「終了タグ」が存在します。要素は、基本的には「開始タグ」「内容 」「終了タグ」から構成されているのです。しかし、例外もあります。空要素と呼ばれるものです。改行を書く時に「<br />」と書く事がありますが、これが空要素です。空要素は、内容が無く、開始タグと終了タグがくっついた要素とみることが出来ます。
タグは基本的に要素名を「<」と「>」で囲んだ形式をしていますが、加えて属性をつける事ができます。属性は、タグ名の後にスペースを空けて「属性名="値"」という記述を繰り返します。例えば、前の例にclass属性とid属性を指定すると次のようになります。
HTMLの<strong class="word" id="element">要素</strong>の書き方は試験にでるかも知れません。
script要素は、HTMLの中にプログラムを埋め込む時に使われる要素です。script要素では、typeやsrc等の属性が指定できます。type属性では、埋め込むスクリプトの種類を指定します。デフォルト値は「text/javascript」です。このため、実は、JavaScriptを使用する場合にはtype属性を指定する必要はありません。しかし、わかりやすさの観点から指定しておいた方が良いでしょう。また、src属性には外部スクリプトのURLを指定します。他の人が書いたプログラムを利用する場合や、自分が書いたプログラムを別のファイルとして保存しているような場合に、src属性を指定して外部からスクリプトファイルを読み込むことができます。
<script type="text/javascript"> JavaScriptで書かれたプログラム </script>
<script type="text/javascript" src="スクリプトのURL"></script>
これまで、script要素を使う場合には開始タグの前には「<!--」を、終了タグの前には「// -->」をつけてきました。これは、script要素を理解しない古いブラウザがプログラムを表示してしまうことを防ぐためです。最近のブラウザを使っている限りにおいては必要ありませんが、苦にならなければつけておいた方が良いでしょう。
br要素は、改行を表す要素です。br要素は内容を必要とすることは無いため、「<br />」のように使います。
〒252-0882<br /> 藤沢市遠藤5322<br /> 慶應義塾大学 湘南藤沢キャンパス
form要素は、ユーザが入力したデータをサーバに送る入力フォームを表す要素です。form要素の中には、input要素やselect要素が入ります。本来は、サーバ側にデータを受け取るプログラムを作成しておき、そのプログラムにデータを渡すような使い方をします。この場合は、form要素のaction属性にサーバ側のプログラムの名前を指定します。サーバ側でのプログラム開発に興味のある人は、調べてみて下さい。
これまで、ユーザからの入力部分であることを明示的にするために、input要素等をform要素の中に入れてきましたが、JavaScriptのみで入力フォームを使うだけあれば、form要素を指定しなくとも動作します。
<form> 名前: <input type="text"> </form>
input要素は、ユーザ入力部を作り出す要素です。type属性を指定することにより、多くの種類の入力フォームを作り出す事ができます。これまでにも、「text」や「button」等の属性値を指定してきましたが、他にもいろいろな属性値を指定できます。代表的な例を下記に示します。
| 属性値 | 説明 |
|---|---|
| button | マウス等でクリックするためのボタン |
| checkbox | マウス等で選択をするチェックボックス |
| password | パスワードを入力するためのテキストエリア(入力文字が伏せ字になる) |
| radio | 選択肢の中から1つを選択をするラジオボタン |
| text | 文字列を入力するテキストエリア |
また、type属性以外にもsize属性やmaxlength属性、value属性等の幾つかの属性を指定することができます。size属性はinput要素の幅を、maxlength属性はテキストエリア等において入力できる文字の最大値を、value属性は予め設定しておく値(値が道使われるかは、input要素のタイプによって異なります。例えば、ボタンの場合にはボタンに表示される文字列になります)をそれぞれ表しています。
<label>名前: <input type="text" value="慶應太郎" size="10" maxlength="20" /></label>
<input type="button" value="OK" />
<label><input type="checkbox" />同意する</label>
label要素は、ユーザ入力部と文字列を関連づけるために使われます。
ボタンを作るためには、input要素を使う以外に、button要素を使う方法もあります。button要素では、内容の部分にボタン上に表示する文字列を書きます。input要素でもbutton要素でも出来ることには基本的に差はありませんので、使いやすい方を使ってください。ただし、input要素を使った場合は、value要素の値がボタンに表示されるのに対して、button要素ではvalue要素の値とボタンに表示されている文字列には関係がないことに気をつけてください。
<button>click me!</button>
select要素は、複数の選択子の中から1つを選択するような機能を提供します。多くの場合はプルダウンメニューになります。
この要素では、内部にoption要素を並べて選択肢を記述します。選択肢は幾つあっても構いません。
<select> <option>信濃町</option> <option>湘南藤沢</option> <option>日吉</option> <option>三田</option> <option>矢上</option> </select>
div要素は、特別な意味はないが、ある部分を他の部分と区別したい場合に用います。このため、属性を伴わないdivタグのみで利用されることは殆どありません。class属性を使ってスタイルシートを指定したり、id属性を使ってプログラムで操作したりといった目的で利用されます。
<h1>タイトル</h1> <div class="article"> <p>この部分に記事を書きます。</p> <p>記事は通常、複数のパラグラフから構成されています。</p> </div>
これまでcanvas要素を説明をしてきましたが、HTMLとしてここでは説明します。canvas要素はHTML5で初めて導入された要素で、プログラムによる描画領域を確保します。canvasタグで囲まれた内容の部分には、canvasが使えなかった場合に表示される文字列を記入します。
<canvas id="canvas" width="200" height="200">四角形を描画する領域</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 100, 100);
</script>
上記の使用例でcanvas要素で200×200の描画領域を確保して、script要素でJavaScriptによって(50,50)の所に100×100の四角形を描画をしています。実行結果は下記のとおりです。
HTMLを書いていると、「ここから記事だ」「ここから新しい章だ」などのコメントを入れたくなることがあります。このような要求に応えるために、HTMLではコメントを書く方法を提供しています。具体的には、HTMLでは「<!--」と 「-->」で囲まれた部分をコメントとして扱います。
<!-- ここはコメントです。-->ここは本文です。
<!-- ここもコメントです。 -->
それでは次にHTMLとJavaScriptのリンク関係についてまとめてみましょう。
JavaScriptをHTMLに埋め込むにはscriptタグを使うことは上でも述べました。またその種類として、HTML文書内にスクリプトを直接書く方法と、src属性を使って外部にあるプログラムを読み込んでくる方法がある事についても触れました。この2つの方法を使ってブラウザ上にJavaScriptのプログラムを読み込み、実行可能な状態にすることができます。
では、どのタイミングでJavaScriptは実行されるのでしょうか? 以前にもみた通り、JavaScriptのプログラムは、ブラウザに読み込まれた時点で実行されます。このとき注意して欲しいのは、function文によって関数が定義されている部分は、JavaScriptの機能としては関数を定義しているだけで、それが実際に実行されるのはその関数が他から呼び出された時であることです。つまり、function文自体は確かに読み込まれた時点で実行されるのですが、function文というのはそもそもが関数を定義するための文であるため、function文が実行されるというのは関数が定義されるのみで、内容が実行されるわけではない、ということです。
たまに、プログラムを最後まで読み込んだ後に実行したくなる時があります。その場合は例えば始めに実行されるべき関数を「start()」や「initialize()」といった名前で作っておき、ページの最後に「<script>start();</script>」や「<script>initialize();</script>」と書いて呼び出すと良いでしょう。このような操作は、本来はページが読み込まれ終わったことを示すonloadイベントに結びつけられるべきなのですが、WordPressの記事としてプログラムを書いている限り、HTMLのbodyタグを書く事はありませんので、onloadイベントを使って初期化処理を実行することは出来ないのです。WordPressを使わず、ページをhtmlタグから全部自分で書く様な場合には、onloadイベントを使ってみてください。
ページを読み込んだ直後に何かを実行する必要がない場合は、関数のみを作っておき、HTMLのパーツに結びつけておきます。これまでにも行ってきた、onclickやonchangeなどのイベントが発生した時に関数が呼び出されるようにする方法です。
JavaScriptは、ページの中の要素を操作できることが最大の特徴です。JavaScriptからドキュメントを操作するためには、Documentインターフェイスをもつオブジェクトを使います。Documentインターフェイスを理解するためには、Document Obuject Model (DOM)を理解する必要があります。ここでは、簡単に説明をしておきます。ちなみに、「インターフェイス」とはオブジェクトにアクセスするためのプロパティ群やメソッド群を定義したものです。
JavaScriptでは、表示されているページのdocumentオブジェクトを「document」という変数で参照することが出来ます。これまでに、document.write()などを使ってページにプログラムの実行結果を表示したりしていましたが、これは正確には、documentオブジェクトのメソッドであるwrite()を使って、ページやフレームのdocumentオブジェクトを操作していたことになります。documentオブジェクトを操作すると、操作内容によってはページに見える形で反映されます。
documentオブジェクトのメソッドでは、write()メソッド以外に、getElementById()メソッドを使ってきました。このメソッドは、documentオブジェクト、つまりページの中に含まれる要素の中からIDが一致するものを探し出してくるメソッドです。IDは、ページに含まれるタグの中でid属性として指定されます。
getElementById()メソッドが返す値は、HTMLの要素そのものです。もう少し正確に言うと、Elementインターフェイスを持つオブジェクトと言うことになります。HTMLの要素一つ一つにはには様々な属性がついています。JavaScriptでは、Elementインターフェイスをもつオブジェクトを使って、これらの属性にアクセスする方法を提供しています。これまでにElementインターフェイスをもつオブジェクトelementに対して、「element.value」のようにしてその要素がもつ値を取得したりしました。これは、elementオブジェクトのvalue属性に入っている値、という意味です。他にも「element.style」とすることによって、要素を表示するのに使われているスタイルシートにアクセスすることができます。実際、HTMLによって要素のスタイルシートを指定する場合には、「<div style="background-color:red">」の様にスタイル属性を使いますね。「element.style.backgroundColor」の値を変えると、要素の背景色が変化したのを思い出してください。これは、elementのstyle属性のbackground-color属性を変更しているわけです。ちなみに、JavaScriptでは変数名に「-」が使えないため、「-」を省いて次の単語の頭を大文字で記述するというルールがあります。このため、「background-color」は「backgroundColor」となります。
次は、フォームの活用です。フォームとは、Webページにおいてユーザに値を入力させるための仕組みです。フォームは次のように設定します。
<form> お名前をどうぞ: <input type="text" size="20" /><input type="submit" value="OK"> </form>
上のHTMLからは次の様なフォームが生成されます。「type="text"」や「type="submit"」がフォームのタイプを指定し、「size="20"」がテキストフィールドの長さを20文字に設定し、「value="OK"」がボタンの中の文字列を指定しています。
このフォームは実際に名前を入力することはできますが、ページがリロードされるだけで、何も起きません。そこで、このフォームに名前を入力されたときに、「こんにちは、○○さん」と表示されるアラートを出すようにしてみましょう。ちなみに上の例で、ページがリロードされるのは、2つ目のinput要素で「type="submit"」が指定されているためです。
アラートを表示するためのプログラムは下記のようになります。
<script type="text/javascript">
function hello( ){
// テキスト要素を特定する
var name = document.getElementById('text1');
// アラートを表示する。
window.alert("こんにちは、" + name.value + "さん");
}
</script>
<form>
お名前をどうぞ: <input id="text1" type="text" size="20" /><input type="button" value="OK" onclick="hello()">
</form>
下記は実際の動作例です。名前をいれて「OK」ボタンをクリックしてみましょう。
次にボタンを必要としない、フォームの活用方法について見てみましょう。次のプログラムは何をしているのでしょうか? まず、フォームを見ると、3つのテキストフィールドがあることがわかります。それぞれに、a, b, sumというid属性がついており、テキストフィールドの間が + と = でつなげられていますね。そうです。足し算をするプログラムです。
<script type="text/javascript">
function value_onchange( ){
// それぞれの要素を特定する
var a = document.getElementById('a');
var b = document.getElementById('b');
var sum = document.getElementById('sum');
// aとbの値の足し算をし、その結果をsum要素にセットする
sum.value = parseInt(a.value) + parseInt(b.value);
}
</script>
実際に上記のプログラムを実行したのが下記になります。+記号の左右のテキストフィールドに値を入れてみましょう。足し算の結果が表示されましたね。表示されなかった人は、日本語入力モードになっていないことを確認してみてください。英数字入力モードで入力をしないと、プログラムは数字と見なしません。
プログラムはどの様になっているのでしょうか。JavaScriptの部分ではvalue_onchange()という関数が1つだけ定義されています。この関数では、テキストフィールドであるa、b、sumの要素を特定し、「sum.value = parseInt(a.value) + parseInt(b.value);」によって、id属性がsumのテキストフィールドの値を変更しています。ここででてくる「parseInt()」は、文字列を数字に変更する関数です。id属性がaのテキストフィールドと、id属性がbのテキストフィールドの値をそれぞれ数字にし、その和をid属性がsumのテキストフィールドの値としてセットしています。
value_onchange()が呼ばれるタイミングは、いつものようにHTMLの中のでイベントハンドラとして定義されています。onchangeは、値が変化した時に発せられるイベントです。つまり、左辺のどちらかのテキストフィールドの値が変化した場合に、value_onchange()が呼び出されます。1つの関数が2種類のイベントから呼び出されていることに注意してください。
ちなみに、「style="float:left;"」は、式が横に並ぶようにスタイルを指定したものです。
これまで、document.write()を使って文字をページに出力する方法を使ってきました。しかし、アプリケーションを作っていると、後からページの中に文字を表示したいことがあります。このような時は、document.write()ではうまく行きません。document.write()を使うと、新しいページが開いてしまうからです。このような時にはエレメントのinnerHTMLプロパティを使います。
これまでにも、text型のinput要素を使って後から計算の回答を表示したりしてきました。innterHTMLはこれに近いものです。innerHTMLプロパティを使うためには、div要素などを使って予め表示する領域を要素としてHTMLを使って確保しておきます。例えば、 HTMLで「<div id="result"></div>」の様にしてdiv要素を作った場合、プログラムの中で「e = documnt.getElementById("result");」のようにして要素を取得し、変数「e」のinnerHTMLプロパティの中身を書き換えます。innerHTMLプロパティには、HTMLを代入することができます。これによって、HTMLで作った空のdiv要素の中にHTML文書を後からプログラムで埋め込むことが出来るようになります。使用例は以下の練習問題を参照してください。
<script type="text/javascript">
function power() {
var n = document.getElementById("n").value;
var ansElement = document.getElementById("answerArea");
var p;
var i = 0;
ansElement.innerHTML = "";
do {
p = Math.pow(2, i);
ansElement.innerHTML += "2<sup>" + i + "</sup> = " + p + "<br />";
i++;
} while (p < n);
}
</script>
<form>
<input id="n" type="text"><input type="button" value="OK" onclick="power()">
</form>
<div id="answerArea"></div>
この授業で学習する言語としてJavaScriptを選んだ理由には、世の中の人々がWebを介して提供しているサービスを活用できるという点があります。ここでは、Webサービスについてみていきたいと思います。
これまで学習してきたように、JavaScriptはブラウザ上で動作をする言語です。このため、JavaScriptのプログラムをブラウザに読み込む事さえ出来れば、プログラムを実行することができます。もう少し言うと、別の人が作った関数でもブラウザ上に読み込む事ができれば、それを利用することができるのです。
Webサービスの概念
このようなJavaScriptの特徴を利用して、Web上では様々な人々によって様々なサービスが提供されています。以下、このようなサービスについてみていきましょう。
まずは原理を理解する為に、他の人が作ったプログラムを利用してみましょう。http://ipl.sfc.keio.ac.jp/text/pro-2011-9/lib/triangle.jsに三角形を求めるプログラムが置いてあります。実際の中身がどうなっているかはリンクをクリックしてみてください。この関数はtriangle()という関数で、baseとheightの二つの引数をとります。baseが底辺、heightが高さを表しており、底辺×高さ÷2の公式に基づいて面積を計算して変数areaに格納しています。その後、return文によってareaを返り値として関数を終わっています。
このプログラムを実際に利用する為には下記のように記述します。1行目がhttp://ipl.sfc.keio.ac.jp/text/pro-2011-9/lib/triangle.jsにある、予め用意されたプログラムを取り込んでいる部分です。これを呼び出すプログラム本体は別の<script>ブロックで記述します。
<script type="text/javascript" src="http://ipl.sfc.keio.ac.jp/text/pro-2011-9/lib/triangle.js"> <script type="text/javascript"> /* * プログラム本体 */ </script>
下記は実際に使ってみたプログラムです。
<script type="text/javascript" src="http://ipl.sfc.keio.ac.jp/text/pro-2011-9/lib/triangle.js"></script>
<script type="text/javascript">
document.write("面積は" + triangle(5, 3) + "です。");
</script>
上記のプログラムを実際に実行すると、下記のような結果になります。関数triangle()を自分で定義することなく、triangle()関数を使う事ができていますね。
実際には世の中ではより複雑なWebサービスが提供されています。これらの多くは、上記のような関数を提供しているだけではなく、その裏で様々なコンテンツすら提供しています。これは、Webサービスが用意している関数(Application Program Interface、APIなどと呼ばれます)を自分が作ったプログラムから呼び出すと、その関数が必要なサーバと通信を行い、コンテンツを提供するのです。下記にその概念を示します。
Webサービス実現の仕組み
では実際にコンテンツを提供しているようなWebサービスを利用してみましょう。
下記は良くみかけるGoogle社が提供するGoogle Mapsを貼付けたものです。このプログラムは実は簡単に実現する事ができます。
上記を実現するプログラムは下記のようになっています。これまでのプログラムに比べれば幾らか長いかもしれませんが、一つ一つみていけば、そんなに難しくありません。では、早速みていきましょう。
<div id="map" style="width:300px;height:300px"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// 地図の中心を決める
var latlng = new google.maps.LatLng(35.388276, 139.427348);
// 地図を表示するためのオプションを設定する
var opt = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// 地図を表示する。
var map = new google.maps.Map(document.getElementById('map'), opt);
</script>
まず、1行目はHTMLの部分です。ここではdivタグを使って地図を表示するエリアを確保しています。ここでは、idとstyleの2つの属性が指定されており、id属性によってIDを「map」に、style属性によってエリアのサイズを幅300px(ピクセル)、高さ300px(ピクセル)に設定しています。
3行目はGoogle Maps用のAPIの読み込みです。Google MapsのAPIはhttp://maps.google.com/maps/api/jsにあります。そこで、Google Maps APIを利用するためにこのプログラムを読み込む必要があります。このとき、1つ注意があります。APIを読み込む際のオプションです。Google Maps API v3には幾つかのオプションが存在します。その内、sensorオプションだけは必須で、trueかfalseかを明示しなければなりません。sensorオプションは、ブラウザが動いている側のコンピュータやスマートフォンから位置情報を取得するかどうかを指定するものです。ここでは、地図を表示するだけで、位置情報を取得する必要は無いためfalseが指定されています。Google Maps API v3には他にもオプションが存在します。詳しくはGoogle Maps APIのページで調べてみてください。
4行目から19行目までが実際のプログラムです。と言っても始めの2行と終わりの2行は決まり文句なので、その間がプログラムになります。まず、7行目では、表示する地図の中心点を決めています。google.maps.LatLng()で新しいオブジェクトを作っているのですが、あまり細かいことは気にせず、ここでは引数に緯度と経度を指定して、その結果をlatlngという変数に格納していると思ってください。10行目から14行目は実際に地図を表示する時のパラメータを設定しています。zoomが地図の縮尺を示すもので15に指定されています。同様に、地図の中心を示すcenterが先ほど生成した変数であるlatlng、地図のタイプを示すmapTypeIdが道路地図(google.maps.MapTypeId.ROADMAP)に設定されています。そして、それら全体がoptという変数に格納されています。実は、このようなプロパティ(zoom:やcenter:のようなもの)の使用方法についてはまだ説明していないのですが、こういうものだと思っておいてください。そして17行目がいよいよ地図を表示している部分です。document.getElementById('map')を使ってWebページにおいて地図を表示すべき場所を特定し、optに設定されたパラメータを使って地図を表示しています。
Google Maps APIのより詳しい使い方については、上にもありますが、Google Maps JavaScript API V3を参照してください。このページの「チュートリアル」や「ドキュメント」を参照すると良いでしょう。
中心緯度経度を指定できる地図
あまりプログラミングとは言えないのですが、折角なのでホームページを強化してみましょう。もし、twitterのアカウントを持っている場合は、Follow Buttonを追加してみましょう。Follow Buttonのページを開いてください。「What's your user name?」の所に自分のIDを入力すると、「Preview your follow button」のところが変化しますね。更にその下にある「Copy and paste this into the HTML for your website wherever you want the button to appear.」の部分も連動して変化します。実は、この部分はよく見るとHTMLとJavaScriptのソースコードになっています。これを記事として貼付けてみましょう。フォローボタンのページができましたね。これを他のユーザがクリックするとあなたをフォローする事ができます。
Twitterのフォローボタンの記事
同じようにしてTwitter Widgetを作る事もできます。Select Your Widgetのページにアクセスしてみてください。ここから「My Website」を選択すると「Profile Widget」「Search Widget」といったリストが表示されます。このうちの1つを選んで設定をしていくとWidget用のソースコードが生成されます。これを同様に記事に貼付けると、Widgetのページが作成されます。
Search Widgetの例
しかし、FollowボタンやWidgetは出来れば、記事ではなくサイドバー等に表示したいですよね。その為には、ダッシュボードの「外観」から「ウィジェット」を選んで、「利用できるウィジェット」の中から「テキストウィジェット」を選んで、右にある「ウィジェットエリア1」にドラッグアンドドロップしてください。
テキストウィジェットをドラッグ&ドロップ
そうすると、テキストエリアが開きますので、先ほどのソースコードをペーストしてみてください。
テキストエリアへのソースコードの貼付け
ここで「保存」を押して自分のホームページのトップページへ戻ってみましょう。テキストエリアにFollowボタンやウィジェットが追加されましたね。もし、横がはみ出したりした場合は、貼付けたソースコードを眺めて、widthの値を変えるなどしてみてください。
ウィジェットを貼付けたトップページ
同じようにすることによって、トップページのサイドバーに自分が作ったプログラムを埋め込む事もできます。是非、いろいろやってみてください。