ようこそJavaScriptの世界へ：初心者のためのJavaScript入門（1）（1/4 ページ）
JavaScriptで本格的なプログラミングの世界に触れてみよう。連載を通じて実用的なアプリケーションを作れるようになるはず！？（編集部）
JavaScriptってよく聞くけど何だろう？
JavaScriptは、Webブラウザ上で動かすことのできる簡単なプログラム言語です。HTMLだけでは動くWebページはできませんが、JavaScriptを使うとWebページにさまざまな動きを入れることができるようになります。
プログラム言語と聞くと、なんだか難しそうに感じてしまうかもしれませんが、心配はいりません。
本講座は、HTMLは分かるけどプログラムを書いたことがないという人や、デザインは得意だけどプログラムは全然分からない！ 文科系で数学は苦手！ という人が理解できるような入門講座として、JavaScriptの基本から進めていきます。
用意するものはメモ帳などのテキストエディタとWebブラウザだけです。
JavaScriptはほとんどのWebブラウザで動きますが、Webブラウザによって若干の違いがあります。各ブラウザでの違いについては機会があれば解説したいと思いますが、この講座ではInternet Explorerを使用します。
Internet Explorerのバージョンは6以上であれば問題ありませんが、開発ツールが標準で付いているInternet Explorer 8がおすすめです。
難しい説明は抜きにして、実際にJavaScriptを動かしてみましょう。重たいWebページだと動きが悪くなる可能性があるので、＠ITトップページなどの動作の軽いページに移動してから試してみてください。
下のスクリプトを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」というのが「なんだか怪しい！」と思った人はプログラムのセンスがあるかもしれません。このプログラムの一番重要な箇所です。
document.write(★);
と書くことで、Webブラウザは「★」の部分に書かれた内容を表示します。
サンプルでは"こんにちは。"という内容が書かれていたため、Webブラウザは「こんにちは。」と表示したのです。「document.write」については、また後で詳しく説明します。
5行目：</script>
「ここでJavaScriptのプログラムは終了」ということをWebブラウザに知らせています。
実際の動作を決めているのは4行目のプログラムの部分だけです。次章からは、4行目以外はそのままで、プログラム部分だけを書き換えていきます。
Copyright © ITmedia, Inc. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。