Changes between Initial Version and Version 1 of HowTo/JavaScriptTutorial


Ignore:
Timestamp:
Jun 16, 2010, 9:04:53 AM (14 years ago)
Author:
村山 俊之
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • HowTo/JavaScriptTutorial

    v1 v1  
     1= !JavaScript チュートリアル =
     2
     3== !JavaScript って何? ==
     4
     5PC 上で動作する主要な Web ブラウザに必ずと言っていいほど搭載されているスクリプト言語です。
     6
     7単体で動作する !JavaScript インタプリタも存在しますが、主な用途は基本的には Web アプリケーションのクライアントサイドプログラムとなります。
     8
     9=== クライアントサイドプログラムとは? ===
     10
     11CGI がブラウザ (クライアント) からの要求を受けてサーバーサイドでプログラムを動作させる仕組みであるのに対し、ブラウザ上、すなわちクライアントサイドでプログラムを動作させる仕組みのことをこう呼んでいます。
     12
     13元々は、サーバーとの通信を必要としない動作 (画面表示の動的な変化、等) を記述する目的で使われていましたが、 Ajax と呼ばれる通信機能により、最近ではページ読み込みの待ち時間によるストレスを感じさせない UI 作りや、Google Map に代表されるようなリッチな UI の実装などに大きく貢献するようになってきています。
     14
     15== とりあえず使ってみよう ==
     16
     17=== どうやって使うの? ===
     18
     19!JavaScript は HTML と一緒にブラウザに読み込ませて使います。従って、基本的には HTML ファイルの中に直接記述してしまいますが、別ファイルに !JavaScript のスクリプトファイル単体として記述することも可能です。
     20
     21まずは、最も簡単な例から見てみましょう。以下のサンプルプログラムは、ブラウザ上に「hoge」と書かれたボタンが表示され、それをクリックすると、メッセージボックスに「hoge」と表示する、というものです。
     22
     23{{{
     24<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
     25<html>
     26
     27<head>
     28  <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
     29  <title>hoge</title>
     30</head>
     31
     32<body>
     33
     34<form>
     35<input type="button" value="hoge" onclick="alert('hoge');">
     36</form>
     37
     38<div style="position: absolute; left: 0; top: 0;" id="hoge_place"></div>
     39
     40</body>
     41
     42</html>
     43}}}
     44
     45=== 動かしてみる ===
     46
     47上記のサンプルプログラムをテキストエディタに記述したら、拡張子 .html で保存し、そのファイルを Web ブラウザ (IE、Firefox、Safari、Opera、etc...) にドラッグ＆ドロップするなどして読み込ませれば動かせるはずです。
     48
     49IE の場合、画面上部に警告メッセージの黄色い帯が表示されるかも知れませんが、その場合は帯の部分をクリックし、表示されるコンテキストメニューの「ブロックされているコンテンツを許可...」を選択してください。
     50
     51=== イベントハンドラ ===
     52
     53上記のサンプルの中で、 !JavaScript が用いられているのは、以下の部分です。
     54
     55{{{
     56<input type="button" value="hoge" onclick="alert('hoge');">
     57}}}
     58
     59<input> 要素に onclick という属性が存在し、その値として、 !JavaScript によるプログラムが記述されています。
     60
     61onclick 属性は、その要素がクリックされたときに、値に指定されたプログラムを実行せよ、という意味のものです。この手の属性は、他にも以下のようなものが存在します。(本当は他にももっといろいろ存在します…)
     62
     63 * onmousemove ... その要素が表示されている箇所でマウスカーソルが動いたら、プログラムを実行する。
     64 * onmousedown ... その要素が表示されている箇所にマウスカーソルが存在するときに、マウスのボタンが押し下げられたら、プログラムを実行する。 (onclick が押して放さないと認識されないのに対し、こちらは押しただけで認識される)
     65 * onmouseup ... その要素が表示されている箇所にマウスカーソルが存在するときに、マウスのボタンが放されたら、プログラムを実行する。
     66 * onkeydown ... キーボードのキーが押されたら、プログラムを実行する。
     67 * onkeyup ... キーボードのキーが放されたら、プログラムを実行する。
     68 * onload ... HTML ファイルが読み込まれたら、プログラムを実行する。
     69 * onfocus ... その要素にフォーカスが移ったら、プログラムを実行する。例えば、入力欄をクリックするなどしてカーソルが表示されるようになるタイミングで、その入力欄の <input> 要素に onfocus 属性があれば、その値が実行される。
     70 * onchange ... コンボボックス (<select> 要素) の選択されている値が変化したら、プログラムを実行する。
     71 * …などなど。
     72
     73このような、「○○されたら××する」というプログラム上の仕組みのことを、'''イベントハンドラ'''と呼びます。多くの場合、 !JavaScript はイベントハンドラから実行されるように記述します。
     74