Category Archives: JavaScript

「JavaScript入門」toggle()で要素の表示、非表示を切り替える

サンプルコード
<head>
<script type=’text/javascript’
src=’jquery-1.4.2.js’></script>
<style type=’text/css’>
.cft {
display: none;
}
</style>
<script type=’text/javascript’>
$(window).load(function(){
$(document).ready(function() {
$(“.body”).hover(function () {
$(“.cft”).toggle();
})
});
});
</script>
</head>
<body>
<span class=”body”> テスト1</span>
<span class=”cft”> テスト2</span>
</body>

「ajax入門」timeoutを設定するサンプル

JSコード
$.ajaxSetup({
type : ‘POST’,
dataType: ‘json’,
cache:false,
ifModified:true,
timeout:30000,
global: true
})

「JavaScript入門」jsonデータの配列を取得するサンプル

1.jsonデータ
var cft = [
{
“deptNo”:10001,
“deptname”:[
“Java開発部”,
“PHP開発部”
]
},
{
“deptNo”:10002,
“deptname”:[
“アニメ企画部”,
“ゲーム企画部”
]
},
]

2.配列の要素を取り出す
for (var i = 0; i < cft.length; i++) {
for (var j = 0; j < cft[i][“deptname”].length; j++) {
console.log(“message:”+cft[i][“deptname”][j]);
};
};

「JavaScript入門」複数の空白スペースを一つに置換する

JSコード
function mergeSpaceFunc(str) {
str=str.replace(/(\s|&nbsp;)+/g,’ ‘);
return str;
}

「JavaScript入門」htmlspecialcharsでhtmlに特殊文字のエスケープをする

JSコード
function htmlspecialstrCtnars(strCtn) {
strCtn = strCtn.replace(/&/g,”&amp;”) ;
strCtn = strCtn.replace(/”/g,”&quot;”) ;
strCtn = strCtn.replace(/’/g,”&#039;”) ;
strCtn = strCtn.replace(/</g,”&lt;”) ;
strCtn = strCtn.replace(/>/g,”&gt;”) ;
return strCtn ;
}

「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>”);
});

1 / 3412345...102030...最後 »