サイ本読書記 7章 オブジェクトと配列

大きく分けて前半がオブジェクト、後半が配列という構成。

オブジェクトとはなんぞや

『プロパティ名:プロパティ値』 という形式のデータを集めた物。 個人的には、オブジェクトは袋で配列は棚という雰囲気(どうでもいい)。

オブジェクトの作り方

オブジェクトリテラルを使う
var hoge = {a:0, b:1, c:"hoge"};

{}を使うのがこれ。 例えばvar hoge = {} とすると、空っぽのオブジェクトが生成される。 カンマで区切って複数のプロパティを一度に生成できて、このサンプルだと3つのプロパティができる。

var foo = {
 "aaa":0,
 "bbb":1,
 "ccc":"hoge"
};

こんな書き方もできる。 最初のコードと違う点は二つ。 一つはカンマの部分で改行をしている事。 これは見やすくする為の改行で、CSSなんかのと同じ。 もう一つは、プロパティ名("aaa"とかの方)が文字列になっている事。 プロパティ名に使えるのは識別子か文字列となっていて、最初のコードのように変数みたいな書き方が識別子、二番目のコードのように文字列形式(" "でくくってる)のが文字列。
ちなみにhogeやfooがオブジェクトの名前になるんだけど、勉強を始めたばかりの人(ちょっと前の僕とか)だと単なる変数に見えてしまい混乱してしばう。 「varだから変数?」という段階で思考停止してた><

new演算子を使う
var hoge = new Array();
var foo = new Date();

こんなん。 newに続けてコンストラクタ関数を記述する。 ここでのコンストラクタ関数はJS的に元から用意されている物だけど、ユーザー側で定義する事もできるらしい(9章で出てくるぽい)。

プロパティへのアクセス

ドット演算子を使う

一つは、ドット演算子を使う方法。

var hoge = {a:0, b:1, c:"hoge"};

alert(hoge.a);

これで、プロパティaの値、つまり数値「0」がアラートで出てくる。
余談。
「アクセス」って用語がまた直感的じゃ無い気がする。 何となく雰囲気は察せるんだけど、微妙にもにょもにょするというか。 僕もDOMツリーを理解してやっと飲み込めた感じで。 イメージ的にはCSSの子供セレクタと同じだと思うんだけれど。

オブジェクトの入れ子

オブジェクトは入れ子が可能。 例えばこんな感じ。

var hoge = {};

hoge.aaa = "文字列";

hoge.bbb = {zzz:123, yyy:456, xxx:789};

alert(hoge.bbb.zzz);

これで、alertには「123」が出る。

プロパティ名を調べる

var hoge = {aaa:123, bbb:456, ccc:789};
for(var check in hoge) alert(check);

オブジェクト名(ここではhoge)が分っていて、その中身が分らない時は、for in を使って調べられる。 このコードではalertで aaa bbb cccと三回出る。

プロパティを消す

delete hoge.aaa;

delete演算子に続いて消したいプロパティを書けば消える。 このプロパティが {aaa:123}だった場合、{aaa:undefined}などになる訳ではなく存在そのものが消える

プロパティへのアクセス、もう一つ

連想配列形式で行える。 例えばこんなの。

var hoge = {"aaa":123}

alert(hoge.aaa);
alert(hoge["aaa"]);

下の方が連想配列形式。
両者は似て非なるもの。 それぞれ、上のは識別子で、下のは文字列でプロパティにアクセスしている。 一方、オブジェクトを生成している方は、「"aaa"」と文字列のプロパティ名。 素直に考えると識別子の方はエラーになりそうだけど、どちらも「123」をアラートで出す。 多分識別子の方は、例によってJSが空気を読んで文字列に変換してくれてるんだと思う。 逆に「aaa」と識別子のプロパティ名でも["aaa"]でアクセスできる。 JSかわいいよJS。

で、配列形式の何が良いのかって言うと、識別子はプログラムを書く時点で確定している必要があるけど、文字列は必ずしもそうでないという事。 つまり、プロパティ名へのアクセスに変数が使えたりする(より柔軟な書き方ができる)。

var hoge = {}

var i = "閲覧者が入力したプロパティ名";
var n = "閲覧者が入力したプロパティ値";
hoge[i] = n;

alert(hoge[i]);

連想配列形式なら、こんな使い方ができる。

以後はオブジェクトのプロパティとメソッドの解説なので省略。 リファレンス的に使う。


配列

ここから配列。 配列の概要は大体解っていたので、ざっくりと。

  • hoge[0]←この[0]の部分を「インデックス」と呼ぶ。 その中身を「要素」と呼ぶ
  • 要素にはどのデータ型でも入れられる。 つまり、配列の入れ子も可能
  • サイ本では、オブジェクトと配列は別のデータ型として扱う
配列の生成-配列リテラルを使う方法
var hoge = [];
var huga = [1, 2, 3, 4, 5];
var foo = [1+1, 2+2, 3+3];
var bar = [a, {a:1, b:2}, 3, {c:3, d:4}];

こんなん。カンマを二つ続けると、未定義の要素が生成される。

配列の生成-コンストラクタ関数を使う方法
var hoge = new Array();
var huga = new Array(1, 2, 3, 4, 5);

こんなん。

要素を生成せずに配列のサイズだけ指定して生成
var hoge = new Array(99);

99個のインデックスを持つ配列が生成される(100個じゃない)。 要素は全て未定義値。

配列へのアクセス

  • 0以上の整数をインデックスに指定する
  • インデックスには変数も使える(ただし展開したら整数である事。 文字列なんかだとプロパティを生成する)
  • 式も使える(ただし展開したら(ry)

配列の要素の増減

CやJavaだと、要素の数はあらかじめ決めておく必要があるが、JSは自由に変更する事が可能。 また、インデックスは必ずしも連続した数字でなくてもよい。

hoge[0] = "0だお";
hoge[100] = "100だお";

1〜99までのインデックスは存在しない。

配列の要素の削除

// オブジェクト
var hoge = {aaa:123, bbb:456, ccc:789};
delete hoge.aaa;
for(foo in hoge) alert(foo);

// 配列
var hoge = ["a", "b", "c"];
delete hoge[0];
alert(hoge[0]);

オブジェクトのプロパティはdelete演算子で削除が可能だけど、配列の要素でdelete演算子を使うと未定義値になる。 配列の要素を削除するには、配列のメソッドを使う必要がある。

var hoge = ["a", "b", "c"];

Array.shift(hoge)
Array.pop(hoge)

alert(hoge);

shiftで最初の要素、popで最後の要素を削除。 このコードでは「b」のみアラート。 他にも色々なメソッドで操作が可能。 ちょっとjQueryを連想した。

lengthプロパティ

配列を生成すると、要素の数を格納したlengthプロパティが生成される。 配列に要素が追加・削除されると、lengthプロパティもそれに合わせて更新される。
lengthは、ループの条件に使われたりする。

var webS = ["nowa", "twitter", "tumblr", "mixi", "2manji"];

for(var hoge = 0;  hoge < webS.length;  hoge++) {
 alert(webS[hoge]);
}

こんなん。 ちなみにlengthは操作が可能で、現在値より小さくすると、はみ出た要素は削除される。 現在値より大きくすると、未定義値が生成される。

以降数ページはリファレンスにつき中略。


配列風オブジェクト

配列では無いけれど、『配列風のオブジェクト』を作る事ができる。 こんな感じ。

var hoge = {};

var i = 0;
while(i < 10) {
 hoge[i] = i * i;
 i++;
}

hoge.length = i;

for(var j = 0;  j < hoge.length; j++) {
 document.write(j + "<br />");
}

オブジェクトhogeにlengthプロパティを生成して、その値に数値を格納。 で、そのlengthプロパティを使ってfor文。 本当の配列は自動でlengthプロパティが生成・更新されるけど、これはあくまで『配列風』だから、手作業的にlengthプロパティ(名前こそ同じだけど、つまり別物)に値を入れている。

メモ的エントリ MVCフレームワークについて(スレッジ編)

nowaの仕組みについて教わっていたら、MVCフレームワークという部分にまで話が及んだのでまとめてみます。

モデル(M)・ビュー(V)・コントローラ(C)の3つに分かれている。

VはHTML(など?)。 MとCは、機能(書けるコード)的には同じ物。 ファイル形式も同じでhoge.pm。 違いは、Mが大きくてCが細かいという感じ。 これがちょっと難しいんだけど、例えば「こっちのVでは使えた変数が、あっちのVでは使えないぞ?」という時は、その変数はCで設定されてる・・・のかな? Mだと色んなVで使える?(ここ聞き忘れたので週明けに聞いて追記します><)
MとCの使い分けは、作業を便利にしたり管理をしやすくしたりする為に行う。 その基準は任意だけど、(中身のコードを)使う頻度とか、そんな感じで分ける事が多い。

ディレクトリには意味がある

MとCを、Vに関連付けているのは、ディレクトリ。 以下サンプル。

HTML
/doc/hoge/huga/foo.html
               /bar.html

PM
/doc/hoge/huga.pm

huga.pmはhugaフォルダ内のファイルに対応している。 フォルダとファイルという違いに違和感を覚えるけど、foo.htmlとbar.htmlはhuga.pmの中に書き分ける事ができる。 この方式だと、どのCがどのVに対応しているのかが管理しやすい。
ちなみに昔のバージョンだと、これを手書きで指定、管理していたらしい。

テンプレートツールキット

TTで使っている変数は、CやMで用意されている。 以下サンプル。

[% hogehoge = AAA.zzz.BBB.yyy.CCC.xxx %]
[% hogehoge.your_name %]

このコードは、一行目は途中までアクセスした物を代入している。 これは作業を便利にする為(何度も使うのに何度も長いアクセスするのは面倒だから)。 これによって理論的には若干重くなる。 …んだけど、体感できる程ではないらしい。
この「便利にする為の代入」はMVCのどれでも行える。 使い分ける基準や理由は前述の通り。

サイ本読書記 6章 文

文とは?

JSに何かを命令する物。
5章でやった式は、それ自体では特に何も起こらない。 var hoge = "abc"; のように代入などが起きる事はあるが、それは副作用による物。 文とは、いくつかの式が集まって命令になっている感じ。

式文

副作用を伴う式の文。 式と式文の違いは、

1+3;

これが式。 これだけだと、計算はするけどその結果は破棄される。 そんな事は実際はありえない(意味が無い)。 そこで計算結果を変数に代入したりする。

var hoge = 1+3;

これが式文。
他にも

hoge++;

も式文。 式だけど『インクリメントする』という命令になってる。

なんて言うか、『まず理屈がある。 例え理屈とは関係無くコードを書いたとしても、結果的にその理屈に沿う事になる』って感じ?(分かりづらいなコレ)

注意点

文の最後にはセミコロンが必要。 無くても大丈夫な場合もあるけど紛らわしいから毎回付ける事。

複合文

複数の文を一つにまとめた物。 文ブロックと呼ぶ。

CSSの場合
{ /* ここから */
 color: red;
 text-align: center;
} /* ここまでを宣言ブロックと呼ぶ */


JSの場合
{ // ここから
 var hoge = 123;
 var foo = "abc";
 alert(hoge + foo);
} // ここまでを文ブロックと呼ぶ

こんな感じ。 それぞれの文末にはセミコロンを記述するが、文ブロックの最後には記述しない(中カッコの終わりには不要という事)。 入れ子可能。 入れ子にされた方の文(子孫)を『副文』と呼ぶ。
ちなみに、実行の際は単純に上から順に実行される。 それを途中で中止させる方法もある(後述)。

if文

シンプルな条件分岐の方法。 「もし○○なら」、という○○に適合すれば、処理を続行する。 処理には文ブロックを使う事ができる。

if(hoge == 0) {
 document.write("TRUE");
 alert("HOGE");
}
else

ifの条件に加えて、「そうでなければ」と続ける事ができる。 複数のifがある場合には、直近の物に対応する事に注意。

var hoge = 123;
var foo = "abc";

if(hoge != foo)
 if(hoge == 123)
  alert("123!!");
else
 alert("hogeとfooが同一です");

気持ち的にはelseは最初のifを指しているんだけれど、直近のifは二番目の物なので思った通りにはならない。 ちなみにそういう時は文ブロックを使って書くと良い。

var hoge = 123;
var foo = "abc";

if(hoge != foo) {
 if(hoge == 123) {
  alert("123!!");
 }
} else {
 alert("hogeとfooが同一です");
}

こんなん。 無用なトラブルを避ける意味もあるので、複数の文でなくても基本的に文ブロックを使うと良い。

else if文

「でなければ、もし○○なら」という条件。
// 個人的には言語によって else if だったり elsif だったりするのがヤラシーです。 思い出せなくて勘で書くと、大抵逆なんですよね><

switch文

参照する物を提示して、
もし○○ならこれを実行
もし××ならこれを実行
もし□□ならこれを実行
もし△△ならこれを実行
とする条件文。 複数のif文を使うより簡潔に記述できる。 具体的にはこんなの。

switch(3) {
 case 1:
  alert(1);
  break;

 case 2:
  alert(2);
  break;

 case 3:
  alert(3);
  break;

 case 4:
  alert(4);
  break;
}

caseの部分が条件。 ここでは凄くシンプルだけど、もちろんもっと複雑な条件も使える(仕様的には任意の式が使えるとされている)。 比較には == ではなく === が使われるので、空気を読んで型を変換してくれたりはしない。
それと、各caseの最後に記述してあるbreakが地味に重要。 もし無いと、条件に適合したら続く処理も行われてしまう。
caseの部分には、副作用を持つ式も指定できる(仕様的には)。 ただし、それだと評価される度に値が変化してしまう可能性があり、想定外の動きをする恐れがある。 なのでcaseには定数がオススメ。

while文

条件分岐の基本がifなら、繰り返し処理の基本がwhile。

var n = 1;

while( n < 10) {
 alert(n);
 n++;
}

変数nが10未満なら(文ブロックの中の処理を)実行する。 という意味になる。 シンプル。

do/while文

条件がループの最後にあるwhile。

var n = 1;

do {
 alert(n);
} while(n++ < 10);

条件が最後にある、という事は、適合してもしなくても一度は処理が実行されるという事。 あと、このサンプルコードで言うとwhileは1〜9までのアラートだったのに対してdo/whileは1〜10までのアラートになった。

for文

これも繰り返し処理。条件や一周ごとの処理をまとめて冒頭に記述できる。 以下の2つのコードは同じ処理を行っている。

// while
var n = 1;
while( n < 10) {
 alert(n);
 n++;
}


// for
for(var n =1;  n < 10;  n++) {
 alert(n);
}

シンプルなコードなので差が判りにくいけど、複雑なコードになればなるほど違いが出てきそう。

for/in文

よくわからない。 後でまた読む。

ラベル文

switchの時に出てきた、hoge:ってやつ。 ラベルには予約語は使えない。 文にラベルを付けるとラベル名で参照できる。
ラベルは単体ではなく、何かと組み合わせて使う事が多いようだ。

break文

これもswitchで出てきた物。 ループやswitchを強制的に止める物なので、それ以外の場所では使えない。

break label;

とする事で、ラベルを指定できる。 ここではコロンは使わない事に注意。
単体のbreakはループやswitchの中でしか使えないが、ラベルを使うとその限りでは無い。 ただし別の条件があって、それは指定したラベルの文の中でしか使えないという物(直接の子でなくても孫でもOK)。
また、ちょっと複雑な使い方にこんな物がある。

labelhoge:
for(var n = 0;  n < 10;  n++) {
 labelfoo:
  for(var i = 0;  i < 10;  i++) {
   if(i > 3)break;
   if(n == 2)break labelfoo;
   if(n == 4)break labelhoge;
   document.write(i + " _ " + n);
  }
}
alert("END");

for文では、繰り返しの条件を n < 10; や i < 10; としているが、break文で強制的に止めている。 その結果、n < 10;などを待たずして、ループを終了させている。 これをもっと複雑な文で使用すると、ループの終了条件の記述を簡略化する事ができる(らしい)。
なお、ラベルを使わなければ最も内側のループ、whileに適用される。

continue文

breakは処理を終了するが、continueは次のループから処理を再開する。 breakはラベルを使う事で色んな文に使えたが、continueはラベルの有無に関わらずwhile、do/while、for、for/in の4つでしか使えない。 ラベルは単に入れ子が深くなった時に、どのレベル(深さ)を指定するかに使う。 また、それぞれの文により動作が異なる。 詳しくはリファレンスなどを参照。

return文

関数の中でしか使えない(関数の中なら孫でもループの中でも可)。 式を指定すると、関数の値として返される…らしいけどよくわからんちん。
式を指定せずに return; だけだと、単に関数の実行を中断する。

空文

;

とする事で、空の文を記述する事ができる。 配列を初期化する際に、中身の無いループを書く時に使う…かも。 その際はコメントを入れるのと親切。

/* 空文 */ ;

雑感

長い。 ちょっと最後の方で力尽きた感(´・ω・`) 例外処理とかそもそもの意味が解っていないので、その辺理解したらまた読む。
あと「返り値」とか「引数」とかが、未だに咀嚼しきれて無い感じ。

サイ本読書記 5章 式と演算子

式とは?

式と聞くと、算数みたいな 5+1=6 みたいなあれが思い浮かぶけど、基本はその方向性。 ただ、もうちょっと複雑だったり、逆にシンプルな物もある。
例えば、『i』という変数があったとして、i、それ単体でも『変数式』と呼ぶ。
あとは、これまで普通に書いてた、

var hoge = 5 + 1;

なんかも、もちろん式と呼ぶ。

演算子とは?

これも今まで普通に使っていた物。 ここで詳しく解説されるだけで、新しい用語って訳じゃない(ので怖くない)。
演算子で覚えておきたいのは、優先順位と結合性だと思った。 優先順位は、算数で言うところの足し算より掛け算が優先される、とかと同じ。( )で囲うと優先度が上がるのも同じ。
例を書くとこんなん。

var n = 1 + 5 * 10;
これは

var n = 1 + (5 * 10);
こう書いているのと同じ

var n = (1 + 5) * 10;
こうすれば、足し算が先になる


結合性は、その演算子が左右どちらに働くのか、って事。 つまり、

+演算子は左から右へ処理するので
1 + 2 + 3;
これは、

((1 + 2) + 3);
こう書いているのと同じ

=演算子は逆に右から左なので
var a = b = c = d;

これは、

var a = (b = (c = d));
こう書いているのと同じ

オペランド

オペランドも用語がここで出てくるからビビるけど、なんの事はない、単に演算対象の事。 つまり、var n = 1 + 5 なら、=と+が演算子でnと1と5がオペランド

以下略

サイ本ではこの後に色んな演算子の解説が続くんだけど、とりあえず今回の読書記の目的とは少しズレるので省略。
ざっくり読んで、後でリファレンス的に使うつもり。

でも相変わらずビット演算子は訳が解らない。 ビットの世界に入れてない…!

JSを勉強していて解りにくいと感じた所

素人から見た、プログラムを勉強する時に感じたメモ。

サイ本に載っているコードで、

last_char = s.charAt(s.length - 1)

という物があります。 これが解りにくい!
何が解りにくいって、どの単語が変数でどの単語がプロパティでどの単語がメソッドで…という区別が付かない。
ググレカスって言われたらそれまでだけど(実際ググったりリファレンス見たりサンプル書いてみたりしてるけど)、登場するコードの殆どがそういうコードだったら、それだけで死ぬほど時間がかかるし、正直な所やる気も削られていきます。

いや、自分で調べたりして解決する事が一番勉強になるっていうのは分かっているんですけど、まあ初心者に教える時には、そんな所を意識してくれるといいかもしれませんってな話でした。

サイ本読書記 4章 変数

「変数」というと、よく「入れ物」のように例えられてシンプルな内容に思えてましたが、その実中々に深い内容でした。

変数のデータ型

JSでは、JAVAやCのような、『変数のデータ型』が無い。 ので、何でも入れられる。 文字列と数値を連結すると、JSが空気を読んで適切に変換してくれる。 例えば、

var a = "aaa";
var b = 123;
var c = a + b;

alert(c);

こんなコードを実行すると、aaa123 という文字列がアラートで出る。

グローバル変数とローカル変数

変数を宣言するには二つのやり方があって、それはvar文を使うか使わないか。 var文を使わないと、必ずグローバル変数になる。 関数内部でvar文を使って宣言すると、ローカル変数になる。
グローバル変数とローカル変数の違いは、スコープの違い。

スコープとは

有効範囲の事。 ここでは変数の有効範囲。 マークアッパー的には名前空間の雰囲気を想像すると解りやすいかも(Wikiペを見ると厳密には違うと書いてあるけど、雰囲気を掴むとっかかりにはいいと思った)。

で、グローバル変数のスコープはプログラム全体。 ローカル変数のスコープは、その変数が宣言された関数の中だけ。 グローバル変数とローカル変数で名前がかぶっていたら、ローカル変数が優先される。 その時はグローバル変数は『隠れている』という状態になる。

スコープおかわり

スコープについてもう少し。
関数が入れ子になっている場合、それぞれのブロックが別々のスコープを持つような気がするけど、それは無い。 ちなみにブロックは、"{"から"}"までで一つのブロック。 CSSでも宣言ブロックと呼ぶのと同じ感覚。
つまり、関数の中か外か、が問題であって、関数の階層はここでは問題では無い。

スコープもういっちょ

スコープについて更にもう少し。
サイ本のサンプルコードでこんなのがあった。

var scope = "global";
function f(){
 alert(scope);
 var scope = "local";
 alert(scope); 
}
f();

これを実行すると global→local の順にalertが出そうだけど、実際は undefined→local の順。
これは何故かというと、一つ目のalertが実行される時点では、ローカル変数その物は存在しているけどvar文が実行されていないから。
上記のコードは、整理するとこうなる(これも引用)。

function f(){
 var scope;
 alert(scope);
 scope = "local";
 alert(scope);
}
f();

JSはブロックレベルのスコープを持っていない事から、ローカル変数の宣言は関数の最初の方にまとめて行っておいた方が可読性が上がる。

二つのundefined

一つは宣言自体がされていない変数。 これは変数をtypoしたりするとありがちw エラーになる。
もう一つが宣言はされているけど、中身がからっぽの変数。 エラーにはならない。

変数の中身

変数の中に入るのはデータ。 データにはデータ型がある。 このデータ型によって、変数の中に入る物が異なる。
具体例を挙げると、数値や論理値などの場合はデータその物が代入される。 配列やオブジェクトなどの場合はデータを参照する為のキーが代入される。 前者を基本型、後者を参照型と言う。
基本型はまあそのまんま。 参照型がちょっと解りにくいけど、例えば配列だとhoge[0]とかhoge[1]とかで配列の中身を示せる。 この0とか1とかが、データを参照する為のキーになる。
なお、文字列は特殊な扱いになる。 サイ本では

どちらの扱いでもかまわないとしておきます。

との事。

メモリの開放

プログラムという物は、使えば使っただけ、メモリを消費するらしい。 で、Cとかの言語だと、使ったメモリを開放するコードを書かないといけない。 ところがJSは、ガーベジコレクションという技術で、それを自動でやってくれる。

グローバル変数とグローバルオブジェクト

JavaScriptインタプリタが起動されると、コードを実行する前にグローバルオブジェクトの生成が行われる。 このグローバルオブジェクトのプロパティがグローバル変数。 つまり、グローバル変数を宣言するという事は、グローバルオブジェクトのプロパティを定義するという事になる。
トップレベルコード(関数の外のコード)でthisを使うと、グローバルオブジェクトを参照する。

クライアントサイドJSでは、windowオブジェクトがグローバルオブジェクトになる。 windowオブジェクトはwindowプロパティを使用して自身を参照できる。

ローカル変数とCallオブジェクト

対するローカル変数は、Callオブジェクトのプロパティとなる。
グローバル変数とローカル変数で違うオブジェクトのプロパティとする事で、変数名の上書きを防いでいる。

スコープチェーン

ここでもう一度、スコープについて。
スコープチェーンとは、オブジェクトを並べた物。 JSが変数を探す時なんかは、その並び順に沿って調べていく。

グローバル変数の場合は簡単。 グローバルオブジェクトだけなので、そこだけ探せばいい。
ローカル変数は、関数の入れ子がなければ、関数内→グローバルの順に探す。 関数の入れ子があれば、子関数→親関数→グローバルの順に探す。

サイ本読書記 3章 データ型と値

3章は色々と難しいので、飛ばし読みしますた。

リテラル

復習になるけど、リテラルとは定数の事。 プログラム部分じゃなくて、単なる文字列とか数値とかそういうの。

数値リテラル

数の事。 浮動小数点とかx進数とかわけわからないので、もう少しLvうpしたらあいるびーばっく。

文字列リテラル

いわゆる文字列。 JS内に記述する場合は、引用符か二重引用符でくくる。 "100" とすると、これは数値リテラルでなく文字列リテラルになる。 引用符の入れ子は、違う引用符で行う("ほげ'ふが'ほげ" みたいな)。
また、文字列としての『'』を入れたい場合なんかは、バックスラッシュエスケープが必要になる。

バックスラッシュエスケープ

CSSでもあったけど、\で直後の文字の特別な意味を無効にする、ってヤツ。 前項の『'』なら、\'となる。
\nと記述すると、改行になる。 このような特別な役割を持つ物をエスケープシーケンスと言う。 \uxxxx でUnicode文字を書けたり、色々ある。

関数

処理をまとめた物。
ある処理を何度も使うプログラムがあったとして、それを何度も書くのは無駄だし面倒。 そんな時に関数として一度書いておけば、後はそれを実行するだけでいい。
JSにはデフォルトでいくつもの関数が定義されている。

関数の引数

関数には引数を渡す事ができる。 引数は、関数を実行する時のオプションみたいな感じ? 例えば、料理におけるパスタ関数を実行する時、「引数トマトソース」か「引数クリームソース」かによって違う味になったりする。 みたいな。
複数の引数がある場合には、カンマで区切る。 第一引数、第二引数、とか呼ぶ(並び順によって意味が違ったりするのでサンプルを参考にする時は注意)。

関数もデータ型

実は、関数もデータ型。 つまりデータ。 データという事は、操作ができるという事。
これはどういう事かと言うと、関数自体を引数にできたり、変数に関数を代入できたりする。 つまり、文字列なんかと同じような扱い方ができる。 これにより、コードを書くときの柔軟性、自由度が高まる(どうやらできない言語も多いらしい)。

メソッドの正体

kotarokさんにツッコまれた件が、ここでようやく理解できた。
オブジェクトのプロパティに代入された関数を、オブジェクトのメソッドと呼ぶ。 つまり、言うなれば関数とメソッドは同じ物。

オブジェクト

オブジェクトは関数や変数をまとめた物。 で、集められたそれぞれのデータ値がプロパティ。
つまりここで一度まとめると、

変数
データ値を代入した物
関数
処理をまとめた物
オブジェクト
関数や変数をまとめた物
プロパティ
オブジェクトに格納されている値。 オブジェクト版変数
メソッド
プロパティに格納されている関数

となる。

オブジェクトのプロパティやメソッドには、ドットで参照する。
document.write("hoge"); は、documentオブジェクトに格納されているwrite()メソッドを、文字列hogeを引数にして実行している。
image.width は、imageオブジェクトのwidthプロパティを参照、となる。

オブジェクトの生成

コンストラクタ関数を使う。 コンストラクタ関数とは新しいオブジェクトを作る為の関数。

var obj = new Object(); //新しいオブジェクト、objを生成

obj.a = 100; //プロパティaに数値100を代入
obj.b = 99; //プロパティbに数値99を代入

alert(obj.a); //objオブジェクトのプロパティaを引数にして、alertメソッド実行

こんな感じ。
他の書き方もあって、

var obj = { a:100 , b:99 };
alert(obj.a);

でも同じ結果になる。

ビルトインオブジェクト

JSにあらかじめ用意されているオブジェクトがいくつかある。 それがビルトインオブジェクト。
例えば、どうしてfunction hoge(){}で関数を定義できるのかというと、functionオブジェクトで定義されているから。
他にも配列(Array)や日付(Date)、正規表現RegExp)などが用意されている。

配列

基本は省略。
配列には、他の配列や関数やオブジェクトも入れられる。 また、配列に格納されている要素は、バラバラのデータ型でもよい。