[[JavaScript]]
現在位置: 自己紹介と技術情報 » JavaScript

JavaScript

<html> <div class="amazlet-box" style="margin-bottom:0px;"><div class="amazlet-image" style="float:left;margin:0px 12px 1px 0px;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4774154385/r4wh-22/ref=nosim/" name="amazletlink" target="_blank"><img src="http://ecx.images-amazon.com/images/I/61hioeZiViL._SL160_.jpg" alt="プロになるためのJavaScript入門 ~node.js、Backbone.js、HTML5、jQuery-Mobile (Software Design plus)" style="border: none;" /></a></div><div class="amazlet-info" style="line-height:120%; margin-bottom: 10px"><div class="amazlet-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4774154385/r4wh-22/ref=nosim/" name="amazletlink" target="_blank">プロになるためのJavaScript入門 ~node.js、Backbone.js、HTML5、jQuery-Mobile (Software Design plus)</a><div class="amazlet-powered-date" style="font-size:80%;margin-top:5px;line-height:120%">posted with <a href="http://www.amazlet.com/" title="amazlet" target="_blank">amazlet</a> at 13.06.05</div></div><div class="amazlet-detail">河村 嘉之 川尻 剛 <br />技術評論社 <br />売り上げランキング: 88,262<br /></div><div class="amazlet-sub-info" style="float: left;"><div class="amazlet-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4774154385/r4wh-22/ref=nosim/" name="amazletlink" target="_blank">Amazon.co.jpで詳細を見る</a></div></div></div><div class="amazlet-footer" style="clear: left"></div></div> </html>

http://www.2ality.com/2013/01/categorizing-values.html

スタイルガイド

http://javascript.crockford.com/code.html

メンテナブルJavaScript――読みやすく保守しやすいJavaScriptコードのための作法

http://www.oreilly.co.jp/books/9784873116105/

<html> <div class="amazlet-box" style="margin-bottom:0px;"><div class="amazlet-image" style="float:left;margin:0px 12px 1px 0px;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873116104/r4wh-22/ref=nosim/" name="amazletlink" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51CZl9W3s%2BL._SL160_.jpg" alt="メンテナブルJavaScript ―読みやすく保守しやすいJavaScriptコードのための作法" style="border: none;" /></a></div><div class="amazlet-info" style="line-height:120%; margin-bottom: 10px"><div class="amazlet-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873116104/r4wh-22/ref=nosim/" name="amazletlink" target="_blank">メンテナブルJavaScript ―読みやすく保守しやすいJavaScriptコードのための作法</a><div class="amazlet-powered-date" style="font-size:80%;margin-top:5px;line-height:120%">posted with <a href="http://www.amazlet.com/" title="amazlet" target="_blank">amazlet</a> at 13.10.21</div></div><div class="amazlet-detail">Nicholas C. Zakas <br />オライリージャパン <br />売り上げランキング: 273,298<br /></div><div class="amazlet-sub-info" style="float: left;"><div class="amazlet-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873116104/r4wh-22/ref=nosim/" name="amazletlink" target="_blank">Amazon.co.jpで詳細を見る</a></div></div></div><div class="amazlet-footer" style="clear: left"></div></div> </html>

jshint

http://www.jshint.com/

http://qiita.com/yuku_t/items/717d636a174ec37ad967

"Don't make functions within a loop" エラーを出さないコールバックの動的生成の書き方

node.js

since 2013-06-05

http://nodejs.org/download/

Windows 8 (x64) に node-v0.10.10-x64.msi を入れてみた。

動いている： 

c:\>node
> function a(b) {
... return b+1
... }
undefined
> a(3)
4
>

ファイル作る： 

c:\work\great-h-js>type test.js
console.log("hello")
 
c:\work\great-h-js>node test.js
hello

引数のデフォルト値の話を掘り下げてみた： 

function a(b) {
    var c = b || 0
    return c
}
function log(x) {
    console.log(new String(x) + " " + typeof(x))
}
log(a())           // => 0 number
log(a(false))      // => 0 number
log(a(true))       // => true boolean
log(a(undefined))  // => 0 number
log(a(1))          // => 1 number
log(a(2))          // => 2 number
log(a(""))         // => 0 number
log(a("0"))        // => 0 string
log(a("1"))        // => 1 string

関数の引数を取り出す話： 

function test1(a) {
    return arguments[1]
}
function test2(a) {
    return arguments[2]
}
function log(x) {
    console.log(new String(x) + " " + typeof(x))
}
log(test1(0, 1))          //=> 1 number
log(test1(0, "1"))        //=> 1 string
log(test1(0, undefined))  //=> undefined undefined
log(test2(0, 2))          //=> undefined undefined

eval で if 文の評価値を取り出す： 

function log(x) {
    console.log(new String(x) + " " + typeof(x))
}
log(eval("if(false){'1'}else{'2'}")) //=> 2 string

ブロックとオブジェクト初期化子が紛らわしいという話： 

function log(x) {
    console.log(new String(x) + " " + typeof(x))
}
log(eval("{a: 1}"))          //=> 1 number
// log(eval("{a: 1, b: 2}")) //=> SyntaxError
log(eval("({a: 1})"))        //=> [object Object] object
log(eval("({a: 1, b: 2})"))  //=> [object Object] object

なぜ最後は [object Object] なのだろうと思っていじっていたら、ものすごく基本でわからなくなった： 

console.log("abc")             //=> abc
console.log(new String("abc")) //=> { '0': 'a', '1': 'b', '2': 'c' }

これが「String クラスとプリミティブ値の文字列は別物」という話らしい。掘り下げてみる： 

function log(x) {
    console.log(x)
}
var str = new String
log(typeof(String)) //=> function
log(typeof(str))    //=> object
log(typeof("a"))    //=> string
log(String.split)   //=> undefined
log(str.split)      //=> [Function: split]
log(str['split'])   //=> [Function: split]
log("a".split)      //=> [Function: split]
log("a"['split'])   //=> [Function: split]

String コンストラクタのように見えるものは function で、この function には split プロパティは存在しない。

インスタンス str は object で、split プロパティが存在する。

プリミティブ型 "a" は string だが、こっちにも split プロパティが存在する。

プリミティブ型の文字列を split すると、一時的に String ラッパーのインスタンスが生成されているという話： 

function log(x) {
    console.log(x)
}
log("a,b".split(","))               //=> [ 'a', 'b' ]
log((new String("a,b")).split(",")) //=> [ 'a', 'b' ]

String オブジェクト同士の加算、または String オブジェクトと文字列プリミティブの加算で、プリミティブ型になる： 

function log(x) {
    console.log(x)
    console.log(typeof(x))
}
log(new String("a"))                   //=> { '0': 'a' }
                                       //   object
 
log(new String("a") + new String(""))  //=> a
                                       //   string
 
log(new String("a") + "")              //=> a
                                       //   string

インスタンスのプロパティはコンストラクタのプロトタイプのプロパティで、動的に書き換わる： 

function log(x) {
    console.log(x)
}
String.prototype.hello = function() {
    return this + " world!"
}
log(String['hello'])               //=> undefined
log(String['prototype']['hello'])  //=> [Function]
log("test"['hello'])               //=> [Function]
log("test".hello)                  //=> [Function]
log("test".hello())                //=> test world!

じゃあ length はどうか。関数ではないので違う感じになる： 

function log(x) {
    console.log(x)
}
log(String.length)           //=> 1
log(String.prototype.length) //=> 0
log("test".length)           //=> 4

Object 型の toString() を確認していて、やっとわかった。({}) は (new Object) と同じだった： 

function log(x) {
    console.log(x)
}
log((new Object).toString())     //=> [object Object]
log(({}).toString())             //=> [object Object]
log(({a:1}).toString())          //=> [object Object]
log(({a:1}).hasOwnProperty("a")) //=> true
log(({}).hasOwnProperty("a"))    //=> false

Array の typeof はただの object という話： 

function log(x) {
    console.log(x.length)
    console.log(typeof(x))
}
log(new Array)   //=> 0
                 //   object
 
log([])          //=> 0
                 //   object
 
log(0)           //=> undefined
                 //   number

さすがに instanceof はちゃんと機能する： 

> node
> [] instanceof Array
true

正規表現オブジェクト： 

function log(x) {
    console.log(x)
    console.log(typeof(x))
    console.log(x instanceof RegExp)
}
var pat1 = /(.*)World/
var pat2 = new RegExp("(.*)World")
 
log(pat1)  //=>  /(.*)World/
           //    object
           //    true
 
log(pat2)  //=>  /(.*)World/
           //    object
           //    true
function log(x) {
    console.log(x)
    console.log(typeof(x))
}
var pat1 = /(.*)World/
var pat2 = new RegExp("(.*)World")
 
log(pat1.test("HelloWorld")) //=> true
                             //   boolean
 
log(pat1.test("Hello"))      //=> false
                             //   boolean

URIエンコード

http://logic.moo.jp/data/archives/438.html

node.js で実験した： 

> var hoge=[1,2,3]
undefined
> hoge
[ 1, 2, 3 ]
> JSON.stringify(hoge)
'[1,2,3]'
> encodeURI(JSON.stringify(hoge))
'%5B1,2,3%5D'
> encodeURIComponent(JSON.stringify(hoge))
'%5B1%2C2%2C3%5D'
> escape(JSON.stringify(hoge))
'%5B1%2C2%2C3%5D'
サイト検索

目次

javascript.txt · 最終更新: 2013/11/08 12:22 by Takuya Nishimoto
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0