JavaScriptの基本

<HTML>
<HEAD>
<TITLE>Example of Java Script</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function disp()
{
  document.write("<table border=5>") ;
  for (y=1 ; y <= 3 ; y++)
  {
    document.write("<tr>") ;
    xa = (y-1) * 3 + 1 ;
    xb = (y-1) * 3 + 3 ;
    for (x=xa ; x <= xb ; x++)
    {
      document.write("<td><img src=\"bj/",x,".jpg\"></td>")
    }
    document.write("</tr>") ;
  }
  document.write("</table>") ;
}
</SCRIPT>
</HEAD>
<BODY Bgcolor=Black link=Blue alink=Blue vlink=Blue>
<center>
<SCRIPT LANGUAGE="JavaScript">
  disp() 
</SCRIPT>
</center>
</BODY>
</HTML>

A）　繰り返し（値を変化させながら処理を繰り返す）

for (初期値 ; 処理を繰り返す条件 ; １度の処理を行った後の値の変化量)
{
　　実行文
}

　上の例を参照

B）　条件によって処理（表示）内容を変える（if～else if～else）

if(条件１)
{
実行文（条件１が成り立った場合）
}
else if(条件２)
{
実行文（条件１は成り立たないが、別の条件２が成り立つ場合）
}
else
{
実行文（条件１・条件２共に成り立たない場合）
}

★　else if(条件) はいくつあってもよい。また、else ifとelseの
　　部分は、両方共無くても、一方だけあってもかまわない。
　　実行文の中に別のif～else if～elseがあっても良い。

２個の値を比較する（関係演算子）
［値１］と［値２］が	Java Scriptでの記述
等しい	［値１］= =［値２］
等しくない	［値１］!=［値２］
［値１］＜［値２］	［値１］<［値２］
［値１］≦［値２］	［値１］<=［値２］
［値１］＞［値２］	［値１］>［値２］
［値１］≧［値２］	［値１］>=［値２］

条件の組み合わせ・否定（論理演算子）
［条件１］と［条件２］が	Java Scriptでの記述
両方とも成り立つ(and)	［条件］&&［条件２］
いずれか一方でも成り立つ(or)	［条件１］\|\|［条件２］
［条件］が成り立たない(not)	!［条件］

2)　時間による制御　 この例を実行

 
<HTML>
<HEAD>
<TITLE>Message</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var msg1,msg ;
var init=0 ;
msg1=" ..... Welcom to my Home Page " ;
msg =msg1 ;
msg=msg+msg ;
function disp1()
{
  setTimeout("disp1()",500) ;
  var day=new Date() ;
  var hh=day.getHours() ;
  var mm=day.getMinutes() ;
  var ss=day.getSeconds() ;
  if (((mm==0) && (ss==0))||(init==0))
  {
    init = 1 ;
    if (hh<11)
    {
      msg="..... Good morning "+msg1
    }
    else if (hh<17)
    {
      msg="..... Good afternoon "+msg1
    }
    else if (hh<20)
    {
      msg="..... Good evening "+msg1
    }
    else
    {
      msg="..... Good night "+msg1
    }
    msg=msg+msg
  }
  msg=msg.substring(2,msg.length)+msg.substring(0,2) ;
  document.MyForm.box.value=msg ;
}
</SCRIPT>
</HEAD>
<body bgcolor="#aaccff" text="#000000">
<center>
<form name="MyForm" method="post">
<input size=40 name="box" type="text">
</form>
<SCRIPT LANGUAGE="JavaScript">
disp1();
</SCRIPT>
</center>
</BODY>
</HTML>

　ここで使用した時間に関するイベントについて簡単に説明すると、

setTimeout("disp()",500)
1/1000秒単位で指定した時間（ここでは500[msec]）経過した後に
関数disp()を実行する
var day=new Date() ;
現在の時刻（年・月・日・時・分・秒）を取得してdayに代入する
var hh=day.getHours() ;
dayに取得した現在時刻の内、時をhhに代入する
var mm=day.getMinutes() ;
dayに取得した現在時刻の内、分をdmmに代入する
var ss=day.getSeconds() ;
dayに取得した現在時刻の内、秒をssに代入する

　ここでは使用していませんが、年・月・日については以下のように記述します

var nen=day.getYear() ;
dayに取得した現在時刻の内、年をnenに代入する
var tsuki=day.getMonth() + 1 ;
dayに取得した現在時刻の内、月をtsukiに代入する
注意）月は０から始まるので＋１しています
var hi=day.getDate() ;
dayに取得した現在時刻の内、日をhiに代入する

　ここで使用した以外の時間に関する記述としては、

var old=new date(year,month,day,hours,minutes,second) ;
oldに指定時刻（年・月・日・時・分・秒）を設定する
この内、時・分・秒は省略できます
gettime()
1970年1月1日午前00時00分00秒からの経過時間をミリ秒で取得する
［例］
var now=new date() ;
var old=new date(98,12,31,12,30,45) ;
- keika1=now.gettime()
  1970年1月1日午前00時00分00秒から現在までの経過時間
- keika2=old.gettime()
  1970年1月1日午前00時00分00秒から1998年12月31日午後00時30分45秒までの経過時間

：
：
：

等があります

時間に関するイベントの他の［例（日付と時刻を表示）］

<HTML>
<HEAD>
<TITLE>Disp time</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function disptime()
{
  setTimeout("disptime()",1000);
  var day=new Date() ;
  var hh=day.getHours() ;
  var mm=day.getMinutes() ;
  var ss=day.getSeconds() ;
  if (hh<10) {hh=" "+hh}
  if (mm<10) {mm=" "+mm}
  if (ss<10) {ss=" "+ss}
  document.forms[0].elements[1].value=hh+":"+mm+":"+ss ;
}
function dispdate()
{
  var day=new Date() ;
  var yy=day.getYear() ;
  var mm=day.getMonth() + 1 ;
  var dd=day.getDate() ;
  if (yy<10) {yy=" "+yy}
  if (mm<10) {mm=" "+mm}
  if (dd<10) {dd=" "+dd}
  document.forms[0].elements[0].value=yy+"-"+mm+"-"+dd ;
}
</SCRIPT>
</HEAD>
<body bgcolor="#aaccff" text="#000000">
<center>
<form method="post">
<input size=12 name="dispdate">  
<input size=12 name="disptime">
</form>
<SCRIPT>
dispdate();
disptime();
</SCRIPT>
</center>
</BODY>
</HTML>

3)　配列

<HTML> <HEAD> <TITLE>Dimension</TITLE> <SCRIPT LANGUAGE="JavaScript">
function MakeArray(n) { this.length=n ; }	配列メモリを確保する関数（コピーすればよい）
</SCRIPT> </HEAD> <body bgcolor="#aaccff" text="#000000"> <SCRIPT LANGUAGE="JavaScript">
var bgc=new MakeArray(4) ;	配列の宣言 var 配列名=new MakeArray(要素数) ;
bgc[0] = "rena.jpg" ; bgc[1] = "sn01.jpg" ; bgc[2] = "sn02.jpg" ; bgc[3] = "sn03.jpg" ;	配列への値の代入
</SCRIPT> </BODY> </HTML>

フレームを使用した場合

LIST
(0)

HEAD
(1)

BODY
(2)

［図１］

　ＨＴＭＬのタグで、画面をフレームに分割する場合、各フレームに名称を付けて管理していましたが、
Java Scriptでは、各フレームをフレーム番号でも管理できます。
例えば、

でフレームを構成した場合には、各フレームには”ｌｉｓｔ”，”ｈｅａｄ”，”ｂｏｄｙ”という
名称が付けられますが、同時にこれらのフレームには０～２のフレーム番号が付きます。

　Java Scriptを用いて、フレームを指定して表示内容を記述する場合、

ｐａｒｅｎｔ．ｈｅａｄ．ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（”名称で指定”）　；

のように、フレームの名称を指定するか、

ｐａｒｅｎｔ．ｆｒａｍｅｓ［２］．ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（”番号で指定”）　；

のように、フレーム番号を指定します。

　ここで、parentはそのフレームにとっての親のウィンドウ（またはフレーム）を示しており、
ブラウザ全体（Window）を含め、［図２］のような関係になっています。

ブラウザ全体（Window）

ｐａｒｅｎｔ

LIST
(0)

HEAD
(1)

BODY
(2)

［図２］

名称で指定

番号で指定

［図３］

　［図１］のLIST(list.htm)で、以下のように記述した場合、［図３］になります。

<HTML>
<HEAD>
<TITLE>仙台電波高専</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function printnname() 
{
  parent.head.document.clear() ;
  parent.head.document.open() ;
  parent.head.document.write("<body BgColor=cyan>") ;
  parent.head.document.write("<center><br><br>") ;
  parent.head.document.write("名称で指定") ;
  parent.head.document.write("</center>") ;
  parent.head.document.close() ;
}
function printnumber() 
{
  parent.frames[2].document.clear() ;
  parent.frames[2].document.open() ;
  parent.frames[2].document.write("<body BgColor=magenta>") ;
  parent.frames[2].document.write("<center><br><br>") ;
  parent.frames[2].document.write("番号で指定") ;
  parent.frames[2].document.write("</center>") ;
  parent.frames[2].document.close() ;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR=yellow>
<SCRIPT LANGUAGE="JavaScript">
printnumber() 
printnname() 
</SCRIPT>
</body>
</html>

　この例を表示するには、新しく開いたウィンドウで、実行をクリックして下さい

1) 制御構造（条件・繰り返し）

A） 繰り返し（値を変化させながら処理を繰り返す）

B） 条件によって処理（表示）内容を変える（if～else if～else）

2) 時間による制御 この例を実行

3) 配列

LIST(0)

HEAD(1)

BODY(2)

LIST(0)

HEAD(1)

BODY(2)

1)　制御構造（条件・繰り返し）

A）　繰り返し（値を変化させながら処理を繰り返す）

B）　条件によって処理（表示）内容を変える（if～else if～else）

2)　時間による制御　この例を実行

3)　配列

LIST
(0)

HEAD
(1)

BODY
(2)

LIST
(0)

HEAD
(1)

BODY
(2)