JSHint, a JavaScript Code Quality Tool
Report Cyclomatic complexity Unused variables Undefined variables Warn About == null About debugging code About unsafe for..in About arguments.caller and .callee About assignments if/for/... About functions inside loops About eval About unsafe line breaks About potential typos in logical operators When code is not in strict mode When new is used for side-effects Assume Browser NodeJS jQuery Develo
CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか
あちこちのウェブサイトのHTMLソースを見ると、CSSファイルやJSファイルを読み込むlink要素やscript要素のファイル名の末尾に「?xxx=123」のような、いわゆるクエリーがついているのを頻繁にみかけます。 例えばWordPressでjqueryを読み込んだときなど、 <script src="http://user-domian/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script> と、jQueryのバージョン番号を示すクエリー文字列がついています。CSSファイルやJavaScriptファイルはCGIではないので、このクエリーを解釈して使っている訳ではありません。 知っている人は「な～んだ」って感じだと思いますが、この「?ver=1.6.1」の役割について紹介します。 １．キャッシュを制御する ページ読み込みと同時に読み込まれ
JavaScriptやCSSの更新時にキャッシュから読ませない
おそらく架空のストーリ プログラマ「プログラムを更新しました」 テスター「いきなりエラーがでますよ！動作確認したんですか！」 プログラマ「え、私のところでは動くけど…、キャッシュクリアしました？」 テスター「キャッシュをクリアしたらエラーがでなくなりました」 テスター「でも、ユーザ全員にキャッシュをクリアさせるの？」 今日、JavaScriptやCSSの更新時にキャッシュから読ませない方法を知りました。 先人達は偉大すぎます。 <link href="common.css" rel="stylesheet" type="text/css"> この記述だとサーバ側の「common.css」を更新しても、 クライアント側のキャッシュの「common.css」が使用されて、 サーバ側の変更が反映されない可能性があります。 これをcssやjsにクエリー文字列を付加することで、 「common.cs
jQuery を高速に使う CSS セレクタの書き方
jQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。 ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。 何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある ※ この記事は jQuery 1.2.6 のソースコードを元に記述しています 1. 何度も同じセレクタを実行しない 改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){alert
JavaScript MVCフレームワークはすでに十種類以上、その比較や最新情報などのまとめ
グーグルが開発したJavaScript MVCフレームワーク「AngularJS」を紹介した1つ前の記事の反応が予想以上に大きく、1日たたずにブックマークが500以上もつきました。 本記事では、AngularJS以外にもすでにたくさん存在するJavaScript MVCフレームワークに関する情報をまとめて紹介したいと思います。 JavaScript MVCフレームワークの比較記事 既存のJavaScript MVCフレームワークを比較した記事が「The Top 10 Javascript MVC Frameworks Reviewed」です。Top10と書いてありますが、12種類のフレームワークの比較です。これは公開当時は10種類だったものが、その後11種類になり、今回のAngularJSの公開で12種類になったためです。 上記のような比較表を載せた上で、12種類すべての利点と欠点を説明し
constructorとprototype.constructorがわからなくなった - 宇宙野武士は元気にしているか
constructor（プロパティ）とprototype.constructor（プロパティ）は 別物だと思っていたけど、やっぱり同じ物だとおもいつつもやっぱり違うのか？と よくわからなくなってきた。（特に継承とかしようとした場合に） ので少し調べてみた。 （ちなみにSpiderMonkeyをつかって試している） constructorプロパティとは サイ本によると、 オブジェクトの初期化で使用されたコンストラクタ関数を参照する。 とある。 var a = new Array(); a.constructor == Array;//>trueになる 確かに、Arrayオブジェクトでnewした変数aのconstructorプロパティは Arrayになっているようだ。 じゃあ、Arrayのconstructorプロパティってなんだろ？ これで気になったのは、newしてないArrayオブジェクト
やっと理解できた！JSオブジェクト指向プログラミング再入門 | ゆっくりと…
既に多くの方が JavaScript のオブジェクト指向的側面についての解説を記事にされていますが、読み手側から見ると、例えばプログラミング言語への習熟度やオブジェクト指向自体に対する理解度がマチマチなわけで、私自身、「おお、なるほど！」 っていう、頭の中のスイッチがパチンッ！と入るような境地には達していませんでした。 かつて私も オブジェクト指向なJavaScriptプログラミングのススメ なんていう翻訳記事を書いてはいるのですが、正直なところ prototype.constructor の存在は知りませんでしたし、Function.call や Function.apply をどう使えばよいのかなどをちゃんと理解できてはいませんでした。 そんな中、2011年12月に書かれた Doc Center | Mozilla Developer Network の記事 オブジェクト指向 Java
第2回 JavaScriptの関数をマスターしよう
関数内部で利用できる特殊なオブジェクト － argumentsオブジェクト － JavaScriptの関数を利用する場合に、もう1つ忘れてはならないトピックとして、argumentsオブジェクトがある。argumentsオブジェクトは、関数の内部でのみ利用可能なオブジェクトで、関数に渡された引数値を管理することができる。 ■JavaScriptは引数をチェックしない argumentsオブジェクトは、具体的にどのような局面で利用すればよいのか ―― それを解説する前に、まずは以下のコードをご覧いただきたい。 function display(msg) { window.alert(msg); } display(); // undefined ［A］ display('山田'); // 「山田」と表示 ［B］ display('山田', '掛谷');
jQuery親要素、子要素、兄弟要素取得のまとめ
※各メソッドにかいてある[条件]ってのは、タグ名やid、クラス名を指定するってことです。 条件を入れると、条件にあったものだけが取得されるようになります。 例：$(elem).parent("div.class-name, #id"); 通常のJavaScriptでの要素取得方法は→[JavaScript] 親要素・子要素・兄弟要素の取得方法 ■親要素の取得 □parent([条件]) 親要素の取得。 すぐ上の親要素のみ。さらに上の先祖要素にはさかのぼらない。 $(elem).parent("div"); 親要素がdivだったら親要素が取得できる。divじゃなければ空。 □parents([条件]) parent()と違い親より上の先祖要素までさかのぼる。 $(elem).parents(".class-name"); class-nameというクラス名がついた先祖要素のみ取得 □clos
JavaScriptでのthisとapplyの関係とは - 旧燈明日記
JavaScriptのthisは、自分自身のオブジェクトを参照するキーワードです。 JavaScriptのオブジェクトは、誤解を恐れず言ってしまうとすべて関数です。 （グローバルオブジェクト（大きな関数）や配列（メソッドの無い関数）もある意味関数ととらえられる） 一方、applyですが、一般的には、「当てる」とか「適応する」という意味です。 また、すべての関数は、仕様的にthisとapplyを持っています。 で、apply関数は、他関数が保持しているapply関数にthisを第一引数にしてコールし、他関数をあたかも自オブジェクトに当ててしまうものなのです。 つまり、JavaScriptでのthisとapplyの関係とは、他関数オブジェクトが保持しているapplyメソッドの引数にthisをセットしてコールすると、自関数オブジェクトになってしまう関係かな。 言葉だと、わかり辛いのでサンプルを見
読んで覚える、触って体験！JavaScript＆CSS3～gihyo.jp×jsdo.it presents 記事一覧 | gihyo.jp
読んで覚える、触って体験！JavaScript＆CSS3～gihyo.jp×jsdo.it presents 記事一覧
jQuery初心者（凡人）が1か月でjQueryを書けるようになった4つのポイント : 読書メモ・感想とWebマーケティング雑感
2011年12月02日06:30 jQuery初心者（凡人）が1か月でjQueryを書けるようになった4つのポイント カテゴリWEB書評・読書メモ mixiチェック シェア Tweet 独学でjQueryをはじめて、1か月そこそこで ベーシックなアニメーションを実装できるようになりました。 私なりにポイントだと思ったことを整理したいと思います。 ポイント1 jQuery初心者用の本を買う 数か月前からjQueryを学びたい、学びたいと思い、はてぶのホッテントリに入る jQueryの記事を、ブックマークしては都度読んでいました。 しかし、一向に進歩が見られません。 いい加減、本でも買ってみるかと思った最中 ひょんなことで出会ったこの本により、jQuery学習のスピードが一気に上がりました。 Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)西畑 一馬アスキ
30分、JavaScriptで作るWebサービスのモックアップ - ゆーすけべー日記
Instagramは日本のユーザーも多く、日常を切り取った写真がほとんどで、 またお洒落なものも混じっているのでたまに眺めると気持ちがホッコリしたりします。 特定のキーワードでInstagramの最新の写真を検索したい時があります。 例えば、みんなが今どんな「ご飯」を食べているのか、今日の「日の出」はどのような具合なのか、 がInstagramの写真を通して分かるかもしれません。 Instagramの写真検索サービスを探してみると、 Instagram自身が検索機能を提供してないので他の第三者が作ったサービスがいくつか出てきます。 使ってみたところ、もう少し自分で見た目やら機能を変えてみたいなーなんて思いました。 そこで、「Instagramの今の写真を検索できるサービス」といういわばWebサービスを作りたい欲求にかられます。 今回はこのようなちょっとした欲求から考えた「Webサービスのモ
JavaScript/jQueryの勉強 ～初級編～ – T2
読了: 約 3 分 JavaScriptを勉強する中で勉強になったorこれから勉強するためにブックマーク的に 記事を書いておきます。 最近は更にHTML5とCSS3が普及してきて、スマートフォンのサイト制作の業務が増えていますね。 JavaScriptと組み合わせることでリッチなコンテンツを創る事が出来るので、 ここまできたのかーとワクワクします。 そんな事を考えていますが、まだJavaScript初心者。 最初に覚えておくべき記事をまとめておきます。 JavaScript編 オブジェクト指向やprototypeなど勉強している方にお勧めの記事です。 プロトタイプ（prototype）によるJavaScriptのオブジェクト指向 Javascript初心者からみたprototype Javascript/prototypeプロパティ 第1回 Prototypeライブラリ jQuery編 j
FAQ形式によるJavaScriptの本質がわかる超入門 - 風と宇宙とプログラム
はじめに JavaScriptは簡単な言語のようでいて、実は奥が深く、初心者にとってなかなかその本質がわかりにくい言語です。ここでは、JavaScriptの言語的エッセンスを理解できるようなものをFAQ形式で書いてみました。ご意見や誤り等を指摘してもらえたら嬉しいです。 なお、JavaScriptの標準化であるECMAScriptは、今年末にEdition 5 がリリースされる予定です。このFAQは、現在のバージョンであるEdition 3をベースにしています。 ECMAScriptって何ですか？ ECMAはEuropean Computer Manufacturer Association(欧州電子計算機工業会)の略で、標準化団体です。NetscapeのJavaScriptとMicrosoftのJScriptをベースに、純粋なプログラム言語部分を抽出したものをECMAで標準化したスクリプ
new を不当に貶める陰謀と JavaScript におけるクラスの継承構造の話 - vivid memo
私は陰謀論者じゃないですし JavaScript の new 演算子が大好きなわけでも大嫌いなわけでもないです。 念のため。 本記事は Hiraku さんが書かれた下記記事への言及です。 newを封印して、JavaScriptでオブジェクト指向する(1) newを封印して、JavaScriptでオブジェクト指向する(2) newを封印するべき4つの理由 new 演算子は使うな!? 「newを封印するべき4つの理由」 でも new がいかに糞であるかが書かれていますし、その記事からも言及があるように Crockford さんが書かれた書籍 『JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス』 でも new 演算子は Bad Parts に分類されています。 new 演算子が忌避される理由はいろいろあるみたいですが、Hiraku さんの記事では n
[js] スマートフォンのアドレスバーを、コンテンツの高さが足りないときでも非表示にする - phantom4
——————————– 2013/4/24 追記 改良版を作成しました。 ——————————– アドレスバーの非表示を、要素の高さが足りないときでもできるように試してみました。 xperia arcとiPhoneで確認。 (function () { /** * スマートフォンのアドレスバーを非表示にする * * @author ngi@phantom4.org */ function hideAddressBar () { document.body.style.height = "3000px"; //ダミーの高さを設定 document.body.style.minHeight = ""; setTimeout(function () { window.scrollTo(0, 1); //アドレスバーを隠す setTimeout(function () { //bodyの最低サイズ
JavaScriptのオブジェクト指向は、逆の順番で学んだほうが理解しやすいと思うので…
事の発端というか、きっかけは、id:perlcodesampleさんとid:gfxさんの下のポストを見て、 JavaScriptで一番簡単にオブジェクト指向プログラミングを行う方法 (id:perlcodesampleさん) JavaScriptにおけるオブジェクトの定義 (id:gfxさん) newとかprototypeを使うのが推奨されてないとか、直接代入するほうが楽とかじゃなくて、挙動が違うんだよなぁ、と思ったこと。 挙動が違うんだから、もちろん使いどころも違うんですよね。 でも実際、JavaScriptのオブジェクト指向は混乱しやすいと思います。 自分もご多分にもれず、さんざん混乱させられたクチですしね。 わかってしまえば、どってことなくて、とってもシンプルなんですけどね。 せっかくなので、今だからこそ言える、自分だったらこうやって教えて欲しかったなぁ、っていう説明をしてみようかと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptの継承について
