Category Archives: JavaScript

「JavaScript入門」stopPropagation()でイベント伝播を止めるサンプル

①htmlコード
<table border=”1″>
<tr onclick=”test()”>
<td id=”cftOne”>イベントをキャンセル</td>
<td >イベントを発火</td>
<td id=”cftTwo”>イベントをキャンセル</td>
</tr>
</table>
②JSコード
<script type=”text/javascript”>
function stopBubble(e) {
if (e && e.stopPropagation) {
e.stopPropagation();
}
else {
window.event.cancelBubble = true;
}
}

document.getElementById(‘cftOne’).onclick = function (e) {
stopBubble(e);
}
document.getElementById(‘cftTwo’).onclick = function (e) {
stopBubble(e);
}
function test() {
alert(“it change world”);
}
</script>

「jQuery入門」text()で要素内のテキストを変更するサンプル

1.htmlコード
<div id=”cft”>
data11
<p>data12</p>
</div>
<button id=”testDd”>変更</button>

2.JSコード
$(“#testDd”).on(“click”, function(){
$(“#cft”).text(“data3”);
});

「javaScript入門」json形式の文字列をオブジェクトへ変換する

JSコード
var result = ‘{“status”:”NG”,”msg”:”登録失敗”}’;
var cftObj = (new Function(“return ” + result))();

「JavaScript入門」時間の差を計算するコード

JSコード
var endDate = new Date(‘2017/03/16’);
var startDate = new Date(‘2017/03/15’);
var timeDiff = (endDate.getTime() – startDate.getTime()) / (1000 * 60 * 60);
console.log(‘時間の差:’ +timeDiff );

「jQuery入門」$.each()で配列の要素に対して繰り返し処理をする

JSコード
staArr = [“Test1”, “Test2”, “test3″,”dat4”];
$.each(staArr, function(n, stVal) {
$(‘ul’).append(“<li>” + n + “:” + stVal + “</li>”);
});

「JavaScript入門」push()で配列の最後に要素を追加するコード

1.配列の要素を追加
var userLstArr = [];
// 要素を追加
userLstArr.push(“山田太郎11”);
userLstArr.push(“山田太郎12”);
userLstArr.push(“山田太郎13”);

//3番目の要素を削除
delete userLstArr[2];

2.配列のキーの値を設定
var addrLst = [];
addrLst[‘key1’] = “場所1”;
addrLst[‘key2’] = “場所2”;
addrLst[‘key3’] = “場所3”;

3.全ての要素を参照
for(key in addrLst){
//処理コード
}

「JavaScript入門」remove()で要素を削除するサンプル

1.removeChild()
var kdf = document.getElementById(“sample”);
kdf.parentNode.removeChild(kdf);

2.#sample 要素を削除
$(“#sample”).remove();

「JavaScript入門」includes()で文字列が含まれるかどうかを判定する

1.部分一致の判定
“xyz”.includes(“y”) // true
“xyz”.includes(“Y”) // false

//検索開始位置を指定
“xyz”.includes(“x”, 1) // false

2.includes()メソッド
var str = “ABC大学卒業”;
var n = str.includes(“大学”);//true

「JavaScript入門」classListで要素のクラスリストへのクラスを操作する

1.htmlコード
<div id=”content” class=”test1 test2 test3″></div>

2.JSコード
// <div> 要素を参照する
div.classList.remove(“test3”);
div.classList.add(“demo”);

// class に visible が設定されている場合は削除し、それ以外の場合は追加する
div.classList.toggle(“visible”);

//クラスリストが特定のクラスを含むかどうか
alert( div.classList.contains(“test3”) );

「JavaScript」正規表現でURLのパラメータの値を取得するコード

JSコード
function getQueryStrFunc(name) {
var reg = new RegExp(“(^|&)” + name + “=([^&]*)(&|$)”, “i”);
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}

使い方
alert(getQueryStrFunc(“パラメータ1”));
alert(getQueryStrFunc(“パラメータ2”));