【ＭＥＮＵ】
【htmlからjavascriptを介してphpを起動し、その結果(テキスト・画像)をhtmlに書き込む】
◆概要
※例えばphpのアクセスカウンターをindex.htmlに組み込みたい。index.htmlにphpスクリプトを記述してファイル名をindex.phpに変えるのが一番簡単なのだが、できればファイル名を変えたくない(SEO対策等)。
※phpをcgiとして起動することも試したが、javascriptを介して直接phpを起動し、その結果をhtmlに書き込むことができる方法があった。
◆javascript tips
//アクセスカウンター(acclog.php)の例
[XHTML]--テキスト出力も画像出力も同じ
Access counter:
<script type="text/javascript" src="
http://www.〜/acclog.php">
</script>
【肝】phpをjavascriptから起動する!!
[PHP](acclog.php)---テキスト出力
//$Count:アクセス数(MySQL等とのアクセスも可能)
<?php
...($Countを取得)
//結果をテキスト出力
header("Content-type: application/x-javascript");
print "document.write('['+'".$Count."+']')";
?>
[PHP](acclog.php)---gif画像出力(6桁ゼロ付で出力)
//$Count:アクセス数
//GifPath:gif画像を保存しているフォルダ(http://から)
//画像は、0.gif、1.gif、2.gif、3.gif....
<?php
...($Countを取得)
$imgStr=""; //html出力
$Count3=substr(($Count+1000000),1,6); //6桁の文字に変換
for($s=0;$s<=5;$s++){
$ss=$GifPath."/".substr($Count3,$s,1).".gif";
$imgStr.="<img src='".$ss."' border='0' hspace='0' />";
}
header("Content-type: application/x-javascript");
print 'document.write("'.$imgStr.'");'; //(注)
?>
(注)シングルコーテーションとダブルコーテーションの位置に注意
◆メモ
※この場合、単純に「print $Count;」と記述してもhtmlファイル上に結果が反映されない。print文に先立ってjavascriptとしてのheaderを送りその後、javascriptを書き出す。
※print文の中味が、javascriptになっていることに注意。(例示ではあえて[ ]と+で結合している。)
※任意の桁数に変換するには、本サイトで「PHP 数値を任意の桁のゼロ付文字に変換する」を参照されたい。
◆メモ2
※imgタグを使う方法が雑誌等で紹介されている。
<img src="http;//〜〜/acclog.php" width="0" height="0" />
のような方法だ。しかしhtmlから起動したとき、headerの返し方がよく判らないので、現在は、上記のようにjavascriptを介在させている次第。どなたか、判っている方がいれば教えて頂ければ幸いです。
(DataID：000041)
【javascriptのスクリプトからvbsスクリプトを起動する】
◆javascriptのスクリプト(function)からvbsスクリプトを起動する。
◆javascript Tips
[XHTML](<head>に)
//sample.vbsを起動しておく
<script type="text/vbscript" src="sample.vbs"></script>
[javascript]
function fnStart(){
execScript("vbSample()","vbscript"); //vbscriptを実行
}
[vbscript]---sample.vbsに記述
function vbSample(){
msgbox " vbscriptを実行しています。"
}
◆メモ
※javascriptではできないクライアントサイドのファイルやディレクトリ関連操作にvbscriptは結構威力を発揮する。クライアント側でphpをインストールしているひとはほとんどいないのでvbscriptを使うのはうまい選択かも---セキュリティの問題がなければ---。
※但しサーバー側のPHPファイルに組み込むと、動かないことはないが、ほとんど機能しないので注意。
(DataID：000037)
【<a href="mailto:〜〜"でメーラーを開いたときSbjectと本文にあらかじめ文章を表示】
◆ホームページ上に<a href="mailto:メールアドレス">メール送信</a>というリンク文字を記述すると、パソコンのデフォルト設定のメーラーが開くことはよく知られているが、このとき、メーラーのSubject(表題)と本文にあらかじめ文章を表示しておく方法。
◆javascript Tips
[XHTML]
<a href="mailto:xxx@xxxx.com">xxx@xxxx.com</a>
[javascript]---メールアドレスを表示する位置に記述する
<script type="text/javascript">
<!--
strMail="subject=宛先%20dblpar.com"; //表題
strMail+="&body=◆お名前：%0D%0A◆所属：..."; //本文
document.write("<a href=mailto:xxx@xxxx.com?" + strSubj+ "'>mailto:xxx@xxxx.com</a>");
//-->
</script>
◆メモ
※subject(表題)とbody(本文)を&でつなぐ。
※改行=%0D%0A 半角スペース=%20 ?=%3F 等を使用してレイアウトする
◆注意
※mailtoによるメール送信方法は簡便ではあるが、メールアドレスを自動的に読み取られてスパムメールの大きな原因となるので、もし使用するときは、必ずメールアドレスを暗号化する方法を採用すること。
サイト:「メールアドレスを暗号化してホームページに記述する」
http://www.webstudio.jp/webstudio/contents/js_mailto/js_mailto.html
(DataID：000020)
【window.close()をsafari/firefoxで有効にする】
◆概要
※safari(mac及びwindows版とも)では window.close(); は、window.openでオープンしたウィンドウのみ有効。それ以外では機能しない(IEでは問題なくとじる)。
※<a href=""...>等で開いたウィンドウをIE及びsafariの両方でクローズする方法(firefoxでも有効らしい)。
◆Tips
[XHTML](ボタンの場合)
<input type="button" onclick="fnWinClose()" />
[javascript]
function fnWinClose(){
window.opener = window;
var win = window.open(location.href,"_self");
win.close();
}
◆メモ
※IE7.0では「ウィンドウを閉じますか」という確認ダイアログが出ることがあるが、このスクリプトでは確認ダイアログはでなくなる。
(DataID：000090)
【ウィンドウサイズを最大・標準に切り替える】
◆ディスプレィサイズを取得して、ウィンドウサイズを最大化(ディスプレィサイズ)と標準サイズに交互に切り替えます。
◆javascript Tips
//f=1:最大化する、f=0:元に戻す
var flg=1;
function fnWinResize() {
var ScrnW=window.screen.availWidth; //ティスプレィ幅
var ScrnH=window.screen.availHeight; //ティスプレィ高さ
var w=800; //ウィンドウの標準幅設定
var h=500; //ウィンドウの標準高さ設定
if(flg==1){
window.moveTo(0,0); //ウィンドウの位置を左上端に
window.resizeTo(ScrnW, ScrnH); //ウィンドウリサイズ
flg=0;
}else{
var winTop=(ScrnH-h)/2;
var winLft=(ScrnW-w)/2;
window.resizeTo(w,h);
window.moveTo(winLft,winTop);
flg=1;
}
}
(DataID：000017)
【エラー処理】
◆Tips
[javascript]
window.onerror=ErrTrap;
function ErrTrap(errMsg,errFile,errNo) {
alert("Err No." + errNo + "/" + errMsg + "/" + errFile);
window.onerror=null; //エラーが発生しても無視する
return false;
}
◆応用:上記のalert()の代わりに、次のようにエラー情報を所定の位置に書き込んでもいい。
[HTML]
<div id="divFild"></div>
[javascript]
window.onerror=ErrTrap;
function ErrTrap(errMsg,errFile,errNo) {
strErr="Err No."+errNo+"/"+errMsg+"/"+errFile;
document.getElementById("divFild").innerText=strErr;
window.onerror=null; //エラーが発生しても無視する
return false;
}
(DataID：000003)
【クッキーへの書き込みができない場合は警告する】
◆Tips
[javascript]
strR=navigator.cookieEnabled;
クッキーに書き込みできればtrue、できないときはfalseを返す
※警告例
if(!navigator.cookieEnabled){
alert("クッキーへの書き込みができません。");
}
(DataID：000078)
【クリップボードに変数をメモリする】
◆概要
※クリップボードに変数をメモリ(格納)する
※IE(インターネットエクスプローラ)4.0の独自機能
◆Tips
[javascript]
//strText:クリプボードに格納したいテキストデータ
window.clipboardData.setData("text",strText);
◆閑話休題
function fnClipboardClear(){
window.clipboardData.setData("Text", " ");
}
setInterval("fnClipboardClear()", 200);
を実行したページでは、クリップボードにコピーできなくなる。まあIEだけではあるが。こんなことまでしてコピーされたくないないなら、公開しなきゃいいのに...。抜け道はいくらでもあるものね。javascriptが実行できないようにしてアクセスすれば、このスクリプトは無効だし。
(DataID：000084)
【サブウィンドウをサイズ・表示位置・スタイルを指定してオープンする】
◆概要
※windows.open()により、サイズ・表示位置・スタイルを指定してサブウィンドウをオープンする
◆Tips
[javascript]
var strPath="
http://www.〜〜"; //オープンするファイルのパス(URL)
var strWinName="subwin"; //ウィンドウの名前
var strWinCond="〜〜〜"; //ウィンドウのサイズ・表示位置・スタイル等
window.open(strPath,strWinName,strWinCond); //オープン
※strWinCondの例(→は表示上は改行しているが実際は続けて記述)
strWinCond="→
width=250,height=80,top=300,left=300,scrollbars=1,→
resizable=1,toolbar=0,menubar=1,location=0,→
directories=0,status=0";
※ウィンドウのサイズ・表示位置・スタイル設定の例
width=250 :ウィンドウの横幅(px)
height=80 :ウィンドウの高さ(px)
top=300 :ディスプレィ上端からのウィンドウ上端まで(px)
left=300 :ディスプレィ左端からウィンドウ左端まで(px)
scrollbars=1 :スクロールバー表示([1]:表示する)
resizable=1 :ウィンドウの大きさの変更([1]:変更可能)
toolbar=0 :ツールバー表示([0]:表示しない)
menubar=1 :メニュー表示([1]:表示する)
location=0 :ロケーションバー表示([0]:表示しない)
directories=0:ディレクトリーバー表示([0]:表示しない)
status=0 :ステータスバー表示([0]:表示しない)
◆メモ
※window.openの第2引数("subwin")を変数化することにより、同じスクリプトで重複してサブウィンドウをオープンできる。(第2引数をオープンするウィンドウ毎に変える)
(DataID：000073)
【サブウィンドウをディスプレィ中央にオープンする】
◆ディスプレィの中央にwindow.openでファイルをオープンするjavascript tips。メニューバーの有無・ウィンドウサイズの設定等が可能なので、同じスクリプトを汎用的に使用可能。
◆javascript Tips
strFilePath:オープンするファイルのパス
f:メニューバー(f=0:なし、f=1:あり)
w:ウィンドウ幅(px)
h:ウィンドウ高さ(px)
function fnSubwinOpen(strFilePath,f,w,h){
var valWidth=eval(w);
var valHeight=eval(h);
var ScrnW=window.screen.availWidth; //ディスプレィの幅
var ScrnH=window.screen.availHeight; //ディスプレィの高さ
var valTop=(ScrnH-valHeight)/2; //ディスプレィ上端からの距離
var valLft=(ScrnW-valWidth)/2; //ディスプレィ左端からの距離
if(f==0){
window.open(strFilePath,"subwin","width=" + valWidth + ",height=" + valHeight + ",top=" + valTop + ",left=" + valLft + ",resizable=1,scrollbars=1,menubar=0,status=0");
}else{
window.open(strFilePath,"subwin","width=" + valWidth + ",height=" + valHeight + ",top=" + valTop + ",left=" + valLft + ",resizable=1,scrollbars=1,menubar=1,status=1");
}
}
◆window.openの第2引数("subwin")を変数化することにより、同じスクリプトで重複してサブウィンドウをオープンできる。(第2引数をオープンするウィンドウ毎に変える)
(DataID：000014)
【スクロールバーの色を変える】
◆概要
※スクロールバーの色を変える(CSS及びjavascript)
※IE(インターネットエクスプローラ)独自機能(5.5以降?)
◆Tips
[Stylesheet]---bodyに記述した例
body{
scrollbar-base-color:#ecffff; /*ベースカラー*/
scrollbar-track-color:#ffffff; /*スクロールのない部分 */
scrollbar-face-color:#f0fff0; /*表面*/
scrollbar-darkshadow-color:#8080ff; /*外枠の右と右下の色*/
scrollbar-3dLight-color:#ffffff; /*外枠の左と左上の色*/
scrollbar-shadow-color:#ffffff; /*内側の枠の右と右下の色*/
scrollbar-arrow-color:#ffffff; /*矢印の色*/
}
◆メモ
※テキストエリアの他、overflow 設定したdivタグ等、スクロールバーを使用するタグに設定することができる。
◆サンプル
「スクロールバーの色を変える(javascriptによるカラーリングテスト)」
http://www.dblpar.com/myscript/sample/javascript/scrollbar/scrollbar.html
(DataID：000083)
【テキストエリアやウィンドウのスクロールバーを表示(消去)する】
◆概要
※CSSを用いて、テキストエリア(textarea)やウィンドウ(body)のスクロールバーを表示する。隠す(消去する)。
※スクロールバー付のボックス(div)を作る。
◆CSS
[stylesheet]
overflow:hidden; //ボックスからはみ出した文字を表示しない
overflow:scroll; //スクロールバーを付けて表示
overflow:visible; //ボックスからはみ出したまま表示
overflow:auto; //ブラウザ設定に従う
◆テキストエリア
[HTML]
※スクロールバーを隠す
<ｔｅｘｔａｒｅａ style="overflow:hidden;"></ｔｅｘｔａｒｅａ>
(注)↑の行ではtextareaを全角文字で記述しています。---MySQLからデータを読み出し文字をデコードした段階での入力トラブル回避。
◆ウィンドウ
[stylesheet]
※スクロールバーを隠す
body{
overflow:hidden;
}
◆スクロールバー付きボックス
[HTML]
※スクロールバーを表示
<div style="height:100px;overflow:scroll"></div>
(注)height(高さ)を指定しないとoverflowは有効にならない。
◆javascriptによる制御の例
function fnScroll(){
document.body.style.overflow="hidden";
}
◆メモ
※テスキトエリアの表示・非表示で
overflowX:hidden //横方向のスクロールバーを隠す
overflowY:hidden //縦方向のスクロールバーを隠す
というのがあったが、IE7.0で試したところうまく動かない。IE6の仕様だったかも知れない。
(DataID：000055)
【セレクトフィールド(複数選択可能)の選択した要素数をカウントする】
◆複数選択可能なセレクトフィールド(コンボボックス)の選択した要素数をjavascriptでカウントします。
◆Tips
[XHTML]
//複数選択可能に設定(選択する毎にfnSelect()を実行)
<select id="cmbSel" multiple="multiple" onchange="fnSelect()">
<option value="1">a001</option>
<option value="2">a003</option>
<option value="3">a003</option>
...
...
</select>
//選択数表示テキストフィールド
<input type="text" id="txtCount" />
[javascript]
function fnSelect(){
var field=document.getElementById("cmbSel");
var valSelCnt = 0; //様相選択数
// 選択されている個数を取得
for(i=0;i<field.options.length;i++) {
if(field.options[i].selected) {
valSelCnt++;
}
}
document.getElementById("txtCount").value=valSelCnt;
}
◆tips---formを用いる方法
//複数選択可能に設定(選択する毎にfnSelect()を実行)
<form name="FORM">
<select name="cmbSel" multiple="multiple" onchange="fnSelect2()">
<option value="1">a001</option>
<option value="2">a002</option>
<option value="3">a003</option>
....
</select>
//選択数表示テキストフィールド
<input type="text" id="txtCount" />
</form>
[javascript]
function fnSelect2(){
var field=document.FORM.cmbSel;
var valSelCnt = 0; //様相選択数
// 選択されている個数を取得
for(i=0;i<field.options.length;i++){
if(field.options[i].selected) {
valSelCnt++;
}
}
document.getElementById("txtCount").value=valSelCnt;
}
</script>
◆メモ
※セレクトフィールドが選択されているかどうかチェックするとき、選択数を制限するとき等に有効
(DataID：000007)
【セレクトフィールドにjavascriptの計算結果をバインドする】
◆概要
※例えば1931年から2010年までの80年分をセレクトフィールドから選択できるようにするとき等、すべての年号のタグを記述するのもひとつの方法だが、javascriptで数値計算して、それをセレクトフィールドにバインドして選択できるようにする。
※要素が多く、同一の計算式で求められるときに有効。
◆前提条件
※例示では結果的に下記のタグをjavascriptで記述する。
<select>
<option value="0">--年選択</option>
<option value='2005'>1931</option>
<option value='2006'>1932</option>
<option value='2007'>1933</option>
...
<option value='2007'>1933</option>
</select>
◆西暦年を計算してバインドする
[XHTML]+[javascript]
<select>
<option value='0'>--年選択</option>
<script type="text/javascript">
<!--
var valStart=1931;
var valEnd=2010;
var year;
for(year=valStart;year<=valEnd;year++){
document.write("<option value='"+year+"'>"+year+"</option>\n");
}
//-->
</script>
</select>
◆月を計算してバインドする
[XHTML]+[javascript]
<select>
<option value='0'>--月選択</option>
<script type="text/javascript">
<!--
var valStart=1;
var valEnd=12;
var mon;
for(i=valStart;i<=valEnd;i++){
if(i<10){
mon="0"+i;
}else{
mon=i;
}
document.write("<option value='"+mon+"'>"+mon+"</option>\n");
}
//-->
</script>
</select>
◆メモ
※結果的には同じことであるが、javascriptでwriteした結果はソース表示されないため、かなりすっきりした形になる。
(DataID：000052)
【チェックボックス(複数)のチェック数をカウントする】
◆数設置されたのチェックボックスのチェックされてる数をjavascriptでカウントします。(どのチェックボックスが選択されているか調べる)
◆Tips(1)---idを用いる方法
[XHTML]
//複数のチェックボックス
<input type="checkbox" id="cbxR_0" />その1<br />
<input type="checkbox" id="cbxR_1" />その2<br />
<input type="checkbox" id="cbxR_2" />その3<br />
<input type="checkbox" id="cbxR_3" />その4<br />
<a href="javascript://" onclick="fnCbxCount()">計算</a>
[javascript]
function fnCbxCount(){
var valCount=0;
var cbxR;
for(i=0;i<=3;i++){
cbxR="cbxR_"+i;
if(document.getElementById(cbxR).checked){
valCount++;
}
}
alert(valCount);
}
※上記の場合は、formタグ及びinputタグのname指定は不要
◆Tips(2)---form/elementsを使う方法
[HTML]
<form name="FORM">
...
<input type="checkbox" name="cbx" />その1<br />
<input type="checkbox" name="cbx" />その2<br />
<input type="checkbox" name="cbx" />その3<br />
<input type="checkbox" name="cbx" />その4<br />
...
<a href="javascript://" onclick="fnCbxCount()">計算</a>
</form>
[javascript]
function fnCbxCount(){
var valCount=0;
var cbxR;
for(i=0;i<=3;i++){
if(document.FORM.elements["cbx"][i].checked){
valCount++;
}
}
alert(valCount);
}
※参考書では FORM.elements[i] が紹介されているが、チェックボックスの前に別のフォームがあるとi=0からではなくフォームの○番目からの指定になる。name指定してFORM.elements["cbx"][i]というように使う方が便利。
(DataID：000024)
【テーブル(表)の行にマウスカーソルがオンしたらその行の背景色を変える】
◆javascript Tips
[CSS]
//テーブルのスタイルシート
#tblData td{
background-color:#ffffff;
border-color:#c1c1c1; //セルの枠
border-style:solid;
border-width:1px;
cursor:default; //カーソル設定:デフォルト
}
[javascript]
f:背景色を数値で指定
k:表の行(1,2,3,4...)
function MouseOver(f,k){
var k2=parseInt(k)+1; //1行目(項目行--thタグの行)分を加える
switch(f){
case 1:
document.getElementById("tblData").rows[k2].style.backgroundColor="#fff7f7"; //背景:薄いピンク
break;
case 2:
document.getElementById("tblData").rows[k2].style.backgroundColor="#ffffec"; //背景:薄いイエロー
break;
case 3:
document.getElementById("tblData").rows[k2].style.backgroundColor="#ffffff"; //背景:白
break;
}
}
[XHTML]
//テーブル
<table id="tblData">
<tr>
<th>1列目</th>
<th>2列目</th>
<th>3列目</th>
<td>4列目</th>
</tr>
<tr onmouseover="MouseOver_data(1,1)>)" onmouseout="MouseOver_data(3,1)">
<td>a101</td>
<td>a102</td>
<td>a103</td>
<td>a104</td>
</tr>
<tr onmouseover="MouseOver_data(2,2)>)" onmouseout="MouseOver_data(3,2)">
<td>a201</td>
<td>a202</td>
<td>a203</td>
<td>a204</td>
</tr>
<tr onmouseover="MouseOver_data(1,3)>)" onmouseout="MouseOver_data(3,3)">
<td>a301</td>
<td>a302</td>
<td>a303</td>
<td>a304</td>
</tr>
...
...
</select>
◆メモ
※イベントonmouseover/onmouseoutはtrタグに記述。これにより、行のどの列(フィールド)にマウスオーバーしても行の背景色が変わる。
※マウスオーバー時、交互に背景色を#fff7f7と#ffffecに変え、マウスアウト時に元の色(#ffffff)に戻している。
※switch文で色指定番号を増やすことができる。
(DataID：000015)
【テーブル(表)の列に同じデータがあるかどうかチェックする(javascript)】
◆概要
※テキストフィールドに入力された値が、html上に表示された一覧表(テーブル)の特定の列にあるかどうかチェックする。
※テーブル自体はサーバー側のPHP等で作成されてクライアントに表示されることを想定。値のチェックはクライアント側のjavascriptで実行(サーバーに値を返さない)。
◆Tips
※テキストフィールド(id="txtData")に入力し、「チェック」ボタンをクリック。
※fnCheck()により、テキストフィールドの値がテーブルの「チェック列」にあるかどうかチェックする。
[XHTML]
//入力用テキストフィールド
<input type="text" id="txtData" />
<input type="button" value="チェック" onclick="fnDataCheck()" />
//テーブル
<table id="tblData">
<tr>
<th>チェック列</th>
</tr>
<tr><td id="td_1">abc101</td>
<tr><td id="td_2">abc102</td>
<tr><td id="td_3">abc103</td>
<tr><td id="td_4">abc101</td>
...
</table>
[javascript]
function fnDataCheck(){
//n_max:行数(サーバー側にテーブルを書き出した時に取得しておく)
strData=getElementById("txtData").value;
for(n=1;n<=n_max;n++){
strTd="td_"+n;
strTd=getElementById(strTd).innerText;
if(strTd==strData){
alert(" 同一データがテーブルに存在します。");
return false;
}
}
}
◆メモ
※テーブルがデータベース等を参照して動的に変化する場合等で、サーバーに入力値を返さずクライアント側のみでチェックする時に有効。
※テーブルを出力するとき、セルにtd_1,td_2...という連番のidを記述しておくこと。
(DataID：000061)
【htmlを開いたとき、テキストフィールドにあらかじめフォーカスしておく】
◆入力フォームのページ等でページを開いたときにあらかじめ特定のテキストフィールドにフォーカスしておく方法。ファイルオープン時にjavascript を自動実行する。
◆javascript Tips
[XHTML]
<body onload="fnStart()">
...
<input type="text" id="txtField" />
...
</body>
[javascript]
function fnStart(){
fnFocus();
}
function fnFocus(){
document.getElementById("txtField").focus();
}
◆メモ
※データをformタグでpost送信する方法
※PHPの記述 $PHP_SELFは「submitして同一ファイルを再実行」。
(DataID：000021)