JavaScript

パソコン

ネット

現在のところ、最も内容が充実しています。

プログラム

地域

学習指導

哲学

創作

批評

トレード

リンク集

JavaScriptとは

JavaScript は Netscape 社の開発した HTML 内に埋め込めるオブジェクト指向スクリプト言語で 1995 年 6 月、Navigator 2.0b1 から搭載されている。

Microsoft の Internet Explorer もバージョン 3.0 より JavaScript を解釈できるようになった。 IE に搭載された JavaScript 互換インタプリタ言語の名称は JScript、多少動作が異なる部分があるのが難点だが、NN、IE ともに JavaScript を動かすことができる。

動作としては、HTML に埋め込んだスクリプトをブラウザが逐次実行する形を取り、 form に対する操作をトリガとして関数を実行できる、別のページを読みこめる、定期的な処理や、HTML 出力を行うことができるなどの特徴を持つ。

Netscape 3.0 からは画像も多少操作できるが、画像の中身を変えることはできない。

form の記入欄がちゃんと埋まっているか検査するなど、 CGIをクライアント側で支援する目的に使うことが多いようだが、これだけでダイナミック HTML を実現することもできる。

例を見てみよう。

 <script language="JavaScript">
  document.writeln("Hello, world!");
 </script>

language="..." の部分は省略することもできるが、書くのが無難だ。ここでは、JavaScript でこのコードを書いた箇所に HTML の文書を改行記号とともに書き出している。 writeln() の代わりに write() とすると改行は出力されない。

IE6 になって変わった箇所

IE5、NN4 の時うまく動いていた DHTML ページが、IE6、NN6-7 となって動かなくなった。何とか動かそうと思い、やってみると、NN7/Mozilla は、

 var NN6  = (navigator.appVersion.charAt(0) >= "5") && (navigator.appName.charAt(0) == "N");

とし、後は大抵 IE5 と同じにすればよかった。以下の div の移動だけは IE5とズレるが。

 function moveDivTo (div, left, top) {
   div.style.left = left;
   div.style.top = top;

しかし、IE6 はいろいろ変わったようで、

 var IE5  = (navigator.appVersion.indexOf('MSIE 6') >= 0);

としたくらいの対処ではどうにもならない。まず、画面サイズの取得だが、縦の高さは、別ファイルの javascript をインクルードしたものからはなぜか読み取れず、そのページのソース自体に、

 var winWid, winHei;
 winWid = document.body.clientWidth;
 winHei = document.body.clientHeight;

のように書かないとだめである。また、CSS の扱いも変わったようで、

 <style type="text/css">
 .dc{
  position:absolute;
  left:0;
  top:0;
  width:5;
  height:5;
  clip:rect(0,5,5,0);
  background-color:blue;
  layer-background-color:blue;
  visibility:hidden
 }
 </style>

で定義した 5x5 の点をある時点で visible にして使おうとしても表示されなかった。結局、赤や青の画像を用意して動かすしかない……。

背景画像の変更

背景画像をスクロールする。CSS の backgroundPosition を使用。

 <body style="background-image:url(images/js.jpg);background-repeat:no-repeat">
 <script type="text/javascript"><!--
 function bgRoll(x,y) {
   document.body.style.backgroundPosition=x+'px '+y+'px'
 }
 //--></script>
 <a href="#" style="color:red" onclick="bgRoll(10,100)">変更</a>

この例では、リンクをクリックすると、本文全体の背景画像を X 方向に 10、Y 方向に 100 移動する。

JavaScriptとは

IE6 になって変わった箇所

背景画像の変更

参考ページ