[ 📌文法] [ 🎨命令一覧]

[編集モード] 令和の順不同表比較機

2個のリストを入力とし、「両方のリストに含まれる項目」と「一方のリストにのみ含まれる項目」に分けます。CC BY 4.0 ライセンス ( https://creativecommons.org/licenses/by/4.0/deed.ja ) とします。

●(左データと右データの)ラベル行作成とは
　変数 初期親はDOM親要素。
　「div」のDOM部品作成。
　それの「display」に「table-row」をDOMスタイル設定。
　それにDOM親要素設定。
　変数 作成中行はそれ。
　「div」のDOM部品作成。
　それの「display」に「table-cell」をDOMスタイル設定。
　それにDOM親要素設定。
　左データのラベル作成。
　作成中行にDOM親要素設定。
　「div」のDOM部品作成。
　それの「display」に「table-cell」をDOMスタイル設定。
　それにDOM親要素設定。
　右データのラベル作成。
　初期親にDOM親要素設定。
ここまで。

●テキストエリア行作成とは
　変数 初期親はDOM親要素。
　「div」のDOM部品作成。
　それの「display」に「table-row」をDOMスタイル設定。
　それにDOM親要素設定。
　変数 作成中行はそれ。
　「div」のDOM部品作成。
　それの「display」に「table-cell」をDOMスタイル設定。
　それにDOM親要素設定。
　変数 左欄は「」のテキストエリア作成。
　それの「width」に「90%」をDOMスタイル設定。
　それの「rows」に「10」をDOM属性設定。
　作成中行にDOM親要素設定。
　「div」のDOM部品作成。
　それの「display」に「table-cell」をDOMスタイル設定。
　それにDOM親要素設定。
　変数 右欄は「」のテキストエリア作成。
　それの「width」に「90%」をDOMスタイル設定。
　それの「rows」に「10」をDOM属性設定。
　初期親にDOM親要素設定。
　[左欄,右欄]を戻す。
ここまで。

●(要素を)読み取り専用化とは
　要素の「setAttribute」を["readonly","readonly"]でJSメソッド実行。
　要素を戻す。
ここまで。

DOM親要素の「max-width」に「100vh」をDOMスタイル設定。
外テーブルは「div」のDOM部品作成。
それの「display」に「table」をDOMスタイル設定。
それにDOM親要素設定。
「div」のDOM部品作成。
それの「display」に「table-row」をDOMスタイル設定。
それにDOM親要素設定。
上内テーブルは「div」のDOM部品作成。
それの「display」に「table」をDOMスタイル設定。
それの「table-layout」に「fixed」をDOMスタイル設定。
それの「width」に「100%」をDOMスタイル設定。
それにDOM親要素設定。
「入力リストA」と「入力リストB」のラベル行作成。
入力欄A,入力欄Bはテキストエリア行作成。
「Aにしか無い項目」と「Bにしか無い項目」のラベル行作成。
固有結果欄A,固有結果欄Bはテキストエリア行作成。
固有結果欄Aを読み取り専用化。
固有結果欄Bを読み取り専用化。

外テーブルにDOM親要素設定。
「div」のDOM部品作成。
それの「display」に「table-row」をDOMスタイル設定。
それにDOM親要素設定。
「両方にある項目」のラベル作成。
外テーブルにDOM親要素設定。
「div」のDOM部品作成。
それの「display」に「table-row」をDOMスタイル設定。
それにDOM親要素設定。
共通結果欄は「」のテキストエリア作成。
それの「width」に「95%」をDOMスタイル設定。
それの「rows」に「10」をDOM属性設定。
それを読み取り専用化。
外テーブルにDOM親要素設定。
「div」のDOM部品作成。
それの「display」に「table-row」をDOMスタイル設定。
それにDOM親要素設定。
比較ボタンは「比較」のボタン作成。
それの「width」に「95%」をDOMスタイル設定。
外テーブルの「textarea」をDOM子要素全取得して反復
　対象の「max-height」に「25vh」をDOMスタイル設定。
ここまで。

●(要素の)リスト取得とは
　変数 結果配列は要素のテキスト取得して改行で区切る。
　もし、結果配列の要素数が0超ならば
　　もし、結果配列[結果配列の要素数から1を引く]が空ならば
　　　結果配列から配列ポップ。
　　ここまで。
　ここまで。
　結果配列を戻す。
ここまで。

比較ボタンをクリックした時には
　リストAは入力欄Aのリスト取得。
　リストBは入力欄Bのリスト取得。
　リストAハッシュは空ハッシュ。
　リストBハッシュは空ハッシュ。
　リストBを反復
　　もし、リストBハッシュに対象がハッシュキー存在ならば
　　　リストBハッシュ[対象]はリストBハッシュ[対象]に1を足す。
　　違えば
　　　リストBハッシュ[対象]は1。
　　ここまで。
　ここまで。
　A固有リストは空配列。
　共通リストは空配列。
　リストAを反復
　　もし、リストAハッシュに対象がハッシュキー存在ならば
　　　リストAハッシュ[対象]はリストAハッシュ[対象]に1を足す。
　　違えば
　　　リストAハッシュ[対象]は1。
　　ここまで。
　　もし、リストBハッシュに対象がハッシュキー存在ならば
　　　もし、リストBハッシュ[対象]が0超ならば
　　　　共通リストに対象を配列追加。
　　　　リストBハッシュ[対象]はリストBハッシュ[対象]から1を引く。
　　　違えば
　　　　A固有リストに対象を配列追加。
　　　ここまで。
　　違えば
　　　A固有リストに対象を配列追加。
　　ここまで。
　ここまで。
　B固有リストは空配列。
　リストBを反復
　　もし、リストAハッシュに対象がハッシュキー存在ならば
　　　もし、リストAハッシュ[対象]が0超ならば
　　　　リストAハッシュ[対象]はリストAハッシュ[対象]から1を引く。
　　　違えば
　　　　B固有リストに対象を配列追加。
　　　ここまで。
　　違えば
　　　B固有リストに対象を配列追加。
　　ここまで。
　ここまで。
　A固有リストを改行で配列結合。
　固有結果欄Aにそれをテキスト設定。
　B固有リストを改行で配列結合。
　固有結果欄Bにそれをテキスト設定。
　共通リストを改行で配列結合。
　共通結果欄にそれをテキスト設定。
ここまで。

デバッグ × キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] 令和の順不同表比較機

素材のアップロード