2009-01-01から1年間の記事一覧
2011-07-10追記 モダンブラウザでは、 typeof /^a/ は "function" ではなく "object" に修正されています。2009年10月(このエントリの初出)時点で /^a/("a") と記述可能な場合がありましたが、現在はエラーになります。2010-01-21追記 http://d.hatena.ne.jp…
Safari, Chrome, Firefox, Opera では、 /^[a-z]+(\d+)/("abc123")とすると、 /^[a-z]+(\d+)/.exec("abc123")相当の動作をするようです。 IE だと「関数が見つからない」とエラーになります。寝ぼけながら書いたコードが IE 以外だとまともに動いちゃったり…
![はてなブックマーク - /^[a-z]+(\d+)/("abc123") という書き方が許容されているみたい(IE除く)](https://b.hatena.ne.jp/entry/image/https://uupaa.hatenadiary.org/entry/20090928/1254120454)
クラスには、継承とカプセル化の役割があります。 JavaScript は、クラスベースの継承をサポートしませんが、カプセル化は JavaScript でも自然に扱えます。 # 継承は委譲などで代用できますし、ダックタイピングという手もあります。以下は、 [1] クラス A1…
オレオレ要素が消せない → オレオレプロパティが消せない 余談だけどそれは「属性（アトリビュート）」またはJS的に「プロパティ」と呼ぶものだと思う。「要素」だとHTML要素のことだと思ってしまう。 by Yuichirou たしかに。 Yuichirou さん ありがとう! …
<html><head><title></title> <script src="uu.js"></script> <script src="uu.ev.js"></script> <script src="uu.css.js"></script> <style> div { background-color: red; } .mark { background-color: lime; } </style><script> function boot(uu, $) { uu.exp(); mix(win, { TOP: 1, LIST: 2 }); body(h…</head></html>
こういう(↓) HTML を、 JavaScript で簡潔に表現できたり [199 byte] <body> <h1>-DEMO-</h1> <div id="a" class="mark">node1</div> <div id="b" class="mark">node2</div> <div id="c" class="mark"> <ul> <li>node3-1-1</li> <li>node3-1-2</li> <li>node3-1-3</li> </ul> node3 </div> </body>[191 byte] body(h1(tx("-DEMO-")), div("i…
追記: apply("add string") で何が渡ってるのか見てみました。 Chrome以外のブラウザは new String("add string") が渡されてました function func1(var_args) { func2.apply("add string", arguments); // this に "add string" そのものを渡す } function …
element.style.xxx にアクセスするには、"css-prop" ではなく "cssProp" の形でアクセスする必要があります。このとき行われる変換は camelize と呼ばれ、JavaScriptライブラリの多くは以下のような実装を行っているようです。 # camelize = らくだのこぶの…
追記 「forEach より for のほうが速いよ」って書くときに、一言「でも forEach を使わないとハマるコードもあるよ」と付け加えておいたほうがいいんでないの forとforEach - JavaScriptで遊ぶよ - g:javascript ごめんなさい、いつも端折ってます。…と。そ…
昨日の続きです。ブラウザで動作する JavaScript では、トップレベルオブジェクト(window)を省略できます。これにより、window.setTimeout や window.document と書くかわりに setTimeout や document と書いても動作します。今日は、省略すると速くなるのか…
正規表現オブジェクトをどのように配置すれば効率的なのか調べました。 配置パターン A. ループ内にべた書き function job(expr, n) { var i = 0, match; for (var i = 0; i < n; ++i) { match = /regexp1/.exec(expr); match = /regexp2/.exec(expr); } } B…
uuAltCSS.js, uuCanvas.js, uuQuery.js でサポートするブラウザを変更します。 IE6 〜 IE8 IE6の後方互換モードはサポートしません。 Opera9.5x 〜 Opera10.0 Opera9.2x は今後サポートしません。 Firefox2.0 〜 Firefox3.5 Safari3.1 〜 Safari4.0 Safari3.…
JavaScript の勉強を開始したときに「文字列の連結には Array.join() を使え」といった記事を見た覚えがあります(ソース失念したけど、 Operaの技術文書だった気がする ⇒ IE の技術文書だったかも)。一年ほど信じてて、念のためベンチとってみたら「うそやー…
問題1. 子要素に position: absolute + right: が設定されていると、子要素が身切れる <html><head><title></title> <style> .view-box1 { padding: 10px; position: relative; top: 10px; left: 10px; } .box1 { border: 4px solid navy; -uu-border-radius: 4px; -uu-box-shadow: skyblue 10p</head></html>…
HTML5 + CSS3 + クロスブラウザ + リキッドレイアウト なデモです。 <html class="ifnojs"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>HTML5 demo</title> <style> @import url(html5.bone.css); @import url(html5.efx.css); </style> <script type="text/xaml" id="xaml"></meta></head></html>
uuAltCSS.js は uuQuery.js にセレクタの処理を委譲しています。 <style> article>div:nth-child(even)>section { -uu-background-image: url(../../img/cover01.jpg); } </style> <article class="round"> article <div class="view"> <section class="round">section</section> </div> <div class="view"> <section class="round">section</section></div></article>
WebKit530未満(Safari3.x)には、Text API(fillText, strokeText, measureText) が実装されていません。 また、window.CanvasRenderingContext2D が存在しないため、prototype ベースでの機能拡張ができません。uuCanvas.js では、getContext() をラップする…
uuAltCSS.js version 0.2 をリリースしました。http://code.google.com/p/uupaa-js-spinoff/ setExStyle(), getExStyle() を追加。動的なスタイルの変更が可能になりました -webkit-xxx ではなく -uu-xxx を見るように仕様を変更しました 理由は Safari3.x …
uuAltCSS.js ver 0.2 の開発中です。 .bg { -uu-box-shadow: white 1px 1px 20px; -uu-background: url(../../img/grad1.png) skyblue repeat-x left bottom; } .radius { -uu-border-radius: 40px; } .border { border: 10px solid black; } とした場合に、…
uuAltCSS.js version 0.1 は、CSS を元に静的なレンダリングを行っていましたが、次の version では JavaScript による動的なスタイルの変更をサポートする予定です。 デモ http://pigs.sourceforge.jp/blog/20090814/20090814.htm 以下の API で CSS の解析…
IE になんちゃって text-shadow: を実装する目処が付いた。currentStyle.display が "inline" なら "inline-block"に、IE6,IE7で currentStyle.width が "auto" ならstyle.zoom = 1 にするといいらしい。コードはこんな感じ。ShadowフィルタとMotionBlurフィ…
以下は問題を判りやすくするために最小化したコードです。 Firefox3.5 + Firebug1.4.1 で実行し、_breakpoint; の箇所にブレークポイントを設定し、ステップ実行すると、「cannot access optimized closure」というエラーが発生します。ブレークポイントを設…
uuAltCSS.js READMEブラウザからCSSを引き剥がし、古いブラウザでもCSS3セレクタを使ったWebページデザインが可能になる夢(?)のJavaScriptライブラリの初版リリースです。豪華なオマケもついてます。説明不足な点や、色々と問題もあるとは思いますが精一杯作…
ぐあい悪いけど無理してログ書くよ。昨日の日記 ⇒ 日食 と uuAltCSS.js と CSS3 multiple background image - latest log だと、画面幅を縮めると魚の尻尾みたいなレンダリング(↓)してましたが、今日はそのへんを主に改善してました。 魚の尻尾は、border-ra…
http://uupaa-js-spinoff.googlecode.com/svn/trunk/uuAltCSS.js/demo/box-shadow/solid_version/multibg1.htm色々と制限はありますが、CSS3 の multiple background image を uuAltCSS.js に実装してみました。日食の画像と、モノリス(?)みたいなステージと…
http://uupaa-js-spinoff.googlecode.com/svn/trunk/uuAltCSS.js/demo/box-shadow/solid_version/demo.htmIE6+, Firefox2+, Safari3.1+, Chrome1+, Opera9.5+ で動きます。このデモで使っている CSS3 プロパティは border-radius: box-shadow: -webkit-gradi…
IE の window.resize イベントは、いくつかの問題を抱えています。 function onresize() { (何か) } window.attachEvent("onresize", onresize); うっかり無限ループする(無限に再描画が走る) 重い(特にIE6) 解決していきましょう。 無限ループ/無限リドロー…
uuAltCSS+.js のコードリード用のエントリです。コードを知らない方には無意味なエントリです。border-radius: 用の処理に、「ボーダー部分をcanvasで描画し、元々borderが設定されていたノードの borderColor を透明にする」という処理がありますが、IE6 は…
Operaの開発者ツール(Dragonfly)で、JavaScriptに特定のコードが含まれていると、コードビューアが「スクロールにコードが追従しなくなる」不具合を起こします(上記画像の白くなってる部分には、本当はコメント行が表示されてるはず) また、任意の位置にブレ…
Firefox2, Opera9.27, Safari4(リファレンス) 参考 http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20389157,00.htm
