test.html 構造 ←実行する時はこれから
test.js プログラム
test.css デザイン
またHTMLファイルがどのソフトに関連付けられているかで、開き方が異なります。通常は Internet Explorer に関連付けられているので、ダブルクリックで簡単に開けます。
しかしパソコンに複数のWebブラウザをインストールしている場合は、関連付けが変更されているかもしれません。その場合は「ワンポイント」をご覧ください。
【1】「test.html」をダブルクリックして開きます。
C:\ajax\sample001
【2】情報バーについてのメッセージが表示されるので、「OK」ボタンをクリックします。
＊Internet Explorerで JavaScript を実行すると、ブロックされて警告がでます。これは情報バーを見てくださいというメッセージです。
【3】情報バーをクリックします。
【4】「ブロックされているコンテンツを許可」を選択します。
【5】セキュリティの警告が表示されますが、大丈夫なので「はい」ボタンをクリックします。
【6】プログラムの実行結果が、ブラウザの画面に表示されました。
【解説】
実行結果は最初からHTMLに書かれていたのではなく、JavaScriptで動的に表示したというところがポイントです。また文字のサイズや色はスタイルシート(test.css)で設定したものが反映されていますね。
非同期通信はしていませんが、これがAjaxの最も基本的な動きです。
【ワンポイント】
「.html」ファイルの拡張子が Internet Explorer に関連付けられていない場合は、ダブルクリックでは開けません。例えば「.html」が他のソフトに関連付けられている場合です。
そんな時はブラウザのメニューから「ファイル → 開く」で開くことができます。
その他の開き方
・Internet Explorer を開き、画面にHTMLファイルをドラッグ＆ドロップする。
・Internet Explorer のアイコンにHTMLファイルをドラッグ＆ドロップする。
・HTMLファイルをマウスで右クリックし、「開く」または「プログラムから開く」
