サービス終了のお知らせサービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは本日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。
こんなに JavaScript やってるのに知らなかった基本文法「if in」 - IT戦記
if 〜 in なんてあったのね。。。 知らなかった！ 使い分け ３番めが if in オブジェクトが真か偽か if (obj.property) { // ... } オブジェクトにプロパティがあるかは置いといて undefined ではないことを確かめる if (typeof obj.property == 'undefined') { // ... } オブジェクトにプロパティがあるか。 if ('property' in obj) { // ... } オブジェクト自体（プロトタイプを含まない）にプロパティがあるか if (obj.hasOwnProperty('property')) { // ... } まとめ いっぱいあるなあ。 大抵、一番上のでいいがいろいろ細かい条件があるとたまにどれも必要になるときがある。 いままでは、if in を知らなかったので困ったこともあったなあ
arguments に対して shift するための考察（をしていたらカッとなって配列変換のベンチマーク） - IT戦記
JavaScript において可変引数を扱う場合 arguments オブジェクトを使います。 function func() { for (var i = 0; i < arguments.length; i ++) { alert(arguments[i]); } }; func(1,2,3) // 1,2,3 を順に表示 そして 可変引数を使うパターンとしては、 すべて可変引数 固定引数と可変引数 の二つに分けることができます。 すべて可変引数 引数が与えられた分だけ同じような処理を行うパターン function add() { for (var i = 0, r = 0; i < arguments.length; i ++) r += arguments[0]; return r; } var r = add(1, 2, 3, 4, 5); 固定引数と可変引数 最初のいくつかの引
style.cssText の使い処に関する考察 - IT戦記
cssText って知ってますか？ cssText っていいうのは CSSRule オブジェクトとか CSSStyleDeclaration が持っている情報を css ファイルに書く形式の文字列にしてくれる機能です。 乱暴に言ってしまえば、 css 系のオブジェクトが持っている innerHTML みたいなものです。 具体例を見てみましょう。 こんな感じの body があるときに <body style="margin: 1em; padding: 1em; border: 1em">....</body> こんな感じで使えます。 alert(document.body.style.cssText); // 'margin: 1em; padding: 1em; border: 1em' 簡単でしょう？(ボブ略 設定も出来ますよ こんな感じ // さっきの続き document.body
配列を結合したり、配列を初期化したり - IT戦記
既出かもー 配列の結合 var array1 = [1, 2, 3]; var array2 = [4, 5, 6]; [].push.apply(array1, array2); alert(array1); // [1, 2, 3, 4, 5, 6] ３文目で空配列を使ってるのは書くのが短いからってだけ。 配列の初期化 function hoge() { var args = []; [].push.apply(args, arguments); alert(args); }; hoge(1, 2, 3); // [1, 2, 3]
IT戦記 - Math.floor を使わずに小数を整数にする
少数を整数にしたいような場合 たとえば、 0 - 9 のランダムな整数が欲しい場合 普通はこう書く var value = Math.floor(Math.random()*10); Math.floor を使わない場合はこう書く var value = ~~(Math.random()*10); 「~」は補数を求める単項演算子で、オペランドを整数変換するので二回やることでオペランドを整数化できるのです。 まとめ でも、もっといい方法があるかも。 皆様なら「どう書く？」のでしょうか。
Firebug で XPath を簡単に試す方法 - IT戦記
適当に XPath を試したい時に 以下のようにすれば、簡単に XPath をためせます。 document.evaluate( '//div[@class="hoge"]', // XPath 式 document, // 基準となるノード（要素とか null, // 名前空間の解決方法（適当にやるときは null 6, // 取得する形式の指定（適当にやるときは 6 null // 結果を再利用するかどうか（適当にやるときは null ); 簡単ですね。 document.evaluate、式、ドキュメント、ヌル、６、ヌル。 覚えましたか？ でも、これを Firebug で実行するとこうなっちゃいます。 うーん。これではどの要素が選択されたかわかりません＞＜ 不便ですねー。 というわけで、以下のブックマークレットを実行してあげてください。 javascript:void(XPathRe
JavaScript のワンライナーでカラーコード - IT戦記
RGB 値が分かってて #XXXXXX を計算するのめんどいなーと思って Firebug でやってみた。 '#' + [76, 84, 105].map(function(i){ return (i >> 4 ? '' : 0) + i.toString(16) }).join('') このくらいならワンライナーで書けて便利ー＾＾ 追記： 弾さんからトラックバックもらって見てみたけど弾さんはちょっとミスってたので再トラバします。 (function(r,g,b){return '#' + (r < 16 ? 0:'') + (r*65536+g*256+b).toString(16)})(15, 127, 255) http://blog.livedoor.jp/dankogai/archives/50911084.html これだと (function(r,g,b){return '#'
(function(){})() と function(){}() - IT戦記
自分用メモ // JavaScript でクロージャを書くときこう書く事が多い (function() {})() // 何故なら // function() {}() // と書くと // function() {} が式ではなく、文として解釈されてしまうからだ。 // 文として解釈されないためには、文の途中（最初以外）に function と書いてやる必要がある // なので、まず開きカッコを書いてやる。 ( // の後に function() {} // と書いてやると function は式になる ) // 正確には、カッコの対は The Grouping Operator という演算子である。 // カッコ以外にも var a = // のように代入演算子のあとでもいい function() {} // つまり、以下のような記述も可能である。 var b = function()
IE8 で実装された Selectors API とは何か？ - IT戦記
はじめに IE8 には Selectors API という新しい仕様が実装されました。 ということで、今後 DOM 操作 API の主流になるであろう Selectors API についてまとめておきます。 Selectors API が使えるブラウザ 2008 年 3 月 6 日現在の一覧 WebKit Build Archives | WebKit (開発版の Safari) Windows | Official Site for Microsoft Windows 10 Home & Pro OS, laptops, PCs, tablets & more (IE8 の Beta 版) Selectors API とは Selectors API とは W3C で定義された仕様です。詳細に関してはこちらをどうぞ 簡単に説明すると getElementsByTagName や getE
駄文 - JavaScript と「クラス」と「コンストラクタ」と「プロトタイプ」って言葉の定義が難しいよなあ - IT戦記
このエントリを見てて思ったんですけど JavaScript関数の実体は、Functionクラスのオブジェクトです。今回はFunctionクラスの機能を網羅的に解説します。 JavaScriptの関数オブジェクトを完璧に理解する - builder by ZDNet Japan 「Function クラスのオブジェクト」って言いますよねー。 僕もそういう風に言ったりするんですけど、本当は微妙ーに違うんですよね。 でも、そんな細かいことを言っていてもしょうがないので、やっぱり「Function クラスのオブジェクト」って言うんですけど。 なんか、良い言い方ないかなあ。 Function.prototype を継承する、内部メソッド ［［Call］］ を持つオブジェクト Function コンストラクタを new することによって作られるオブジェクト いや、そもそも 関数って 内部メソッド ［［
onclick 属性問題について - IT戦記
本気でやるならonclick属性は避けてライブラリを活用すべき - 帰ってきたHolyGrailとHoryGrailの区別がつかない日記 に関して この先、 HTML に onclick と書いても石を投げられないように書いておく＞＜ 僕も onclick 属性がダメだと思っていた時代もありました。でも、今は時々使うなあ。 （あ、でも、 HTML と JS で分業している場合は、使わないほうがいいよね＾＾；そこだけは言っておく。） JavaScript 入門の記事を書くときに onclick 属性がダメだとしたら、いろいろ本質的でないことを説明しなきゃいけない。 現状では onclick 属性が、もっとも簡単に HTML にイベントをマッピングできる方法だから、そんなに目くじらたてなくてもいいんじゃないかなあ？ たとえば 以下は、クリック時に href に GET を送るための oncli
CSS のセレクタの名前の整理 - IT戦記
はじめに 「CSS のセレクタ」っていうと以下のようなものを想像すると思うんですけど div.container ul > li じゃあ、 div はセレクタ？ .container はセレクタ？ div.container はセレクタ？ > はセレクタ？ などなど色々と疑問が出てくる訳で、どういう名前で呼べばいいか。自分のために書いておく。 これ系のエントリでは、以下のエントリが一番参考になります http://d.hatena.ne.jp/kiririmode/20080516/p1 Selectors group カンマで区切られたセレクタのリスト div.container ul > li, div#hoge.hoge ~ span#fuga.fuga Selector カンマで区切られてる一個一個のやつ div.container ul > li とか div#hoge.hoge
IE で一時的に要素のスタイルを変更する - IT戦記
いろいろためしたけど、以下が一番楽 // 変更 element.runtimeStyle.cssText = ' width: 100%; height: 100%'; // 戻す element.runtimeStyle.cssText = ''; 特に、戻すときに cssText 以外のプロパティを空にしても、おかしな挙動をするので cssText を使うといい。 しかも IE だけは、 CSSStyleSheet オブジェクトにも cssText が使える // これも IE だけ var sheet = document.createStyleSheet(); sheet.cssText = 'div { hoge: hoge; fuga: fuga } div div { piyo: piyo }'; sheet.cssText = '';
要素固有の ID を取得する - IT戦記
IE では element.uniqueID というのがある。 これは、要素に固有の番号を付けたものだ。 これが結構便利で、 var seen = {}; for (var i = 0; i < elemenets.length; i ++) { if (seen[elements[i].uniqueID]) elements.splice(i, 1); else seen[elements[i].uniqueID] = true; } みたいな感じで、使うことができる。 他のブラウザ 他のブラウザにはこれがないので、結構不便。 で、 getter で出来るじゃんって思ってググってみたら。 Dean Edwards さんがもう作ってた。さすが http://dean.edwards.name/moz-behaviors/src/ HTMLElement.prototype.__define
Web 標準的な CSS の値変換方法（px → em など）（訂正あり） - IT戦記
はじめに W3C の仕様に CSS の値を変換が可能なオブジェクトが定義されていることに気がついたのでメモしておきます。 まず CSSStyleDeclaration オブジェクトを取得する 例えば、 var decl = element.style; または、 var decl = getComputedStyle(element, ''); http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration CSSStyleDeclaration オブジェクトから getPropertyCSSValue という関数を使って CSSValue オブジェクトを取得する var val = decl.getPropertyCSSValue('width') http://www.w3.org/TR/DOM-Level
プログラミング未経験者が JavaScript でプログラミングを始めるまでに必要なこと - IT戦記
（執筆中） （文章の練習も兼ねてぐだぐだと執筆中、現時点で読んでも日本語になってないと思います。） （執筆途中だけど、こうしたらいい！とか、アドバイスがあれば教えてください＞＜読者みんなが編集者！とか言ってみる） （あ、はてな記法のパッチを送ってくれてもいいです＾＾） （ちょっと、 Shibuya.JS in Kyoto → PHP カンファレンスがあるので、次の更新はそれ以降になるかも） 自分の知り合いに「まったくのプログラミング未経験だけど、自分のウェブサイトを作ってみたい！」という人がいるので、プログラミングを始める前に必要な知識や心構えや準備などを書いておこうと思います。もちろん、最初に使う言語は JavaScript です。 この文章は、プログラミングまったくの未経験者が読んで分かる文章を目指しています。もし、分からない部分がある場合は指摘してください。聞いてください。自分で調べ
次の JavaScript の仕様はこうなる！ ECMAScript 3.0 から 3.1 への変更点まとめ - IT戦記
はじめに JavaScript の標準仕様である ECMAScript 3rd Edition (ECMAScript 3.0) が 9 年ぶりにバージョンアップしようとしています。 実は、これまでも様々なバージョンアップの案が上がっては消え、また上がっては消えていました。 しかし、今回のバージョンアップには今までと違う点が一つだけあります。 それは、現時点での主要な ECMAScript インタプリタ（JavaScript の実行エンジン）を作っている全団体（以下を参照）がこの仕様に同意したことです。 Mozilla (Firefox) Apple (Safari) Microsoft (Internet Explorer) Opera (Opera) Adobe (Flash) Yahoo (Yahoo Widget) Google この同意は JavaScript のこれからを大きく
JavaScript の配列と連想配列の違い - IT戦記
id:cheesepie:20070131:1170172709 最近は、こういう風に JavaScript を勉強する人が増えていてとても嬉しいです ＾＾ id:cheesepie さん頑張ってください！ で、ちょっと配列と連想配列の使いかたが違うようなので、エントリーを書こうと思いました。おせっかいだったらすみません＞＜ ！ やっぱり、このへんが JavaScript の難しいところのひとつなのだろうか。 ということで、 JavaScript の配列と連想配列の違い いってみよおー 連想配列とは JavaScript では連想配列は一番シンプルなオブジェクトのことである。つまり、すべてのオブジェクトは連想配列である。 以下のすべての連想配列はまったく同じものである。 // 1 var obj = { hoge: 'hoge' }; // 2 var obj = { 'hoge': 'h
Document Object Model Events
文書オブジェクトモデル(DOM)水準2 イベント規定 Document Object Model (DOM) Level 2 Events Specification 序文 この標準情報(TR)は，2000年11月にWorld Wide Web Consortium(W3C)から公表された Document Object Model (DOM) Level 2 Events Specification, version 1.0 勧告を翻訳し, 技術的内容を変更することなく作成した標準情報(TR)である。 0. 適用範囲 この標準情報(TR)は, プログラム及びスクリプトに共通のイベントシステムを与える, プラットフォーム中立で言語中立なインタフェースである文書オブジェクトモデル水準2イベントを規定する。文書オブジェクトモデル水準2イベントは, 文書オブジェクトモデル水準2コア[DOM Le
DOM イベントリファレンス | MDN
以下のイベントは、DOM 要素 の element.addEventListener() メソッドを使用してイベントハンドラを追加することにより、捕捉することができます。
Event Handlers
CheckboxStateChange このイベントは、利用者あるいはスクリプトから、チェックボックスがチェックされたか、あるいはチェックを外されたときに通知される。このイベントは対応する属性を持たないので、 addEventListener メソッドを利用して付加されねばならない。通常なら、 command イベントがチェックボックスの変化の通知に利用されるところであるが、 command イベントは利用者が値を変更したときにのみに通知される一方、 CheckboxStateChange イベントはスクリプトが checkbox の checked プロパティを変更したときにも通知される。利用者による変更においては、 command イベントの前に CheckboxStateChange イベントが通知される。 CheckboxStateChange イベントは浮上しない。 [訳注：
Gecko 固有の DOM Event | MDN
DOMContentLoaded 文書の DOM コンテンツが読み終わったとき window オブジェクト上で発生します。しかし、"load" とは異なり画像が読み込まれるのを待ちません。例えば、GraeseMonkey でページが表示される前に変更をこっそり行うために使われます。 このイベントは、このページの他の多くのイベントのように、"信頼された" 対象のみに通達されます。例えば、Firefox におけるメインブラウザオブジェクトのコンテンツには、たとえ、chrome:/ URI からのものであっても、通達されません。 DOMFrameContentLoaded 上記と同じですが、フレーム内のコンテンツが読み込まれた時に発生します。 DOMWindowClose window.close() によって、ウィンドウを閉じようとしている時に発生します。詳しくは バグ 103452 をご覧く
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サービス終了のお知らせ
サービス終了のお知らせ
createElement と backgroundColor で IE をクラッシュさせる - IT戦記
Firefox で起こる nsSessionStore.js のエラーを起こらなくする - IT戦記
特集：Firefox 3とFirebugで始めるJavaScript開発｜gihyo.jp … 技術評論社
駄文 - IE を愛するんだ＞＜ - IT戦記
動画検索サイト Woopie