2016年12月06日

ES2015(ES6)のIterator

ES2015(ES6)ではIterableなオブジェクトというのが追加されている。

Iterableなオブジェクトはfor-of文で取得する事ができます、わかりやすいのが配列である。

for (let item of [1,2,3]) {
console.log(item);
}


他にもargumentsオブジェクトやnodeListなどいわゆる配列ライクなオブジェクトもIterableなオブジェクトとして定義されているfor-of文で取得する事ができます。

面白いところではStringオブジェクトなどもIterableなオブジェクトとして定義されておりfor-of文で取得する事ができます。

for (let item of 'abcde') {
console.log(item);
}


Iteratorとは?



Iterableなオブジェクトがそんな感じならIteratorとは何かというと、
Iterableなオブジェクトにnext()メソッドを付与して1個づつ取り出しができるようにしたオブジェクトです。
[Symbol.iterator]()を実行することでIteratorオブジェクトを作成できます。

const items = [1, 2, 3];
const iterator = items[Symbol.iterator]();
iterator.next();//Object {value: 1, done: false}
iterator.next();//Object {value: 2, done: false}
iterator.next();//Object {value: 2, done: false}
iterator.next();//{value: undefined, done: true}


取り出した際にvalueプロパティに値がdoneプロパティに出し切ったかのオブジェクトが出力され、出し切ったらdoneがtrueになります。
タグ:iterator ES6 ES2015
posted by ねこまんま at 13:14 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2016年07月12日

ES2016(ES7)のbind syntax

ES2016(ES7)のbind syntaxでは以下のようにbind()を記述できる、

::this.handleIncrement


Babelの場合以下のように変換を行う。

this.handleIncrement.bind(this);


続きを読む
タグ:ES2016 ES7
posted by ねこまんま at 17:38 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

ES2015(ES6)の慣れるまで読みにくい記述

React/ReduxのMiddlewareで見かける以下の記述。

const logger = store => next => action => {
next(action);
}


Arrow Functionの特性を活かした感じの記述でBabelでは以下のように変換を行います。

var logger = function logger(store) {
return function (next) {
return function (action) {
console.log("before");
next(action);
console.log("after");
};
};
};
続きを読む
タグ:ES2015 ES6 BABEL
posted by ねこまんま at 07:21 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2016年06月22日

イベント処理

メンテナブルJavaScriptを呼んでいて、イベント処理のハンドラ分岐が意識できていなかったのでメモ続きを読む
posted by ねこまんま at 14:58 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2015年09月30日

ES6の基本 - Generator

BabelでES6を始めるにあたってES6の基本文法とBabelがどのようにコンパイルするかを理解するためにまとめておきます。

Generator



function名の前に*(アスタリスク)をつけると実行時にGenerator Objectを生成します。Generator Objectのnextメソッドを実行するとyield宣言した箇所まで関数を実行します。yieldの値はvalueプロパティで取得できます。

// ジェネレータを返す関数を定義する
function *func(){
console.log(1,"in");
yield 1;
console.log(2,"in");
yield 2;
console.log(5,"in");
yield 5;
console.log("foo","in");
yield "foo";
console.log("last","in");
}

// ジェネレータを取得する
var gen = func();

console.log(gen.next().value,"out");
console.log(gen.next().value,"out");
console.log(gen.next().value,"out");
console.log(gen.next().value,"out");
console.log(gen.next().value,"out");


var marked0$0 = [func].map(regeneratorRuntime.mark);
function func() {
return regeneratorRuntime.wrap(function func$(context$1$0) {
while (1) switch (context$1$0.prev = context$1$0.next) {
case 0:
console.log(1, "in");
context$1$0.next = 3;
return 1;

case 3:
console.log(2, "in");
context$1$0.next = 6;
return 2;

case 6:
console.log(5, "in");
context$1$0.next = 9;
return 5;

case 9:
console.log("foo", "in");
context$1$0.next = 12;
return "foo";

case 12:
console.log("last", "in");

case 13:
case "end":
return context$1$0.stop();
}
}, marked0$0[0], this);
}

// ジェネレータを取得する
var gen = func();

console.log(gen.next().value, "out");
console.log(gen.next().value, "out");
console.log(gen.next().value, "out");
console.log(gen.next().value, "out");
console.log(gen.next().value, "out");


以下のように無名関数を利用して一気にGenerator Objectを生成することも可能です。

// ジェネレータを取得する
var gen = (function *(){
console.log(1,"in");
yield 1;
console.log(2,"in");
yield 2;
console.log(5,"in");
yield 5;
console.log("foo","in");
yield "foo";
console.log("last","in");
})();
タグ:BABEL ES6 generator
posted by ねこまんま at 13:27 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2015年09月28日

ES6の基本 - Class

BabelでES6を始めるにあたってES6の基本文法とBabelがどのようにコンパイルするかを理解するためにまとめておきます。

Class



これまでnew functionなどを利用してclassを利用してきたがES6で他の言語と同等のclassが追加されました。

class Person{
//コンストラクタ
constructor(name) {
this.name = name;
}
//メソッド
say() {
return 'My Name is ' + this.name;
}
//静的メソッド
static say2(name) {
return '私の名前は' + name;
}
}
var taro = new Person('太郎');
console.log(taro.say());//My Name is 太郎
console.log(Person.say2("taro "));//私の名前はtaro

class Man extends Person{
isMan() {
return true;
}
}
class Woman extends Person{
isMan() {
return false;
}
}

var taro = new Man('太郎');
console.log(taro.isMan());//true
var hanako = new Woman('花子');
console.log(hanako.isMan());//false


var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var Person = (function () {
//コンストラクタ

function Person(name) {
_classCallCheck(this, Person);

this.name = name;
}

//メソッド

_createClass(Person, [{
key: 'say',
value: function say() {
return 'My Name is ' + this.name;
}

//静的メソッド
}], [{
key: 'say2',
value: function say2(name) {
return '私の名前は' + name;
}
}]);

return Person;
})();

var taro = new Person('太郎');
console.log(taro.say()); //My Name is 太郎
console.log(Person.say2("taro ")); //私の名前はtaro

var Man = (function (_Person) {
_inherits(Man, _Person);

function Man() {
_classCallCheck(this, Man);

_get(Object.getPrototypeOf(Man.prototype), 'constructor', this).apply(this, arguments);
}

_createClass(Man, [{
key: 'isMan',
value: function isMan() {
return true;
}
}]);

return Man;
})(Person);

var Woman = (function (_Person2) {
_inherits(Woman, _Person2);

function Woman() {
_classCallCheck(this, Woman);

_get(Object.getPrototypeOf(Woman.prototype), 'constructor', this).apply(this, arguments);
}

_createClass(Woman, [{
key: 'isMan',
value: function isMan() {
return false;
}
}]);

return Woman;
})(Person);

var taro = new Man('太郎');
console.log(taro.isMan()); //true
var hanako = new Woman('花子');
console.log(hanako.isMan()); //false


このようにconstructorで簡単にコンストラクタの設定ができ、staticで静的メソッドが定義できます。
タグ:ES6 BABEL class
posted by ねこまんま at 19:23 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

ES6の基本 - concise methods

BabelでES6を始めるにあたってES6の基本文法とBabelがどのようにコンパイルするかを理解するためにまとめておきます。

concise methods



ES6ではメソッドの定義が簡潔になりました。以下のように「:function」を省略できるようになっています。

var bar = {
fuga : "ok",
foo() {
console.log(this.fuga);
}
};

bar.foo();//ok


var bar = {
fuga: "ok",
foo: function foo() {
console.log(this.fuga);
}
};

bar.foo(); //ok
posted by ねこまんま at 18:30 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2015年09月26日

ES6の基本 - Function Arguments

BabelでES6を始めるにあたってES6の基本文法とBabelがどのようにコンパイルするかを理解するためにまとめておきます。

可変長の引数



ES5以前では可変長の引数を受け取る際にargumentsを利用していましたが、ES6では任意の変数名で受け取ることができます。引数宣言時に.(ドット)を3つつなげて記述します。また、Arrayオブジェクトに変換されるためargumentsより使いやすいですね。

var bar = (...arg) => {
console.log(arg);//[1, 2, 3, 4]
console.log(Array.isArray(arg));//true
};

bar(1,2,3,4);


var bar = function bar() {
for (var _len = arguments.length, arg = Array(_len), _key = 0; _key < _len; _key++) {
arg[_key] = arguments[_key];
}

console.log(arg); //[1, 2, 3, 4]
console.log(Array.isArray(arg)); //true
};

bar(1, 2, 3, 4);


引数の初期値



関数の引数に初期値を設定できるようになりました。

function bar(foo = 3) {
console.log(foo);
}
bar(4);//4
bar();//3


function bar() {
var foo = arguments.length <= 0 || arguments[0] === undefined ? 3 : arguments[0];

console.log(foo);
}
bar(4); //4
bar(); //3


var bar = (foo = 3) => {
console.log(foo);
}
bar(4);//4
bar();//3


var bar = function bar() {
var foo = arguments.length <= 0 || arguments[0] === undefined ? 3 : arguments[0];

console.log(foo);
};
bar(4); //4
bar(); //3
posted by ねこまんま at 12:14 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

ES6の基本 - const

BabelでES6を始めるにあたってES6の基本文法とBabelがどのようにコンパイルするかを理解するためにまとめておきます。

const



constは定数宣言を行う構文です。定数は習慣的に大文字で宣言を行います。

BABELでは1回しか定数宣言されていない場合はvar宣言に変換を行います。

const FOO ="bar";
console.log(FOO);//bar


var FOO = "bar";
console.log(FOO);


しかし、2回以上同一の定数が宣言された場合コンパイルを行わずにエラーを出力します。

const FOO ="bar";
console.log(FOO);//bar
FOO ="bar2";
console.log(FOO);
タグ:ES6 CONST BABEL
posted by ねこまんま at 11:54 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

ES6の基本 - let

BabelでES6を始めるにあたってES6の基本文法とBabelがどのようにコンパイルするかを理解するためにまとめておきます。

let



letは局所的変数宣言でブロクスコープ内のみで有効な変数を宣言できます。
ブロック外で利用した場合は単純にvarと同じ機能を提供しますのでBabelはvarに変更してコンパイルを行います

let foo0 ="bar0";
console.log(foo0);//bar0
if(true){
foo0 = "bar00";
console.log(foo0);//bar00
}


var foo0 = "bar0";
console.log(foo0); //bar0
if (true) {
foo0 = "bar00";
console.log(foo0); //bar00
}


以下のようにブロック内でlet宣言をおこなってみましょう。Babelは大幅な変更を行います。

if(true){
let foo1 = "bar1";
console.log(foo1);//bar1
}
foo1 ="bar11";
console.log(foo1);//foo1 is not defined


if (true) {
var _foo1 = "bar1";
console.log(_foo1); //bar1
}
foo1 = "bar11";
console.log(foo1); //foo1 is not defined


このようにしてletを擬似的に再現しております。

また、以下のように同一ブロックで同じ変数をletした場合はBabelはエラーを返しコンパイルを行いません。

let foo0 ="bar0";
let foo0 ="bar00";


ブロックの階層が異なれば同一変数名でもlet宣言で定義が可能です。

let foo0 ="bar0";
if(true){
let foo0 ="bar00";
}


var foo0 = "bar0";
if (true) {
var _foo0 = "bar00";
}

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

ES6の基本 - Arrow Function

BabelでES6を始めるにあたってES6の基本文法とBabelがどのようにコンパイルするかを理解するためにまとめておきます。

Arrow Function



代表的な省略構文であるArrow Function。

このようなコードが以下のように変換される。関数リテラルが無名関数ではなく有名関数で生成されているのに違和感ありですが。

var bar = () => {
console.log("ok");
};


var bar = function bar() {
console.log("ok");
};


引数を取った場合も一緒です。

var bar = (x) => {
console.log("ok");
};


var bar = function bar(x) {
console.log("ok");
};


引数の括弧は省略できる

var bar = x => {
console.log("ok");
};


var bar = function bar(x) {
console.log("ok");
};


return を行い1行しかない場合は場合は { }も省略できる

var bar = x => x+1;


var bar = function bar(x) {
return x + 1;
};


jQueryなどを利用している場合は以下のように記述するとfunctionの記述を省略できます。

$(()=>{
console.log("ok");
});


$(function () {
console.log("ok");
});
posted by ねこまんま at 03:56 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2015年08月11日

JavaScriptにおけるsetter/getter

JavaScriptにおけるsetter/getterはECMAScript5で追加されIE9以降の主要なブラウザで利用できる機能です。

続きを読む
posted by ねこまんま at 08:03 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

プロパティの存在確認

以下のようにif分内に直接プロパティを指定して存在確認をするのはあまり上手な方法ではない。

var huga = {};
huga.hoge = "foo"
if(huga.hoge){
console.log("ok");
}else{
console.log("ng");
}
続きを読む
posted by ねこまんま at 07:38 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2013年07月22日

JavaScriptの正規表現のmオプション

正規表現の先頭(^)や最後($)は検索文字列に対応している為、以下のような正規表現はマッチしません。

var str = "abc\ndef";
str.match(/^d/);//null


var str = "abc\ndef";
str.match(/c$/);//null


mオプションを指定することで先頭(^)や最後($)が各行二大して適応されるようになります。

var str = "abc\ndef";
str.match(/c$/m);//["c"]


var str = "abc\ndef";
str.match(/^d/m);//["d"]
posted by ねこまんま at 12:33 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

new RegExp()で特殊文字を入力する際の注意

new RegExp()で以下のように特殊文字を入力しようとしたら動かなくてはまった。

var regexp = new RegExp("^(\S*)$");


以下のようにバックスラッシュをさらにバックスラッシュでエスケープする必要がある。

var regexp = new RegExp("^(\\S*)$");
posted by ねこまんま at 12:32 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

JavaScriptの正規表現で改行にマッチ

.などでマッチできると思ったら、.は改行以外の任意の文字列にマッチだった。

[\S\s]とすることで空白と空白以外の文字列にマッチできる。

String.match(/^([\S\s]{3})([\S\s]*)$/);

タグ:正規表現
posted by ねこまんま at 12:32 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2013年01月31日

数値を3桁ごとにカンマで区切り

数値を3桁ごとにカンマで区切り関数。

function number_format(str){
var str_arr = str.toString().split(".");
var num = str_arr[0].replace(/,/g, "");
while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
return num+(str_arr[1]?"."+str_arr[1]:"");
}


3桁ごとのカンマを取り除く関数

function number_deformat(str){
return str.toString().split(",").join("")-0;
}
posted by ねこまんま at 23:22 | Comment(1) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年12月17日

forEachでDOM要素をループする

forEachメソッドを利用してDOM要素をループさせようとすると上手くいかない。

document.getElementsByTagName("p").forEach(function(){
//do something
});


Arrayオブジェクトじゃないので当たり前と言えばあたりまえだけど。

次のように空のArrayオブジェクトにループにcallメソッドを利用すればDOMをループでまわすことができますよ。

[].forEach.call(document.getElementsByTagName("p"),function(ele){
//do something
});
posted by ねこまんま at 20:36 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年07月23日

isPrototypeOfメソッド

オブジェクトで利用することができ、他のオブジェクトのプロパティとして使われているか確認できます。

var hoge = {}
var Foo = function(){}
Foo.prototype = hoge;
var foo = new Foo();
hoge.isPrototypeOf(foo)// true


このサンプルだとhogeはfooのプロパティとして利用されているので。
タグ:isPrototypeOf
posted by ねこまんま at 05:18 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年07月22日

hasOwnPropertyメソッド

オブジェクトのプロパティがオブジェクト自身が持つものかどうか確認するメソッド。

var Hoge = function(){
this.foo = "foo";
}
Hoge.prototype.foo2 = "foo2";
var hoge = new Hoge();
hoge.hasOwnProperty("foo")//true
hoge.hasOwnProperty("foo2")//false


これでprototypeで作成されたオブジェクトと区別ができる。
タグ:hasOwnProperty
posted by ねこまんま at 20:18 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

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) | 関数/文法 | 更新情報をチェックする

2009年10月28日

関数の呼び出し関数を調べる

以下のように設定しておくと関数の呼び出し元の関数を調べることが出来る。

function a(){
b();
}
function b(){
console.log(arguments.callee.caller)
alert("hoge")
}
a()


callerをどんどんたどるともっと呼び出しもとの関数をたどることができる。

function a(){
b();
}
function b(){
var currentFunction = arguments.callee.caller;
while (currentFunction) {
console.log(currentFunction.toString());
currentFunction = currentFunction.caller;
}
alert("hoge")
}
a()


参考サイト:IE上のJavaScriptで、関数の呼び出し元を取得する。
posted by ねこまんま at 17:08 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2009年09月22日

配列の長さ

配列の長さを取ろうとしたら少しはまった。

var hoge = new Array
hoge[0] = "hoge0"
hoge[10] = "hoge10"

console.log(hoge.length)//11

2が帰ってきてほしかったけど11

たぶんメモリ領域が確保されてるから?

var i=0;
for(var key in hoge)i++
console.log(i)//2

仕方ないので、こんな感じで取得した見た
タグ:array length for in
posted by ねこまんま at 03:02 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

型判定を行うtypeof

typeof strもしくは typeof(str)で型判定を行うことができる

var i=0;
alert(typeof i); // number
 
var i="0";
alert(typeof i) // string
 
var i=[];
alert(typeof i) // object
 
var i={};
alert(typeof i) // object
 
var i=function(){};
alert(typeof i) // function
タグ:typeof
posted by ねこまんま at 02:32 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

function のapply

function内で他の関数をapplyすることによりその性質(?)を受け取ることができる。

function myFunc1() {
this.hoge = "ほげ"
}
function myFunc2() {
myFunc1.apply(this);
alert(this.hoge)
}
myFunc2()


myFunc2()を実行すると"ほげ"がアラートされる
タグ:apply
posted by ねこまんま at 00:16 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2009年09月21日

functionのarguments

functionを実行した際にfunction内には暗黙的にarguments オブジェクト
が生成される。

arguments オブジェクトには関数の引数が格納されている。

function myFunc(arg1, arg2) {
alert(arguments[3]);
}
myFunc("arg1", "arg2", "arg3", "arg4");


参考:JavaScript関数の基本を知る
タグ:arguments
posted by ねこまんま at 23:53 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2009年04月29日

insertBefore

parent.insertBefore( newChild , refChild )

のような感じでparentの子要素の、refChild の前にnewChildを追加する。

普通はこう書く

refChild.parentNode.insertBefore( newChild , refChild )

親要素は「refChild.parentNode」でおk

なんとなく気持ち悪い文法。


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

2009年04月07日

execCommand

ブラウザに対して要求を送るコマンド。

例えばIEで背景画像のキャッシュを有効にする方法。
document.execCommand("BackgroundImageCache", false, true);

WYSIWYGエディタなんかを利用する際にも使われるらしい。
タグ:execCommand
posted by ねこまんま at 18:40 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする