HTML/CSS/JavaScriptの練習 実践 雑多な記録2 基本2

https://seesaawiki.jp/lifewithslackarmzaurus14_1/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 の続き。
練習場
https://oldcygwin.web.fc2.com/
ログインしてからftp
https://web.fc2.com/

practice200.html~practice299.html:
JavaScriptの練習(ライブラリ使う編)。どういうライブラリがあるのか、サラっと見てみるかな。
ajax、ext、jquery、node、vue、nuxt。
javascript ライブラリ カレンダー、でググった。
https://ajike.github.io/clndr-javascript/
(jQuery.js、そのうちやってみよう)
https://ja.wikipedia.org/wiki/JavaScript%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA
JavaScriptライブラリ – Wikipedia
\
node.jsの実行環境がspitzではまだできてないため、https://seesaawiki.jp/lifewithslackarmzaurus14_1/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20local%20Web%a5%b5%a1%bc%a5%d0%20Node%2ejs
できるまでは、PC/AT機で実行する。https://seesaawiki.jp/lifewithslackarmzaurus_14_2/d/32bit%20PC/AT%b5%a1%20%a4%ce%b4%c4%b6%ad
サンプルはFC2にも置いておく。
実行する時はFC2からDLしてきて以下の様にする。
Slack-14.2$ node practice200.js
\
Slack-14.2$ sudo npm install -g xmlhttprequest
(必要なかった。使わない。PC/AT機にもhttpd入れるかnodeで実現しなければならなくなるため)
practice201.html~practice202.html:(参考書籍2)
\
practice203.html:socket.ioとexpressを使ったリアルタイムチャットアプリ。(参考書籍3)
practice203.js :同上。
Slack-14.2$ mkdir chat-example; cd chat-example
nodejs-v10.24.1で実行:
Slack-14.2$ npm init -y
Slack-14.2$ npm install express socket.io –save
npm ERR! code Z_DATA_ERROR
npm ERR! errno -3
npm ERR! zlib: invalid distance too far back
https://stackoverflow.com/questions/60288671/npm-install-on-synology-gives-zlib-invalid-distance-error
(zlibのVerを上げてみるか)
https://seesaawiki.jp/lifewithslackarmzaurus_14_2/d/zlib%a4%f2%be%e5%a4%b2%a4%eb
Slack-14.2$ npm install express socket.io –save
\npm notice created a lockfile as package-lock.json. You should commit this file.
\npm WARN chat-example@1.0.0 No description
\npm WARN chat-example@1.0.0 No repository field.
\+ socket.io@4.2.0
\+ express@4.17.1
\added 72 packages from 98 contributors and audited 72 packages in 41.574s
\found 0 vulnerabilities
\ â New major version of npm available! 6.14.12 -> 7.23.0
\ â Changelog: https://github.com/npm/cli/releases/tag/v7.23.0
\ â Run npm install -g npm to update!
(今回はupdateやらない。後で調べてやってみる)
https://www.softel.co.jp/blogs/tech/archives/6487
\
Slack-14.2$ sudo ifconfig lo 127.0.0.1 netmask 255.0.0.0
Slack-14.2$ mv -i ../practice203.* .
Slack-14.2$ ln -s practice203.html index.html
Slack-14.2$ node practice203.jp
firefoxを2個起動してlocalhost:3000にアクセス。
入力欄にテキトーに書くともう一方のブラウザにも表示された。
(当初コードを見ても分からなかった。今なら少し分かるが、もう少し経ったらまた見る)(2022.06)
参考:https://shirakawa.weblike.jp/blog-page/2026/01/27…
続きはこっちでやる
https://shirakawa.weblike.jp/blog-page/2022/06/20…

practice300.html~practice399.html:
JavaScriptの練習(フレームワーク編)。フレームワークはこっちで練習する。
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%b3
Reactのサンプルプロジェクトを作ってみる:
なんだかAngularよりReactを使ってる場合の方が多くないか?。情報検索中。

参考書籍:
JavaScriptハンドブック 1998.10
https://www.amazon.co.jp/JavaScript-Handbook-4th-%
フロントエンドエンジニア養成読本 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

参考情報:
npmのuninstallコマンドを忘れがちなのでメモ – Qiita
https://qiita.com/mamosan/items/6f1cf71ccd82216fe25b
npm よく使うコマンドまとめ – Qiita
https://qiita.com/standard-software/items/2ac49a409688733c90e7
xmlhttprequest send、でググった:
https://qiita.com/sirone/items/412b2a171dccb11e1bb6
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
XMLHttpRequest() node、でググった:
http://itemy.net/?p=386
javascript JSONP通信、でググった:
https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0011
JSON(JavaScript Object Notation)はJavaScriptから生まれたデータ記述フォーマットで,真偽値,数値,文字列,null値の組み合わせを持ったハッシュか配列かその両方で構成されます。
https://sowel.co.jp/PDF_file/JavaScript/JS_JSONP.pdf
Q. 今はあまり使わないというのは何故ですか?
最初に書いた XMLHttpRequest がバージョンアップしてクロスドメイン通信の仕組みが入ったためです。
https://qiita.com/stkdev/items/f3e6cae58ab73faee502
\
Reactをはじめる
https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
React はフレームワークではなく、ウェブに限定されるものでもありません。他のライブラリーと共に使用して、特定の環境にレンダリングしますます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です