2012年07月22日

propertyIsEnumerableメソッド

propertyIsEnumerableメソッドはプロパティが加算できるかどうか確認できます。加算できるとfor inの際に列挙されます。

var hoge = {a:1,b:2};
hoge.propertyIsEnumerable("a");//true


var hage = [1,2,3];
hage.propertyIsEnumerable("length");//false



posted by ねこまんま at 20:13 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

protptypeプロパティ

JavaScriptでは関数にコンストラクタ関数を利用してオブジェクトを追加する方法とprototypeプロパティを利用してオブジェクトを追加する方法がある。

var Hoge = function(){
this.foo = "foo";
this.bar = function(){return "bar"}
}
Hoge.prototype.foo2 = "foo2";
Hoge.prototype.bar2 = function(){
return "bar2";
}
var hoge = new Hoge();
console.log(hoge.foo);//foo
console.log(hoge.bar());//bar
console.log(hoge.foo2);//foo2
console.log(hoge.bar2());//bar2


prototypeで追加されたオブジェクトはコンストラクタ関数への参照の為、コンストラクタ関数に変更を加えるとすでに生成されたインスタンスも含めて全てのオブジェクトに反映されます。

var Hoge = function(){}
var hoge = new Hoge();
console.log(hoge.foo2);//undefined
Hoge.prototype.foo2 = "foo2";
console.log(hoge.foo2);//foo2


コンストラクタ関数を利用して追加したオブジェクトとprototypeプロパティを利用して追加したオブジェクトではコンストラクタ関数を利用して追加したオブジェクトのほうが先に参照されます。コンストラクタ関数を利用して追加したオブジェクトがない場合にprototypeプロパティを利用して追加したオブジェクトが参照されます。

var Hoge = function(){
this.foo = "foo";
this.remove = function(){
delete this.foo
}
}
Hoge.prototype.foo = "foo2";
var hoge = new Hoge();
console.log(hoge.foo);//foo
hoge.remove()
console.log(hoge.foo);//foo2


タグ:protptype
posted by ねこまんま at 19:46 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

JavaScriptと正規表現

JavaScriptで正規表現を利用する方法

特定のテキストを含むかどうか確認(testメソッドとexecメソッド)
特定のテキストの開始位置を取得(searchメソッド)
マッチした文字を取得(matchメソッド)
マッチした文字を置き換える(replaceメソッド)

特定のテキストを含むかどうか確認(testメソッドとexecメソッド)

特定のテキストを含むかどうか確認するにはtestメソッドとexecメソッドがあります

testメソッド

testメソッドは特定のテキストを含む場合trueを、含まない場合はfalseを返します。単純なマッチングに利用するのが良いでしょう。

var txt = "hogehoge";
console.log(/hoge/.test(txt));//true
console.log(/hage/.test(txt));//false


execメソッド

execメソッドではマッチした結果を配列で返します。

var txt = "hogehoge";
console.log(/hoge/.exec(txt));//["hoge"]
console.log(/hoge/g.exec(txt));//["hoge"]
console.log(/hage/.exec(txt));//null


testメソッドとexecメソッドはRegExpオブジェクトのメソッドのため正規表現から記述する必要があります。

特定のテキストの開始位置を取得(searchメソッド)

searchメソッドはマッチした文字列の位置を返します。マッチした場合、マッチした場所を返します。

var txt = "hogehoge";
console.log(txt.search(/hoge/));//0
console.log(txt.search(/hoge/g));//0
console.log(txt.search(/hage/));//1


次のような単純なif文では指定したテキストが最初にある場合をチェックしてしまいます。

if(txt.search(/hoge/)){
//do smoething
}


といった具合に-1とマッチさせるようにしましょう。

if(txt.search(/hoge/)===-1){
//do smoething
}


マッチした文字を取得(matchメソッド)

matchメソッドはマッチした文字列を取得できます。

var txt = "hogehoge";
console.log(txt.match(/hoge/));//["hoge"]
console.log(txt.match(/hoge/g));//["hoge","hoge"]
console.log(txt.match(/hage/));//null


g(global)オプションを付けることによりマッチ結果を複数取得することができます。

マッチした文字を置き換える(replaceメソッド)

replaceメソッドは第2引数に置き換え文字列を指定することで文字列の置き換えを行ないます。

var txt = "hogehoge";
console.log(txt.replace(/hoge/,"foo"));//foohoge
console.log(txt.replace(/hoge/g,"foo"));//foofoo
console.log(txt.replace(/hage/,"foo"));//hogehoge


文字列そのものを置き換えるのではなく置き換えた文字列を返すので注意してください。また、置き換え文字列に$&を利用するとマッチした文字列を置き換えの際に利用できます。

var txt = "hogehoge";
console.log(txt.replace(/hoge/,"A$&A"));//AhogeAhoge
console.log(txt.replace(/hoge/g,"A$&A"));//AhogeAAhogeA
console.log(txt.replace(/hage/,"A$&A"));//hogehoge


複数のマッチ文字を利用したい場合は、マッチ時に()でつつみ置き換え文字内で$1〜の文字列を利用します。

var txt = "hogehoge";
console.log(txt.replace(/(h)o(g)e/,"$1$2"));//hghoge
console.log(txt.replace(/(h)o(g)e/g,"$1$2"));//hghg
console.log(txt.replace(/(h)a(g)e/,"$1$2"));//hogehoge


replaceメソッドでは置き換え文字の代わりに関数オブジェクトを足すことができます。

var num = "123456";
num.replace(/[0-9]/g,function(num){
if(num<4){
return num
}else{
return ""
}
})


上記のサンプルでは「123」が帰ってきます。
posted by ねこまんま at 19:20 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年07月17日

Functionオブジェクト

関数オブジェクトはlegthプロパティを持っていてい、これには関数がとれる引数の数が格納されています。

var hoge = function(a,b,c) {}
hoge.length//3


また、callerプロパティに自身を実行した関数への参照が格納されています。(自身への参照はarguments.caller)

var hoge = function() {
console.log(hoge.caller);
}
hoge();//native code
var hoge2 = function(){
hoge();
}
hoge2();//hoge
タグ:function legth
posted by ねこまんま at 02:30 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

instanceof演算子

instanceofでオブジェクトがインスタンスかどうか確認できます。

var Hoge = function(){
}
var hoge = new Hoge();
hoge instanceof Hoge//true
hoge instanceof hoge.constructor//true


タグ:instanceof
posted by ねこまんま at 02:07 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

constructorプロパティ

constructorプロパティはnew演算子でオブジェクトを作成した際に自動的に割り振られるプロパティです。

var Hoge = function(){
alert("hoge")
}
var hoge = new Hoge();
console.log(hoge.constructor);//function(){ alert("hoge")}


これはオブジェクトを作成する際にコンストラクタで利用された関数への参照です。そのためこのconstructorプロパティを利用して新たにオブジェクトを生成することも可能です。

var hoge2 = hoge.constructor();
タグ:Constructor
posted by ねこまんま at 02:01 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年07月13日

関数の引数を取得するarguments

関数やメソッドを実行する際に内部的にargumentsという変数が生成されており、この変数には引数の配列が格納されています。

var hoge = function(){
coneole.log(argument);//aaa,bbb,ccc
}
hoge("aaa","bbb","ccc");


デバッグや可変関数の際に利用できます。

また、arguments.calleeには関数オブジェクト自体が格納されているので再帰的に自信を呼び出すことができる。

var i=0;
var hoge = function(){
if(i<10){
i++;
arguments.callee();
}else{
console.log(i);//10
}
}
hoge();
posted by ねこまんま at 01:34 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年06月19日

applyとcall

JavaScriptでは applyメソッドとcallメソッドが用意されている

var hoge = {
bar : 13,
foo : function(){
alert(this.bar);
}
}
hoge.foo()


上記の様なJavaScriptを実行すると13がアラートされます。

var hoge = {
bar : 13,
foo : function(){
alert(this.bar);
}
}
var fuga = {
bar : 12
}
hoge.foo.call(fuga);
hoge.foo.apply(fuga);


上記のようにcallメソッドやapplyメソッドを介して実行するとthisの取り扱いが変わり12がアラートされるようになります。

var foo = function(a,b){
alert(a);
alert(b);
}
foo.call(this,1,2);
foo.apply(this,[1,2]);


callメソッドやapplyメソッドは関数を実行する際の引数の取り扱いが違います。callメソッドはカンマ区切りでapplyメソッド配列で引数を渡します。

callメソッドの活用例として以下のようなものがあります。

var anchors = document.getElementsByTagName('a');
anchors.shift();


DOMオブジェクトのリストは Arrayオブジェクトのメソッドが利用できません。しかし一度Array.prototype.slice.call()として実行すると返り値は配列になるのでArrayオブジェクトのメソッドが利用できるようになります。

var anchors = document.getElementsByTagName('a');
anchors = Array.prototype.slice.call(anchors);
anchors.shift();


同様にargumentsも配列のような形状ですが、 Arrayメソッドは利用できません。

var hoge = function(){
arguments.shift();
}
hoge(1,2,3);


Array.prototype.slice.call()で配列に変換することで利用が可能になります。

var hoge = function(){
var arg = Array.prototype.slice.call(arguments);
arg.shift();
}
hoge(1,2,3);


参考:applyとcallの使い方を丁寧に説明してみる - あと味
タグ:apply call
posted by ねこまんま at 09:43 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年03月09日

モーダルウィンドウを開く「showModalDialog」

showModalDialogモーダルウィンドウを開く関数。

window.showModalDialog(
url, //移動先
this, //ダイアログに渡すパラメータ(この例では、自分自身のwindowオブジェクト)
"dialogWidth=800px; dialogHeight=480px;"
);


ちなみにモーダルとはダイアログが開いている最中、もと画面の操作ができないウィンドウのこと。
タグ:showModalDialog
posted by ねこまんま at 01:31 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年02月25日

pushStateでURLを変更する

HTML5ではhistory APIにpushStateが追加されています。pushStateは履歴に新たにURLを追加してアドレスバーのURLを書き換えることができます。

$("a").click(function(){
history.pushState(null, "page 2", "bar.html");
return false;
});


などとしているとaがクリックされた際にbar.htmlにURLが切り替わります。代1引数にはデータを設定することができ、設定したデータはpopstateイベントで取り出すことが可能
posted by ねこまんま at 11:03 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2011年12月26日

翌日の日付を取得する関数

翌日の日付を取得する関数。

function nextDate(year,month,date){
var todayTime = new Date(year,month-1,date).getTime();
var nextDateTime = todayTime + 60*60*24*1000;
nextDateTime = new Date(nextDateTime);
return {
year:nextDateTime.getFullYear() ,
month:nextDateTime.getMonth()+1 ,
date:nextDateTime.getDate()
}
}


一度ミリ秒に変換してから1日分を追加して再度日にちに変換する
posted by ねこまんま at 11:25 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2011年12月23日

cssRulesでスタイルシートの内容を取得する

JavaScriptのcssRulesでスタイルシートの内容を取得する方法

var ss = document.styleSheets[0];
var rules = ss.cssRules?ss.cssRules:ss.rules;
for(var i=0;i < rules.length ; i++){
var rule = rules[i];
if(!rule.selectorText)continue;
var ruleText = rule.selectorText + "{" + rule.style.cssText + "}";
console.log(ruleText)
}


styleSheetsオブジェクトには各スタイルC値の内容がオブジェクトとして格納されており、cssRulesによって取得可能(IEはrules)、@importなどの内容もはいっているので、selectorTextがある場合のみcssTextを取得すればOK。

ちなみに、Google ChromeはローカルファイルでのCSS Rulesへのアクセスが許可されていないので注意が必要。
posted by ねこまんま at 18:31 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2010年10月18日

sortの比較関数

sortは引数に比較関数をとることができる。

var arr = [35,13,1,3,5,10,23];
arr.sort();
console.log(arr)// [1, 10, 13, 23, 3, 35, 5]
arr.sort(function (a, b) {
return a-b;
});
console.log(arr)// [1, 3, 5, 10, 13, 23, 35]
arr.sort(function (a, b) {
return b-a;
});
console.log(arr)// [35, 23, 13, 10, 5, 3, 1]


次のように文字コード順だけではなく数字の昇順・降順にもならべかえが可能になる。


比較関数の戻り値がプラスの値だった場合は引数1が引数2よりも大きいことを表し、戻り値が0だった場合は2つの引数が等しく、戻り値がマイナスの値だった場合は引数2が引数1よりも大きいことを表します。
タグ:sort
posted by ねこまんま at 08:16 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2010年09月29日

apply()メソッドとcall()メソッド

apply()メソッドとcall()メソッドは関数に対して自動的にセットされる。関数を実行することが出来る

var foo = function(n1,n2){
bar.apply(null,[n1,n2])
}
var bar = function(n1,n2){
console.log(n1+n2);
}
foo(2,3);//5


var foo = function(n1,n2){
bar.call(null,n1,n2)
}
var bar = function(n1,n2){
console.log(n1+n2);
}
foo(2,3);//5


applyは第2引数に配列として、callは第2引数以降の引数に実行したい引数を取る。

var hoge = {
n1 : 2
}
var foo = function(n2){
bar.apply(hoge,[n2])
}
var bar = function(n2){
console.log(this.n1+n2);
}
foo(3);//5


var hoge = {
n1 : 2
}
var foo = function(n2){
bar.call(hoge,n2)
}
var bar = function(n2){
console.log(this.n1+n2);
}
foo(3);//5


それぞれ第1引数にはオブジェクトが指定でき関数をオブジェクトのメソッドのように取り扱うことが出来る。
タグ:call apply
posted by ねこまんま at 18:08 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

addメソッド

addメソッドを利用するとselect要素にoption要素を追加することが出来る。

<select id="Select1"></select>
<script type="text/javascript">
var opt = document.createElement("option");
opt.text = "Yellow";
var sel = document.getElementById("Select1");
try {
sel.add(opt,null);// DOM標準
}catch(ex) {
sel.add(opt);// IE固有
}
</script>


DOM標準では第2引数を取ることができ、指定したoption要素の直前に新規にoption要素を追加することが出来ます。「null」を指定したときは最後に追加します。
タグ:ADD
posted by ねこまんま at 16:27 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2010年09月28日

document.writeln

document.writeでドキュメントにに文字列を書き出すことができるがdocument.writelnは文字列の後に改行を書き出す。

document.write("hoge");//hoge
document.writeln("hoge");//hoge\n


document.openで明示的に書き出しを宣言して、document.closeで終了を指定しないと書き出されないことがある(らしい)

document.open();
document.writeln("hoge1");
document.writeln("hoge2");
document.close();


via:document.writeln()−JavaScriptリファレンス
タグ:writeln open close
posted by ねこまんま at 18:18 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2010年09月24日

スタイルと重要度を設定するsetProperty

setPropertyはスタイルに重要度を合わせて設定できます。

object.setProperty (propertyName, propertyValue, priority);


このように記述します。

document.getElementById("hoge").style.setProperty ("background-color", "green", nul);


キャメルケースにすると動かないので注意が必要

document.getElementById("hoge").style.setProperty ("background-color", "green", nul);



重要度には「important」が指定できる

document.getElementById("container").style.setProperty ("background-color", "yellow", "important");


setPropertyで設定したスタイルはremovePropertyで取り除くことが出来る。

document.getElementById("container").style.removeProperty ("background-color");


IEは未対応

setProperty method JavaScript
removeProperty method JavaScript
posted by ねこまんま at 11:05 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2010年09月01日

lengthの不思議

JavaScriptのlengthプロパティは色々なところで異なる役割で登場します。

代表的なのは配列数を返すlengthプロパティ。

["a","b","c"].length//3


文字列では文字列の長さを返します。

"abc".length//3


"あいうえお".length


HTMLコレクションでは含まれるDOMノードの数を返しますが、

document.getElementsByTagName("a").length//10


当然DOMノード出端にも返しません。

document.getElementsByTagName("a")[0].length//undefined


ただ、一部のDOMノードは例外で、

form要素は含まれるフォーム部品の数を返します。

document.getElementsByTagName("form")[0].length


select要素では含まれるoption要素の数を返します。

document.getElementsByTagName("select")[0].length




タグ:length
posted by ねこまんま at 00:03 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2010年08月31日

documentの高さを取得する。

次のプロパティでdocumentの高さ(スクロールで隠れている箇所も含む)を取得することが出来ます。

document.documentElement.scrollHeight


windowの高さは次のプロパティ

window.innerHeight || document.documentElement.clientHeight
posted by ねこまんま at 21:23 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2010年04月29日

map

map関数は配列の各要素に、引数として渡された関数を適用した配列を作る。

array = [1,2,3,4]
arr = array.map(function(n){ return n * 10 });
console.log(arr)// [10, 20, 30, 40]

JavaScript 1.6で追加された関数です

参考:map - MDC
タグ:map
posted by ねこまんま at 04:31 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。