* JavaScript [#lb638e60]
#contents
#ls2

** リンク [#fb26082c]
- [[ECMAScript>WikiPedia.ja:ECMAScript]]
- [[Dynamic HTMLリファレンス:http://msdn.microsoft.com/library/ja/default.asp?url=/library/ja/jpisdk/dhtml/references/dhtmlrefs.asp]]
- [[HTML and DHTML Reference:http://msdn2.microsoft.com/en-us/library/ms533050.aspx]]
- [[OperaWiki:User JavaScript]]
- [[オブジェクト指向プログラム言語としてのJavaScript:http://www.tokumaru.org/JavaScript/]]
- [[HTA Developers Center:http://www.microsoft.com/technet/scriptcenter/hubs/htas.mspx]] / [[HTML Applications Reference:http://msdn.microsoft.com/en-us/library/ms536473(VS.85).aspx]] / [[HTA Helpomatic:http://www.microsoft.com/downloads/details.aspx?FamilyId=231D8143-F21B-4707-B583-AE7B9152E6D9&displaylang=en]]
- [[jquery.jsを読み解く:http://gihyo.jp/dev/feature/01/jquery]]
- [[JavaScriptリファレンス@ITpro:http://itpro.nikkeibp.co.jp/article/Reference/20081119/319583/]]
- [[Online JavaScript beautifier:http://jsbeautifier.org/]]
-- [[GitHub:beautify-web/js-beautify]]
- [[kangax projects:http://kangax.github.io/]]
-- [[ECMAScript 5 compatibility table:http://kangax.github.io/es5-compat-table/]]
-- [[ECMAScript 6 compatibility table:http://kangax.github.io/es5-compat-table/es6/]]
-- [[Javascript 2D canvas libraries comparison table:https://docs.google.com/spreadsheet/ccc?key=0Aqj_mVmuz3Y8dHNhUVFDYlRaaXlyX0xYSTVnalV5ZlE#gid=0]]

** Anchor Synchronization [#xa84fb2b]
ある<a>に連動して他の<a>のリンク先が変化するサンプル。
- &ref(AnchorSynch.html);

** URI/URIコンポーネントのエンコード/デコード [#bfcecede]
- &ref(EncDec.html);
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html lang="ja">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 	<meta http-equiv="Content-Script-Type" content="text/javascript">
 	<title>URI/URIコンポーネントのエンコード/デコード</title>
 </head>
 <body>
 <script type="text/javascript">
 <!--
 function EncURI(){
 	document.formEncDec.txtDst.value = encodeURI( document.formEncDec.txtSrc.value );
 }
 
 function DecURI(){
 	document.formEncDec.txtDst.value = decodeURI( document.formEncDec.txtSrc.value );
 }
 
 function EncURIC(){
 	document.formEncDec.txtDst.value = encodeURIComponent( document.formEncDec.txtSrc.value );
 }
 
 function DecURIC(){
 	document.formEncDec.txtDst.value = decodeURIComponent( document.formEncDec.txtSrc.value );
 }
 
 function Cpy(){
 	document.formEncDec.txtSrc.value = document.formEncDec.txtDst.value;
 }
 // -->
 </script>
 
 <h1>URI/URIコンポーネントのエンコード/デコード</h1>
 
 <form name="formEncDec" action="#">
 <table summary="Encode Decode Form">
 <tr><td><input type="text" name="txtSrc" size="100" value=""></td></tr>
 <tr><td align="center">
 <input type="button" name="btnEnc"  value="↓EncURI"  onClick="EncURI()"> 
 <input type="button" name="btnDec"  value="↓DecURI"  onClick="DecURI()"> 
 <input type="button" name="btnEncC" value="↓EncURIC" onClick="EncURIC()"> 
 <input type="button" name="btnDecC" value="↓DecURIC" onClick="DecURIC()"> 
 <input type="button" name="btnCpy"  value="↑Copy"    onClick="Cpy()"> 
 </td></tr>
 <tr><td><input type="text" name="txtDst" size="100" value=""></td></tr>
 </table>
 </form>
 
 </body>
 </html>

** 半角数字を漢数字に変換 [#w660ec42]
- &ref(NumberString.html);
- [[Excel即効テクニック 数値を漢数字で表示したい:http://pc.nikkeibp.co.jp/article/NPC/20060214/229266/]]
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html lang="ja">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <title>NumberString</title>
 </head>
 <body>
 <h1>NumberString</h1>
 <p>半角数字を漢数字に変換</p>
 <form id="FORMNUMBERSTRING" name="FORMNUMBERSTRING" action="#">
 <p>入力: <input id="TEXTSOURCE" name="TEXTSOURCE" type="text" size="40" value="123,456,789,000"></p>
 <p><input type="button" value="↓変換" onClick="NumberString(document.FORMNUMBERSTRING.TEXTSOURCE.value)"></p>
 <p>出力: <input id="TEXTDESTINATION" name="TEXTDESTINATION" type="text" size="40" value=""></p>
 </form>
 <script type="text/javascript">
 <!--
 function NumberString(src){
 	var dictionary = { 
 		'0':'〇', '1':'一', '2':'二', '3':'三', '4':'四', 
 		'5':'五', '6':'六', '7':'七', '8':'八', '9':'九', 
 		',':'、'
 	};
 
 	for( var key in dictionary ){
 		src = src.replace( RegExp(key,'g'), dictionary[ key ] );
 	}
 	
 	document.FORMNUMBERSTRING.TEXTDESTINATION.value = src;
 }
 // -->
 </script>
 </body>
 </html>

** 数字の頭にゼロを付けて桁を揃える [#r65f66f6]
- &ref(packZero.html);
- [[文字列繰り返しベンチマーク take 3:http://d.hatena.ne.jp/moriyoshi/20090130/1233335471]] @ [[muddy brown thang:http://d.hatena.ne.jp/moriyoshi/]]
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html lang="ja">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 	<meta http-equiv="Content-Script-Type" content="text/javascript">
 	<title>ゼロ詰め</title>
 </head>
 <body>
 <script type="text/javascript">
 <!--
 function packZero( x, n )
 {
 	var n1 = (""+x).length;
 	var n0 = ( n > n1 ) ? n : n1 ;
 	var z = "0";
 	var d = "";
 	while( n > 0 ){
 		if ( n & 1 ){
 			d += z;
 		}
 		z += z;
 		n >>= 1;
 	}
 	return ( d + x ).slice( - n0 );
 }
 // -->
 </script>
 
 <h1>ゼロ詰め</h1>
 
 <ul>
 <li><p>数値の頭にゼロを付けて桁数をそろえます。</p></li>
 <li><p></p></li>
 </ul>
 
 <form name="formPackZero" action="#">
 <table summary="Pack Zero Form">
 <tr><th>元データ</th><td><input type="text" name="txtX" size="15" value="123"></td></tr>
 <tr><th>桁数</th><td><input type="text" name="txtN" size="15" value="5"></td></tr>
 <tr><td align="center" colspan="2">
 <input type="button" name="btnPackZero" value="ゼロ詰め" onClick="javascript: document.formPackZero.txtDst.value = packZero( document.formPackZero.txtX.value, document.formPackZero.txtN.value )"> 
 </td></tr>
 <tr><th>結果</th><td><input type="text" name="txtDst" size="15" value=""></td></tr>
 </table>
 </form>
 
 <h2>参考</h2>
 <ul>
 <li><p><a href="http://d.hatena.ne.jp/moriyoshi/20090130/1233335471">文字列繰り返しベンチマーク take 3</a></p></li>
 </ul>
 
 </body>
 </html>

** Selenium による Web アプリの自動テスト [#Selenium]
- [[Selenium による Web アプリの自動テスト>JavaScript/Selenium]]へ移動。

** 画像へのリンクにサムネイルを追加 [#jb11190b]
- [[Links2Images:http://userjs.org/scripts/general/enhancements/links-2-images]]を改変。
- すでにサムネイルが表示されている場合はスキップ。
- フルサイズ表示から縦100pxへ制限。
- 元のinnerHTMLは残す。
- 画像を別のタブに出す。
- &ref(links-2-images.user.js);
 // ==UserScript==
 // @name Links2Images
 // @author Tomasz Wojcikowski
 // @description  Replaces links to images with the actual images.
 // @ujs:category general: enhancements
 // @ujs:published 2005-05-28 12:47
 // @ujs:modified 2005-09-19 09:19
 // @ujs:documentation http://userjs.org/scripts/general/enhancements/links-2-images 
 // @ujs:download http://userjs.org/scripts/download/general/enhancements/links-2-images.user.js 
 // @ujs:download.gm http://userjs.org/scripts/download/general/enhancements/links-2-images.user.js
 // @exclude	http://*.2chan.net/b/*
 // ==/UserScript==
 
 /* 
  * Copyright (c) 2005 by Tomasz Wojcikowski
  * Modified by take-ash
  * 
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
  * the Free Software Foundation; either version 2 of the License.
  * 
  * This program is distributed in the hope that it will be useful, but
  * WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
  * General Public License for more details.
  * 
  * You should have received a copy of the GNU General Public License
  * along with this program; if not, write to the Free Software
  * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307
  * USA
  */
 
 (function(){
 	var links = document.getElementsByTagName( "a" );
 	for ( var i = links.length; --i >= 0; ){
 		// search for all links with href to image file
 		if ( links[i].href 
 			&& links[i].href.match( /^.*\.(jpe?g|png|bmp|gif)$/i ) 
 			&& links[i].getElementsByTagName( "img" ).length == 0
 		){
 			var img = document.createElement( "img" );
 			img.setAttribute( "src", links[i].href );
 			img.setAttribute( "class", "image-link" );
 			img.setAttribute( "alt", links[i].getAttribute( "title" ) ) ;
 			img.setAttribute( "height", 100 ) ;
 			links[i].appendChild( img );
 			links[i].setAttribute( "target", "_blank" );
 		}
 	}
 })();

** ボタンを押したときに文字列と画像を変更する [#a255983f]
- &ref(changePic.html);
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html lang="ja">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<meta http-equiv="Content-Script-Type" content="text/javascript">
 	<title>change String and Pic by buttons</title>
 </head>
 <body onLoad="init()">
 <SCRIPT type="text/javascript">
 <!--
 var	elmPicImg;
 var	elmPicName;
 
 function init(){
 	elmPicImg	= document.getElementById("PicImg");
 	elmPicName	= document.getElementById("PicName");
 }
 
 function showImg1(){
 	elmPicImg.src			= "http://www.takeash.net/Etc/BABY.GIF";
 	elmPicName.innerHTML	= "Baby";
 }
 
 function showImg2(){
 	elmPicImg.src			= "http://www.takeash.net/Etc/MyMelo.png";
 	elmPicName.innerHTML	= "MyMelody";
 }
 
 function showImg3(){
 	elmPicImg.src			= "http://www.takeash.net/Etc/Usamimi.png";
 	elmPicName.innerHTML	= "Usamimi";
 }
 
 -->
 </SCRIPT>
 <h1>change String and Pic by buttons</h1>
 
 <form name="formSwapImg" action="#">
 <input type="button" onclick="showImg1()" value="Baby"> 
 <input type="button" onclick="showImg2()" value="MyMelody"> 
 <input type="button" onclick="showImg3()" value="Usamimi"> 
 </form>
 
 <div id="PicName">Baby</div>
 <div><img src="http://www.takeash.net/Etc/BABY.GIF" id="PicImg" alt="changing image" width="256" height="256"></div>
 
 </body>
 </html>

** 離散的な配列のソート [#sortDispersedArray]
- sortによって元のインデックスは破壊される。
- lengthプロパティは「最大の添え字+1」で元のまま。

*** ソース [#sortDispersedArray_source]
- &ref(sortDispersedArray.zip);
#code(javascript){{{{
// 離散的な配列のソート
// sortによって元のインデックスは破壊される。
// lengthプロパティは「最大の添え字+1」で元のまま。

function testArray(){
	var ret = 'Browser: ' + navigator.userAgent + '\n';
	var a = [];
	a[2] = { 'index':2, 'value':200, 'name':'std'  };
	a[5] = { 'index':5, 'value':400, 'name':'high' };
	a[9] = { 'index':9, 'value':100, 'name':'low'  };
	ret += '\nソート前 / length: ' + a.length + '\n' + showObj( a );
	a.sort( function(a,b){ return b['value'] - a['value']; } );
	ret += '\nソート後 / length: ' + a.length + '\n' + showObj( a );
	return ret;
}

function showObj( obj, indent ){
	indent = indent || 0;
	var ret = '';
	for( var p in obj ){
		if ( typeof( obj[p] ) == 'object' ){
			ret += repeatStr( '\t', indent ) + p + ':\n' + showObj( obj[p], indent + 1 );
		} else {
			ret += repeatStr( '\t', indent ) + p + ':\t' + obj[p] + '\n';
		}
	}
	return ret;
}

function repeatStr( s, n )
{
	var ret = '';
	while( n > 0 ){
		if ( n & 1 ){
			ret += s;
		}
		s += s;
		n >>= 1;
	}
	return ret;
}
// EOF
}}}}

*** Opera 11.50 [#sortDispersedArray_Opera]
 Browser: Opera/9.80 (Windows NT 6.1; U; ja) Presto/2.9.168 Version/11.50
 
 ソート前 / length: 10
 2:
 	index:	2
 	value:	200
 	name:	std
 5:
 	index:	5
 	value:	400
 	name:	high
 9:
 	index:	9
 	value:	100
 	name:	low
 
 ソート後 / length: 10
 0:
 	index:	5
 	value:	400
 	name:	high
 1:
 	index:	2
 	value:	200
 	name:	std
 2:
 	index:	9
 	value:	100
 	name:	low

*** Firefox 5.0.1 [#sortDispersedArray_Firefox]
 Browser: Mozilla/5.0 (Windows NT 6.1; rv:5.0.1) Gecko/20100101 Firefox/5.0.1
 
 ソート前 / length: 10
 2:
 	index:	2
 	value:	200
 	name:	std
 5:
 	index:	5
 	value:	400
 	name:	high
 9:
 	index:	9
 	value:	100
 	name:	low
 
 ソート後 / length: 10
 0:
 	index:	5
 	value:	400
 	name:	high
 1:
 	index:	2
 	value:	200
 	name:	std
 2:
 	index:	9
 	value:	100
 	name:	low

** Greasemonkey [#l89d16bf]
-~[[Greasemonkey スクリプト:http://jp.opera.com/support/tutorials/userjs/examples/#greasemonkey]]

-~[[Opera のユーザーJavaScript は「.js」か「.user.js」かで実行されるタイミングが違う:http://orera.g.hatena.ne.jp/miya2000/20070314/p0]]

-~[[Pukipochi:http://nanokawa.net/archives/individual/2006/0223213537.php]] - PukiWikiのボタンを常にページの右下に表示&br;
メニューバーもフローティング化&br;
「整形済みテキスト」で右端がはみ出してるとメニューバーの下に body がもぐりこんじゃうなぁ。
 var menub = document.getElementById('menubar');
 menub.style.position = 'fixed';
 menub.style.top = '10em';
 menub.style.left = '2em';
 menub.style.padding = '2px 3px';
 menub.style.borderWidth = '1px 0 0 1px';
 menub.style.borderColor = '#ccc';
 menub.style.borderStyle = 'solid';
 menub.style.backgroundColor = '#eee';

-~[[Mouseover DOM Inspector:http://slayeroffice.com/tools/modi/v2.0/modi_help.html]]

リロード   新規 下位ページ作成 編集 凍結 差分 添付 コピー 名前変更   ホーム 一覧 検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS