初心者のためのJavaScript入門

第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ページだと動きが悪くなる可能性があるので、＠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ブラウザで開くと、次のような画面が表示されます。

サンプル1
【注意】
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行目以外はそのままで、プログラム部分だけを書き換えていきます。

 
1/4
 next

Index
ようこそJavaScriptの世界へ
　 Page1
JavaScriptってよく聞くけど何だろう？
JavaScriptを書いてみよう
サンプルを理解してみる
  Page2
document.writeって何？
計算結果を表示させてみよう
  Page3
表示をつなげるには？
  Page4
複数行で表示するには？
ようこそJavaScriptの世界へ

index 初心者のための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の世界を体験してみよう
　　Coding Edgeフォーラムフィード　 2.0／1.0／0.91

TechTargetジャパン

Coding Edge フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH