.null_old01

 old01/02/03/04/xx

javascript小ネタ

<script>
var x=y=null;
x=y||0;// xにyがnullなら0を代入。
document.write(x+'<br>');
y=true;
x=(y)?true:false;// if(y){x=true;}else{x=false;}
document.write(x+'<br>');
x=[0,0];// x=new Array(0,0);
document.write(x[0]+'<br>');
x={'y':0,'z':0};// x=new Array('y':0,'z':0);
document.write(x['y']+'<br>');
x=0;x+=1;// x=0;x=x+1;
document.write(x+'<br>');
</script>

 これが最後の記事となるだろうもう書くネタがねえ。

sprite

./slide.html./color.jpg./w3c.jpg./ball.png./text.png。spriteを用いたスライドショーという応用複合スクリプトで17から42の間を自動算出してスプライト表示する。前vipにくれてやったやつを練り直したものだ。長いからソース覗いてくれ。さてスプライトというものはだな受け売りなんだが要するに大きな画像から必要な箇所だけを抜き取り表示する軽量化に使う技術だ。使う事の利点はサーバーに同時に張れるコネクション数だったか画像使いすぎてて読み込めないというものを緩和するもの。少なくともfamilyComputer時代にはすでにあったと思われる技術で非常に便利、画像サイズが画一化されていると指定が容易になる。あらかじめ宣言して構築した物を表示すると考えればいい。
./img.png
という大きな画像から欲しい部分のみを抜き出す、8と39と青いのとcommentが欲しい

<span style="display:inline-table;background-image:url(./img.png);background-repeat:no-repeat;width:32px;height:32px;background-position:-224px 0;"></span>
<span style="display:inline-table;background-image:url(./img.png);background-repeat:no-repeat;width:32px;height:32px;background-position:-192px -64px;"></span>
<span style="display:inline-table;background-image:url(./img.png);background-repeat:no-repeat;width:32px;height:32px;background-position:-256px -192px;"></span>
<input type="text" value="なにもないよ" style="border-color:#8af !important;display:block;background-image:url(./img.png);background-repeat:no-repeat;background-position:bottom -202px right -416px;">
<input type="submit" value="送信できないぼたん">

要するに基準点より引いたり足したところを表示しますよってコードだ。topから-Npx rightから-Npx引いたポジショニングだが対応してないコンポーネントもあるだろう。

共通するところをcssファイルに打ち込み変動するところだけ書く、とie8で表示されないから全部書くしかないね。gammaは一行に対する自動拡大縮小スクロールだがwebkitでズレる。firefoxならi*offsetWidthを*-1すりゃいいんだがwebkitで欲しいのはi*(offsetWidth-1)+1の-+の間ら辺だ。32*32の画像を横に12個連結した384*32の画像を個別設定せず自動で合わせられるかやっててwebkitだと最終的に=0になってくれない。display:inline-block;font-size:12px;font-family:monospace;width:13px;line-height:14px;であるところの要素の現在サイズを取得できないという条件下で最終的に=0にならないとならない。ちょっとずつズレんだよちきしょう。代替策で相対値にしているがズレるね。メモ:相対値で近い値にするならばi=ループ数,x=Math.floor(記事数/画像数*10000)で当初はi*x/1000だけだったが安定しないので(i*x-(i*x+10-i*x)/2)/1000を%としてみるか。つまり正と負の値を求めて間の値を/2して加算か減算するって計算式、~に対する数であるとすると対数かわからん。絶対値はx=要素横幅になり前述しているがi*x*-1をpx指定、自然数に近い数字だと思う。どんな数字の並びかってーとだな

// imgSize=x:384px,y:32px(32*32を横並びに12個)
var tag=document.getElementsByTagName('span'),p=0,img=12,x=0,
ua=navigator.userAgent.toLowerCase();
x=(ua.indexOf('webkit')!=-1)?Math.floor(tag.length/img*10000):tag[0].offsetWidth;
p=(ua.indexOf('webkit')!=-1)?(i*x-(i*x-10-i*x)/2)/1000:i*x*-1;
|~i*x|~10ix|~/2    |~ix-1 |
|   0|   10|-0.005%|   0px|
| 666|- 656| 0.661%|- 13px|
|1332|-1322| 1.327%|- 26px|
|1998|-1988| 1.993%|- 39px|
|2664|-2654| 2.659%|- 52px|
|3330|-3320| 3.325%|- 65px|
|3996|-3986| 3.991%|- 78px|
|4662|-4652| 4.657%|- 91px|
|5328|-5318| 5.323%|-104px|
|5994|-5984| 5.989%|-117px|
|6660|-6650| 6.655%|-130px|
|7326|-7316| 7.321%|-143px|
|7992|-7982| 7.987%|-156px|
|8658|-8648| 8.653%|-169px|
|9324|-9314| 9.319%|-182px|

webkit対応できねえから隠し感覚でいいか。うーん100%に対する比率であればわからん。

参考:いろいろ備忘録よりJavaScriptによる要素サイズの取得

keyAssign

 注釈なしと最新ソースは../common.js。bodyにonkeypress="keyAssign(event);"突っ込んで</body>前にでも<script src="./common.js"></script>入れる。

<script>
var ua=navigator.userAgent.toLowerCase();// toLowerCase全て小文字に変換。
function keyAssign(event){
  var key=(ua.indexOf('msie')!=-1)?event.keyCode:event.which;// msieであるならevent.keyCodeを以外ならevent.whichを突っ込む。
  switch(key){
    case 48:scr('0','ue');break;// keyboard:0
    case 49:scr('0','h3');break;// keyboard:1
    case 50:scr('1','h3');break;
    case 51:scr('2','h3');break;
    case 52:scr('3','h3');break;
    case 53:scr('4','h3');break;
    case 54:scr('0','h4');break;
    case 55:scr('0','h5');break;
    case 56:scr('1','h5');break;
    case 57:scr('2','h5');break;// keyboard:9
  }
}
function scr(n,t){
  var x=y=0;// xとyに使うのは数字という宣言。
  var tag=document.getElementsByTagName(t);// 渡されたタグ入れる。
  var f1=(t)?true:false;// フラグ判定1、渡されたタグがあればtrue、ないならfalse。
  var f2=(n)?true:false;// フラグ判定2、渡された数字があればtrue、ないならfalse。
  var act=document.activeElement.tagName;// アクティブなタグの名前を入れる。
  if(act!='INPUT'&&act!='TEXTAREA'&&act!='SELECT'){// アクティブなのの条件分岐。
    if(tag.length>Number(n)){// 使ってるタグの長さと渡された数字で分岐。
      x=(f1&&f2)?tag[n].offsetLeft:0;// xにフラグ1と2が真であるならタグの数字の左からの座標を入れる。
      y=(f1&&f2)?tag[n].offsetTop:0;// yにフラグ1と2が真であるならタグの数字の上からの座標を入れる。
      window.scroll(x,y);// xとyにスクロール。
    }else if(t=='ue'){// 渡されたタグがueなら。
      window.scroll(0,0);// x0,y0座標にスクロール。
    }
  }
}
</script>

table

 表組み自動生成./attack.html。要約するにcolにcssで横幅指定しておいてtheadにヘッダ付けて強調してデータ打ち込んでtfootにもヘッダ付けて強調してtableを締めくくる。theadとtfootはどこに書いても上と下に表示されるがコピペした時が困る。

h1h2h3
f1f2f3
t1t2t3
t1t2t3
<style>
body{background-color:#fff;color:#666;}
body,table{font-size:12px;font-family:monospace;}
table{margin:0;border:0 #000 solid;border-collapse:collapse;table-layout:fixed;}
tr{line-height:16px;}
tbody tr:hover th{background-color:#bbb;color:#444;border-color:#444;}
tr:hover td{background-color:#ddd;}
tbody th:hover{background-color:#666 !important;color:#fff !important;border-color:#fff !important;}
td:hover{background-color:#ccc !important;}
th{border:1px #fff solid;background-color:#666;color:#fff;text-align:center;}
td{border:1px #000 solid;text-align:left;}
.le{text-align:left;}
.ce{text-align:center;}
.ri{text-align:right;}
</style>
<table>
<colgroup><col style="width:50px;" span="3"></colgroup>
<thead><tr><th>h1</th><th>h2</th><th>h3</th></tr></thead>
<tfoot><tr><th>f1</th><th>f2</th><th>f3</th></tr></tfoot>
<tbody>
<tr><td class="le">t1</td><td class="ce">t2</td><td class="ri">t3</td></tr>
<tr><td class="le">t1</td><td class="ce">t2</td><td class="ri">t3</td></tr>
</tbody>
</table>

これも受け売りだがcssでtable-layout:fixedを指定することにより横のセルを読み込んで表示読み込んで表示となり体感表示速度が向上する。省略すると全部読み込んで表示するだったか少なくとも古いブラウザでは。

colにid指定してtrにonmouseover、outのevent書いて横と縦軸を強調するという手法もある。自動生成すると楽で./attack.htmlがある。今ならセル間の余白潰す。半角スペース2つは消しても動くところだった筈だが意味ないね。

エラー吐かれたしコピーアンドペーストは考えないようにしよう。

tableを複数表示した場合、jsにおいてcolの取得が大変になるためcolという要素をgroup化するというものだ。w3cではerror表示起こすが、ならどうやってcolを変動させるんですかね。errorなんざ知ったことか。groupを消すと「付ける必要のないidやclassが必要になる」。ゆえにhtmlCheckerは広告から追放した。最たるものとしてcssを切った場合、ソースの可読性に対する配慮がみられない。自滅。

擬似table

 tableにcolgroup使うとhtmlエラー吐きやがるからcssとhtmlコード重くなるが書いてみた。使わず以外で取得する術が思い浮かばないからいっそ使わない方向にしよう。ああ嫌だ用途が違うhtmlを無理矢理使うハメになってタグの重複はソースの可読性を低下させる。さておき解説table内のli要素は基本的にline-height:20pxとしていてこれは行間隔、20*行数をheightに突っ込むことでおおむね正しく表示される。ちなみにこれは悪手だ。何故ならこれを複数使った場合に「特定table」の「特定cell」だけを抽出できない。tableを2つ置いた状態で[1]、縦の列全部を装飾する場合に困るでしょう。table[1]のcolgroup[0]内全てを書き換えて表示可変させる場合にも困る。ついでに言わせて貰うとtextareaのcssパラメータ削ったのダレだ、俺が困るじゃねえかwwwwwwアレだ、スクロールバー関連、内側を強制改行かスクロールバー表示か。切り替えスイッチ作ろうとしたらそもそもcss動かねえwwwwww

<ul class="table" style="height:40px;">
  <li class="c1 th ce">※</li>
  <li class="c2 th ri"><abbr title="なまえ">名前</abbr></li>
  <li class="c3 th ri"><abbr title="なまえ せい">姓</abbr>:</li>
  <li class="c4 ri"><input type="text" value="null"></li>
  <li class="c5 th ri"><abbr title="なまえ めい">名</abbr>:</li>
  <li class="c6 ri"><input type="text" value="null"></li>
  <li class="c"><br></li>
  <li class="c1 th ce">※</li>
  <li class="c2 th ri"><abbr title="ふりがな">カナ</abbr></li>
  <li class="c3 th ri"><abbr title="ふりがな せい">セ</abbr>:</li>
  <li class="c4 ri"><input type="text" value="null"></li>
  <li class="c5 th ri"><abbr title="ふりがな めい">メ</abbr>:</li>
  <li class="c6 ri"><input type="text" value="null"></li>
  <li class="c"><br></li>
</ul>

old01/02/03/04/xx

sponsor

 google(search)

 2chよりvip(board)

 R16hellowork(work)

 どっかの区役所

 R18dmm(anime)

 valuecommerce(affiliate)

 mozilla(cssDev)

 w3cCSSchecker(cssChk)

 adobe(img)

 wordPress(cms)

 movableTypePro(cms)

 ecCube(netShopCMS)

 pukiWikiPlus!(wiki)

 TUMO NET(mailForm)

 ascetica(wordpressTheme)

 akismet(spamBlockPlugin)

 jetpack(hackBlockPlugin)

 fileThingie(uploader)

 phpFileManager(uploader)

 R18pcmax(出逢い)

 linksFORgood@yahoo

 newart(billiard)

 日本レスキュー協会