https://shirakawa.weblike.jp/blog-page/2021/04/29… の続き。
練習場
https://oldcygwin.web.fc2.com/
ログインしてからftp
https://web.fc2.com/

practice100.html～practice199.html：
JavaScriptの練習(基本編、ライブラリ使わない編)。
practice101.html～practice109.html：(参考書籍１の2章)
practice111.html：console.log()はブラウザでは動かないらしい。consoleだから?(参考書籍２の4章リスト18) -> 後から分かったDebugコンソール。というかFirefox-3にはDebugコンソールないかも。(2022.06)
practice113.js ：nodeで実行すると動く。xterm上だと日本語は文字化けするが。
practice113.ts ：TypeScriptで書いてみる。
Slack-14.2$ mkdir practice113; cd practice113
Slack-14.2$ npm init -y
Slack-14.2$ npm install –save-dev typescript @types/node@10
[………………] / rollbackFailedOptional: verb npm-session xxxxxxxxxxxxxxxx
https://seesaawiki.jp/lifewithslackarmzaurus_14_2/d/npm%20install%20%a5%a8%a5%e9%a1%bc
(npmをVerUpしたら直った。参考にした2019.08のページのVerと同じnpmで今やったら失敗するって
\どれだけ変化(進化?)激しいんだよ)
Slack-14.2$ npx tsc –init
Slack-14.2$ npm install –save-dev ts-node (直接実行したい時のために入れておく)
npm install –save-dev ts-node
npm WARN EBADENGINE Unsupported engine { package: ‘ts-node@10.2.1’,
npm WARN EBADENGINE required: { node: ‘>=12.0.0’ },
npm WARN EBADENGINE current: { node: ‘v10.24.1’, npm: ‘7.24.0’ } }
npm WARN EBADENGINE Unsupported engine { package: ‘@cspotcode/source-map-support@0.6.1’,
npm WARN EBADENGINE required: { node: ‘>=12’ },
npm WARN EBADENGINE current: { node: ‘v10.24.1’, npm: ‘7.24.0’ } }
npm WARN EBADENGINE Unsupported engine { package: ‘@cspotcode/source-map-consumer@0.8.0’,
npm WARN EBADENGINE required: { node: ‘>= 12’ },
npm WARN EBADENGINE current: { node: ‘v10.24.1’, npm: ‘7.24.0’ } }
npm notice Beginning October 4, 2021, all connections to the npm registry – including for package installation – must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
added 14 packages, and audited 17 packages in 13s
found 0 vulnerabilities
(ts-nodeは動かないかも。今は保留。-> 後にnode-v12を使うことにした)
Slack-14.2$ elvis tsconfig.json (以下を参考にとりあえず各コメントアウトを外すだけにした)
https://qiita.com/notakaos/items/3bbd2293e2ff286d9f49
Slack-14.2$ npx tsc –help
\ tsc app.ts util.ts
\ Ignoring tsconfig.json, compiles the specified files with default compiler options.
Slack-14.2$ npx tsc practice113.ts (Makefileもどきを書くのがメンドクサくなってとりあえず)
(practice113.jsが生成されてnodeで実行できた)
Slack-14.2$ npx ts-node practice113.ts
(こっちも動いた。node-v10でも簡単な処理は動かせる?)
practice114.html～practice116.html：(参考書籍１の2章)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for…in
for…in はオブジェクトのプロパティを反復するために作られたものであり、配列での使用は推奨されず、
practice117.html～practice123.html：(参考書籍１の2章)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Working_with_Objects
以下のようにして、myCar という名前のオブジェクトを作成し、make、model、year という名前のプロパティを付与することができます
var myCar = new Object();
myCar.make = ‘Ford’;
myCar.model = ‘Mustang’;
myCar.year = 1969;
ページ内で認識するオブジェクト名 = new オブジェクト名();(参考書籍１)
ページ内で認識するオブジェクト名 = new オブジェクト名(引数); //定義済み(コンストラクタ)とした場合
(これは混乱するかも。クラスではないんだなあ) -> X (C++でいうクラスと同じらしい?)
(コンストラクタ関数とは、(C++で言うところの)オブジェクトを作る関数ということになるが、クラス
なのか?これ)
オブジェクトの生成はページ内で複数使用される可能性のあるオブジェクトだけ行わなければなりません。逆にページ内に１つしかないようなnavigator、historyなどはオブジェクトの生成を行わなくとも使用することができます。(参考書籍１)
prototype プロパティを使用すると、定義済みのオブジェクト型に対してプロパティを追加することができます。このプロパティはオブジェクトの 1 つのインスタンスだけではなく、指定された型のすべてのオブジェクトで共有されます。
(TypeScriptではオブジェクト型に対してプロパティの追加や削除はできない(参考書籍４)。C++に同じ)
インスタンスの作り方 (TypeScript)(参考書籍４)
変数 = new クラス名(引数);
practice124.html～practice132.html：(参考書籍２)
Element https://developer.mozilla.org/ja/docs/Web/API/Element
events https://developer.mozilla.org/ja/docs/Web/Events#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E4%B8%80%E8%A6%A7 https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events#conclusion
click https://developer.mozilla.org/ja/docs/Web/API/Element/click_event
バブリングとキャプチャリング https://ja.javascript.info/bubbling-and-capturing
resize https://developer.mozilla.org/ja/docs/Web/API/Window/resize_event
practice133.html：(参考書籍１)
practice134.html～practice141.html：(参考書籍４)
Slack-14.2$ npx tsc –target es6 practice137.ts
(–target_es6の代わりに設定fileを書きかえてもいいと思うけど)
続きはこっちでやる
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf

practice200.html～practice299.html：
JavaScriptの練習(応用編、ライブラリ使う編)。応用とライブラリはこっちで練習する。
https://seesaawiki.jp/lifewithslackarmzaurus_14_2/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%a3%b2

practice300.html～practice399.html：
JavaScriptの練習(フレームワーク編)。フレームワークはこっちで練習する。
https://seesaawiki.jp/lifewithslackarmzaurus_14_2/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%a3%b3

practice400.html～practice499.html：
LowCode/NoCodeの練習やその改造や連携。こっちで練習する。
https://seesaawiki.jp/lifewithslackarmzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%a3%b4

参考書籍：
JavaScriptハンドブック 1998.10, 2003.10(4th)
https://honto.jp/netstore/pd-book_02367600.html
(標準ビルトインとブラウザオブジェクトが無分別?。古すぎて?DOMのことが書いてない?。4th Edition には書いてある。最初はみな混ざっていて区別していなかった?)
DOMを利用するには、HTMLを構造的に記述する必要があります。ここでの「構造的である」とは、HTMLの要素を入れ子にしないということを意味しています。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects (JSハンドブックのAPPENDIXのオブジェクト一覧の最新)
フロントエンドエンジニア養成読本 2014.08
https://gihyo.jp/book/2014/978-4-7741-6578-3
Software Design 2016年10月号 Webサーバはなぜ動くのか？ HTTP，CGI，サーブレット，Node.js，Railsを一挙解説
https://gihyo.jp/magazine/SD/archive/2016/201610
\
Angular超入門 2019.06
https://www.shuwasystem.co.jp/book/9784798057736.html
(TypeScriptとJavaScriptの違いも説明している)

参考情報：
https://rfs.jp/sb/javascript/02js/biltinobj.html
JavaScriptには、標準ビルトインオブジェクト、DOMオブジェクト、ブラウザオブジェクトの3つの組み込みオブジェクトがあります。
ブラウザオブジェクトについて[Windowオブジェクト]
https://noumenon-th.net/programming/2017/03/16/browserobject/
特にWindowオブジェクトはブラウザオブジェクトの最上位のオブジェクトで、グローバルオブジェクトとして存在します。よって、例えばDocumentオブジェクトやLocationオブジェクトは、Windowオブジェクトのプロパティという位置付けになります。またグローバル変数もWindowオブジェクトのプロパティです。
それぞれオブジェクト名の先頭を小文字にしてプロパティとして記述していきます。windowはwindowプロパティであり、自身のWindowオブジェクトを参照しています。documentもプロパティとして記述されていますが、Documentオブジェクトを参照しています。
(基本は古本から変わってなさそう。node.jsではwindowではなくglobal)
DOM の紹介 – Web API | MDN と Chrome Devtools
https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction
https://developer.chrome.com/docs/devtools/dom/
Object
https://www.tohoho-web.com/js/basic.htm#object
当初、 JavaScript と DOM は密接に絡み合っていましたが、最終的には別々の存在に進化しました。ページの内容は DOM に格納されており、 JavaScript を介してアクセスしたり操作したりすることができるので、この近似式を書くことができます。
API = DOM + JavaScript
DOM：https://www.tohoho-web.com/js/dom.htm
JSのDocumentオブジェクト：https://www.tohoho-web.com/js/document.htm
DOM は特定のプログラミング言語に依存しないように設計されており、文書の構造表現を単一の一貫した API から利用できるようになっています。このリファレンス文書では JavaScript のみに焦点を当てていますが、この Python の例が示すように、DOM の実装はどのような言語にも対応できるようになっています。
(そうなったらさすがにPythonも練習するかな)
\
TypeScriptとJavaScriptの違いとTypeScriptの特徴
https://qiita.com/mzmz__02/items/f7e4f1cbba4a9cf008ae
https://japan.zdnet.com/article/35136790/
https://ja.wikipedia.org/wiki/TypeScript
(CやC++に近づいた印象。こっち学習した方が早そうな。洗練されてる感じもするし)
https://www.sejuku.net/blog/25328
prototypeを使って定義したメソッドは、インスタンスが生成されるたびにコピーされることはありません。
(new/prototype/overloadとECMAScript2015(ES6)以降のクラス構文も説明してる)
https://techacademy.jp/magazine/14872
varは関数スコープ、let, constはブロックスコープ
node.js tsc、でググった：
https://qiita.com/notakaos/items/3bbd2293e2ff286d9f49
https://nodejs.keicode.com/typescript/create-ts-project.php
https://qiita.com/zaburo/items/0d47b3c8588bb3f96353
https://typescript-jp.gitbook.io/deep-dive/nodejs
仕事ですぐに使えるTypeScript
https://future-architect.github.io/typescript-guide/typescript-guide.pdf
文法チェッカは要るなぁ：
https://jshint.com/
firefox console.log 表示されない、でググった：
https://qiita.com/keniooi/items/762362188dc1cd8ee141
FireFoxで開発ツールを表示するなら F12キーです。
javascript document.queryselector、でググった：
https://agohack.com/how-to-use-js-queryselector/
javascript innerhtml、でググった：
https://qiita.com/mzmz__02/items/7bcbce347bc3c5d64b93
TypeScript getter、でググった：
https://qiita.com/kuropp/items/ebefeec110ea6a2beb62
typescript version 1 と version 2.1 違い、でググった：
TypeScriptのバージョンごと変更点まとめ
https://scrapbox.io/ponpoko04-blog/TypeScript%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%94%E3%81%A8%E5%A4%89%E6%9B%B4%E7%82%B9%E3%81%BE%E3%81%A8%E3%82%81