@ledsun blog

Hのキーがhellで、Sのキーがslaveだ、と彼は思った。そしてYのキーがyouだ。

JavaScript

component.js(1.0.0-rc5)を試す

component.js component.jsはnpmやbowerを使った依存する外部ライブラリ(JavaScript,CSSともを含む)の解決と、 unglifyやcssminで行う自作ファイルを適切に組み合わせるビルドを1つのツールでやってしまおうとする 意欲的なツールです。 Getting Started …

ZeroClipboard

ZeroClipboardを紹介します。 ZeroClipboardとは ブラウザからクリップボードに書き込むためのJavaScirptライブラリ。 githubで使われています。 なぜZeroClipboard? クリップボード操作はブラウザ依存(InternetExplorer専用)です。 ZeroClipboardはFlash…

設定なし、コマンド一つで起動できる簡易httpサーバー http-server

nodeapps/http-serverを紹介します。 これはなに? 設定なし、コマンド一つで起動できる簡易httpサーバーです。Node.jsで実行します。 どうやって使うの? インストール brew install node npm install http-server -g 起動 http-server . ブラウザで http:/…

JavaScriptのreduce関数が便利、けど動きが理解しづらいのでサンプルを列挙

JavaScriptのreduce関数がとても便利なのです。 たとえば ユニークはこんな感じ var unique = function(array) { return array.reduce(function(a, b) { if (a.indexOf(b) === -1) { a.push(b); } return a; }, []); }; 関数の外部に結果を格納する変数を作…

AngularJSで画面制御 ただしJavaScriptは書かない

AngularJSはモデルとビューの間のデータを自動的に同期してくれます。 モデルとは内部データです ビューはhtmlです つまりhtml上に入力した値が自動的に内部データに反映され、内部データが変更されれば自動的にhtmlも更新されます。 詳しくはリファレンスを…

YEOMANを使ってMEAN(MongoDB + Express.js + Angular.js + Node.js)のWebアプリケーションを作る

MEANとは MongoDB + Express.js + Angular.js + Node.js を組み合わせてWebアプリケーションを作成することです。 手順 Windows上で簡単なユーザ登録アプリケーションを作ってみましょう。 次の手順で進めていきます。 アプリケーションの雛形を作成 ユーザ…

Grunt livereload でファイルを修正したらブラウザを自動リロード

livereloadとは? ファイルの変更を検知したらブラウザで読み込みなおすgrunt-contribe-watch プラグインのオプションです。 grunt-contribe-connectプラグインとブラウザ拡張と組み合わせて使います。 何がうれしいの? クライアントJavaScriptの開発では …

QUnitの概要

QUnitとは JavaScript用のTestingFrameworkです。 由来 jQueryのテスト用に作られ、今もjQuery、jQuery-UIのテストに使われています。 それ自体はjQueryに依存していませんが、テスト内でDOMを操作したりイベントを生成したりするのにjQueryを使うと便利です…

My first grunt

grunt とは? JavaScript開発でよく使うビルドツール。makeやrakeのJavaScript版です。 Grunt: The JavaScript Task Runnerにて公開されています。 どうやって使うの? コマンドラインから操作します。Node.jsのパッケージマネージャ(npm)を使ってインストー…

JavaScriptでSigletonオブジェクトを実装してみる

いろいろなSingletonを実装してみます。 関数 var getSingleton = (function() { var instance = null, init = function() { instance = { value: Math.random() } }; return function() { if (instance == null) { init(); } return instance; }; })(); var…

JavaScriptのパターン シングルトンパターン

定義を確認 GoFの定義したSingletonパターンの目的(Intent)は以下の二つです*1。 あるクラスのインスタンスが1つしか生成されないことを保証する そのオブジェクトへのグローバルなアクセス手段を提供する 実装例 JavaScript デザインパターンの例がいけてま…

JavaScriptのオブジェクト生成

JavaScriptには次の三つのオブジェクト生成方法があります。 プロトタイプ風 クラス風(異教徒の呪い、Fxxk your God!!!) 関数の束縛 比べてみましょう。 例に使う関数 ここに指定した文字に挨拶をする関数があります。 var hello = function(str) { return…

Douglas Crockford の説明する「JavaScriptのプロトタイプ継承」

Douglas Crockford によるJavaScriptのプロタイプ継承の説明 Prototypal Inheritance の翻訳です。 JavaScriptのプロトタイプ継承 2006-06-07 Douglas Crockford - www.crockford.com 私は五年前に「Classical Inheritance in JavaScript」(中国語 イタリア…

JavaScriptのプロトタイプ継承

JavaScriptをプロトタイプベースのオブジェクト指向言語と説明することがあります。 プロトタイプベースとはJavaScriptのどのような特徴を指しているのでしょうか? プロトタイプベースとは何か? まず最初に「プロトタイプベース」という言葉の意味を整理し…

JavaScriptのパターン オブジェクトの拡張

対象オブジェクトに複数のプロパティを一度に追加します。 以下のデザインパターンを適用する。 extendパターン 元の処理 プロパティを一つずつ設定します。 var mike = {}; mike.firstName = "michelle"; mike.lastName = "jackson"; mike.getFullName = fu…

JavaScriptのパターン コンストラクタパターン

JavaScriptのオブジェクトの生成、特にコンストラクタに次のデザインパターンを適用します。 オブジェクトリテラル 基本のコンストラクタパターン プロトタイプを使ったコンストラクタパターン モジュールパターン 最初の関数 指定された文字を指定された回…

RhinoまたはAntでJavaScriptを複数ファイルに分けるために

JavaScirptには別のファイルに書かれたスクリプトを読み込む方法がありません。しかしスクリプトファイルが大きくなると複数のファイルに分けたくなります。 別のスクリプトファイルを読み込む(includeする)方法が必要です*1。 次の file1.js を読み込みま…

AntからJavaScriptを実行したときに起きたエラーを拾う方法

Apache AntではScriptタスクを使うとJavaScirptを実行できる。 しかしJavaScriptで例外が上がると、表示される内容の9割以上がRhinoScriptEngineの例外になる。 興味があるJavaScriptの例外は一行だけ。 例外が起きるbuild.xml <project default="a"> <target name="a"> <script language="javascript"><![CDATA[ throw 'わあ!';</script></target></project>…

JavaScriptの値が配列かどうか見分ける方法のまとめ

JavaScriptには配列に typeof 演算子を使うと object が帰ってくるという糞仕様があるためみなさん苦労されている。 Douglas Crockfordさん Douglas CrockfordさんのDuckTyping方式。JavaScript: The Good Parts 「6.5 配列かどうか」より抜粋 var is_array …

Javaのスクリプティング機能のimportPackage文の書き方

Java スクリプティング機能とはJavaからJavaScriptを実行したり、JavaScriptからJavaのクラスを参照したりする機能。 詳しくはJava SE 6 じゃじゃ馬ならし Scriptingを見てもらうとして JavaScriptからJavaで定義されたクラスを参照する際にパッケージをimpo…

JavaScript殺法 11のリファクタリング

JavaScriptを書いていてぶち殺したくなった時によく使うリファクタリングです。 1.定義順を整理 JavaScriptパターンの5.4.1 モジュールパターンの開示を参考に、var、処理、API公開の順に並べなおす。 function () { //宣言 var hoge = 'hoge', fuga = ''; /…

JavaScriptパターン ―優れたアプリケーションのための作法

2章 必須パターン、3章 リテラルとコンストラクタ JavaScriptを書くときの注意点。JavaScript: The Good Partsの方が理由の説明が分かりやすい。 YUI DocについてはGood Partsには記述が無いので参考になる。 4章 関数 関数の書き方はJavaScript: The Good P…

ステートフルJavaScript(JavaScriptフレームワーク 3分間クッキング)

FlexやSilverlightの代わりにJavaScriptを使ってリッチクライアントアプリケーション(RIA)を開発するための解説書。著者Alex MacCawはSpine*1の作者。 ざっくりした内容 この本には二つのテーマがある。 表テーマ:「最新のJavaScriptアプリケーションを開…

jQuery.validateはform専用だった。

form専用なの? An error is encountered in below case. I use jQuery.validate wtih jQuery.ui.dialog. At first, I validate to div in form. I show dialog, the div move out of the form*1, and a focusin event triggered to the first input element…

jQuery UI datepickerの showButtonPanel にボタンを追加する

jQuery UI datepickerの showButtonPanel にボタンを追加します。今回はクリアボタンを追加します。 ボタンを表示 showButtonPanel を trueにしてボタンを表示します $("#datepicker2").datepicker({ showButtonPanel: true }); ボタンを追加 beforeShowイベ…

jQuery.validate プラグイン の落とし穴

初期値があると必須バリデーションが上手く動かない 初期値があると、初期値を消したときに「必須です」メッセージが表示されません。 デモ 初期値があるテキスト要素に必須バリデーションが上手く効かない - jsdo.it - Share JavaScript, HTML5 and CSS 対…

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

IE6が死にそろそろ業務向けのWebアプリケーションでもクライアントサイドで処理を動かすいい時期だと思う。お手軽に動きをつけるならjQueryがいい。ソースコードが増え1000行超えると、仕様が変わったときにどこを修正したらいいか分からなくなる。しかしJav…

JavaScriptのオブジェクトをコピーする

API Only - Stack Exchangeに詳しい解説があったので翻訳する。 質問 オブジェクトxをオブジェクトyにコピーしたい。yを変更してもxが変更されないようにだ。JavaScriptで、最もエレガントな方法は?追記: JavaScriptの組み込みオブジェクトをコピーすると不…