JavaScriptをアプリに実装①

2021年7月９日（金）から7月10日（土）までまる二日かかって自装できました。
railsアプリ内に実装していきます。
１）アプリ内にはチェックボックスでJavaScriptを発火させます。
２）チェックボックスは１つだけ
３）チェックすると全ての入力フームに入力できるようにする
４）チェックを外すと一部の入力フォームを入力できないように制限する

なぜ時間がかかった

・googleで検索していくつも似たようなものが出てきたから
・書いてあるとおおりコピペしても動かなかった

1日半経ってから

1から組み上げることにした。
・Railsのメソッド（def ~ end）にあたる関数を調べる
・変数の宣言の仕方を調べる
・イベントハンドラー＝いつJavaScriptを発火させるのか？
・どこで発火させるのか？（DOM）
・console.logできちんと確認しながら開発

初めての人にもわかるように頑張ります。
１）JavaScriptのメソッド

２）変数の定義

変数	初期値	再宣言	再代入
var	OK	OK	OK
let	OK		OK
const	OK

3)関数の書き方

4)どこで発火させるのか

DOMとはDocument Object Modelの略です。HTMLやXML文書のためのプログラミングインターフェイスです。ページを表現するため、プログラムが文書構造、スタイル、内容を変更することができます。WEB情報は単なる文字情報ではなくブラウザを使って色々な装飾を施すがその一部としてJavaScriptも使われています。そのJavaScriptを使うところをid名クラス名要素名で取得します。

セレクタ名は
1.クラス名(".class名")
2.id名（”#id名”）
3.HTMLタグ（”タグ名”）と表記します。

５）トリガー（いつ発火するか=イベントハンドラー）

●EventTargetElement、Document、Windowなどがあります。

click	ボタンをクリックしたとき
mousemove	カーソルがターゲット内に移動したとき
mouseover	カーソルがターゲット内に侵入してきたとき
mousedown	ボタンを押下したとき
mouseup	ボタンを離したとき
mouseout	カーソルがターゲット外に出たとき
keypress	キーを押して離したとき
keydown	キー押下時
keyup	キーを離したとき
DOMFocusIn	ターゲットがフォーカスを受け取ったとき
DOMFocusOut	ターゲットがフォーカスを失ったとき
DOMActivate	ターゲットがアクティブになったとき
select	テキストフィールドで文字が選択されたとき
change	コントロールの値が変化したとき
submit	submitボタンが押されたとき
reset	resetボタンが押されたとき
focus	コントロールがフォーカスを受け取ったとき
blur	コントロールがフォーカスを失ったとき
load	読み込みが完了したとき
scroll	コントロール付属のスクロールバー位置が変更されたとき
resize	コントロールのサイズが変更されたとき

6)jsファイルを読み込む準備

application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("../packs/check")