TECHNICAL INFORMATION技術情報

第8回
  情報を得る

色々な情報を得る

 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 の方が良いでしょう。