JavaScript

HTML 要素にクラスを付与したり削除したりするのに便利なユーティリティメソッド (JavaScript)

HTML5 における HTMLElement#classList HTML5 では、HTML DOM の HTMLElement インターフェイスに classList というプロパティ が追加される予定です。 このプロパティは W3C DOM 4 の DOMTokenList インターフェイス を実装したオブジェクトを参照しており…

書評: 『ハイパフォーマンス JavaScript』 Nicholas C. Zakas 著, 水野 貴明 訳

ハイパフォーマンスJavaScript作者: Nicholas C. Zakas,水野貴明出版社/メーカー: オライリージャパン発売日: 2011/03/20メディア: 大型本購入: 9人 クリック: 1,176回この商品を含むブログ (33件) を見る『ハイパフォーマンス JavaScript』 を読み終わりま…

JavaScript の正規表現マッチング

JavaScript で正規表現 (RegExp オブジェクト) を使ってマッチングする方法。 しょっちゅう忘れてしまううえに ECMAScript 仕様に適合した方法があまり web 上に書かれていないようなので軽くメモしておきます。 RegExp.prototype.exec( string ) メソッド …

ECMAScript 5 の strict mode でグローバルオブジェクトを得るひとつの方法

ECMAScript 5th edition (JavaScript 系統のコア部分をまとめた言語みたいなもの) には strict mode というものがあり、strict mode では関数コード (Function Code) 内の this キーワードの参照先オブジェクトが、strict mode でない場合と異なる可能性があ…

new を不当に貶める陰謀と JavaScript におけるクラスの継承構造の話

私は陰謀論者じゃないですし JavaScript の new 演算子が大好きなわけでも大嫌いなわけでもないです。 念のため。 本記事は Hiraku さんが書かれた下記記事への言及です。 newを封印して、JavaScriptでオブジェクト指向する(1) newを封印して、JavaScriptで…

ECMAScript のレキシカル環境 〜catch 節のスコープのお話〜

Twitter で ECMAScript (JavaScript) の catch 節のスコープについての話をみかけた ので、ちょっと調べてみた。 catch( err ) の err のスコープは? 例外処理の機構で使用される catch( err ) ですが、この err はどの範囲で有効なのか? 普通に考えると c…

JavaScript におけるクラスベースの継承方法色々

JavaScript Patterns: Build Better Applications with Coding and Design Patterns作者: Stoyan Stefanov出版社/メーカー: O'Reilly Media発売日: 2010/10/01メディア: ペーパーバック購入: 2人 クリック: 79回この商品を含むブログ (5件) を見る先日、Java…

ECMA-262 5th edition で導入された Object.defineProperty を使い、属性を指定してプロパティを定義する

ECMAScript *1 において、プロパティとは名前と値のペアを意味します。 より詳しく言うと、名前が付けられたプロパティは、その状態を表す属性 (Property Attribute) *2 の集合を値として持っています。ECMA-262 5th edition では、この属性の値を指定してプ…

JavaScript に新しく導入された accessor property について

ECMAScript の 5th edition では、新しく accessor property (アクセサプロパティ) というものが導入されました。 本記事は、この accessor property について説明します。 accessor property に対応している JavaScript 処理系はまだ多くないと思いますが、…

JavaScript におけるクラスの作成と継承

JavaScript はプロトタイプベースのオブジェクト指向言語であり、クラスという概念を持っていない *1、というのはよく言われることですが、new 演算子とコンストラクタとプロトタイプを使うことでクラスのようなものを作ってインスタンス化することが可能で…

書評: 『JavaScript: The Good Parts ― 「良いパーツ」 によるベストプラクティス』 Douglas Crockford 著, 水野 貴明 訳

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス作者: Douglas Crockford,水野貴明出版社/メーカー: オライリージャパン発売日: 2008/12/22メディア: 大型本購入: 94人 クリック: 1,643回この商品を含むブログ (190件) を見るAmazon.co…

JavaScript で OAuth 認証を行う方法

最近、twitter クライアントを Firefox 拡張機能として作ったりしているのですが、twitter では認証方式として OAuth が採用されているため、JavaScript で OAuth 認証を行う必要があります。 ここでは、JavaScript の OAuth ライブラリを用いて OAuth 認証…

JavaScript の this キーワードは何を指すのか - コールバック関数内では this を使ってはいけない

本記事では、関数呼び出し (Function Call) の際の this キーワードの値の決定され方について説明していますが、より全般的な this キーワードの決まり方について別の記事を書きました。 合わせて参照してください: JavaScript の this キーワードに結びつけ…

Firefox アドオン中での文字コードの変更方法 (XPCOM を JavaScript から使用する)

Firefox のアドオン (拡張機能等) を開発する際に、文字コードを変更する必要がでてくることもあるかと思います。 ここでは、JavaScript のコード中の文字列の文字コードを XPCOM *1 を使用して変更する方法について記します。ここに書いてある方法はあくま…

JavaScript から HTML Element の class 属性を取得する方法

JavaScript から HTML 要素の class 属性を読み取ったり変更したりしたいとき、DOM の Element#getAttribute メソッド および Element#setAttribute メソッド を使用することができます。// HTML 要素の取得 var elem = document.getElementById("XXXX"); //…

HTML Element をドラッグにより移動可能にする JavaScript ライブラリ

HTML Element (要素) をドラッグにより移動可能にする JavaScript ライブラリを作ってみました。 Element をドラッグで移動可能にする JavaScript ライブラリ - ElementMover 技術的なこと とまあそれだけじゃ面白くないのでドラッグに関してちょっとだけメ…

JavaScript における文字列置換 (String#replace メソッド)

JavaScript において文字列の置換 (文字列中のある部分文字列を別の文字列に変換する) を行うためには String#replace メソッドを使用します。 // 第 1 引数が置換対象の文字列, 第 2 引数が置換後の文字列 window.alert( "test".replace("t", "a") ); // =>…

IE にて a 要素の下に "@" を含む TextNode を append するとおかしくなる事がある件

<html> <head> <title>test</title> </head> <body> <div id="for_test"></div> <script type="text/javascript"> var p_elem = document.getElementById("for_test"); var test_elem = p_elem.appendChild( document.createElement("a") ); test_elem.appendChild( document.createTextNode(" @test ") );…</body></html>

Internet Explorer 6 および 7 で class 属性を取得する方法

追記 この記事よりも良い方法を下記の記事に書きました。 下記記事を参照してください。 JavaScript から HTML Element の class 属性を取得する方法 本文 Internet Explorer 6 (IE6) および 7 (IE7) で、(X)HTML 文書中の要素の class 属性の値を JavaScrip…

イベントリスナの実行順序

addEventListener の実行順序 より。(function(){ function a() {alert('a')} function b() {alert('b')} function c() {alert('c')} window.addEventListener('click', a, false); window.addEventListener('click', b, false); window.addEventListener('c…

名前つきの関数リテラルに関するよくわからない IE の挙動

昨日書いた 「IE でも event.currentTarget を使えるようにする」 の記事の後半部分のコードなのですが、IE8 でじっくりと動作を追ってみるとどうも期待通りの動作ではないことがわかりました。 window.attachEvent("onunload", (function () { // target._v…

IE でも event.currentTarget を使えるようにする

IE の Event モデルと DOM Events モデルの違い JavaScript のイベントについて考えてみる。イベントの規格としてはまず Document Object Model Events がある。 Firefox やら Safari やら Opera やらで実装されている。 んで他方 Internet Explorer は別の…

クラスベースのオブジェクト指向な JavaScript

もうすぐ院試なんで院試に向けて勉強している今日この頃。 息抜きにクラスベースっぽいオブジェクト指向な JavaScript について書いてみます。JavaScript でクラス (っぽいもの) のコンストラクタを定義する方法といえば Object1 = function( aName, aType )…