Category Archives: JavaScript

jQuery入門–remove()の使い方

コード下記
<!DOCTYPE html>
<html>
<head>
<script src=”http://xxx/jquery/1.10.2/jquery.min.js”>
</script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div_remove”).remove();
});
});
</script>
</head>
<body>

<div id=”div_remove” style=”height:50px;width:260px;border:1px solid black;background-color:yellow;”>

This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>

</div>
<br>
<button>Remove div element</button>

</body>
</html>

JavaScriptを使ってクライアントのOSを判定するコード

参考コード:
var sUserAgent
function checkOSType() {
sUserAgent= navigator.userAgent;
var isWin = (navigator.platform == “Win32”)
|| (navigator.platform == “Windows”);
var isMac = (navigator.platform == “Mac68K”)
|| (navigator.platform == “MacPPC”)
|| (navigator.platform == “Macintosh”)
|| (navigator.platform == “MacIntel”);
var isiPhon = (navigator.platform==”iPhone”
|| navigator.platform==”Iphone”
|| navigator.platform==”IPhone”
|| navigator.platform==”iphone”);
if (isMac)
return “Mac”;
var isUnix = (navigator.platform == “X11”) && !isWin && !isMac;
if (isUnix)
return “Unix”;
if (isiPhon)
return “iPhone”;

var isLinux = (String(navigator.platform).indexOf(“Linux”) > -1);

var bIsAndroid = sUserAgent.toLowerCase().match(/android/i) == “android”;
if (isLinux) {
if (bIsAndroid)
return “Android”;
else
return “Linux”;
}
if (isWin) {
var isWin2K = sUserAgent.indexOf(“Windows NT 5.0”) > -1
|| sUserAgent.indexOf(“Windows 2000”) > -1;
if (isWin2K)
return “Win2000”;
var isWinXP = sUserAgent.indexOf(“Windows NT 5.1”) > -1
|| sUserAgent.indexOf(“Windows XP”) > -1;
if (isWinXP)
return “WinXP”;
var isWin2003 = sUserAgent.indexOf(“Windows NT 5.2”) > -1
|| sUserAgent.indexOf(“Windows 2003”) > -1;
if (isWin2003)
return “Win2003”;
var isWinVista = sUserAgent.indexOf(“Windows NT 6.0”) > -1
|| sUserAgent.indexOf(“Windows Vista”) > -1;
if (isWinVista)
return “WinVista”;
var isWin7 = sUserAgent.indexOf(“Windows NT 6.1”) > -1
|| sUserAgent.indexOf(“Windows 7”) > -1;
if (isWin7)
return “Win7”;
}
return “other”;
}
document.writeln(“プラットフォーム:” + checkOSType()+” </br>sUserAgent:”+sUserAgent
+” </br>navigator.platform:”+navigator.platform );

jQueryで正規表現式を利用してメールをチェックするサンプル

1.メールの正規表現式
var patterncft = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);

2.jQuery処理
<script type=”text/javascript”>
$(document).ready(function() {
$(‘.error’).hide();
$(‘.submit’).click(function(event){
var email=$(‘.email’).val();
if(valid_email(email)) {
$(‘.error’).hide();
} else {
$(‘.error’).show();
event.preventDefault();
}
});
});

function valid_email(email) {
var patterncft = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
return patterncft.test(email);
}

</script>

3.htmlコード
<form id=”register” method=”post” action=””>
<div>
<span>メールアドレス:</span>
<input type=”text” class=”email” name=”email” />
<span class=”error”>メールアドレスは間違えます</span>
<input type=”submit” value=”提出” class=”submit” />
</div>
</form>

「JavaScript入門」関数の書き方

JSコード
function test() {
console.log(‘12345’);
}

test.value = 6;
test.show = function() {
console.log(this.value);
};

test(); // 12345
test.show(); // 16

JavaScript開発でテキストエリア(textarea)の文字数制限(maxlength)の処理方法

コード下記
var MaxLenCheck = function(){
var stmaxLen = 2048;
this.doKeyPress = function(element, event){
var maxLength = element.getAttribute(“maxLength”);
maxLength = maxLength || stmaxLen;
if (maxLength !== “”) {
if (element.value.length >= maxLength) {
if (window.event) {
window.event.returnValue = null;
}
else {
return false;
}
}
}
this.doOtherThing();
};
/**
* 貼り付け処理
*/
this.doPaste = function(element, event){
var maxLength = element.getAttribute(“maxLength”);
maxLength = maxLength || stmaxLen;
if (maxLength !== “”) {
var cfmt = window.clipboardData.getData(“Text”);
var subStr = cfmt.substr(0, maxLength – element.value.length);
window.clipboardData.setData(“Text”, subStr);
}
this.doOtherThing();
};
this.doOtherThing = function(){
// Client Programer implment this function
};
}

Jquery開発で全角を半角に、半角を全角に変換するサンプルコード

コード下記:
(function($){
$.extend({
//全角を半角に変換
quanToBan : function(str){
var zenkaku=””;
var charCode;
for (var i = 0; i < str.length; i++) {
charCode = str.charCodeAt(i);
//スペース変換
if (charCode==12288) {
zenkaku+= String.fromCharCode(charCode-12256);
continue;
}

if (charCode > 65280 && charCode <65375)
zenkaku+= String.fromCharCode(charCode – 65248);
else zenkaku+= String.fromCharCode(charCode);
}

return zenkaku;
},

//半角を全角に変換
bantoQuan: function(str){
var hankaku = “”;
var charCode;
for(var i=0;i<str.length;i++) {
charCode = str.charCodeAt(i);
if(charCode == 32) {
hankaku= hankaku+ String.fromCharCode(12288);
}

if(charCode > 33 && charCode < 127) {
hankaku=hankaku+String.fromCharCode(charCode + 65248);
} else {
hankaku=hankaku+String.fromCharCode(charCode);
}
}

return hankaku;
}
});
}(jQuery))

JavaScriptでhtml特殊符号を変換するサンプルコード

コード下記
var regSpeChars = [ “^”,”$”,”(“,”)”,”[“,”]”,”{“,”}”,”.”,”?”,”+”,”*”,”|”,”\\”];
var speCharsMap = {“&”: “&amp;”,
“#”:”&#35″,
“>” : “&gt;”,
“<” : “&lt;”,
“‘”:”&lsquo”,
“’”:”&rsquo”,
“,”:”&sbquo”,
“‘”:”&#39″,
“\\”:”&#92;”,
“\””:”&ldquo;”,
“!”:”&#33″,
“%”:”&#37″,
“~”:”&#126″,
“@”:”&#64″,
“=”:”&#61″,
“(“:”&#40”,
“)”:”&#41″,
“{“:”&#123”,
“}”:”&#125″,
“[“:”&#91;”,
“]”:”&#93;”,
“$”:”&#36″,
“?”:”&#63″,
“*”:”&#42;”,
“|”:”&#124;”,
“^”:”&#94;”,
“.”:”&#46;”,
“+”:”&#43;”,
“/”:”&#47;”,
” “:”&nbsp;”
};
function changeElementSpecialChars(elementId){
var element = document.getElementById(elementId);
var value = changeSpecialChars(element.value);
element.value = value;
}
function changeSpecialChars(value) {
if(value==null || value == “”)
return value;
for(var key in speCharsMap){
var regex = keyToRegex(key);
value = value.replace(regex,speCharsMap[key]);
}
return value;
}

function keyToRegex(key){
if(isRegexSpecialChar(key)){
key=”\\”+key;
}
var regex = new RegExp(key,”g”);
return regex;
}

function isRegexSpecialChar(character){
var length = regSpeChars.length;
var ch;
for(var index = 0; index < length; index++ ) {
ch = regSpeChars[index];
if(character == ch) return true;
}
return false;
}

「jQuery入門」$(“input”).trigger()のサンプル

JSコード
$(document).ready(function(){
$(“input”).select(function(){
$(“input”).after(“選択された”);
});
var ff = jQuery.Event(“select”);
$(“button”).click(function(){
$(“input”).trigger(ff);
});
});
</script>
</head>
<body>
<input type=”text” name=”FirstName” value=”Hello World” />
<br />
<button>inut select event</button>

JavaScriptで数値であるかのチェツク方法

コード:

function checkInt(s){
var flag=true;
var Numstr=”0123456789″;
for(var i=0;i<s.length;i++){
var chr=s.charAt(i);
if(NumStr.indexOf(chr,0)==-1)
{
flag=false;
break;
}
}
return flag;
}

JavaScriptにオブジェクトを文字列に変換するコード

サンプルコード:
function obj2string(o){
var r=[];
if(typeof o==”string”){
return “\””+o.replace(/([\’\”\\])/g,”\\$1″).replace(/(\n)/g,”\\n”).replace(/(\r)/g,”\\r”).replace(/(\t)/g,”\\t”)+”\””;
}
if(typeof o==”object”){
if(!o.sort){
for(var i in o){
r.push(i+”:”+obj2string(o[i]));
}
if(!!document.all&&!/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)){
r.push(“tooString:”+o.toString.toString());
}
r=”{“+r.join()+”}”;
}else{
for(var i=0;i<o.length;i++){
r.push(obj2string(o[i]))
}
r=”[“+r.join()+”]”;
}
return r;
}
return o.toString();
}