Category Archives: JavaScript

「JavaScript入門」replace()でダブル(シングル)コーテーションを削除する

1.ダブルコーテーション削除
var strObj =”xxx”;
var strObj2 = strObj.replace(/[\”]/g,””);

2.シングルコーテーション、ダブルコーテーション削除
var strObj =”xxx”;
var strObj2 = strObj.replace(/[“][^”]*[“]/g,””);

「JavaScript入門」slice()で文字列を切り出すサンプル

形式
文字列.slice(開始位置 [,終了位置] )

1.htmlコード
<button onclick=”FuncTest()”>文字列切り出し</button>
<p id=”ctn”></p>

2.JSコード
function FuncTest() {
var opStr = “12345789”;
var cutStr = opStr.slice(-3);
document.getElementById(“ctn”).innerHTML = cutStr;
}

3.結果
opStr.slice(-3); //789
opStr.slice(4); //5789
str.slice(5,-2) //7

document.getElementById(xx).optionsでoption要素を取得する

1.htmlコード
<select id=”nm” multiple size=”5″>
<option>項目1 </option>
<option>項目2 </option>
<option>項目3 </option>
<option>項目4 </option>
</select>

2.JSコード
// selectの全てのoption要素を取得
var changfa = document.getElementById(“nm”).options;

var str = “要素:”;
for ( var i=0,l=changfa.length; l>i; i++ ) {
if ( changfa[i].selected ) {
//処理コード
}
}

「JavaScript入門」setInterval()メソッドの使い方

JSコード
<script type=”text/javascript”>
setInterval(“autoBackup()”, 1000000);
//自動バックアップ
function autoBackup() {
//処理コード
}
</script>

「JavaScript入門」htmlエスケープ処理コード

JSコード
function escapeHtmlTag(str) {
if(str == null){
return ”;
}
return str.replace(/&/g,’&amp;’).replace(/</g,’&lt;’).replace(/>/g,’&gt;’).replace(/’/g,’&#x27;’).replace(/”/g,’&quot;’).replace(/`/g,’&#x60;’);
}

「JavaScript入門」delete演算子の使い方

1.オブジェクトのプロパティを削除
var ttObj = {};
ttObj.t = “this is a test”;
delete ttObj.t;

2.暗黙的に定義される変数とユーザ定義のプロパティを削除
i = 10;
tObj = {
a: 4,
xxxx
};
delete i; // true
delete tObj.a; // true
delete tObj; // true

3.配列の要素の削除
var ssArr = [“element1″,”element2″,”element3″,”element4″,”elment5”];
delete ssArr[2];

「Javascript入門」正規表現でメールアドレスをチェックするコード

JSコード
var cft = “xxxx”;
var op = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;

if (op.test(cft)) {
alert(“正しいメールアドレスです”);
} else {
alert(“間違ったメールアドレスです”);
}

「jquery入門」ラジオボタン、セレクトボックスとチェックボックスの値を取得する

1.ラジオボタン
<form id=”ddFrm”>
<input type=”radio” name=”rdo_cft” value=”tokyo” />
<input type=”radio” name=”rdo_cft” value=”oosaka” checked />
<input type=”radio” name=”rdo_cft” value=”kanagawa” />
</form>
var val = $(‘#ddFrm [name=rdo_cft]:checked’).val();

2.セレクトボックス
<form id=”ddFrm”>
<select name=”selInfo” size=”3″ multiple>
<option value=”1″>tokyo</option>
<option value=”2″ selected>oosaka</option>
<option value=”3″ selected>kanagawa</option>
</select>
</form>
var val = $(‘#ddFrm [name=selInfo]’).val();

3.チェックボックス
<form id=”ddFrm”>
<input type=”checkbox” name=”chkInfo” value=”11″ />
<input type=”checkbox” name=”chkInfo” value=”22″ checked />
<input type=”checkbox” name=”chkInfo” value=”33″ checked />
</form>
var $checked = $(‘#ddFrm [name=chkInfo]:checked’);
var valLst = $checked.map(function(index, el) {
return $(this).val(); });

「jQuery入門」addClass()とremoveClass()でCSSのクラスを追加、削除するサンプル

1.CSSコード
<style>
.cft{
//some code
}
.cssDemo1{
background-color:xxx;
}
.cssDemo2{
background-color:xxx;
}
.cssDemo3{
background-color:xxx
}
</style>
<script>

2.JSコード
$(function() {

$(“#btn1”).click(function() {
$(“.cft”).addClass(‘cssDemo1’);
});

$(“#btn2”).click(function() {
$(“.cft”).addClass(‘cssDemo2 cssDemo3’);
});
$(“#btn3”).click(function() {
$(“.cft”).removeClass(‘cssDemo1 cssDemo2 cssDemo3’);
});
});
</script>

3.htmlコード
<div class=”cft”>テストデータ 12345e</div>
<input type=”button” id=”btn1″ value=”ボタン1″ /><br/>
<input type=”button” id=”btn2″ value=”ボタン2″ /><br/>
<input type=”button” id=”btn3″ value=”ボタン3″ /><br/>

「jQuery入門」focus()、blur()、on() の使い方

1.focus()
$(“input”).focus(function(){
$(this).css(“background-color”, “#cccccc”);
});

2.blur()
$(“input”).blur(function(){
$(this).css(“background-color”, “#ffffff”);
});

3.on()
$(“p”).on(“click”, function(){
$(this).hide();
});

4.$(“p”).on({
mouseenter: function(){
$(this).css(“background-color”, “lightgray”);
},
mouseleave: function(){
$(this).css(“background-color”, “lightblue”);
},
click: function(){
$(this).css(“background-color”, “yellow”);
}
});

1 / 3212345...102030...最後 »