まずこれをDLしてください。
http://groups.google.com/group/webbiz08/web/0909.zip?hl=ja
解凍したのち
html → 「home」
gif → 「home/img」
に保存してください。
それでは開始します。
-----------------------------------------------------------------------------
１．ボタンクリックで確認ダイアログを出す-分岐処理をalertに出力-
<html>
<head>
<title></title>
</head>
<body>
<form>
<input type="button" name="" value=" 押してください "
onClick="
if( confirm('あなたはうそをついたことがありますか YES=OK ') == true ) {
alert('yesを押したあなたは、正直なうそつきです(^^;')
} else {
alert('あなたは、うそつきです(^^;;')
}
">
</form>
</body>
</html>
onClick="命令文"でクリックしたら"命令文"を実行するという意味です
if( xx == true ){ "命令文" }else{ "命令文" }は、もしxxがtrueなら最初の"命令文"を実行し、違ったら後の"命令文"を実行するという意味です。この場合、if( confirm("xxx") ){ "命令文" }else{ "命令文" }という風に==trueを省略してもokです
confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します
alert("文章")で"文章"の入ったダイアログを表示します
-----------------------------------------------------------------------------
２．ラジオボタンクリックで確認ダイアログを出す-分岐処理をformに出力-
<html>
<head>
<title></title>
</head>
<body>
<form name="form1">
<input type="radio" name="" value=" 押してください "
onClick="
if ( confirm('あなたは18才未満ですか? YES=OK ') == true ) {
document.form1.msg.value = 'こどもだねっ'
} else {
document.form1.msg.value = 'おとなですねっ^^;'
}
">-押してみてね
<input type="text" name="msg">
</form>
</body>
</html>
onClick="命令文"でクリックしたら"命令文"を実行するという意味です
if( xx == true ){ "命令文" }else{ "命令文" }は、もしxxがtrueなら最初の"命令文"を実行し、違ったら後の"命令文"を実行するという意味です。この場合、if( confirm("xxx") ){ "命令文" }else{ "命令文" }という風に==trueを省略してもokです
confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します
document.form1.msg.valueは、form1という名前のフォームの中のmsgという名前のエレメント(この場合はINPUT文)のvalue(つまり、値)という意味です
document.form1.msg.value="xxx"は、そのフォームの値を"xxx"にする、つまり"xxx"を表示するという意味です
ちなみにこの場合document.form1.msg.valueの部分は
document.forms[0].elements[1].value=msg
document.forms['form1'].elements['msg'].value =msg
this.form.elements['msg'].value =msg
this.form.msg.value =msg などと書いても同じ意味です
-----------------------------------------------------------------------------
３．文字をクリックしたら質問を出し、答えによってダイアログを出す
<html>
<head>
<title></title>
</head>
<body>
問題 1 : <a href="javascript:void(0)"
onClick="
if( confirm('牛久大仏のおもさは4000トン?。\nこれは正解? YES=OK')
== true ){
alert('正解(^^)/ 6000枚の青銅(ブロンズ)板で作られています')
} else {
alert('残念でした(^^;;')
}
">
牛久大仏のおもさは4000トンです。
</a>
</body>
</html>
<a href="javascript:命令文">文章</A>で文章をクリックしたら"命令文"を実行します。ここでは、何もしないvoid(0)という特殊な命令を実行しています。つまり、クリックしても何もしません
onClick="命令文"でクリックしたら"命令文"を実行するという意味です if( xx == true ){ "命令文" }else{ "命令文" }は、もしxxがtrueなら最初の"命令文"を実行し、違ったら後の"命令文"を実行するという意味です。この場合、if( confirm("xxx") ){ "命令文" }else{ "命令文" }という風に==trueを省略してもokです
confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します
\nは改行の意味です
alert("文章")で"文章"の入ったダイアログを表示します
-----------------------------------------------------------------------------
４．文字にさわったら質問を出し、答えによってダイアログを出す
<html>
<head>
<title></title>
</head>
<body>
<a href="javascript:function voi(){};voi()"
onMouseOver="
if( confirm('さわっちゃだめだってば...^^;。\nもう、さわらない?')
== true ){
alert('でも、もう一回だけならいいよ(^^)')
} else {
alert('さわっちゃ(#^^#)いやん')
}
">
この文字にさわると怪我するぜっ
</a>
</body>
</html>
a href="javascript:命令文"でクリックしたら"命令文"を実行するという意味ですがここではfunction voi(){}という 中味のない voi()という関数を作ってから、続くvoi()で「なにもしない」^^;を実行してます。Netscapeの3.0からは作らなくてもvoid(0)という命令が用意されています。その場合は a href="javascript:void(0)" と書きます
onMouseOver="命令文"でマウスがさわったら"命令文"を実行するという意味です
if( xx == true ){ "命令文" }else{ "命令文" }は、もしxxがtrueなら最初の"命令文"を実行し、違ったら後の"命令文"を実行するという意味です。この場合、if( confirm("xxx") ){ "命令文" }else{ "命令文" }という風に==trueを省略してもokです
confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します
\nは改行の意味です
alert("文章")で"文章"の入ったダイアログを表示します
-----------------------------------------------------------------------------
５．画像をクリックしたら質問を出し、答えによってダイアログを出す1 -onClickを使うケース-
<html>
<head>
<title></title>
</head>
<body>
<a href="javascript:function voi(){};voi()"
onClick="
if( confirm('牛久大仏は奈良の大仏様が手のひらにのってしまう程の大きさです。\n正解? YES=OK') == true ){
alert('正解(^^)/ ')
} else {
alert('残念でした')
}
">
<img src="mondai.gif" width="120" border="0"></a>
ボタンクリックすると問題が出ます。
</body>
</html>
a href="javascript:命令文"でクリックしたら"命令文"を実行するという意味ですがここではfunction voi(){}という 中味のない voi()という関数を作ってから、続くvoi()で「なにもしない」^^;を実行してます。Netscapeの3.0からは作らなくてもvoid(0)という命令が用意されています。その場合は a href="javascript:void(0)" と書きます
onClick="命令文"でクリックしたら"命令文"を実行するという意味です
confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します
\nは改行の意味です
-----------------------------------------------------------------------------
６．画像をクリックしたら質問を出し、答えによってダイアログを出す2 -javascript:を使うケース-
<html>
<head>
<title></title>
</head>
<body>
<a href="javascript:function voi(){};voi()"
onClick="
if( confirm('奈良の大仏が手のひらにのってしまう大きさの牛久大仏がギネスブックにのっている。\nさあどっち?') == true ){
alert('正解(^^)/ ')
} else {
alert(' 載っています(^^)')
}
">
<img src="MONDAI1.GIF" width="120" border="0"></a>
ボタンをクリックすると問題が出ます。
</body>
</html>
a href="javascript:命令文"でクリックしたら"命令文"を実行するという意味ですがここではfunction voi(){}という 中味のない voi()という関数を作ってから、続くvoi()で「なにもしない」^^;を実行してます。Netscapeの3.0からは作らなくてもvoid(0)という命令が用意されています。その場合は a href="javascript:void(0)" と書きます
if( xx == true ){ "命令文" }else{ "命令文" }は、もしxxがtrueなら最初の"命令文"を実行し、違ったら後の"命令文"を実行するという意味です。この場合、if( confirm("xxx") ){ "命令文" }else{ "命令文" }という風に==trueを省略してもokです
confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します (IE4.0ではこの文章があまり長いと強制終了になる場合があるようですのでご注意ください)
\nは改行の意味です
alert("文章")で"文章"の入ったダイアログを表示します
-----------------------------------------------------------------------------
７．画像をクリックしたら質問を出し、答えによってページを分岐する
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
function simpleb07(){
if( confirm('このページの内容はわかりましたか?\nOKならB08へ進む/キャンセルならB06へ戻る') == true ){
window.location.href='b01.html'
} else {
window.location.href='b02.html'
}
}
//-->
</script>
</head>
<body>
<a href="javascript:simpleb07()">
<img src="MONDAI1.GIF" width="120" border="0"></a>
ボタンをクリックすると問題が出ます。
</body>
</html>
functionは関数(複数のスクリプトをまとめて名前をつけたもの)を作る命令で、この場合のSimpleB07()は関数名です
if( xx == true ){ "命令文" }else{ "命令文" }は、もしxxがtrueなら最初の"命令文"を実行し、違ったら後の"命令文"を実行するという意味です。この場合、if( confirm("xxx") ){ "命令文" }else{ "命令文" }という風に==trueを省略してもokです
confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します
\nは改行の意味です
window.location.href='SIMPLB08.HTM'は'SIMPLB08.HTM'というページを読み込むという意味です。この場合、self.location.hrefでもlocation.hrefでも同じ様に動きます
a href="javascript:命令文"はクリックしたら"命令文"を実行するという意味
-----------------------------------------------------------------------------
８．写真にさわったら説明し、答えによって拡大写真を表示する
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
function b08(){
if( confirm('真下から見あげた牛久大仏の写真です。\n少し大きいですが(^^;拡大してみますか?') == true ){
window.location.href='photo_large.gif'
} else {
//--キャンセル時の処理が必要ならここへ書きます
}
}
//-->
</script>
</head>
<body>
<a href="javascript:function voi(){};voi()"
onMouseOver="b08()">
<img src="photo_small.gif"
width="20" border="0"></a>
写真に触れるとメッセージが出ます。
</body>
</html>
functionは関数(複数のスクリプトをまとめて名前をつけたもの)を作る命令で、この場合のb08()は関数名です
if( xx == true ){ "命令文" }else{ "命令文" }は、もしxxが trueなら最初の"命令文"を実行し、違ったら後の"命令文"を実行するという意味です。このサンプルでは後の命令を省略していますので、キャンセル時には何もしません。また、if( confirm("xxx") ){ "命令文" }else{ "命令文" }という風に==trueを省略してもokです
confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します
\nは改行の意味です
window.location.href='SIMPLB08.HTM'は'SIMPLB08.HTM'というページを読み込むという意味です。この場合、self.location.hrefでもlocation.hrefでも同じ様に動きます
a href="javascript:命令文"でもクリックしたら"命令文"を実行するという意味ですが
ここではfunction voi(){}という 中味のない voi()という関数を作ってから、続くvoi()で「なにもしない」^^;を実行してます。Netscapeの3.0からは作らなくてもvoid(0)という命令が用意されていますが、2.0などではエラーになるのでこの方法にしました
onMouseOver="命令文"でマウスがさわったら"命令文"を実行するという意味です
-----------------------------------------------------------------------------
９．送信ボタンを押したらお礼と確認ダイアログを出す、NOなら送信しない
<html>
<head>
<title></title>
</head>
<body>
<form method="post"
action="mailto:xx@xxxx.or.jp"
onSubmit='return confirm("ありがとうございます(^^)/\n...でも、ほんとに送信しますか(^^；。")'>
<input type="text" name="e1">
<input type="submit" value=" 送信 ">
<br>何か書いてから 送信 を押してみてください。
</form>
</body>
</html>
onSubmit="命令"は送信ボタンが押されたら"命令"を実行するという意味です
confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します
onSubmit="return false"で送信ボタンが押されたら"送信"を中止します
したがってonSubmit="return confirm('文章')"は、confirmダイアログへの入力がOK(YES)なら送信、キャンセル(NO)なら送信中止となります
-----------------------------------------------------------------------------
１０．ページに入ったとたんに質問し、答えによってページを分岐する
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
function b11(){
if(confirm('問題 : 牛久大仏の高さは120mでしょうか?')){
alert('正解(^^)/おめでとう!!どうぞページへお入りください(^^)')
} else {
alert('残念でした、またどうぞ(^^)/~');
location.href="../../CONTENTS.HTM"
}
}
b11();
//-->
</script>
</head>
<body>
いらっしゃいませ
</body>
</html>
functionは関数(複数のスクリプトをまとめて名前をつけたもの)を作る命令で、この場合のb11()は関数名です
if( xx == true ){ "命令文" }else{ "命令文" }は、もしxxがtrueなら最初の"命令文"を実行し、違ったら後の"命令文"を実行するという意味です。この場合、if( confirm("xxx") ){ "命令文" }else{ "命令文" }という風に==trueを省略してもokです
confirm("文章")は"文章"の入ったYES/NOダイアログを表示しOK(YES)ならtrue、キャンセル(NO)ならfalseを返します
location.href="URL"はURLのページを読みこみます
alert("文章")で"文章"の入ったダイアログを表示します
B11()で関数b11()内に記述されたスクリプトが実行されます
0 件のコメント:
コメントを投稿