目次

参考サイト

ZIPのファイル内参照

おまじない

以下をHEADタグか、BODYタグ内に記述する。

複数に分けて書く事も可能。

<script type="text/javascript">
<!--
	処理内容
// -->
</script>

HEADタグ内に書いた方がいいかもって場合

関数などの定義。

BODYタグ内に書いた方がいいかもって場合

ページのロード時にwebを動的に作成する場合の処理。

※ ぶっちゃけどっちでもいい

コメント

/* この間がコメントアウト */

// ここから一行がコメントアウト

HTMLの書き換え

document.変換対象.変換内容 = "データ";

変換対象の指定

IDから指定

document.getElementById('対象のID').変換内容 = "データ";

<div id='対象のID'>変換対象</div>

nameから指定

document.F1.T1.変換内容 = "データ";

<form name="F1" action="#">
	<!-- フォームの内容を変換 -->
	<input type="text" name="T1">
</form>

データを書き換える

innerHTML

  • W3C DOM 仕様にない。似たような雰囲気のIE独自仕様にinnerTextというプロパティもある。
  • このプロパティには公式な仕様が無いため、ブラウザによって実装が異なる。
  • どちらかというと遅いらしいが、なんともいえない。
document.getElementById('対象のID').innerHTML = "データ1";

<div id='対象のID'>入れ替え対象</div>

ブラウザによる差異についてはココのサイトみればおk。

firstChild.nodeValue

  • W3C DOM 仕様にある。
  • ブラウザが違っても動作はだいたい同じ。
  • どちらかというと速いらしいが、なんともいえない。
document.getElementById('対象のID').firstChild.nodeValue = "データ2";

<div id='対象のID'>入れ替え対象</div>

value

BUTTONタグ、INPUTタグ、OPTIONタグ、PARAMタグのみで使用可能

document.frm.txt.value = new Date().toLocaleString();

<form name="frm" action="#">
	<input type="text" name="txt" value="変換対象">
</form>

ソース置き場

無名関数内で自身を呼び出す

(function(){
	
	/* 処理内容 */
	
	// 1秒毎に処理を繰り返す
	setTimeout(arguments.callee, 1000);
})();

無名関数内で自身の関数を指すとき arguments.callee

ページャー

引数からページャーのHTMLを返す関数

サンプルはMyChannel見ればおk

スタイル

.pager{
	font-family:Arial, sans-serif;
	font-size:0.9em;
	text-decoration:none;
	border-style:solid;
	border-width:1px;
	border-color:#0099ff;
	color:#0066ff;
	padding:3px;
}
.nowpage{
	font-family:Arial, sans-serif;
	font-size:0.9em;
	color:#0066ff;
	padding:3px;
}

プログラム

/*
page    : 現在のページ
max     : コンテンツ数
maxline : 1ページあたりのコンテンツの表示可能
maxlist : ページ番号の最大表示可能数(maxlist*2+1がページ番号の最大表示可能数)
link    : 現在のURL
*/
function pager(page, max, maxline, maxlist, link){
	
	// 初期設定
	
	var num='';
	var amendment='';
	
	// 現在のページ修正( 初期ページは1ページ)
	// 文字を数値に変換
	if(page==0) page=1;
	else page=parseFloat(page);
	
	// 最大ページ数(投稿数から表示可能数で割って、少数切り上げて代入)
	maxpage = Math.ceil(max / maxline);
	
	// 最大ページ数の最小値を1に設定
	if(maxpage<=0){
		maxpage=1;
	}
	
	// ページ番号の最小境界線
	bordermin = maxlist;
	
	// ページ番号の最大境界線
	bordermax = maxpage - maxlist + 1;
	
	// 前のページ
	back=page - 1;
	
	// 次のページ
	next=page + 1;
	
	// ページ名の設定 (例、page=10、p=10)
	if(link.match(/\?/)) link2="&page=";
	else link2="?page=";
	
	// ページ修正
	if(page<0){
		// 最新記事の表示
		// 表示順が投稿順のため
		// 最新記事がTOPの場合は不要
		if(!page){
			amendment="<meta http-equiv=\"refresh\" content=\"0;URL="+link+link2+maxpage+"\">";
		// ページが1より少ないとき
		}else{
			amendment="<meta http-equiv=\"refresh\" content=\"0;URL="+link+"&page=1\">";
		}
	}else if(page>maxpage){
		amendment="<meta http-equiv=\"refresh\" content=\"0;URL="+link+link2+maxpage+"\">";
	}
	
	// 前のリスト表示
	if(page<=1){
		back1="<a href=\""+link+link2+"1\"><span class=pager>&lt;&lt;戻る</span></a>";
	}else{
		back1="<a href=\""+link+link2+back+"\"><span class=pager>&lt;&lt;戻る</span></a>";
	}
	
	// ページ番号表示
	// 最大ページ数(maxpage)がページ番号の最大表示数(maxlist*2+1)より少ない場合
	if(maxpage<(maxlist*2+1)){
		for(i=1;i<=maxpage;i++){
			if(page==i){
				num=num+"&nbsp;<a href=\""+link+link2+i+"\"><span class=nowpage>"+i+"</span></a>";
			}else{
				num=num+"&nbsp;<a href=\""+link+link2+i+"\"><span class=pager>"+i+"</span></a>";
			}
		}
	// 最大ページ数(maxpage)がページ番号の最大表示数(maxlist*2+1)以上場合
	}else{
		// 最小境界線内
		if(page<=bordermin){
			for(i=1;i<=(maxlist+maxlist+1);i++){
				if(page==i){
					num=num+"&nbsp;<a href=\""+link+link2+i+"\"><span class=nowpage>"+i+"</span></a>";
				}else{
					num=num+"&nbsp;<a href=\""+link+link2+i+"\"><span class=pager>"+i+"</span></a>";
				}
			}
			num=num+"&nbsp;...&nbsp;<a href=\""+link+link2+maxpage+"\"><span class=pager>"+maxpage+"</span></a>";
		}
		// 安全圏
		if(page>bordermin && page<bordermax){
			if((page-maxlist)!=1) num=num+"&nbsp;<a href=\""+link+link2+"1"+"\"><span class=pager>1</span></a>&nbsp;...";
			for(i=(page-maxlist);i<=(page+maxlist);i++){
				if(page==i){
					num=num+"&nbsp;<a href=\""+link+link2+i+"\"><span class=nowpage>"+i+"</span></a>";
				}else{
					num=num+"&nbsp;<a href=\""+link+link2+i+"\"><span class=pager>"+i+"</span></a>";
				}
			}
			if((page+maxlist)!=maxpage) num=num+"&nbsp;...&nbsp;<a href=\""+link+link2+maxpage+"\"><span class=pager>"+maxpage+"</span></a>";
		}
		// 最大境界線内
		if(page>=bordermax){
			num=num+"&nbsp;<a href=\""+link+link2+"1\"><span class=pager>1</span></a>&nbsp;...";
			for(i=(maxpage-maxlist-maxlist);i<=maxpage;i++){
				if(page==i){
					num=num+"&nbsp;<a href=\""+link+link2+i+"\"><span class=nowpage>"+i+"</span></a>";
				}else{
					num=num+"&nbsp;<a href=\""+link+link2+i+"\"><span class=pager>"+i+"</span></a>";
				}
			}
		}
	}
	// 次のリスト表示
	if(page>=maxpage){
		next1="&nbsp;<a href=\""+link+link2+page+"\"><span class=pager>進む&gt;&gt;</span></a>";
	}else{
		next1="&nbsp;<a href=\""+link+link2+next+"\"><span class=pager>進む&gt;&gt;</span></a>";
	}
	state="&nbsp;"+page+"/"+maxpage+"&nbsp;Total&nbsp;:&nbsp;"+max;
	
	return amendment+back1+num+next1+state;
}

クロージャーを用いたページャー

配列の要素の開始番号と終了番号を制御し表示

// ページャー
var pgr = pager(対象の配列);
function pager(obj){
	// 配列のターゲット
	var tage = new Array();
	// ページの初期設定
	var page;
	// 1ページあたりの表示数
	var page_view;
	// 最大ページ数
	var page_max;
	// 表示開始番号
	var page_start;
	// 表示終了番号(正確には、表示終了番号+1)
	var page_end;
	// ページ数取得
	this.page = function(){
		return(page);
	}
	// ページ最大数取得
	this.max = function(){
		return(page_max);
	}
	// 配列の開始番号
	this.start = function(){
		return(page_start);
	}
	// 配列の終了番号
	this.end = function(){
		return(page_end);
	}
	// 配列数取得
	this.length = function(){
		return(tage.length);
	}
	// 配列の更新
	this.update = function(obj){
		// ターゲットの指定
		tage = obj;
		// 最大ページ数
		page_max = Math.ceil(tage.length/page_view);
	}
	// 初期設定
	this.init = function(obj){
		// ターゲットの指定
		tage = obj;
		// ページの初期設定
		page = 1;
		// 1ページあたりの表示数
		page_view = 10;
		// 最大ページ数
		page_max = Math.ceil(tage.length/page_view);
		// 表示開始番号
		page_start = 0;
		// 表示終了番号(正確には、表示終了番号+1)
		if(tage.length<page_view) page_end = tage.length;
		else page_end = page_view;
	}
	// 最初のページ
	this.first = function(){
		page = 1;
		page_start = 0;
		page_end = page_view;
		return(0);
	}
	// 最後のページ
	this.last = function(){
		page = page_max;
		page_start = (page_max * page_view) - page_view;
		page_end = tage.length;
		return(0);
	}
	// 次のページ
	this.next = function(){
		page++;
		if(page>=page_max) page = page_max;
		page_end = page * page_view;
		page_start = page_end - page_view;
		return(0);
	}
	// 前のページ
	this.back = function(){
		page--;
		if(page<1) page = 1;
		page_end = page * page_view;
		page_start = page_end - page_view;
		return(0);
	}
	// 全て表示
	this.all = function(){
		page_start = 0;
		page_end = tage.length;
		return(0);
	}
	// 表示数を指定して表示
	this.size = function(size){
		page = 1;
		page_view = size;
		page_start = 0;
		if(page_view>tage.length) page_end = tage.length;
		else page_end = page_view;
		page_max = Math.ceil(tage.length/page_view);
		//alert('next登録数::'+tage.length+'、表示数::'+page_view+'、最大ページ::'+page_max+'、現在のページ::'+page+'、表示開始番号::'+page_start+'、表示終了番号::'+page_end);
		return(0);
	}
	return this;
}

使い方

配列数100で表示数10の場合、1ページ目では、pgr.start()は0、pgr.end()は10のように戻り値が返るので、あとは表示させたいように加工するだけ。

function contents(){
	var str = "";
	for(var i=pgr.start();i<pgr.end();i++){
		//処理内容
		str = str + 配列名[i];
	}
	str = str + '<center>';
	str = str + '<img src="img/pager/first.gif" style="width:16;height:16;cursor: pointer" title="最初のページ" onclick="pgr.first();contents();\">';
	str = str + '<img src="img/pager/previous.gif" style="width:16;height:16;cursor: pointer" title="戻る" onclick="pgr.back();contents();\">';
	str = str + '<a href=\"javascript:pgr.all();javascript:contents();\" title=\"全て表示\">All</a>';
	str = str + '<img src="img/pager/next.gif" style="width:16;height:16;cursor: pointer" title="進む" onclick="pgr.next();contents();\">';
	str = str + '<img src="img/pager/last.gif" style="width:16;height:16;cursor: pointer" title="最後のページ" onclick="pgr.last();contents();\">';
	str = str + '</center>';
	document.getElementById("挿入したいID名").innerHTML = str;
}

画像リンク切れ対策

リンク切れの画像を置き換える

// リンク切れ処理
function imgErr(id){
	document.getElementById(id).src = "http://i.nuseek.com/images/template/360x318/ist2_746781_female_student.jpg";
}
<img id="ID名" src="画像のURL" onError=\"imgErr(this.getAttribute('id'))\">";

画像リンクチェック

var img = new Image();
var url = '画像リンク';
img.onload = function(){
	alert('width='+img.width+' , height='+img.height);
};
img.onerror = function(){
	alert(url+' is dead');
};
img.src = url;

スクロールが一番下にあるかチェック

オートページャーとかで利用

function checkScroll(){
	/// IE8, 7は取得不可
	
	// 垂直スクロール量を取得する
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	//alert("scrollTop:::"+scrollTop);
	
	// 表示領域の高さを取得する
	if(scrollHeight === clientHeight) {
		// Safari
		// Chorme
		var clientHeight = window.innerHeight;
	}else{
		var clientHeight = document.body.scrollHeight;
	}
	//alert("clientHeight:::"+clientHeight);
	
	// スクロールバーで隠れた領域を含むコンテンツ領域の高さを取得する
	var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
	//alert("scrollHeight:::"+scrollHeight);
	
	// コンテンツ領域の底までの残り領域
	var remain = scrollHeight - scrollTop - clientHeight;
	//alert("remain:::"+remain);
	
	if(scrollTop!=0 && remain==0) alert('ページの一番下です');
	// 一番下ではない場合、自身の関数をもう一度実行
	// チェック時間は1000で1秒
	else setTimeout(function(){checkScroll()}, 500);
}

JavasciptでPHPの$_GET[]

	function getRequest(url){
		// 引数チェック
		// 引数にlocation.searchを渡せばチェックする必要なし
		var arg = url.replace(/(^.*)(\?)(.*)/, "?$3");
		if(arg.length>1){
			var get = new Object();
			var ret = arg.substr(1).split("&");
			for(var i = 0; i < ret.length; i++) {
				var r = ret[i].split("=");
				get[r[0]] = r[1];
			}
			return get;
		}else{
			return false;
		}
	}
	var GET = getRequest(url);
	alert(GET['引数名']);

ブラウザ判別

	function BROWSER(){
		var userAgent = window.navigator.userAgent.toLowerCase();
		var appVersion = window.navigator.appVersion.toLowerCase();
		var BROWSER;
		if (userAgent.indexOf("msie") > -1) {
			if (appVersion.indexOf("msie 6.0") > -1) {
				BROWSER = "IE6";
			}
			else if (appVersion.indexOf("msie 7.0") > -1) {
				BROWSER = "IE7";
			}
			else if (appVersion.indexOf("msie 8.0") > -1) {
				BROWSER = "IE8";
			}
			else if (appVersion.indexOf("msie 9.0") > -1) {
				BROWSER = "IE9";
			}
			else {
				BROWSER = "IE?";
			}
		}
		else if (userAgent.indexOf("firefox") > -1) {
			BROWSER = "Firefox";
		}
		else if (userAgent.indexOf("opera") > -1) {
			BROWSER = "Opera";
		}
		else if (userAgent.indexOf("chrome") > -1) {
			BROWSER = "Google Chrome";
		}
		else if (userAgent.indexOf("safari") > -1) {
			BROWSER = "Safari";
		}
		else {
			BROWSER = "Unknown";
		}
		return(BROWSER);
	}

OS判別

	function OS(){
		var OS, ua = navigator.userAgent;
		// Windows 7
		if (ua.match(/Win(dows )?NT 6\.1/)) {
			OS = "Windows 7";
		}
		// Windows Vista
		else if (ua.match(/Win(dows )?NT 6\.0/)) {
			OS = "Windows Vista";
		}
		// Windows Server 2003
		else if (ua.match(/Win(dows )?NT 5\.2/)) {
			OS = "Windows Server 2003";
		}
		// Windows XP
		else if (ua.match(/Win(dows )?(NT 5\.1|XP)/)) {
			OS = "Windows XP";
		}
		// Windows ME
		else if (ua.match(/Win(dows)? (9x 4\.90|ME)/)){
			OS = "Windows ME";
		}
		// Windows 2000
		else if (ua.match(/Win(dows )?(NT 5\.0|2000)/)){
			OS = "Windows 2000";
		}
		// Windows 98
		else if (ua.match(/Win(dows )?98/)){
			OS = "Windows 98";
		}
		// Windows NT
		else if (ua.match(/Win(dows )?NT( 4\.0)?/)){
			OS = "Windows NT";
		}
		// Windows 95
		else if (ua.match(/Win(dows )?95/)){
			OS = "Windows 95";
		}
		// Apple
		else if (ua.match(/Mac|PPC/)){
			// iPhone
			if (ua.match(/iPhone/)){
				OS = "iPhone";
			}
			// iPad
			else if (ua.match(/iPad/)){
				OS = "iPad";
			}
			// iPod
			else if (ua.match(/iPod/)){
				OS = "iPod";
			}
			// Macintosh
			else{
				OS = "Mac OS";
			}
		}
		// Linux
		else if (ua.match(/Linux/)){
			OS = "Linux";
		}
		// BSD系
		else if (ua.match(/(Free|Net|Open)BSD/)){
			OS = RegExp.$1 + "BSD";
		}
		// Solaris
		else if (ua.match(/SunOS/)){
			OS = "Solaris";
		}
		// 上記以外のOS
		else{
			OS = "N/A";
		}
		return(OS);
	}

JavascriptでPOST/GET

http://webos-goodies.jp/archives/50548720.html

	// 初期設定
	// HttpRequest オブジェクトを作成する1
	function createHttpRequest1(){
		if(window.addEventListener){
			/* Firefox 用 */
			return new XMLHttpRequest();
		}else{
			/* IE 用 */
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	
	// HttpRequest オブジェクトを作成する2
	function createHttpRequest2(){
		var httpRequest = false;
		// ブラウザ判別
		if(typeof ActiveXObject != "undefined"){
			try {
				httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e){
				httpRequest = false;
			}
		}
		// その他のブラウザ
		if(!httpRequest && typeof XMLHttpRequest != "undefined"){
			httpRequest = new XMLHttpRequest();
		}
		return httpRequest;
	}
	
	// HttpRequest オブジェクトを作成する3
	function createHttpRequest3(){
		var httpRequest = false;
		if(window.XMLHttpRequest){
			// Firefox, Opera など
			httpRequest = new XMLHttpRequest();
			httpRequest.overrideMimeType('text/xml');
		}else if(window.ActiveXObject){
			// IE
			try {
				httpRequest = new ActiveXObject('Msxml2.XMLHTTP');
			}catch(e){
				httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
			}
		}
		return httpRequest;
	}
	function httpRequest(){
		
		var URL = "送信先のURL";
		
		var httpRequest = createHttpRequest();
		
		httpRequest.open("POSTまたはGET", URL, true);
		httpRequest.onreadystatechange = function(){
			// 処理終了
			// 0 : open が呼ばれる前
			// 1 : open が呼ばれ、send が呼ばれるまで
			// 2 : send が呼ばれ、レスポンスヘッダを受信した
			// 3 : レスポンスのボディーを受信中
			// 4 : すべてのデータの受信が完了した
			if (httpRequest.readyState == 4){
				// 正常に完了
				if(httpRequest.status == 200){
					// 返ってきたデータを受け取る
					// responseText		: レスポンス・ボディの文字列そのもの
					// responseXML		: レスポンス・ボディを XML としてパースしたもの
					// status			: ステータスコード
					// statusText		: ステータスの文字列
					
					var Data = httpRequest.responseText;
					alert();
					
				// 読み込み失敗
				}else{
					alert("Err-"+httpRequest.status);
				}
			}
		}
		// ヘッダーの設定
		httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		// 送信
		httpRequest.send("送信データ(例、word=test&id=12345)");
	}

新しいウィンドウにPOST/GET

その1:既存のフォームを使用しない場合

JavaScriptでフォームを作成して送信後フォーム削除

 function new_window_post_get(){
   
   // about:blankとしてウィンドウを開く
   var target = 'TageName';
   window.open('', target);
   
   // formを生成
   var form = document.createElement("form");
   form.action = 'TageURL';
   form.target = target;
   form.method = 'post';
   
   // 連想配列で送信データセット
   var sd_data = new Object();
   sd_data.sample1 = sample1_value;
   sd_data.sample2 = sample2_value;
   
   // 送信データフォーム生成
   var data = new Array();
   for (key in sd_data) {
     data.push({
       type:'hidden', 
       name:key, 
       value:sd_data[key]
     });
   }
   
   // 送信データフォーム設定
   for(var i = 0, N = data.length; i < N; i++) {
     var input = document.createElement("input");
     for(var param in data[i]) {
       input.setAttribute(param, data[i][param]);
     }
     form.appendChild(input);
   }
   
   // フォームをBODYに追加
   var body = document.getElementsByTagName("body")[0];
   body.appendChild(form);
   // 送信
   form.submit();
   // フォーム削除
   body.removeChild(form);
 }

その2:既存のフォームを使用する場合

サブウィンドウのオプションはhttp://www.tagindex.com/javascript/window/open_option.htmlを見ればおk

	<script>
		function OpenWindow(URL, TAGE, OBJ){
			// ウィンドウサイズ
			var width=400;
			var height=300;
			// 新しくウィンドウを開く
			window.open(URL, TAGE, 'width=' + width + ',height=' + height + ',left=' + (screen.availWidth-width)/2 + ',top=' + (screen.availHeight-height)/2);
			// 新しく開いたウィンドウで送信
			OBJ.submit();
		}
	</script>
	<form method="POST" action="送信先のファイル" target="ウィンドウ名" onSubmit="OpenWindow(this.action, this.target, this);return false;">
		<input type="submit" value="送信">
	</form>

数字に3桁区切りでカンマ挿入

その1

	function addFigure(str){
		var num = new String(str).replace(/,/g, "");
		while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
		return num;
	}

その2

	function addFigure(str){
		return String(str).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
	}

操作不能にしてローディング画面表示

処理中に操作不能にしてローディング画像を表示

ローディング画像は以下のサイトからダウンロードすればおk

loading()を実行することで表示/非表示させる

	// 読み込み表示
	function loading(){
		document.getElementById('ID名').innerHTML = (document.getElementById('loading').innerHTML)? '' : '<span style="position:fixed;top:0;left:0;width:100%;height:100%;background-color:#FFFFFF;z-index:10;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;"><img style="width:200px;height:200px;position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-100px;" src="ローディング画像のURL"></span>';
	}

ID名を適当に決めて適当にBODY内に埋め込めばおk

		<!-- 読み込み表示領域 -->
		<div id="ID名"></div>

HTMLエンコード

PHPでの「htmlspecialchars("変換対象文字", ENT_QUOTES)」をJavaScriptで実現

	// 「&」 => &amp;
	// 「"」 => &quot;
	// 「'」 => &#039;
	// 「<」 => &lt;
	// 「>」 => &gt;
	
	function htmlspecialchars(arg){
		return arg.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#039;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
	}

ブラウザの画面サイズ取得

getBrowser().width、getBrowser().heightで取得すればおk

	function getBrowser(){
		if(window.innerWidth){
			return {'width':window.innerWidth, 'height':window.innerHeight};
		}
		else if(document.documentElement && document.documentElement.clientWidth != 0){
			return {'width':document.documentElement.clientWidth, 'height':document.documentElement.clientHeight};
		}
		else if(document.body){
			return {'width':document.body.clientWidth, 'height':document.body.clientHeight};
		}
		return 0;
	}

JSのちょい面白い書き方

開発者は人のソースを見たりすると思うけど、JSファイルにアクセスするとAAなどを表示する方法を紹介。

ソースにURLからアクセスするとファイル内容が表示されるけど、この方法を使えばJavaScript内にスクリプトとHTMLを共存させる事ができ表示内容を制御できます。

ただし、ソースを見ればファイル内容を見る事が可能。

ただのお遊びです。

サンプル

MyComeのソース

http://batako.net/mycome/js/comeplayer.php

※ 音が鳴るから注意

ソース

以下のようにPHPファイルとしてファイル作成して読み込ませればおk

ブラウザで直接アクセスするとHTML形式と同じように扱われ「<!-- -->」領域が省略されHTMLの部分だけが表示される。

JavaScriptから読み込んだ場合は、HTMLの「/* */」部分が省略されスクリプトの「<!-- -->」部分だけが読まれるので、JavaScriptファイルにスクリプトとHTMLが共存を実現できる。

sample.php

	/*
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>Easter egg</title>
	</head>
	<body>
	<div style="width:100%;height:100%;position:relative;">
	<div style="width:510;height:430;position:absolute;top:50%;left:50%;margin-left:-255;margin-top:-240;">
	<pre  style="margin:0;text-align:left;font-family:'MS PGothic',MS Pゴシック;">
	アスキーアート
	</pre>
	</div>
	</div>
	</body>
	</html>
	*/
	<!--
	Javascriptのソース
	-->

JavaScriptの実行タイミング

読み込み時に実行

	(function(){
		処理内容
	})();

読み込み後に実行

	//for W3C DOM
	if(window.addEventListener){
		window.addEventListener("load", Foo, false);
	//for IE
	}else if(window.attachEvent){
		window.attachEvent("onload", Foo);
	}else{
		window.onload = Foo;
	}
	
	function Foo(){
		処理内容
	}

トリミング関数

Javascriptにはトリミング関数がない

String.prototype.trim = function() {
	return this.replace(/^\s+|\s+$/g, '');
}

使用方法

string.trim()

フォームクリア

ラジオはname単位の最初の項目にチェックした状態を初期値とする

	function formclear(frm_id){
		var input_obj = document.getElementById(frm_id).getElementsByTagName('input');
		var radio = Array();
		if(!Array.indexOf){
			Array.prototype.indexOf = function(target){
				for(var i = 0; i < this.length; i++){
					if(this[i] === target) return i;
				}
				return -1;
			}
		}
		for(var i=0,N=input_obj.length;i<N;i++){
			switch(input_obj[i].getAttribute('type')){
				case "submit":
				case "button":
					continue;
					break;
				case "text":
					input_obj[i].value = '';
					break;
				case "checkbox":
					input_obj[i].checked = false;
					break;
				case "radio":
					var name = input_obj[i].getAttribute('name');
					if(radio.indexOf(name) < 0){
						input_obj[i].checked = true;
						radio.push(name);
					}else{
						input_obj[i].checked = false;
					}
					console.log(radio);
					break;
			}
		}
		var textarea_obj = document.bodyform.getElementsByTagName('textarea');
		for(var i=0,N=textarea_obj.length;i<N;i++){
			textarea_obj[i].value = '';
			textarea_obj[i].innerHTML = '';
		}
	}

jQuery

参考文献

基礎知識

置き換え可能

jQuery => $

$.("#ID名") or jQuery.("#ID名")

オブジェクトの指定

$.("オブジェクト")

指定の仕方はCSSの指定の方法と同じ

#○ -- ID指定
.○ -- クラス指定
○ -- タグ指定
#○ ○ -- オブジェクト内から絞り込むにはスペースをで区切ればおk

ID指定

$.("#ID名")

クラス指定

$.(".クラス名")

return array()

タグ指定

$.("タグ名")

DOM置き換え

$(obj).html(str)
$(obj).val(str)

バインド

$(対象のオブジェクト).bind("アクション名", function(){
	処理内容
});

Ajax

	$.ajax({
		type: "POST/GET",
		url: "送信先のURL",
		// serialize()により、指定したフォームの送信データを自動抽出してくれる
		data: $("#送信フォームID").serialize(),
		success: function( data ){
			alert("戻り値 : " + data);
		},
		error: function(XMLHttpRequest, textStatus, errorThrown){
			switch( XMLHttpRequest.status ){
				case 404:
					alert('アクセス不可');
					break;
				case 500:
					alert('エラー発生');
					break;
			}
		}
	});

DOM構築後実行

	// 読み込み完了後に実行
	$(document).ready(function(){
		alert('読み込み完了');
	}

背景画像をウィンドウサイズに合わせる

CSS3の「background-size」にブラウザが対応すれば必要なくなるけど、全てのブラウザが対応してるわけじゃないし、jQuery Backstretch使えば幸せになれるかもね。

<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
<script type="text/javascript">
	$.backstretch("img/background.jpg");
</script>

コンテンツ全体の縦幅と横幅の取得

// windowの読み込み完了実行
$(window).load(function(){
	// キャンバスの横幅
	var width = Math.max.apply( null, [document.body.clientWidth, document.body.scrollWidth, document.documentElement.scrollWidth, document.documentElement.clientHeight] );
	// キャンバスの画面の縦幅
	var height = Math.max.apply( null, [document.body.clientHeight , document.body.scrollHeight, document.documentElement.scrollHeight, document.documentElement.clientHeight] );
	
	alert('Width : ' + width + ', Height : ' + height);
});

ブックマークレット

テンプレート

javascript:(function(){
	var url = 'スクリプトファイルのURL';
	var characode = '文字コード';
	if(!url.match(/\?/)) url += '?t=' + (new Date()).getTime();
	var e = document.createElement('script');
	e.charset = characode;
	e.src = url;
	document.getElementsByTagName('head')[0].appendChild(e);
})();

Facebook

文字を2進数に変換して投稿できるやつ作ってみた

convertTypeをtrueのものとfalseの2つお気に入りに入れとけば幸せになれるかも

javascript:(function(){
	/* 読み込み時に実行 */
	(function(){
		/**
		 * convertType = 変換方向タイプ
		 * true  : 文字列を2進数に変換
		 * false : 2進数を文字列に変換
		*/
		var convertType = true;
		/* 変換対象のオブジェクト */
		var tage_obj = document.getElementsByTagName('textarea');
		/* 入力されているテキストエリアを検索 */
		for(var i=0,N=tage_obj.length;i<N;i++){
			var obj = tage_obj[i];
			if(obj.value && obj.value != obj.placeholder){
				/* 文字列を2進数に変換 */
				if(convertType) obj.value = convert_str_to_binary(obj.value);
				/* 2進数を文字列に変換 */
				else{
					var afterStr = convert_binary_to_str(obj.value);
					if(afterStr) obj.value = afterStr;
				}
			}
		}
	})();
	/**
	 * [関数名] convert_str_to_binary
	 * [機 能] 文字列を二進数に変換
	 * [説 明] 1文字を16bitとして変換
	 *
	 * @param   string  beforeStr  文字列
	 * @return  string  afterStr   二進数
	*/
	function convert_str_to_binary(beforeStr){
		var afterStr = '';
		for(var i=0; i < beforeStr.length; i++){
			afterStr += ZeroFormat(16, (beforeStr.charCodeAt(i)).toString(2));
		}
		return afterStr;
	}
	/**
	 * [関数名] convert_binary_to_str
	 * [機 能] 二進数を文字列に変換
	 * [説 明] 1文字を16bitとして変換
	 *
	 * @param   string  beforeStr  二進数
	 * @return  string  afterStr   文字列
	*/
	function convert_binary_to_str(beforeStr){
		beforeStr = toHankakuNum(beforeStr.replace(/\r\n/g,'').replace(/\n/g,'').replace(/\s| /g,''));
		if ( !beforeStr.match(/^[01]+$/) || beforeStr.length % 16 != 0){
			/* 不正な文字列なため変換できません */
			return;
		}
		var afterStr = '';
		for(var i=0; i < beforeStr.length / 16; i++){
			var startNum = i * 16;
			var endNum = startNum + 16;
			var word = beforeStr.slice(startNum, endNum);
			afterStr += String.fromCharCode(parseInt(word,2));
		}
		return afterStr;
	}
	/**
	 * [関数名] ZeroFormat
	 * [機 能] ゼロ埋め
	 * [説 明] 数値が指定した桁数になるまで数値の先頭をゼロで埋める
	 *
	 * @param  integer num  数値
	 * @param  integer max  桁数
	 * @return integer tmp  ゼロ埋め後の数値
	*/
	function ZeroFormat(max, num){
		var tmp=''+num;
		while(tmp.length<max){
			tmp='0'+tmp;
		}
		return tmp;
	}
	/**
	 * [関数名] toHankakuNum
	 * [機 能] 全角数字を半角数字に変換
	 *
	 * @param   string  beforeStr  変換対象の数値
	 * @return  string  afterStr   ゼロ埋め後の数値
	*/
	function toHankakuNum(beforeStr){
		var han = '0123456789';
		var zen = '0123456789';
		var afterStr = '';
		for (i=0; i<beforeStr.length; i++){
			c = beforeStr.charAt(i);
			n = zen.indexOf(c,0);
			if (n >= 0) c = han.charAt(n);
			afterStr += c;
		}
		return afterStr;
	}
})();

未整理

スタイルの変更とか色々

フォーカス:onFocus = ""

フォーカス解除:onBlur = ""

オブジェクト自身:this

オブジェクトのID自身:getElementById?("ID")

オブジェクトのタグ自身を配列で返す:object.getElementsByTagName?('タグ名')

オブジェクトのの属性の値を取得:object.getAttribute('属性')

要素のマークアップと内容を取得・設定:object.innerHTML

要素とそのすべての子孫要素のテキスト内容を取得・設定:object.textContent

タグの属性の変更:object..setAttribute('属性', '変更値')

スタイル変更はスタイルシートで使う構文とだいたい同じ。

document.getElementById?('対象のID').style.fontSize="10";

document.getElementById?('対象のID').style.color="#FF0000";

document.getElementById?('対象のID').style.top="100%";

document.getElementById?('対象のID').style.backgroundColor="#FFFFFF";

document.getElementById?('対象のID').style.color="white";

document.getElementById?('対象のID').checked=true/false; // 「"」で囲むと正常に動かん

document.getElementById?('対象のID').scrollTop=0;

document.getElementById?('対象のID').scrollLeft=0;

document.getElementById?('対象のID').value

document.getElementById?('対象のID').innerHTML

document.getElementsByTagName?('対象のID').textContent;

document.getElementById?('対象のID').style.zIndex = 10;

obj.parentNode.removeChild(obj); // 親.removeChild(子);

サブウィンドウ:window.opener.

メモ

TAGE.match( 正規表現 );

TAGE.disabled 値は不要 部品を無効化する TAGE.readonly 値は不要 書き換えを禁止する

文字列を整数に変換 parseInt(str);

PHPでのtrim()をjavascriptで実現 target = target.replace(/(^\s+)|(\s+$)/g, "");

http://makoto3.blog61.fc2.com/blog-entry-342.html

<html>
	<head>
		<title>タイマー</title>
		<script type="text/javascript">
		<!--
			function timer(){
				document.getElementById("output").firstChild.nodeValue = new Date().toLocaleString();
				window.setTimeout("timer()", 1000);
			}
		// -->
		</script>
	</head>
	<body onload="timer()">
		<div id="output" style="text-align:center;">Now Loading</div>
	</body>
</html>

ブラウザの違い

属性変更

# IE

ele.className = '';
ele.style.cssText = 'background-color: #fff; color: #000;';

# その他

ele.setAttribute('class', 'className');
ele.setAttribute('style', 'background-color: #fff; color: #000;');

両方設定した場合、二重にクラスができる!

メモ

配列初期化 new Array()
nonBeforeUnload
nonpagehide
npageshow

console.log('material',material)

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-01-16 (土) 18:03:29 (435d)