はじめてのAjaxプログラムを書いてみよう。

今回は Ajax のもっとも基本となるプログラムを書いてみましょう。JavaScript はいろいろな書き方ができます。もっと簡単に書くこともできますが、今後の発展を考えてこのようなサンプルにしました。

JavaScriptが初めての方は難しく感じるかもしれませんが、今後何回も同じようなソースコードを書いているうちに慣れてきます。どんな大きなプログラムも小さなプログラムの積み重ねです。今の段階で基本をしっかり押さえれば、後の学習が楽になります。

外部ファイルの書き方、div要素の参照方法、イベントハンドラの設定方法などに注目して読み進めてください。

＊Ajaxの特徴である非同期通信に関することは、まだ行なっていません。


【1】まずCドライブの直下に ajax フォルダを作成します。さらにその中に sample001 フォルダを作成してください。

C:\ajax

ajax-44.gif

この sample001 フォルダの中に各ファイルを作成します。


【2】今回は以下のようなファイルの構成になります。

ajax-45.gif

＊「\」はWindowsではエンマークのことです。

保存先　C:\ajax\sample001
ファイル名　test.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="test.js"></script>
    <link href="test.css" rel="stylesheet" type="text/css">
    <title>test</title>
  </head>
  <body>
    <div id="result"></div>
  </body>
</html>


保存先　C:\ajax\sample001
ファイル名　test.js

onload = init;
var result;

function init() {
  result = document.getElementById("result");
  calc();
}

function calc() {
  var a = 1;
  var b = 2;
  var c = a + b;
  result.innerHTML = "a + b = " + c;
}


保存先　C:\ajax\sample001
ファイル名　test.css

#result {
  font-size:24px;
  color:#0000cc;
}



以下は「test.html」を例にしたファイルの作成方法です。

【3】TeraPad を使って「test.html」を入力します。

ajax-53.gif


【4】メニューから 「ファイル → 文字/改行コード指定保存」をクリックします。

ajax-54.gif


【5】文字コードは「UTF-8」を選択し、初めて保存する場合は「名前を付けて保存」、修正の場合は「上書き保存」をチェックします。最後に「OK」ボタンをクリックします。

ajax-55.gif


【6】TeraPadのステータスバーに「UTF-8」と表示されていたらOKです。

ajax-56.gif


【7】「test.js」と「test.css」についても同じように、文字コードは UTF-8 で保存してください。

ブラウザでの動作確認は次回に行ないます。


【解説】

■test.html側

(1)文字コードを UTF-8 に設定している部分です。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

＊文字コードはファイルの保存時の文字コードと一致させます。


(2)外部ファイルに記述した JavaScript を読み込んでいる部分です。

<script type="text/javascript" src="test.js"></script>

＊外部ファイルの拡張子は「.js」にします。


(3)外部ファイルに記述したスタイルシートを読み込んでいる部分です。

<link href="test.css" rel="stylesheet" type="text/css">


(4)HTMLの div 要素に id 属性を設定している部分です。

<div id="result"></div>

＊JavaScriptからはidやname属性を使って参照できます。


■test.js側

(1)ページが読込まれた時に、独自で定義した init という関数を呼び出すための、イベントハンドラを設定しています。

onload = init;

＊JavaScriptの中でイベントハンドラを設定する場合は、関数名の後ろに()カッコが付かない点に注意してください。


(2)result という変数を宣言している部分です。

var result;

変数を宣言するときは先頭に var を付けます。JavaScriptでは変数の型を指定する必要はありません。代入するデータによって自動的に変わります。

＊この変数の有効範囲はプログラム全体です。


(3)result という id を持つ要素を見つけ出し、変数resultで参照します。

result = document.getElementById("result");


(4)独自に定義した calc() という関数を呼び出している部分です。

calc();

＊関数名の後ろに()カッコが付きます。


(5)変数の宣言と同時に値を代入しています。

var a = 1;
var b = 2;

＊この変数の有効範囲は関数内だけです。


(6)変数の宣言と同時に、計算結果を代入しています。

var c = a + b;

＊この変数の有効範囲は関数内だけです。


(7)変数resultで参照している div要素に、計算結果を出力しています。

result.innerHTML = "a + b = " + c;

innerHTML は動的にWebページを変更する時によく使われます。
＊innerHTML には文字列やHTMLタグも代入できます。


■test.css側

(1)resultというid属性を付けたdiv要素に、スタイルを設定しています。

#result {
  font-size:24px;
  color:#0000cc;
}

＊スタイルシートでは、id属性の場合は先頭に「#」シャープを付けて表します。


【ヒント】

JavaScriptがまったく初めての方は、 JavaScript初心者入門講座 の「JavaScriptとは？」、「JavaScript基礎の基礎」の項目だけでも先に学習することをおすすめします。

JavaScriptの基礎から、プログラムとデザインを分離するまでの経緯を説明しています。


スポンサード　リンク

スポンサード　リンク






Ajax初心者入門講座TOPへ