Learn web development | web.devWeb Platform Dive into the web platform, at your pace.
JavaScriptのIIFEとモジュールパターン | fenomas.com
他の多くのフラッシャーと同じく、最近色々HTML5開発を触ってみている。（現時点ではEdge Animateで色々を。）で、JSはAS3とかなり似ているため、それほど慣れにくくはない。（ほとんどのJSはAS3としてでもコンパイルできるし。JSを横目で見たら、変数の型を宣言しない人が書いたAS3と見間違えられる。） ただしJSとAS3は似ている言語にしても、使われる方言が違う。例えばこれ： 最初は「はあ？」と思った。でもJSにはよ〜くあるのだ。このパターンは英語圏で「IIFE」（イッフィー）とよばれる：「Immediately-invoked function expression」。つまり即時に実行される関数エクスプレッション。まあ、コードを見ればそういうもんですね。（@spacelogueさんによると日本語では即時関数というんだって） まあそれはそれで良いんだが、何のために使うのだろう？
［Underscore.js］テンプレートとオブジェクトから文字列を生成する
Underscore.jsは多くの機能を持つユーティリティライブラリです。テンプレートAPIはテンプレートとオブジェクトのバインドを行い、その結果を出力します。 テンプレートを使うことで、煩雑になりがちな動的なHTML表示を、すっきりとさせることができます。 名称： Underscore.js 分類： フレームワーク URL： http://underscorejs.org/ 関連ファイル： underscore-1.4.3.js Underscore.jsによるテンプレートバインド UnderscoreのテンプレートAPIを使うと、テンプレートとオブジェクトのバインディングができます。動作イメージを図101-01に示します。
JavaScript と関数とクロージャ - ひだまりソケットは壊れない
JavaScript でどれがクロージャなのか、という話が興味深かったです! 問題：どれが「クロージャ」でしょうか？ - hogehoge @teramako 回答：どれが「クロージャ」でしょうか？ - hogehoge @teramako ほむほむ。 クロージャなのかどうか考える以前に、どういう挙動を示すのかを考えるのが難しいですよね＞＜ eval の挙動の違いなんかは狂気を感じざるを得ません! そうそう、"use strict" の有無 (strict コードかどうか) でも eval コードの変数環境の初期化処理が変化します。 難しいですね!! var e1 = (function () { var msg = "関数の中です"; return eval("var msg; (function() { return msg; })"); }).call(this); console.
回答：どれが「クロージャ」でしょうか？ - hogehoge @teramako
問題：どれが「クロージャ」でしょうか？ - hogehoge の回答 期待させて申し訳ないですが、はっきりとした解等を定めていません。ということで解答ではなく、回答で。 クロージャの定義を以下の様に定めました。 引数以外の変数を実行時の環境ではなく、自身が定義された環境（静的スコープ）において解決することを特徴とする。 クロージャ - Wikipedia JavaScriptの関数オブジェクトは定義時にスコープを定めてチェーンを形成します。このチェーンが変化することはありません。上記定義の言葉通りに考えるならば、答えは6, 7, 9以外の全てになると思います。 ただし、よくある説明では、関数の中で定義される関数オブジェクトのみを「クロージャ」と呼んでいる様に思えます。 var scope = "global"; function func1 () { return scope; } fun
イベントハンドラの this と event.target, +α - hogehoge @teramako
[JavaScript]for 内でイベントリスナとか登録するときにやっちゃいがちな間違い. とその対処法を３つほど. | TM Life 対応その２: event.targetを使う と 対応その４ : this を使う について 上記サイトで書いてあることが間違っているというわけじゃないんだけど、少し補足したい。 event.target その Event オブジェクトには発火元となった要素を target プロパティとして保持しています. 合っています。 が、on* や addEventListener した要素と target は必ずしも一致しない点には注意した方が良いと思います。 <ul id="list"> <li>foo <b>hoge</b></li> <li>bar <b>hoge</b></li> </ul> var list = document.getElement
最近のDOMの取得について整理してみた
自分は普段からJavascriptを書く機会が多いのですが、Webサイト構築ではDOMを扱うことがほとんどです。 最近はjQueryなどのライブラリを利用する方が多いのではないでしょうか。 今回はDOMを取得する際のパフォーマンスに着眼して、今一度整理してみたいと思います。 とりあえずテストしてみた JSPerfで要素を取得するメソッドをそれぞれ追加しました。 basic DOM selector test | JSPerf そして、自分の所持している PC , SP の各ブラウザからRUNボタンをポチポチ押します。 テスト項目 テスト項目は以下の通りです。 ピュアなJSでの取得とjQueryでの取得を選択しています。 getElementById getElementsByTagName getElementsByClassName querySelector querySelector
jquery.tmpl.jsのテンプレートを外部化して動的に読み込みつつレンダリングするには？
クライアントサイドのテンプレートエンジンは色々あるけれど、JSPに慣れた人間からするとjquery.tmpl.jsが一番わかりやすかった。 BorisMoore/jquery-tmpl · GitHub ただ、このライブラリは開発が停止している。このライブラリをフォークして開発が続けられているのがこちららしい。 KanbanSolutions/jquery-tmpl · GitHub こちらのサンプルを参考にすると本当に簡単にできた。 jQuery公式のテンプレートplugin 「jQuery Templates」-JavaScript Library Archive もはや、サーバーサイドのCPUを使ってHTMLをレンダリングする時代じゃないんだなというのを実感。 ただ、サンプル通りにやるとHTMLのコードが読みづらくなったりエディターでフォーマットしづらくなる。 その辺をどうにかしたい
竹内関数をメモ化とか遅延で高速化してみた - Qiita
最近、自作の プログラミング言語 を作っていて、ベンチマークを取るためにいくつかの言語で 竹内関数 を書いてみました。 そこで調べている中で、結果をメモ化したり遅延評価したりすることで高速化させることができると知ったのでJavaScriptで書いてみた次第です。 まずは下ごしらえ 環境は以下の通りです。 Intel Core i3 1.8GHz node.js v0.10.5 64bit で、次の様なユーティリティーを書いてみました。 /** * ベンチマーク用関数 * @param {Number} n 実行する回数 * @param {Function} fun 測定する関数 * @return {Object} averageに平均が、resultsに各結果が入ったオブジェクト **/ function bench(n, fun) { var i, start, finish, av
JavaScriptのプログラミングスタイルはどうあるべきか？ 重鎮Douglas Crockford氏が脳の働きとの関係を語る（後編）。QCon Tokyo 2013
JavaScriptのプログラミングスタイルはどうあるべきか？ 重鎮Douglas Crockford氏が脳の働きとの関係を語る（後編）。QCon Tokyo 2013 4月23日に都内で開催されたエンジニア向けのイベント「QCon Tokyo 2013」。基調講演に登壇したのは、JavaScriptの重鎮であるDouglas Crockford氏。「プログラミング・スタイルと私たちの脳」という大胆なタイトルで、JavaScriptプログラミングにおいてバグをどう減らしていくのかについて解説しています。 （この記事は「JavaScriptのプログラミングスタイルはどうあるべきか？ 重鎮Douglas Crockford氏が脳の働きとの関係を語る（前編）。QCon Tokyo 2013」の続きです） プログラムが明確に読めなければバグが入り込む JavaScriptの良い部品（Good Pa
JavaScriptのプログラミングスタイルはどうあるべきか？ 重鎮Douglas Crockford氏が脳の働きとの関係を語る（前編）。QCon Tokyo 2013
JavaScriptのプログラミングスタイルはどうあるべきか？ 重鎮Douglas Crockford氏が脳の働きとの関係を語る（前編）。QCon Tokyo 2013 4月23日に都内で開催されたエンジニア向けのイベント「QCon Tokyo 2013」。基調講演に登壇したのは、JavaScriptの重鎮であるDouglas Crockford氏。「プログラミング・スタイルと私たちの脳」という大胆なタイトルで、JavaScriptプログラミングにおいてバグをどう減らしていくのかについて解説しています。 基調講演の内容をダイジェストで紹介しましょう。 プログラミング・スタイルと私たちの脳 PayPalのDouglas Crockford氏。 プログラミングスタイルはプログラムの一部ですが、コンパイラからは無視されます。だからある人はプログラミングスタイルが重要ではないと考えていますが、しか
IE で メモリ を 強制的 に 解放 - galife
メモリーリークに近い話とは思いますが、ちょっと毛色の違う内容です。 「JavaScript がメモリーを馬鹿食いしてどうしようもない…」 「なぜかメモリーが確保されっぱなしなんだけど…？」 といった状況の解消法。 JavaScript にはガーベッジコレクタがあるから大丈夫… と、思われがちですが、ガーベッジコレクタは『本当にメモリ解放が必要になるまで何もしない』というものです。 （状況が悪いとガーベッジコレクタは何もしてくれなくて、ブラウザが固まってしまいます。。） 「コストはかかるが、信用できないならプログラマが勝手にやってしまえ！！」という感じです。 削除候補のメモリを強制解放 ── CollectGarbage() 関数 ── 解放したいタイミングで window.CollectGarbage() を走らせることで、強制的にメモリを解放できます。 // IE 以外のブラウザ対策のた
javascriptとは？知っておきたい基礎知識 - プログラミング学習の窓口
JavaScriptは、htmlとcssで構成したページの動きを操作出来ます。分かりやすい例としては、ボタンやメニューの動き。こういったものもJavaScriptを活用することで実現が出来ます。 Javascriptは非常に人気の高い言語で、JAVAとにていますが別ものです。 ReactのようなJavascriptを応用した技術も普及が進んでおり、今後当分は主流な言語として活用されるでしょう。 The post javascriptとは？知っておきたい基礎知識 first appeared on プログラミング学習の窓口.
知らないと怖い「変数の巻き上げ」とは？｜もっこりJavaScript｜ANALOGIC（アナロジック）
概要 とりあえず問題 なぜこうなるのか？ まとめと予防策 JavaScriptには、他の言語ではあまり聞かない（あるいは存在しない）「変数の巻き上げ(hoisting)」という概念があります。これは（たぶん）JavaScript特有のもので、かつ重要なポイントです。 この「変数の巻き上げ」が原因でコードが思った通りの動作をしなかった場合、この概念を知らないと、いくらコードを見直しても問題を発見することができません。ドツボにはまります。 そういう意味でも、この「変数の巻き上げ」の概念をおさえておくことは重要です。 とりあえず問題 変数の巻き上げを説明するには、文章で説明するよりもコードを見てもらった方が理解できると思います。 まずは次のコードを見てください。 var myname = "global"; function func() { console.log(myname); //出力内
「単独varパターン」のススメ｜もっこりJavaScript｜ANALOGIC（アナロジック）
概要 「単独varパターン」とは？ 単独varパターンのメリット ループ用変数はどうする？ 余談：コメントの位置について JavaScriptは他のプログラミング言語に比べ特に柔軟性のある言語だと思います。そのため、コーディングスタイルも人それぞれです。 これは、目的を遂げるための手段が非常に多く用意されているとも言えますが、JavaScript初級者にとってはこの柔軟性がかえってネックになったりもします。つまり、「どのようなコーディングがベストなのか？」ということが、とても分かりづらいのです。（私がそうでした）。 JavaScriptのコーディングスタイルに正解、不正解などは無いかもしれませんが、推奨されているコーディングスタイル（コーディングパターン）はあります。JavaScriptのような柔軟性に富んだ言語を覚える場合、このコーディングパターンを身に着けていくことが上級者への近道だと
Taso.compute(more);: javascriptは代入モデルではなく束縛モデルである
世界一誤解された言語javascriptとecmascriptの話。 ──この誤解に関して、私は真に驚くべき証明を見つけたが、このブログはそれを書くには狭すぎる。 JavaFXはじめました。 javascriptの変数は代入モデルではなくて束縛モデルです。ただし、破壊的代入もシャドウイングも出来ます。const宣言はそれら２つを無効にします。 まずは束縛モデルを知らない人向けに説明していきます。新たなオブジェクトを利用するにはそれに名前をつけて識別できるようにすることが必要です。これを束縛といいます。「変数にオブジェクトを束縛する」と言います。一度束縛された変数は変更できません。 しかし、中には束縛を変更できる束縛モデルも存在します。それが破壊的代入と隠蔽(shadowing)です。隠蔽とカプセル化を混同している人がいるので注意しましょう。それらの違いについてはここでは説明しません。 破壊
JavaScriptの変数宣言は難しすぎる！ - Qiita
…またややこしいタイトルにしてしまった。 予め伝えておきますが、この記事は「JavaScript訳わかんねえんだよ何がvarだスクリプト言語ならもっと気軽に変数を使わせろスコープややこしいわファッキュー」みたいなものではありません。 JS（色んな意味で）を愛する人が書いています。 いやー、にしても、JavaScriptの変数の宣言って難しいですよねー。何がって？ インデントが、ですよ奥さん。 var というキーワードを先頭に置かなきゃならないという厄介な規則のせいで、綺麗なインデントにするのに四苦八苦するわけですよ。var による明示的な変数の宣言によって、JavaScriptのクロージャが真価を発揮するわけですが、それにしても邪魔くさい…。 まあ普通はコーディングスタイルをきちんと決めるべきなんですけど、個人でちゃちゃっと小さいプログラムを組むときにこの変数宣言のインデントで結構悩んだり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery.Deferred をもう少し理解する
JavaScriptの ++i は i += 1 ではない - rikubaのブログ
食べられないほうのカリー化入門 - Qiita
