JavaScript

リンク

Anchor Synchronization

ある<a>に連動して他の<a>のリンク先が変化するサンプル。

URI/URIコンポーネントのエンコード/デコード

  • fileEncDec.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>

半角数字を漢数字に変換

  • fileNumberString.html
  • Excel即効テクニック 数値を漢数字で表示したい
    <!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>

数字の頭にゼロを付けて桁を揃える

  • filepackZero.html
  • 文字列繰り返しベンチマーク take 3 @ muddy brown thang
    <!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 アプリの自動テスト

画像へのリンクにサムネイルを追加

  • Links2Imagesを改変。
  • すでにサムネイルが表示されている場合はスキップ。
  • フルサイズ表示から縦100pxへ制限。
  • 元のinnerHTMLは残す。
  • 画像を別のタブに出す。
  • filelinks-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" );
    		}
    	}
    })();

ボタンを押したときに文字列と画像を変更する

  • filechangePic.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>

離散的な配列のソート

  • sortによって元のインデックスは破壊される。
  • lengthプロパティは「最大の添え字+1」で元のまま。

ソース

  • filesortDispersedArray.zip
    すべてを展開すべてを収束
      1
      2
      3
      4
      5
      6
      7
      8
      9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
     29
     30
     31
     32
     33
     34
     35
     36
     37
     38
     39
     40
     41
     42
    
     
     
     
     
    -
    |
    |
    |
    |
    |
    |
    |
    |
    |
    !
     
    -
    |
    |
    -
    -
    |
    -
    |
    !
    !
    |
    !
     
     
    -
    |
    -
    -
    |
    !
    |
    |
    !
    |
    !
     
    
    // 離散的な配列のソート
    // 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

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

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

  • Pukipochi - PukiWikiのボタンを常にページの右下に表示
    メニューバーもフローティング化
    「整形済みテキスト」で右端がはみ出してるとメニューバーの下に 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';

添付ファイル: filepackZero.html 542件 [詳細] filesortDispersedArray.zip 379件 [詳細] filechangePic.html 1830件 [詳細] filelinks-2-images.user.js 6732件 [詳細] fileNumberString.html 2170件 [詳細] fileEncDec.html 2159件 [詳細] fileAnchorSynch.html 2691件 [詳細]

リロード   新規 下位ページ作成 編集 凍結 差分 添付 コピー 名前変更   ホーム 一覧 検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: Fri, 05 Jun 2015 09:37:41 JST (903d)