とても簡易的なバーチャルキーボードのスクリプトです。
サンプル：
下のタグをHTMLの好きな場所に入れます。
以上です。サンプル：
2008年12月アーカイブ
画像にマウスを重ねると、画像が切り替わるJavaScript。
最近のブラウザでは、IMGタグ自体にOnmouseoverがあるようですが、
少し前のブラウザは対応していないので、今回は、Aタグで囲っておきます。
少し前のブラウザは対応していないので、今回は、Aタグで囲っておきます。
次のタグを画像を表示したい場所へ記述し、
画像1ファイル名の箇所と、画像2ファイル名の箇所をそれぞれの画像ファイル名にします。
画像1ファイル名の箇所と、画像2ファイル名の箇所をそれぞれの画像ファイル名にします。
<a href="javascript:void(0);" onmouseover="document.chgimg.src='画像2ファイル名'" onmouseout="document.chgimg.src='画像1ファイル名'"><img src="画像1ファイル名" name="chgimg"></a>
サンプル：
画像は、イラスト素材の素材ダス様からお借りしました。
Webサービスなどを利用していると、フォームをフォーカス移動時やクリック時に全て選択させ、テキストがコピーしやすくなっていることがあります。こういう小さい気配りですが利用者側からすれば手間が省けることはとても助かります。自作CGIなどに実装してみては。
フォーカス移動時にフォームを選択した状態にしておく
<input type="text" name="sample1" size="50" value="サンプル" onfocus="this.select()">
クリック時にフォームを選択した状態にしておく
<input type="text" name="sample2" size="50" value="サンプル" onclick="this.select()">
もちろん下のようなテキストエリアにも応用が利きます。
<textarea name="sample3" onfocus="this.select()" rows="10" cols="50">
～省略～
</textarea>
～省略～
</textarea>
ページを閉じたり、ページから移動したりするときに
確認ダイアログを出したいときってありますよね。
(ページにとどまることも出来る確認ダイアログ。)
そんなときの方法。
HTMLのBODYタグに、次のような記述を追加します。
<body onbeforeunload="return '表示したいメッセージ';">
すると・・・そのページから移動したり、そのページを閉じるときに、
本当に良いのかどうか確認するダイアログが表示されます。
サンプルを見る
確認ダイアログを出したいときってありますよね。
(ページにとどまることも出来る確認ダイアログ。)
そんなときの方法。
HTMLのBODYタグに、次のような記述を追加します。
onbeforeunload="return '表示したいメッセージ';"つまり・・・次のように書くということ。
<body onbeforeunload="return '表示したいメッセージ';">
すると・・・そのページから移動したり、そのページを閉じるときに、
本当に良いのかどうか確認するダイアログが表示されます。
サンプルを見る
西暦から干支を求めるスクリプトです。
下のタグをHTMLソースの<HEAD></HEAD>の間に挿入します。
干支がダイアログで表示されます。
計算方法については、干支 - Wikipediaを参考にしました。
サンプル：
下のタグをHTMLソースの<HEAD></HEAD>の間に挿入します。
<script type="text/javascript">そして、次のタグを好きな場所に記述します。
<!--
function Eto(year) {
var arr1 = new Array("庚","辛","壬","癸","甲","乙","丙","丁","戊","己");
var arr2 = new Array("申","酉","戌","亥","子","丑","寅","卯","辰","巳","午","未");
if (year != "" && year != null) {
alert(arr1[year % 10] + arr2[year % 12]);
}
}
// -->
</script>
<form onSubmit="Eto(iyear.value);return false">求めたい年を西暦で入力し、求めるをクリックすれば、
西暦：<input type="text" size="20" name="iyear" id="iyear" value="2009">年<br>
<input type="button" value="求める" onClick="Eto(iyear.value)">
</form>
干支がダイアログで表示されます。
計算方法については、干支 - Wikipediaを参考にしました。
サンプル：
シンプルなサイコロを作ってみます。(えｗ
下のようなタグを適当な場所に記述してください。
ボタンをクリックすると、1から6までのランダムな数字がでてきます。
Math.random()は見ての通り、乱数(ランダムな数)を発生させます。
Math.floor()は、小数点以下を切り捨てて整数にします。
ですから・・・Math.random() * 6は、0.**********から5.**********までが出ます。
それを、Math.floor()を使って、小数点以下切捨てして、
それを、+1した数を、alertでダイアログとして表示します。
サンプル：
ちょっと工夫すれば次のように画像を出すことができます。
サイコロ画像は、イラスト素材の素材ダス様からお借りしました。
下のようなタグを適当な場所に記述してください。
ボタンをクリックすると、1から6までのランダムな数字がでてきます。
<input type="button" onclick="alert(Math.floor(Math.random() * 6) + 1);" value="サイコロを振る">よくわかる(か知らない)解説：
Math.random()は見ての通り、乱数(ランダムな数)を発生させます。
Math.floor()は、小数点以下を切り捨てて整数にします。
ですから・・・Math.random() * 6は、0.**********から5.**********までが出ます。
それを、Math.floor()を使って、小数点以下切捨てして、
それを、+1した数を、alertでダイアログとして表示します。
サンプル：
ちょっと工夫すれば次のように画像を出すことができます。
サイコロ画像は、イラスト素材の素材ダス様からお借りしました。
ボタンをリンクの代わりにして、
ボタンで移動させたいことってありませんか？（ありませんか・・・ね？＾＾；
まあ、ひとまずやってみますか。かなり簡単です。
念のため書いておきますと、http://ohgita.info/の部分が、リンク先URL。
Masanori's WebSiteへの部分が、表示する文字列です。
サンプル：
ボタンで移動させたいことってありませんか？（ありませんか・・・ね？＾＾；
まあ、ひとまずやってみますか。かなり簡単です。
<input type="button" onclick="location.href='http://ohgita.info/'" value="Masanori's WebSiteへ">これだけ。このタグを記述するだけです。
念のため書いておきますと、http://ohgita.info/の部分が、リンク先URL。
Masanori's WebSiteへの部分が、表示する文字列です。
サンプル：
履歴を移動するリンクをJavaScriptで作ってみましょう。
次のようなHTMLタグを挿入します。
前にもどる
次へすすむ
ページを更新する
href(リンク先)をvoid(0)としているのは、リンクが実際にはJavaScriptなので、
リンクとして無効とするため。
onclickで、クリック(またはEnterキーを押すなど)した時に行うJavascript処理を定義します。
return falseは・・・まぁおまじないというか念のためというやつでしょうか。
余談ですが・・・
よくあるJavaScriptの呼び出し方で、
<a href="#" onclick="alert("hoge")">hoge</a>
みたいな感じのがありますが、これは相応しくありません。
なぜなら、hrefが#になっているので、ページ上部へ移動してしまうからです。
次のようなHTMLタグを挿入します。
<a href="javascript:void(0)" onclick="history.back();return false;">前にもどる</a>サンプル：
<a href="javascript:void(0)" onclick="history.forward();return false;">次へすすむ</a>
<a href="javascript:void(0)" onclick="location.reload();return false;">ページを更新する</a>
前にもどる
次へすすむ
ページを更新する
href(リンク先)をvoid(0)としているのは、リンクが実際にはJavaScriptなので、
リンクとして無効とするため。
onclickで、クリック(またはEnterキーを押すなど)した時に行うJavascript処理を定義します。
return falseは・・・まぁおまじないというか念のためというやつでしょうか。
余談ですが・・・
よくあるJavaScriptの呼び出し方で、
<a href="#" onclick="alert("hoge")">hoge</a>
みたいな感じのがありますが、これは相応しくありません。
なぜなら、hrefが#になっているので、ページ上部へ移動してしまうからです。
うるう年なのか否かを求めるJavaScript
そして、次のようなタグを好きな場所へ挿入します。
<script type="text/javascript">上をHTMLソースの<HEAD></HEAD>の間に挿入します。
<!--
function Uruu(year) {
if (year == "" || year == null) {
} else if (year % 400 == 0) {
alert(year + "年はうるう年です");
} else if (year % 100 == 0) {
alert(year + "年はうるう年ではありません");
} else if (year % 4 == 0) {
alert(year + "年はうるう年です");
} else {
alert(year + "年はうるう年ではありません");
}
}
// -->
</script>
そして、次のようなタグを好きな場所へ挿入します。
<form>サンプル：
西暦：<input type="text" size="20" name="iyear" id="iyear" value="2009">年<br>
<input type="button" value="求める" onClick="Javascript:Uruu(iyear.value)">
</form>
なんとなく、JavaScriptのサンプル？サイトを始めたくなりましたので
作ってみました＾＾
よくあるサンプルサイトでは、著作権がどうのこうのいって、
著作権表示をしろやら、再配布禁止やら書いてますが、
比較的簡単で短いコードのどこに独自性や、著作権があるというのでしょうか。
そういうわけで、かなり自由に開放したいと思います。
作ってみました＾＾
よくあるサンプルサイトでは、著作権がどうのこうのいって、
著作権表示をしろやら、再配布禁止やら書いてますが、
比較的簡単で短いコードのどこに独自性や、著作権があるというのでしょうか。
そういうわけで、かなり自由に開放したいと思います。