ダブルパー　【My Script】　javascript_2

｜前のページを表示｜次のページを表示｜

■【My Script】データベースに登録されたカテゴリ[javascript]での記事[45]ケの内、[21]番目から[20]ケを表示

□(21)　テキストフィールドにフォーカスしたとき、指定の文字位置にカーソルを移動する
□(22)　パス名からファイル名を切り出す(substring/substr/charAt)
□(23)　ファイル名と最終更新日を表示する(lastModified)
□(24)　メールアドレスを暗号化してホームページに記述する
□(25)　モーダルウィンドウでログインウィンドウを作る(modal)
□(26)　ラジオボタンが選択されているかチェックする(radio/checked)
□(27)　ラジオボタンの値をテキストフィールドに表示する(radio/elements)
□(28)　リンク文字からsubmitする(サーバーへのデータ送信)(submit)
□(29)　警告・確認・文字入力ウィンドウを表示する(alert/confirm/prompt)
□(30)　現在の年月日及び時刻(時分)・曜日を表示する(getYear/getMonth)
□(31)　語句(ワード)がリストにあるかどうかチェックする(indexOf)
□(32)　指定時間経過後に特定のスクリプトを実行する(setTimeout)
□(33)　親ウィンドウからサブウィンドウにデータを渡す(window.opener)
□(34)　親ウィンドウのURLをサブウィンドウから変える
□(35)　数値から文字、文字から数値に変換する(parseInit/parseFloat/eval)
□(36)　数値をまるめる---切り捨て・切り上げ・切り下げ・四捨五入(Math.floor/round)
□(37)　配列を操作する(Array)
□(38)　文字列(メールアドレス)が許容される英数字・記号かどうかチェックする
□(39)　文字列(メールアドレス)に@マークが含まれているかどうかチェックする
□(40)　文字列から指定範囲の文字列を切り出す(substring/substr)

【テキストフィールドにフォーカスしたとき、指定の文字位置にカーソルを移動する】

◆概要
※テキストフィールドの入力をチェックしたとき、不具合があって強制的にテキストフィールドにフォーカスしたとき等、入力している文字の指定の位置(最後尾または先頭等)にカーソルを移動する方法。
※下記の例示では、テキストフィールド(id="txtField")に入力したメールアドレスを、ボタン(id="btnCheck")クリックでチェックしたとき、入力不具合でテキストフィールドにフォーカスを戻す。

◆Tips
[XHTML]
<input type="text" id="txtField" value="" />
<input type="button" id="btnCheck" value="check"  onclick="fnMcheck()" />
...

[javascript]
function fnMcheck() {
  var n;  //カーソルを戻す文字位置(0から始まる)
  var h;
  if (document.getElementById("txtField").value.indexOf("@",0)<=-1) {
      alert(" メールアドレスは****@********(要アットマーク)!!");
      with(document.getElementById("txtField")){
          focus(); //フォーカスする
          h=createTextRange();  //カーソルを最後尾に移動
          h.move("character", n); //n+1番目の文字にカーソルを移動
 //       h.move("character", value.length);  //最後尾に
 //       h.move("character", 0);  //先頭に
      }
  }
}

【パス名(C;\〜\)からファイル名を切り出す(javascript)】

◆javascript Tips(1)
var strFName;   //ファイル名(拡張子あり)
var strFName2;  //ファイル名(拡張子なし)
var strFNameE;  //拡張子
var f="C:\sample\sample2\file.jpg";  //ファイルのパス

strFName=f.substring(f.lastIndexOf("\\",f.length)+1,f.length);
strFName2=f.substring(f.lastIndexOf("\\",f.length)+1,f.length-4);
strFNameE=f.substring(f.lastIndexOf(".",f.length)+1,f.length);
//最後に指定文字が出現した位置を検出---lastIndexOf
//指定範囲の文字の切り出し---substring

◆javascript Tips(2)
var strFName;   //ファイル名(拡張子あり)
var strFName2;  //ファイル名(拡張子なし)
var strFNameE;  //拡張子
var f="C:\sample\sample2\file.jpg";  //ファイルのパス

for(i=0;i<f.length;i++){
    if(f.charAt(i)=="\\"){ 
        i2=i;
    }
    if(f.charAt(i)=="."){ 
        i3=i;
    }
}

strFName==f.substr((i2+1),f.length);
strFName2=f.substr((i2+1),(f.length-i3-1));
strFNameE=f.substr((i3+1),(f.length-i3));

【開いているファイルの名前と最終更新日を表示する】

◆開いているファイルの名前と最終更新日を、ファイル上に書き出す。

◆javascript Tips
function fnFileCheck(){
  var strLastmodifdate =new Date(window.document.lastModified);
  var strMonth=strLastmodifdate.getMonth() + 1;
  var strPath=window.location.href; 
  var strFile=strPath.substring(strPath.lastIndexOf('/',strPath.length)+1,strPath.length); 

  //strFile==""のときはファイル名をindex.htmlにする
  if(strFile==""){
      strFile="index.html";
  }    
  
  document.write("File：" + strFile + "(最終更新日:" + strLastmodifdate.getFullYear() + "." + strMonth + "." + strLastmodifdate.getDate() + ")");
}

【メールアドレスを暗号化してホームページに記述する】

◆ホームページに管理人のアドレスを書いたりしたら、即座にスパムの餌食になります。HTMLのmailtoを使用するためのアドレス暗号化の手法が解説されてます。

サイト:web工房 http://www.webstudio.jp/
「メールアドレスを暗号化してホームページに記述する」
http://www.webstudio.jp/webstudio/contents/js_mailto/js_mailto.html

【javascriptとモーダルウィンドウでログインウィンドウを作る】

◆通常、HTMLでパスワードを用いようとしても、ほとんど守秘することはできません。HTML(モーダルウィンドウ)とjavascriptだけで、パスワードによる特定のページへのログインウィンドウを作ります。サーバーを使わない簡易的なログインです。

サイト:web工房 http://www.webstudio.jp/
「javascriptとモーダルウィンドウでログイン」
http://www.webstudio.jp/webstudio/contents/js_login/js_login_1.html

【どのラジオボタンが選択されているかチェックする】

◆数設置されたのラジオボタンのどれが選択されているかチェックする。ラジオボタンに設定された値(value)を取得することもできる。

◆javascript Tips
[XHTML]
//複数のラジオボタン
<form  name="FORM">
<input type="radio" name="dbnMenu" value="1" onclick="fnSelRab2(this)" />その1  
<input type="radio" name="dbnMenu" value="2" onclick="fnSelRab2(this)" />その2
<input type="radio" name="dbnMenu" value="3" onclick="fnSelRab2(this)" />その3
<input type="radio" name="dbnMenu" value="4" onclick="fnSelRab2(this)" />その4
</form>

<a  href="javascript://"  onclick="fnSelRab()">実行</a>
...

[javascript]
//まとめて
function fnSelRab(){
  for(i=0;i<=3;i++){
      if(document.FORM.elements["dbnMenu"][i].checked){
          rdbValue=document.FORM.elements["dbnMenu"][i].value
      }
  }
  alert(rdbValue);
}

//チェックするたびに
function fnSelRab2(Obj){
  alert(Obj.value);   
}

◆ラジオボタンのname属性を同じにすることで、submitしてpost送信したときサーバー側のPHPでは下記のようにしてラジオボタンの値を取得することができる。  
<?php
  $strSelrdb= $_POST['dbnMenu'];
?>

【選択したラジオボタンの値をテキストフィールドに表示する】

◆概要
※選択したラジオボタンの値(value)をテキストフィールドに表示しする。(どのラジオボタンが選択されたか調べる。)

◆javascript Tips
[XHTML]
<form  name="FORM">
//ラジオボタンの値を表示するテキストフィールド
<input type="text" name="txtFild" id="txtFild" />
//複数のラジオボタン
<input type="radio" name="dbnMenu" value="A" onclick="fnSelRab(0)" />その1  
<input type="radio" name="dbnMenu" value="B" onclick="fnSelRab(1)" />その2
<input type="radio" name="dbnMenu" value="C" onclick="fnSelRab(2)" />その3
<input type="radio" name="dbnMenu" value="D" onclick="fnSelRab(3)" />その4
<input type="radio" name="dbnMenu" value="0" onclick="fnSelRab(4)" />消去
</form>

[javascript]
function fnSelRab(g){
    var strRdbtn =document.FORM.elements["dbnMenu"][g].value 
    if(strRdbtn=="0"){  //表示を消去
        document.getElementById("txtFild").value="";
    }else{
        document.getElementById(strTxtbox).value=strRdbtn;
    }
}

◆メモ
※fnSelRab(g)---gは0から

【リンク文字からsubmitする】

◆サーバーへデータ送信するためは、フォーム(submitボタン)を用いるのが一般的な手法だが、javascriptを用いてリンク文字からsubmitすることができる(javascriptでsubmitする)。

◆javascript Tips
[XHTML]+PHP
<form name="FORM" id="FORM" action="<?php echo $PHP_SELF; ?>" method="POST">  
...
<a href="javascript:fnSelSubmit()">Submit</a>
...
</form>

[javascript]
function fnSelSubmit(){
  document.getElementById("FORM").submit();
}

◆メモ
※データをformタグでpost送信する方法
※PHPの記述 $PHP_SELFは「submitして同一ファイルを再実行」。

【クッキーへの書き込みができない場合は警告する】

◆Tips
[javascript]
※警告ウィンドウを表示する
  alert("警告メッセージ");  

※確認ウィンドウを表示する
  flag=confirm("確認メッセージ");
      OKボタンが選択されればtrue、キャンセル選択でfalseを返す

  確認例
  if(!confirm("確認メッセージ")){
      alert("キャンセルされました。");
  }

※文字入力ウィンドウを表示する
  strR=prompt("文字入力メッセージ","初期値");
      初期値は最初に入力欄に表示される文字列(省略可)
      入力した文字列が返る

【現在の年月日及び時刻(時分)・曜日を表示する】

◆年月日・時分の表示書式は 9999/99/99 99:99 曜日

◆HTML
(日時表示エリアを確保)
Date：<span id="Obj_Now"></span>
(bodyタグで起動時実行)
<body onload="fnNow_YMDHM()">

◆javascript Tips(ファイル起動時onload=""で実行)
function fnNow_YMDHM(){
    var strDate;   
    var strTime;    
    var strDyj;
    var hh;
    var mi;

    var now=new Date();  //現在の日時
    var yyyy=now.getYear();    //年
    var mm= now.getMonth()+1;  //月(+1する必要あり)
    var dd = now.getDay();     //日
    var DYS = new fnDays();    //曜日
    var DYJ = DYS[dd];
    
    //mac+safari対応(2008→108と表示される)
    if(yyyy<"200"){     
        yyyy=eval(yyyy)+1900;
    }

    //数値桁整形
    if (mm<=9){
        mm="0"+mm;
    }
    dd=now.getDate();
    if (dd<=9){
        dd="0"+dd;
    }
    hh=now.getHours();
    if (hh<=9){
        hh="0"+hh;
    }
    mi= now.getMinutes();
    if (mi<=9){
        mi="0"+mi;
    }

    strDate =  yyyy + "/" + mm + "/" + dd;
    strTime =  hh + ":" + mi;
    strDyj  =  "(" + DYJ + ")"; 

    document.all["Obj_Now"].innerText= strDate + strDyj + strTime;
    //30秒毎に表示を更新
    setTimeout("fnNow_YMDHM()",30000);
}

function fnDays(){
  this[0] = "日"; this[1] = "月"; this[2] = "火"; this[3] = "水";
  this[4] = "木"; this[5] = "金"; this[6] = "土";
}

◆メモ
※上記では、起動時実行してdocument.all["Obj_Now"].innerTextに時刻を表示しているが、document.write に変更して、時刻表示位置で実行させてもよい。
※大分昔、何かを参考に作ったもので洗練されていないが、まあ、今でもこんな形で動かしているので...(^^;)ゞ

【語句(ワード)がリストにあるかどうかチェックする】

◆javascript) Tips
//語句(ワード)のリスト(例:ファイルの拡張子)
List="gif,png.JPEG,jpeg,jpg,JPG";
//strWord:検索するワード

function fnWordSerch(strWord){
  if(List.indexOf(strWord,0)==-1){
      alert("※許容されていない種類のファイルです。");
  }  
}
?>

◆メモ
※strWordが含まれていれば、Listの順番(0から始まる)を返す。
※Listは配列ではなく語句(ワード)の文字列

【指定時間経過後に特定のスクリプトを実行する】

◆Tips
[javascript]
  setTimeout("fnAction()",時間);
     //時間はmsec

//実行するスクリプト
function fnAction(){
  location.href("http://www〜〜リンク先");  //URLを表示
}


※記述例(秒後にウィンドウクローズ)
  setTimeout(window.close(),5000);

【サブウィンドウから親ウィンドウのURLを変える】

◆親ウィンドウからオープンしたサブウィンドウに、親ウィンドウのフォームデータを渡します。

◆HTML/javascript Tips

[親ウィンドウHTML]
<form name="FORM">
<input type="text" name="txtData" />
</form>
<a href="javascript:fnWinOpen()">サブウィンドウを開く</a> 

[親ウィンドウjavascript]
function fnWinOpen(){
  //ファイル名はsubwindow.html)
  window.open("subwindow.html","win","width=150,height=200");
} 

[サブウィンドウHTML]---起動時実行
<body onload="fnStart">
<input type="text" id="txtSubData" />
<divid="divSubData" ></div>

[サブウィンドウjavascript]
function fnStart(){
    document.getElementById("txtSubData").value=window.opener.FORM.txtData.value;
    document.getElementById("divSubData").innerHTML= window.opener.FORM.txtData.value;
}

◆メモ
※親ウィンドウ側はwindow.opener.FORM.txtData.valueのようにform属性を使っていることから、親ウィンドウのフォームデータのみ送ることができると思われる。form属性を用いないとデータは渡らない。
※サブウィンドウ側はid属性でdocument.getElementById()を使用できることから、フォームに限らず受け取ることかできる。但しフォームの場合とそれ以外では、半角空白等の扱いが異なるようなので、必ず見え方をチェックしておかなければならない。

【親ウィンドウのURLをサブウィンドウから変える】

◆親ウィンドウからオープンしたサブウィンドウから、親ウィンドウのURLを変える。サブウィンドウを小さく開いてナビページ(サイトマップ等)にして、親ウィンドウに表示するURLを変えるような場合に使う。

◆HTML/javascript Tips

[親ウィンドウHTML]
<a href="javascript:fnWinOpen()">サブウィンドウを開く</a> 

[親ウィンドウjavascript]
function fnWinOpen(){
  //幅150px,高さ200pxで左上端に開く
  //ファイル名はsubwindow.html)
  window.open("subwindow.html","win","width=150,height=200,top=0,left=0");
} 

[サブウィンドウHTML]
<a href="javascript:fnPage(1)">ページ(1)</a><br />
<a href="javascript:fnPage(2)">ページ(2)</a><br />
... 

[サブウィンドウjavascript]
function fnPage(f){
  switch(f){
      case 1:   
          window.opener.location.href="http://〜〜";
      case 2:   
          window.opener.location.href="http://〜〜";
      ....
  }
}

【数値から文字、文字から数値に変換する】

◆javascriptは数値の概念があいまいで、ある意味、スクリプトが自動的に解釈してくれるのだが、どうしてもどららかの処理をしたい場合がある。

◆javascript tips
//文字を数値に変換
   n=parseInit("12345");   //整数 
   n=parseFloat(12.345");  //小数
   n=eval(""123.45);       //式評価(数値変換に用いることができる)
//数値を文字に変換(文字と結合する)
   str=""+123.45;          //空文字と結合("123.45"となる)
   str="0"+123.45;         //文字の数値と結合("0123.45"となる)

【数値をまるめる---切り捨て・切り上げ・四捨五入】

◆javascript
//n:数値

//小数点以下切り捨て(整数部を切り出す)
  正の数の場合 Math.floor(n)
  負の数の場合 Math.celi(n) 

//小数点以下切り下げ(正の数の場合)
  Math.floor(n);
//小数点以下切り捨て(正の数の場合)
   Math.floor(n);

//小数点以下四捨五入
  Math.round(n);
//小数点以下切り上げ(正の数の場合)
  Math.floor(n)+1;

【配列を操作する(javascript)】

◆概要
※javascriptでは、配列関連はそれ程多くはない。

◆tips
[javascript]

※配列変数を作成する(配列のみ作成）
arrName=new Array();
※配列変数を作成する(要素に値を代入する)---n*は数値または文字列
arrName=new Array(n0,n2,n3...);
    arrName[0]=n0
    arrName[1]=n1
    arrName[2]=n2
     ...

※配列変数を削除する
delete arrName;

※配列同士を連結する
arrName1=new Array(n0,n1);
arrName2=new Array(m0,m2,m3);
arrNew=arrName1.concat(arrName2); //配列連結(new Array()定義不要)

※配列の要素数をカウント
arrName=new Array(n0,n1,n2,n3,n4);
arrLen=arrName.length;  //arrLen=4となる(0から)

※配列を文字列として書き出す
arrName=new Array(n0,n1,n2,n3,n4);
for(i=0;i<arrName.length;i++){
    document.write(arrName[i]);
}

※文字列から区切り文字で配列を作成する
strData="";  //配列を作成する文字列
arrName=strData.split(区切り文字);
  [例1]
    strData="123,456,789";  //区切り文字(カンマ)
    arrName=strData.split(",");
  [例2]
    strData="123 456 789";  //区切り文字(半角空白)
    arrName=strData.split(" ");

※配列内容をソート(分類)する
arrName=new Array(n0,n1,n2,n3,n4);
arrNew=arrName.sort();   //ソート(文字コード順)

【文字列に含まれている文字が指定文字以外なら警告する】

◆文字列(メールアドレスの例):アドレスは半角英文字・数値及びピリオドとアンダーバー・ハイフンのみが許容される)

◆javascript tips
//strR:メールアドレス(文字列)
function fnAddCheck2(strR){
　　var InputVal="1234567890abcdefghijklmnopqrstuvwxyz._-@";
    var i;
    for(i=0;i<strR.length;i++){
        //InputValリスト以外の文字が使用されていればエラー警告
        if(InputVal.indexOf(strR.charAt(i),0)<0){
           alert("  入力エラーです。！半角小文字の英文字・数値及び.(ピリオド)_(アンダーバー)@(アットマーク)以外は入力できません。");
            return false;
        }
    }
}

◆メールアドレス入力フォーム等のチェック時に使用可能。

【文字列(メールアドレス)に@マークが含まれているかどうかチェックする】

◆javascript tips
//strR:メールアドレス(文字列)
function fnAddCheck(strR){
   if(strR.indexOf("@",0)==-1){
      alert(" メールアドレスは****@*****(@マークでつなぐ)形式でなければなりません。");
      return false;
   }
   if(strR.indexOf(".",0)==-1){
      alert(" メールアドレスにはピリオド(.)が含まれていなければなりません。");
      return false;
   }
}

◆@マークとピリオド(.)の存在をチェックすれば、とりあえず入力チェクしたことになる。メールアドレス入力フォーム等のチェック時に使用可能。

【文字列から指定範囲の文字列を切り出す】

◆概要
※文字列から指定した範囲の文字列を切り出す、他、類似の手法を紹介。

◆javascript tips
//strR:文字列
//start:切り出す始点
//end:終点(0から始まる---n番目-1)
//n:n番目の文字(0から始まる)
//m:切り出す文字数

//文字列から指定した範囲の文字列を切り出す
function fnGetStr1(strR){
  strR2=strR.substring(start,end);
  return strR2;  //returnは以下省略
}

//文字列の左側(先頭)から指定した文字数を切り出す
function fnGetStr2(strR){
  strR2=strR.substr(0,m);
}

//文字列からn番目の一文字を切り出す
function fnGetStr3(strR){
  strR2=strR.charAt(n);
}

//文字列の右側から指定した文字数を切り出す
function fnGetStr4(strR){
  strR2=strR.substr(strR.length-n,n);
}

//文字列から文字列を検索する
function fnGetStr5(strR){
//srtA:検索文字列
//strL:検索結果(みつからない場合は-1、みつかった場合は文字の位置)
  strL=strR.indexOf(srtA,0);
}

//文字列の長さを取得する
function fnGetStr6(strR){
//srtL:長さ
  strL=strR.length;
}

//文字列を検索して別の置換語に置き換える
function fnGetStr7(strR){
//strS1:検索語
//strS2:置換語(検索語と同一の長さの必要なし)
  strR2=strR.replace(strS1,strS2);
}
//(注)検索文字列が複数あっても、置換するのは1ケのみ
//(注)すべて置換するにはループで回す。

◆メモ
※PHP等、他のスクリプトと混同して、なかなか覚えられないので...