JavaScriptでconcatはもう使うべきではないのかもしれない (Kanasansoft Web Lab.)
当エントリーは多くの誤りを含んでいます。参考にされる場合は最後の追記部分まで含めて読まれるようにお願いします。 それなりに慣れているはずのプロのプログラマでも、このような勘違いや大失態をすることがあるという教訓として残すために、エントリーの削除や修正はせずに追記のみに留めておきます。 JavaScriptで、配列に要素を追加するメソッドに、push、unshift、splice、concatがある。このうち、配列の後方に要素を追加するのは、(要素を好きな場所に追加可能なspliceを除くと)pushとconcatの二つである。この二つのメソッドは破壊的/非破壊的の違いがあれ、似たような挙動を示す。
JavaScriptでIteratorを書く - あと味
最近、Wordpress絡みでPHPを書くことが多くて、かつバージョンも5.2だったりするので、高階関数とか無名関数とかが無性に使いたくなります。 ということで、JavaScriptでIteratorでも書いて心の平静を保つことにします。 クロージャ版Iterator これが書けるJavaScriptは素敵だ。 使用例 var iter = iterator(document.getElementsByTagName('a')); console.log(iter.next()); console.log(iter.prev()); クラスメソッド版Iterator メソッドチェーンのこと好きです。付き合ってください。 使用例 Iterator([1,2,3]).next().get(console.log).prev().get(console.log).next().get(); ge
Javascriptのthisと僕の可愛い妹 - tumblr
久しぶりにJSいじってて、やるうちに文法とか制御構文とかIEに対する怒りとか色々思い出してきて、特にthisとか大事だと思ったので覚書。 thisって最初やったときは超鬼門だった。this使ってオブジェクト参照してたら全く違うもの参照しててデバッグに滅茶苦茶苦労したり。文脈によって中身が全く違う。訳わかんない。超八方美人。僕の妹みたい。今日ある男を家に連れ込んできたと思ったら、次の日は全く違う男と歩いてやがる。普段は僕のことなんかキモイとか言ってゴキブリとかvimmerとかと同等に扱って邪険にするくせに、たまにやたらボディタッチとかしてきて異常に甘えてくるときがある。訳わかんない。 でも、Javascriptのthisにしても、僕の妹にしても、その何かになびくポリシーさえ分かれば扱いは簡単だった。 thisってのはつまるところ、それの関数がどのオブジェクトのプロパティとして呼び出されたのか
Function.prototype.bindは何がいいのか - 枕を欹てて聴く
ES5からFunction.prototype.bindが入りました. これに準ずるものは数々のFrameworkで提供され続けてきたので, あまり馴染みの無さはないのではないでしょうか. このFunction.ptototype.bindは実はとても面白いので. 結論から言えば, Function.prototype.bindはtarget functionのConstructに完全に移譲するのでConstructorの引数束縛が行えます. またConstructor callに対して配列を渡すapply形式のものといったapplyConstructorやcallConstructorをbindを使って実装することができます. 基本 Function.prototype.bindは基本的にはthisとargumentsに特定の値を束縛する関数です. bindは第一引数にthis, 次から
JavaScript: canvas で点線・破線を描くためのライブラリを作ってみた | anobota
JavaScript: canvas で点線・破線を描くためのライブラリを作ってみた Javascript + canvas で点線・破線を描画するためのライブラリです。 Description: A library to draw dotted/dashed line for Javasctipt/canvas. canvas を使ってちょっとした折れ線グラフを書かせてみようとしたところ、点線・破線が描けないので困りました。 なぜ困るかというと、モノクロ印刷するときに系列の区別を付けにくくなるからです。 という訳であまり出来の良くない再発明っぽいですが作ってみました。 ベタに書いてみただけなのでパフォーマンスとかはあまり良くない（アニメーションなどさせると辛い）と思います。 Firefox でしか動作確認していません。 円弧やベジェ曲線は描けません（自前で何とかする必要があります）。 パ
ピュアAJAXアーキテクチャのススメ
先日、ここで発表したFacebookユーザーむけグループウェア「Fruence.com」。今年のトレンドになるであろう「ソシアル・アプリ」の実例という意味もあったが、私自身の中で少し前から形になりつつあった「AJAXを最大限に活用した新しい形にウェブ・アプリケーション」のアーキテクチャの実践という意味合いも大きい。 このアーキテクチャの特徴は以下の３つである。 サーバー側は、JSON over HTTPのAPIとHTML/CSS（およびそのテンプレート）をスタティックな形でのみ提供する（サーバー側では、ダイナミックなHTMLの生成はしない） クライアント側では、JavaScriptを使ってサーバーから取得したJSONとHTMLのテンプレートを組み合わせて（データ・バインドして）表示する。 ウェブサイトはあたかも独立したアプリのように動き、操作中はURLは一切変化しない もともとは、HTML
2011年はサーバサイドJavaScriptの年になる
「2011年はサーバサイドJavaScriptの年になる」 こう書いているのは、JavaScriptのテストフレームワークZombie.jsの作者Assaf Arkin氏。ブログLabnotesで、エントリ「2011 is year of the Server-Side JavaScript」を公開しています。 5年前のRubyや90年代のJavaに似ている Arkin氏は、JavaScriptが登場したときにNetscapeはサーバサイドJavaScriptも用意していたのを覚えている人はいないだろうな、との書き出しで過去を振り返っています。 not many people remember, Server-Side JavaScript for writing the back-end logic. I believe back then it was called LiveWire.
JavaScript による日付・時刻・時間の計算・演算のまとめ - hoge256ブログ
JavaScript でいろいろな日付の計算関係をまとめてみました。前回の日付関係のまとめエントリの JavaScript版です。 日付の単位について 基本的なことですが、一応まとめておきます。 1秒は1000ミリ秒 1分は60秒 1時間は60分 よって 1時間=60分=3600秒=3600000ミリ秒 1日=24時間=1440分=86400秒=86400000ミリ秒 現在時刻の取得 まずは、最もよく使う処理です。 //今日の日時を表示 var date = new Date(); document.write(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.get
Cookie を使ったユーザー認証を JavaScript で実装する - WebOS Goodies
今日は、なぜか JavaScript でユーザー認証を実装する方法をご紹介します。いや、都合で必要になったもので、ついでに記事にしただけです（＾＾ヾ。もちろん JavaScript ではクラックしようと思えばいくらでもできてしまうのですが、「あまりやられたくない」程度のことを防御する手段としては便利なのではないでしょうか。 認証は、入力したパスワードを Cookie に保存しておき、ページ内に暗号化して埋め込んだパスワードと比較することで行います。JavaScript で Cookie を扱ったりパスワードを暗号化したりする方法は、他にも応用できると思います。 Cookie の設定 ではまず、Cookie の設定方法からご紹介します。JavaScript で Cookie を設定するには、document.cookie に Cookie の文字列を代入します。書式は HTTP リクエストヘ
HTML5が注目を浴びる理由とは？ ここが違う！サンプルで見るHTML5（1）
はじめに この連載では、「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。 HTML5はなぜ注目されているのか HTML5は、今やウェブ業界の流行語といっても良いほどの過熱ぶりです。HTML5は、名前の通り、HTML4の後継に当たる仕様です。とはいえ、HTML5に注目しているのは、ホームページを作成するウェブ制作者だけではありません。ウェブ業界に限らず、あらゆるIT関連業界で注目を浴びています。なぜ、これほどまでにHTML5が注目を浴びているのでしょうか。 この理由は、大きく分けて2つあります。1つはマークアップです。もう1つはAPIです。 マークアップの仕様を更新 まずは、マークアップの視点から見ていきましょう。これは、とりわけウェブ制作者、中でもウェブページ製作の現場において重要です。これまでウェブ
[JavaScript] うろ覚えだった `RegExp` オブジェクト をしっかり学習した
RegExp は 正規表現(Regular Expression)の略。以下、参考サイト。 正規表現（RegExp）RegExp - MDC Doc CenterRegExp オブジェクトの中身は？RegExp オブジェクトのプロパティには 直前の マッチングに関する情報が入る。じゃあ何が入っているのか？ //とりあえずなにもせずに調べてみる function dump( obj ){ var str = ''; for(var k in obj){ str += k + "("+typeof(obj[k]) + ") | " + obj[k] + "\n"; } document.write( str ); } dump( RegExp ); input(string) | message.Reload to activate window console multiline(boole
HTTP と WebSocket でセッションを共有する
こんにちは、 nodejs.jp の @masahirohです。 JavaScript Advent Calendar の最終日です。クリスマスだけど空気を読まずに Node.js の地味な話をします。ごめんなさい。 さて、 Node.js では Socket.IO を使えば、 WebSocket を使ったアプリケーションを割と簡単に作れるわけですが、これを Web フレームワークと一緒に使う場合、どうやってセッションを共有したらいいんだろう？とふと思いました。ユーザ名とパスワードをメッセージにのせたらいいんですかね？ いや、セッション ID をメッセージにのせればいいのかな？ うーん・・と思いながら Github をうろうろしていたら SessionWebSocket というアプリケーションを見つけました。セッション管理機能を追加する方法が結構参考になったので、コードリーディングをします
ウェブページ内の特定の座標にスクロールさせる方法 - JavaScript TIPSふぁくとりー
《2017年6月9日 2:00 PM 公開/更新》 ウェブページ内の特定の座標にスクロールさせる方法 [操作・移動] JavaScriptを使えば、ウェブページ内の特定の座標にスクロールさせられます。スクロール先に何らかの目印を用意する必要はなく、単に window.scroll(X,Y); の書式でX座標とY座標を記述するだけです。座標ではなく移動量を指定したい場合は、window.scrollBy(X,Y); のように記述します。これらのscrollメソッドやscrollByメソッドを使えば、ウェブページ内を縦横自在にスクロールさせられます。 ウェブページ内の特定の座標にスクロールさせる方法 半画面分ずつスクロールする機能を作る アンカーポイントなしで、ページの最上部に戻るリンクが作れる ウェブページ内の特定の座標にスクロールさせる方法： 絶対座標のscroll(X,Y) と移動量のs
InfoQ「Ryan Dahlに45分間Node.jsのことを訊きまくった」 - 以下斜め読んだ内容
infoQ 2010.12.13公開のインタビュー記事 2010.12.16聞き手の質問書き足して、10分くらいまで書いた InfoQ: Deep inside Node.js with Ryan Dahl Node.jsクリエータRyan Dahlへの45:15のロングインタビュー 2010.11開催のQCon San Francisco 2010でRyanもスピーカーの一人として参加してたので、合間に収録されたインタビューと思う。 トランススクリプトが公開されてて助かるがtypoが多い whatがwasになってたりdomはdomeになったり、jsdomが "JS DOM"になったり 動画みて適宜 入門的な話題はほどほどにしてて結構突っ込んだ内容話してる その結果、結構歯が立たない箇所ばかり。けどなんとか斜め読んだ 聞き手は@synodinos 以下斜め読んだ内容 要旨 Node.jsの
[JavaScript] typeof arg == 'undefined' っていらないんじゃね？ / LiosK-free Blog
2008-09-24 カテゴリ: Client Side タグ: Tips JavaScript 以前にも JavaScript の null と undefined に関する記事を書いたことがあったが、またしても性懲りもなく null と undefined の挙動につまずいて、 ECMAScript 3 の仕様書まで調べ直したので、メモ代わりにエントリー化。 Abstract このエントリーの内容をざっくりとまとめると、 something == null がどういう値を返すのかが気になって、ECMAScript 3 の仕様書までさかのぼって調べてみると、 null == null undefined == undefined null == undefined undefined == null のパターンでのみ true を返すということがわかった、という話。細かい経緯は続きで。
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
JSDeferred 紹介
JSDeferred について JSDeferred は JavaScript のコールバックによる非同期処理を直列的に書けるようにするために作られたライブラリです。 foofunc(function () { barfunc(function () { bazfunc(function () { }); }); }); foofunc().next(barfunc).next(bazfunc); 簡単な使いかた 読み込み まずは JSDeferred を使うために、HTML に script 要素を追加します。 <script type="text/javascript" src="jsdeferred.js"></script> <script type="text/javascript" src="my.js"></script> JSDeferred は外部ライブラリに依存しておら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to sort array in javascript?
はてなブログ | 無料ブログを作成しよう
はてなブログ | 無料ブログを作成しよう