Table of Contents

リンク

Anchor Synchronization

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

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

  • Sample
  • html 
    <!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="//www.takeash.net/take.css">
  <title>URI/URIコンポーネントのエンコード/デコード</title>
</head>

<body>
  <h1>URI/URIコンポーネントのエンコード/デコード</h1>
  <div style="text-align: center;">
    <div>
      <textarea id="txtSrc" rows="16" style="width: 100%;"></textarea>
    </div>
    <div>
      <button onClick="EncURI()">↓EncURI</button>
      <button onClick="DecURI()">↓DecURI</button>
      <button onClick="EncURIC()">↓EncURIC</button>
      <button onClick="DecURIC()">↓DecURIC</button>
      <button onClick="Cpy()">↑Copy</button>
    </div>
    <div>
      <textarea id="txtDst" rows="16" style="width: 100%;"></textarea>
    </div>
  </div>
  <script type="text/javascript" src="EncDec.js"></script>
</body>

</html>
  • javascript 
    const d = document;
const txtSrc = d.getElementById('txtSrc');
const txtDst = d.getElementById('txtDst');

function EncURI() {
  txtDst.value = encodeURI(txtSrc.value);
}

function DecURI() {
  txtDst.value = txtSrc.value.replace(
    /((%[8-9A-Fa-f][0-9A-Fa-f])*%[0-9A-Fa-f]{2})/g,
    (whole, p1) => decodeURI(p1)
  );
}

function EncURIC() {
  txtDst.value = encodeURIComponent(txtSrc.value);
}

function DecURIC() {
  txtDst.value = txtSrc.value.replace(
    /((%[8-9A-Fa-f][0-9A-Fa-f])*%[0-9A-Fa-f]{2})/g,
    (whole, p1) => decodeURIComponent(p1)
  );
}

function Cpy() {
  txtSrc.value = txtDst.value;
}

半角数字を漢数字に変換

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

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

  • packZero.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は残す。
  • 画像を別のタブに出す。
  • 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" );
    }
  }
})();

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

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

離散的な配列のソート

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

ソース

  • sortDispersedArray.zip 
    // 離散的な配列のソート
// 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

JavaScript