JavaScript本格入門を読む・1

本の感想

積ん読になっていたJavaScript本格入門を読むぞ。

JavaScript本格入門　?モダンスタイルによる基礎からAjax・ｊQueryまで

JavaScript本格入門　?モダンスタイルによる基礎からAjax・ｊQueryまで

 

 前から人に勧められていたので買ってはいたが、全然読んでませんでした。

が、しかしモチベーションがびっくりするほどないのでせめてブログを書くぜ。

開発環境（というほど大それたものではない）

会社ではWindowsなのでTerapadを使っていたが、自宅はMacしかないので適当にググっって以下のエディタを導入。

CotEditor -Text Editor for OS X

実行結果はgoogleChromeのJavaScriptコンソールで確認することにした。

これでバッチリだろ（投げやり）

2−1.JavaScriptの基本的な記法

  <html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charaset="utf-8" />
<title>hello</title>
</head>
<body>
<pre>
<script type="text/javascript">
<!--
document.writeln("Hello,World");
//-->
</script>
<noscript>JavaScriptが利用できないです</noscript>
</pre>
</body>
<html>

 基本中の基本から。

 <a href="JavaScript:window.alert('hello');">ダイアログを表示</a>

2−2.変数

msg = 'こんにちわ、JavaScript! ';
document.writeln(msg);

このへんはまぁ余裕だな。

2−3.データ型

var ary = ['one',['two','second'],'three'];
document.writeln(ary[0]);
document.writeln(ary[1][1]);
var obj = {x:1,y:2,z:3};
document.writeln(obj.x);
document.writeln(obj['x']);

 オブジェクトリテラル、上と下の違い（ドット演算子とブラケット構文）がわからないのだが、ソースが見やすくなるということなのかしら。

2−4.演算子

var x = 1;
var y = x;
x = 2;
document.writeln(y);
var ary1 = [0,1,2]
var ary2 = ary1;
ary1[0] = 5;
document.writeln(ary2);

 これ理解するまでちょっと時間かかってしまった。

サンプルコードなのに何の為にこれやってんのかわからん、と思ってしまったぜ・・・

そう、JavaScriptを理解するためでした。

var ary =['red','yellow','blue'];
document.writeln(delete ary[0]);
document.writeln(ary);

var obj = {x:1,y:2};
document.writeln(delete obj.x);
document.writeln(obj.x);

var obj2 = {x:obj,y:2};
document.writeln(delete obj2.x);
document.writeln(obj);

 これ最後のやつ[object Object]を返すんだけど、これってどういうことなのー

objectエラーってことなのかな。1つめと2つめで微妙に大文字と小文字なのも何故・・

document.writeln(typeof obj);

 次のtypeof演算子でわかるかなと思って書いてみたけど、objectって帰ってきてそりゃそうだな、と。

と、少々モヤりつつ演算子終了。

2−5.制御命令

var x =30;
if(x >= 10){
 if(x >=20){
document.writeln('変数xは20以上です。');
}
} else {
document.writeln('変数xは10未満です');
}

 これ、本の説明（分岐図）があるからわかった！これだけ見てどういうことかわかるのは難しそう・・・

var rank ='B';
switch(rank){
case'A':
    document.writeln('Aランクです');
    break;
case'B':
    document.writeln('Bランクです');
    break;
case'C':
    document.writeln('Cランクです');
    break;
default :
    document.writeln('ランク外です');
}

breakは現在のブロックから処理を脱出するための制御命令（メモ）

 swich文が出てくると、かっこいい感じするなぁ。

var x = 8;
while(x < 10){
document.writeln('xの値は' +x);
x++;
}

var x =8;
do{
document.writeln('xの値は' +x);
x++;
} while(x<10);

 x++ってどうして記述するのかわからないが、これがないと無限ループしてしまうので注意する。

for(var x= 8; x<10; x++){
document.writeln('xの値は' +x);
}

 for構文ですっきり。

中途半端だけど今日はここまでにしよう。明日はfor…inループからです。

 

 

fukken先生がコメントで教えてくれたので、ありがたく学びます！

おっすおっす。

おっすおっす。

> ドット演算子とブラケット構文
機能的には、ブラケットはメンバー名に変数を使う事ができるのと、変数名として使えない文字列（"123abc"など）を使う事ができる。
印象論だと、ドット構文はtheUser.ageやtheUser.sexといった「属性」を示すイメージがあり、ブラケット構文だとvidos["sm9"]のように「文字列をキーに値を格納する」イメージがある。
日本語の文章と同じで、意味が通じる（正しく動く）コードを書くのは前提として、その中で何通りかの書き方を選べる場合、読みやすい方法、意図が伝わりやすい方法を選ぶ。

本だと「最低限の記法をきちんとおさえておいてください」とだけだったので区別がよくわからなった。なるほどー

> これ最後のやつ[object Object]を返すんだけど、これってどういうことなのー
オブジェクトを文字列に変換すると、そうなる事がある（どうなるかは環境、ブラウザによる）。
document.writeln()は本当は文字列を出力するためのものなので、そうでない物を突っ込むと適当に変換される。気にくわないならプログラマが自分で変換処理を書く必要がある。console.debug()等はいい感じに整形してくれる。

で、その例の場合、obj2.xにobjを代入した上でobj2.xをdeleteしたわけだけど、objの方は消えずにそのまま残っている、というのがポイント。
var obj = {x:1,y:2};
var obj2 = {x:obj,y:2};
を実行した後に、例えば
obj.y = 100;
などとすると、objは{x:1, y:100}になるんだけど、同時にobj2.xも{x:1, y:100}になる（当然、obj2.xを更新するとobjも更新される）。objとobj2.xは「同じ物」を指してるわけ。しかし、obj2.xを deleteしてもobjは消えない。
JavaScriptにおいて、
obj2.x = obj;
という操作は、「objにobj2.xという別名を与える」みたいな意味になる（専門用語で「参照」という）。
deleteは、こうして与えられた別名（参照）を削除するだけなので、元の変数に影響を及ぼさない。

ただし、こうなるのはオブジェクトを代入する場合のみで、文字列や数値を代入する場合は、値は複製される。
var hoge = 123;
var fuga = hoge;
hoge = 456;
console.log(fuga); // 123

 console.debug、ちぃ覚えた。ってことはchromeのエラーなのか！

最後のconsole.logもわからなかったのでググったら、ログを吐いてくれるのか。これは代入とか参照したときに元のやつがわかって良さそう（ちょうど今日はArrayオブジェクトをやったので…）

すごくわかりやすい！！

> x++ってどうして記述するのかわからないが
x++は、x=x+1;の意味。インクリメント演算子と呼ばれる。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators
必要な理由は、while()はxの値を増やしたりしないから。xの値を更新しない限り、while()の条件節はずっと同じ判定になるので、常に成立する（無限ループ）か、一度も成立しない（実行されない）か、どちらかになる。
forの例だとfor節の三番目が毎回実行されるので無限ループにならない（forでも三番目を空にしたりすると無限ループにする事は可能）。

教えてもらわないとx++がわからないまま進むところだった。

と思ったら、インクリメント演算子とデクリメント演算子、解説あったー

読み飛ばしていたようだ。

そういうことか！無限ループにしてみましょう、とあったけど「ほほう・・」と思って終わってしまったぜ。

丁寧な解説、本当にありがとう！！