>> 古い記事: [雑記] 2007-12
<< 新しい記事: 実践的でサンプル多数で CC BY な Javascriptチュートリアル

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript memo

オレオレメモ。


// console.log() がめんどい
function puts(){ console.log(arguments); }


function strip(str){
  return str.replace( /^[\s\t\n\r\n]+/, "" ).replace( /[\s\t\r\n]+$/, "" );
}

function insertAsFirstChild(parent, child){
  parent.insertBefore(child, parent.firstChild);
}


// 素直に jQuery とか使った方がいい気がしますが、
// ブックマークレットとかでちょっと使いたい場合に
function xid(){
  var elem, id;
  switch(arguments.length){
    case 1:  elem = document    ; id = arguments[0]; break;
    case 2:  elem = arguments[0]; id = arguments[1]; break;
    default: throw "argument error";
  }
  return elem.getElementById(id);
}

function xname( name ){
  return document.getElementsByName( name );
}

function xtag( elem, tagName ){
  return elem.getElementsByTagName( tagName );
}

function arrayInclude(array, target){
  for(var a=array.length-1; a>=0; a--){
    if( array[a] === target ){
      return true;
    }
  }
  return false;
}
function xclass( root, className ){
  var elems = root.getElementsByTagName("*");
  var result = [];
  for(var a in elems){
    if(    elems[a].getAttribute
        && elems[a].getAttribute("class")
        && arrayInclude( elems[a].getAttribute("class").split(/\s+/), className )
    ){
      result.push( elems[a] );
    }
  }
  return result;
}

function createElement(parent, tagName, attributes, styles, innerHTML){
  var e = document.createElement(tagName);

  if(attributes){
    for(var key in attributes){
      e.setAttribute(key, attributes[key]); }}
  if(styles){
    for(var key in styles){
      e.style[key] = styles[key]; }}
  if(innerHTML){
    e.innerHTML = innerHTML; }
  if(parent){
    parent.appendChild(e); }

  return e;
}

XPath 利用


function selectByXPath(root, xpath){
  if(root === null){ root = document; }
  
  var snapshot;
  try{
    snapshot = root.evaluate(xpath, root, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  }catch(e){
    return null;
  }
  
  var result = [];
  for(var a=0,l=snapshot.snapshotLength; a<l; a++){
    result.push(snapshot.snapshotItem(a));
  }
  
  return result;
}

function xattr(args, key){
  var root, value;
  switch(args.length){
  case 1:  root = document; value = args[0]; break;
  case 2:  root = args[0] ; value = args[1]; break;
  default: throw "argument error";
  }
  return selectByXPath(root, '//*[@' + key + '="'+ value +'"]');
}

function xclass(){
  return xattr(arguments, "class");
}
function xname(){
  return xattr(arguments, "name");
}
function xid(){
  return xattr(arguments, "id")[0];
}

function xtag(){
  var root, value;
  switch(arguments.length){
  case 1:  root = document     ; value = arguments[1]; break;
  case 2:  root = arguments[0] ; value = arguments[2]; break;
  default: throw "argument error";
  }
  return selectByXPath(root, '//' + value);
}

参考: 2009-01-20 Greasemonkey スクリプトの冒頭に書く 5 行 – OTCHY.NET

ブックマークレット

Firebug を使うと便利。

ブックマークレット実行によってページの高さが変わる場合に なるべく表示位置がずれないようにする


// 相対的な表示位置を保存
var preXRatio = 0, preYRatio = 0;
if( window.scrollMaxX > 0 ){
  preXRatio = window.scrollX / window.scrollMaxX;
}
if( window.scrollMaxY > 0 ){
  preYRatio = window.scrollY / window.scrollMaxY;
}

// ページの高さが変わる処理

// 変化したページの高さに合わせてスクロール
window.scrollTo( window.scrollMaxX * preXRatio
               , window.scrollMaxY * preYRatio );

設定をHTMLに追い出す

一応 eval 使わない方針で。

HTML


<textarea id="my_config" style="display: none;">
color: rgb(33,33,33)
width: 2.0
</textarea>

JS


function strip(str){
  return str.replace(/^\s+/, "").replace(/\s+$/, "");
}


function readConf(){
  var conf = {};

  if( $id(document, "my_config") ){
    var lines = $id(document, "my_config").value.split("\n");
    var key = null;
    var val = null;

    for(var a in lines){
      var matched = lines[a].match(/^(.+?):(.+)$/);
      if(matched){
        key = RegExp.$1;
        val = RegExp.$2;
        key = strip(key);
        val = strip(val);
        if( key != "" && val != "" ){
          conf[ key ] = val;
        }
      }
    }
    return conf;
  }{
    return {
      lineColor: "rgb(127,127,127)"
      , lineWidth: 2.0
    };
  }
}

DOM要素にスタイルシートを適用する

ちょっとしたものなら


foo.style.color = "red";
foo.style.border = "solid 1px green";
foo.style.margin = "0px";
...

これでもいいが、量が多い場合や後で修正が入りそうな場合は:


function applyRules(elem, rules){
  for(var key in rules){
    elem.style[key] = rules[key];
  }
}

applyRules( elem,
  {
    border: "solid 1px red"
  , width: "20px"
  , height: "20px"
  , ...
  }
);

Enumerable


Array.prototype.select = function(f){
  var newArray = [];
  for(var a=0; a<this.length; a++){
    if( f( this[a] ) ){
      newArray.push(this[a]);
    }
  }
  return newArray;
};

Array.prototype.include = function(target){
  for(var a=this.length-1; a>=0; a--){
    if( this[a] === target ){
      return true;
    }
  }
  return false;
}

その他


// 時間の加減算
var a = new Date();
var diffMSsec = 1 * 24 * 60 * 60 * 1000;
var b = new Date( a.getTime() + diffMSsec );
// または
// var b = new Date();
// b.setTime( a.getTime() + diffMSsec );

// a => Sat Nov 13 2010 18:45:30 GMT+0900 (JST)
// b => Sun Nov 14 2010 18:45:30 GMT+0900 (JST)

>> 古い記事: [雑記] 2007-12
<< 新しい記事: 実践的でサンプル多数で CC BY な Javascriptチュートリアル
** ホームに戻る

コメント

コメントの投稿

管理者にだけ表示を許可する

|
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。