はじめに・・・時計を表示させよう
フロッピーディスク コンピューター CD
ホームページは、HTMLというコンピューターのことば(HTMLソース)を使って作られています。しかし実際には「フロントページ」や「ホームページビルダー」などのHTML作成ソフトで作っている人が多いと思いますので、キーボードで文字を打つことができれば、自然にHTMLソースが作られています。
JavaScriptを使って自分のホームページに時計を表示させたりするためには、そのHTMLソースのなかにJavaScriptのプログラムを書きこまなくてはなりません。
・・・と言うとむずかしそうですが、このホームページに書いてある文字をコピーして、あなたのホームページに貼り付ける作業ができればOKなのです。
このページでは、学校などでよく使われているウインドウズパソコンで、HTML作成ソフトの「フロントページ2000」を使って、自分のホームページに時計を表示させる方法を例にあげて説明しています。
表示の例
「フロントページ」の作成画面の左下に、【標準】【HTML】【プレビュー】というタグ(見出し)がありますから、そこにある【HTML】のタグをクリックして、HTMLソースを見てみましょう。(例1ではわかりやすいように文字の色をかえています)
例 1
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>ページのタイトルが書いてあります</title>


この<head>〜</head>の部分がHEAD区間です
</head>

<body bgcolor="#FFFFFF">
ここにホームページの文章などが書いてあります

この<body>〜</body>の部分がBODY区間です

</body>

</html>
例1のようなものがHTMLソースです。上から<html>とか<title> <body>などの文字(タグ)が書かれています。これらの文字の中に、これから紹介するJavaScriptのプログラムを挿入(そうにゅう)します。(コピーしてから貼り付けます)
HTMLソースの<head>から</head>までのあいだの緑の字の部分をHEAD区間<body>から</body>までのあいだの赤い字の部分をBODY区間といいますから覚えておいてくださいね。
では、これから実際にやってみましょう。
 コピーしよう
プログラムAのソース
<FORM name="myform1">
<INPUT name="myclock" size="16">
</FORM>
まずはこのホームページから、プログラムAのソースをコピーします。マウスを動かして、ソースの最初の文字に I カーソルをもっていき、マウスの左ボタンでドラッグ(左ボタンを押したままソースの終わりの文字へマウスを動かしボタンをはなす)します。
すると下のようになります。
 I カーソルはこんな形
I カーソルはこんな形
プログラムAのソース
<FORM name="myform1">
<INPUT name="myclock" size="16">
</FORM>
上のようになりましたか?この状態のままメニューバーの [編集] をクリックして、[コピー] をえらんでクリックしてください。するとあなたのパソコンに、プログラムAのソースがコピーされます。
↓Internet Explorerのメニューバー↓
Internet Explorer のメニューバー
 メモ帳に貼り付けしよう
スタートボタン(左下のボタン)をクリックして [プログラム] → [アクセサリ] → [メモ帳] とクリックしてメモ帳を開きます。そしてメモ帳のメニューバーの [編集] をクリックして [貼り付け] をえらんでクリックしてください。
無題-メモ帳の例
ファイル(F) 編集(E) 検索(S) ヘルプ(H
<FORM name="myform1">
<INPUT name="myclock" size="16">
</FORM>

 

 

このようになりましたか?これでさきほどこのホームページからコピーしたプログラムAのソースが、あなたのメモ帳に貼り付けられました。
 メモ帳からコピーしよう
さらにメモ帳からコピーします。【コピーしよう】でやったように、メモ帳にあるプログラムAのソースをマウスでドラッグして、メニューバーにある [編集] をクリックして [コピー] をえらんでクリックします。
無題-メモ帳の例
ファイル(F) 編集(E) 検索(S) ヘルプ(H
<FORM name="myform1">
<INPUT name="myclock" size="16">
</FORM>

 

 

これであなたのパソコンに、あたらしくプログラムAのソースがコピーされました。
 「フロントページ」に貼り付けしよう
メモ帳からコピーしたプログラムAのソースを、自分のホームページのHTMLソースに貼り付けますが、どの場所に貼り付けるのかがわかりにくいでしょうから、一度「フロントページ」を【標準】のページにして、その中で時計を表示させたい場所をえらびましょう。そしてえらんだ場所にカーソルをもっていき表を挿入します。
やりかたは、メニューバーの [表] → [挿入] → [表] とクリックして、行1、列1、配置は標準、罫線のサイズなどはすべて0にして、幅の指定のチェックボックスにチェックがしてあったらクリックしてはずして OKボタンをクリックします。
小さな表ができて、その中にカーソルが点滅していますね。その状態のままで(どこもクリックしないで)【HTML】タグをクリックして、自分のホームページのHTMLソースを見てください。
HTMLソースの中で、カーソルが点滅している場所(いちばん下のほう)を探します。<td></td>という文字の間にカーソルがあると思いますが、この場所が先ほど【標準】の画面でえらんだ場所です。
<td>|<td> 実際にはカーソルが点滅しています。
この画面のまま、メニューバーの [編集] をクリックして [貼り付け] をえらんでクリックしてください。すると例2のようになります。
↓フロントページのメニューバー↓
FrontPage のメニューバー
例 2
<html>

<head>
<meta http-equiv=
"Content-Type" content="text/html; charset=shift_jis">
<meta name=
"GENERATOR" content="Microsoft FrontPage 4.0">
<meta name=
"ProgId" content="FrontPage.Editor.Document">
<title>
ページのタイトルが書いてあります</title>

</head>

<body bgcolor=
"#FFFFFF">

<table border=
"0" cellpadding="0" cellspacing="0">
<tr>
<td><FORM name=
"myform1">
<INPUT name=
"myclock" size="16">
</FORM></td>
</tr>
</table>

</body>

</html>
例2のようになりましたか?これでこのホームページからコピーしたプログラムAのソースが、あなたのホームページのHTMLソースに挿入されて、プログラムAの貼り付けは完了です。しかしこの状態では、まだ時計は作動しません。さらにプログラムBとCを挿入しなければいけません。
今やった挿入(コピーして貼り付けた)はHTMLソースのBODY区間に挿入した事になりますが、今度はHEAD区間にプログラムBのソースを挿入しなくてはいけません。【コピーしよう】でやったように、このホームページからプログラムBのソースをコピーしましょう。
プログラムBのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function Clock1(){
myDate=new Date();
myHour=myDate.getHours();
myMinute=myDate.getMinutes();
mySecond=myDate.getSeconds();
if (myHour<10) {myHour="0"+myHour}
if (myMinute<10) {myMinute="0"+myMinute}
if (mySecond<10) {mySecond="0"+mySecond}
document.myform1.myclock.value=" "+myHour+"時"+myMinute+"分"+mySecond+"秒";
setTimeout("Clock1()",1000);
}
//-->
</SCRIPT>
コピーができたら【メモ帳に貼り付けしよう】でやったようにメモ帳に貼り付けます。そして次に【メモ帳からコピーしよう】でやったようにしてコピーしてください。それができたら、今度は自分のページのHTMLソースに貼り付けします。
「フロントページ」の【HTML】タグをクリックして、HTMLソースを見てみましょう。上のほうに</head>という文字がありますから、</head> の < のすぐ前にカーソルをもってきます。
|<head> 実際にはカーソルが点滅しています。
この状態のままメニューバーの [編集] をクリックして [貼り付け] をえらんでクリックしてください。これでHEAD区間にプログラムBのソースが挿入されました。例3のようになってますか?
さあ、あともうひとつです。
プログラムCのソース
onload="Clock1()"
【コピーしよう】でやったように、このホームページからプログラムCのソースをコピーしましょう。コピーができたら【メモ帳に貼り付けしよう】でやったようにメモ帳に貼り付けます。次に【メモ帳からコピーしよう】でやったようにしてコピーしてください。
それができたら、今度は自分のページのHTMLソースに貼り付けします。
HTMLソースをよく見て、</head>のすぐ下あたりの<body bgcolor="#FFFFFF">などと書いてある所にプログラムCのソースを挿入します。
※ この<body bgcolor="#FFFFFF"><body からうしろの文字は、その人のページによって違いますから気にしないでね。
<body の y のすぐうしろにカーソルをもってきて、半角スペースをひとつ入力します。(入力モードを直接入力にしてスペースキーを一回だけ押す)
<body | bgcolor="#FFFFFF">  実際にはカーソルが点滅しています。
この状態のままメニューバーの [編集] をクリックして [貼り付け] をクリックしてください。例3のようになりましたか?
例 3
<html>

<head>
<meta http-equiv=
"Content-Type" content="text/html; charset=shift_jis">
<meta name=
"GENERATOR" content="Microsoft FrontPage 4.0">
<meta name=
"ProgId" content="FrontPage.Editor.Document">
<title>
ページのタイトルが書いてあります</title>

<SCRIPT LANGUAGE=
"JavaScript">
<!--
function Clock1(){
myDate=new Date();
myHour=myDate.getHours();
myMinute=myDate.getMinutes();
mySecond=myDate.getSeconds();
if (myHour<10) {myHour="0"+myHour}
if (myMinute<10) {myMinute="0"+myMinute}
if (mySecond<10) {mySecond="0"+mySecond}
document.myform1.myclock.value=" "+myHour+"時"+myMinute+"分"+mySecond+"秒";
setTimeout("Clock1()",1000);
}
//-->

</SCRIPT></head>

<body onload=
"Clock1()" bgcolor="#FFFFFF">

<table border=
"0" cellpadding="0" cellspacing="0">
<tr>
<td><FORM name=
"myform1">
<INPUT name=
"myclock" size="16">
</FORM></td>
</tr>
</table>

</body>

</html>
上のようになっていれば完成ですから、【プレビュー】の画面にして下さい。ページに時計が表示されていますね。(きちんと動いていますか?) → これはあなたのパソコンの時間のデータで表示されますから、日付や時間をきっちり合わせておいてね。
ここまでできれば、いろいろなJavaScriptを自分のホームページに取り入れて使うことができます。
表を最初に挿入したのは、あとで時計を表示させる場所をかえる場合に、いちいち【HTML】画面にしてソースを切り取り、新しい場所に貼り付けをしなくても、【標準】の画面で表を選択(表の中にカーソルをもっていき、メニューバーの [表] → [選択] → [表] で選択できます)してから切り取り、新しい場所にその表を貼り付けるだけでいいからです。とても作業の手間がはぶけます。
なれてきたら、自分なりのやりやすいやり方でやってみてください。このサイトのメニューにある、あなたのお気に入りのJavaScriptを使って「かっこいい」ホームページを作ってみよう!
5・6年生にもわかるやさしいJavaScriptのTOPへ