JavaScriptってすごい！ [プログラミング]
こんにちは。昨年秋にMacBook Airを衝動買いした話は前に書きましたが，プログラミングを楽しむにはObjective-CよりもJavaScriptの方が手軽かつ強力であるということがわかってきました。
App Store用のアプリを作るならObjective-Cの方が手堅いのかも知れませんが，時代はWebアプリに向かっている雰囲気もあり，そうであればJavaScriptの方が機種を選ばない分だけ手広そうです。いずれにしても，プロトタイプ作成ツールとしては大いに使えそうなので，この機会に勉強しておこうと思いました。
何冊か本を読んだりぐぐったりしてわかったのは「JavaScriptってすごい！」ということでした。今日は簡単なプログラムを紹介しつつ，そのあたりの話を。いきなりで恐縮ですが，JavaScriptプログラムは以下のとおり。これを拡張子.htmlで保存して適当なブラウザで呼び出すと，だいたい何をやっているかわかると思います。
初めての方は面食らうかも知れませんが，決して難しくありません。まず，始めの二行くらいはおまじないだと思ってください（ワタクシもよくわかっていません）。以下，<html>・・・</html>のブロックがあり，その中に<head>・・・</head>，<body>・・・</body>，<script>・・・</script>の三つのブロックがあります。このあたりはそういうものだと思ってください。なお，改行やスペースは自由に入れてかまいません。
<head>・・・</head>のブロックは，初期設定関係だと思ってください。ここでは二行ありますが，前の一行は文字コードに関してであり，後の一行はページの表題の文字列を指定しており，ブラウザのいちばん上に表示されます。
<body>・・・</body>のブロックは，そのまま画面表示に直結すると思ってください。ここでは，<p>・・・</p>，<form>・・・</form>の二つのブロックがあります。<p>・・・</p>は「こんにちは。」を表示する段落を表し，<form>・・・</form>はボタンを表します。このボタンを押すとchange()という関数を呼び出しますが，この関数の実態は<script>・・・</script>で定義されています。
<script>・・・</script>はまさにJavaScriptプログラムを記述しているところです。ここではボタンを押した際に呼び出される関数change()を定義しています。具体的には，infoというid（識別記号）を持つオブジェクト，ここでは「こんにちは。」という段落を意味しますが，これの中身（innerHTML）をごっそりコピーして二倍に置き換えています。ボタンを何回か押すと「こんにちは。」で満ちあふれることでしょう。
こんなに簡単なプログラムですが，強力な画面操作ができることがおわかりいただけたでしょうか。次回はグラフィックに挑戦したいと思います。おしまい。
＜補足１＞htmlファイルの編集はテキストエディタで行うことになりますが，Macだと標準の「テキストエディット」を使うのが手軽でしょう。ただし，環境設定をやっておかないとハマります。具体的には，①書類のファーマットを標準テキストにする，②スマート引用符をOFFにする，③エンコーディングをUTF-8にする。特に②は重要で，Macの場合，全角のダブルコーテーション記号が半角並に「薄い」ので，なかなか見分けがつきません。ワタクシはこれで二日ほどハマりました^^;
＜補足２＞＜補足１＞の③に関連して，Windows環境でhtmlファイルの編集をメモ帳で行う場合も，ファイル保存時の文字コード指定をUTF-8にしなければいけません。ただし，コード中の<meta charset="UTF-8"/>を<meta charset="Shift_JIS"/>するならば，ANSIのままでよい。
＜補足３＞関数change()の戻り値をfalseにしているのは，<form>要素にsubmitイベントを渡す際にonsubmitで定義した処理だけにとどめたいためです。<form>要素は，submitイベントを受け取るとaction="･･･"で定義されるウェブリソース（URL）とのアクセスを開始するのが本来の処理ですが，onsubmitで定義した処理に迂回させることもできます。その際，特段アクセスしたいURLがない場合には，onsubmitで定義した処理の最終的な値がfalseにしておけば，本来の処理に届かないというわけです。
＜補足４＞＜補足３＞の続きですが，そうであれば関数change()をやめて，代わりにonsubmit='document.getElementById("info").innerHTML=document.getElementById("info").innerHTML+document.getElementById("info").innerHTML;return false;'と直接書いてもうまくいきそうですが，なぜかうまくいきません。。
参考URL：http://www.atmarkit.co.jp/fcoding/index/js.html
参考URL：http://www.htmq.com/htmlkihon/index.shtml
App Store用のアプリを作るならObjective-Cの方が手堅いのかも知れませんが，時代はWebアプリに向かっている雰囲気もあり，そうであればJavaScriptの方が機種を選ばない分だけ手広そうです。いずれにしても，プロトタイプ作成ツールとしては大いに使えそうなので，この機会に勉強しておこうと思いました。
何冊か本を読んだりぐぐったりしてわかったのは「JavaScriptってすごい！」ということでした。今日は簡単なプログラムを紹介しつつ，そのあたりの話を。いきなりで恐縮ですが，JavaScriptプログラムは以下のとおり。これを拡張子.htmlで保存して適当なブラウザで呼び出すと，だいたい何をやっているかわかると思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<title>てすと</title>
</head>
<body>
<p id="info">こんにちは。</p>
<form onsubmit="return change();">
<input type="submit" value="倍増">
</form>
</body>
<script type="text/javascript">
function change(){
document.getElementById("info").innerHTML=document.getElementById("info").innerHTML+document.getElementById("info").innerHTML;
return false;
}
</script>
</html>
初めての方は面食らうかも知れませんが，決して難しくありません。まず，始めの二行くらいはおまじないだと思ってください（ワタクシもよくわかっていません）。以下，<html>・・・</html>のブロックがあり，その中に<head>・・・</head>，<body>・・・</body>，<script>・・・</script>の三つのブロックがあります。このあたりはそういうものだと思ってください。なお，改行やスペースは自由に入れてかまいません。
<head>・・・</head>のブロックは，初期設定関係だと思ってください。ここでは二行ありますが，前の一行は文字コードに関してであり，後の一行はページの表題の文字列を指定しており，ブラウザのいちばん上に表示されます。
<body>・・・</body>のブロックは，そのまま画面表示に直結すると思ってください。ここでは，<p>・・・</p>，<form>・・・</form>の二つのブロックがあります。<p>・・・</p>は「こんにちは。」を表示する段落を表し，<form>・・・</form>はボタンを表します。このボタンを押すとchange()という関数を呼び出しますが，この関数の実態は<script>・・・</script>で定義されています。
<script>・・・</script>はまさにJavaScriptプログラムを記述しているところです。ここではボタンを押した際に呼び出される関数change()を定義しています。具体的には，infoというid（識別記号）を持つオブジェクト，ここでは「こんにちは。」という段落を意味しますが，これの中身（innerHTML）をごっそりコピーして二倍に置き換えています。ボタンを何回か押すと「こんにちは。」で満ちあふれることでしょう。
こんなに簡単なプログラムですが，強力な画面操作ができることがおわかりいただけたでしょうか。次回はグラフィックに挑戦したいと思います。おしまい。
＜補足１＞htmlファイルの編集はテキストエディタで行うことになりますが，Macだと標準の「テキストエディット」を使うのが手軽でしょう。ただし，環境設定をやっておかないとハマります。具体的には，①書類のファーマットを標準テキストにする，②スマート引用符をOFFにする，③エンコーディングをUTF-8にする。特に②は重要で，Macの場合，全角のダブルコーテーション記号が半角並に「薄い」ので，なかなか見分けがつきません。ワタクシはこれで二日ほどハマりました^^;
＜補足２＞＜補足１＞の③に関連して，Windows環境でhtmlファイルの編集をメモ帳で行う場合も，ファイル保存時の文字コード指定をUTF-8にしなければいけません。ただし，コード中の<meta charset="UTF-8"/>を<meta charset="Shift_JIS"/>するならば，ANSIのままでよい。
＜補足３＞関数change()の戻り値をfalseにしているのは，<form>要素にsubmitイベントを渡す際にonsubmitで定義した処理だけにとどめたいためです。<form>要素は，submitイベントを受け取るとaction="･･･"で定義されるウェブリソース（URL）とのアクセスを開始するのが本来の処理ですが，onsubmitで定義した処理に迂回させることもできます。その際，特段アクセスしたいURLがない場合には，onsubmitで定義した処理の最終的な値がfalseにしておけば，本来の処理に届かないというわけです。
＜補足４＞＜補足３＞の続きですが，そうであれば関数change()をやめて，代わりにonsubmit='document.getElementById("info").innerHTML=document.getElementById("info").innerHTML+document.getElementById("info").innerHTML;return false;'と直接書いてもうまくいきそうですが，なぜかうまくいきません。。
参考URL：http://www.atmarkit.co.jp/fcoding/index/js.html
参考URL：http://www.htmq.com/htmlkihon/index.shtml
コメント 0