第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
- PHPでGAE上に社員検索アプリを作る （2010/3/18）
GAEの制約により使うことができなかったテンプレートエンジン。PHP4GではSmartyが使えるようになった - 構造体の便利な用途、インターフェイス入門 （2010/3/10）
継承機能を排除したインターフェイス機能でダックタイピングが可能となった。サンプルで確かめてみよう - プライベートモードの履歴状態 （2010/3/1）
仕事に集中できるときと、なかなかできないとき、ありますよね。状態遷移図で考えてみよう - Goのswitch文で解くFizzBuzzと構造体のイントロ （2010/2/25）
Goではif文と同等の制御構造をswitch文で表現できる。試してみよう
 |
|
|
|
|
スキルアップ／キャリアアップ（JOB@IT）
スポンサーからのお知らせ
 |
「いつかは壊れるサーバ」そんな故障に 迅速で安価に手軽に対応する方法とは？ New！ |
 |
「特権ユーザー」の事件を防げ！ 万能権限を持つユーザーの管理方法とは？ New！ |
 |
仮想環境の構築とデータ保護の特効薬？！ 実績と信頼性の高いパッケージで安心運用 |
 |
仮想環境のバックアップもこれまでどおり 「まるごと取ってまるごと戻す」簡単運用 |
 |
おばかアプリ選手権、第４弾開催中！！ ムダにカッコよくてくだらない作品求ム！ |
 |
社内ファイルサーバを“クラウド”に統合 VPN直結「クラウド型ストレージ」を紹介 |
 |
その数、なんと400台以上！ グループ内 サーバの「統合管理」によるメリットは？ |
 |
美人!? まあまあ？ 気になる いやし系!! PV急増で「美人時計」がとった手段とは？ |
 |
進化を続ける富士通ストレージETERNUS DX 製品開発者の自信を裏付けるものとは何か |
 |
運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは？ |
お勧め求人情報
*＊先週の人気講座ランキング＊*
〜CCNA編〜
| ◆ | TomcatやJBossなどAPサーバ環境に関する 情報を集約！ “業務”用APサーバ大百科 New！ |
| ◆ | 一気に解説！ 最新のクラスタストレージ 「RAIDを超えたストレージ基準」……など New！ |
| ◆ | クラウド的ユーザー体験の変化は脅威か？ 仮想化技術を使いこなす運用管理術を紹介 New！ |
| ◆ | 上司や部下、部署内メンバーとの情報共有 を“ガラッ”と変えるコラボツールとは？ New！ |
| ◆ | おばかアプリ選手権、第４弾開催中！！ ムダにカッコよくてくだらない作品求ム！ |
| ◆ | 社内ファイルサーバを“クラウド”に統合 VPN直結「クラウド型ストレージ」を紹介 |
| ◆ | Twitterのアカウントはなぜ突破された？ メールによる新手の攻撃手法とその対策 |
| ◆ | もう仮想化のお試しフェイズは終わりだ！ Hyper-V 2.0が基幹システムも仮想化 |
| ◆ | 美人!? まあまあ？ 気になる いやし系!! PV急増で「美人時計」がとった手段とは？ |
| ◆ | クライアント企業から求められる人材 ⇒IT技術と経営戦略を併せ持つ「戦略家」 |
| ◆ | .NET編集長が実践する「技術情報検索術」 サンプル・コードを簡単に探す“技”は？ |
| ◆ | 業務効率と情報セキュリティ対策を両立！ 手間なく確実に機密情報を守る方法とは？ |
| ◆ | 進化を続ける富士通ストレージETERNUS DX 製品開発者の自信を裏付けるものとは何か |
| ◆ | 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは？ |
| ◆ | 【CTC事例】約30の基幹システムを統合！ 膨大なバッジジョブを制御した方法は？ |
| ◆ | 仮想化すればコストは削減できるか？ 仮想化に必要な「3つの視点」を解説する |
| ◆ | その数、なんと400台以上！ グループ内 サーバの「統合管理」によるメリットは？ |
著作権はアイティメディア株式会社またはその記事の筆者に属します。（著作権について）
当サイトに掲載されている記事や画像などの無断転載を禁止します。
「＠IT」「＠IT自分戦略研究所」「＠IT情報マネジメント」「JOB＠IT」「＠ITハイブックス」「＠IT MONOist」「ITmedia」「誠」「BARKS」は、アイティメディア株式会社の登録商標です。
当サイトに関するお問い合わせは「＠ITへのお問い合わせ」をご覧ください。