deconcepter.jpThis domain may be for sale!
JavaScript のブロックスコープと名前空間 « Mozilla Developer Street (modest)]
Web 開発や拡張機能開発で JavaScript のコードを書いていると、誰もが一度は次のようなことで悩むかと思います。 ブロックスコープと名前空間 (グローバル変数汚染の回避) 読み書きしやすくデバッグしやすいコードスタイル コールバック関数と this オブジェクトの取り扱い デバッグ方法とデバッグ支援モジュール 非同期処理の書き方 いずれも解決方法は人によって様々で、これが常にベストと言えるものがなさそうですが、私なりにそれぞれ検討したことなどを書いてみようかと思います。もっと良い方法があるとか色々皆さんのご意見やツッコミをいただければ幸いです。 JavaScript では名前空間は言語仕様でサポートされておらず、ライブラリや拡張機能などのコードを書くときにはグローバル変数の使用を最小限に抑える必要があります。先日の Mozilla 勉強会＠東京 3rd でも佐藤さんと守山さんの発
![JavaScript のブロックスコープと名前空間 « Mozilla Developer Street (modest)]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8eebd75773eb0321573d9040b42d88f184780c77/height=288;version=1;width=512/https%3A%2F%2Fdev.mozilla.jp%2Fwp-content%2Fthemes%2Fmodest%2Fimages%2Fpage-image.png)
CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。 | Ginpen.com
もちろん、そうでない方にも親しんで頂きたいと思います。 最近この記事が話題のようです。 CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました この記事中にjQuery 1.6/1.6.1での .attr()仕様変更がらみの話で、うちの「jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。」の記事へリンクされていました。 ただこの記事はちょっと中身が細かくて、ぱぱっと理解するのは難しいんじゃないかなあと思って、この記事を書いています。どこまでご理解頂けるかはわかりませんが、あっちの記事よりは読みやすいはず。 今さら感もないではないですが……。(´ω｀) jQuery 1.6/1.6.1で何があったの？ .attr()にまとめていた処理を .attr()と .prop()に分割した そしたら今まで動いていたも
jQueryで複数セレクタを and 条件と or 条件で指定するときの指定方法の違いをメモする - 雑想空間
はまったのでメモ。 jQuery でセレクタを複数条件で指定したい場合などがある。 例えばこんな場合 <table> <tr> <td class="a" id="1">a-1</td> <td class="a" id="2">a-2</td> <td class="a" id="3">a-3</td> </tr> <tr> <td class="b" id="4">b-4</td> <td class="b" id="5">b-5</td> <td class="b" id="6">b-6</td> </tr> </table>こんなテーブル構造があった場合。 classが"a"、idが"5"のカラムの色を変えたい場合。 $(function() { $(".a,#5").css("backgroundColor", "red"); });これでOK。 これは or 条件ですね。 cl
ヘッダーとフッターを常時表示するjQueryライブラリ·Keep-in-View MOONGIFT
Keep-in-Viewはヘッダーやフッターを常に画面上部（または下部）に表示し続けるjQueryライブラリです。 最近のWebサイトではヘッダーがスクロールしても常に表示され続けるUIが人気です。同様にフッターも表示し続ける、そんなjQueryプラグインがKeep-in-Viewです。 最初の表示です。ヘッダーとフッターに注目です。 一番下までスクロールしました。ヘッダーが残っています。 途中までのスクロールの場合は普通に上に上がっていきます。 表示されない状態までいくと自動的に上に張り付きます。フッターは常に下にあります。 Keep-in-ViewではオフセットやCSSのz-indexがオプションとして指定できます。 Keep-in-ViewはJavaScript/jQuery製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）になります。 MOONGIF
Speed Up Your JavaScript
Google Tech Talk June 4, 2009 ABSTRACT Web Exponents: Speed Up Your JavaScript Presented by Nicholas C. Zakas. As an interpreted language, JavaScript is filled with hidden performance issues that conspire to slow down your code and ruin the user experience. Learn exactly what is fast, what is slow, and what you can do to squeeze that last bit of performance out of your JavaScript cod
最小完全ハッシュ関数の作り方 を JavaScript で - てっく煮ブログ
JavaScriptActionScript/Flex ネタが続いているので、たまには JavaScript ネタを。はてブ経由で知った 最小完全ハッシュ関数の作り方 が面白そうだったのだけど、「最小完全ハッシュ関数」が何か分からないまま読み進めたら、やっぱり話が分からなくなってしまった。分からないまま JavaScript に移植。 /* 順列型の最小完全ハッシュ関数 */ function ChangeNumber(arr) { var work = arr.concat(); var hash = 0; // 階乗値テーブル作成 var FACTOR = [1]; for(var i=0; i { FACTOR.unshift(FACTOR[0] * (i+1)); } for(var i=0; i { hash += work[i] * FACTOR[i]; for (j=i+1;
JavaScriptで正規表現を使わずにグローバルな文字列置換 - てっく煮ブログ
JavaScript文字列置換のお話。通常、replace は１回しか置換してくれない。 >>> "aaaa".replace("a", "A") "Aaaa" 何度も置換させるには、正規表現を使うのが手っ取り早い。 >>> "aaaa".replace(/a/g, "A") "AAAA" 置換前の文字列を文字列で受け取ったときには、正規表現オブジェクトを作ればよい。RegExp コンストラクタの第二引数がフラグ。 function myReplaceGlobal(str, before, after){ var reg = new RegExp(before, "g"); return str.replace(reg, after); } myReplaceGlobal("aaaa", "a", "A"); // AAAA ただ、. が任意の文字にマッチしてしまったりと、弊害もある。 m
12 Helpful jQuery Methods You Should Be Using | Envato Tuts+
Anyone who has done some web development over the last decade and a half has definitely heard about jQuery. This library did excellent work when it came to taking care of browser inconsistencies. You also had to write significantly less code compared to pure JavaScript in order to get something done. The large ecosystem of plugins around jQuery was also very helpful. The regular improvements in we
jQuery Proven Performance Tips And Tricks (Slides)
Thanks to everyone that attended the jQuery London and London Web Standards meetups this month. As requested, here are the slides from my talks including links to all of the jsPerf tests embedded for each section. Summary In case you missed the talk, the main takeaway from it was the importance of performance-testing your JavaScript and jQuery code (and appreciating performance gotchas you can kee
アドインなしで実現可能！ ドラッグ＆ドロップを使いこなそう
HTML5のDrag and Drop APIは、Insider.NETの読者諸氏ならば習得が容易なはずだ。なぜなら、ドラッグ＆ドロップの実装方法が.NET FrameworkのWindowsフォーム・アプリケーションのそれと類似しているからだ。 HTML 5のDrag and Drop APIの実装方法は「ドラッグ操作」と「ドロップ操作」に切り分けて考える必要があるが、この考え方はずばりWindowsフォーム・アプリケーションのそれと同様である。これは、Drag and Drop APIの設計にマイクロソフトが大きな影響を与えている点に由来している。 WHATWG（Web Hypertext Application Technology Working Group）がHTML5の仕様策定を進める際、「先進的な機能を実装しているブラウザの挙動を規格化する」という基本理念があった。マイクロソ
JavaScript 3DレンダリングエンジンのThree.jsを試す
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。 「ちょっとのプログラムで3Dができる。」 この面白さを皆さんに届けたいです。 目次 立方体を表示する 光をあてる テスクチャを貼り付ける マウスで回転させる マウスで移動させる クリック判定する Three.js web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーシ
Algorithm - Suffix Array を JavaScript で再発明してみた : 404 Blog Not Found
2012年01月16日16:30 カテゴリアルゴリズム百選Lightweight Languages Algorithm - Suffix Array を JavaScript で再発明してみた WEB+DB 総集編 [Vol. 1〜60] もう10年以上前に某社のCTOだったころ、Suffix array(接尾辞配列)の解説を毎週の技術者ミーティングでしたら一名を除いて「ハァ?」状態だったことを思い出しつつ。 Suffix Arrayは何が画期的だったのか? 以下は、計算機科学者でなくても直感的に理解できると思います。 ソートされていない通常のデータの中にあるサブデータ(キー)を検索しようとすると、データの大きさに比例した時間(O(n))がかかる。 ソート済みのデータであれば、二分探索でデータの大きさの対数時間(O(logn))でキーを検索できる。 さらにキーからIDを定数時間で作成でき
tips - 動的配列と空要素と要素の列挙 : 404 Blog Not Found
2012年01月15日18:30 カテゴリLightweight LanguagesTips tips - 動的配列と空要素と要素の列挙 動的配列は便利ですが、言語ごとの違いにはちょくちょく悩まされます。 JavaScript: The Definitive Guide (6th Ed.) David Flanagan 連想配列のlengthプロパティ - 馬鹿と天才は紙一重って使えないんですね。 var array = []; array["a"] = "string a"; array["b"] = "string b"; console.log(array.length); 見事に０が返ってきます。意味が分かりません。 perl5 最も直感的な実装。 要素数:最大の添字+1 列挙:要素が空でもなされる use 5.012; my @fizzbuzz; for my $i (1..30
javascript - Function.prototype.bindを無理矢理捕縛してみた : 404 Blog Not Found
2011年12月18日15:30 カテゴリLightweight Languages javascript - Function.prototype.bindを無理矢理捕縛してみた +1。 Function.prototype.bindは何がいいのか - 枕を欹てて聴く というわけでFunction.prototype.bindは単なる簡単な追加機能とか補足みたいなのじゃなくて, 凄まじい新機能(call, applyに匹敵)で, かつ非常に奥が深いのでした. なのにSafariとiOSとAndroidでサポートしてないなんて。あんまりだよ、こんなのってないよ。 Prototype.jsにあった、ような… Prototype.jsのころはこんな感じでした。 var oBind = Function.prototype.bind; /* preserve the original */ Fu
javascript - 比較(comparison)と変換(coercion) : 404 Blog Not Found
2012年01月06日23:15 カテゴリLightweight Languages javascript - 比較(comparison)と変換(coercion) JavaScript: The Good Parts Douglas Crockford / 水野貴明訳 [原著:JavaScript: The Good Parts] 大事なことなので何度でも言うべきでしょうか。 [javascript]true or false 論理値の挙動については、いまいち感覚的に理解しにくい印象です Crockfordの言う通り、===と!==を使いましょう。 Demo ==と!=がいかに挙動不審かを、実際に表にします。textareaには表に入れたい値を入力してみてください。void(0)と1/0とparseInt('nan')は、確実にundefinedとInfinityとNaNを得るための方
ある値を非同期で取ってくる→その値を使ってさらに非同期処理というのをJSDeferredでする - Islands in the byte stream (legacy)
ユースケースとしては、テストの最初にあるシステムにログインしてユーザIDなりセッションIDなりを得て、それでもって残りのテストを実行するみたいな処理です。 これ、素直にJSDeferredでDeferred.next(...).next(...)と続けても、このnextのコールバックは最初にいきなり呼ばれたあと「待ち」に入るので、非同期で取ってきた値に依存した処理は書けないんですよね。 これは、Deferredオブジェクトを自分で作って制御すればいけるみたいです。 以下サンプルコードです。最初の100msかかる非同期処理で42という値を得て、それを次の処理に渡せることを確認します： #!/usr/bin/env node "use strict"; var Deferred = require('./jsdeferred.js').Deferred; Deferred. next(func
最近のJavaScriptモジュールの書き方 - yo_waka's blog
サーバサイド（特にNode.js）とクライアントサイド両方で動かしたいものは最近はこんな感じで書いている。 CommonJSのwiki見ててそこに紹介されてるソースコードで（どれだったか忘れたけど。。）やってたのを見ていいなーと思って真似っこした。 (function(define) { define([], function() { 'use strict'; /** * @constructor */ var SomeClass = function() { // initialize }; /** * @type {string} * @private */ SomeClass.prototype.hoge_ = 'hoge'; /** * @return {string} */ SomeClass.prototype.getHoge = function() { return th
jQuery初心者向けの基礎をしっかり学べるサイト
【ｊQueryって何からjQueryの基本まで】... / 【jQueryの使い方から動作デモまで】jQue... / 【jQueryでのアニメーションからイージングま...他...全6件
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
時を超えた JavaScript の道
