JavaScriptでレベルアップ！
HTMLだけではホームページの表現にも限界があります。
そこで登場するのが「JavaScript」です。（「ジャバスクリプト」と読みます。）
JavaScriptを使うことにより１ランク上のホームページを目指しましょう！
<html>
<head>
<SCRIPT language="JavaScript">
<!--
function fade() {
for(i=0; i<=255; i=i+1 ) {
document.bgColor = i+i*256+i*256*256;
}
}
//-->
</SCRIPT>
</head>
<body onLoad="fade()">
<center>
<H2>Ｇ−ＳＴＡＴＩＯＮ</H2>
</center>
</body>
</html>
以上をコピー＆ペーストして
sample6.htmlというファイル名で保存しましょう。
サンプルが見たい人は以下のページを開いて見てください。
背景が黒から白に変化します。
フェードインサンプル
<html>
<head>
<SCRIPT language="JavaScript">
<!--
var op = "";
var opflag = false;
var tmp = 0;
function num(myNum) {
if( opflag == true )
document.myForm.text1.value="0";
if( document.myForm.text1.value == "0"
)
document.myForm.text1.value = myNum;
else
document.myForm.text1.value += myNum;
opflag=false;
}
function calc(myOp) {
if( opflag == true ) {
op = myOp;
} else {
if( op != "" ) {
document.myForm.text1.value = eval(
tmp+op+document.myForm.text1.value);
}
tmp = document.myForm.text1.value;
op = myOp;
}
opflag = true;
}
function cl() {
document.myForm.text1.value = "0";
tmp= 0;
op = "";
opflag = false;
}
//-->
</SCRIPT>
</head>
<body>
<center>
<form name="myForm">
<TABLE bgcolor="#808080">
<TR>
<TD colspan="4"><INPUT
type="text" name="text1"
value="0"
size="26"></TD>
</TR>
<TR>
<TD align=center><INPUT
type="button" value=" ７ "
onClick="num('7')"></TD>
<TD align=center><INPUT
type="button" value=" ８ "
onClick="num('8')"></TD>
<TD align=center><INPUT
type="button" value=" ９ "
onClick="num('9')"></TD>
<TD align=center><INPUT
type="button" value=" ／ "
onClick="calc('/')"></TD>
</TR>
<TR>
<TD align=center><INPUT
type="button" value=" ４ "
onClick="num('4')"></TD>
<TD align=center><INPUT
type="button" value=" ５ "
onClick="num('5')"></TD>
<TD align=center><INPUT
type="button" value=" ６ "
onClick="num('6')"></TD>
<TD align=center><INPUT
type="button" value=" × "
onClick="calc('*')"></TD>
</TR>
<TR>
<TD align=center><INPUT
type="button" value=" １ "
onClick="num('1')"></TD>
<TD align=center><INPUT
type="button" value=" ２ "
onClick="num('2')"></TD>
<TD align=center><INPUT
type="button" value=" ３ "
onClick="num('3')"></TD>
<TD align=center><INPUT
type="button" value=" − "
onClick="calc('-')"></TD>
</TR>
<TR>
<TD align=center><INPUT
type="button" value=" ０ "
onClick="num('0')"></TD>
<TD align=center><INPUT
type="button" value=" ＡＣ
" onClick="cl()"></TD>
<TD align=center><INPUT
type="button" value=" ＝ "
onClick="calc('=')"></TD>
<TD align=center><INPUT
type="button" value=" ＋ "
onClick="calc('+')"></TD>
</TR>
</TABLE>
</form>
</center>
</body>
</html>
以上をコピー＆ペーストして
sample7.htmlというファイル名で保存しましょう。
サンプルが見たい人は以下のページを開いて見てください。
ＷＥＢページ上で電卓が使えます。
ＷＥＢ電卓サンプル
|