JavaScript を使用して、色々な情報を得ることができます。
● ファイルの最終更新日(lastModified)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
lmd=new Date(document.lastModified);
var yy=lmd.getFullYear();
var mm=lmd.getMonth()+1;
var dd=lmd.getDate();
document.write(lmd+"<br>");
document.write("最終更新日:"+yy+"年"+mm+"月"+dd+"日<br>");
</script>
</body>
</html>
ここをクリックしてください。lastModified は、ファイルの最終更新日を参照します。返される値を、変数 lmd に代入し、そのままと、日本語表記の日付表示にしたものを表示しています。ページ更新の都度、更新日を入力するのは面倒ですが、上の JavaScript
の部分だけを、例えば lmd.js というファイルに記述しておき、各ファイルの更新日を入れたい場所に <script" src="lmd.js"></script> と書いておけば、自動的に更新され、便利です。
● ウインドウサイズ・表示色(screen)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
document.write("画面のサイズ:幅"+screen.width+" x 高さ"+screen.height+"<br>");
document.write("有効領域のサイズ:幅"+screen.availWidth+" x 高さ"+screen.availHeight+"<br>");
document.write("表示色:"+screen.colorDepth+"ビット<br>");
</script>
</body>
</html>
ここをクリックしてください。
screen.width |
画面の幅を参照 |
screen.height |
画面の高さを参照 |
screen.availWidth |
有効領域の幅を参照 |
screen.availHeight |
有効領域の高さを参照 |
screen.colorDepth |
表示色(1:白黒、4:16色、8:256色、16:16ビット色、24:24ビット色、32:32ビット色) |
有効領域は、画面の領域からタスクバーなどの部分を除いた領域です。画像を使用する場合に、16ビット色以上でないと警告したり、画面のサイズによって開くウインドウのサイズを変えたり、ということに使用できます。
次の例では、有効領域のサイズから計算してウインドウを12開き、タイマーで1秒後に閉じています。ウインドウの背景色は乱数により変えています。 ここをクリックしてください。この例は、NN4.7ではうまく動作しませんでした。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
nWin=new Array(12);
function openW()
{
var wh=Math.floor(screen.availHeight / 3);
var ww=Math.floor(screen.availWidth / 4);
var i,j,str,cr,cg;
str="width="+(ww-10)+",height="+(wh-40);
for(i=0;i<3;i++)
{
for(j=1;j<=4;j++)
{
nWin[j+(i*4)]=window.open("","",str)
nWin[j+(i*4)].moveTo(ww*(j-1),wh*(i));
cr=(Math.floor(Math.random()*120)+120).toString(16);
cg="#ff"+cr+cr;
nWin[j+(i*4)].document.bgColor=cg;
}
}
setTimeout("closeW()",1000);
}
function closeW()
{
var i;
for(i=1;i<=12;i++)
nWin[i].close();
}
</script>
</head>
<body>
<form>
<input type="button" value="ここをクリック" onclick="openW()">
</form>
</body>
</html>
● ブラウザの情報(navigator)
navigator.appName |
ブラウザの名前 |
NN4.7,NN6,IE6 |
navigator.appVersion |
ブラウザのバージョン |
NN4.7,NN6,IE6 |
navigator.appMinorVersion |
ブラウザのマイナーバージョン |
IE6 |
navigator.appCodeName |
ブラウザのコード名 |
NN4.7,NN6,IE6 |
navigator.language |
ブラウザの言語 |
NN4.7,NN6 |
navigator.browserLanguage |
ブラウザの言語 |
IE6 |
navigator.systemLanguage |
システムの言語 |
IE6 |
navigator.userLanguage |
ユーザ環境の言語 |
IE6 |
navigator.platform |
ブラウザのプラットフォーム |
NN4.7,NN6,IE6 |
navigator.cpuClass |
マシンのCPU情報 |
IE6 |
navigator.userAgent |
ブラウザの名前とバージョンを表す文字列 |
NN4.7,NN6,IE6 |
navigator.cookieEnabled |
cookieが利用可能かどうか |
NN6,IE6 |
navigator.onLine |
オンライン状態かどうか |
IE6 |
navigator.javaEnabled() |
Java が利用可能かどうか |
NN4.7,NN6,IE6 |
navigator オブジェクトには、多くのプロパティがあります、これは、ブラウザにより対応が異なりますので、Netscape Navigator と Internet
Explorer の対応を右の列に示しました。
ここをクリックしてください。ブラウザが対応していないプロパティでは、undefined と表示されます。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
document.write("<hr>"+"ブラウザの名前:"+ navigator.appName+"<br>");
document.write("ブラウザのバージョン:"+navigator.appVersion+"<br>");
document.write("ブラウザのマイナーバージョン:"+navigator.appMinorVersion+"<br>");
document.write("ブラウザのコード名:"+navigator.appCodeName+"<br>");
document.write("ブラウザの言語:"+navigator.language+"<br>");
document.write("ブラウザの言語:"+navigator.browserLanguage+"<br>");
document.write("システムの言語:"+navigator.systemLanguage+"<br>");
document.write("ユーザ環境の言語:"+navigator.userLanguage+"<br>");
document.write("ブラウザのプラットフォーム:"+navigator.platform+"<br>");
document.write("マシンのCPU情報:"+navigator.cpuClass+"<br>");
document.write("ブラウザの名前とバージョンを表す文字列:"+navigator.userAgent+"<br>");
document.write("cookieが利用可能かどうか:"+navigator.cookieEnabled+"<br>");
document.write("オンライン状態かどうか:"+navigator.onLine+"<br>");
document.write("Java が利用可能かどうか:"+navigator.javaEnabled()+"<hr>");
</script>
</head>
<body></body>
</html>
JavaScriptでは、ブラウザによって対応する命令が異なりますので、これを判別して、命令を変えたりすることも必要な場合があります。次の例では、「ブラウザのバージョン」の先頭が4以上のときに、「ブラウザの名前」から判別して、「ブラウザの言語」を表示しています。ここをクリックしてください。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
if(navigator.appVersion.charAt(0)>=4)
{
if(navigator.appName.indexOf("Netscape")>=0)
document.write("ブラウザの言語:"+navigator.language+"<br>");
else
document.write("ブラウザの言語:"+navigator.browserLanguage+"<br>");
}
else
document.write("このブラウザでは「ブラウザの言語」を表示できません<br>");
</script>
</head>
<body></body>
</html>
● オブジェクトの全ての情報(for( in ))
for(変数 in オブジェクト){処理}
指定したオブジェクトの全てのプロパティに、順番に処理します。ここをクリックしてください。navigator, window, documeny, location, history の全プロパティを表示しています。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
document.write("<hr>navigator オブジェクト<br>".fontcolor("magenta").big());
for(i in navigator)
document.write(i+" : "+navigator[i]+"<br>");
document.write("<hr>window オブジェクト<br>".fontcolor("magenta").big());
for(i in window)
document.write(i+" : "+window[i]+"<br>");
document.write("<hr>document オブジェクト<br>".fontcolor("magenta").big());
for(i in document)
document.write(i+" : "+document[i]+"<br>");
document.write("<hr>location オブジェクト<br>".fontcolor("magenta").big());
for(i in location)
document.write(i+" : "+location[i]+"<br>");
document.write("<hr>history オブジェクト<br>".fontcolor("magenta").big());
for(i in history)
document.write(i+" : "+history[i]+"<br><hr>");
</script>
</head>
<body></body>
</html>
● ドキュメントのイベント・キーコード
キーボードを押すと、onkeydown(押された)、onkeypress(押している)、onkeyup(離された)の順にイベントが発生します。マウスボタンも同じ様に、onmousedown(押された)、onmouseup(離された)、onclick(クリックされた)の順にイベントが発生します。ここをクリックしてください。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
var str="";
function kdn(k)
{
var datA;
if(navigator.appName.indexOf("Netscape")>=0)
datA=k.which;
else
datA=event.keyCode;
str= "キーコード:"+datA+" ["+String.fromCharCode(datA)+"] が押された\n" +str;
disp();
}
function kps()
{
str= "キーが押されている\n" +str;
disp();
}
function kup()
{
str= "キーが離された\n" +str;
disp();
}
function mdn()
{
str= "マウスボタンが押された\n" +str;
disp();
}
function mup()
{
str= "マウスボタンが離された\n" +str;
disp();
}
function mck()
{
str= "マウスがクリックされた\n" +str;
disp();
}
function disp()
{
document.form.txt01.value=str;
}
document.onkeydown=kdn;
document.onkeypress=kps;
document.onkeyup=kup;
document.onmousedown=mdn;
document.onmouseup=mup;
document.onclick=mck;
</script>
<body>
<form name="form">
<textarea name="txt01" rows=20 cols=40></textarea>
</form>
</body>
</html>
onkeydown イベントについては、Netscape Navigator と Internet Explorer を判別して、キーコードを取得し、変換した文字と共にテキストエリアに表示しています。
イベントオブジェクト.which : キーコードを参照(Netscape Navigator)
event.KeyCode : キーコードを参照(Internet Explorer)
String.fromCharCode(文字コード, 文字コード, ...) : 文字コードを文字に変換(カンマ区切りで複数の文字を変換可能)
● JavaScript が有効かどうか?
ブラウザの設定で JavaScript が無効になっていると、JavaScript が使用できません。当然ですが、JavaScript を使用して
JavaScript が無効になっていることを判定することができません。
ここをクリックすると、次の "document053.htm" が開きますが、すぐに "document054.htm"
に移動します。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
<!--
location.replace("document054.htm");
//-->
</script>
<noscript>
javascript が無効になっています。
</noscript>
<body></body>
</html>
"document054.htm" は次の内容。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
document.write("<hr>"+"ブラウザは ["+ navigator.appName+"] です。<br>");
document.write("ブラウザのバージョンは ["+navigator.appVersion+"] です。<br>");
document.write("JavaScript が使用可能です。<hr>");
</script>
</head>
<body></body>
</html>
JavaScript が無効になっていると、JavaScript は使用できませんので、"document054.htm"
に移動せず、「JavaScript が無効になっています」というメッセージが表示されます。<!-- と //--> に囲まれた部分は、HTMLのコメントです。JavaScript が無効のブラウザから、この部分がゴミでなく、コメントと見えるようにしていますが、JavaScript
に対応しているブラウザなら、特にコメントにしなくても問題はないようです。<noscript> と </noscript> の間は、JavaScript が無効になっているブラウザへのメッセージですが、JavaScript を全く使用することができないブラウザでは、表示できないかもしれません。そのような可能性があるときは、<body>以下にもメッセージを書いておいた方が良いかもしれません。JavaScript
が有効なブラウザでも、一瞬表示されてしまいますが(接続速度が速ければ見えないはずです)。
location.replace は、ページの URL を変更します。この行を location="document054.htm" というように書いても、同じように動作しますが、"document053.htm" がブラウザの履歴に残りますので、location.replace
の方が良いでしょう。