Tag: javascript

JavaScript




WEBの役立つページ




window.openでの開き方

A. 元のウィンドウと同じくらいの別窓で開く 

	url = "sample.php";
	option = "fullscreen=yes";
	Win=window.open(url,"_blank",option);

B. Aと似たような動作だが、関数により大きさを習得 

	url = "sample.php";
	sW = window.innerWidth;
	sH = window.innerHeight;
	option = "width="+sW+",height="+sH;
	window.open(url, "_blank" ,option);

C. Bを少し変更して、少し小さい窓を開く 

	url = "sample.php";
	sW = window.innerWidth * 0.9;
	sH = window.innerHeight * 0.9;
	option = "width="+sW+",height="+sH;
	window.open(url, "_blank" ,option);




指定秒数で現在のURLをリロード

　マウス操作をした場合は、タイマーは0にセットされそれから指定秒数経ったらリロードします。以下は180秒(3分)の例です。

<script>
$(function() {
    var ID;
 
    ID=setTimeout("over()",180000); // タイムアウト時間を 180秒にセット
 
    $("body").mousemove(function() {
        clearTimeout(ID); // タイマーをクリア
         ID=setTimeout("over()",180000); // タイムアウト時間を 180秒に再セット
    });
 
});
 
function over() {
    var href = window.location.href ;
   location.href = href;
}
 
</script>

※ HAIKで使う場合ですが、前ページならナビページなどに#html{{ ～ }}プログインで記載し、特定のページならそのページの冒頭に#htmlプラグインで記述すると良いと思われる。

2017-01-27 17:35




日付の計算

今の日時を文字列にして返す 

// 今の日付を文字列で返す
// ex. 2017-02-18 18:32:11
function nowDateTimeStr(separater) {
	var date = new Date();
	var y=date.getFullYear();
	var m=date.getMonth()+1;
	var d=date.getDate();
	var h=date.getHours();
	var mi=date.getMinutes();
	var s=date.getSeconds();
	var mS = (m<10) ? "0"+m : m+"";
	var dS = (d<10) ? "0"+d : d+"";
	var hS = (h<10) ? "0"+h : h+"";
	var miS = (mi<10) ? "0"+mi : mi+"";
	var sS = (s<10) ? "0"+s : s+"";
 
	var sep = (separater != "") ? separater : "-";
  
	var r=y+sep+mS+sep+dS+" "+hS+":"+miS+":"+sS;
 
	return r;
}

2017-02-18


昨日を「yyyy-mm-dd」（例 2017-02-04)の書式 

function yesterday() {
  var date = new Date();
  dateT = date.getTime();
  dateT -= 86400000;//日数 * 1日のミリ秒数
  date.setTime(dateT);
  var r = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
 
  return r;
}

※ getFullYear()が古いブラウザでは対応しないらしい。

2017-02-04




各種変換

全角数字を半角数字に変更

以下のソース、フォントの関係で全角文字と半角文字が判別しづらいです。

// -------------------------------------------------------------
// 全角数値０～９を半角の0～9に変換する
// 2010.05.26
// -------------------------------------------------------------
function CnvZen2Han_0 (v) {
    var s=""+v;
    var Zen = "０１２３４５６７８９";
    var Han = "0123456789";
    var r = "";
 
    for (var i=0; i<s.length; i++) {
        var c=s.substr(i,1);
        var p = Zen.indexOf(c);
        if (p>-1) {
            r += Han.substr(p,1);
        } else {
            r += c;
        }
    }
    
    // alert("r: "+r);
    return r;
}

詳しくは、DB@WEBの全角数字を半角数字に変換 (JavaScript) をご覧下さい。ベタな方法で変換しています。

2017-02-04




金額などの位取りのカンマを付加する

位取りのカンマをつける(JavaScript)

2017-02-04




配列


TAB区切り文字の任意のフィールドでのソート 

var hitDatas = ["123\tabc\t648",
				"323\tbbc\t232",
				"143\tdbc\t748",
				"323\t3bc\t948",
				"233\tfbc\t123",
				"323\tagd\t148",
				"523\tzbc\t548"
				]
 
 
hitDatas.sort(function(a,b){
	fa=a.split("\t");
	fb=b.split("\t");
    if(fa[2]<fb[2]) return -1;
    if(fa[2]>fb[2]) return 1;
    return 0;
});
 
console.log(hitDatas)




正規表現ほか


半角数字以外の文字の有無を確認 

    // 数字以外が入力されていた時にチェックし
    // そうなら、入力欄にフォーカスを戻し、メッセージを表示
    // submitなどで入力内容をチェックする場合になどに使うと便利？
 
    var kno = document.FORM0.input_koumoku.value;
    var not_num = /[^0-9]+/;
 
    if  (not_num.test(kno)) {
        msg = "入力できない文字が入力されています。\\n";
        document.FORM0.input_koumoku.focus();
        alert(msg);
        return false;
    } else {
//        msg = "確認画面を表示します。\\n\\n";
//        flag = confirm(msg);
        return flag;
    }

引用元：半角数字以外が含まれた時を確認(JavaScript)

2017-02-04




親Windowの要素にアクセス

　window.openで開いた子ウィンドウから親ウィンドウの要素(value)の値を取得する場合などは、以下の様な書式でwindow.openerをセレクタの前に記述する事で可能となる。もちろん、以下はjQueryが使える環境です。

 var 変数 = window.opener.$(エレメント).val();


jQueryを使わない場合は、次の様な感じでFORMタグのINPUTタグのnameを利用するなら

window.opener.document.myFORM.TEXT1.value = "ABCD1234";

タグのid=のエレメント名を利用するなら、次の様にしてアクセス出来る。

window.opener.document.getElementById("エレメント").value = "ABCD1234";


オープンソースライブラリ

機能拡張

jQuery

Gridライブラリ

SlickGrid

w2ui Grid

Handsonable

チャート、グラフ作成

d3.js

地図

OpenLayers

ゲーム開発

enchant.js

　JavaScriptでのゲーム、アプリ開発を支援するライブラリ。WEBサイトでは「カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワークです。」として紹介されています。
　ダウンロードしたenchant.jsファイルには、簡単なシューティングゲームやロールプレーイングゲーム(RPG)の2Dマップ表示のサンプルなども用意されています。
　パソコンとブラウザ、テキストエディタでプログラムが作成出来ます。簡潔な書式で画像を画面上で移動表示させるなど、プログラムで処理した事を分かりやすく表現できますので、プログラミング教育などでの活用が期待できそうです。
　またライブライを公開した会社の設立者が新潟県長岡市出身で2005年に情報処理推進機構(IPA)より「天才プログラマー/スーパークリエイター」として認定された清水亮さん。2017年に長岡市にＡＩベンチャー企業を立ち上げている。

《注意》2016年で新たな機能追加等の開発は停止したようです。上記URLも未使用となり、ライブラリは、以下のgithubで取得出来ます。(2022年8月23日時点)

https://github.com/wise9/enchant.js


PDF

PDF.js

→HAIK内での表示テスト


PDFの作成


「javascript」タグ一覧


関連ページ