2011-05-06
Head First JavaScriptを読んだ。
book, javascript |
はじめに
JavaScript合宿の教材として、「WEB+DB vol62」と「Head First JavaScript」を読んだ(2011/5/4-2011/5/6)。新しく知ったことをまとめていく。
Head First JavaScript ―頭とからだで覚えるJavaScriptの基本
- 作者: Michael Morrison,豊福剛
- 出版社/メーカー: オライリージャパン
- 発売日: 2008/08/14
- メディア: 大型本
- 購入: 14人 クリック: 317回
- この商品を含むブログ (54件) を見る
1章 インタラクティブなウェブ：応答するバーチャルワールド
2章 データを格納する：あらゆる物には然るべき場所がある
P49
データはテキスト、数値、論理値で表現される。
定数は、"const HOGE = 300;"のように作成する。ただしIEでは使えない。
P69
定数名はすべて大文字、変数・関数名は小文字始まりのキャメルケースを使用する。
定数作成時は必ず初期化する。
NaNは"Not a Number"の略。
文字列から数値への変換には、parseInt()やparseFloat()を使用する。
3章 ブラウザを調べる：ブラウザを探検する
P104
1回かぎりのタイマーはsetTimeout()を、一定間隔で繰り返すタイマーはsetInterval()を使用する。(中止はclearInterval()。)
ウェブページ要素のstyleオブジェクトにはwidth, heightなどのスタイルプロパティがある。
「クライアントウィンドウ」とはブラウザのうち、ウェブページが表示される領域をいう。
「クライアントウィンドウ」の幅・高さはdocument.body.clientWidth, clientHeightでアクセスする。
4章 意思決定：道が分かれていたら、どっちに進むか決めなさい
P165
false自身の他に、null, 0, ""はfalseとみなされる。
5章 ループ：同じことが重複するのは危険
P199
配列は、"var ary = new Array();"のように作成する。
インデクス配列の作成と初期化は、"var ary = [1, 2, 3];"のようにする。
P201
配列には異なる型のデータを格納することができる。
P202
P232
二次元配列は、"var ary = new Array(new Array(3), new Array(3));"のように作成する。
P234
配列に要素を追加するときは、Array.push()を使用するか、"ary[4] = 99;"(要素数4の配列に1要素を追加する場合)のようにする。
二次元配列の行は、異なる大きさであってもよい。"var a = new Array(new Array(1), new Array(3));"
6章 関数：節約、再利用、リサイクル
P272
関数の宣言方法は次の二通りある。(両方とも同じ)
function func(arg1, arg2) { return arg1 + arg2; } var func = function (arg1, arg2) { return arg1 + arg2; }
P278
HTML属性を使ってコールバック関数をイベントハンドラとしてイベントに関連付ける代わりにJavaScriptで書くことができる。(二番目は匿名関数を使用した場合)
window.onload = func; window.onload = function (evt) { //...何か処理 }
7章 フォームと検証：ユーザに洗いざらい話してもらう
P295
フォームフィールドで発生するイベント
- フィールド選択(onfocus)
- データ入力
- 次のフィールドへ(onblur/onchange(値が変化していた場合))
- 次のフィールド選択(onfocus)
- ...
P309
関数宣言の引数の個数よりも実際の使用時の引数の個数が少ない場合は、渡されなかった仮引数にはnullが入る。
function func(a1, a2) { //a1 = 10, a2 = null } func(10);
HTMLのsize属性は単なる大きさを表す。入力可能桁数とは無関係。
正規表現にはRegExpオブジェクトを使用する。マッチにはtest()メソッドを使用する。
var regexp = /^\d{5}$/; if (regexp.test("97875")) //...
8章 ページの部品をかき集める：HTMLをDOMで切る
P352
innerHTMLはMicrosoftがIEのために作成した機能でありウェブ標準ではない。
P354
DOMツリーにあるノードタイプには以下のようなものがある。他にもある。
- DOCUMENT
- ELEMENT
- TEXT
- ATTRIBUTE
- ...
P357
ノードプロパティには以下のようなものがある。多分他にもある。
- nodeValue
- nodeType
- childNodes
- firstChild
- lastChild
P361
ノードテキストを変更する安全な手順は以下のようになる。
//子ノードをすべて削除する。 var node = document.getElementById("hoge"); while (node.firstChild) node.removeChild(node.firstChild); //新しいテキストノードを作成する。 var textNode = document.createTextNode("fugafuga"); //作成したテキストノードを子ノードとして追加する。 node.appendChild(textNode);
P364
innerHTMLを使用してコンテンツを変更すると、要素の子ノードがすべて削除されてから、新しいコンテンツが追加される。
P379
ノードのclassNameプロパティでスタイルクラスを変えることで、大きくスタイルを変更できる。
ノードのstyleプロパティでスタイルを変えることで、細かくスタイルを変更できる。
var node = document.getElementById("hoge"); node.className = "anotherclass"; var node2 = document.getElementById("hoge"); node2.style.display = "none";
P385
新しいHTML要素を作成するには、document.createElement()を使用する。
var elem = document.createElement("p"); elem.appendChild(document.createTextNode("hogehoge")); document.getElementById("fuga").appendChild(elem);
DOMツリーにノードを追加したり削除すればウェブページを思い通りに変更できる。
9章 データを活気づける：オブジェクトはフランケンデータ
P417
DateオブジェクトのgetMonth()メソッドは0から11を返す。
P432
toString()メソッドは、alert()の引数に渡されたときに自動的に呼び出される。
Array.sort()は以下のように使用する。(あまり良くない例だなぁ。。。)
ary.sort(function (a1, a2) { //a1が小さい => -1 //a1 = a2 => 0 //a1が大きい => 1 //上記のような戻り値にした場合、小->大のようにsortされる。 });
10章 カスタムオブジェクトを作成する：カスタムオブジェクトを思い通りに
P458
JavaScriptでクラスのようなものを作る。
//コンストラクタ function Hoge(a1, a2) { this.a1 = a1; this.a2 = a2; } //メソッド宣言 Hoge.prototype.method1 = function () { //... } Hoge.prototype.method2 = function (a1, a2, a3) { //... }
P463, P471
//上記のHogeクラスをそのまま使用する。 //クラスプロパティ Hoge.prototype.fuga = "FUGAFUGA"; //クラスメソッド Hoge.method3 = function () { //... //クラスメソッドはクラスプロパティにアクセスできる。 }
P469
標準オブジェクトを拡張することができる。
String.prototype.hoge = function () { //... //でもプロパティに何があるか不明だから、 //メソッドからもらえる値しか使えないような気がする。。。 }
11章 バグをなくせ：良いスクリプトも悪くなる
P524
ヘッダ部にスクリプトを書いている場合には、その時点ではボディ部が読み込まれていないことに注意する。onloadイベントはページの読み込みが完了したことを表すので、そのイベントハンドラでボディ部を使用するようにする。
<html> <head> <script type="text/javascript"> var hoge = new Hoge(); //実行時エラー function Hoge() { //document.bodyを使用する。 } </script> </head> <body> </body> </html>
<html> <head> <script type="text/javascript"> var hoge; function Hoge() { //document.bodyを使用する。 } </script> </head> <body onload="hoge = new Hoge();"> </body> </html>
12章 ダイナミックなデータ：感度良好なウェブアプリケーション
困ったときに見るURL
JavaScriptのライブラリ
その他のメモ
関数, メソッド
alert(), confirm(), prompt()
isNaN()
Number.toFixed()
String.indexOf()
数字の欲しいフィールドに対するチェック
if ( document.getElementById("hoge").value == "" || isNaN(document.getElementById("hoge").value) ) { //エラー処理 }
クッキー
クッキーはデータの永続化に使用する。クッキーには"名前と値、有効期限"がある。
navigator.cookieEnabledで利用可能かどうかを調べる。
デバッグ、エラー
debugにはalert(), エラーにはブラウザのエラーコンソール
2011-05-03
はてなダイアリーの検索の表示順について
その他 |
前々から思っていたんだけど、はてなダイアリーのトップページから「はてなダイアリーから検索」で検索をしたときの検索結果の表示順は何を元にしているのかがついに分かった(今まで調べなかっただけだけど)。「検索結果の表示順は、はてなで開発した独自のアルゴリズムによって決定され、より検索結果として相応しいものが上位に来るよう調整されます。」だそうで。自分の使い方では、例えば日付順に並べてほしいことがすごくたくさんある。ある製品について誰か感想を書いていないか探す場合、発売日前に書かれた日記が発売後も表示される。日付順にソートできれば、新しいことは何も書かれていないことが確認できて新しい記事を探す手間が無くなると思う。もしかしたら「はてなで開発した独自のアルゴリズム」はもう既にそうなっているのか？それならそう書いてほしいなぁ。それともそんな使い方は誰もしないのかな。
ピノキオ
その他 |
好き。
![ピノキオ スペシャル・エディション [DVD]](http://ecx.images-amazon.com/images/I/51OzUGoNmSL._SL160_.jpg "ピノキオ スペシャル・エディション [DVD]")
- 出版社/メーカー: ウォルト・ディズニー・ジャパン株式会社
- 発売日: 2009/05/20
- メディア: DVD
- 購入: 1人 クリック: 16回
- この商品を含むブログ (12件) を見る