KAIHATSUGIKEN GROUP
とりあえずHTML文章からメモ帳で作成しましょう
と入力しましょう。
動的に変るHTML文章をJavaScriptを使って作ってみましょう。
と入力しましょう。
少しScriptの説明をしましょう。
document.write()
wk_date = new Date()で取得した日付は普通の人にはわかりにくいですね
と入力しましょう。
少しScriptの説明をしましょう。
は月、日、時、分をそれぞれＳＥＴしています。
Date()というのが現在の日付を取得するJavaScriptの関数です。
すこし難しくなってきましたね。ゆっくり理解してから次へ進んでください。
日付・時刻を編集して表示することができるようになりましたね。
いかがですか？こんなの簡単というかたは次の章へ進んでください。
条件によって違う動作をするScriptを作ってみましょう。
Scriptの説明をしましょう。
※&&：かつ(and)
実際にページを作成して確認してみてください。
処理を繰り返すScriptを作ってみましょう。
Scriptの説明をしましょう。
実際にページを作成して確認してみてください。
*****************************************************************************
ほんじゃあアプレットでも貼ってみるか！！
*****************************************************************************
アクセスするたびに毎回背景色が変わります。背景色が変わる仕組みは、時間 の
秒の下一桁が何の数字かで決まります。
<SCRIPT LANGUAGE="JavaScript">
<!--
d=new Date();
Se=""+d.getSeconds();
Lo=Se.length;
if(Lo==2){
Se=Se.charAt(1);
}
Co=new Array(10);
Co[0]="#ff8080";Co[1]="#ffff80";
Co[2]="#80ff80";Co[3]="#00ff80";
Co[4]="#80ffff";Co[5]="#0080ff";
Co[6]="#ff80c0";Co[7]="#ff80ff";
Co[8]="#ff8000";Co[9]="#ffffff";
document.bgColor=Co[Se];
</SCRIPT>
*****************************************************************************
ページに入ってくるときとページを出るときに画面の背景色を変化させます。
カラーコードをお好みに合わせて変えてみてください。あんまり使いすぎると見てる
方がいらいらしてくるので使いすぎには注意しよう！（注）背景画像を設定してしまう
と動かなくなることがあります。
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
stcnt=0;
CO = new Array(10);
//カラーコード
CO[0]="#ff0000"; CO[5]="#00ffff";
CO[1]="#ff8000"; CO[6]="#0000ff";
CO[2]="#ffff00"; CO[7]="#8000ff";
CO[3]="#80ff00"; CO[8]="#ff00ff";
CO[4]="#00ff40"; CO[9]="#ff0080";
function BC(){
for(i=1;i<16;i++){
document.bgColor=CO[stcnt++];
if(stcnt>9){
stcnt=0;
}
//色の交換スピード
for(x=1;x<200;x++);
}
//フェードイン終了時の色
document.bgColor="#ffffff";
}
// -->
</SCRIPT>
<BODY onLoad="BC()" onUnload="BC()">//ここはbodyタグに足して下さい。
*****************************************************************************
最終更新日をホームページに表示させたい！でも、毎回いちいち書くのは面倒くさい！
そんな方にお勧めです
このプログラムを追加すると最終更新日が表示されます。最終更新日とはファイルを作
った日ではなく、
ＦＴＰサーバーに送った日のことです。
ＩＥ３では正しく表示されますが、ＮＳ３などで表示の形式が違うので、標準の形式で
表示するようにしています
<SCRIPT LANGUAGE="JavaScript">
<!--
if(navigator.appName=="Microsoft Internet Explorer"){
LE=document.lastModified.length;
Ms="最終更新日：";
Ye=document.lastModified.substring(LE-4,LE);
Mo=document.lastModified.substring(LE-19,LE-17);
Da=document.lastModified.substring(LE-17,LE-14);
Day=document.lastModified.charAt(0);
Ho=document.lastModified.substring(LE-13,LE-11);
Mi=document.lastModified.substring(LE-10,LE-8);
Se=document.lastModified.substring(LE-7,LE-5);
Year=Ms+Ye+"年 "+Mo+"月 "+Da+"日 "+Day+"曜日
";
Time=Ho+"時 "+Mi+"分 "+Se+"秒 ";
document.write(Year+Time);
}
else{
document.write("<center>最終更新日："+document.lastModified)
}
//-->
</SCRIPT>
*****************************************************************************
このページに入ってくるときに『ようこそ! WWW JavaScriptへ』と表示され 、この
ページを出るときにも『また来てね！』と表示されます。
<SCRIPT LANGUAGE="JavaScript">
<!--
function Login(){
alert("ようこそ! WWW JavaScriptへ");
}
function Logout(){
alert("また来てね！");
}
document.write('<BODY onLoad="Login()" onUnload="Logout()">');
// -->
</SCRIPT>
*****************************************************************************
時刻によって「午前１時をまわりました。」や「午後０時をまわりました。」 などが
２４時間分あるのでここの部分を変えることによって表示させるメッセージを 変える
ことができます。
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
word = new Array(24);
word[0]="「<B>日付が変って午前０時をまわりました。</B>」";
word[1]="「<B>午前１時をまわりました。</B>」";
word[2]="「<B>午前２時をまわりました。</B>」";
word[3]="「<B>午前３時をまわりました。</B>」";
word[4]="「<B>午前４時をまわりました。</B>";
word[5]="「<B>午前５時をまわりました。</B>」";
word[6]="「<B>午前６時をまわりました。</B>」";
word[7]="「<B>午前７時をまわりました。</B>」";
word[8]="「<B>午前８時をまわりました。</B>」";
word[9]="「<B>午前９時をまわりました。</B>」";
word[10]="「<B>午前１０時をまわりました。</B>」";
word[11]="「<B>午前１１時をまわりました。</B>」";
word[12]="「<B>午後０時をまわりました。</B>」";
word[13]="「<B>午後１時をまわりました。</B>」";
word[14]="「<B>午後２時をまわりました。</B>」";
word[15]="「<B>午後３時をまわりました。</B>」";
word[16]="「<B>午後４時をまわりました。</B>」";
word[17]="「<B>午後５時をまわりました。</B>」";
word[18]="「<B>午後６時をまわりました。</B>」";
word[19]="「<B>午後７時をまわりました。</B>」";
word[20]="「<B>午後８時をまわりました。</B>」";
word[21]="「<B>午後９時をまわりました。</B>」";
word[22]="「<B>午後１０時をまわりました。</B>」";
word[23]="「<B>午後１１時をまわりました。</B>」";
function showword(){
date=new Date();
hour=date.getHours();
document.write("<center>"+word[hour]);
}
// -->
</SCRIPT>
*****************************************************************************
ステータスバーにタイプライター風に５行に分けて１文字づつ表示することが できま
す。
以外と目立ってつい見てしまいます。（注）誰もが同じ解像度で見ているとは限りませ
ん。
１行をあまり長くすると、低解 像度で見ている人は画面からはみ出してしまいます。
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
TE1="ご来店ありがとうございます。 ";
TE2="このホームページは○年△月■日に変更しました。";
TE3="ごゆっくりご覧ください。";
TE4="次回のホームページ変更予定日は■年○月△日です。";
TE5="お楽しみに！";
M=TE1;
cnt=0;
TID=0;
function TYPE(){
status=M.substring(0,cnt++)
/*この下の「-10」は一時停止時間*/
if(cnt-10==M.length && M==TE1){cnt=0;M=TE2;}
if(cnt-10==M.length && M==TE2){cnt=0;M=TE3;}
if(cnt-10==M.length && M==TE3){cnt=0;M=TE4;}
if(cnt-10==M.length && M==TE4){cnt=0;M=TE5;}
if(cnt-10==M.length && M==TE5){cnt=0;M=TE1;}
clearTimeout(TID);
TID=setTimeout("TYPE()",150);
}
TYPE();
// -->
</SCRIPT>
****************************************************************************
まだ開いたことのないのリンク先を示す文字の色がリアルタイムに変わっていきます。
これをつけれ ば押したくなるリンクｂP！画面全体がちらつくことがあります。ネス
ケではうまくいかないみたいです
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
stcnt=0;
TID=0;
CO = new Array(10);
//カラーコード
CO[0]="#ff0000"; CO[5]="#00ffff";
CO[1]="#ff8000"; CO[6]="#0000ff";
CO[2]="#ffff00"; CO[7]="#8000ff";
CO[3]="#80ff00"; CO[8]="#ff00ff";
CO[4]="#00ff40"; CO[9]="#ff0080";
function CC(){
document.linkColor=CO[stcnt++];
if(stcnt>9){
stcnt=0;
}
clearTimeout(TID);
TID=setTimeout("CC()",300);
}
CC();
// -->
</SCRIPT>
*****************************************************************************
ステータスバーに１文字づつ表示し、さらに点滅します。
<head>
<!-- ここから -->
<script language="javascript">
var current = 2;
var flg = 0;
var ctr = 0;
var spd = 300;
var max = 12;
msg1=" ようこそ ";
msg2="わたしのホームページへ！ ";
msg3="ごゆっくりお楽しみください。";
msg=msg1+msg2+msg3;
function type() {
if (current > msg.length){
flg = 0;
ctr = 0;
flash();
} else {
window.status = msg.substring(0,current);
current= current + 2;
setTimeout("type()",spd);
}
}
function flash(){
ctr++;
if (ctr > max) {
current = 2;
type();
} else {
if (flg == 0){
window.status=msg;
flg = 1;
} else {
window.status=" ";
flg = 0
}
setTimeout("flash()",spd)
}
}
</script>
<!-- ここまで -->
</head>
<body bgcolor=white onLoad="type()">
******************************************************************************
ジャンプしたい項目を選んでボタンを押してください。
というクリックするとプルダウンメニューが出てきて選択するとそのページへジャンプ
します。
ジャンプしたい項目を選んでボタンを押してください。<BR>
<BR><br>
<form method=post name="f1">
<select name="s1">
<option value="script.htm">Home
<option value="links.htm">Link
<option value="about.htm">About this Page
</select>
<input type=button value="jump" onClick="location.href = document.f1.s1.optio
ns[document.f1.s1.selectedIndex].value">
</form>
<br><br>
******************************************************************************
下のボタンを押すと、所定の時間（ここでは５秒）経過後、指定のＵＲＬ
（ここではスタートページ）にジャンプします。
<script language="javascript">
t = 5000;
function timer(){
setTimeout("location.href='java.html'" , t)
}
</script>
*****************************************************************************
ボタンを押すとリロードしてくれます
誰かこの機能が欲しいと言っていたような・・JavaScriptなら簡単にできるよぉ
<FORM>
<INPUT TYPE="button" VALUE="Reload"
onClick="history.go(0)">
</form>
******************************************************************************
文字をページ内の枠の中に流します。
<html>
<head>
<title>Moji Scroll in Page</title>
<script language="JavaScript">
<!--
var moji;
moji="文字をページ内の窓の中に流します．．．";
moji=moji+moji;
function hyouji(){
setTimeout("hyouji()",100);
moji=moji.substring(2,moji.length)+moji.substring(0,2);
document.MojiForm.MojiInput.value=moji;
}
//-->
</script>
</head>
<body>
文字をページ内の窓の中に流します。
<form name="MojiForm">
<input name="MojiInput" type="text" size=50>
</form>
<script language="JavaScript">
hyouji();
</script>
<hr>
</body>
</html>
*******************************************************************************
色見本です。
<html>
<head>
<title>Color samples(2)</title>
<script language="JavaScript">
<!--
function haikei(col){
document.bgColor=col;
}
//-->
</script>
</head>
<body link="#000000" vlink="#000000">
<h2>色見本</h2>
色の名前の上にマウスカーソルを持っていくと背景色がその色に変わります。<br>
（ブラウザ側で背景色を固定している場合は、解除して下さい。）<br>
<table border=0 bgColor="#ffffff" cellspacing=12>
<tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('aliceblue')">aliceblue</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('antiquewhite')">antiquewhite</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('aqua')">aqua</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('aquamarine')">aquamarine</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('azure')">azure</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('beige')">beige</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('bisque')">bisque</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('black')">black</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('blanchedalmond')">blanchedalmond</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('blue')">blue</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('blueviolet')">blueviolet</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('brown')">brown</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('burlywood')">burlywood</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('cadetblue')">cadetblue</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('chartreuse')">chartreuse</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('chocolate')">chocolate</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('coral')">coral</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('cornflowerblue')">cornflowerblue</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('cornsilk')">cornsilk</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('crimson')">crimson</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('cyan')">cyan</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('dardorange')">dardorange</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('darkblue')">darkblue</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('darkcyan')">darkcyan</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('darkgoldenrod')">darkgoldenrod</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('darkgray')">darkgray</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('darkgreen')">darkgreen</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('darkkhaki')">darkkhaki</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('darkmagenta')">darkmagenta</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('darkolivegreen')">darkolivegreen</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('darkorange')">darkorange</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('darkorchid')">darkorchid</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('darkred')">darkred</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('darksalmon')">darksalmon</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('darkseagreen')">darkseagreen</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('darkslateblue')">darkslateblue</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('darkslategray')">darkslategray</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('darkturquoise')">darkturquoise</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('darkviolet')">darkviolet</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('deenpink')">deenpink</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('deepskyblue')">deepskyblue</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('dimgray')">dimgray</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('dodgerblue')">dodgerblue</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('firebrick')">firebrick</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('floralwhite')">floralwhite</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('forestgreen')">forestgreen</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('fuchsia')">fuchsia</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('gainsboro')">gainsboro</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('ghostwhite')">ghostwhite</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('gold')">gold</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('goldenrod')">goldenrod</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('gray')">gray</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('green')">green</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('greenyellow')">greenyellow</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('honeydew')">honeydew</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('hotpink')">hotpink</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('indianred')">indianred</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('indigo')">indigo</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('ivory')">ivory</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('khaki')">khaki</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('lavender')">lavender</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('lavenderblush')">lavenderblush</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('lawngreen')">lawngreen</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('lemonchiffon')">lemonchiffon</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('lightblue')">lightblue</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('lightcoral')">lightcoral</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('lightcyan')">lightcyan</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('lightgoldenrodyellow')">lightgoldenrodyellow</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('lightgreen')">lightgreen</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('lightgrey')">lightgrey</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('lightpink')">lightpink</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('lightsalmon')">lightsalmon</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('lightseagreen')">lightseagreen</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('lightskyblue')">lightskyblue</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('lightslategray')">lightslategray</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('lightsteelblue')">lightsteelblue</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('lightyellow')">lightyellow</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('lime')">lime</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('limegreen')">limegreen</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('linen')">linen</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('magenta')">magenta</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('maroon')">maroon</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('mediumaquamarine')">mediumaquamarine</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('mediumblue')">mediumblue</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('mediumorchid')">mediumorchid</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('mediumpurple')">mediumpurple</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('mediumseagreen')">mediumseagreen</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('mediumslateblue')">mediumslateblue</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('mediumspringgreen')">mediumspringgreen</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('mediumvioletred')">mediumvioletred</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('midnightblue')">midnightblue</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('mintcream')">mintcream</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('mistyrose')">mistyrose</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('moccasin')">moccasin</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('navajowhite')">navajowhite</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('navy')">navy</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('oldlace')">oldlace</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('olive')">olive</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('olivedrab')">olivedrab</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('orange')">orange</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('orangered')">orangered</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('orchid')">orchid</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('palegoldenrod')">palegoldenrod</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('palegreen')">palegreen</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('paleturquoise')">paleturquoise</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('palevioletred')">palevioletred</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('papayawhip')">papayawhip</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('peachpuff')">peachpuff</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('peru')">peru</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('pink')">pink</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('plum')">plum</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('powderblue')">powderblue</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('purple')">purple</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('red')">red</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('rosybrown')">rosybrown</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('royalblue')">royalblue</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('saddlebrown')">saddlebrown</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('salmon')">salmon</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('sandybrown')">sandybrown</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('seagreen')">seagreen</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('seashell')">seashell</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('sienna')">sienna</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('silver')">silver</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('skyblue')">skyblue</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('slateblue')">slateblue</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('slategray')">slategray</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('snow')">snow</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('springgreen')">springgreen</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('steelblue')">steelblue</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('tan')">tan</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('teal')">teal</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('thistle')">thistle</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('tomato')">tomato</a></td>
</tr><tr align=center>
<td><a href="bgcolor.htm" onMouseOver="haikei('turquoise')">turquoise</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('violet')">violet</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('wheat')">wheat</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('white')">white</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('whitesmoke')">whitesmoke</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('yellow')">yellow</a></td>
<td><a href="bgcolor.htm" onMouseOver="haikei('yellowgreen')">yellowgreen</a></td>
</tr>
</table>
<hr>
</body>
</html>
*******************************************************************************
曜日ごとに背景の画像を変化させる
<!--headから/headの中に記入する-->
<script language="JavaScript">
<!--
var today=new Date();
var yobi=today.getDay();
if (yobi==0)
document.write("<body background='sunday.gif' text='#FF0000'></body>");
if (yobi==1)
document.write("<body background='monday.gif' text='#00AA55' link='#ff5511'></body>");
if (yobi==2)
document.write("<body background='tuesday.gif' text='#BBFFFF' link='#77FF99' vlink='#BBDD55'></body>");
if (yobi==3)
document.write("<body background='wednesday.gif' text='#DD11BB'></body>");
if (yobi==4)
document.write("<body background='thursday.gif' text='#0000FF'></body>");
if (yobi==5)
document.write("<body background='friday.gif' text=''></body>");
if (yobi==6)
document.write("<body background='saturday.gif' text='#FF0000' link='#AA1100' vlink='#009900'></body>");
//-->
</script>
******************************************************************************
日数カウントダウン
<html>
<head>
<title>Countdown</title>
</head>
<body>
<h3>日数カウントダウン</h3>
<script language="JavaScript">
<!--
var today=new Date();
var target=new Date(2001,1,1);
x=Math.ceil((target.getTime()-today.getTime())/(24*60*60*1000));
document.write("<font size=5 color=#00ff00>２１世紀まで、あと</font><
font size=7 color=#ff0000>",x,"日</font>");
//-->
</script>
<hr>
</body>
</html>
******************************************************************************
２ヶ月分カレンダー
<html>
<head>
<title>Calendar</title>
</head>
<body text="#771155">
<script language="JavaScript">
<!--
var today=new Date();
var y=today.getYear();
var m=today.getMonth();
var d=today.getDate();
var kongetsu=new Date(y,m,1);
var raigetsu=new Date(y,(m+1),1);
var saraigetsu=new Date(y,(m+2),1);
var konyoubi=kongetsu.getDay();
var raiyoubi=raigetsu.getDay();
var konnissu=(raigetsu.getTime()-kongetsu.getTime())/(24*60*60*1000);
var rainissu=(saraigetsu.getTime()-raigetsu.getTime())/(24*60*60*1000);
var konnokori=(7-(konyoubi+konnissu)%7)%7;
var rainokori=(7-(raiyoubi+rainissu)%7)%7;
var kaigyou;
var fcs;
var fce;
var bls;
var ble;
document.write("<table border=0><tr><td>");
document.write("<table border=5 bgcolor='#DDFFBB'>");
document.write("<tr><td colspan=7 align=center>",m+1,"月</td></tr>");
document.write("<tr>");
document.write("<td><font color='#FF0000'>日</font></td><td
>月</td><td>火</td><td>水</td><td>木</td><td&
gt金</td><td><font color='#0000FF'>土</font></td>");
document.write("</tr><tr>");
for (i=1; i<=konyoubi; i++) {document.write("<td align=center>.</td>");}
for (i=1; i<=konnissu; i++) {
if ((konyoubi+i)%7==0) kaigyou="</tr><tr>"; else kaigyou="";
if ((konyoubi+i)%7==0) {fcs="<font color='#0000FF'>"; fce="</font>";}
if ((konyoubi+i)%7==1) {fcs="<font color='#FF0000'>"; fce="</font>";}
if ((konyoubi+i)%7>1) {fcs=""; fce="";}
if (i==d) {fcs="<font color='#BB00FF'><b>"; fce="</b></font>";}
document.write("<td align=center>",fcs,i,fce,"</td>",kaigyou);}
for (i=1; i<=konnokori; i++) {document.write("<td align=center>.</td>");}
document.write("</tr>");
document.write("</table>");
document.write("</td><td>");
if (m+2>12) m=m-12;
document.write("<table border=5 bgcolor='#DDFFBB'>");
document.write("<tr><td colspan=7 align=center>",m+2,"月</td></tr>");
document.write("<tr>");
document.write("<td><font color='#FF0000'>日</font></td><td
>月</td><td>火</td><td>水</td><td>木</td><td
>金</td><td><font color='#0000FF'>土</font></td>");
document.write("</tr><tr>");
for (i=1; i<=raiyoubi; i++) {document.write("<td align=center>.</td>");}
for (i=1; i<=rainissu; i++) {
if ((raiyoubi+i)%7==0) kaigyou="</tr><tr>"; else kaigyou="";
if ((raiyoubi+i)%7==0) {fcs="<font color='#0000FF'>"; fce="</font>";}
if ((raiyoubi+i)%7==1) {fcs="<font color='#FF0000'>"; fce="</font>";}
if ((raiyoubi+i)%7>1) {fcs=""; fce="";}
document.write("<td align=center>",fcs,i,fce,"</td>",kaigyou);}
for (i=1; i<=rainokori; i++) {document.write("<td align=center>.</td>");}
document.write("</tr>");
document.write("</table>");
document.write("</td></tr></table>");
//-->
</script>
<hr>
</body>
</html>
******************************************************************************
そんなわけでいろいろなホームページに行ってあらゆるJavaスクリプトやJavaアプレッ
トをダウンロードするなりコピーして自分のページに貼り付けてみて下さい。
そうして大事なことはそれをそのままコピーして貼り付けるのではなく少しでも自分の
オリジナルで仕上げることです。
ここまで勉強すればだいたいのスクリプトは理解できると思います。
最初はアプレットの貼り付けやその記述の意味。
だんだんといろいろな.javaファイルを手に入れて自分のオリジナルのスクリプトを
作成できればと思います。
あえて小難しいJavaの言語については触れませんでしたが最終的には言語自体を勉強
することになります。
そのときは迷わず本屋さんに行きましょう。
そうそう。
僕のページにもいろいろなJavaスクリプトが埋め込んであります。
トップページからスタートページにはいるときにはフラッシュバックするJavaスクリプ
トやブラウザのしたにあるコメントバーに横スクロールするスクリプト・・
でも、あんまりにもメモリーを消費するのでここまで書いておいていうのもなんだけど
Javaはあまり好きではありません・・・
でも、一応これからのために勉強しておきましょう！！
では
kg-group@ra2.so-net.or.jp
Iichirou Suzuki
*******************************************************************************
Java Language
Javaってなによ？
JavaはSunMicrosystems社が発表したインターネット用のオブジェクト指向言語です。
Java言語はC++言語をインターネット用に特化させたものです。
ここら辺のことはあまりに知られていないことですが、ちなみにJ++とはJava言語の
コンパイラーのことです。
じゃあ何でVisual J++であってVisualJavaではないのでしょうか？
それはMicrosoft社が開発したBasic言語のコンパイラをVisualBasic
C/C++言語用のコンパイラをVisual C++
として同じようにJavaを開発したのはあくまでSunMicrosystemsであってMicrosoft
ではないからです。
だって商標があるんだから人が作ったJavaという名前をさすがにMicrosoftも流用
することができなかったためです。
だめ押しするようですがC/C++の両者も同じくMicrosoft社が開発した言語ではありま
せん。
C/C++のコンパイラーを開発したのです。
そうそう
C++ の
プラプラ
の意味はC言語で言うインクリメント（++という記述のことです）の意味で
一つ追加するとか一つ先に行くという意味から来ています。
C++ とは C言語の一歩先を行く新しいC言語という意味です。
それと、Javaはインターネット用言語な訳ですからJavaのプログラムがオフラインで
動いてもあまり意味がありません。
C/C++のインターネット版としてとらえるのが一番わかりやすいものと思います。
*****************************************************************************
それで・・・・
そもそもJavaの歴史とはSunMicrosystemsが家電用オブジェクト指向プログラミングを
？？？開発しました。その名前を
Oak
と、名付けました。
単純に窓から樫の木（oak）が見えたからだそうです。（単純・・・・）
OakはC++言語を基本にした言語です。
Oakの元になったのはC++言語です。
C++言語の元になったのはC言語です。
そーんなわけで日の目を見ることもなく当然具体的な商業性かもないままインターネッ
トブーム到来です！！
企業とは恐ろしいものでやはりインターネットに目を付けました。
そうです。
Oakはインターネット版言語Javaと名前を変え急に日の目を見ることとなったのです。
Javaという言葉はそのものズバリジャカルタの「ジャワ島」から来ています。
ジャヴァは英語でジャワはインドネシア語です。（そんなこと知ってて意味はないけど
一応知っているとゆくゆく知らない人とのウイットに富んだ会話が楽しめます・・）
ハウスのジャワカレーなどは結局似たもの夫婦な訳です。
ちなみにジョンソンの風呂釜用洗浄剤「ジャバ」は単に商品が蛇腹の形をしているから
だそうですが・・・
最初が家電用言語だったのに無理矢理インターネット言語にしてしまったのだから
これからが大変です。
もう、いろいろな問題が出てきて・・・・
実際はプログラムといってもアプレットと呼ばれる単独ではなんの役にも立たない
小さなプログラムで構成されているわけですからブラウザやOSがなくてはお話になり
ません。
それにインターネットを通してデータが送られてくると言うところがくせ者です。
小さなプログラムであれば常に最新の情報をインターネットで受信してそれをマシンの
中で実行するというインターネットのダウンロードとは比較にならない程のスピードで
すが（このことについては後から詳しく説明します・・・）あまりに大きなプログラム
は現実的ではありません。当然通信速度は日に日に速くなってきています。
ましてやインターネットユーザーが増えれば増えるほど接続には時間が掛かるように
なってしまうのは事実です。
****************************************************************************
ジャヴァのシステムは必要最低限のものは自分のマシンのブラウザやOSの中にあらかじ
め用意しておいて足りない部分（そのプログラムを実行するためのそのプログラムだけ
の情報）だけをインターネットでロードするという仕組みです。
（簡単すぎるから語弊もありますが・・・）
となると当然受信するデータは小さくて済むし、実行するのは使っているマシンの性能
に依存するわけです。
先ほども言いましたが、ダウンロードしてそれから解凍してその後インストールして、
アーンド
「これ、古い・・・」
ということがありません。
常に最新のものを回線をつないでさえいれば自動的にブラウザが読みとって新しい情報
にセットアップしてくれます。
ゆくゆくはウインドウズなどもインターネットでホームページを見ているうちに
「なーんかしらないうちにウインドウズ９９になってたよ・・・」
という日も遠くはないはずです。
しかし！！
ジャヴァが速いのはインターネット上でだけです。
実効速度の点ではコンパイラにはかないません。
C/C++に比べて平均して２０倍は遅いという報告があります。
ジャヴァアプレットが何とか動いているのはジャヴァシステムの特定部分がC/C++で
動作しているからだと言うことです。
Javaの元・・OakはC++を基本にして作られたことをここで納得するわけですね。
納得というか・・安心というか・・・
ここで・・・
JavaScript
というものが登場です。
Javaとは名前が似ていますが全くの別物です。
JavaはSunMicrosystemsが開発しましたが、JavaScriptはNetscapeComunicationsが
開発しました。有名なNetScapeというブラウザを作っている会社です。
Javaがインターネットでコンパイルしたバイトコードのファイルで提供するのに対して
（なんだそりゃ？？）JvaScriptはHtmlファイルの中に直接注釈型の形でソースプログ
ラムを記述します。
スクリプト言うのは.htmlファイルの中で記述されるプログラムのことです。
こうした言語をスクリプト言語といってプログラムはHtmlのソースを見れば全部丸見え
ですが、Javaより手軽にプログラミングできます。
*******************************************************************************
Htmlという言語は 言語などに良く出てくる goto 文に当たるリンク機能しかなく
条件判断すらできない
「史上最低の言語」
といわれています。
Htmlを理解していることだけで人に自慢するのはやめましょう・・・
JavaScriptは史上最低の言語（しつこい？）の穴を埋めるべくして登場した驚きの言語
だったわけです。
そこで・・・・
まけていないのはマイクロソフトです。
「じょうだんじゃねーよ、そんな若造に負けて・・俺はビルゲイツだぞブルブル！！」
てな感じで登場したのが
VBScript
です。
JavaScriptと同様にHtmlファイルの中に注釈の形で直接ソースプログラムを記述する
スクリプト言語です。
VisualBasicはウインドウズプログラミング用のBasic言語として登場しました。
その後
VBA(VisualBasicAplication)と呼ばれるバージョンになり、ウインドウズアプリケーシ
ョンで共通に使える便利な言語となりました。
そして、VBScriptと発展してインターネット用プログラミング言語として対抗馬を
差し出したわけです。
しかし、自己顕示欲と
「仲間じゃないやつは、つらいおもいをさしてやるー！！」
という、相変わらず高飛車なビルゲイツは
インターネットエクスプローラーでないとVBScriptで作ったスクリプトを画面表示
できないようにするというネットスケープへの対抗心むき出しにもした姿に周りは
「いい加減にどっちかにしてよ・・・」
との声も最近は多いようです。
JavaがゆくゆくのOSに変わる・・・
とか
C/C++言語の代わりにプログラミングの王者はJavaだ！！
とか言っている人には
「それはユニックスとウインドウズが戦っていたかなり昔の話だね・・・」
と、一つくぎを差しておきましょう。
結局は元々は家電用言語であるということを忘れてはいけません。
Javaで大きなプログラムを組むとか・・・
そんなことをしているひまがあったら純粋にC/C++で作った方が1000倍良いものが作れ
ます。しかも高速です！！
史上最低の言語Htmlをあくまで補助するという言語なのです。
Javaの良いところを学んで訳の分からない妄想から速く脱出しましょう！！
*******************************************************************************
とりあえずは作ってみよう！！
まず、Microsoft Visual J++ を起動してください。
ここの段階で
「え、ないとだめなの？」
といっている人はイメージトレーニングだけでもしておいてください。
ファイルメニューから新規作成をクリックします。
新規作成ダイアログボックスが開いたら
「作成するファイルの種類」の中で「プロジェクトワークスペース」を選んでください
次に新規プロジェクトワークしペースダイアログが表示されるので
「プロジェクトワークスペース名」に適当に
Test1
とでも入力しておいてください。
その他の部分はそのままでよいです。
ここでTest1と入力すると下の部分にある「位置」のパスの後ろに付け足されているのが
わかりますか？
ここで作成したプロジェクトワークスペースはそこの場所に生成されるということにな
ります。
プラットフォームの欄に
「Java Virtual Machine」
の欄にチェックが入っていると思いますがそれはJavaプログラムが実行されるインタプ
リタを示します。
異常が確認できたら作成をクリックしてください。
次のページからは変更する部分はありません。
でも、せっかくここまで来たのだからどんなことが起きているのかを見ておきましょう
「ふむふむ・・・」
と読んでみて次へボタンを押してください。
作成するプログラムをどのように実行しますか？
では アプレットのみを選択していますか？
デフォルトではちゃんとそこにチェックが付いています。
サンプルHtmlファイルを作成しますか？
では
生成する
になっていますか？
アニメーションをサポートしますか？
には
する
に、チェックが付いていますか？
後はどんどんOKを押して完了をクリックしてください。
左上に Test1クラスというフォルダが見えますか？
そのウインドウ伸したには３つのタブが見えます。
一つはClassView
FileView
InfoView
FileView
にして下さい。
では自動生成された
Test1.html
をクリックして見てみましょう。
次にTest1.java
をクリックして見て下さい。
なーんか大量に記述されています。
勉強していくうちにすべての文章が理解できるようになります。
そうして簡単にJavaアニメーションを作成することができます。
では Ctrlキーを押しながらファンクションキーの F 5 を押して下さい。
ビルドー実行という作業に入ります。
シンボルを読み込んでいます・・・・・
の表示の後に
インターネットエクスプローラが起動して
アプレットは開始しました。
イメージを読み込み中・・・・
と表示されます。
今しばらく待ちましょう。
そうです。
前にもお話ししましたが、Javaは行動が遅いのです・・・とほほ
ページが表示されました。
と出たら
おー！！（そこまでの感動はないでしょう・・・）
地球が回っています。
そう、ただそれだけです。
時代が平成になってもうすぐ１０年になろうとしている今でも開発者の人たちは
このくらいのことで驚いているのでしょうか？
そう言う意味でもJavaというのは新しくはないですねー
******************************************************************************
ところでNetscape Navigatorでは 表示速度が１０数倍も遅くなります。
というかインターネットエクスプローラだから速くなるだけで
ちんたらちんたら作業をしている暇な人はNNでも良いのではないでしょうか？
僕は早いほうがよいのでIEを使っています。
もっと速いのがあればそれにします。
ブラウザは要するにその画像やデータを高速にちゃーんと（ここら辺が難しい・・）
表示してくれるものであればなんでも良いです。
コンポーネントの大きさから言ってIEが今は良いみたいです。
長いものには巻かれろとは昔の人はよく言った物で
世界一の大金持ち企業のマイクロソフトに僕は簡単に巻かれました。
ネットスケープがマイクロソフトよりもお金持ちになったら当然僕は
ネットスケープを支持します。
どんなに良いアイディアがあってもお金がなくちゃ企業はね・・・
アップルもマイクロソフトの傘下に入ったわけだし・・・
気楽に巻かれましょうよ・・・
*****************************************************************************
次はインターネット上で見てみましょう。
この段階で
Ftpってなに？
とか
ディレクトリって？
といっている人はここから先は読んでも分からないのでここまでのお話を読んで
ここからは気合いを入れて何度も読み直して下さい。
Ftp（ファイル転送プロトコル）
これは簡単に言うと自分のマシンの中のファイルを電話回線を使って自分が契約してい
るサーバーのディレクトリに転送するシステムのことを言います。
もちろん逆にサーバーにおいてあるファイルを自分のマシンに転送することもできます
多くの人はFtpソフトを利用して簡単に操作できるようにしています。
電話回線を使って転送するわけですから大きなファイルは当然時間が掛かります。
気を付けましょう。
ウインドウズではエクスプローラに毛が生えたような作業なので問題はありません。
結局ホームページディレクトリに転送するのは
Test1.class
Test1.html
img0001.gif〜img0018.gif
までのファイルです。
とりあえずはFtpソフトを使ってファイルを転送してしまいましょう。
public_htmlの中に
jtest
というフォルダを作ってその中にさらに
test1
というフォルダを作成してその中にファイルを転送していきます。
public_htmlディレクトリ
ブラウザによって読み込まれるファイルはホームページディレクトリの中にある
public_htmlというディレクトリ伸したにあるファイルやディレクトリです。
一般に
http://www02.so-net.or.jp/~kg-group/
というディレクトリは正確には
http://www02.so-net.or.jp/public_html/kg-group/
ということになります。
index.htmlというファイルはファイル名を指定しなくても自動的に
indexと言うhtmlファイルは一番最初に読み込まれることになっています。
だから当然ディレクトリの下の一番最初に読み込まれるhtmlファイルの名前は
index.html
になります。
******************************************************************************
忘れてました。
ホームページディレクトリは契約していますか？（おいおい・・）
契約していないとだめです。（こんなこといわせるなー・・・・）
契約してから転送しましょう。（頼むね・・・・）
では
ウインドウズの検索で
ftp.exe
をクリックして下さい。
Ms-dos ウインドウが起動して
ftp>
と表示されるはずです。
そうしたら
ftp>open ドメイン名
を入れましょう
ドメインメイトは
http://www02.so-net.or.jp
の
so-net.or.jp
の部分です
その表示の後に
User : ユーザー名
を入力して下さい。
その後に
Password : パスワード
と表示されます。
パスワードを入力して下さい。
230 User ユーザー名 logged in.
と表示されます。
ここからはユニックスの簡単な知識が必要です。
ユニックス入門を読みましょう。
それからMS-DOSの知識も必要です。
MS-DOS入門も読んで起きましょう。
ではpublic_htmlに移動します。移動するには cd (チェンジディレクトリ）
というコマンドを使います。
fpt>cd public_html
と入力すると
250 CWD command successful.
と、表示されるので
ftp>mkdir jtest
と入力して下さい。
mkdir は （メイクディレクトリ）のコマンドでディレクトリを作るぞ！！！
という意味です。
その後の jtest
は、作りたいフォルダ名になります。
257 MKD command successful.
と、表示されたら
ftp>cd jtest
と、入力して
250 CWD command successful.
と、表示されたらさらに jtest の中に test1 というフォルダを作成します。
ftp>mkdir test1
と入力してその後に
257 MKD command successful.
といった表示になります。では作ったtest1ディレクトリに移動します。
ftp>cd test1
250 CWD command successful.
といった表示が出ます。
今いる現住所は
public_html/jtest/test1
となります。
ではファイル転送を始めます。
その前に
put は ファイルをサーバーに置く
get は サーバーからファイルをとる
という意味です。
ではtest1.htmlをファイル転送します。
ftp>put test1.html
とすると
200 PORT command successful.
150 Opening Ascii mode data connection for test1.html
226 Transfer complete
207 bytes sent in 0.00 seconds (207000.00 Kbytes/sec)
といった表示が出ます。
次に最も重要なのはtest1.classのファイル転送です。
ftp>binary
と入力してすが、実は最初の文字しか見ていないので
ftp>bin
で、良いわけです。すると
200 Type set to I.
といった表示が出ます。
そして
ftp>put test1.class
と入力すると
200 PORT command successful.
150 Opening BINARY mode data connection for test1.class.
226 Transfer complete.
3536bytes set in 0.00 seconds(3536000.00 kbytes/sec)
といった表示が出ます。これ以降のファイル転送は全てバイナリ転送になります。
アスキー転送に戻すときは
ftp>ascii
または
ftp>asc
とします。
残りの転送ファイルはImagesディレクトリの中のimg0001.gif-img0018,gifという画像
ファイルです。
これらももちろんバイナリファイルです。
ではまずimagesディレクトリを作成します。
ftp>mkdir images
ftp>cd images
これでimagesディレクトリを作成してそののディレクトリの中に移動できました。
img0001.gif-img0018.gifファイルは全部で１８個もファイルがあって一つ一つ転送す
るのはとても面倒です。
MS-Dosに出てくるワイルドカードを利用します。（UNIXのコマンドでもあります)
mput(Multi PUT)というコマンドを利用します。
先ほどのバイナリ転送のままでよいわけですから
ftp>bin
は、省略できます。
ftp>mput images\img*.gif
とします。すると
mput images\imag0001.gif
と聞いてきてYes,Noを聞いてきます。リターンを押すことでYesとして扱われるので
１８回エンターキーを押せばよいです。
では転送したファイルの確認をします。
ftp>ls
と入力して下さい。
簡単な表示がされます。
詳しい詳細は
ftp>dir
とすると
詳細表示がされます。
一つ上のディレクトリに移動するときは
cd..
と入力すると移動できます。
ftpを終了するときは
ftp>bye
と入力すると
221 Goodbye.
と表示されて終了することができます。
ひゃー
おしゃれですねー
それではインターネットで動作確認してみて下さい。
******************************************************************************
Sample を見てみましょう。
自分のホームページに取り入れたいサンプルのhtmlファイルをコピーして貼り付けて
次に***.classファイルをコピーして同じディレクトリにバイナリファイルとして
ftpで転送して下さい。
参考までに・・・・
マウスで画像をグリグリしてみて下さい。きっと最初は
「おー！！動いてるーー！！」
と、素直に感動できるはずです。
自分のホームページに取り入れたい場合はまず、
.html
というファイルを自分の取り入れたいhtmlファイルにコピーして貼り付けます。
ほかのファイルも当然全部動かすためには必要です。
.java
というファイルをクリックするとテキスト文がどかーっとでてきます
それを全部コピーして新規テキストファイルに貼り付けます。
貼り付けたらさっきクリックした***.javaの *** の部分と完全に同じ名前にして
拡張子をちゃーんと
.java
にします。
そうしたら貼り付けたい.htmlファイルと同じフォルダにしまってから
今のファイルををVisualJ++にドラッグして投げて下さい。
そして F5 キーを押して実行させて下さい。
ぐしゃぐしゃぐしゃーっと何かが始まってあっという間にコンパイルされます。
.class以外のファイルは全てアスキーモードでftpでファイル転送して下さい。
.classはバイナリーで転送して下さい。
Moleculeの
benzene.xyz
cyclohexane.xyz
ethane.xyz
water.xyz
の４つのファイルは、
models
というフォルダを作ってその中にしまって下さい。
そうして.htmlのファイルのある場所において下さい。
WireFrameと
WireFrame Funeも同じように
models
というフォルダを作って
cube.obj
knoxS.obj
をその中にしまって下さい。
cube.objはキューブです。
knoxS.objは舟です。
片方だけ取り入れたいときはどちらかをmodelsというフォルダにしまって
.htmlファイルのある場所において下さい。
Blink:点滅テキスト
Clock:時計
Draw:マウスによる線描画
Gragh Layout;自動レイアウト・アルゴリズム
Molecule:３次元分子模型
Nervous:テキストのアニメーション
WireFrame:３次元ワイヤーフレーム
WireFrame Fune:３次元ワイヤーフレーム 舟
Javaってどんなことができるのかなー？
って言う人にはこのくらいのことでだいたいなーんとなく分かってもらえたと思います
インターネットに 動き が加わって３次元的なホームページを作りたい人にはもって
こいの言語です。
次回はもう少し言語の解説やプログラムに少し解説を交えて説明していきたいと
思います。
では
*****************************************************************************
コンパイラとインタプリタ
コンパイラとはプログラミング言語で書かれたプログラムをコンピュータが分かる機械
語に翻訳して、実行できる形にするプログラムのことを言います。
インタプリタとはプログラミング言語で書かれたプログラムをコンピュータに分かる機
械語に通訳して実行していくプログラムのことを言います。
コンパイラは翻訳プログラム、
インタプリタとは通訳プログラムです。
******************************************************************************
中間言語
Javaはコンパイラ言語ですが、Javaコンパイラは実際のCPUの機械語に翻訳するわけでは
ありません。
Java仮想マシンと言われる架空のCPUの機械語に翻訳します。
特定のCPUに依存はしない実行プログラムができますが、実行にはJavaインタプリタが
必要です。
Java仮想マシンの機械語は中間言語に当たるわけです。
Javaではコンパイラでソースプログラムを中間言語に翻訳して、それをインタプリタで
実行するわけです。
Javaインタプリタはバイトコードをいちいち解釈して実行するので実効速度が遅くなり
ます。
そこで登場したがJITコンパイラ（ジャストインタイムコンパイラ）というものがあり
ます。
登場！！と言った分やっぱりJavaインタプリタよりも実行速度が２−３０倍速くなりま
す。
難しく言うと・・・・
JavaコンパイラはJavaソースプログラム（*.Java）をコンパイルして、Java仮想マシン
のバイトコードからなるJavaクラスファイル（*.class）を生成する
Javaランタイムはクラスファイル（*.class）を実行する。
Javaインタプリタはクラスファイル（*.class）を解釈し実行する。
Jitコンパイラはクラスファイル（*.class）を実際のCPUの機械語に翻訳してから実行
する。
なんだか分けがわからん・・・・
******************************************************************************
アプリケーションとアプレット
アプリケーションはC言語やC++、アセンブリ言語が作るOS上のコマンドとして実行でき
る通常のプログラムに相当するもので、単体で動かすことを目的としているものです。
アプレットとはほかのプログラム（.htmlファイルなど）に埋め込んで使う小さなプロ
グラムのことを言います。
この場合実行はブラウザーに内蔵されたJavaランタイムによって行われることになりま
す。
という感じで簡単に（？？？）良く出てくる単語を説明しましたが、結局はある程度の
単語は覚えるしかありません。
無人島で一人で勉強するのだったら別にかまわないのですが、人に教えてもらったり、
人に教えたりするときに自分で勝手に考えた単語でお話ししていると
「この人はプログラムの話をしていると、妄想癖になるようだね。・・・・」
と言われかねません。
訳の分からない妄想を持ちつついろいろな本を読んで頭でっかちになるのであれば
とっとと、一から簡単なことから勉強して行った方が断然早道です。
一応言語なんだから簡単なわけがないでしょ。
みんなでいつでも協力できる体制を今のうちから付けておきましょう。
*****************************************************************************
C/C++との違いについて
Javaでは関数という言葉がなくなっています。（なに？？）
そうです。C言語には関数という言葉がありましたが・・・・
でも単純に言葉が変わっただけで関数という言葉がJavaではメソッドという風に
呼ばれています。C言語では関数をFranctionと言いました。
JavaではMethodと言います。
どっちも対して変わらないから覚えましょう。
C/C++言語 Fanction 機能
Java Method 方法
******************************************************************************
クラスと構造体
C/C++ Java 等は・・・・オブジェクト指向です。（だからそれはなんだ？）
C言語系の言語を学ぼうとするとき必ず出てくる言葉にオブジェクト志向という言葉が
あります。
これはかつてのBASICが行番号順にしか処理できなかったのに対し、行番号などには関
係なく、必要なときに必要な処理だけを行わせるそんなプログラムなんだそうです。
これはプログラムをレゴブロックみたいにパーツにしてしまって必要なときに、そのパ
ーツだけを読み込んで処理するワケですね、ハイ。
まあ、BASICではサブルーチンというのがありましたが、これをさらに便利にした発想
がオブジェクト志向なんだと思います。
え〜、だいたい概要は分かりましたか？
実際にクラスとかオブジェクト指向とかうざったい単語がよく僕の周りでもしゃべって
いる人が居ますが具体的には・・・
つまり、『食べる』という命令を作ってしまえば、
佐藤さんは『食べる』
木村さんは『食べる』
というように『食べる』命令のプログラムを必要なときに読み込んでくれば２度も同じ
プログラムを書かずに終わってしまうワケです。
これがオブジェクト志向の基礎中の基礎らしいです。
ふー・・これが具体的か？
オブジェクト指向とはデータ(data)を処理過程(手続き:method)と同様に扱うプログラ
ミングの考え方ですが、
よく、こんな知ったかぶりな人が居ます。
「一つ一つのブロック化したオブジェクト（それはワードとかに出てくる画像の事だよ
バカ！！）が、沢山組み合わされているプログラム・・・・なんたらかんたら・・
これは全然違います。オブジェクトとは画像とか個体のものではなくてあくまで小さな
プログラム一つ一つのことを言います。
オブジェクト指向のプログラムは複数のオブジェクト（いわゆるよーいどんで同時進行
しているそれぞれのプログラムの作業です。）の進行表をクラスと呼ばれるものに記述
してプログラムの一番最初においておきます。
進行表は目立つところに置くのがよいです。
結局はオブジェクト指向のプログラムというのは並列作業や分散処理に向いています。
逆に言うと同時進行しない単純なものには向いていないと言うよりも無駄です。
そう言うわけでHTMLを補助するためにそれもインターネットくらいで（いや、別にバカ
にしている訳ではないけど）オブジェクト指向プログラムJavaってもったいなくないで
すか？
ま、Javaでなくてはできない事って言うのもあるからね。
******************************************************************************
とうとう出てきました。
専門用語について・・・・
僕は横文字ニガテだぁという人は多い事でしょう。
MacのAppleScriptのように日本語
で組めるプログラムもありますが、大半が困った事にちんぷんかんぷんな横文字ばかり
です。
しかも、関数だの変数だのオブジェクトだのメソッドだのプロパティだのもう似たよう
な連中がうろついているのでパニックですよね。
そこで次の章ではこの専門用語について細かい例を挙げながら説明したいと思います。
オブジェクト
オブジェクトはオブジェクトです、終わり。（苦笑）
要するに決まり文句の命令系統みたいなモノと思ってください。
いわば主語にあたる部分と考えて下されば良いでしょう。
windowオブジェクトはwindowに関する命令を出すためのモノ。
documentオブジェクトはHTMLの処理をするためのモノ。
navigatorオブジェクトはブラウザー情報に関するモノ。
mathオブジェクトは数値計算をするためのモノ。
こんな感じでしょうか。
メソッド
メソッドは直接的な命令内容です。
いわば動詞にあたる部分と考えて下されば良いでしょう。
ですからwindow.open();でウィンドウを開けるという事になります。
この他にもたくさんのメソッドが存在します。
プロパティ
プロパティは値の設定／取得を行うモノです。
いわば形容詞にあたる部分と考えて下されば良いでしょう。
ですからdocument.bgcolor=ffffff;でバックを白に設定します。
ある意味でメソッドと似ているので混乱しますが、
あんまり厳格に区別しなくても
使えれば問題ないワケですから悩む事でもありません。
この他にもたくさんのプロパティが存在します。
イベントハンドラ
イベントハンドラはある条件が発生した場合に実行するイベント用のモノです。
いわば特別な動詞です。
たとえば<a href="index.html" onmouseover="disp();return true;">
で
関数dispを呼びだし、実行します。
この他にもいくつかのイベントハンドラが存在します。
コンストラクタ
これはdateオブジェクトやnewを用いた場合しか現在のところないようです。
要するに関数の特殊なタイプでオブジェクトを生成します。
意味的には配列と関数の中間子みたいな存在だと思ってください。
あんまり強く意識するとパニックになるのでそんなもんかぁで十分です。
JavaScriptの書き方ルール
JavaScriptは<script></script>タグでHTML内に記入します。
また、BASICなどと違い、行番号に束縛されないため、
コンピュータに１行文の終了を教えなければいけません。
そこで、これで命令１行文終わりだよ！という意味で;を使用します。
変数の書き方ルール
変数とは数値や文字を代入させるための入れ物です。
a=0;だとか、msg="null";みたいな使い方をします。
また、文字は""で挟まないとコンピュータは数字として扱おうとしてエラーになります。
なお、大文字、小文字は判別されるので注意しましょう。
ちなみにa_msgという具合に_でつなげる事も出来ます。
そういえば、public_htmlなんて使い方もありますもんね。
さらにプログラム上ではvar w=0,n=0,msg="おいら";
なんて具合にまとめる事もあります。
なお、varは変数をつくりますよ！という宣言ですが、実はなくても機能します。
主な使用方法はa=1;a=a+1;みたいにしてaを1ずつ加算させるようなプログラムなど
値や内容を変化させたい場合に使います。まあ、だから変数なんですけど。（＾＾；）
文字連結の書き方ルール
上でも書きましたがコンピュータは数字中心なので
文字を扱うには""で挟んで使用します。
ですから文章や単語を２種類つなげたい場合は,か+でつなげます。
例えば以下のように使います。
a[0]="HTML3.2";
a[1]="JavaScript";
"当サイトは",a[n],"を使用しています。";
もしくは"当サイトは"+a(n)+"を使用しています。";
こう書く事で
a[0]の時は当サイトはHTML3.2を使用しています。
a[1]の時は当サイトはJavaScriptを使用しています。
なんて変更させるプログラムも作れます。
むろん、このままでは使用できませんけど。（＾＾；）
”と’の書き方ルール
文字を""で挟む事は分かってもらえたでしょうが、
""の中にもう一度、""を使用したい場合などもでてきます。
こういう場合は''で内側のモノを挟むようにします。
これでコンピュータも文章の終わりに悩まずに済むワケです。
たとえば、こんな風になります。
document.write("<a href='index.html'>[GO BACK]</a>");
演算子の書き方ルール
モノを比較して、ある条件のときだけ働かせたいプログラムなどを組みたいときに
必ず出てくるのが演算子です。
演算子は以下の２パターンがあり、数学の比較式と同じようなモノです。
関係演算式（２つのモノを比較する）
a==1 aが1のときtrue（条件を実行する）
a>=1 aが1より大きいときtrue（条件を実行する）
> 大きい
< 小さい
>= 大きいか同じ
<= 小さいか同じ
== 等しい
!= 等しくない
論理演算式（比較するモノを組み合わせる）
a==1 && b==1 aが1かつbも1のときtrue（条件を実行する）
a==1 || b==1 aが1またはbが1のときtrue（条件を実行する）
! 否定
&& かつ
|| または
for文の書き方ルール
for文とは繰り返し処理を行うための文章です。
for(i=1;i<=10;i=i+1;){
}
のように使います。
これは変数iは最初は1です、10より小さい間はi=i+1しながら
｛｝の内容を実行しますという内容です。
ちなみに式はi+1のときに限りi++と書く事もできます。
また、多重ループをさせる場合は
for(i=1;i<=2;i=i+1;){
for(j=1;j<=3;j=j+1;){
}
}
のように使い、内容はまずiのループが実行され、
jが1〜3までのループを行ってからiの式に戻ってきます。
ですから内容の変化は以下のとおりです。
i=1 j=1
i=1 j=2
i=1 j=3
i=2 j=1
i=2 j=2
i=2 j=3
if文の書き方ルール
if文とは条件分岐の際に必ず出てくる基礎中の基礎とも言える式です。
使い方は以下の通りで当然、演算式と組み合わせて使う事になります。
if(式の内容){
実行内容
}
else{
実行内容
}
elseは条件に合わなかった場合を意味しますので不必要なときは省略します。
一例としてこれでも立派なプログラムです。
<script>
for(i=1;i<=100;i++){
if(i==100){
document.write(i+"100カウント達成<br>");
}
else{
document.write(i+"まだ100じゃないです<br>");
}
}
</script>
関数の書き方ルール
関数とは処理単位をひとまとめにした部品（ひな型）です。
いわば動詞なのですが、自分で作り出した造語の類になります。
ですから自分流のフォーマットによる命令を設定する事ができるワケです。
なお、関数はfunctionで設定します。
例えば
function uni(){
}
でuniという処理の命令ができあがります。
また、一例としてこんな風にもできます。
<script>
function msg(name,fsize,fcolor){
document.write("<b><font size=",fsize," color=",fcolor,">",name,"</font></b>");
}
</script>
<script>
msg("うに","7","ff0000")
msg("うに","3","0000ff")
msg("うに","6","000000")
</script>
配列の書き方ルール
配列とは変数の拡張版みたいな役割を果たす入れ物です。
書き方としてa[1]=1;のように扱います。
また、変数の拡張版なのでvarで使用する事を宣言する必要があります。
さらにnewを使って配列を呼び出す関数にも命令を出します。
よって、丁寧な方法として以下のように書くと良いとされています。
まあ、私は手を抜いてラクな書き方をする事もありますが、（＾＾；）
<script>
function uni(n){
this.length=n;
}
var col=new.uni(5);
</script>
これでcolという名前の配列が作成されました。
配列はcol[1]からcol[5]まであり、それぞれに変数として値を代入できます。
小ウィンドウを開くプログラム
さて、これから解説していきます。
青文字はコメント、他はすべてプログラムです。
<html>
<head>
<script> scriptタグからJavaScriptのスタートを宣言。
window.name="main" 親ウィンドウの名前をmainに決める。
function unit(){ 関数unitを作る。unitは名詞なので書き換え可。
window.open("menu.html","menu","width=120,height=300");
新しいウィンドウにmenu.htmlを開き、ウィンドウの名前をmenuにする。
} 関数unitを終了。
</script> scriptタグでJavaScriptの終了を宣言。
</head>
<body onload="unit();"> ロードされるとunit関数を実行する。
</html>
どうでしたでしょうか。
意外と簡単だったでしょ？
あとはmenu.htmlを作ってmainウィンドウと連動させるだけです。
まあ、要するにフレームの延長線にあるようなスクリプトですよね。
デジタル時計
さあ、調子こいてやってみましょう。
青文字はコメント、他はすべてプログラムです。
<html>
<head>
<script> scriptタグからJavaScriptのスタートを宣言。
function today(){ 関数todayを作る。todayは名詞なので書き換え可。
setTimeout("today()",1000);
さて、さっきよりは難しいかもしれませんね。
1000ミリ秒毎に関数todayを実行させるよ！という『ひな型』
document.forms[0].elements[0].value=new Date();
フォームに配列Dateを当て込む。
} 関数todayを終了。
</script> scriptタグでJavaScriptの終了を宣言。
</head>
<form method="post"> フォームの作成。
現在の時刻：<input size=21 name="today">
</form>
<script> scriptタグからJavaScriptのスタートを宣言。
today(); 関数todayを実際に実行。
</script> scriptタグでJavaScriptの終了を宣言。
</html>
特に注意点は２つ目のscriptタグ以降です。
なぜなら、さきほどはonload処理で関数を実行させましたが、
今度は違いますよね。
これはonloadではページをロードしたときのみ実行させる命令なので
１秒おきにデータを読む込むにはこうしなくてはいけないのです。
******************************************************************************
とりあえず自分でもやって見ようよ！！！
まずは・・・・・
通常あなたはHTML文章をなにで作っていますか？
Wordや一太郎ですか？それとも専用のエディタですか？
JavaScriptを作成するにはメモ帳があれば十分です。
（Windowsに標準でくっついているメモ帳です。）
Wordや一太郎または専用のエディタで作成したHTML文章をメモ帳で開いてちょこちょこ
っとScriptを書けばいいだけなのです。
簡単でしょう。
え そのScriptがわからない。
それでは実際に例題をやりながらJavaScript付きのHTMLを作成しましょう。
メモ帳を立ち上げてください。
そこに
<HTML>
<SCRIPT LANGUAGE="JavaScript">
document.write("JavaScriptのテスト");
</SCRIPT>
</HTML>
それを適当な名前(たとえばjstest.html)で保存しましょう。
保存したファイルをブラウザで見てみてください。
なにが表示されましたか？
そう先ほど入力した
JavaScriptのテスト
が表示されるはずです。
これが一番簡単なJavaScriptです。
え こんなのJavaScript使わなくてもいいじゃんと思った方まあまあそうあわてないで
これからJavaScriptらしくなりますから
メモ帳を立ち上げてください。
そこに
<HTML>
<SCRIPT LANGUAGE="JavaScript">
wk_date = new Date()
document.write("いまの日付・時刻は");
document.write(wk_date);
document.write("です");
</SCRIPT>
</HTML>
それを適当な名前(たとえばjstest1.html)で保存しましょう。
保存したファイルをブラウザで見てみてください。
なにが表示されましたか？
現在の日付・時刻が表示されるはずです。
（たとえば いまの日付・時刻はThu Aug 07 16:00:48 JST 1997です）
これは通常のHTMLでは表示できませんね
wk_date = new Date()
これは現在の日付を取得してwk_dateにＳＥＴするということです。
Date()というのが現在の日付を取得するJavaScriptの関数です。
これは()の中を表示する関数です。
("いまの時刻は")のように""で囲めばそのまま表示します。
(wk_date)だとその変数の中身を表示します。
そこで一般的な日付・時刻に編集して表示してみましょう
メモ帳を立ち上げてください。
そこに
<HTML>
<SCRIPT LANGUAGE="JavaScript">
wk_date = new Date();
yy = wk_date.getYear();
mm = wk_date.getMonth() + 1;
dd = wk_date.getDate();
h = wk_date.getHours();
m = wk_date.getMinutes();
document.write("いまの日付・時刻は");
document.write(yy + "/" + mm + "/" + dd);
document.write(" ");
document.write(h + ":" + m);
document.write("です");
</SCRIPT>
</HTML>
それを適当な名前(たとえばjstest.html)で保存しましょう。
保存したファイルをブラウザで見てみてください。
なにが表示されましたか？
現在の日付・時刻が表示されるはずです。
（たとえば いまの日付・時刻は97/8/7 16:20です）
先ほどより見やすくなったでしょう。
yy = wk_date.getYear();
これはwk_dateから年を取得してyyにＳＥＴするということです。
同様に
mm = wk_date.getMonth() + 1;
dd = wk_date.getDate();
h = wk_date.getHours();
m = wk_date.getMinutes();
注：月だけ（getMonth()）は０から１１がかえります。そのため＋１して表示しています。
document.write(yy + "/" + mm + "/" + dd);
これは()の中を表示する関数です。
("いまの時刻は")のように""で囲めばそのまま表示します。
(wk_date)だとその変数の中身を表示します。
+を使うと文字をくっつけて表示します
では以下のように表示するJavaScriptを作成してみてください。
わからない方は前のScriptを見直してください。
回答はこのフレームをソース表示してください。
時間によって違うメッセージを表示しましょう。
ホームページでよく見かけるものです。
ここでは5時から11時に「おはようございます」
12時から15時に「こんにちは」
16時から22時に「こんばんは」
23時から4時に「おやすみなさい」
を表示するScriptを作ってみましょう。
<HTML>
<SCRIPT LANGUAGE="JavaScript">
wk_date = new Date();
h = wk_date.getHours();
if ((h >= 5) && (h <= 11)) {
document.write("おはようございます");
}
if ((h >= 12) && (h <= 15)) {
document.write("こんにちは");
}
if ((h >= 16) && (h <= 22)) {
document.write("こんばんは");
}
if (h >= 23) {
document.write("おやすみなさい");
}
if (h <= 4) {
document.write("おやすみなさい");
}
</SCRIPT>
</HTML>
if ((h >= 5) && (h <= 11)) {
document.write("おはようございます");
}
このIF文はhが5以上かつ11以下という意味です。
（つまり5時から11時のとき）
条件を満たしたときは { } の中を実行します。
||：または(or)という意味です。
メッセージもいろいろ変更してみてください。
１から１００までの数字を表示しましょう。
<HTML>
<SCRIPT LANGUAGE="JavaScript">
for (i=0; i<=100; i++) {
document.write(i);
document.write(" ");
}
</SCRIPT>
</HTML>
for (i=0; i<=100; i++) {
このFOR文はiが0から100まで繰り返すという意味です。
条件を満たしているときは { } の中を実行します。