HTML(.js) - Befriend the DOM!
Intuitive HTML lets you navigate, manipulate and use the DOM with intuitive, readable, consistent code. Powerful HTML's functions enable you to flexibly use all native DOM features with brevity, clarity, and more power than ever. HTML document.documentElement The global HTML is the actual document root element and all element tags queried via the dot operator are descendants. HTML.tag... Element|A
Googleカレンダー風に時間を入力·Timepicker for jQuery MOONGIFT
Timepicker for jQueryはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Web上で入力する事が多いのが日時です。日付についてはカレンダーピッカーがありますが、時間は意外と面倒な入力を行う事が多いです。そこで使ってみたいのがGoogleカレンダー風入力を実現してくれるTimepicker for jQueryです。 基本的な使い方。クリックすると30分ごとの時間が出てきます。 現在時刻を中心にセットしてくれる設定もあります。 ある時刻からの時間を表示するデモ。1時間のミーティングなども指定しやすそうです。 ある時間を無効にする指定もできます。 時間のフォーマットは自由に設定できます。 ステップはデフォルト30分ごとですが、15分や60分も指定できます。 カレンダー入力と連携する形です。この二つで入力が随分と楽になりそうで
How Bad is DOM Interaction - Really?
Lots of us frontend developers seem to be increasingly concerned with interacting with the DOM lately, during a time when JavaScript engines and browser rendering performance has been faster than ever! In this article I will try to douse a few myths about DOM interaction in foam, whilst giving a few little performance tips to make sure your apps run super fast when you're interacting with the DOM.
Backbone.js Tips And Patterns — Smashing Magazine
Backbone.js provides structure to JavaScript applications, but it leaves a lot of design patterns and decisions up to developers who end up running into common problems when they first begin developing in Backbone.js. In this article, Phillip Whisenhunt will explore different design patterns that you can use in your Backbone.js applications, and he’ll look at many of the common gotchas that trip u
一歩進んだHTML/CSS/JSを目指すために | 1000ch.net
2013/08/01 一歩進んだHTML/CSS/JSを目指すために 「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。」 それを解消するためのツールがありますので、紹介します。 HTMLInspector philipwalton/html-inspector Introducing HTML Inspector こちらはHTMLを解析して悪いところを指摘してくれるツール。 たぶんガイドラインとかそれぞれあると思いますが、基本的にはコレに沿ってもいいかと。 スクリプトを差し込んで、実行すると、指摘事項がconsoleに出力されます。 githubのリポジトリからダウンロードするか、bowerで落としてくるか。 bower install html-inspector 次に、解析したいページに以下のコードを埋め込みます。 <script s
継承とプロトタイプチェーン - JavaScript | MDN
JavaScript のオブジェクトはプロパティ（自身のプロパティを指す）の動的な「袋」です。 JavaScript のオブジェクトは、プロトタイプオブジェクトへのリンクを持っています。あるオブジェクトのプロパティにアクセスしようとすると、オブジェクトだけでなく、オブジェクトのプロトタイプ、プロトタイプのプロトタイプへと、一致する名前のプロパティが得られるか、プロトタイプチェーンの終端に到達するまで、プロパティの探索が行われます。 メモ: ECMAScript 標準に従い、 someObject.[[Prototype]] という表記を someObject のプロトタイプを示すのに使用しています。内部スロット [[Prototype]] には Object.getPrototypeOf() と Object.setPrototypeOf() 関数でアクセスすることができます。これは、標準
JavaScript で有効数字 28桁の Decimal 型を書いた - アスペ日記
JavaScript の Decimal 型を書いて、GitHub と npm で公開した。 https://github.com/hiroshi-manabe/JSDecimal https://npmjs.org/package/jsdecimal C# （っていうか .NET）には Decimal型 というのがあるらしい。 十進数で 28〜29桁（なんだその「28〜29桁」ってのは…後述）の精度を保証するとのこと。 それで、お金の絡む計算にはよく使われるそうだ。 で、人から聞いた話だけど、そういう計算をサーバ側でしていたのをクライアント側でもしたいということがあるようだ。 Ajax でも使って、サーバ側で計算させたものを取ってくればいいと思うのだが、そうもいかないこともあるらしい。 何に使うかというと、ちゃんとした計算はサーバでやるものの、プレビューみたいなものをユーザに見せたいとか
JavaScript イディオム集
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
Chrome Packaged Appsでシリアル通信して遊ぼうぜ | コーヒーサーバは香炉である
Google I/Oで話題になっていたらしいChrome Packaged Apps、ハードでいろいろやりたい人にとってはなかなか面白いグッズが揃っている。 シリアル通信とか chrome.serial – Google Chrome USBとか chrome.usb – Google Chrome Bluetoothとか chrome.bluetooth – Google Chrome 私もこの手の遊びは好きで、リアルFacebookガジェットの開発に参加したり、他にも仕込み中のネタがいろいろあったりするけれど、如何せんクロスプラットフォームめんどくさい。Chromeで一回書けばいろんな環境で動くというのは非常にありがたい。 とても簡単なシリアル通信の例。とりあえずPackaged Appsの作り方は開発者向けのチュートリアルがあるのでそちらに任せるとして…… manifes
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オブジェクトか
Introduction to Fay - 純粋関数空間
Fay をいじってみたので、 せっかくだから記事を書いておこうと思います。 なお、Fayは新しい言語（というより、処理系と言った方が適切かな）ですので、 ここに書いてある情報は、来年か、あるいは半年後か、 それとももっとずっと早くに陳腐化する可能性がそれなりに低くないことを、 あらかじめお断りしておきます。 この記事執筆時に用いたFayのバージョンは、 fay-0.14.5.0 です。 デモ・前置き 特に何か作りたいものが有ったわけではなかったので、 今回作ってみたものは超どうでも良いツールです。 http://tanakh.jp/tools/sudden.html ＿人人人人人人＿ ＞ 突然の死 ＜ ￣Y^Y^Y^Y^Y￣ こういうテキストを生成するだけのツールです。 Fayのコード HTMLコード これらのコンパイルなどもhakyllでまとめて管理できるようにしました。 hakyllに
JavaScript Garden
JavaScript Garden はJavaScriptというプログラム言語の一番奇妙な部分についてのドキュメント集です。 このドキュメントはJavaScriptという言語に慣れていないプログラマーがこの言語について深く知ろうとする際に遭遇する、良くある間違い・小さなバグ・パフォーマンスの問題・悪い習慣などを避ける為のアドバイスを与えます。 JavaScript GardenはJavaScriptを教える事を目的にしていません。このガイドの項目を理解する為には、この言語に対する前提知識がある事を推奨します。この言語の基礎部分についてはMozilla Developer Networkのガイド がオススメです。 著者 このガイドは愛すべきStack Overflowの2人のユーザーIvo Wetzel (執筆)とZhang Yi Jiang (デザイン)によって作られました。 貢献者 貢献
jQuery Custom Events
Overview In the�last article�about�unobtrusive JavaScript, we learned how to use�event delegation�and markup-driven behavior to create reusable JavaScript components. This article will explore how to use custom events in jQuery to give the developer even greater control over the component’s behavior. While many facets of an�unobtrusive widget�can be controlled via the markup (data attributes), we
jQueryのDeffered/Promiseを会得した(いまごろ) - ただのにっき(2013-04-17)
■ jQueryのDeffered/Promiseを会得した(いまごろ) なんか最近、やたらと非同期処理の文脈で「promise」というキーワードを見ることが増えて、なんか流行ってんのかなーくらいにしか思ってなかったんだけど、実はjQuery.ajaxを使っているときに恩恵を受けていたことを(いくつか実装してみて)ようやく理解したのであった。Deffered/Promiseが実装されたのは、もう2.0もなろうというjQueryが1.5のころの話である。鈍すぎる……。 というのも、あんまり理解せずにコピペしていたからなんだよな。かつてはこんな感じに書いていたjQuery.ajaxの呼び出しが: jQuery.ajax({ type: 'POST', url: '/', ..., success: function(){...}, error: function(){...} }); 何かのソ
はじめてのNode.js：Node.jsのイベントシステムを知る | OSDN Magazine
本記事は、3月13日にソフトバンク クリエイティブより発売された書籍「はじめてのNode.js －サーバーサイドJavaScriptでWebアプリを開発する－」から、「第7章 Node.jsアプリケーションのデバッグ方法」の一部を抜き出し再構成したものです。 出版社ページ / Amazon.co.jpの商品ページ 大型本: 384ページ、価格：3,045円（税込）、ISBN: 978-4797370904 Node.jsでのWebアプリケーション実行モデル PHPやPerlなどの言語でWebアプリケーションを実装する場合、クライアント（Webブラウザ）とのやり取りはApache HTTP ServerなどのWebサーバーが行い、プログラムはWebサーバー経由で実行される形が多い。いっぽうNode.jsの場合、Node.js自体（正確にはNode.jsに含まれるWebサーバーモジュール）が直
Effective JavaScript勉強会 #1 - teppeis blog
社内でEffective JavaScriptの勉強会を始めました。 第1回の資料をslideshareに上げたので、シェアさせていただきます！（春なので意識高め） Effective JavaScript Ch.1 from teppeis スライドにも書いたけど、これまでだと類書で薄いのは『JavaScript: The Good Parts』っていうのがあったんだけど、ちょっとクセが強いというか、Douglas Crockford節が強すぎて、盲目的に全部真似するとちょっとアレな感じなので、安易に薦めにくい本でした。 参考: 『JavaScript:The Good Parts』にツッコミ (Kanasansoft Web Lab.) Effective JavaScriptはそれに比べるとマイルドで、「new使うな！」とか書いてないので安心できます。 あとGood Partsの方で
CI as a Service ブラウザを使ったJavaScriptのテストをCIサービスで動かす方法のまとめ
Travis CIを始めとするウェブサービスとして使えるCIを使って、 JavaScriptのブラウザテスト(ブラウザ上でJavaScriptを走らせて行うユニットテスト)をやる方法をサービスごとにまとめてみました。 テストフレームワークとして Buster.JS を使用して行います。 Karma (旧Testacular) では公式サイトにも Karma – Travis CI でCI Serviceとの連携方法が記載されているのでそちらも参考にして下さい。 今回紹介するCI Servicesは以下のものです。 Travis CI drone.io BuildHive Jepso CI テスト実行の流れ Jepso CI を除いては、テスト実行の流れ自体は同じなので先に解説します。 Capture用のローカルサーバを立てる テストしたいブラウザで capture URL へアクセスする
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
– Tech Pro Shopping
JSer.info
JavaScriptがもっと好きになる。JavaScriptを知るために