経緯・目的
- JSを避け続けてきたので、JS力が激引く
- uhyoさんの「JavaScript初心者から中級者になろう」がとてもクオリティ高いので、全部読もうと思った
基礎編
基礎1
基礎第一回 — JavaScript初級者から中級者になろう — uhyohyo.net
script type="text/javascript"
- typeをこのように書くと正統的なんだね
- JSで単語のことはトークンというらしい
100のようにプログラム中で数値を表す部分は数値リテラルといいます。
- 正確に数値リテラルと言う言葉を、私はこの記事を読む前は言うことができなさそうだった
基礎2
基礎第二回 — JavaScript初級者から中級者になろう — uhyohyo.net
変数名の先頭（最初の文字）が数字であってはいけません。
- 多分そうだろうとは思ってた
- 日本語の変数名も実はつけられるらしい(よくない)
- ◎演算子がオペランドだと思ってた
a=5;の場合、演算子=に値を返す以外に、変数に値を代入するという効果があったので意味のある文になっています。このように、式を返す以外の処理を副作用といいます。
実は右から順番に計算していくものもあります。代入演算子がそれです。そのため、次のようなことができます。 a = b = c = d = 3
- 右からはしらなかった jsにはこの書き方多いよね
基礎3
基礎第三回 — JavaScript初級者から中級者になろう — uhyohyo.net
基礎4
基礎第四回 — JavaScript初級者から中級者になろう — uhyohyo.net
ちなみに、関数定義はどこに書いておいても構いません。関数を使うより後でも構いません。
- 知らなかった
- 関数中で var をつけなかったらグローバル変数になって上書きしちゃうのね
- var でローカル変数
関数ではないところでvarを使うことも可能ですが、意味はありません。ただ、varをつけると変数を新しく作っているのだということが一目瞭然なので、この処理ではこういう新しいグローバル変数を作って使っていますよ、ということを（プログラムを見る人に）示す効果があります。 ですから、プログラムをわかりやすくするためにもできるだけつけておきましょう。
基礎5
基礎第五回 — JavaScript初級者から中級者になろう — uhyohyo.net
- ブラウザの開発者ツールで、既存のhtmlを編集で全部消して、ここにあるhtml を貼り付ければ、htmlもカンタンに試せるね
- もちろん、JSはコンソールで試せるね
演算子が前にあると足した後の値を返し、後にあると足す前の値を返します。
- 逆だと思ってた
基礎6
基礎第六回 — JavaScript初級者から中級者になろう — uhyohyo.net
- 関数を使わずに、document.name でも要素を取れたんだね(よくないやり方)
- document.forms["フォーム名"].elements["エレメント名"].value という書き方もあったのね (よくなさそう)
- var aa = ["aaa","bbb"];
- 配列リテラルという
- for of 文
- いつの間にか使っていた
第一章 オブジェクト
1-1
一章第一回 オブジェクトとは — JavaScript初級者から中級者になろう — uhyohyo.net
- 知らないことが続々とあった
実は配列はオブジェクトの一種
オブジェクトでは、ひとつひとつの値が番号ではなく名前を持っています
新しいプロパティを作るときであっても、新しく「変数」を作っているわけではないので、代入するときに「var」はつけません。
プロパティの表し方には別の書き方があります。次のような書き方です。。。オブジェクト名["プロパティ名"] プロパティ名が変数に入っている場合などに役立ちます。
数字だけの名前のプロパティは、arr.0の形で書けません（文法エラーになります）。arr[0]の形でのみ参照できます。
arr[0] 文字列が必要な場面で数値が渡されたことになるので、数値は文字列に変換されます。すなわち、arr[0]とはarr["0"]と同じ意味となります。
- arr.length の .length もプロパティ
1-2
一章第二回 オブジェクトの実体 — JavaScript初級者から中級者になろう — uhyohyo.net
- var obj = {}; とも書ける
プロパティ名が"で囲まれていますが、実は囲んでも囲まなくても構いません。
この書き方でオブジェクトを表現する方法をオブジェクトリテラルといいます
- ほとんどこの書き方で書かれるらしい
オブジェクトは作成したあとから変更可能(mutable)
実は、この場合、変数aと変数bに入っているのは同じオブジェクトです
- オブジェクトは参照わたしらしい
- うーん、なるほど(数値型の) 3と5は別物なのか…
- var a = {"aaa": 10};var b = {"aaa": 10}; なら別のオブジェクトになる
オブジェクト以外の値のことをプリミティブ（プリミティブ値）といいます
- Javaでも聞いた覚え
1-3
一章第三回 配列のコピー — JavaScript初級者から中級者になろう — uhyohyo.net
- 配列もそのままだと変更可能(連動して変わってしまう)になっちゃうよ
ちなみに、関数呼び出しのときに引数としてオブジェクトを渡した場合も、オブジェクトはコピーされません。渡されたのと同じオブジェクトが引数変数に入ります。
- …で、こういうユーザがいちいちコピー関数を作る方法でなく、便利なコピー関数があるんだよね？
今回やったような配列のコピーは、ES2015という比較的新しい記法で次のように書けます。 var b = [...a];
- あった
1-4
一章第四回 オブジェクトと関数 — JavaScript初級者から中級者になろう — uhyohyo.net
関数もオブジェクト
javascriptでは全てのものがオブジェクトかプリミティブ
関数定義というのは、新しい関数を作り、それを変数に入れる作業
- 関数名は関数が入った変数名だったんだなぁ
- function aaa(){ alert("test");} が aaa に入ってる
プロパティのうち、関数であるもののことをメソッドといいます
- var a = {}; a.abc = test; a.abc(); function test(){ alert("test"); }
- この書き方でメソッドにナルンだね
- var aaa = function (){ alert("test"); };
- こっちの方が見慣れてる (関数式)
これを関数リテラルと呼ぶことも可能かもしれませんが、そう呼ばれているのはあまり見ません。
あくまで代入文なので、function(){ ? }の後には「;」が付いている
var a = { abc: function(){ alert("abc"); }, aaa: function(){ alert("aaa"); } };
- こういう書き方もできるのね
- var a = { abc(){ alert("abc"); }, aaa(){ alert("aaa"); } };
- ES2015にはこういうのもあるらしい (わかりにくそう)
- というか、やっぱり書き方多いよね JS
- 関数を返す関数でa()(); とか (a())(); とか書けるらしい (実践でもたまに出てきそう)
- (function(){ alert("test"); })(); 無名関数と同じ形だから、よく出てくるのね
- 関数式は 関数を返すんだなぁ
感想
- 第一章は普通にはっきりと分かってないことが多かった
- 基礎編も知らなかったことが何個かあった
時間まとめ
- 2021/09/30 18:36 に読み始めた
- 2021/10/03 17:35までに読んだ
- 40 + 60 + 17 = 117分かかってる
- 一章につき 60分かな？
- 一節 10分程度？
- 18章あるので、18時間かかりそう
- 一章につき 60分かな？
- このブログを書くのに 24分かかった
- 累計 141分
