Javascript, Object.prototypeについて調べたのでメモメモ

今までJavascriptのprototypeについてよくわかっていなかったのでちょっと調べてみたのでメモ。
以前は、newしたときの動作が不明だったが、なんとなくわかった気がする。

//prototypeについての動作
stdObject = function(){}
stdObject.prototype.a = 'apple';
stdObject.b = 'orange';

obj = new stdObject;
console.log(obj.a); // apple ←引き継がれた (prototype.a)
console.log(obj.b); // undefined ← 引き継がれない
console.log(typeof obj.prototype) //undefined ←prototypeは無くなる

console.log(obj.n); //undefined
stdObject.prototype.n = "pine"; //元のオブジェクトを拡張してみる
console.log(obj.n); // pine ← 元オブジェクトのprototypeから参照される!

console.log(obj.hasOwnProperty("n")) // false ←obj自体に持ってない
obj.n = "berry";
console.log(obj.hasOwnProperty("n")) // true ←obj自体に持ってる

delete obj.n // 削除してみる
console.log(obj.n); //pine ← obj の n は消え、prototypeから参照されるようになった

// __proto__について
Firefoxの独自拡張らしく、IEでは参照できない。GoogleChromeには存在していた。
オブジェクトを new すると、オブジェクトのインスタンスを生成する。
この時に、インスタンスには、prototypeを引き継いだ__proto__ が生成される。
stdObject = function(){}
stdObject.prototype.a = "apple";
obj = new stdObject;
console.log(obj.__proto__); //object 
console.log( obj.__proto__.a ); //apple

Javascript(jQuery) で オブジェクトとかタグの存在を確認する

基本的な内容ですが、ちょくちょく忘れるので書いておく。
これをまとめているときに、prototypeと__proto__の挙動がちょっと理解できた気がするw
やっぱり、書いてまとめるって大切ですなーと自己満足

// オブジェクト(jQuery)があるかどうか
if (typeof(jQuery) !== undefined){ /** jQueryオブジェクトは存在してるよ! */ }

//プロパティがあるかどうか
obj = {foo:"muu",bar:"boo"}
if (obj.bar ){ /** true */ }

//if in 文法
if ("bar" in obj){/** true */}

//プロトタイプか判別
if (obj.hasOwnProperty("bar" )){ /** プロトタイプじゃないよ */ }



// 任意の要素(hogeクラス)があるか?
$(".hoge").length;

// チェックボックスがチェックされているかどうか
$("input[type=checkbox]:checked").length;

//ある要素が指定のクラスを持っているか
$("#hoge").hasClass("foo");

//子要素に特定の存在があるか
$("form:has(input)").css("border","1px solid silver");

PHP関数をJavascriptで実現しちゃう「php.js」

PHPの関数をJavascriptで実現しちゃうっていうOpensourceプロジェクト「php.js」

関数一覧
http://phpjs.org/functions/index
かなりの量が作られていますねー。

PHPのコア関数がメインのようですが、
pi()みたいなラッパーからmd5()とかMail()みたいな、え?ってなるようなみっちり計算してますよ系な関数までいろいろと。

実際はPHPとJavascriptの文化が違うのでそのまま使ってPHPのように書くっていうのはやや問題がありそうですが
is**みたいな変数チェックとかnumber_formatみたいな文字列加工な関数など部分的に
PHPならこう書くけどJavascriptだとどう書くんだろう?みたいな参考書的な使いからもできるんではないかと思います。

Google左サイドバーを消すGreaseMonkeyを書いてみた

一昨日、Google左サイドバーを非表示にするCSSを書いてみたのだが消えっぱなしなのでGreasemonkeyで表示・非表示をできるようにしてみた。

↓こんな感じで 検索ツール が出現する


↓スクリプト
googlesrpleftside.user.js

問題点:表示する時に一瞬左サイドバーが見えてしまう・・・


jQueryのプラグイン(高さ揃え)を書いてみるテスト

Javascriptを使うときにprototype.jsを嗜んでいるのですが
今回仕事でjQueryを使う機会がありまして使ってみました。

セレクタの感触がすごくいいです。
プラグイン形式で機能を増やしていけるそうだったので
prototype.jsで書いたエレメントの高さを揃えるっっていう
スクリプトで練習がてらに書いてみた。

(function($) {
 	$.fn.roll = function() {
		elements = this;
		loop = elements.length;
		max=0;
		for (var i=0; i < loop; i++){
			el = elements[i];
			var h = el.offsetHeight;
			max = Math.max(h, max)
		}
		for (var i = 0; i < loop;  i++ ){
			el = elements[i];
			$(el).css('height',max+'px');
		}
	};
})(jQuery);
こんな感じかな?ちょっと冗長な感じもあるけど、、

こんな感じで使うといいと思うよ。
$(".item").roll();