ホームページ作成とアップロード/JavaScriptの利用その2

提供: Internet Web School

UNIQ44cfaa483e118496-MathJax-2-QINU2 による版
(差分) ←前の版 | 最新版 (差分) | 次の版→ (差分)

ホームページ作成とアップロードJavaScriptの利用その2

目次

概要

 この章ではジャバスクリプトを使った簡単で役に立つWebページの書法をいくつか紹介しましょう。

(1) 日付、時刻を表示する

 次のプログラムをページの中に埋め込みます。

UNIQ4703b8a671123a77-pre-00000000-QINU

 これを実行しますと

UNIQ4703b8a671123a77-pre-00000001-QINU

のように表示されます。

 このプログラムは理解が容易だと思いますが、

UNIQ4703b8a671123a77-pre-00000002-QINU

は新しい変数dd を宣言し、初期値を日付 Date() にします。Date() は関数のようなものですが、オブジェクト という言い方をします。

UNIQ4703b8a671123a77-pre-00000003-QINU

はその日付を画面に表示するものです。日付は英語の表示になります。

(2) そのページを一定時間ごとにリロードする

UNIQ4703b8a671123a77-pre-00000004-QINU

 これをあるWebサーバにhtmlファイルとして置いておきます。このファイルにブラウザでアクセスしたとき次のような画面が得られます。

UNIQ4703b8a671123a77-pre-00000005-QINU

 上のプログラムで

UNIQ4703b8a671123a77-pre-00000006-QINU

というのはリロードするような上位の処理をするようなとき指定しなければいけないhtmlタグです。

 上のプログラムは自身をリロードします。すなわち、ページは1秒ごとに自動的に書き変わっています。この機能のあるページの利用法ですが、Webページの該当するhtmlファイルを書き換えれば、それを表示している全てのWebページが自動的に書き変わるのです。したがって緊急のお知らせを広報するような時便利なのです。あるいは世界に散らばて存在する機器をブラウザを利用して制御することもできるのです。

(3) リロード機能を利用して、現在時刻が時々刻々変わるようなページ

UNIQ4703b8a671123a77-pre-00000007-QINU

練習

練習 1

 日付を表示するhtmlファイルをあなたのローカルのファイルとして、それを、ブラウザのファイルを開く、という機能で呼び出して実行させてみてください。

練習 2

 自動的にリロードするhtmlファイルをあなたのローカルのファイルとして、それを、ブラウザのファイルを開く、という機能で呼び出して実行させてみてください。表示する数字を変えると(htmlファイルをメモ帳等で書き換える)ブラウザによる表示も自動的に変わることを確かめてください。

練習 3

 日付を表示し自動的に更新するhtmlファイルをあなたのローカルのファイルとして、それを、ブラウザのファイルを開く、という機能で呼び出して実行させてみてください。

練習 4の準備

 インターネットには,いろいろな処理のサンプルが紹介されています。例えば次のサンプル集は日本語のページですが、英語ページのものもたくさんありますので、適宜自分のページの中で利用するといいでしょう。

http://www.wind.sannet.ne.jp/alfix/javascript/img/3.html

 ここには「一定間隔で画像を変える」Java Script の次のようなプログラムが紹介されています。

UNIQ4703b8a671123a77-pre-00000008-QINU

 ここでは pic1.GIF, pic2.GIF, ... , pic9.GIF という9つの画像ファイルを1000mS (ミリ秒)毎に順に表示させるものです。

練習 4

 上のプログラムをメモ帳などであなたのパソコンのしかるべきフォルダーにhtml ファイルとして格納し、同時にここに添付された9つのGIF ファイルを同じフォルダーに格納し、ブラウザーでローカルなWebページとして実行させてみましょう。添付の画像をあなたのパソコンに移す方法は、このページの添付ファイル欄の該当のファイル名をクリックするとその画像が表示されます。そこで、画像の上でマウスを右クリックし、「名前を付けて画像を保存」を選びます。そこで該当するフォルダーを選んで保存します。元のページに戻り再び次の画像ファイルについて同じことを行います。それを必要な回数(この場合は9回)行えばいいのです。

練習 5

 上のプログラムの意味を前章のJava Script リファレンスによって理解しましょう。そのときJava Script のインターネット上にあるリファレンスを利用するといいでしょう。索引がついているものや検索機能のあるもののとき、分からない語の意味を知ることができます。~

ジャヴァスクリプトの教則

このページの右上に検索欄があります。

CAIテスト

個人用ツール