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

提供: Internet Web School

(版間での差分)
6 行: 6 行:
この章ではジャバスクリプトを使った簡単で役に立つWebページの書法をいくつか紹介しましょう。
この章ではジャバスクリプトを使った簡単で役に立つWebページの書法をいくつか紹介しましょう。
-
=== 日付、時刻を表示する ===
+
=== (1) 日付、時刻を表示する ===
次のプログラムをページの中に埋め込みます。
次のプログラムをページの中に埋め込みます。
43 行: 43 行:
はその日付を画面に表示するものです。日付は英語の表示になります。
はその日付を画面に表示するものです。日付は英語の表示になります。
-
=== そのページを一定時間ごとにリロードする ===
+
=== (2) そのページを一定時間ごとにリロードする ===
<pre>
<pre>
74 行: 74 行:
<pre>
<pre>
  <META  
  <META  
-
<pre>
+
</pre>
というのはリロードするような上位の処理をするようなとき指定しなければいけないhtmlタグです。
というのはリロードするような上位の処理をするようなとき指定しなければいけないhtmlタグです。
上のプログラムは自身をリロードします。すなわち、ページは１秒ごとに自動的に書き変わっています。この機能のあるページの利用法ですが、Webページの該当するhtmlファイルを書き換えれば、それを表示している全てのWebページが自動的に書き変わるのです。したがって緊急のお知らせを広報するような時便利なのです。あるいは世界に散らばて存在する機器をブラウザを利用して制御することもできるのです。
上のプログラムは自身をリロードします。すなわち、ページは１秒ごとに自動的に書き変わっています。この機能のあるページの利用法ですが、Webページの該当するhtmlファイルを書き換えれば、それを表示している全てのWebページが自動的に書き変わるのです。したがって緊急のお知らせを広報するような時便利なのです。あるいは世界に散らばて存在する機器をブラウザを利用して制御することもできるのです。
-
=== リロード機能を利用して、現在時刻が時々刻々変わるようなページ ===
+
=== (3) リロード機能を利用して、現在時刻が時々刻々変わるようなページ ===
<pre>
<pre>
104 行: 104 行:
==練習==
==練習==
-
- 練習　1：　日付を表示するhtmlファイルをあなたのローカルのファイルとして、それを、ブラウザのファイルを開く、という機能で呼び出して実行させてみてください。
+
=== 練習 1 ===
-
- 練習　2：　自動的にリロードするhtmlファイルをあなたのローカルのファイルとして、それを、ブラウザのファイルを開く、という機能で呼び出して実行させてみてください。表示する数字を変えると（htmlファイルをメモ帳等で書き換える）ブラウザによる表示も自動的に変わることを確かめてください。
+
日付を表示するhtmlファイルをあなたのローカルのファイルとして、それを、ブラウザのファイルを開く、という機能で呼び出して実行させてみてください。
-
- 練習　3：　日付を表示し自動的に更新するhtmlファイルをあなたのローカルのファイルとして、それを、ブラウザのファイルを開く、という機能で呼び出して実行させてみてください。
+
-
インターネットにはろいろな処理のサンプルが紹介されています。例えば次のサンプル集は日本語のページですが、英語ページのものもたくさんありますので、適宜自分のページの中で利用するといいでしょう。~
+
=== 練習 2 ===
 +
自動的にリロードするhtmlファイルをあなたのローカルのファイルとして、それを、ブラウザのファイルを開く、という機能で呼び出して実行させてみてください。表示する数字を変えると（htmlファイルをメモ帳等で書き換える）ブラウザによる表示も自動的に変わることを確かめてください。
-
http://www.wind.sannet.ne.jp/alfix/javascript/img/3.html
+
=== 練習 3 ===
 +
日付を表示し自動的に更新するhtmlファイルをあなたのローカルのファイルとして、それを、ブラウザのファイルを開く、という機能で呼び出して実行させてみてください。
 +
=== 練習 4の準備 ===
 +
 +
インターネットには，いろいろな処理のサンプルが紹介されています。例えば次のサンプル集は日本語のページですが、英語ページのものもたくさんありますので、適宜自分のページの中で利用するといいでしょう。
 +
 +
http://www.wind.sannet.ne.jp/alfix/javascript/img/3.html
ここには「一定間隔で画像を変える」Java Script の次のようなプログラムが紹介されています。
ここには「一定間隔で画像を変える」Java Script の次のようなプログラムが紹介されています。
 +
<pre>
  <HTML>
  <HTML>
  <HEAD>
  <HEAD>
147 行: 154 行:
  </BODY>
  </BODY>
  </HTML>
  </HTML>
 +
</pre>
ここでは　pic1.GIF, pic2.GIF, ... , pic9.GIF という９つの画像ファイルを1000mS （ミリ秒）毎に順に表示させるものです。
ここでは　pic1.GIF, pic2.GIF, ... , pic9.GIF という９つの画像ファイルを1000mS （ミリ秒）毎に順に表示させるものです。
-
- 練習　4：上のプログラムをメモ帳などであなたのパソコンのしかるべきフォルダーにhtml ファイルとして格納し、同時にここに添付された９つのGIF ファイルを同じフォルダーに格納し、ブラウザーでローカルなWebページとして実行させてみましょう。添付の画像をあなたのパソコンに移す方法は、このページの添付ファイル欄の該当のファイル名をクリックするとその画像が表示されます。そこで、画像の上でマウスを右クリックし、「名前を付けて画像を保存」を選びます。そこで該当するフォルダーを選んで保存します。元のページに戻り再び次の画像ファイルについて同じことを行います。それを必要な回数（この場合は９回）行えばいいのです。
+
=== 練習 4 ===
-
 
+
上のプログラムをメモ帳などであなたのパソコンのしかるべきフォルダーにhtml ファイルとして格納し、同時にここに添付された９つのGIF ファイルを同じフォルダーに格納し、ブラウザーでローカルなWebページとして実行させてみましょう。添付の画像をあなたのパソコンに移す方法は、このページの添付ファイル欄の該当のファイル名をクリックするとその画像が表示されます。そこで、画像の上でマウスを右クリックし、「名前を付けて画像を保存」を選びます。そこで該当するフォルダーを選んで保存します。元のページに戻り再び次の画像ファイルについて同じことを行います。それを必要な回数（この場合は９回）行えばいいのです。
-
- 練習　5：上のプログラムの意味を前章のJava Script リファレンスによって理解しましょう。そのときJava Script のインターネット上にあるリファレンスを利用するといいでしょう。索引がついているものや検索機能のあるもののとき、分からない語の意味を知ることができます。~
+
 +
=== 練習 5 ===
 +
上のプログラムの意味を前章のJava Script リファレンスによって理解しましょう。そのときJava Script のインターネット上にあるリファレンスを利用するといいでしょう。索引がついているものや検索機能のあるもののとき、分からない語の意味を知ることができます。~
== ジャヴァスクリプトの教則 ==
== ジャヴァスクリプトの教則 ==

2012年6月27日 (水) 06:04時点における版

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

目次

概要

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

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

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

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

これを実行しますと 

Wed Jun 06 2012 00:07:16 GMT+0900 ~

のように表示されます。

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

 dd = new Date();

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

 document.write(dd);

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

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

 <HTML>
 <HEAD>
 <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
 <TITLE>Reload the page</TITLE>
 <SCRIPT TYPE="text/javascript">
 <!--
 var timer = "1000";			//mSec 
 function ReloadAddr(){
 window.location.reload();	//Reload page
 }
 setTimeout(ReloadAddr, timer);
 //-->
 </SCRIPT>
 </HEAD>
 <BODY>
 <p> <h2>1,9,7,4,5,8,10<p>
 </BODY>
 </HTML>

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

1,9,7,4,5,8,10~

上のプログラムで 

 <META

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

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

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

 <HTML>
 <HEAD>
 <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
 <TITLE>Reload the page</TITLE>
 <SCRIPT TYPE="text/javascript">
 <!--
 var timer = "1000";			//mSec 
 function ReloadAddr(){
 window.location.reload();	//Reload page
 }
 document.write(Date());
 setTimeout(ReloadAddr, timer);
 //-->
 </SCRIPT>
 </HEAD>
 <BODY>
 </BODY>
 </HTML>

練習

練習 1

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

練習 2

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

練習 3

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

練習 4の準備

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

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

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

 <HTML>
 <HEAD>
 <TITLE>JavaScript images</TITLE>
 <SCRIPT type="text/JavaScript">
 <!--
 var img="pic1.GIF,pic2.GIF,pic3.GIF,pic4.GIF,pic5.GIF,pic6.GIF,pic7.GIF,pic8.GIF,pic9.GIF";
 var imgs = img.split(",");
 var i=0;
 var pic = new Array();
 for(cnt=0; cnt<imgs.length; cnt++){
 pic[cnt] = new Image();
 pic[cnt].src = imgs[cnt];
 }
 function imgChange(){
 i++; i%=imgs.length;
 document.getElementById("img1").src=pic[i].src;
 }
 //-->
 </SCRIPT>
 </HEAD>
 <BODY>
 <TABLE border=1 width=200 height=150><TR><TD><CENTER>
 <IMG border="0" id="img1">
 <SCRIPT type="text/JavaScript">
 <!--
 document.getElementById("img1").src=pic[0].src;
 setInterval("imgChange()",1000);
 //-->
 </SCRIPT>
 </CENTER></TD></TR></TABLE>
 </BODY>
 </HTML>

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

練習 4

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

練習 5

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

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

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

CAIテスト

「http://ja.iwschool.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E4%BD%9C%E6%88%90%E3%81%A8%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89/JavaScript%E3%81%AE%E5%88%A9%E7%94%A8%E3%81%9D%E3%81%AE2」より作成
個人用ツール