JavaScriptの旧覚書
■GETパラメータを取得する。
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
■関数内に関数を定義できる。
function testFunc(){
var x=200;
testFunc2(x);
function testFunc2(value){
alert(value);
};
alert("neko");
}
■メーラーを立ち上げる
件名や本文をあらかじめ記述しておくこともできる。
◇サンプルコード
var a="amara";
var b="imusi";
var mailAddress=a+b+"@gmail.com";
var mailto = "mailto:"+mailAddress;
var matter=$('#matter option:selected').val();
mailto = mailto +
"?subject="+matter+"&body=" + matter + "%0D%0A";
//新しいウィンドウで開く
var w=window.open();
w.location.href=mailto;
■Chromeでデバッグする。
Shift+Ctrl+iを押す。
Scriptパネルを押す。（デバッグ画面の上段にある。）
左上のアイコンをクリックしてデバッグ対象のモジュールを選択。
ブレークポイントを設定したい行をクリック。
■URLエンコードする。
//港名をURLエンコードする。
haborName=encodeURIComponent(haborName);
//▼いくつかの記号はエンコードしない。
haborName=encodeURI(haborName);
■文字列からタグを消す正規表現
var s = s.replace(/<¥/?[^>]+>/gi, "");
■WebWorkers
■一定間隔で関数を実行する。 setIntervalの使い方
//関数Hyoji()を1000ミリ秒間隔で呼び出す
setInterval("Hyoji()",1000);
■指定時間後に関数を実行する。
setTimeout（"関数",ミリ秒）:
※関数はダブルクォートでくくること。
例：
document.write("hoge¥n");//最初に出力される。
setTimeout(function(){ document.write("fuga¥n") }, 1000);//一秒後に実行されるため、3番目に出力される。
document.write("piyo¥n");//2番目に出力
■innerHTMLの使い方。
$elm=document.getElementById('file_preview');
$elm.innerHTML='テスト';
■文字を小文字、大文字変換する。
var str='AAAbbb';
alert(str.toLowerCase());
alert(str.toUpperCase());
arguments.calleeが自分自身の関数を示す。
■再帰呼び出し
//例
function sanitaizeTreeData(treeData){
if(treeData==null){return null;}
if(isArray(treeData)==true){
for (var i=0;i<treeData.length;i++){
treeData[i]=arguments.callee(treeData[i]);
}
}else{
if(typeof(treeData)=='string'){
treeData=escape_html_tag(treeData)
}
}
return treeData;
}
■アンカー、リンクからJavaScriptを起動する
<a href="#" onclick="alert('test');return false;"
style="text-decoration: none;">▼表示
</a>
※hrefには「#」を入れ、JS部分はfalseを返すようにすること。falseを返さないとブラウザのスクロールが最初の状態に戻る。
■JavaScriptのクラス
クラス名：Animal 右の引数はコンストラクタ引数となる。
var Animal = function(name, sex) {
this.name = name;//プロパティ
this.sex = sex;//プロパティ
this.toString = function() {//メソッド
window.alert(this.name + " " + this.sex);
};
}
・使用例
var anim = new Animal("ジロウ", "オス");
anim.toString(); // 「ジロウ オス」
■セレクトボックスのクリア <select box clear>
var specSbElm=document.getElementById('depreciation');//セレクトボックスのエレメントを取得する。
specSbElm.options.length=0;//セレレクトボックスをクリアする。
■セレクトボックスへOptionを追加
selectBoxElm.options[0]=new Option('選択項目A','1');
selectBoxElm.options[1]=new Option('選択項目B','2');
selectBoxElm.options[2]=new Option('選択項目C','3');
※selectBoxElmはセレクトボックスオブジェクト
※new Option(text, value, defaultSelected, selected)
text Optionオブジェクトのtextプロパティに相当する文字列（省略可能）。
value Optionオブジェクトのvalueプロパティに相当する文字列（省略可能）。
defaultSelected OptionオブジェクトのdefaultSelectedプロパティに相当する論理値（省略可能）。
selected Optionオブジェクトのselectedプロパティに相当する論理値（省略可能）。
■配列へ追加
xx = new Array("Sun", "Mon");
xx.unshift("xxx");//先頭に追加。
xx.push("Tue");//末尾に追加
xx.push("Wed");
xx.push("Th", "Fri","Sat") ;複数追加
■特定の記号をエスケープする。
function escapeHTML(str) {
return str.replace(/[&"<>]/g, function(c) {
return {
"&": "&",
'"': """,
"<": "<",
">": ">"
}[c];
});
}
■リンク（アンカー）からJS起動。「#」を指定すること。
<a href="#" onclick="changePicture('new')">正しい方法は＃をhrefに指定</a>
×<a href="" onclick="changePicture('new')">hrefを空にするとJSの効果が出ない。すぐに画面が元に戻る現象</a>
■■■IE注意
const 定数宣言は使えません。operaも同様
■基本的なJSONデータ
{"プロパティ名" : 値}
■複数のデータを含むJSONデータ（2次元データをJSONで表現）
{"item":
[
{"itemCode":91,
"itemName":"塩ラーメン",
"itemPrice":300},
{"itemCode":94,
"itemName":"味噌ラーメン",
"itemPrice":290},
{"itemCode":95,
"itemName":"豚骨ラーメン",
"itemPrice":320}
]
}
※JSONのフォーマットはJavaScriptのオブジェクトとほとんど同じですが、文字列は必ず '' ではなく "" で囲みます。
■複数型JSONデータその２
var jdata=[{year: '2011',month: '11',day: '28'},{year: '2012',month: '11',day: '28'}];
alert(jdata[1].year);
■JSONパース・JSONオブジェクトからJSON文字列に変換
JSON.parse(json文字列) JSON文字列をオブジェクトに変換して返します。
JSON.stringify(jsonオブジェクト) オブジェクトをJSON文字列に変換して返します。
例
var json = JSON.stringify( { 'key': 'value' } );//JSONオブジェクトからJSON文字列に変換
alert(json); // {"key": "value"}
var object = JSON.parse(json);//JSON文字列からJSONオブジェクトに変換する。
※古いやり方：var jsonData=eval(<?php echo $m_jsonData ?>);
■非同期通信
他のテキストファイル（html,xml,jsonなど様々）を非同期で読み込める。
var url='def.json';//テキストファイルのURLを指定
var http_request = new XMLHttpRequest();
http_request.open( "GET", url, true );
http_request.onreadystatechange = function () {
if ( http_request.readyState == 4 ) {
if ( http_request.status == 200 ) {
var strData=http_request.responseText;//テキストファイルの中身
alert(strData);
} else {
alert( "There was a problem with the URL." );
}
http_request = null;
}
};
http_request.send(null);
TR要素のスキマに編集フォーム要素を移動
デモHTML
<table id="tbl1" class="table">
<thead>
<tr><th>id</th><th>コード</th><th>名前</th><th>備考</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>neko</td><td>猫</td><td><input type='button' value='編集' onclick='clickEdit(this)' /></td></tr>
<tr><td>2</td><td>yagi</td><td>山羊</td><td>草食</td><td><input type='button' value='編集' onclick='clickEdit(this)' /></td></tr>
<tr><td>3</td><td>same</td><td>鮫</td><td><input type='button' value='編集' onclick='clickEdit(this)' /></td></tr>
<tr><td>4</td><td>wasi</td><td>鷲</td><td><input type='button' value='編集' onclick='clickEdit(this)' /></td></tr>
<tr><td>5</td><td>goki</td><td>御器</td><td><input type='button' value='編集' onclick='clickEdit(this)' /></td></tr>
</tbody>
</table>
<table>
<!-- 編集フォーム -->
<tr id='edit_form'><td>
<div>
編集フォーム<br>
A <input type="text" /><br>
B <input type="text" /><br>
<input id="reg_btn" type="button" value='ダミー登録ボタン' class="btn btn-success" />
</div>
<td></tr>
</table>
JavaScript
// 初期化
$(() => {
// ▼ 編集フォームのダミー登録ボタンにテスト用のクリックイベントを組み込む
$('#reg_btn').click((e) => {
alert('クリックイベントのテスト');
});
});
// TR要素の編集ボタン・クリックイベント
function clickEdit(btnElm){
// ▼ 編集フォームをクリックしたTR要素の下に移動させる。
var tr = jQuery(btnElm).parents('tr');
jQuery('#edit_form').insertAfter(tr);
}
DOM要素をIMG画像として書き出し、さらに画像ダウンロードする
デモHTML
<script src="html2canvas.js"></script>
<script src="FileSaver.js"></script>
<script src="dom2img2download.js"></script>
-- 略 --
<div id="div1" style="width:182px;height:110px;background-color:#e8f2fe">
いろはにほへとちりぬるをわかよたれそつねならむ<br>
</div>
<input type="button" value="Dom to img" onclick="dom2img()" class="btn btn btn-primary btn-xs"/><br>
<img id="img1" src="" style="width:182px;height:110px" /><br>
<input type="button" value="Img download" onclick="img2download()" class="btn btn btn-primary btn-xs"/><br>
JavaScript
function dom2img(){
var element = $('#div1')[0];
//DOM要素をcanvasに変換してからダウンロード
html2canvas(element, { onrendered: function(canvas) {
var imgData= canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
$('#img1')[0].src = imgData;
}});
}
function img2download(){
var a = document.createElement('a');
a.href = $('#img1')[0].src;;
a.download = 'test.png';
a.click();
}
入力フォームの各input要素にEnterキー押下イベントを組み込む
// 入力フォームの各input要素にEnterキー押下イベントを組み込む
$('#xxx_form input').keypress(function(e){
if(e.which==13){ // Enterキーが押下された場合
// Enterキーが押された時の処理を記述
}
});
データidを指定して行要素を取得する
デモJavaScript
/**
* 親要素からデータidに紐づく行要素を取得する
* @param jQuery parElm 親要素
* @param string ent_slt エンティティ要素のセレクタ 例 → tr
* @param int id データid
* @returns jQuery 行要素
*/
function getRowElmById(parElm, ent_slt, id){
// ▼ data-id属性による行取得
var slt = ent_slt + "[data-id='" + id +"']";
var tr = jQuery(slt);
if(tr[0]) return tr;
// ▼ input系のname属性による値要素の取得
slt = "[name='id'][value='" + id + "']";
var valElm = parElm.find(slt);
// ▼ input系のclass属性による値要素の取得
if(valElm[0] == null){
slt = ".id[value='" + id + "']";
valElm = parElm.find(slt);
}
// ▼ div,spanなどのclass属性による値要素の取得（やや重い処理）
if(valElm[0] == null){
parElm.find('.id').each((i,e2) => {
var elm2 = jQuery(e2);
var id2 = elm2.text();
if(id == id2){
valElm = elm2;
return;
}
});
}
if(valElm[0]){
tr = valElm.parents(ent_slt);
return tr;
}
return null;
}
DOM構築直後のイベント | DOMContentLoaded
DOMContentLoadedはjQueryの「 $(document).ready 」と同等のイベント。loadイベントは画像やすべてのスクリプトが読み込まれた時点で発動するが、DOMContentLoadedは、DOMの構築が完了した時点で実行される。
document.addEventListener('DOMContentLoaded', function () {
console.log('test=Ａ');
}
Ajax送信不具合、「&」記号対策 | データ中の「&」を「%26」に一括サニタイズ
Demo
/**
* データ中の「&」を「%26」に一括エスケープ
* @note
* PHPのJSONデコードでエラーになるので、＆記号を「%26」に変換する
*
* @param mixed data エスケープ対象 :文字列、オブジェクト、配列を指定可
* @returns エスケープ後
*/
function _ampTo26(data){
if (typeof data == 'string'){
if ( data.indexOf('&') != -1) {
return data.replace(/&/g, '%26');
}else{
return data;
}
}else if (typeof data == 'object'){
for(var i in data){
data[i] = _ampTo26(data[i]);
}
return data;
}else{
return data;
}
}
折り畳みテキストエリア | FoldingTa.js
DemoHTML
<div id="form1">
<textarea class="test1" cols="30" rows="5" data-folding-ta>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん
</textarea>
<textarea class="test2" cols="30" rows="5" data-folding-ta="5">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも
</textarea>
</div>
<input type="button" value="外部による値変更" class="btn btn-primary btn-xs" onclick="test_input_by_outsider()" />→
<input type="button" value="一括反映表示" class="btn btn-success btn-xs" onclick="reflection()" />
JavaScript
var foldingTa;
$(()=>{
foldingTa = new FoldingTa();
foldingTa.init({
'form_slt':'#form1',
});
});
// 「外部による値変更」ボタンを押下
function test_input_by_outsider(){
jQuery('.test1').val(`我が子よ，
その時にはこのように行動して自分を救い出せ。あなたは仲間の者の掌中に陥ったからである。すなわち，行って，自分を低くし，その仲間の者にあらしのように懇願を浴びせよ。`);
jQuery('.test2').val(`さて，カナン人でアラドの王である者がネゲブに住んでいたが，その者は，イスラエルがアタリムを通ってやって来たことを聞いた。
それで彼はイスラエルに対して戦いを始め，その幾人かをとりこにして連れ去った。`);
}
// 「一括反映表示」ボタン押下
function reflection(){
foldingTa.reflection();
}
メモリを確認する | performance.memory
Chrome系が対応。 FirefoxやEdgeではundefinedになる。
console.log( performance.memory );