This domain may be for sale!
JavaScript Patterns: Build Better Applications with Coding and Design Patterns 作者: Stoyan Stefanov出版社/メーカー: O'Reilly Media発売日: 2010/10/01メディア: ペーパーバック購入: 2人 クリック: 79回この商品を含むブログ (5件) を見るJavaScript Patterns(iTunes) 読みました。 JavaScriptのパターン(⊇デザパタ)まとめ本。 DOM(ブラウザ)関連は最後の1章のみ。 以下適当まとめ。 変数宣言 // antipattern function foo() { // aはローカル、bはグローバル var a = b = 0; // ... } // antipattern myname = "global"; function
あけましておめでとうございます。昨年に引き続き、今年もJavaScriptの近い未来についてちょっとだけお話させて頂きます。 最初に昨年の予想を見返しておきましょう。昨年は次の3つを2010年の鍵として取り上げました。 ウェブ標準 ブラウザ拡張 サーバーサイドJavaScript この3つを軸に2010年を振り返ってみます。 2010年のJavaScript界隈でのニュース ウェブ標準 2010年最初のビッグニュースはなんといってもIE 9のPlatform Preview版の登場でした。これまでの独自実装路線から一転して(正確にはIE 8の時点でJSONやWeb Storageのサポートなど、その徴候はあったのですが)、HTML5などのウェブ標準のサポートを進めることを表明しました。そして実際に8週おきにPlatform Preview版をアップデートして、ECMAScript5・S
昨年に続いて、新春特別企画:2011年のJavaScript ─ウェブアプリ全盛の時代へ|gihyo.jp … 技術評論社を書きました。 去年、当たったら(自分が)面白いよねくらいな気持ちで書いた「拡張」とか「サーバーサイドJavaScript」が見事に的中してて驚きました。特にNode.jsブームはすごいですね。 ってわけで今年は、Node.jsのどこが注目されているのかを書きました。あと、それに呼応してBigPipeにも言及。BigPipeはid:brazilが東京に来たときの飲み会で@kzysに教えてもらった。確かにかとーさんはいつも良いネタ持ってる印象があるなあ。 そういえば、今年の後半は色々忙しくてブログにあんまり書いてなかったけど、DeNA Technology Seminar #3 : ATNDでJavaScriptの未来みたいな話をしました。この時も@kzysが来ていた。@
参考にさせていただいたサイト jQuery Blink Plugin | www.antiyes.com http://www.antiyes.com/jquery-blink-plugin (function($){ $.fn.blink = function(options){ var defaults = { delay: 500 }; var options = $.extend(defaults, options); return this.each(function(){ var obj = $(this); obj.delay = options.delay; setInterval(function(){ if (obj.css("visibility") == "visible") { obj.css('visibility', 'hidden'); } else { o
プラグインだけど公開してないものだったり、いつも使ってるプラグインとの組み合わせだったり、ショートコードとかなんだか色々。どれもCodaにスニペットで登録してて一発変換で使ってます。 コードはアレなんですけど、ひょっとしてひょっとすると誰かの役に立つかもしれないので恥ずかしながら公開します。対象はちょっとだけJS書けるとかそういう人ですかねたぶん。書ける人はもっとキレイなやつ使ってるでしょうし。(もっときれいに書けとか何そのコードとかも歓迎) 紹介してるスニペットたち ページトップにスクロールするだけ テキストボックスにラベル表示するやつ 要素のサイズを取得するやつ タブきりかえるやつ IEで透過pngをフェードしたときに黒くなるやつ対策のshow()とhide() Google Analyticsのトラックイベント一括bind Ajaxサイトにするときに使うリンク置き換えプラグイン スク
ブログパーツの表示が遅いと、ページ全体の描画が止まってしまいますよね。 ブログパーツを「非同期化」してしまえば、ストレス無くページが表示されるようになりますよ。 非同期化とは、ページの一部分を、全体のページから独立して描画させる方法です。 方法はいろいろあるのですが、今回はJavascriptの「setTimeout()」関数を利用しました。 setTimeout()は、メインの描画とは別に、指定した時間後に命令を実行する関数です。時間を0にすれば、非同期で動作させることが可能です。 ブログパーツは、主に3つの形に分けることができます。各々の形ごとに、高速化する方法を紹介します。 ●タイプ0 <iframe src=”http://hogehoge.com/blogparts.cgi”></iframe> iFrameのタイプは、すでに非同期化されているため、特に対策は必要ありません。 ●
Flash界のコーディングゴッドGSkinnerがJavaScriptのCanvasをFlashライクに使うライブラリを作った。 この人、確か僕と同い年ぐらいかちょい下なんだよね。。。会う度に超へこむ。 画期的というか、確実にかゆいところに手が届くライブラリで、下みたいなのがサクサクJSでいける。あいかわらずソースは美しいし、ドキュメントも完備。 game sparkles rollover localToGlobal globalToLocal sprite sheets ざっと見た感じFlashでいうところの、Stage, MovieClip, Sprite, Bitmap, Matrix, Stage, EnterFrameとキーフレームアニメがサポートされてる感じ。これは素敵。 このライブラリそのものもスゴいんだけどポイントは、GSkinnerがJSやりだしたってことは、365日以
Internet Explorerでは、ボタンをクリックするたびに、2行目の表示/非表示が切り替わります。 しかし、Firefox等では表が乱れ、2行目の左端のセルに、2行目の内容がすべて詰められて表示されます。 また、Firefoxでは、2行目を再表示するたびに表が長くなっていくという現象も起こります。 ちなみに、表示/非表示の切り替えは、以下のようなJavaScriptで行っています。 function toggle_row_a(id) { var obj = document.getElementById(id); obj.style.display = (obj.style.display == 'none') ? 'block' : 'none'; return false; } 2.問題の原因 この現象は、Internet Explorerの不具合(または実装が不十分)ではない
英語のドキュメントを日々閲覧するギークにとって、英和・和英辞書は手放せない。より快適に英語の文章を読んだり翻訳したりするため、Webページ内で文章を選択するとポップアップして辞書へのリンクを表示してくれるChrome拡張を作成した。ポップアップには選択した文章を「英辞郎 on the WEB」で検索するためのリンクと、Google Translateによる訳が表示されるようになっている。 即興で作ったのであんまり凝ったことはしていないが、次のようなところにこだわってみた。 ポップアップ表示、非表示時のアニメーション。 テキスト選択領域の近くにポップアップを表示。 AJAXを使って非同期にGoogle Translateの情報を取得。(backgroundページを活用) 随所でjQueryを使いまくったが、やはりjQueryは便利過ぎると思った。今回、特定のページ(jQuery 1.4.2を
JavaScript Advent Calendar 20105日目のago(@kyo_ago)です。 jQueryのソースを眺めててjQuery.stopに引数があることに気づいたので調べてみました。 まず、簡単なスライドダウンメニューを作ってみたいと思います。 jQuery.stop 1 - jsdo.it - share JavaScript, HTML5 and CSS JS部分は以下の通りです。 $(function () { $('div').hover(function () { $(this).find('ul').slideDown(); }, function () { $(this).find('ul').slideUp(); }); }); 少し触ると分かると思いますが、マウスがmenuから外れた後も何度も.slideDown、.slideUpが実行されるため非常に
JavaScript Advent Calendar 2010 8日目担当のid:os0xです。 JavaScriptネタは案外範囲が広くて色んなネタがあるので、毎回が楽しみですね。 さて、私はデバッグをネタにしたいと思います。テストではなくデバッグです。誰かが書いたコードをメンテナンスしなきゃー、とか。jQueryプラグイン導入しようとしたけど、なんかうまく動かないーみたいなケースのおはなしです。 JavaScriptのデバッグは大変なので、多くの方が日々苦労されていると思います。なぜJavaScriptのデバッグが大変なのか少し整理してみましょう。 ブラウザ依存 まず、なんといってもJavaScriptはウェブブラウザ上で実行されるので、環境が一定ではありません。特定の環境だけを対象にJavaScriptを書くことは滅多にありません。PC向けではIE、Firefox、Chrome、Sa
2010年11月26日18:00 カテゴリTipsLightweight Languages javascript - ブログパーツ/ウィジェット開発者におねがい JavaScript: The Good Parts Douglas Crockford / 水野貴明訳 [原著:JavaScript: The Good Parts] たった二つです。 名前空間を一つだけ用意して、それのみを使うこと 設定はグローバル変数ではなく、引数渡しにすること そうでないと、導入したサイトで変数衝突が起こる公算が大きくなります。 それが実際に発生したのが、右の画像です。表示がぐしゃぐしゃになっています。 問題を起こしたのは、以下のsnippetでした。 <script type="text/javascript" src="http://blogchart.jp/js/blogparts.js"></sc
step1: 動けばいいレベル 適当にざっくり書いて終了 イベントハンドラのなかでテキトーに全て終わらせる メソッドチェイン長いのがかっこいいと思ってる年頃 <div class="item"> <div class="label">A</div> <h2 class="title">itemA</h2> <p class="main">text text text text</p> <p class="showMore">more</p> <p class="more">more more more more</p> <p class="hideMore">hide</p> </div> <div class="item"> <div class="label">B</div> <h2 class="title">itemB</h2> <p class="main">text text
Kuwataさんとリポジトリ共有のためにBitbucket(http://bitbucket.org)を使っているんですが、そのヘルプのHTMLソースを見たら、表示と関係ない要素がいろいろ入ってました。 JavaScriptを使うことを前提に、JavaScriptプログラムから使うデータをHTML文書内に埋め込んでいるんですね。もちろん、これらのデータは見えてはいけないので、隠すように細工されています。 meta要素を使う head要素内のmeta要素は何も細工しなくても隠れています。ここにプログラム用データを入れられます。「メタ情報である」というセマンティクスに沿ったデータなら、metaに入れるのも理にかなっているでしょう。 <meta name="ajs-build-number" content="2032" /> <meta id="atlassian-token" name="a
昨日の #jstudy で、主催の @hokaccha さんから LT のお誘いを頂いたので、Node.js の話をさせて頂きました。 jstudy #2 : ATND 今回は、「Node.js ってなんなのか?」という部分を中心にしました。 アーキテクチャの話を割とざっくりしてから、 Node.js の雰囲気を知ってもらえればという感じにしました。 Node.js はサーバサイドも JavaScript で書けるけど、それだけでは無いんだよ、といった感じが何となく伝わればと思います。 実際前半あたりのアーキテクチャの話は、自分も色々勉強中です。 このスライド作るにあたっても、色々調べながらやったので、自分が間違って解釈したりしている部分が有るかもしれません。 (資料最後の参考資料あたりと、その他色んな資料) もし何かおかしなところが有ったら、教えて頂けると幸いです。 Nodejs Int
10+1 Things you should know about JavaScript testing - Nov 20, 2010 at John Resig feat. Shibuya.js, in Firefox Developers Conference 2010
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く