[を] 削除ボタンで箱ごと消すイデオム？
削除ボタンで箱ごと消すイデオム？ 2006-10-25-6 [Tips] Webページ上で、JavaScriptにより、「削除ボタン」で箱ごと消す仕掛け。 一個前の中身、中身、中身 × 中身、中身、中身 一個後の中身、中身、中身 <style> .box {margin:10px; padding:10px; border:solid 1px black;} .delete {background-color:black; color:white; cursor:pointer;} </style> <div class="box"> 一個前の中身、中身、中身 </div> <div class="box"> <span class="delete" onclick="this.parentNode.parentNode.removeChild(this.parentNode)" >×
JavaScript ガイド - JavaScript | MDN
入門編 概要: 入門編 このガイドについて JavaScript について JavaScript と Java ECMAScript ツール 次に来るもの 文法とデータ型 概要: 文法とデータ型 基本構文とコメント 宣言 変数のスコープ 変数の巻き上げ データ構造とデータ型 リテラル 制御フローとエラー処理 概要: 制御フローとエラー処理 if...else switch try/catch/throw エラーオブジェクト ループと反復処理 概要: ループと反復処理 for while do...while continue break for..in for..of 関数 概要: 関数 関数の定義 関数の呼び出し 関数スコープとクロージャ 実引数 と 仮引数 アロー関数 式と演算子 概要: 式と演算子 代入演算子 と 比較演算子 算術演算子 ビット演算子 と 論理演算子 条件演算子 数値
それすぐ実行！JavaScript！ - IT戦記
思った JavaScript はすぐに実行してみましょう！ ブラウザの URL 入力欄に javascript:(function() { /*実行したいコードを書く*/ })()FireBug を使ってる人は、コンソール開いて実行したいコードを書く。 たとえばこんなことができます。 これらの例は僕が日頃使っているものです。 グローバルで使える関数を列挙する(Firefox Only) FireBug用 for(var n in window) if(typeof window[n]=='function')console.log(n); URL用 javascript:(function(){var b='';for(var n in window)if(typeof window[n]=='function')b+=n+"\n";alert(b)})() Object.prototyp
js-html - JavaScriptを用いたHTMLの省略記法 - Personnel
次のHTML文書の断片をDOM APIを利用して生成してみます： <div class="container" id="foo"> <h2>だいあろぐ</h2> <label> <input type="button" onclick="alert(true)" /> </label> </div> 実際にやってみると次のようになります（一例）。 var div = document.createElement('DIV'); var h2 = document.createElement('H2'); h2.appendChild(document.createTextNode('だいあろぐ')); div.appendChild(h2); var label = document.createElement('LABEL'); var input = docu
404 Blog Not Found:javascript - DOMMakerで楽々DHTML
2006年09月28日02:00 カテゴリLightweight Languages javascript - DOMMakerで楽々DHTML DHTMLは便利なものだが、DOM関連の関数でHTMLを「描く」のは、あまりに面倒だ。 たかだか <a target="blank" href="http://blog.livedoor.jp/dankogai">404 Blog Not Found</a> とやるのに、 var a = document.createElement('a'); a.setAttribute('target', 'blank'); a.setAttribute('href', 'http://blog.livedoor.jp/dankogai'); a.appendChild(document.createTextNode('404 Blog Not Found'
Kazuho@Cybozu Labs Ajax な HTML ページのソースコードを表示する
« Japanize - 翻訳範囲の制御方法を検討中 | メイン | Japanize 拡張機能バージョンアップのおしらせ » 2006年10月02日 Ajax な HTML ページのソースコードを表示する 勢いだけで書く bookmarklet 第２弾です。 多くのウェブブラウザでは、メニューからウェブページのソースコードを表示することができます。しかし、この方法で表示される HTML はダウンロード時のデータなので、Ajax を多用しているウェブサイトのコードを解析する際には役にたちません。 Ajax により改変された、現在表示中の HTML のソースコードを確認するには、以下のようなブックマークレットを使うと便利です注。 javascript:void(window.open('', '', 'scrollbars=yes,dependent=yes').document.write
javascript - event.target で IDを省略 : 404 Blog Not Found
2006年09月22日02:30 カテゴリLightweight Languages javascript - event.target で IDを省略 DHTMLの世界では、DOM objectにはみんなIDをふっておいて、document.getElementByID(id)でobjectを取得してそれをいじくるというのが王道ですが、いじくる対象がイベントを発生させたobject自身しかないならIDは省略できるいうお話。 よくあるのは、 function foo(id){ // あるいは // function $(id){ return document.getElementById(id) } // を定義しておいて$(id)を使う var elem = document.getElementById(id); // ... } とやってから <a href="#" id="bar
IT戦記 - JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念
おそらく、JavaScript を使いこなす肝は setInterval、setTimeout、イベントによる関数の実行を理解することだと思う 例えば 次のコードの結果を考えたとき document.write("hoge\n"); setTimeout(function(){ document.write("fuga\n") }, 1000); document.write("piyo\n");普通に JavaScript を使いこなしてる人なら、hoge → piyo と表示して、 1 秒後に fuga が表示されるな。って思うはずなんです。 でも、 JavaScript を始めたばっかりの人の中には、 hoge と表示したあと 1 秒後に fuga → piyo と表示するな。って思ってる人が非常に多い。(経験的に) 何故か？ たぶん、どのサイトの setTimeout の説明を見て
IT戦記 - ベンチマークツール公開
最近 またしても、JavaScript のベンチマークを取らなければならない仕事が来たので、 ツールをキレイにしました。 それを公開します。(ダウンロードは一番下にあります。) 使い方 script タグで benchmark.js を読み込んで、以下のように連想配列の関数群を渡すだけです。 benchmark({ 'ほげほげの計測': function() { ...... }, 'ふがふがの処理の計測': function() { ...... } }); 結果は以下のように表示されます。 *** ほげほげの計測 *** result : 0.0011[ms] *** ふがふがの処理の計測 *** result : 0.111[ms] 表示された秒数は 関数の中身を一回だけ実行する時間です。 関数呼び出しのコストは差し引かれています。 また、FireBug を使っている場合は benc
最速インターフェース研究会 :: 実践JavaScriptで配列をシャッフルする方法リファクタリング
JavaScriptで配列をシャッフルする話を見て、そういえばArray#shuffleは以前書いた記憶があるなーと思って調べてみたらコピペだった。 http://www.fumiononaka.com/TechNotes/Flash/FN0212002.html Fisher-Yatesというアルゴリズムだそうです。 Array.prototype.shuffle = function() { var i = this.length; while(i){ var j = Math.floor(Math.random()*i); var t = this[--i]; this[i] = this[j]; this[j] = t; } return this; } a = [1,2,3,4,5]; a.shuffle() // 3,1,5,2,4 a // 3,1,5,2,4 ごく普通に実装
JavaScriptで配列をシャッフル
配列をシャッフル、つまりランダムに要素の位置を入れ替えるというのを、sortメソッドを使ってやってみたのだけど、明らかにダメダメなものになってしまった。その後、あーでもないこーでもないと考えたのだけど、算数が得意すぎて頭が痛くなった。ということを某所でぼやいたらはてのくんがコードを見つけてくれた。どうやらFisher-Yatesという有名なアルゴリズムでやると良いらしい。 最初に書いたコードは、 var a = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9); a.sort( function (a, b) { return Math.ceil(Math.random() * 3) - 2; } ); というもの。sortメソッドは、パラメータに与えられた関数が負の値・0・正の値を返すことによって要素の順序を決定するので、その関数がランダムに値を返せばランダ
テキストエリアとかリサイズ可能にする JavaScript
■ テキストエリアとかリサイズ可能にする JavaScript 好評の、読み込ませるだけシリーズ の6番目。 このスクリプトを読み込ませるだけで、ウェブ上にある TEXTAREA とかその他色々好きな要素がリサイズ可能なやつに大変身。とりあえずサンプル見るのが手っ取り早いです。 実際の動作サンプル テキストエリアの右下にマウスカーソルを持っていくとカーソル形状がかわるので、そのままドラッグするとサイズも変わります。 自分はグリモンスクリプトで快適なんですが、サービス提供側でこういう機能を提供してくれたら幸せな人が増えるんじゃね？とか思ったので作ってみました。 実際のリサイズ方法に関しては、愛用している Changing <textarea> Size のコードが大変参考になりました。ありがとうございます。 コードは次の通りです。 メイン部分。 var ElementResizer = {
いわゆる「闇黒式引用」
これ…引用元のURIがコピペできないのはどういうわけなのか（そーす開いて探したぞ）あと対象のリンクぐらい入れて欲しい 引用元URIはCSSで自動生成しています。 blockquote:after{ display: block; content: "引用元URI: "attr(cite); color: #999; font-size: 85%; text-align: right; border-top: dashed 1px #999; } Firefox だと content された文をコピペできないぽいですが Opera なら可能です。マンセー。あと Firefox をお使いなら、引用文の上にマウスポインタを置いた上で右クリック→プロパティ(P)から引用元情報を参照できます。あとはてブユーザなら JavaScript を有効にしているはずで、それならあれこれポッ
hxxk.jp - txqz への先読みと質問
Re: はてなブックマーク - AAぶろぐ_仏苦魔悪 - 最新のものしかブックマークしてはいけないの? これ...引用元のURIがコピペできないのはどういうわけなのか（そーす開いて探したぞ）あと対象のリンクぐらい入れて欲しい というコメントを見る限り、 Firefox を使っているのでしょうか ? txqz の CSS を完全に解析したわけではないので正確ではないかもしれませんが、 :before 擬似要素 / :after 擬似要素の活用例 - blockquote 要素で引用元の明示のような手法で書き出しているのでしょう。 IE 6.0 で最新のものしかブックマークしてはいけないの? を見ると、引用元のタイトルや URI は書き出されませんし。 ( その代わり、引用部分にマウスをホバーさせるとあれこれポップアップによる、引用元のタイトルと引用元へのリンクアンカーがブラウザ上に表示されま
Collection & Copy - そのリソースを訪問済みか判定する
JavaScriptリンク要素のアドレスなどをユーザーが訪れたことがあるか否かをJavaScriptから知る方法を以前調べたがわからなかった。多分、プライバシーの問題の絡みで存在しないのだと勝手に合点した。今日、CSS(display:none) + 擬似セレクタ(:hover) + 要素の高さ(offsetHeight) の組み合わせを思いつき書いた。 function isVisited(link){ if(!isVisited.initialized){ isVisited.initialized = true; addRule("#check_visited:visited", "display:none"); } var a = document.createElement("a"); a.href = link; a.id = "check_visited"; documen
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
prototype.js リファレンス
http://www.stevetucker.co.uk/page-innerxhtml.php
IBM Developer
はてなブログ | 無料ブログを作成しよう
Zap Reader
