/bonvhp/webapp/JavaScript       [後へ]   [目次へ]   [次へ] ～ [] ～

JavaScript:記述方法

JavaScript は、HTML 内に埋め込んで使います。
記載方法は、主に 3通りあります。

●外部ファイルで定義

JavaScript を HTML とは別のファイルで作成し、
HTML の <head> 内にインクルードします。

具体例ですが、
document.write("Hello");
とだけ書いたファイル sample.js というファイルを用意します。
# 拡張子は何でもいいのですが、
# 一般的に js を使用します。

下記のように書いた sample.html を用意します。
<html>
  <head>
    <script type="text/javascript" src="sample.js"></script>
  </head>
  <body>
  </body>
</html>

この HTML と同じディレクトリに sample.js を置きます。

この HTML をブラウザで読み込ませて、
画面に

Hello

と表示されれば OK です。
# document.write は、
# 画面に文字列を表示するメソッドです。

sample.js を他の HTML にも同様にインクルードすると、
全体で共通のコードを使用できます。
サンプル・プログラムも、同様の仕組みで、
main.js を使っています。

●HTML内の <script>

<head> 内の <script> で記述します。

具体例ですが、
下記のように書いた sample.html を用意します。

<html>
  <head>
    <script type="text/javascript">
    <!--
      document.write("Hello");
    // -->
    </script>
  </head>
  <body>
  </body>
</html>

この HTML をブラウザで読み込ませて、
画面に

Hello

と表示されれば OK です。

データ入力画面で、
ユーザーの入力内容をチェックする場合など、
ページ毎に必要なコードを書くときに便利です。

●HTMLのタグ内

HTML の各タグに直接適用します。

具体例ですが、
下記のように書いた sample.html を用意します。

<html>
  <body>
    <span onClick="alert('Hello')">ここをクリック</span>
  </body>
</html>

この HTML をブラウザで読み込ませます。
画面に表示された「ここをクリック」部分を、
マウスでクリックすると、

Hello

とダイアログがポップアップすれば OK です。
# alert は、メッセージをポップアップ表示します。
# onClick は、そのタグ要素をクリックした時に呼ばれます。(詳細は、後述)

ボタンやリンクをクリックした場合など、
ユーザー・アクションに反応して動作させる場合などに便利です。
/bonvhp/webapp/JavaScript       [後へ]   [目次へ]   [次へ]