IT 研修 JavaScript

この研修では Google Classroom を使用する予定です。 クラスコードは研修中にお知らせします。

配布プリント

• 配布プリント 第 1 章「JavaScript」
• 配布プリント 第 2 章「API とライブラリー」

配布していない資料

• p5.js について
  p5js.org, p5js Web Editor (Version を2.0.3 に変更するのを忘れないこと)

ダウンロード

• Visual Studio Code
  さらに拡張として “ESLint”, “Live Server”, “Node.js Modules Intellisense” をインストールしてください。
• Node.js
  第 2 章で使用予定です。

サンプルプログラムと参考リンク

• § 1.4
  alert1.html (js), alert2.html (js), console.html (js),
  問 解答テンプレート 1. html, js
• § 1.6
  let.html (js), const.html (js), arithmetic.html (js), varSample1.html (js), varSample2.html (js),
  問 解答テンプレート 1. html, js, 2. html, js
• § 1.7
  hello.html, domSample.html, cssSample.html, querySelector.html, querySelector2.html,
  MDN: CSS セレクター, Document, HTMLInputElement, HTMLElement, Element, Node, CSS プロパティリファレンス
  問 解答テンプレート 1. html (js)
• § 1.8
  cube.js,
  MDN: this, アロー関数
  問 解答テンプレート 1. html, js
• § 1.9
  onclick.html, addEventListener.html, input.html (js)（プリント不掲載）, factorial.html, script.html (js), requestAnimationFrame.html (js), templateLiteral.html (js), requestAnimationFrame2.html (js),
  MDN: Date
  問 解答テンプレート 1. html, js 2. html, js 3. html, js 4. html, js
• § 1.10
  if.html (js), conditional.html (js), for.html (js),
  問 解答テンプレート 1-1. html, js 1-2. html, js 2. html, js 3. html, js 4. html, js
• § 1.11
  forOf.html (js), array.html (js), array2d.html (js), higherOrderFunction.html (js), destructuring.html (js), spreadSyntax.html (js),
  MDN: 配列, スプレッド構文, 残余引数
  問 解答テンプレート 1. html, js 2. html, js 5. html, js 6. html, js 7. html, js
• § 1.12
  this.html (js),
  問 解答テンプレート 1. html, js
• § 1.13
  regexp.html (js),
  MDN: 正規表現, String, 便利な文字列メソッド
  問 解答テンプレート 1. html, js
• § 1.14
  generator.html (js), logicTurtle.html (js)（プリント不掲載）, primes.html (js), queens.html (js),
  MDN: function*
  問 解答テンプレート 1. html, js 2. html, js

第 2 章

• § 2.1
  MDN: Canvas API,
  p5js.org, p5.js について,
  canvas.html (js),
  MDN: JSON, Base64, データ URL,
  bmp.html (js),
  bitint.html (js)
  MDN: Fetch, Polyfill, CORS, FormData, URLSearchParams, Promise,
  ajax.html (js), async.html (js), サーバー側プログラム (Node.js) (「node findColor.js」で実行。)
  MDN: WebSocket,
  ws.html, (js), サーバー側プログラム (Node.js) （保存したディレクトリーで「npm init -y」「npm install -D ws」しておく。 「node wsserver.js」で実行。）,
  MDN: Web Storage API,
  webstorage.html, webstorage2.html (js)
  MDN: File, FileReader,
  file.html (js)
  MDN: Worker, Service Worker (MDN)
  worker.html, workerCreate.js, worker.js,
  MDN: DeviceMotion, DeviceOrientation, Drag and Drop, Touch,
  問 解答テンプレート 1. html (js), 2. html (js), 3. html (js), 4-1. html (js), 4-2. html (js), 5. html (js), 6. graphSample.txt html (js),
• § 2.2
  jQuery, SVG.js, Vue.js, React, Electron,
• § 2.3
  Node.js, Deno, Babel npm,
  webpack, Browserify, Rollup, Vite, esbuild, Turbopack,
• § 2.4
  package.json, index.html, main.js
• § 2.5
  TypeScript, ClojureScript, Clojure, Google Closure Tools, Kotlin, WebAssembly, Emscripten, Pyodide, PyScript,

参考リンク（全体）

ドキュメント

• ECMA-262（JavaScript (ECMAScript) の仕様書）
• MDN
• Can I use... Support tables for HTML5, CSS3, etc
• CSS セレクター

ランキングなど

• TIOBE index さまざまな検索エンジンに基づく、プログラミング言語の人気ランキング
• GitHut GitHub で使われているプログラミング言語のランキング
• RedMonk GitHub と Stack Overflow の使用量に基づくプログラミング言語のランキング
• PYPL Google 検索に基づく、プログラミング言語の人気ランキング
• Programming Languages Influence Network プログラミング言語同士がどう影響を与えあっているかをグラフにしたもの

オンライン処理系（JavaScript 特化型）

• JSFiddle, CodePen, JS Bin, Plunker,

オンライン処理系（汎用）

• Ideone, Rextester, JDoodle, codepad, repl.it, Paiza.IO,