HTML崩壊 meltdown.js - KAZUMiX memo
#ff0000">2008年12月29日追記:逆再生する新バージョン「HTML崩壊Reverse! meltdown2.js」をアップ #ff0000">2009年4月21日追記:さらに進化したバージョン「HTMLの暴走(meltdown3)」をアップ まずは軽いページでお試しください。例えば Google とか。*1 javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";var da=new Date();s.src="http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown/meltdown.js?"+da.getTime(); document.body.appendChild(s)})(); これを適当なページのアドレスバ
ワリオランドシェイクみたいに HTML が崩壊するブックマークレット（とそのソースコード） - てっく煮ブログ
as, box2dワリオランドシェイクと YouTube のコラボプロモーション が面白かったので、似たようなものを作ってみました。次の文字列をコピーしてアドレスバーに突っ込むと、HTML が崩壊します。javascript:(function(){var d=document; var s=d.createElement("script"); s.charset="UTF-8"; s.src="http://tech.nitoyon.com/meltdown/meltdown.js?"+(new Date()).getTime(); d.body.appendChild(s)})();崩壊するのは画像だけなので、画像があるページで試してみてください。このブログだとこんな具合。画像はドラッグすることも可能です。あまり画像が多いと重くなりすぎるのでご注意を。仕組みFlash と JavaSc
JavaScriptによるCSSの操作 | 暴満館 ～The House of full Violence～
またFirefoxは短縮形で取得しようとすると、設定していないプロパティにデフォルト値が入った状態で返ってくるので注意する。 getStyleValue( "div.hoge", "background" ) //Mozilla : rgb(17, 34, 51) none repeat scroll 0% 0% ルールを削除する {#deleteRule} function deleteRule( index, sheetindex ) { if( sheetindex == undefined ) sheetindex = 0; document.styleSheets[ sheetindex ].deleteRule( index ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらな
Javascript cssRules - とみぞーノート
1. 概要 Javascriptからスタイルシート内のルールを変更する処理のまとめ。スタイルシートそのものを変更したい場合は「Javascript 動的なCSSの適用」を参照。 2. スタイルシート関連のオブジェクト Javascriptからスタイルシートのルールを操る際に関係するオブジェクトを図1にまとめる。FireFoxとIEで若干扱いが異なるので注意が必要。 2.1 stylesheet オブジェクト まずドキュメント内のスタイルシートを扱うstylesheetオブジェクトがある。stylesheetオブジェクトはドキュメントが読み込んでいるCSSファイルや<style>タグで指定したCSS毎に存在する。 ドキュメント内のstylesheetオブジェクトは全てdocument.styleSheetsに格納されており、document.styleSheets[0]のようにして参照できる
ProtoFlow - Coverflow-like javascript library
ProtoFlow is a coverflow effect written in Javascript. It uses Prototype and Scriptaculous to do bulk of the work and it uses Reflection.js to do all the image reflections stuff! Well mainly because I felt like it. There are few other coverflow implementations out there but I couldn't find any that used Prototype and Scriptaculous! Its fairly easy to use this lib. Just follow the steps: Add Protot
fladdict.net blog: イベント・ドリブンなJavaScriptのやり方
Flashでに学ぶ非同期通信のノウハウのって感じのお話。JavaScriptでオブザーバパターンを用いて、イベントドリブンなコード（addEventListener等）をバリバリ書く方法です。 というかFlashで言うところの、mx.events.EventDispatcherクラスの自分なりの移植なわけですけど。 このEventDispatcherクラスを使うと、W3CのDOM3にそれなりに対応した、イベントモデルを自作のJavaScriptのオブジェクトに実装できます。これで素晴らしきイベントドリブンの世界が楽しめます。 function EventDispatcher(){} /** EventDispatcher.initialize( obj ) オブジェクトobjに、W3C DOM3互換のイベント通知機能を追加します。 これによりobjは、onLoad等のイベントを発行すること
DOMのJavaScriptイベントハンドラは引数が固定されている、という制限を回避する方法 - IT-Walker on hatena
これもはまって、解決策がなかなか見つからなかった・・ どういうことかというと、良くある話です。 DOMを使って、onclickプロパティに関数を代入したり、addEventListener/attachEventメソッドを使用してイベントハンドラを登録したりするとき、その関数に引数を渡したい時があります。 普通は、DOMのイベントハンドラと言えば引数なしか、イベントオブジェクトを一つとるものしか受け付けられません。つまり、HTMLの属性を用いた昔ながらの方法だと以下のコード内のrowSelectedに該当することが、DOM + イベントハンドラの設定では実現できないことになります。 <table> <tr onclick="rowSelected('0');">..</tr> <tr onclick="rowSelected('1');">..</tr> </table> 例に挙げたこのテ
連載：Ajax時代のJavaScriptプログラミング再入門「クロージャの仕組みを理解する」
クロージャの仕組みを理解する スコープについて理解したところで、本稿最後のテーマとして「クロージャ」について触れておくことにしよう。クロージャとは、ひと言でいうならば、「ローカル変数を参照している関数内関数」のこと。 もっとも、これだけの説明ではなかなかイメージがわきにくいと思うので、具体的にクロージャを利用したコードを1つ挙げてみよう。 function myClosure(init) { var cnt = init; return function() { return ++cnt; } } var result = myClosure(10); ［A］ window.alert(result()); // 11 ［B］ window.alert(result()); // 12 ［C］ window.alert(result()); // 13 ［D］ 一見すると、myClosur
二度押し防止の onsubmit で disable にするやつ :: Drk7jp
もう２年ほど前に話題になったアレなんですけど、今更ながらあるサービスでこの仕組みの導入を検討しています。 onsubmit で submit ボタンを disable にしてユーザビリティを良くする - naoyaのはてなダイアリー submit ボタン disable 技の罠 - naoyaのはてなダイアリー onsubmit で submit ボタンを < disable にしてユーザビリティを悪くするのはやめてください - のヮの うんこ♥ onsubmit で disable にするやつ - 鷹の島 onsubmit の disable 化ですが既に議論が終わっているように、onsubmit disable の実装方法として、 onsubmit イベント発生時に submit 要素を disable にして値をサーバへ渡すための hidden 要素を生成する方法 setTimeou
ウェブリブログ：サービスは終了しました。
「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 ※引っ越し先ブログへのリダイレクトサービスは2024年1月31日で終了いたしました。 BIGLOBEのサービス一覧
はてなブログ | 無料ブログを作成しよう
思いは言葉に。 はてなブログは、あなたの思いや考えを残したり、 さまざまな人が綴った多様な価値観に触れたりできる場所です。
JavaScriptの変数とスコープ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 一度しっかり試しておきたかった変数とその有効範囲について。 JavaScriptには変数の型という考え方がない（任意のデータ型の値を代入できる） JavaScriptでサポートされるデータ型には、基本型と参照型がある 参照型の変数には、参照が格納される（実際のデータ値ではない） 関数、配列、オブジェクトなどが参照型 変数の有効範囲を、その変数のスコープという 暗黙的に宣言された変数は、必ずグローバル変数になる 関数の内部で暗黙的に宣言された場合でも、グローバル変数になる var文で宣言した変数は、ローカル変数になる ローカル変数のスコープは、その変数が宣言された関数の
第4回 JavaScriptでオブジェクト指向プログラミング ― ＠IT
JavaScriptが、いま注目を浴びている。 JavaScriptがこれだけの注目を浴びた理由の1つとして、Ajax技術の登場とも相まって、JavaScriptに対する確かな理解の必要性が高まったという事情は否定できない。しかし、それだけでは説明できない急速な注目の理由として、もう1つ、JavaScriptという言語そのものが持つユニークさが開発者の目を引いたという点は看過できないだろう。 もっとも、このユニークさは同時に、多くの開発者が感じているJavaScriptに対する苦手意識と同義でもある。これまでVisual BasicやC#、Javaといった言語でオブジェクト指向構文になじんできた開発者にとって、JavaScriptのオブジェクト指向構文はいかにも奇異なものに映るのだ。ようやくクラスという概念を理解した開発者が、JavaScriptという言語の背後にたびたび見え隠れする「プロ
JavaScript の配列と連想配列の違い - IT戦記
id:cheesepie:20070131:1170172709 最近は、こういう風に JavaScript を勉強する人が増えていてとても嬉しいです ＾＾ id:cheesepie さん頑張ってください！ で、ちょっと配列と連想配列の使いかたが違うようなので、エントリーを書こうと思いました。おせっかいだったらすみません＞＜ ！ やっぱり、このへんが JavaScript の難しいところのひとつなのだろうか。 ということで、 JavaScript の配列と連想配列の違い いってみよおー 連想配列とは JavaScript では連想配列は一番シンプルなオブジェクトのことである。つまり、すべてのオブジェクトは連想配列である。 以下のすべての連想配列はまったく同じものである。 // 1 var obj = { hoge: 'hoge' }; // 2 var obj = { 'hoge': 'h
gmailで添付ファイルが自動でアップロードされるしくみ - bits and bytes
gmailでメールを書くとき、添付するファイルを選んでからしばらくすると、いつの間にか添付ファイルがアップロードされています。 添付するファイルを選ぶと、はじめファイル名が表示されていたのが 自動的にアップロードされて、名前とファイルサイズが表示されています！ 実は、あまり名前も聞かなくなった Google Page Creator がリリースされたときにいちばんびっくりしたのはページの右下にこのgmailの自動アップロードとよく似たしくみがあったことでした。で、さっそく解析してマネしてみたことがあります。今回はgmailでその仕組みを見てみます。 ちなみにその Google Page Creator には、ログインすると右下にこんな ファイルをアップロードするのに使う部分があります。 gmailの場合、メールが自動保存されるタイミングでアップロードされているかんじでしたが、こっちのはBr
次世代JavaScriptの形:Geekなぺーじ
8年間の標準化活動の成果として今後変化していくJavaScriptの形を紹介しています。 なお、JavaScriptの標準化は未だ過程であるため、ここで紹介された事が将来実装されない可能性もあるそうです。 いや、でも、聞いていて思ったのですがこれはもう違う言語ですね。。。 下位互換があるので今まで作られた物は問題なく動作するはずなのでしょうが、 CとC++に微妙な互換性があるように、互換性をつけたばかりにゴチャゴチャになる事も将来ありそうな予感がしますね。。。 まあ、でも全く違う物として出してしまうと「何それ？ハァ？」という感じで世界に華麗にスルーされてしまうでしょうし、悩ましいところなのだと予想します。 以下、ビデオの要約です。 私はJavaScript初心者なので、要約が間違っているかも知れません。 また英語の誤訳などが含まれているかも知れないので、詳細はビデオをご覧下さい。 Java
Eloquent JavaScript
This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here, or buy your own paperback copy. Written by Marijn Haverbeke. Licensed under a Creative Commons attribution-noncommercial license. All code in this book may also be considered licensed under an MIT license. Illustrations by various artists: Cover by Péchane Sumi-e. Chapter illustrations by Mad
Nao Haida's weblog: JavaScript の オーバーロード
jQuery のコア開発者として知られている、John Resig さんのブログに JavaScript Method Overloading という大変面白い記事がありました。JavaScript のオーバーロードソースコードを見てみます。簡潔で素晴らしいコード。// addMethod - By John Resig (MIT Licensed) function addMethod(object, name, fn){ // 指定されたオブジェクトには， // 既に同じ名前のメソッドが定義されている // かもしれないので，一時変数に保存しておく var old = object[ name ]; // オブジェクトのプロパティに関数定義を上書き． object[ name ] = function(){ // 呼び出しされたメソッドの引数の数と関数に定義されている // 引数の数が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
style - MDC
Drawing a single Polyline using SVG [draw] [svg] [polyline] [create] [mousemove] [ecmascript] [mousedown]