Wonderful! WordPress

良く使いそうなのに忘れやすい些細なこと

Page No.2

《 javascript 》

getElement 類の入力を楽ちんにする関数たち

// id 用
function Gi( name ) {
    let ans = null;

    ans = document.getElementById( name );
    return ans;
}

// class 用
function Gc( name ) {
    let ans = null;

    ans = document.getElementsByClassName( name );
    return ans;
}

// tag 用
function Gt( name ) {
    let ans = null;

    ans = document.getElementsByTagName( name );
    return ans;
}

// 要素の attribute を得る、2番目の引数でid:0,class:1,tag:2 を指定
function Ga( name = null, flg = 0, attr ) {
	if ( name ) {		
		let ans = null;

		if ( attr ) {
			switch ( flg ) {
				case 0:// id
					ans = document.getElementById( name ).getAttribute( attr );
					break;
				case 1:// class
					ans = document.getElementsByClassName( name ).getAttribute( attr );
					break;
				default:// name
					ans = document.getElementsByTagName( name ).getAttribute( attr );
			}
		}
		return ans;
	}
}

// 複数のスタイル設定を設定する
// target は id-name, propはスタイル設定のproperty:value のオブジェクト
function SSi( target, prop ) {
	const tar = document.getElementById( target );

	for ( const key in prop ) {
		if ( prop.hasOwnProperty( key ) ) {
			tar.style[ key ] = prop[ key ];
		}
	}
}

// target に id-name、prop に 取得するスタイルの property name を指定してその値を取得
function GSi( target, prop ) {
	const tar = document.getElementById( target ),
		tarstyle = window.getComputedStyle( tar ),
		tarval = tarstyle[ prop ];

	return tarval;
}

JavaScript
CopyExpand

オブジェクトの中身をのぞき見

function showobj( obj ) {
	const target = obj;

	for ( const i in target ) {
		if ( target.hasOwnProperty( i ) ) {
			console.log( i + ' = ' + target[ i ] );
		}
	}
}
JavaScript
CopyExpand

class属性のイベント登録


window.onload = function() {
	const classlist = document.getElementsByClassName( 'gopage' );
	for ( let i = 0, clist_len = classlist.length; i < clist_len; ++i ) {
		classlist[ i ].onclick = function() { openselect(); }
	}
}
JavaScript
CopyExpand

php からの返り値のない場合の Ajax

function ajax_noret( url, str, ope ) {
	if ( url ) {
		const operation = 'undefined' === typeof ope ? 'POST' : ope,
			tarurl = 'wp' === url ? 'https://*****/wp-admin/admin-ajax.php' : url,
			tmpstr = 'undefined' === typeof str ? null : str,
			strsend = Array.isArray( tmpstr ) ? tmpstr.join( '&' ) : tmpstr;

		var req=new XMLHttpRequest();

		req.open( operation, tarurl, true );
		if ( 'POST' === operation ) {
			req.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
		}
		req.send( strsend );	
	} else {
		return false;
	}
}
JavaScript
CopyExpand

php から返り値を受け取って callback 関数に処理させる Ajax

function ajax_callback( url, str, callback, ope ) {

	if ( url ) {
		const operation = 'undefined' === typeof ope ? 'POST' : ope,
			tarurl = 'wp' === url ? 'https://*****/wp-admin/admin-ajax.php' : url,
			tmpstr = 'undefined' === typeof str ? null : str,
			strsend = Array.isArray( tmpstr ) ? tmpstr.join( '&' ) : tmpstr;

		var req=new XMLHttpRequest();

		req.onreadystatechange = function() {
			let result = '';
	
			if (req.readyState == 4) { // 通信の完了時
				if (req.status == 200) { // 通信の成功時
					result = req.responseText;

					callback( result );
				
				} else {
					console.log( 'error : disabled send' );
				}
			}
		}

		req.open( operation, tarurl, true );
		if ( 'POST' === operation ) {
			req.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
		}
		req.send( strsend );

	} else {
		console.log( 'error : no data url' );
	}
}
JavaScript
CopyExpand

オブジェクトを多段の階層まで参照コピーならぬ独立別体コピーを作る関数。幾つかテストした分には正常に動作しているものの、なにかしらバグのある可能性あり

function clone_deep_obj( obj ) {

    if ( obj && ( Array === obj.constructor || Object === obj.constructor ) ) { 
        const okeys = Object.keys( obj ),
            okeys_len = okeys.length;

        let ans;

        if ( Array.isArray( obj ) ) {
            ans = [];

            for ( let i = 0; i < okeys_len; ++i ) {

                if ( obj[ okeys[ i ] ] && ( Array === obj[ okeys[ i ] ].constructor || Object === obj[ okeys[ i ] ].constructor ) ) {
                    ans.push( clone_deep_obj( obj[ okeys[ i ] ] ) );
                } else {
                    ans.push( obj[ okeys[ i ] ] );
                }
            }
        } else {
            ans = new Object();

            for ( let i = 0; i < okeys_len; ++i ) {

                if ( obj[ okeys[ i ] ] && ( Array === obj[ okeys[ i ] ].constructor || Object === obj[ okeys[ i ] ].constructor ) ) {
                    ans[ okeys[ i ] ] = clone_deep_obj( obj[ okeys[ i ] ] );
                } else {
                    ans[ okeys[ i ] ] = obj[ okeys[ i ] ];
                }
            }
        }
        return ans;
	} else {
        console.log( 'Target is not a Object or a Array.' );
		return false;
	}
}
JavaScript
CopyExpand

超ーっ!基本的なこと
JavaScript における真偽値の如何。特に php との相違に注意

<script type="text/javascript">

	const ter = [ 0, '0', '', null, [] ];

	let posthtml = '';

	for ( let i = 0, ter_len = ter.length; i < ter_len; ++i ) {
		if ( '' == ter[ i ] ) {
			posthtml += '<p>' + ter[ i ] + ' : true</p>\n';
		} else {
			posthtml += '<p>' + ter[ i ] + ' : false</p>\n';
		}
	}

        document.getElementById( 'testanser' ).innerHTML = posthtml;
</script>
JavaScript
CopyExpand
if ( ter[ i ] )
  • 0 => false
  • '0' => true ・・・ ※注意! php だとこれは false
  • '' => false
  • null => false
  • [] => true ・・・ ※注意! php だとこれも false
if ( '' == ter[ i ] )
  • 0 => true
  • '0' => false
  • '' => true
  • null => false ・・・ ※ php だと true
  • [] => true ・・・ ※ php だと false
if ( '' === ter[ i ] ) ・・・これは当然の事で忘れようがない・・・
  • 0 => false
  • '0' => false
  • '' => true
  • null => false
  • [] => false
if ( true == ter[ i ] )
  • 0 => false / 1 なら true
  • '0' => false / '1' なら true
  • '' => false
  • null => false
  • [] => false
if ( true === ter[ i ] ) ※型が違えば false なので全て false なのは当然のこと
  • 0 => false
  • '0' => false
  • '' => false
  • null => false
  • [] => false
if ( ter[ i ].length ) ・・・ちなみにこんなこともしてみると・・・
  • 0 => false : length => undefined
  • '0' => true : length => 1
  • '' => false : length => 0
  • null => error : can't access property "length", ter[i] is null
  • [] => false length => 0

キー操作

window.addEventListener( 'keydown', function( e ) {

	const key_code = e.key;

	switch ( key_code ) {
		case 'Enter':// enter key
			return false;
		case 'A':// a + shift key

			break;
		case 'b':

			break;
		case '+':// テンキー+
			
			break;
		case '*':// テンキー*
			
	}
});

JavaScript
CopyExpand

cookie をセット& ゲット

function setCookie( name, value, expires, domain, path, secure ) {
	var c = '';
	c += name + '=' + encodeURIComponent( value );

	// expires にはcookieを保存させる日数を指定する(30日間なら30)
	// setDateは指定された数字をその月の日づけとして設定する(24なら24日)。その月の日付の範囲外の値の場合はその数に応じて月を設定する(0なら前月の月末日、その月が31までの場合32なら翌月の初日)
	// getDateは地方時に基づき、指定された日付の「日」を表します。1 から 31 までの間の整数値。
	if ( expires ) {
		var exp = new Date();
		exp.setDate( exp.getDate() + expires );
		c += '; expires=' + exp.toGMTString();
	}

	if ( domain ) { c += "; domain=" + domain; }
	if ( path ) { c += "; path=" + path; }
	if ( secure ) { c += "; secure"; }

	document.cookie = c;
}

Ex. 	setCookie( 'mn_size', 'mn_wide', 90 );

function retCookie( name ){
	var cookies = document.cookie,
		retval = null;

	if ( cookies ) {
		var c_ary = cookies.split( ';' ), 
			c_val = null;

		for ( var i = 0, len = c_ary.length; i < len; i++ ) {
			if ( -1 !== c_ary[ i ].indexOf( name ) ) {
				c_val = c_ary[ i ].split( '=' );
				break;
			}
		}
		if ( null != c_val ) {
			if ( name === c_val[0] ) {
				retval = c_val[1];
			}
		}
	}

	return retval;
}
JavaScript
CopyExpand

javascript からPOST送信

function execPost( action, data ) {
	 // フォームの生成
	 var form = document.createElement( 'form' );
	 form.setAttribute( 'action', action );
	 form.setAttribute( 'method', 'post' );
	 form.setAttribute( 'target', '_blank' );
	 form.style.display = 'none';
	 document.body.appendChild( form );

	 // パラメタの設定
	 if ( data !== undefined ) {
		  for ( var paramName in data ) {
			   var input = document.createElement( 'input' );
			   input.setAttribute( 'type', 'hidden' );
			   input.setAttribute( 'name', paramName );
			   input.setAttribute( 'value', data[ paramName ] );
			   form.appendChild( input );
		  }
	 }
	 // submit
	 form.submit();
}

execPost( './regi_post.php', { 'mytoken': mytoken } );
JavaScript
CopyExpand

コンテンツ中でハイライトされ選択状態の文字列を取得
*他の要素のクリックイベントなどでこの関数を呼んでも、クリックした時点でフォーカスが移動し、文字列の選択がはずれてしまうので無意味。

function showselect(){
	 var selectword = window.getSelection();
	 alert( selectword );
}
JavaScript
CopyExpand

親要素の自分を含む内容を取得

window.onload = function() {
	document.getElementById( 'target' ).onclick = function() {
		var pobj = this.parentNode;
		var pobjtext = pobj.textContent;
		alert( pobjtext );
	}
}
JavaScript
CopyExpand

タッチパネル検出用コード(jQueryでもこのまま使用可)

//タッチパネル検出用コード
var istouch = false;

//ie以外
istouch = 'ontouchend' in document;

//ie用
var html_el = document.querySelector( 'html' ),
	entobj = 'mouse',
	evflg = 0;

html_el.addEventListener( 'MSPointerDown', function( e ) {
	entobj = e.pointerType;
	if ( 0 == evflg && 'mouse' != entobj ){
		evflg = 1;
		istouch = true;
	}
}, false );
JavaScript
CopyExpand

ウィンドウサイズ変更時のイベント

var changesize = 1,
	narrow = 0,
	resizeID = false;

window.addEventListener( 'resize', function( event ) {
	if ( resizeID !== false ) {
		clearTimeout( resizeID );
	}
	resizeID = setTimeout( function() {

		if ( window.innerHeight > window.innerWidth ) {
			changesize = 1;//縦
		} else {
			changesize = 0;//横
		}

		if( window.innerWidth < 771 ) {
			narrow = 1;//narrow
		} else {
			narrow = 0;//wide
		}
	}, 200);
});

JavaScript
CopyExpand

どちらかのサイトから頂いてきたランダムな文字列を生成する関数

function make_rand_str() {
	// 生成する文字列に含める文字セット
	var c = 'abcdefghijklmnopqrstuvwxyz0123456789',
		l = 12,// 生成する文字列の文字数
		cl = c.length,
		r = '';

	for ( var i = 0; i < l; i++ ) {
		r += c[ Math.floor( Math.random() * cl ) ];
	}
	return r;
}
JavaScript
CopyExpand

ページ最上部までのスクロールで最後に少しスルスルとスクロールさせる

function uptop(){
	// ウィンドウ名.scrollTo( 水平座標, 垂直座標 )
	window.scrollTo( 0, 250 ) ;
	var tmphdrtop = 250;
	var ttint = setInterval( function() {
		tmphdrtop -= 10;
		if ( tmphdrtop <= 0 ) {
			clearInterval( ttint );
		}
		window.scrollTo( 0, tmphdrtop ) ;
	},10);
}
JavaScript
CopyExpand

例えば”post”というクラスが複数あり、ページの現在表示されている部分の次なる”post”へスルスルとスクロール

var postelems = document.getElementsByClassName( 'post' );

function scrolldown(){
	var doc = document,
		scrollh = window.scrollTop,
		screenhei = window.innerHeight,
		bodyh = Math.max.apply( null, [ doc.body.clientHeight, doc.body.scrollHeight, doc.documentElement.scrollHeight, doc.documentElement.clientHeight ] ),
		scrollh = doc.documentElement.scrollTop||doc.body.scrollTop,
		postelemslen,
		tmppost,
		tmptoppos,
		tmptop,
		nextpos = 0,
		stimerid,
		grow = 10;

	if ( null != postelems ) {
		postelemslen = postelems.length;

		for ( var i = 0; i < postelemslen; i++ ) {
			tmppost = postelems.item( i );
			tmptoppos = tmppost.getBoundingClientRect();
			tmptop = tmptoppos.top;
			if ( tmptop > 0 ) {
				if ( tmptop < screenhei ) {
					if ( tmptop > ( screenhei / 2 ) ) {
						nextpost = i;
					} else {
						nextpost = i + 1;
					}
					break;
				} else {
					nextpost = i;
					break;
				}
			}
		}

		if (nextpost < postelemslen ) {
			tmppost = postelems.item( nextpost );
			tmptoppos = tmppost.getBoundingClientRect();
			tmptop = scrollh + tmptoppos.top - 100;
		} else {
			tmptop = bodyh;
		}

		stimerid = setInterval( function() {
			if ( scrollh < tmptop ) {
				if ( grow < 80 ) {
					grow += 3;
				}
				scrollh += grow;
				window.scrollTo( 0, scrollh );
			} else {
				clearInterval( stimerid );
			}
		}, 50 );
	}
}
JavaScript
CopyExpand

《 jQuery 》

キー操作

jQuery(function() {
	jQuery( window ).keydown(function( e ) {
		var key_code = e.keyCode,
			shift_key = e.shiftKey;

		if ( 67 == key_code && true == shift_key ) {
			alert( 'shift key + c' );
		} else if ( 82 == key_code && true == shift_key ) {
			alert( 'shift key + r' );
		}
	});
});
JavaScript
CopyExpand

アンカーまでするするとスクロール
(これはネットのどこかでもらってきたもの、どこだかわからなくなってしまいました。)

jQuery( "a[href^='#']" ).click( function() {
	var speed = 500;
	var href = jQuery( this ).attr( 'href' );
	var target = jQuery( href == '#' || href == '' ? 'html' : href );
	var position = target.offset().top;
	jQuery( 'html,body' ).animate( { scrollTop:position }, speed, 'swing' );
	return false;
});
JavaScript
CopyExpand

フェイドインとアニメーションの同時進行
順番のキューに加えさせない

$( function() {
	var showhelpflg = false;

	function displayshowhelp() {
		if ( false === showhelpflg ) {
			showhelpflg = true;
			$( '#showhelp' ).fadeIn( 'slow').animate( {
					'top': '100px',
					'left': '0px'
				},{
					duration: 800,
					queue: false //←順番のqueueに加えない
				});
		} else {
			$( '#showhelp' ).fadeOut( 'slow' ).animate( {
					'top': '150px',
					'left': '100px'
				},{
					duration: 800,
					queue: false 
				});
			showhelpflg = false;
		}
	}
} );
JavaScript
CopyExpand

Sanbanse Funabashi
2010.10.24 sunrise

Top

スクロールさせるか画像をクリックすると元に戻ります。