JavaScriptでできること

Javascriptを使うとどのようなことができるのか、一部紹介します。

ポップアップウィンドウの表示

ポップアップに文字を入力させたり、左クリック禁止等の表示ができます。応用させれば、ブラウザ上で表示される無骨なものではなく自分でデザインしたものを表示させることが可能になります。

表示

(実際に右ｸﾘｯｸしてみてください)

コード

--Javascriptファイルに記述する文--
 
<SCRIPT language="JavaScript">
<--!
//右クリックをすると警告ﾎﾟｯﾌﾟｱｯﾌﾟ表示
function alt() {
window.alert("右クリック禁止です。");
}
//-->
</SCRIPT>

--HTMLに記述する文--
 
<body onContextenu="alr();return false">

動き

画像を滑らかにスライドさせる等々、美しくみせることができます。

表示

コード

--Javascriptファイルに記述する文--
 
mySrc=new Array("img/a.png","img/b.png","img/c.png","img/d.png","img/e.png");
n=0;
function Gazou2(){
document.myimages.src=mySrc[n];
n++;
if(n==5){n=0};
setTimeout("Gazou2()",3000);
}

--HTMLに記述する文--
 
<body onload="Gazou2()">

時計

演算機能の応用で、現在時刻の情報を得てから計算することで時刻をそのまま表示することはもちろん、カウントダウン等をさせることもできます

表示

コード

--Javascriptファイルに記述する文--

function foo(x) { return (x < 10) ? '0' + x : x; }
function clock() {
  var now = new Date();
  var h = now.getHours();
  var m = now.getMinutes();
  var s = now.getSeconds();
  var t = foo(h) + ':' + foo(m) + ':' + foo(s);
  document.getElementById('myinput').value = t;    // 例1
  document.getElementById('myspan').innerHTML = t; // 例2
}
setInterval(clock, 1000);
window.onload = clock;

--HTMLに記述する文--
 
<body onload="clock()">

演算

単純な四則演算から、時間や税込などの煩雑な計算もこなせます。

表示

コード

  
--JavaScriptファイルに記述する文--

<script type="text/javascript"><!--
myTotal = 0;	// 現在の合計値
myInput = "";	// 現在入力している値
myCalc = "+";	// 合計と入力値の演算子
myFlg = 1;	// １回前に入力したもの 0:数字 1:演算子
 	
function myValue(myData){	// 0～9または小数点ボタンを押した
myFlg = 0;	// １回前に入力したものは数値
myInput += myData;	// 現在入力している値に追加
document.myForm.myLine.value = myInput;	// 現在入力している値表示
}	
 	
function myCalculate(myData){	// 演算ボタンを押した
if (myFlg==0){	// １回前に入力したものは数値か？
myFlg = 1;	// １回前に入力したものは演算子
myWork = myTotal + myCalc + myInput;	// 一連の計算式を作る
myTotal = eval(myWork);	// 計算式を計算させる
myInput = "";	// 現在入力している値をクリア
document.myForm.myLine.value = myTotal;	// 合計を表示
}	
if (myData == "="){	// 演算ボタンは[＝]か？
myTotal = 0;	// 合計をクリア
myCalc = "+";	// 演算子を[+]とする
}else{	// 演算ボタンは[＝]以外である
myCalc = myData;	// 演算子を退避させておく
}	
}	
 	
function myC(){	// クリアボタン[C]を押した
myTotal = 0;	// 合計クリア
myCalc = "+";	// 演算子クリア
myInput = "";	// 現在入力している値をクリア
document.myForm.myLine.value = myTotal;	// つまり、０を表示
}	
// --></script>

--HTMLに記述する文--

<form name="myForm">
<table border="1" bgcolor="#BDB76B">
<tr>
<td align="center" colspan="4" bgcolor="#d2691e"><font color="#FFFFFF">
<strong> 電　卓</font></strong></td>
</tr>
<tr>
<td colspan="3"><input type="text" size="12" name="myLine" value="0"></td>
<td align="center"><input type="button" value="Ｃ" onclick="myC()"></td>
</tr>
<tr>
<td align="center"><input type="button" value=" ７ " onclick="myValue(7)"></td>
<td align="center"><input type="button" value=" ８ " onclick="myValue(8)"></td>
<td align="center"><input type="button" value=" ９ " onclick="myValue(9)"></td>
<td align="center"><input type="button" value="÷" onclick="myCalculate('/')"></td>
</tr>
<tr>
<td align="center"><input type="button" value=" ４ " onclick="myValue(4)"></td>
<td align="center"><input type="button" value=" ５ " onclick="myValue(5)"></td>
<td align="center"><input type="button" value=" ６ " onclick="myValue(6)"></td>
<td align="center"><input type="button" value="×" onclick="myCalculate('*')"></td>
</tr>
<tr>
<td align="center"><input type="button" value=" １ " onclick="myValue(1)"></td>
<td align="center"><input type="button" value=" ２ " onclick="myValue(2)"></td>
<td align="center"><input type="button" value=" ３ " onclick="myValue(3)"></td>
<td align="center"><input type="button" value="－" onclick="myCalculate('-')"></td>
</tr>
<tr>
<td align="center"><input type="button" value=" ０ " onclick="myValue(0)"></td>
<td align="center"><input type="button" value=" ・ " onclick="myValue('.')"></td>
<td align="center"><input type="button" value=" ＋ " onclick="myCalculate('+')"></td>
<td align="center"><input type="button" value="＝" onclick="myCalculate('=')"></td>
</tr>
</table>
</form>

電　卓