最終更新日
最終更新日
|
|
|
[関連ページ] JavaScriptの基本 変数、配列、繰り返し、関数、フォーム、イベントハンドラ、オブジェクト。 JavaScript応用2 DOMにより、直接、htmlを書き変える例。 JavaScriptのプログラム 学生向けにまとめたページ。
JavaScriptの基本に続き、ホームページに動きを与えるダイナミックHTMLの手法のひとつを中心に述べます。JavaScriptのための別ページではなく、Webページの中で直接使う例もあります。
ダイナミックHTML (DHTM)とは、ある文字や画像の上にマウスを持っていくと色が変わるとか、隠れていた説明文を表示させるとか、画像のランダムな入れ替え、あるいは文字をスクルールさせて少しずつ表示していくとか、ボタンを押したらBGMが流れるなどのことをさしているのでしょう。
こういうことをさせるには、インターネット・エクスプローラ(以下IEと省略)とネットスケープ(以下、NN)とでは、表現方法が異なっていたのですが、W3Cが98年にDOM(Document Object Model) の規格を決めたことを受けて、IE5.0以降、NN6.0以降では、次第にDOMを使って統一して表現できるようになりました。
HTML文書の全ての要素(画像や文字列など)をID属性で指定し、DOMを介して動きを与えるというものですが、1例を2章 に示します。写真の上にマウスをもってくると、あらかじめ用意されている説明が出る、それをスタイルシート(以下CSS)のvisibity をvisib から visibleにすることで見せるというものです。一定時間経過すると、また、hiddenにして見せなくしています。
3章 は、アニメないしスライドショーを扱います。一定時間ごとに処理をくりかえすsetInterval あるいはsetTimeoutというメソッドを使います。ID要素で指定し、DOMを介して....ということかが2章をはじめ、あちこちで出てきますが、NAME指定という方法もあることを示します。複数画像を配列のImageオブジェクトとして扱うことも必要になりますが、簡単ではないですね。
4章 は歓迎あいさつのスクロールをDOMを使ってやってみます。歓迎あいさつの表示位置を一定時間ごとに移動させるのですが、3章で説明した二つのうち、setIntervalの方を使います。
5章は、ややこったトップページの例として、「壁紙の選択にJavaScriptを使う」「BGMにinnerHTMLを使う」例を示しておきます。どうせだからと、どちらも複数の選択肢をおきました。
6章 はフォームの入力チェックで、会員登録を例にします。地味ではありますが、JavaScriptの重要な応用でしょう。フォームでは、新しく長文を入力できるTEXTAREAタグを紹介し、文字数のチェックを、また、特にメールアドレスの入力チェックで、indexOf,match(/＠/)など、半角の@やドットが確実にあるか、全角で入れていないかをチェックするメソッドを紹介します。
7章 は、[参考]資料。2章同様、写真説明としていろいろトライしたことを書きます。テキスト・ボックスやタスクバー、アラームボックスなどに写真説明を書き出すというものです。2章のようなDOMを使う方法を知らない頃、なんとかやってみたいと、最初に、JavaScriptにトライしたものの、結果的には満足できなかったことがらです。しかし、さまざまの構文の参考のために残します。4章の失敗例もあわせて記載します。
6章以外は、HTML文書の中で、実際に使えるJavaScriptの例をいろいろ紹介しました。 5章までのDOMの応用例は、いずれもstyle プロパティーを変えることで動きをあたえているのですが、JavaScript応用2の 3 DOMのノード に引用した解説では、「それらは、古き良き時代のDHTMで、いまはもっと直接的に、自分の HTML 文書をその場で書き換えることができる。刺激的な新機軸である。」としています。そういう意味での本格的なDOM関連、続きは JavaScript応用2 で扱います。
「基本」編で紹介した例題中心の「ホームページに今すぐ活かせるJavaScript」(インプレス 2000/11)と、辞典的に整理された本として、
「HTML&CS&JavaScript辞典」(秀和システム)を引き続き参考にしつつ、Web上のホームページも参照させていただきます。
以前から、写真の上にマウスを持っていくとその説明が出るようにはしたいと思っていました。そこで、私のJavascriptの最初のトライでしたが、6通りトライ、意図するところまでいかなかったのですが(7章 [参考]参照)、ようやく、不完全ながら、DOMによってできるようになりました。まず、それを紹介しましょう。
写真の上にマウスを持ってくると、あらかじめ用意されている最初は非表示にしておいた写真説明のある段落を表示にして見せるようにするというものです。表示、非表示はCSSのvisibity をvisible か、hidden にするかです。一定時間経過すると、また、hiddenにして見せなくしています。
その説明のある部分をID="photo2"のようにID属性を使って指定します。 class="photo"で、スタイルシートを指定しています。そのphoto2と、マウスの位置、event.x,event.yを引数として、関数dispMsgを呼んでいます。
dispMsgでは、document.getElementById("photo").style.visibility = "visible" という形でphoto2で指定されている写真説明(ここでは、秋川の夕日)を非表示から表示に変えます。
<IMG class="float-r" SRC="../Image/Akikawa/akikawa-sunset.jpg"
onMouseover="dispMsg('photo2',event.x,event.y)"> onMouseout="hidePhoto('photo2')" </A>
<DIV ID="photo2" class="photo">秋川の夕日</P></DIV>
「秋川の夕日」という写真説明の領域のスタイルシートは、class="photo"で指定してhead部に書いています。DIVの行に書いてもいいのですが、何度か使うこともあり、ここではHEAD部にしました。
ポイントはvisibility: hidden の行で、最初は説明文が隠されています。
onMouseover(マウスを置く)で表示され、onMouseout(マウスをはずす)でまた隠すということです。なお、ソースの中にコメントとして残しておきますが、onMouseoutを使わず、次に紹介するスライドショーの中で使った、一定時間後に、写真説明を隠すhidePhoto('photo2')を起動するという方法もあります。setTimeoutというwindowオブジェクトのメソッドを使います。
<STYLE>
<!--
.photo {
position: absolute;
visibility: hidden;
color: black;
background-color:white;
border:1px black solid;"
}
-->
</style>
}
呼ばれる関数は
function dispMsg(photo,x,y){
photoOBJ = document.getElementById(photo).style;
photoOBJ.visibility = "visible";
photoOBJ.left = x;
// photoOBJ.top = y+offY;
setTimeout("hidePhoto('" + photo + "')",3000);
}
function hidePhoto(photo) {
document.getElementById(photo).style.visibility = "hidden";
}
このすぐ上にある１章の「秋川と私」の写真も同じことをしています。
この例は、「ホームページに今すぐ活かせるJavaScript」のP126 を参考にしたのですが、イベントの発生位置 をとらえるというevent.x,event.yを引数にして、縦位置のy座標はそのままでよく、横位置はx(event.x)だけでは左に出てしまいます。写真を左側においておけば問題は少なくなるのでしょうが、右にあるから、なんとかしないといけません。
x座標の方にのみ、photoOBJ.left = xを入れると、IEではうまくいき、NNではやはりx=0の左に出ます。event.xがNNではundefinedになるからです。photoOBJ.leftもあやしいかも。これらに対応するNN向けの記述が目下不明。
y座標の方は photoOBJ.top = y + offY ないしphotoOBJ.top = y の記述はない方がよく、x座標の方は必須と奇妙な結果です。
「HTML&JavaScript辞典」のP279のIEのみの表記らしいwindow.event.screenX,window.event.screenYを使ったり、NN6.xでは、event.screenXとしたりしてトライしてみたが、結局は同じでした。IE,NNとも、yの方は何も指定しなくとも、縦方向はきちんと出るから不思議。
ある方からメールをいただき、「event.x event.yはIE5以降ではなくなっている、なぜ動いているか分からない。」とのメールを頂きました。IE5以降は、
mx = window.event.clientX + document.body.scrollLeft;
my = window.event.clientY + document.body.scrollTop;
になっているとのことでした。早速、試してみたのですが、IE6では、私のevent.x event.yと変らず。
そして、このままでは、NN6.xでは何も出なくなったのですが、NN4,NN6では、
mx = e.pageX;
my = e.pageY;
となっているとのことでした。これだけでは、NN6.xで「eが未定義」となり、IE6.0ではエラーになります。
そのうち、IE6.0,NN6.xで共通に使えるように変更されることと期待して、今回は保留します。
上記、メールでご指摘を受けたことやdocument.body.scrollTopとか、photoOBJ.leftに対応するNNの記述など、いろいろの働きがわかっていません。私の持っている辞典は、よく見るとNN4.06どまりの記述、99/10初版のものですでに古く、新しい版のものが必要です。今はこの段階で収め、懸案事項として保留しておきます。
どの本も、IDによるHTML文書のある要素をIDで指定して、
IE if (document.all) document.all['photo2'].style.visibility = "visible"
NN4.x if (document.layers) document.layers['photo2'].visibility = "visible"
と2本だてのプログラムで処理している例が多いのですが、NN6.0はNN4.x向けでは動きません。
document. getElementById(photo).style.visibility = "visible"
IE6.0もNN6.0,7.1もこれで動きます。document.getElementById(photo).styleなんて、Idによって指定されているstyleを変えて 動きを与える、実に分かりやすい表記ですね。私はいまや古くなってしまい、スタイルシートもほとんどだめだったNN4.x向けにあれこれ書こうという気にはならないから、以後は全て、getElementById(オブジェクト)のみでいきます。なお、getElementById(photo)のphotoは、関数の引数なので、実際には、getElementById('photo2')と引用符ないしダブルクォーテーションがつきます。
ここでは、画像の上のマウスの動きというonMouseover、onMouseoutというイベントハンドラを扱いましたが、イベントハンドラはフォームの中からだけでなく、画像 の上でも使えるという例のひとつです。文字列の上でも可能です。
スタイルシートの書き換えで操作するという方法でしたが、JavaScript応用2の 4 DOMでinnerHTMLを使う(画像の場合) で、innerHtmlを使って、直接、情報を書き込む ことをやります。全然簡単ですっきりしており、1に書いた新機能の威力が分かります。
コスモスの花を数枚、ある時間ごとに切り換え、mp3で圧縮した音楽もいれてやってみた例が、コスモス・スライドショー です。少し大きい写真を順次出すということで、スライドショーとしただけで、アニメの手法も同じです。指定した時間後に、一度だけ処理を行う、windowオブジェクトのsetTimeoutというメソッドを使っています。
下記のプログラム例は「HTML&CSS&JavaScript辞典」のP456のアレンジですが、箇条書きで説明します。
1 使う画像は同じ名前の連番で、配列が使えるようにしておき、配列の添え字をImageNoとする。
ここでは、kosmos1.jpg〜kosmos7.jpgの7枚。
2 それぞれの画像を処理するための配列をANIMEとして準備。 ANIME= new Array()。
3 画像の枚数分くりかえすが、ANIME.lengthはここでは使えない(配列がまだ空白のため)。
4 それぞれの配列要素をImageオブジェクトとする。ANIME[i] = new Image()。
そのsrcプロパティ(画像ファイルのURL)、ANIME[i].srcが各画像のそれになるという設定。
5 ANIME[i]は、Imageオブジェクトのインスタンスとなるが、srcプロパティに、それぞれの画像を代入。
以上、準備。
6 アニメの開始と終了を指定したいので、ボタンとし、開始ボタンで関数anime1()へ行く。
7 document.animation.srcは、document.オブジェクト.srcを適用したもの。
<img src="kosmos1.jpg" name="animation" ...> で、formやtextと同じname指定。
document.myform.text1.valueと同じように考えていいのだろうか?
"kosmos1.jpg"が、配列のImageオブジェクトと入れ代わる。最初のImageNoはしたがって2。
(なお、nameをid に変えるとエラーになる。そのときは、3-2 アニメのようにする。)
8 ImageNoを1増やし、flagが初期値0である限り、setTimeout("anime1()",1500)で、1500ミリ秒ごとに、
anime1()をくりかえす。
9 終了ボタンが押されると、flagが1となって終了。
<html><head>
<title>コスモス スライドショー</title>
<script language="JavaScript">
<!--
var ImageNo = 2 ;
var flag;
ANIME = new Array()
for(i = 1; i < 8; i++) {
ANIME[i] = new Image();
ANIME[i].src = "kosmos" + i + ".jpg";
}
function anime1() {
document.animation.src = ANIME[ImageNo].src ;
ImageNo++ ;
if(ImageNo> 7) ImageNo = 1 ;
if(flag==0) setTimeout("anime1()",1500);
}
//-->
</script></head>
<body><h1>コスモス・スライドショー</h1>
<p>昭和記念公園のコスモスです(2003/10)。<br>
一定時間ごとに処理を繰り返す、setTimeoutを使用。</p>
<p><img src="kosmos1.jpg" name="animation" width="600" height="480"></p>
<form>
<input type="button" value="スタート" onclick="flag=0;anime1()">
<input type="button" value="ストップ" onclick="flag=1">
</form>
<div><embed src="http://mstak.la.coocan.jp/MP3/Chorus/AMC2001/hananomachi.mp3"
autostart="true" hidden="false" width=300 height=50>
<p><a href="http://homepage1.nifty.com/mstak/Chorus/AMCconcert.html">
第4回混声合唱団AMCコンサート</a> に出した「花の街」です。<br>
春の歌とはマッチしないですが、MP3もembedで呼び出せる例です。</p></div>
アニメも順次切り替わる画像が小さいことが多いだけで、スライドショーと基本的には同じです。10月になった孫がしゃべる人形に、最初、恐る恐る近づき、次第に遊び出した様子をビデオのスナップショットから、アニメにしたもの。 孫 しゃべる人形と遊ぶ で、<embed src="usagi.mid" ....> で、うさぎのダンスのmidiを鳴らすようにしたのはご愛嬌。
下記は、5-1と違った使い方をした部分のみ掲載し、その部分を箇条書きで説明します。(「HTML&CSS&JavaScript辞典」のP590をほんの少し、アレンジしただけです。)
1 アニメの開始をIntervarID=setInterval('anime()',1000) として、こんどはsetIntervalを使用。
setIntervalは、ただ、一定時間ごとに処理をくりかえすというもの。
2 そのとき、同時に、IntervarIDを取得しておく。
3 終了はclearInterval(IntervarID)で、上で定義したIntervarIDを使っている。
4 こんどは、nameではなくidを使って、document.getElementById("animation").srcと、getElementById(id)
を使う。たんに、animation.src=ANIME[ImageNo].srcでも可。
body部
<p><img src="miyu-doll1.jpg" id="animation" width="300" height="200">
<form>
<input type="button" value="スタート" onclick="IntervarID=setInterval('anime()',1000)">
<input type="button" value="ストップ" onclick="clearInterval(IntervarID)"></form></p>
<div><embed src="usagi.mid" autostart="true" hidden="false" width=300 height=50></div>
head部
function anime() {
document.getElementById("animation").src = ANIMA[ImageNo].src ;
ImageNo++ ;
if(ImageNo> 10) ImageNo = 1 ;
}
3章1節のスライドショー は、最初に赤い文字で「よくお出でくださいました スライドショーをお楽しみください。」
という歓迎あいさつをスクロールさせます。IEなら、MARQUEというインターネット・エクスプローラの持つタグを使って1行でできるようですが、HTML4.0にないアプリ依存のタグは避けたほうがいいでしょう。
私個人としては、こういうことにはあまり興味がないのですが、DOMの応用ということで、一応やってみました。「ホームページに今すぐ活かせるJavaScript」のP100は、
IE向けが、 if(document.all)document.all.myText.style.pixelLeft -= 10;
NN4.x向けが、if(document.layers)document.layers["myText"].left -= 10;
と、2本だてですが、後者はNN6.xでは働きません。
そこで、やはり、document.getElementById("welcome").styleです。
BODY部で、DIVタグで、Welcome!!という歓迎メッセージをID="welcome" とし、STYLE="...."で、文字の色、大きさ、visibility:hiddenとしています。そして、onload="LeftMove()"と、ページを読み込んだときに、関数を呼び出すことにしています。
<BODY style="background: #edffbe;" onload="LeftMove()"> <DIV ID="welcome" STYLE="color:red;font-size:1.3em;visibility:hidden;position:absolute; left:0;top:5;">よくお出でくださいました。スライドショーをお楽しみください。</DIV>
呼び出された関数は、ID="welcome"を受けて、右端から少しずつ、「よくお出でくださいました。.....」をスクロールしていくというわけです。ただし、NN6.2では動きません。slideshow.htmlのソースにあるように、pixelLeftをleftにするなどしたが、だめでした。正規のプロパティは、style.leftと思うのだが、それでは、IE6もNN6,7もだめで、やむなく、pixelLeftというIE独自と思われるものを使いました。これまた、懸案事項です。
setIntervalについては、3.2 アニメで説明しています。アニメが一定時間ごとの画像の入れ換えに対して、ここでは、文字列の表示位置を変えています。
//文字列のスクロール
var timerID;
var scrollOBJ;
function LeftMove() {
scrollOBJ = document.getElementById("welcome").style;
scrollOBJ.visibility = "visible";
timerID = window.setInterval("setLeftMv()",50);
}
function setLeftMv() {
scrollOBJ.pixelLeft -= 10;
var leftbox = scrollOBJ.pixelLeft;
if (leftbox<=0) {
scrollOBJ.pixelLeft = 0;
window.clearInterval(timerID);
}
}
ややこったトップページの例として、まず、「壁紙の選択にJavaScriptを使う」 例を示します。背景色ないし模様を指定する、>body<の中にも、>body id="BackImg".....<のように、id指定して、それを変更することができます。色の薄い場合と濃い場合、複数の選択肢もかたや、文字列をコマンドボタンのように使い、かたやフォームと使い分けてみました。
トップページ例1 は、背景色ないし模様の色の薄い場合、文字列をボタンのように使ってみました。リンク先は、2003年度に新規追加したページとしたのですが，特に、7項はJavaScript関連を学生向けに整理しました。
トップページ例2 は、背景色ないし模様の色の濃い場合、選択はフォームからとしました。リンク先は、やはり、2003年度に新規追加ないし修正したものです。
濃い色の背景のときは、リンク文字 も見づらくなるので、色指定を変更する必要もありますが、head部に、cssで指定しました。
<style>
<!--
a:link{color: white;}
a:visited{color: yellow;}
a:hover{color: red;}
a:active{color: brown;}
//-->
</style>
要素名:linkのようにしますが、通常、要素名は anchor の a (<a href=....>)です。
a:link は、 まだ見ていないリンク
a:visited は、すでに見たリンク
a:hover は、 カーソルがその上にあるとき
a:active は、 マウスボタンを押したとき
「背景写真や模様の選択にJavaScriptを使う」のトップページ例1は、文字列をフォームのコマンドボタンのように使った場合で、 <a href ="#" onClick="BackImg1('image/onpu01[1].gif')">背景模様1(音符)</a> のようにして、背景模様や写真を引数にして、BackImg1()の関数を呼び出しています。
anchorの aタグのhref属性は、本来、urlを書くべきですが、href ="#" とか、href ="javascript:;" と書くことで、背景模様1(音符)とか背景写真(富士山)の文字列に下線と色がつき、クリックすると、aタグの中のonClickがきいてくるというしかけです。
<body id="BackImg" style="background:#edffbe;" onload="myLeftMove()"> と、<body>の中においた
id="BackImg" と、 (なお、onload="myLeftMove()"は流れる文字のためのもの。)
<table class="right">
<tr>
<td width=1000><<a href ="#" onClick="BackImg1('image/onpu01[1].gif')">背景模様1(音符)</a>
<td width=300><a href ="#" onClick="BackImg1('image/snowl_1[1].jpg')">背景模様2(雪の結晶)</a>
<td width=300><a href ="#" onClick="BackImg1('photo/fuji4-1024.jpg')">背景写真(富士山)</a>
<td width=300><a href ="javascript:;" onClick="BackImg2('#eeffff')">無地(うす青)</a>
</table><br>
function BackImg1(img) {
document.getElementById('BackImg').style.backgroundImage='url(' + img +')';}
function BackImg2(color) {
document.getElementById('BackImg').style.background=color;}
styleのプロパティbackgroundImage,backgroundを変えています。
最初は、aタグには、4つすべて、href ="javascript:;" としていました。背景模様や写真だけは、IEできかないのです。ハードディスク上では問題がないし、Netscapeではネット上でもいいのにです。無地にするのはできるし、MidiはOK。そのうち、直ることだろうとも思ったのですが、試みに、うまくいかなかった3つをhref ="#"としたら、IEでもOKになりました。
なお、JavaScriptを使わない場合、あるページだけ、背景模様にしたいときは、
<body style="background-image: url('image/onpu01[1].gif');">
のようにします。styleのプロパティのbackgroundImage とはちょっと違っています。本によると、この単純な場合も、環境によってはうまくいかないこともあるとのこと、学生の例にもありました。微妙ですね。
例2のフォームからの場合は、「JavaScript基本」でいろいろやったのと同じですから、説明は省略します。
もうひとつは、「BGMにinnerHTMLを使う」 ことをしています。<p>の中においた id="Midi" と、次の<a href ="javascript:;"......> の中から呼び出したMusicの関数を使います。この href ="javascript:;" も全然問題なしでした。
<table class="right">
<tr>
<td width=1000><span ID="Midi"> <a href ="javascript:;"
onClick="Music('midi/mazurka4.mid')">Midi: マズルカ4番(ショパン)</a></span>
<td width=300><span ID="Midi"> <a href ="javascript:;"
onClick="Music('midi/coroptica.mid')">コロプチカ</a></span>
<td width=300><span ID="Midi"> <a href ="javascript:;"
onClick="Music('midi/sc.mid')">ジャズ</a></span>
<td width=300><span ID="Midi"> <a href ="javascript:;"
onClick="Music('midi/ieraisha.mid')">夜来香</a></span>
</table>
function Music( m ) {
var str = "<embed src='" + m + "' hidden='false'>";
document.getElementById('Midi').innerHTML = str;
}
innerHTML を使って、音を鳴らすembedタグで置き換えています。この「JavaScript応用1」では、これまで、styleの変更などを中心に進めてきました。innerHTMLによる、直接的なけ書き換えは、次の「JavaScript応用2」で主に扱います。
なお、選択をもっとこったものにした「MIDI演奏にinnerHTMLを使う」を含めて、MIDIのJavaScriptによる処理をMIDIの音楽とJavaScript にまとめています。
Midiの方は、JavaScriptを使わない場合、
<embed src='midi/mazurka4.mid' autostart="true" hidden="false">
です。これをdivの中にでもいれればいいのですが、autostart がないと、動作しないことになります。それがあると、ページを開くと自動的に演奏される仕組みになります。hidden='false'は省略できますが、hidden='true' とやると、midiプラグイン(Media Player とかQuick Time)のアイコンが出ないことになり、Midiをとめようがなくなることも起こります(ブラウザの中止ボタンでとめられることが多いですが)。
Netscape7.1でトライするには、QuickTimeをプラグインとして、midiファイルにもチェックをいれましたが、hidden="false" としていても、アンコンが出なかったです。
DOMについては、ここでは、このくらいにして、続きを JavaScript応用2 で扱います。
入会登録 はフォームの入力チェックの例です。フォームの入力データの多くは、サーバ上におかないと意味がないので、サーバのCGIプログラムへ送信することになるのですが、その前に例えば、会員登録などで、メールのIDアドレスが正しく入力されているかなどのチェックをするものです。
CGIプログラムでもチェックできますが、サーバに負荷をかけることになるので、できれば入力画面でチェック済みのものを受け取る方が望ましいでしょう。そう言う意味で地味ではありますが、JavaScriptの重要な応用でしょう。
入会登録 のBODY部のFORMです。onSubmit="return checkForm()" で、送信ボタンを押したときに、function checkForm() に入ります。
<FORM NAME="myFORM" onSubmit="return checkForm()" ACTION="toroku.cgi" METHOD="POST">
お名前: <INPUT SIZE="30" TYPE="text" NAME="name">
メールアドレス: <INPUT SIZE="30" TYPE="text" NAME="mail">
ホームページURL: <INPUT SIZE="60" TYPE="text" NAME="url" VALUE="http://">
ホームページタイトル: <INPUT SIZE="60" TYPE="text" NAME="title">
コメント:
<TEXTAREA NAME="comment" ROWS=4 COLS=50></TEXTAREA>
<INPUT TYPE="submit" VALUE="送信"><INPUT TYPE="reset" VALUE="取り消し">
</FORM>
関数 checkForm()は、空白のテキストボックスがあれば、alertで警告し、cForm.name.focus()で、そこに入力できるように、フォーカスを移しています(ホームページ関係はノーチェック)。メールアドレスだけは半角の@が必須ですから、それをたよりにチェックしています。(indexOf("@") == -1)
また、ドットのチェックもしています。(check = /.+@.+\..+/; と match(check) )
全角の＠もmatch(/＠/)で調べています。
コメント欄は、TEXTAREAタグですが、n=str.lengthで、コメント文の長さを調べ、200字以内に収まっているかをチェックしています。ただし、全ての入力チェックが終わって送信ボタンを押されても、飛び先toroku.cgiは今のところないので、エラーになります。
// 入力チェック
function checkForm() {
cForm = document.myFORM;
if (cForm.name.value == "") {
alert("名前を入れて下さい");
cForm.name.focus();
return false;
} else if (cForm.mail.value == "") {
alert("メールアドレスを入れて下さい");
cForm.mail.focus();
return false;
} else if (cForm.comment.value == "") {
alert("コメントをお書き下さい");
cForm.comment.focus();
return false;
}
if (cForm.mail.value.match(/＠/)) {
alert("＠は全角です。メールアドレスは全て半角で打ってください");
cForm.mail.focus();
return false;
} else if ( cForm.mail.value.indexOf("@") == -1 ) {
alert("@がありません。メールアドレスを確認してください");
cForm.mail.focus();
return false;
}
check = /.+@.+\..+/;
if (!cForm.mail.value.match(check) ) {
alert("メールアドレスが正しくありません。@やドットはありますか？");
return false;
}
str=cForm.comment.value;
n=str.length;
if (n>200) {
alert("コメントが" + n + "字です。200字以内にして下さい。");
cForm.comment.focus();
return false;
}
return true;
}
なお、ここにあげた例は、今はリンクが切れている，http://www.nifty.ne.jp/forum/fhpexp/js/ にあった、JavaScriptの玩具箱などを参考にさせていただきました。
写真の上にマウスを持っていくとその説明を出したいということで、2章にいたるまでに、6通りトライしたので、それを紹介しておきます。
やや意図に近いものです。高橋 賢のコンピュータ授業 のトップページでも使っているのですが、テキスト・ボックスに写真説明を直接書き出します。
HEAD部分に書く関数 PhotoExplain(s)は、引数sを基本編で何度も出てきた定型、document.myform.text1.value に代入するだけです。
BODY部分のそれぞれの写真には、onMouseover="PhotoExplain('夏の秋川')と、マウスが写真の上に来ると、PhotoExplainを呼ぶ仕掛けです。
2章にも書きましたが、onMouseoverはイベントハンドラ、フォームの中だけでなく、画像でも文章の上でも使えるという例のひとつです。仮引数、sに渡される実引数は、この場合は、'夏の秋川'です。マウスが外れると、単に'写真説明'に変わるようにしています。
<HEAD>
SCRIPT LANGUAGE="JavaScript">
<!--
function PhotoExplain(s) {
document.myform.text1.value = s;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<IMG class="float-r" SRC="Image/giboushi.jpg"
onMouseover="PhotoExplain('夏の秋川')" onMouseout="PhotoExplain('写真説明')"></A>
</BODY>
あらかじめ作っておいた写真説明の短いhtml文書を出すものです。このページは手で消す必要があるのと、写真ごとにそのためのhtml文書を用意する欠点があり、今ひとつです。
function Photohtml(s) {window.open( s,"","width=400,height=5");}
呼び出しは、onMouseover="Photohtml('JavaScript/tulip.html')" と、あらかじめ用意した説明用のhtmlファイル名が引数sに渡されます。
トップレベルのオブジェクト、windowのメソッドopen()を紹介するのにいい程度。
写真の上にマウスを持っていくと、説明がタスクバーに出るもの、簡単で少なくとも、2番目のものよりはいいかもしれません。
function PhotoExplain(s) {window.status=s; return true}
これも、windowオブジェクトのプロパティstatusの紹介。
alertを使い、説明を警告ダイアログボックスに出すもの。ちょっと大げさな感じ
function PhotoExplain(s) {alert(s)}
alert()も、windowオブジェクトのメソッドで、window.が省略されています。手軽なのでデバッグには向いていますね。
ウインドウに直接書き込むこともトライしてみましたが、HEAD部の関数の中でdocument.write()を使うのはだめですね、別ページが開いてしまって全然面白くない。
function PhotoExplain(s) {document.write(s);}
しかし、JavaScriptなど使わなくとも簡単にできて、しかも推奨されている方法があったのです。<IMG SRC="......" のあとに、alt=....と、画像を言葉で説明します。画像が見られないブラウザを使っている人、目が不自由な人のために、altは入れることが推奨されています。画像の上にマウスを持ってくると、その説明が画像の上に表示され、写真説明にもなるのです。知らなかったなぁ!!
なお、Javascriptにも、titleというのが、HTMLのaltと同じような働きをするそうです。
 |
|
|