ドットインストール代表のライフハックブログ
![IDEA * IDEA](https://cdn-ak-scissors.b.st-hatena.com/image/square/b9a3485254d26db90a19345cea65747db716ee71/height=288;version=1;width=512/http%3A%2F%2Fwww.ideaxidea.com%2Fwp-content%2Fuploads%2F2010%2F06%2Fcsv_1.gif)
html5securityのサイトに、XSSの各種攻撃手法がまとめられているのを発見せり!ということで、個人的に「お!」と思った攻撃をサンプルつきでご紹介します。 1. CSS Expression IE7以前には「CSS Expressions」という拡張機能があり、CSS内でJavaScriptを実行できたりします。 <div style="color:expression(alert('XSS'));">a</div> 確認 @IT -[柔軟すぎる]IEのCSS解釈で起こるXSS で詳しく解説されていますが、CSSの解釈が柔軟なことともあいまって自前で無害化するのはなかなか困難。以下のようなコードでもスクリプトが実行されてしまいます。 <div style="color:expr/* コメントの挿入 */ession(alert('XSS'));">a</div> 確認 <div s
GoogleがWeb全体のスピードアップにいよいよ本格的に着手, 一社だけではできないと強調 からリンクのあった、 http://code.google.com/intl/ja/speed/articles/optimizing-javascript.html が日本語かと思ったら日本語じゃなかった・・・・。 いやー、意外とというか文字列については、全然知らんかった。 Closureって便利だし、「おぉ〜俺って使ってるジャン」みたいな気になれるからついつい使っちゃうんだけど、高コストなのね・・・・。反省。 ということで、超適当翻訳。どっかの誰かが書いてるかも。 前おき 著者: Google Chromeのエンジニア Gregory Baker, Software Engineer on GMail & Erik Arvidsson 推奨される経験:JavaScriptの実践的な知識 クライ
jQueryを使って画面のアクションを作ろうと思うと、そのコーディングの仕方を含めて習得する必要がある。イベントにもマウスやフォーカス、クリックなどの様々な種類が存在し、その結果として起こすアクションも無数に存在する。それらを適切に判断しながら構築するというのは意外と難しい。 jQueryを使った開発にぜひ! 単純なJavaScriptであれば、オーサリングツールで対応しているものもある。だがjQueryのような高度なJavaScriptフレームワークには対応していない。そこで使うのがIxEditだ。 今回紹介するオープンソース・ソフトウェアはIxEdit、jQueryのビジュアルアクションビルダーだ。 IxEditは既に組み上がっているWebサイトに対して使うライブラリだ。指定されたJavaScriptファイルとCSSを読み込むと、Webサイトにフローティングウィンドウが表示される。そし
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
タイトル変えました。旧タイトル「JavaScriptでよく使う書き方」。よく使うけど毎回忘れる。 正規表現にマッチするかどうか。 RegExp#testを使う。 /abc/.test("abcdefg") // => true String#searchはマッチした位置を返す。マッチしない場合は-1。先頭にマッチすると0でfalseなので注意。真偽値が欲しい場合はString#searchを使わない。 "abcdefg".search(/xxx/) // => -1 "abcdefg".search(/def/) // => 3 "abcdefg".search(/abc/) == false // => true 正規表現の部分マッチを得る。 部分マッチを得るには、RegExp#execかString#matchを使う。execとmatchの速度は大して変わらない。 正規表現のベンチマー
XMLはシステム間のメッセージを授受するフォーマットとしてよく使われている。が、書き方が冗長的で面倒くさい。かつては何でもかんでもXMLで、という風潮があったが、その面倒さからJSONやYAMLで処理されることも増えている。 元のXMLファイル 特にJavaScriptで扱うならJSONの方が使い勝手が良い。そこで既存のXML文書を変換するのがxml2json.xsltだ。 今回紹介するオープンソース・ソフトウェアはxml2json.xslt、XMLをJSONに変換するXSLTだ。 xml2json.xsltは既存のXML文書に対してxml-stylesheetとして設定することで利用できるXSLTだ。全てのパターンで使える訳ではないようだが、サンプルを見る限り大抵の項目は再現できている。 変換語。ユニコードにも対応 xml2json.xsltを使えばXMLに比べると操作が遥かに簡単になり
本気にonclick 今onclickが熱いらしい。本気でJavaScriptを学びたい人は下記のサイトをご覧ください。 第1回:そろそろ本気で学びませんか? 本気でやるならonclick属性は避けてライブラリを活用すべきCommentsAdd Star JavaScript のイベントハンドラCommentsAdd Star onclick 属性問題について 本気でやるならprototype.jsやjQueryやYUIは避けてonclickを使うべき 本気でやるならクロスプラットフォームは避けてMozillaアプリを作るべき onclickと本気とIE イベントハンドラを分離するUnobtrusive Scriptingという考え JavaScriptにはUnobtrusive Scriptingというスクリプティングの考えがあり、JavaScriptをソースコード上に記述するのは良くな
以前紹介した画像の一部を拡大表示するスクリプト「jQZoom」の機能がバージョンアップしたjQZoom Evolutionがリリースしました。 jQZoom Evolution demo 主なバージョンアップは、ズームウインドウのカスタマイズ、タイトル表示、エフェクトなどです。 オプションでは、ズーム時のタイプ、ズームウインドウのサイズと位置、タイトルの有無、フェードの有無とスピードなどが変更できます。 jQZoom EvolutionはjQueryのプラグインのため、実装にはjquery.jsが必要です。
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
Ajaxを使う上でよく使われるのがJSONやXML形式だ。最近では特に冗長性がなく、JavaScriptでそのまま使える分、JSONが好まれる傾向にある。しかしコンピュータ上は読みやすくとも、人向けのフォーマットとは言えそうにない。 例えばデバッグの際にJSONフォーマットをチェックする必要があった場合、その解析は非常に面倒だ。そこで使ってみたいのがJSON Editorだ。 JSON EditorはAdobe AIR製のフリーウェアで、JSONやXMLの内容をパースして表示、編集できるソフトウェアだ。 JSON Editorを使うと、出力されたJSONをそのまま貼付けてReadボタンを押せばテーブル形式に並べ替えて表示してくれる。これで階層がどれくらい深いのか、希望した通りにデータが並んでいるのかといった情報が簡単に分かるようになる。 多彩なショートカットキーがある 逆にデータを作成して
jQueryのコードを良くする5つのTIPS 5 Tips for Better jQuery CodeでjQueryのコードを良くする5つのTIPSが紹介されています。 DOM中にデータを保存できるdataメソッドを使おう $('selector').attr('alt', 'this is the data that I am storing'); // then later getting that data with $('selector').attr('alt'); 「alt」などのHTMLにデータを保存しておくと後で取り出せなくなってしまうことがあるから良くない。 $('selector').data('meaningfllname', 'this is the data I am storing'); // then later getting the data with
※ 画面は公式サイトデモより JavaScriptのデバッグによく利用されるものと言えば、alertだろう。簡単に使えて便利な関数だが、ブラウザの処理が止まってしまったり、長文の表示が難しいなどデメリットも数多い。 alertとお別れするためのJavaScriptデバッグツール そこで使ってみたいのがBlackbirdだ。Google Code上で公開されているオープンソースのJavaScriptアラートだ。 Blackbirdは見た目の格好いいフローティングダイアログにログを表示できる。デバッグ、インフォ、ウォーニング、エラー、プロファイルの5つのメッセージパターンが設定できる。Blackbirdのウィンドウでは各メッセージタイプの表示、非表示が切り替えられるようになっている。 表示位置の変更、表示するメッセージの種類が変更できる さらにF2キーを押して表示/非表示を切り替えたり、Shi
はてブだと埋もれるのでこちらに書き足してきます。 jQuery 基本機能 本家 jQuery.com リファレンス jQuery 日本語リファレンス jQuery 開発者向けメモ jQuery リファレンス- openspc2 jQuery 1.2.6 リファレンス - StackTrace チートシート HTML/CSS, jQuery, WordPressなどウェブ制作者のためのチートシート集 - coliss スライド・関連情報 はじめての jQuery jQueryのプレゼンVIDEO - JAM LOG 第1回 Silverlight vs. jQuery+ASP.NET AJAX - @IT チュートリアル jQuery 入門 - openspc2 jQuery を使って Ajax 開発を単純化する - IBM jQueryの魔法 - All About jQuery ではじめ
「プログラマのためのJavaScript」の番外シリーズ -- いやっ、ホントに。 これはシリーズのハブエントリーです。番号を(0じゃなくて)1にしたのは、全体目次だけじゃなくて内容が含まれるから。 ※ 印刷時にはサイドバーは消えるはずです、お試しください。 シリーズ全体目次(予定) (この記事;総論) 速攻速習編 自己適用からゲーデル化へ 「展望」への緊急パッチ(オハナシだよ) Reflective JavaScript 停止問題の構造 不完全性定理の構造 今回の内容: ゲーデルの不完全性定理とプログラミング ゲーデルが示したこと 不完全性定理の兄弟 -- 停止問題 JavaScript使うんだもんね 関連する記事(参考) 次の記事 速攻速習編 ●ゲーデルの不完全性定理とプログラミング 「ゲーデル」(人名;Kurt Godel、'o'の上に点々が付いてる)や彼の「不完全性定理」とかって、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く