ＪａｖａＳｃｒｉｐｔで出来る事

  1. 簡易サインボード
  2. JavaScriptで計算する
  3. JavaScriptでサブウィンドウを作る
  4. JavaScriptで日付と時刻
  5. JavaScriptで入力した文字列の先頭文字をチェック


1.簡易サインボード
<! java_signal.html>
<html>
<head>
<title>KnetCGIService&WebInformation</title>
<script language="JavaScript">
<!-- Beginning of JavaScript
var News = "ようこそ ケーネットへ。　参考になりますか？　　　"
var timer=0
function Signal_board() {
document.keiji.str.value = News
News = News.substring(2,News.length)+News.substring(0,2)
timer = setTimeout("Signal_board()",500)
}
// End of JavaScript -->
</script>
</head>
<body bgcolor="#ffffff" onLoad="Signal_board()" >
<br>
<hr border=1 width=100%>
<center>
<form name="keiji" onSubmit="0">
<input type="text" name="str" size=65 value="">
</form>
</center>
</body>
</html>
ページトップへ

2.JavaScriptで計算する
  • 注文数を入力して注文するをチェックして下さい。
  • JavaScriptの計算を見て頂くだけですので次の画面には進めません。
商　品 価　格 注文数 注文する
りんご 100円 個
パイナップル 300円 個
サクランボ 1500円 箱
スイカ 980円 個
みかん 1980円 箱

金　額 ＋ 消費税 ＝ 総合計

計算機能付(JavaScript)ＨＴＭＬ

<! java_order.html>
<html>
<head>
<title>ＪａｖａＳｃｒｉｐｔ</title>
<script language="JavaScript">
<!-- Beginning of JavaScript
function sumup(f) {
var gokei = 0;
if (f.data11.checked) {
if (f.data12.value != "") {
gokei += f.data10.value * f.data12.value;
}
}
if (f.data21.checked) {
if (f.data22.value != "") {
gokei += f.data20.value * f.data22.value;
}
}
if (f.data31.checked) {
if (f.data32.value != "") {
gokei += f.data30.value * f.data32.value;
}
}
if (f.data41.checked) {
if (f.data42.value != "") {
gokei += f.data40.value * f.data42.value;
}
}
if (f.data51.checked) {
if (f.data52.value != "") {
gokei += f.data50.value * f.data52.value;
}
}
if (gokei > 0){
var tax = (gokei) * 0.05
f.gokei.value = gokei;
f.tax.value = tax;
f.total.value = gokei + tax;
}else{
tax = "";
f.gokei.value = "";
f.tax.value = "";
f.total.value = "";
}
}
// End of JavaScript -->
</script>
</head>
<body bgcolor="#ffffff">
<center>
<! ------------------------------------->
<form action="" method="POST">
<table border=1 width=90%>
<tr nowrap>
<th width=55%>商　品</th>
<th width=10%>価　格</th>
<th width=13%>注文数</th>
<th width=12%>注文する</th>
</tr>
<tr>
<td>りんご</td>
<td align="right"><input name="data10" type="hidden" value="100" size=3 maxlength=3> 100円</td>
<td align="center"><input name="data12" type="text" value="" size=3 maxlength=3>個</td>
<td align="center"><input name="data11" type="checkbox" value="" onClick="sumup(this.form)"></td>
</tr>
<tr>
<td>パイナップル</td>
<td align="right"><input name="data20" type="hidden" value="300" size=3 maxlength=3> 300円</td>
<td align="center"><input name="data22" type="text" value="" size=3 maxlength=3>個</td>
<td align="center"><input name="data21" type="checkbox" value="" onClick="sumup(this.form)"></td>
</tr>
<tr>
<td>サクランボ</td>
<td align="right"><input name="data30" type="hidden" value="1500" size=3 maxlength=3> 1500円</td>
<td align="center"><input name="data32" type="text" value="" size=3 maxlength=3>箱</td>
<td align="center"><input name="data31" type="checkbox" value="" onClick="sumup(this.form)"></td>
</tr>
<tr>
<td>スイカ</td>
<td align="right"><input name="data40" type="hidden" value="980" size=3 maxlength=3> 980円</td>
<td align="center"><input name="data42" type="text" value="" size=3 maxlength=3>個</td>
<td align="center"><input name="data41" type="checkbox" value="" onClick="sumup(this.form)"></td>
</tr>
<tr>
<td>みかん</td>
<td align="right"><input name="data50" type="hidden" value="1980" size=3 maxlength=3> 1980円</td>
<td align="center"><input name="data52" type="text" value="" size=3 maxlength=3>箱</td>
<td align="center"><input name="data51" type="checkbox" value="" onClick="sumup(this.form)"></td>
</tr>
</table>
<p>
金　額 <input name="gokei" type="text" value="" size=6 onFocus="this.blur()"> ＋
消費税 <input name="tax" type="text" value="" size=6 onFocus="this.blur()"> ＝
総合計 <input name="total" type="text" value="" size=6 onFocus="this.blur()">
<p>
<input type=reset value="やり直す">
</form>
</td>
</tr>
</center>
</body>
</html>
ページトップへ

3.JavaScriptでサブウィンドウを作る

メインウィンドウよりサブウィンドウを呼び出すＪａｖａスクリプト。

<html>
<head>
<title>ＪａｖａＳｃｒｉｐｔ</title>
<script language="JavaScript">
<!-- Beginning of JavaScript
// サブウィンドウから呼び出す時の名前
self.name="main"
window.open("java_submenu.html","navi",
"width=180,height=150");
// End of JavaScript -->
</script>
</head>
<body>
</body>
</html>

呼び出されたサブウインドウ。
サブウィンドウをメニューとして使用する場合のＨＴＭＬ
ファイル名 java_submenu.html で保存して下さい。

<html>
<head>
<title>ＪａｖａＳｃｒｉｐｔ</title>
</head>
<body>
<p><a href="./java_signal.html" target="main">
簡易サインボード</a></p>

<p><a href="./java_order.html" target="main">
JavaScriptで計算する</a></p>

<p><a href="./java_navi.html" target="main">
JavaScriptで<br>サブウィンドウを作る</a></p>

<p><a href="./java_time.html" target="main">
JavaScriptで<br>日付と時刻を表示</a></p>

</body>
</html>
ページトップへ

4.JavaScriptで日付と時刻
注意：ＯＳがＵＮＩＸ系の場合、表示されない場合があります。

<html>
<head>
<title>ＪａｖａＳｃｒｉｐｔ</title>
<script language="Javascript">
<!-- Beginning of JavaScript
function watch() {
now = new Date();
year = now.getYear();
month = now.getMonth()+1;
day = now.getDate();
hour = now.getHours();
min = now.getMinutes();
sec = now.getSeconds();
if (hour < 10) { hour = "0"+hour };
if (min < 10) { min = "0"+min };
if (sec < 10) { sec = "0"+sec };
document.Today.watch.value = year+"年"+month+"月"+day+"日 "+hour+":"+min+":"+sec;
setTimeout('watch()',1000)
}
// End of JavaScript -->
</script>
</head>
<body bgcolor="#ffffff" >
<p>日付と時刻<p>
<form name="Today">
<input name="watch" size="20">
</form>
<script language="Javascript">
<!-- Beginning of JavaScript
watch()
// End of JavaScript -->
</script>
</body>
</html>
ページトップへ

5.JavaScriptで入力した文字列の先頭文字をチェック
  • 半角の英数字を入力して、
    判定範囲を指定して下さい。

    入力されたデータの先頭文字が
    半角数字0〜9ならＯＫ。
    半角小文字a〜zならＯＫ。
    半角大文字A〜ZならＯＫ。
<html>
<head>
<title>ＪａｖａＳｃｒｉｐｔ</title>
<script language="JavaScript">
<!-- Beginning of JavaScript
function Data_Check1(f){
if (f.data1.value >= 0 && f.data1.value < 10) Check1()
else Check2()
}
function Data_Check2(f){
if (f.data1.value >= "a" && f.data1.value <= "z") Check1()
else Check2()
}
function Data_Check3(f){
if (f.data1.value >= "A" && f.data1.value <= "Z") Check1()
else Check2()
}
function Check1(){
alert("入力されたデータは指定範囲内です。")
}
function Check2(){
alert("入力されたデータは指定範囲外のデータです。")
}
// End of JavaScript -->
</script>
</head>
<body bgcolor="#ffffff">
<form action="" method="POST">
<ul>
<li>半角の英数字を入力して、判定範囲を指定して下さい。<br>
<input type="text" name="data1" size="20" value=""><br>
入力されたデータの先頭文字が<br>
<input name="data2" type="radio" onClick="Data_Check1(this.form)">半角数字0〜9ならＯＫ。<br>
<input name="data2" type="radio" onClick="Data_Check2(this.form)">半角小文字a〜zならＯＫ。<br>
<input name="data2" type="radio" onClick="Data_Check3(this.form)">半角大文字A〜ZならＯＫ。<br>
<input type="reset" value=" やり直す ">
</ul>
</form>
</body>
</html>
ページトップへ