newを封印して、JavaScriptでオブジェクト指向する(1)
以下はプロトタイプ的継承だけで一通りの機能を実現できる、という一つの例です。もちろん他にも書き方はありますし、newを使うのがよくないと主張しているわけではないです。 (誤解を生みそうな文体が混じっているようなので追記: 2011/5/14) 春ですし、少し初心者向けの記事を書きます。タイトル通り、JavaScriptのオブジェクト指向について。ちょっと長くなるので目次です。 クラス（に相当するオブジェクト）を作る オブジェクトからオブジェクトを作る（インスタンス化） 単一継承 多重継承 privateは諦めましょう 親のメソッドを呼ぶ コンストラクタ instanceofに対応する ダックタイピングのススメ JavaScript標準のオブジェクト指向といえばnewやらprototypeやらを書く必要がありますが、これらは書くのが面倒臭い上に気をつけないといけない点がたくさんあります。Ja
Use web workers to run JavaScript off the browser's main thread | Articles | web.dev
In the past 20 years, the web has evolved dramatically from static documents with a few styles and images to complex, dynamic applications. However, one thing has remained largely unchanged: we have just one thread per browser tab (with some exceptions) to do the work of rendering our sites and running our JavaScript. As a result, the main thread has become incredibly overworked. And as web apps g
jQueryのvar jQueryの仕組みについて - OKWAVE
次のように書き換えてみましょう。 // function jQuery (selector, context) { return new init(selector, context, rootjQuery); } jQuery.prototype = jQuery.fn; // function init (selector, context, rootjQuery) { /* ...... this.length = 0; ...... */ } init.prototype = jQuery.fn; jQuery.fn.init = init; 本質的にはこういうことです（私が書くなら、こんな感じにすると思います）。したがって、new jQuery と new init は、どちらも jQuery.fn をプロトタイプとする新規オブジェクトを生成します。 --- さて、No.1 には
QUnit はオワコン!?Jasmine を使ってみる - present
はじめに JavaScript でテストするためのフレームワークは QUnit と Jasmine が人気を二分していたみたいですが、最近は Jasmine が優勢？雑誌やブログで Jasmine を推しているのをよく見かけました。中には「QUnit はオワコン。これからは Jasmine！」って感じの過激な意見も。 私は QUnit を使ってきましたが、Jasmine の勢いは見逃せない。 ってわけで Jasmine 試してみます。どちらが優れているかは、実際に使ってみないと分からないですから。 Jasmineについて introduction.js RSpec 風に記述できる、JavaScript のテスティングフレームワーク。スタンドアロン版とRuby版とNode版があります。スタンドアロン版は QUnit 同様に、ブラウザで実行するタイプ。Ruby 版と Node 版は、なんとコマ
Jasmineをもう少し詳しく紹介してみる
Jasmine: BDD for Javascript | Jasmine 先日プッシュした Jasmine についてもう少し掘り下げていきます。ただしテストの書き方については触れません。それは公式の情報やすでに詳しく紹介されている記事があります。 まとめJasmine は見た目だけでなく考え方も RSpec の影響を受けているよ多少遠回りでも rubygems 版の Jasmine を使うとテストが本当に自動化できるよわざわざツールを使ってテストしたいということはある程度アプリケーションとして規模が大きいとか、サイトとして規模が大きく JavaScript の数が多くなっているので、人力チェックが大変だということではないでしょうか。 規模が大きくなってきた場合は、ある程度作法（ルール）を用意してそれを守ることが安全、安心なアプリケーションの開発、作成に欠かせません。Jasmine は単に
03 | 1月 | 2013 | nacika.com
日頃からJavascriptで開発をしているのにも関わらずあまりテストを書かないので、ここは本格的にテストを書こうと調べてみました。JavascriptのテストフレームワークといったらJsUnitなのかなーと思っていたが、調べてみると結構いろんな種類のテストフレームワークがあったりして、その中で得に人気なのかどうやらJasmineらしい。 Jasmine ～ JavaScript Test フレームワーク より引用: 今回は, JavaScript のテストを行うためのフレームワークJasmine の紹介です。 JavaScript のテストといえば, JSUnit が有名です。 JSUnit は, JUnit とに似たような, Matcher が利用できたりしてわかりやすいのですが, 開発やメンテナンスがストップしており, またWebプロジェクトに組み込まないと利用できないことが ちょっ
ブラウザ動作の理解－リフローとリペイント及びその最適化 | ゆっくりと…
ブラウザ動作の理解の2回目です。今回はレンダリング・ツリーの更新に絡む、リフロー （要素の大きさ、位置などの再計算） とリペイント （描画） に関する解説を、「High Performance Web Pages – 20 new best practices」 の著者 Stoyan Stefanov のブログエントリーから 「Rendering: repaint, reflow/relayout, restyle」 を翻訳してお届けします。 同記事は、前半がリフローとリペイントに関する解説と、表示レスポンスを向上させるためのスタイル変更に関する Tips、後半は dynaTrace AJAX Edition と SpeedTracer を使った IE および Chrome の描画パフォーマンスの計測の解説で構成されてる、長い記事となっています。 今回はその前半部分をご紹介します。 レンダ
window.postMessage()の学習 - sugilogのブログ
javascriptのwindow間のメッセージングについて、存在は知っていたけどちゃんとコードとして落とし込めていなかったので学習。 参照先は以下の2サイト http://d.hatena.ne.jp/bannyan/20090820/1250789189 https://developer.mozilla.org/ja/DOM/window.postMessage window.postMessage 他のwindowに対して、messageを送る。 => window.postMessage(); windowを超えてクロスドメインでアクセスしようとすると、permission deniedになったり、undefinedになったりするけど、postMessageは有効に使える。 引数は第2引数まで取る。（第2引数まで必須。） otherWindow.postMessage(messa
Node.jsとWebSocket.IOでチャットアプリを作る | mawatari.jp
VMware上、LAN上、インターネット上のCentOS6.3で動作確認済み。WebサーバはApache。 クライアントでの確認は以下の通り。 Mac, WindowsのChrome 22, Firefox 16, Safari 6, Opera 12(動作不可), IE 9(動作不可). iPad2(iOS 5.1.1), new iPad(iOS6), iPhone4~5(iOS6)のSafari, Chrome. Galaxy S2(Android2.3.3)のブラウザ(動作不可). 目次WebSocket Chat サーバの実装WebSocket Chat クライアントの実装HTMLJavaScriptWebSocket Chat サーバの起動とアプリの実行WebSocket Chat サーバの実装 // VMware上のCentOS6で動作させたときの例 // 8888番ポートで
.on() & toggle working together
Quick question here guys, I cant seem to get this $('#wrap').on('toggle', '#image', function(){ <!-- Do stuff --> }); to be able to have a toggle inside it? Any ideas? I have tried googling but with no luck. this is the code i am trying to get to work with .on, as currently it doesn't apply the changes to all of the element son the page, (that have #image and #brick) $("#result_options").toggle(fu
HTML5 Drag and Drop API についてのまとめ 〜その１ 概要〜 - COBALT
UIとして 例えばどこかのサイトでメモしておきたい画像があったとして、 それを自分のオンラインストレージに保持したいというシーンがあったとする。 これまでは対象の画像を右クリックして画像のURLをコピー。 そしてアプリ上に入力フォームを表示する操作の後、先程のURLを入力して決定ボタンを押す。 といった操作によって対象の画像をメモするフローが多数を占めているかと思う。 この操作は大きく見ると大体６ステップのユーザ操作が必要となる。 もしこの操作を Drag and Drop により実装すると、対象画像を指定領域にドロップする。 以上の操作で行うことが出来る。 という事で効果的なUIのためにも、新しいアプリの可能性のためにも、Drag and Drop API は素敵。 ＜ みんな知ってる 実装 まずはdrop領域に対して以下のイベントを付与する。 drop dragover dropを実現
NAVERまとめに見る遅延ロードのすすめ « NAVER Engineers' Blog
あけましておめでとうございます。NAVERまとめのフロントエンドを担当している縣です。初詣で引いた大吉のおみくじを握りしめながら今年も張り切っていこうと思います。 今回はJavaScriptの遅延ロードの仕組みをNAVERまとめに導入した際のお話を紹介します。 遅延ロードの検討 昨年NAVERまとめのまとめ閲覧ページや、まとめ編集ページでのJavaScriptファイルの読み込みを遅延ロード化する作業をしました。元々はページ読み込み時に全て読み込ませていましたが、JavaScriptファイルが巨大になってきてパース・実行に時間がかかるようになったことから遅延ロードを検討することになりました。 遅延ロードの利点というとJavaScriptファイルの読み込み・実行によるブラウザのレンダリング停止を防ぐのはもちろんですが、どのファイルがいつどこで必要になるかを明確にすることもでき、依存関係を動的
ドラッグ＆ドロップしよう！(5/5):JavaScriptによるHTML5プログラミング入門 - libro
HTML5のドラッグ＆ドロップは、HTMLのWebページ内にある要素だけしか使えないわけではありません。Webブラウザ外にあるものをドロップすることもできるのです。その一例が「ファイル」です。ファイルをドラッグ＆ドロップしてページ内にその内容を読み込んで表示させる、なんてことも可能なのです。 ただし、そのためにはHTML5でファイルを扱うための「File API」というものについて理解していないといけません。このAPIについては別の記事にゆずるとして、実際にファイルをドロップするサンプルを作ってみましょう。ここでは、イメージをドラッグ＆ドロップして<img>タグに表示させてみます。 まず、HTML側に、下のリストに挙げたような形で<img>タグを用意してください。続いて、script.js側に、下のリストにあるdoDragOverとdoDropを用意してください。これでイメージファイルをド
iPhone/SafariでjQueryを使ったイベントのバインドにおける注意点 : nogunogu
こんにちは。のぐちです。 先日、このブログの存在が社内に告知されました。 開始からしばらくはひっそりと生きようということで特に教えていなかったのです。 で、早速というか何というか、社内の開発者からの応援メッセージ（ツッコミ）が届きました。 そのひとつが 「何故jQueryを使ってるのに、addEventListener してるのか？」 でした。 確かにわざわざ次のように書きました。 box.addEventListener(“touchmove”, touchHandler, false); 僕も最初はjQueryを使って $(“#box”).bind(“touchstart”, touchHandler); なんて書いたのですが、タッチしても全然反応がないので、 「ああ、touch系のイベントはjQueryが対応してないんだろうな」 と思い込んでいました。 が、このツッコミを機
javascript に関する質問です。jquery のプラグインで、下記のように()で関数をかこっているのがあるのですが、この()はどんな意味なのでしょうか？…
javascript に関する質問です。jquery のプラグインで、下記のように()で関数をかこっているのがあるのですが、この()はどんな意味なのでしょうか？ javascript の解説のどこかにあると思うのですが、わかりやすい説明があったら教えてください。 (function($) {}) jquery そのものは、(function(){}) となっていました。
オンラインカジノ【おすすめ厳選ランキング10選】｜2025年8月
{"is_any_tile":false,"sources":[{"source":"bmc_bonus_type","table_games":false,"bonus_types":false,"game_providers":false,"slots":false,"live_games":false,"is_live_dealer":false,"payment_methods":false,"sport_types":false,"live_streaming":false,"cash_out":false}]} ウェルカムボーナス {"is_any_tile":false,"sources":[{"source":"bmc_bonus_type","table_games":false,"bonus_types":false,"game_providers":false,"sl
jQuery eventのoriginalEvent - TYAGE EMOTION
HTML5関連本のドラッグ＆ドロップサンプルをjQueryを使う形に置き換えて実行しようとしたとき、jQueryのbindを使うとdataTransferプロパティがイベントから取得出来ない現象が起こりました。原因は、わかってしまえば単純で、jQueryのイベントハンドラに渡されるeventオブジェクトはjQueryがブラウザ互換性の為に作成した独自オブジェクトだからでした。HTML5等で新たに追加されたプロパティにアクセスするには、大元のeventオブジェクトを取得する必要があります。 ググってみたところ、どうやらjQueryのevent.originalEventで取得できるみたいです。 試しにドラッグ＆ドロップのサンプルをjQueryのbindを使う形に置き換えて、このoriginalEventを使ってみたところ、IE8、FF3.6、Chrome6、Safari5で動作させることがで
JsRender | HTML5ers
2012年9月5日 JsRenderとは？ JsRenderは、JavaScriptのテンプレートエンジンです。 基本的な使い方 1. JsRenderのファイルを読み込んでおく <script src="jsrender.js"></script> 2. 以下のようなテンプレートを用意する <div>{{>hello}}</div> 3. JS側で以下のようなコードを書く var template; // この変数に2のテンプレートを代入 var data = { hello : "こんにちは！" }; var html = $.templates(template).render(data); 4. 以下のように表示される <div>こんにちは！</div> エスケープ処理 エスケープあり（記号等をそのまま表示させない） {{>hello}} エスケープなし（記号等をそのまま表示させる
JsRender入門 - Do You PHP はてブロ
JsRender/JsViewsのチュートリアルを書いています。こちらもどうぞ→「jsviews チュートリアル」の検索結果一覧 - Do You PHP はてな API叩いてJSONデータを取得し、その結果をJavaScriptで出力する。よくある場面だと思うんですが、これってどう実装してますか？ 一番わかり易い方法は、コンテンツを文字列で生成してappendTo()なりhtml()する方法。 // JSONデータの取得 var contents = '<p>...' + ...; $('#target').appendTo(contents); 直感的なんだけど、何だか今更感が漂います。かと言って、DOM操作するのも面倒だし、コンテンツのサイズが大きい場合やデザイン変更などメンテナンスが大変そう。。。 こういう時にテンプレートエンジンを使うとヨサゲ、ということで探してみるとJsRend
(function($) {})(jQuery);って何？って思ったからいろいろ試してみた記録 - お勉強orz日和
どうでもいい話なのですが、inputタグのautocomplete属性について先日はじめてちゃんと知った気がしました（今更 それと日記見返すと、昔の方が雑記的だなぁと思った。。 うーん、そう考えるとローカルのもったいないメモは多そうだ。 今度書き出せたらいいなぁ。。 で本題ですが、先日jQueryを使っているプラグインのコードを見てて「(function($) {})(jQuery);」ってどういう意味？て思ったので、調べたりとかしてました。 謎って思ったのはおおまかに３つ。 何故全体を括弧で囲む必要があるのか。 function($)の「$」って何？ ２個目の括弧の中の「jQuery」って何？ これ、ほぼ「(function($) {})(jQuery);」の全てが謎っていってるようなものですねw http://q.hatena.ne.jp/1226297257 上記のURL先を参考にな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
