prog*sig

■4.3  Creating a Random Number Generator

ランダム値の生成
Math.random()は0 以上 1 未満の値を生成する。
生成したランダムな値を Math.floorで繰り下げた整数を返すので、0から0.9の値ができる。
繰り上げの場合はMath.roundを使うけど紛らわしい。
Math.randomは厳密なランダムではない気がする。

var randomNumber = Math.floor(Math.random() * 255);// 0- 255の数字
var randomNumber = Math.floor(Math.random() * 6) + 5; // 5-10

■4.6  Summing All Numbers in a Table Column

parseInt と parseFloat
document.querySelectorAllが初登場

■4.8  Find the Radius and Center of a Circle to Fit Within a Page Element

SVGが初登場

いや書くことが無かった。

DateオブジェクトやsetTimeoutなどの時間についての章

■3.4  Converting an ISO 8601 Formatted Date to a Format Acceptable to the Date Object

ISO 8601からDateオブジェクトに変換してみる。

  var dtstr= "2009-10-15T14:42:51Z";// ISO 8601
  // ISO 8061のTはTime、Zはzone
  dtstr = dtstr.replace(/\D/g," ");// 数字だけにする
  var dtcomps = dtstr.split(" ");
  // modify month between 1 based ISO 8601 and zero based Date
  dtcomps[1]--; // jsのmonthは0から指定なのでデクリメント
  var convdt = new
Date(Date.UTC(dtcomps[0],dtcomps[1],dtcomps[2],dtcomps[3],dtcomps[4],dtcomps[5]));
//Thu Oct 15 2009 23:42:51 GMT+0900  Date

2009-10-15 だけみたいなTimeまで入れてないデータでも成立するようにsplitで分割した後に残りを0で埋めておくとかの処理があると適当な数字でもDateオブジェクトが作りやすい。
が、こういうのはバグを作りやすいので厳密にしておいた方がいいような気もする。

function convertISO8601toDate(dtstr) {
  dtstr = dtstr.replace(/\D/g," ");// 数字だけにする
  var dtcomps = dtstr.split(" ");
  // modify month between 1 based ISO 8601 and zero based Date
  dtcomps[1]--; // jsのmonthは0から指定なのでデクリメント
  if (dtcomps.length < 3) return "invalid date";
  // if time not provided, set to zero
  if (dtcomps.length < 4) {
    dtcomps[3] = 0;
    dtcomps[4] = 0;
    dtcomps[5] = 0;
  }
  var convdt = new
Date(Date.UTC(dtcomps[0],dtcomps[1],dtcomps[2],dtcomps[3],dtcomps[4],dtcomps[5]));

 return convdt.toUTCString();
}
convertISO8601toDate("2010-07-22");// Thu, 22 Jul 2010 00:00:00 GMT

■3.7  Tracking Elapsed Time

よくあるような経過時間を計るとき、Dateオブジェクト同士を引算すると簡単に差分を計算できる。

var firstDate;
window.onload=startTimer;
function startTimer(){
  firstDate = new Date();
  document.getElementById("date").onclick=doEvent;
}
function doEvent() {
  var secondDate = new Date();
  alert((secondDate - firstDate) / 1000);
}

■3.8  Creating a Timeout

setTimeout と setInterval の性質の違い。
本にはたいしたこと書いてないが、John Resig - How JavaScript Timers Workが大変興味深い。
こっちも参考になる

• setIntervalとsetTimeoutを調べた結果余分なことになった - 三等兵
• Secrets of the JavaScript Ninja 6章を読んで来た - Output::Weblog

■3.10  Using Function Closures with Timers

setTimeoutとか第三引数で実行関数に引数として値を渡せるけどIEは対応してないので関数でクロージャー作れば解決するとかの話。
要はsetTimeout で実行する関数に引数を渡すみたいな。

setTimeoutとsetIntervalの本質的な内容はリンクがあっただけで投げられていた。
この章ではそこが一番難しいけど本には特に詳しく書いてない。

正規表現についての章

■2.0  Introduction

正規表現とは何か。
スラッシュで囲んだ/正規表現/リテラルと new RegExp(正規表現)があるよ。
リテラルで作ったものは実行時にコンパイルされるので、今後変更しない正規表現を作りたいときに使う。
new RegExpは入力を受けて正規表現を作るときに使う。

• JavaScript/RegExp - Wikibooks
• RegExp - MDC

■2.4  Finding and Highlighting All Instances of a Pattern

ECMAScript 5標準にString.prototype.trimメソッドは存在しているので、実装する場合はすでに存在するかを確認してからprototypeを拡張する。
leftとrightのtrimは標準じゃないので独自実装されているブラウザがあるだけ
これでできる！ クロスブラウザJavaScript入門：第4回　JavaScriptの基礎知識#1｜gihyo.jp … 技術評論社

この章は特にめぼしいことが書いてない感じ。
execを使った表現が多めでmatchとの違いとか説明無かった気がする。
String.matchとRegExp.execと後方参照 - chalcedonyの外部記憶装置・出張版
飛ばしても問題なさそうな章だった。

文字列について扱っていく章

■1.1 Concatenating Two or More Strings

Stringの結合はconcatを使っても行える。

var newString = "".concat("This ","is ","a ","string"); // returns "This is a string"

■1.3 Conditionally Comparing Strings

==で比較した場合はデータ変換が行われる可能性があるので、変換を起こしたくないなら===を使う。

var numVal = 10.00;
if (numVal == "10") alert("OK"); // 発生
if (numVal === "10") alert("OK"); // 起きない

また文字列の辞書順で比較する際にはlocaleCompare()を使うと二者間で比較できる。
–1,0,1を返すCっぽい関数。

■1.6 Checking for an Existing, Nonempty String

空文字のテスト面白い

if(((typeof unknownVariable != "undefined") &&
     (typeof unknownVariable.valueOf() == "string")) &&
    (unknownVariable.length > 0)) {
   // 変数が存在して、それがstringであり、かつ長さ(空でない)があるなら
}

■1.10 Trimming Whitespace from the Ends of a String

先頭と末尾空白の除去
trim関数を作るのにprototype拡張してたけど個人的には関数のままでいいかなー

if (typeof String.trim == "undefined") {
   String.prototype.trim = function() {
      return this.replace(/(^\s*)|(\s*$)/g, "");
   }
}
" while space ".trim();
// 個人的には下の方が好み
var trim = (function(regexp){
    return function(str){
        return str.replace(regexp, '');
    };
})(/(^\s*)|(\s*$)/g);
trim(" while space ");

Javascript Cookbook (Oreilly Cookbooks) Shelley Powers Oreilly & Associates Inc Amazonで詳しく見る by AZlink

JavaScript Cookbook - O'Reilly Mediaの記録。

• 書籍版
• 電子書籍版
• iPhoneアプリ版

iPhoneアプリ版は$4.99なので取り出してepubにすると一番安価(同一内容かは知らない)
たった600円でオライリー本をiPadやKindleで読む。すてき。 - このブログは証明できない。

この本の対象ブラウザ

• Firefox 3.6x on Mac and Windows
• Safari 4.0x on Mac and Windows
• Opera 10.x on Mac and Windows
• Chrome 5.x on Windows
• Internet Explorer 8 on Windows

IE6はYoutubeとかメジャーなとこが捨て始めたし、動かないコードが多いのでこの本では扱わない。
IE7はset/get/has.Attributeと.querySelectorAll周りで動かないコードが出てくるかもね。

新しい事、postMessage、File APIやWeb Workers、人気のあるライブラリjQueryやHTML video&audioについても扱っていくよ。
まあ詳しくはここの目次を見た方がいいかも。
サンプルはIndex of /9780596806149の一番上にまとまっておいてあるのでzipで。

■読了後の感想

まずは中身の難易度について。
中身自体は比較的易しめで、初歩的な事がそれぞれ説明をしている。
全ての章が以下のような順序で構成されているので、いきなり変なとこに飛んだりはしないので読みやすいかな。

1. Introduction
2. Problem
3. Solution
4. Discussion

新しい事については、ECMA5で定められててまだ全てのブラウザの実装が整ってないものもいろいろ解説している。
こんなテクニックがあるんだぜーとかこうした方が高速だ!とかそういう内容ではないので、新しい手法を学ぶと言うより基礎を固めるという感じに近い本。
そういう基礎的な内容が多いけど幅はかなり広いかもしれない。(詳しい内容は下に各章ごとにメモかいた)
大事な事は結構繰り返し出てきたりするので、読んだら明らかにダメだと思われてる事はやらなくなるんじゃないかな。
個人的にはChapter 14. Creating Interactive and Accessible Effects with JavaScript, CSS, and ARIAの章が結構面白かった。
アクセスビリティについての話もちょくちょく出てくるのは国の違いなのかな。
550ページぐらいの本だけど、英語できない自分でもGoogle翻訳とか辞書(Lingoes使ってた)を使って読めたので言語的に難しい話は少なかったと思う。
脱字誤字が地味合ったりするけど、たまにコラムっぽい内容もあってそこそこ楽しめたんじゃないかと。