第1回 ようこそJavaScriptの世界へ
小島 尚基
有限会社インテレクトキューブ
2009/11/18
JavaScriptで本格的なプログラミングの世界に触れてみよう。連載を通じて実用的なアプリケーションを作れるようになるはず！？（編集部）
JavaScriptってよく聞くけど何だろう？
- - PR -
JavaScriptは、Webブラウザ上で動かすことのできる簡単なプログラム言語です。HTMLだけでは動くWebページはできませんが、JavaScriptを使うとWebページにさまざまな動きを入れることができるようになります。
プログラム言語と聞くと、なんだか難しそうに感じてしまうかもしれませんが、心配はいりません。
本講座は、HTMLは分かるけどプログラムを書いたことがないという人や、デザインは得意だけどプログラムは全然分からない！ 文科系で数学は苦手！ という人が理解できるような入門講座として、JavaScriptの基本から進めていきます。
用意するものはメモ帳などのテキストエディタとWebブラウザだけです。
JavaScriptはほとんどのWebブラウザで動きますが、Webブラウザによって若干の違いがあります。各ブラウザでの違いについては機会があれば解説したいと思いますが、この講座ではInternet Explorerを使用します。
Internet Explorerのバージョンは6以上であれば問題ありませんが、開発ツールが標準で付いているInternet Explorer 8がおすすめです。
難しい説明は抜きにして、実際にJavaScriptを動かしてみましょう。重たいWebページだと動きが悪くなる可能性があるので、Google画像検索のような動作の軽いページに移動してから試してみてください。
下のスクリプトを1行でコピーして、Internet Explorerのアドレスバーに貼り付けてみてください（Internet Explorer 6以上で実行してください）。動きを止めたいときは、Webページをリロードします。
javascript:var r=0;var es = document.images;var ln = es.length;setInterval(function(){for (var i = 0; i < ln; i++) {var cs= es[i].style; cs.position = 'absolute';var red = i*10+Math.PI * r/180; cs.top= 200*Math.cos(red)+200; cs.left= 200*Math.sin(red)+200;}r+=5},5); void(0)突然、画像ファイルが動き始めたのでびっくりされたかもしれません。今度は、Internet Explorerのフィルタ機能とJavaScriptを組み合わせて使ってみます。
先ほどのスクリプトがまだ動いている場合は、Webページをリロードして一度動きを止めてから、下のスクリプトをInternet Explorerのアドレスバーに張り付けてみてください。
javascript:var oh=document.body.innerHTML; wavePhase=0;setInterval(function(){document.body.innerHTML='<div id="wb" style="height:0px;filter:wave(freq=4, lightstrength=0, phase='+(wavePhase++) +', strength=50)">'+oh+'</div>';},100);void(0)さらに、もっとダイナミックなことをやってみましょう。同じくWebページをリロードして動きを止めてから、下のスクリプトをInternet Explorerのアドレスバーに張り付けてみてください。
javascript:var deg = 0; setInterval(function() { deg += 5; red = deg * Math.PI / 180; cos = Math.cos(red); sin = Math.sin(red); document.body.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+cos+",M12="+sin+",M21="+(-sin)+",M22="+cos+",sizingMethod='auto expand')"; }, 10); void(0)これらは、ブックマークレットといって、Webブラウザのアドレスバーに直接JavaScriptを書き込んで実行するものです。ブックマークとしてJavaScriptを登録しておけば、好きなページでブックマークを呼び出すだけでプログラムが実行できます。
いまは何をやっているのか分からなくても、連載を最後まで読むと簡単にできるようになります！
JavaScriptを書いてみよう
普通の入門講座だと、プログラムの歴史や、専門用語の解説から入るものが多いですが、プログラムの面白さを体験してもらうには、実際に動かしてもらうのが一番だと思います。最初はコピー＆ペーストでいいので、是非サンプルに挑戦してみてください。
テキストエディタを起動して、次のサンプルをコピー＆ペーストして、「javascript.html」という名前で保存してください。
<html>
<body>
<script type="text/javascript">
document.write("こんにちは。");
</script>
</body>
</html>保存したファイルをWebブラウザで開くと、次のような画面が表示されます。
Internet Explorerでは、PC上のJavaScriptを動かそうとするとセキュリティ警告が出ます。情報バーをクリックして、「ブロックされているコンテンツを許可」を選ぶとJavaScriptが実行されます。
サンプルを理解してみる
Webブラウザに「こんにちは。」という文字が表示できたでしょうか。先ほどのサンプルをもう少し詳しく見てみましょう。
3行目：<script type="text/javascript">
「ここからJavaScriptのプログラムが始まるよ」ということをWebブラウザに知らせています。
4行目：document.write("こんにちは。");
「document.write」というのが「なんだか怪しい！」と思った人はプログラムのセンスがあるかもしれません。このプログラムの一番重要な箇所です。
と書くことで、Webブラウザは「★」の部分に書かれた内容を表示します。
サンプルでは"こんにちは。"という内容が書かれていたため、Webブラウザは「こんにちは。」と表示したのです。「document.write」については、また後で詳しく説明します。
5行目：</script>
「ここでJavaScriptのプログラムは終了」ということをWebブラウザに知らせています。
実際の動作を決めているのは4行目のプログラムの部分だけです。次章からは、4行目以外はそのままで、プログラム部分だけを書き換えていきます。
1/4 |
 |
| Index | |
| ようこそJavaScriptの世界へ | |
 |
Page1 JavaScriptってよく聞くけど何だろう？ JavaScriptを書いてみよう サンプルを理解してみる |
| Page2 document.writeって何？ 計算結果を表示させてみよう |
|
| Page3 表示をつなげるには？ |
|
| Page4 複数行で表示するには？ ようこそJavaScriptの世界へ |
|
 |
初心者のためのJavaScript入門 |
| Coding Edgeお勧め記事 |
 |
いまさらアルゴリズムを学ぶ意味 コーディングに役立つ！ アルゴリズムの基本（1） コンピュータに「3の倍数と3の付く数字」を判断させるにはどうしたらいいか。発想力を鍛えよう |
|
Zope 3の魅力に迫る Zope 3とは何ぞや？（1） Pythonで書かれたWebアプリケーションフレームワーク「Zope 3」。ほかのソフトウェアとは一体何が違っているのか？ |
|
貧弱環境プログラミングのススメ 柴田 淳のコーディング天国 高性能なIT機器に囲まれた環境でコンピュータの動作原理に触れることは可能だろうか。貧弱なPC上にビットマップの直線をどうやって引く？ |
|
Haskellプログラミングの楽しみ方 のんびりHaskell（1） 関数型言語に分類されるHaskell。C言語などの手続き型言語とまったく異なるプログラミングの世界に踏み出してみよう |
|
ちょっと変わったLisp入門 Gaucheでメタプログラミング（1） Lispの一種であるScheme。いくつかある処理系の中でも気軽にスクリプトを書けるGaucheでLispの世界を体験してみよう |
フィード 2.0／1.0／0.91
- ［ニッチ］E4Xで攻撃できる？ できない？ （2010/2/8）
ECMAScriptでXMLを扱う「E4X」。ニッチかもしれませんが、攻撃の可能性があることだけは知っておきましょう - GAE上でLL＋RDBアプリを作ろう （2010/2/3）
開発者にとって魅力的な環境に映るGoogle App Engine。これまでの開発手法を変えずに使えないだろうか - 豆まきユースケースの包含 （2010/2/1）
デバッグが上手くいかず、気分転換にもらった豆をポリポリ。節分のユースケースを考え始めます - Apacheで仮想ホストを動かそう （2010/1/29）
1台のApacheサーバで、複数の公開サイトを提供するには？ 仮想ホストの設定の意味を知ろう
 |
|
|
|
|
スキルアップ／キャリアアップ（JOB@IT）
スポンサーからのお知らせ
お勧め求人情報
*＊先週の人気講座ランキング＊*
〜CCNA編〜
| ◆ | 企業の仮想化に足りない“発想”とは？ 仮想化運用管理のキモは意外なところに！ New！ |
| ◆ | 操作もマニュアルも分かりやすい！ ユーザー視点で開発されたPC管理ツール New！ |
| ◆ | 仮想化すればコストは削減できるか？ 仮想化に必要な「3つの視点」を解説する |
| ◆ | セキュリティを知り尽くす上野氏が登壇！ ＠ITメールソリューションLive! in Tokyo |
| ◆ | 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは？ |
| ◆ | 世界に通用するストレージの作り方とは？ 製品に込めた思いを富士通の開発者に聞く |
| ◆ | OSSで手間も時間も、障害も減った―― 「マピオンの事例」オープンソース活用法 |
| ◆ | 「ノートPCの持ち出し禁止」で大丈夫？ 情報漏えいを防ぐ管理手法とインフラは？ |
| ◆ | 1日の処理を1秒に――MySQLの達人が語る 「コスト削減」できるチューニング |
| ◆ | ドキュメント作成を自動化して、SEの作業 効率を大幅アップ！ Visio 2007の魅力 |
| ◆ | 急速に広がるHyper-Vでのサーバ仮想化 そのベストプラクティスをデルが解説 |
| ◆ | ＠IT主催セミナーで語られた、「担当者に 求められるセキュリティ対策」をレポート |
| ◆ | ＠IT「Windows 7」 特設サイトオープン！ 最新情報・移行ノウハウを公開しています |
著作権はアイティメディア株式会社またはその記事の筆者に属します。（著作権について）
当サイトに掲載されている記事や画像などの無断転載を禁止します。
「＠IT」「＠IT自分戦略研究所」「＠IT情報マネジメント」「JOB＠IT」「＠ITハイブックス」「＠IT MONOist」「ITmedia」「誠」「BARKS」は、アイティメディア株式会社の登録商標です。
当サイトに関するお問い合わせは「＠ITへのお問い合わせ」をご覧ください。