javascriptでthisと戯れる — ありえるえりあ
Recent entries Re: Adaで超いい加減HTTPサーバ iwanaga 2010-01-10 javascriptでthisと戯れる iwanaga 2009-11-13 第一回五反田Emacs勉強会のUstream配信 iwanaga 2009-09-29 わかった気になる気になるandroid iwanaga 2009-07-04 Rhinoを組み込む為のイントロダクション iwanaga 2009-02-02 最近のありえるはGoやったり、Closureやったりかっこ良いですね。 このあたりは社内の自称二十代の勉強会で教えて貰えることを期待しつつ、 新人さん向けに開催したjavascript勉強会の小ネタとして、 javascriptのthisについての話をしたのでその内容を載せてみます。 javascriptが本業の方などからしてみれば自明な内容かもしれませんが、
Pie and Donut Charts in D3.js | School of Data - Evidence is Power
D3.js is a JavaScript library that is widely used in data visualisation and animation. The power of d3.js and its flexibility, comes at the expense of its steep learning curve. There are some libraries built on top of it that provide numerous off-the-shelf charts in order to make the users’ life easier, however, learning to work with d3.js is essential sometimes, especially when you need to create
Fill rect with pattern
I am using d3.js for graph. at some point i have to show data with some special part of graph for example if the values is cross some boundary then show that part with filling pattern. for more clear is there in and image. i get the rect part that cross the boundary but how can i fill it with this pattern? any css or canvas tricks? Note : this image is just an example not the real one
D3.js入門(棒グラフをつくってみる) - ヘウレーカを廻って
D3.jsとは D3.jsというJavaScripのライブラリをご存知でしょうか。 http://ja.d3js.info/ （日本語の公式サイト） csvや配列などのデータをもとに、グラフを描画することができるライブラリです。 グラフなどは、公式サイトを見ていただければわかる通り、比較的簡単に自由度の高く、綺麗な図が描画可能です。 日本ではまだ認知度はあまり高くないですが、海外では既に多くの事例があり、GithubのYour Contributions(コミット回数が表示される図)などでも使われています。 データ・ドリブン JavaScriptといえば、マウス操作などのイベントが中心となって処理が行われるため、イベント駆動言語などと言われたりしますが、D3という名前は”Data Driven Document”の略であり、データをもとにドキュメントや図を描画します。 データ・ビジュアライ
JSFuckから理解するECMAScriptの仕様 - Kokudoriing
JSFuckとは JSFuckは任意のJavaScriptプログラムを[, ], (, ), !, +からなる6文字で置き換える試みです。 意味分かんないですね、サンプルを見てみましょう。 alert(1) 上記のJavaScriptコードと [][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]][([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!!
JavaScriptの最新仕様をみんなで読もう！ 『ECMA-262 Edition 5.1を読む』発売記念プレゼントキャンペーンを実施します - Hatena Developer Blog
竹迫良範（ id:TAKESAKO）さんが翻訳および編集をされた『ECMA-262 Edition 5.1を読む』が、9月25日に発売になりました。多くのWebエンジニアが利用するプログラミング言語「JavaScript」の最新仕様書である「ECMA-262 Edition 5.1」を完全翻訳し、解説を加えた一冊です。 ECMA-262 Edition 5.1を読む 作者: 竹迫良範出版社/メーカー: 秀和システム発売日: 2013/09/25メディア: 単行本この商品を含むブログを見る 本書には弊社エンジニアの id:nanto_vi がレビューで協力させていただいたこともあり、はてな開発者ブログでは発売を記念したキャンペーンを実施します。秀和システム様からご提供いただいた『ECMA-262 Edition 5.1を読む』に、はてなブックマークのオリジナルステッカーをセットにして、当ブロ
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。
カスタマイズ性の高いカレンダー機能が実装出来るjQueryプラグイン『CLNDR.js』 | バンクーバーのうぇぶ屋
「サイトにカレンダー機能付けて！」って時って、意外と悩みませんか？Wordpress何かで作る時はプラグインで対応しますが、CMS無しで、ランディングページ的なの作って的な案件の時は、まーなんだかんだよく迷う。Googleカレンダーの埋め込みだと見栄えがちょっと…って事も多いですよね。 僕はと言えば、プログラマーさんにカレンダー部分だけ別で依頼したりする事も少なくは無かったんですが、それにしたってカスタマイズ性を考えて高機能な物にすればする程、コストは掛かるし、ちょっとどうしたもんかと更に頭を悩ませる事も少なくありませんでした。 今日ご紹介する、jQueryのカレンダープラグイン『CLNDR.js』はもしかしたらそんな悩みを解決してくれる手段の一つになるかもなと思ったので、共有させて頂きます。 中を見てみると、結構jsの知識が無いとキツイ感じですが、jQuery触ったことあるレベルの人でも
JavaScriptで日付を扱うならこれ！「moment.js」
■ つかいかた（基礎編） ダウンロードしたmoment.jsをscriptタグで読み込ませたら準備完了です。 あとは下記のような実装で使用できます。 // momentオブジェクトを初期化して・・・ var m = moment(); // formatで出力! var output = m.format("YYYY年MM月DD日 HH:mm:ss dddd"); console.log(output); // => 2013年05月15日 12:34:56 Wednesday // 現在時刻 moment(); // ミリ秒で指定 moment(1368543600000); // タイムスタンプ（秒）で指定 moment.unix(1368543600); // Date.parseで解析可能な文字列を指定 moment("May 15, 2013"); // Dateオブジェクトか
RequireJSによるコードの分割と最適化 for enchant.js - Kengo's blog
enchant.jsプログラミングでRequireJSを使うとなにが嬉しいの？どうやって使うの？という話。最初はenchant.jsをCommonJS/Modulesに合うように書き変えなきゃダメだと思っていたんですが、そんなことはないんですね。これは便利。 何が嬉しいの？ 開発時にはゲームを複数のJSファイルに分割できるというメリットを、公開時にはゲームプレイに必要なダウンロード回数を減らせるというメリットを得られます。 Why Web Modules? 複雑なゲームじゃないしべつにgame.jsひとつで充分ですという場合には、はっきり言って不要なモノです。しかし長々と開発してたらクラス数が10を超えてきて超長いスクリプトになっちまったぜウォォという場合には、遠慮なくコードを分割統治できるというメリットは大きいでしょう。 enchant.jsとgame.jsを読み込む まずはrequir
Knockout + ContainerJS でテスタブルにToDoリストを作るチュートリアル - うなの日記
Knockout + ContainerJS + Require.js で テスタブル にToDoリストを作るチュートリアルです。 ポイント MVVMアーキテクチャでテスタブルに MVVMアーキテクチャを採用し、View(HTML/CSS)とViewModel,Modelを分離。 ViewModel、Modelは HTMLに非依存となるため、単体テストが可能になります。 オブジェクトの生成と依存関係を、DIコンテナで一元管理 DIコンテナを利用して、ViewModel、Modelの生成と関連付けを自動化。 コンポーネント間の結合を疎にでき、テスト時のモックへの差し替えも簡単にできるようになります。 JavaScriptソースはクラスごとに分割管理 1ファイル200行超えたらメンテナンスとか無理ですよね! ということで、ソースファイルはクラスごとに分割管理します。 ソース間の依存関係解決と読
iPhone/Android/PCのブラウザ対応、フリック操作をシンプルに実装できるjQueryプラグイン - makogの日記
自作のjQueryプラグイン、jQuery.flickSimpleを公開します。 jQuery.flickSimple デモ / マニュアル（iPhone/Androidでもご覧いただけます） jQuery.flickSimple ダウンロード（github） これは、iPhoneの特徴的なインタフェースであるフリック操作を、Webサイト上で実現するための jQueryプラグインです。某サイトのiPhone版のためにだいぶ前に書いたもので、当時はiPhone専用だったのですが、Android対応の依頼を受けたのをきっかけに、PCのブラウザにも対応しようと、大幅に作り直したものです。 フリック動作を実現するjQueryプラグインは既にいくつかあります。機能としても実装としても、私が作ったものより優れているものもあると思いますが、まずは公開することに意義がある、ということで。 ちなみに、このス
AJAX で拡張したサイト - ウェブマスター/サイト所有者 ヘルプ
Stay organized with collections Save and categorize content based on your preferences. Understand the JavaScript SEO basics JavaScript is an important part of the web platform because it provides many features that turn the web into a powerful application platform. Making your JavaScript-powered web applications discoverable via Google Search can help you find new users and re-engage existing user
Backbone.jsを利用したクライアントサイドMVCの導入についてそろそろ書いておくか - 出町ミスド攻防記
jQueryヘビーなアプリケーションの問題点と、MVCによる構造化の必要性 jQueryは、ブラウザ上で動くJSアプリケーションの開発生産性を劇的に向上させました。DOM操作による動的なページ書き換え処理などは、セレクタを使ってちょろっとコードを書くだけで、ほんの数行で記述できてしまいます。 しかし、この方法の延長で、大規模なJSアプリケーションを構築することは果たして現実的でしょうか。例えば「GMail」や「New Twitter」程度の規模のJSアプリケーションを書かなければならないとしたら、どうでしょう？ 大規模なJSアプリケーションを開発するには、こういった手法を延長するのではなく、より洗練されたデザインパターンを導入する必要があります。この目的にぴったりのデザインパターンが、「MVC」デザインパターンです。 MVCパターンは、Webの世界ではサーバサイドプログラミングで広く知られ
PhantomJSとJasmineで振る舞い駆動開発なJavaScriptテスト
PhantomJSとJasmineで振る舞い駆動開発なJavaScriptテスト：フレームワークで実践！ JavaScriptテスト入門（2）（1/3 ページ） しっかりとJavaScriptをテストするために、今注目のJavaScript用のテストフレームワークをいくつか紹介し、その概要から実践的な使い方まで解説する連載 前回は、JavaScriptテストの基本、今回からフレーワムークを紹介 前回の「JavaScriptテストの基礎知識と使えるフレームワーク6選」では、JavaScriptのテストを取り巻く環境や、JavaScriptのテストに使用できるフレームワークの紹介を行いました。今回からは、前回の記事で紹介されたフレームワークを使用して実際にJavaScriptのテスト環境を構築し、テストを行うまでの流れを解説します。 今回は「PhantomJS」と「Jasmine」を取り上げま
QUnit＋PhantomJSでJavaScriptのヘッドレスなテスト
QUnit＋PhantomJSでJavaScriptのヘッドレスなテスト：フレームワークで実践！ JavaScriptテスト入門（3）（1/3 ページ） しっかりとJavaScriptをテストするために、今注目のJavaScript用のテストフレームワークをいくつか紹介し、その概要から実践的な使い方まで解説する連載。今回は、xUnit系のテストフレームワークとして人気のQUnitの概要や使い方、PhantomJSと組み合わせたテスト方法を紹介 ヘッドレスなJavaScriptテスト 前回の「PhantomJSとJasmineで振る舞い駆動開発なJavaScriptテスト」では、PhantomJS＋Jasmineという組み合わせでJavaScriptテストをヘッドレスで実行する方法を紹介しました。今回は「QUnit」というJavaScriptテストフレームワークでヘッドレスなテスト環境を構築
短期間でJavaScriptを習得し、アプリ・Webサービスをつくるための勉強法 | らふらく ^^ @TwinTKchan #spam
前回書いた 短期間でプログラミングを習得してWebサービスをつくるための知識と方法まとめ が好評だったので、今回は、JavaScriptに絞って習得するための方法をまとめてみたいと思います。 ちなみに、一番最初に、JSに触れた時は、Hello, Worldを表示させたり、 aタグでリンクをはったりぐらいしか出来ませんでした。 ですが、現在はjQueryで社内システムの 画面をつくる(Ajaxとかを使って)事を任せてもらっています。 なぜ、JavaScript(JS)がいいのか？なぜ勉強するのか？ まずは、なぜJSをお薦めするのかを説明します。 ①ネイティブアプリがつくれちゃう。 ネイティブアプリとは、iPhoneアプリとか、Androidアプリのことです。 これまでは、iPhoneなら、Objective-Cという言語を、 AndroidならJava(JSとは別物)という言語
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
knockout.js - Get ViewModel from DOM element
http://s3pw.com/garage/jquery-trivia/
Account Suspended