JavaScriptでbind()を使って部分適用する - HackerNews翻訳してみた
「HackerNews翻訳してみた」が POSTD (ポスト・ディー) としてリニューアルしました！ この記事はここでも公開されています。 Original article: Partial Application in JavaScript using bind() by Pascal Hartig JavaScriptの中にはコードをもっとシンプルで見やすくできるパターンがあるのに、あまり使われていないものがあります。皆さんもFunction.prototype.bindはご存じでしょう。頻繁に使われていたvar that = thisやvar self = thisの代わりになる関数です。よくあるのが以下のような例です。 this.setup = function () { this.on('event', this.handleEvent.bind(this)); }; 第1引数が
Function Declarations vs. Function Expressions
Lets start with a short quiz. What is alerted in each case?: Question 1: function foo(){ function bar() { return 3; } return bar(); function bar() { return 8; } } alert(foo()); Question 2: function foo(){ var bar = function() { return 3; }; return bar(); var bar = function() { return 8; }; } alert(foo()); Question 3: alert(foo()); function foo(){ var bar = function() { return 3; }; return bar(); v
JavaScriptのreplaceの引数としてfunctionを使用する - hogehoge foobar Blog Style Beta
JavaScriptのreplaceの第2引数には関数(function)を使用することが出来ます。 その簡単な使い方と簡単な説明です。 ※ずっと前にも一度書いたことがあったのですが、読み返したときに意味不明状態になるような内容だったので、情報を整理して改めて書いています。 以前のエントリ:JavaScriptのreplaceの関数オブジェクトを渡せることを知った 一般的なreplaceの使い方 一般的なreplaceの使い方は、 第1引数 : 置換え前の文字列(正規表現も可) 第2引数 : 置換え後の文字列(正規表現のグループは、$1,$2,…で指定) になります。 一般的なreplaceのサンプルコード var str = 'hoji1hoji2hoji3'; var str2 = str.replace(/(ho)ji([0-9])/g, '$1ge$2'); alert(str2)
JavaScript：undefined値の判定
JavaScriptでは初期化されていない変数には全て「undefined」という値が入っています。 var a; alert(a); //undefinedが入っている これを利用して、変数が定義済みかどうかを判別することが可能です。…が、やり方がいろいろあるみたいなので、まとめてみることにします。 undefinedと比較する if (a === undefined) { alert("aは未定義"); } グローバル変数として、そのまんまundefinedという名前の変数が用意されているので、それと比較するやり方。一番素直な方法ですが、JavaScriptにおいては良くない書き方とされています。 undefinedは予約語ではなく、単なる変数です。だから上書きすることができるし、関数スコープ内で同名のローカル変数を作ることもできます。（ただし最近の処理系ではconst扱いになって上書
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
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="twitter-share-button" data-via="yujiro" data-lang="ja" data-size="large">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
applyとcallの使い方を丁寧に説明してみる - あと味
JavaScriptに、applyとcallというメソッドが用意されていますが、自分なりにapplyとcallの丁寧に説明をしてみようと思ってこのエントリーを書くなどをしてみます。 applyとcallは非常に似たメソッドなので、まずはcallから説明します。 callメソッドとは？ callメソッドは以下のように呼び出します。 methodA.call(thisArg, [, arg1 [, arg2, ...]]); methodAには任意の関数（メソッド）を指定します。 callの引数は第一引数にmethodAのthisとしたいオブジェクトを指定して、第二引数以降はmethodAに渡したい引数があれば、カンマ区切りでそれぞれ指定します。 callメソッドは、すべての関数が共通して持っているメソッドです。すべての関数はFunctionクラスのオブジェクトで、callはFunction.
ActyWay.com is for sale | HugeDomains
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
jQuery - $(function(){}); の落とし穴 - 旧・私と私の猫の他は誰でも隠し事を持っている
先日、いつものように Web ページで jQuery プログラムを書いててちょっとハマったのでメモ的に失敗談を開陳(恥)。 $(function(){}) は画像のロードを待たない? きっかけは U/I 系の jQuery プラグイン jScrollPane が期待どおりに動作しないという現象でした。このプラグイン、固定サイズのブロック要素が overflow した際のスクロールバーをミニマルなデザインに差し替えてくれる優れものです。現象とは、そのブロック要素に画像が含まれている場合にスクロールバーが表示されない、というもの。しかも Chrome や Safari の WebKib 系ブラウザに限って。 調べて判ったことを纏めると以下のようになります。 普段深く考えもせずおまじない的に書いてた $(function(){}) は、$(document).ready(function(){}
Double-talk Publisher 再帰的アルゴリズムって何？
JavaScriptの解説書などには「関数は自分自身を呼び出せる」ということが書かれています。 「自分自身を呼び出してどうするの？ 何か意味があるの？」 そう思った人は多いでしょう。関数が自分自身を呼び出すときとはどういうときなのでしょう。 それは「一連の処理を繰り返し行うとき」です。しかし、またこう思うでしょう、 「え、for文を使えばいいんじゃないの？」 その通りです。単に同じ処理を繰り返すだけならfor文を使えば済むはずです。しかし、for文には「繰り返す回数」が必要です。回数（の最大数）が分からなければ使うことができません。例えば「目的のファイルが指定されたフォルダの中にあるか調べる」というのがそうです。 まずは単純に指定したフォルダから目的のファイルを探すルーチンを考えてみましょう。 //任意のファイルを指定されたフォルダから探す（1階層のみ） function findFile
IT戦記 - JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念
おそらく、JavaScript を使いこなす肝は setInterval、setTimeout、イベントによる関数の実行を理解することだと思う 例えば 次のコードの結果を考えたとき document.write("hoge\n"); setTimeout(function(){ document.write("fuga\n") }, 1000); document.write("piyo\n");普通に JavaScript を使いこなしてる人なら、hoge → piyo と表示して、 1 秒後に fuga が表示されるな。って思うはずなんです。 でも、 JavaScript を始めたばっかりの人の中には、 hoge と表示したあと 1 秒後に fuga → piyo と表示するな。って思ってる人が非常に多い。(経験的に) 何故か？ たぶん、どのサイトの setTimeout の説明を見て
jQueryの.bind(), .live(), .delegate()の違い
The Difference Between jQuery’s .bind(), .live(), and .delegate() - Alfa Jango Blog http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/ jQueryの.bind(), .live(), .delegate()違いや仕組みの理解、また.delegate()の方が.live()より優れている理由について書かれています。 内容を簡単に書き出すと以下のようなことについて書かれています。 $('a').bind('click', function() { alert("That tickles!") }); .bind()は$(‘a’)に対してイベントを設定してる。 $('a').live('clic
JavaScriptのthisの覚え方 - Qiita
JavaScriptのthisは同じソースコードでも呼び出し元次第で意味が違ったりして複雑だと思われがちだけど、一回覚えてしまえば簡単だ。 JavaScriptにはthisが4種類ある これだけをしっかり覚えておけば、後は必要な時に 4種類って何があるんだっけ？ と考えれば容易に思い出せる。 ちなみに、下記のコードはブラウザ上で実行することを想定している。(なのでwindowを使う) トップレベルのthis グローバルオブジェクトを指す。 var hoge = "fuga"; window.foo = "bar"; // fuga+bar と表示される console.log(this.hoge + "+" + this.foo); (function(){ // 同じくfuga+bar と表示される console.log(this.hoge + "+" + this.foo); })(
jQueryでsetIntervalを使って特定の間隔でfunction処理を繰り返し行う（タイマー処理）方法｜BLACKFLAG
JavaScriptでのfunctionを一定の間隔で繰り返し処理を行う時の指定に使う「setInterval」。 jQueryでこの指定を使うこともでき、単純な記述ですが、さまざまなループ処理などにも使えるので参考までに使い方をメモ書きしておきます。 $(function(){ setInterval(function(){ ～ここに処理を記載～ },1000); }); 最後の数値部分は繰り返し処理を行う間隔になります。 例えば、3秒ごとに画像の位置を10pxずつ、ズラす場合は $(function(){ $('img').css({left:'0',position:'absolute'}); setInterval(function(){ $('img').stop().animate({left:'+=' + '10' + 'px'},1000); },3000); }); この
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ajaxはじめの一歩 XMLHttpRequest [Javascript] All About![Ajaxはじめの一歩 XMLHttpRequest [Javascript] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)