今日の勉強with vanillaJS

1.プロジェクト機能

1）学習する内容を入力し、Enterを押してリストに追加する

Inputに入力する内容を入力->enterキー->出力リストにタグを追加

2)完了した学習をリストから削除するために復習質問に答える

矢印->復習をクリックします.htmlに移動->localStorageから削除

3）夜間モード

月アイコンをクリックして、->bodyのクラスday、night toggle->ifクラス==night=>html要素を夜間モードに切り替えます
次はコード実装です!

2. strict mode

(function () {

'use strict';

...코드 생략(스크립트 전체)

}());

まず、スクリプトにstrictmodeを設定します.
厳格モードはES 5から追加され、JavaScript構文をより厳格にチェックし、潜在的なエラーを低減することを目的としています.
strict modeはスクリプト単位で実行されます.厳密モードと非厳密モードを混合して使用すると、エラーが発生する可能性があります.したがって、上記のコードに示すように、即時実行関数を使用してスクリプトを囲み、前のコードに適用することをお勧めします.

3. localStorage

2つのリストの作成とリフレッシュ中に初期化を続行する問題が発生しました.この問題を解決できるlocalStorageがWebブラウザに存在します.

上記のリポジトリは、開発者ツールのアプリケーションで表示できます.このリポジトリを使用して、2つのリストが初期化されるのを阻止します.

let inputLocal = localStorage.getItem('items')?JSON.parse(localStorage.getItem('items')):[];
localStorage.setItem('items', JSON.stringify(inputLocal));
let item = JSON.parse(localStorage.getItem('items'));

以上のコードはitemsという空間を指定しています.

setItem(「A」,B):BをAという空間に格納します.

getItem("A"):A空間の内容を読み出します.

最初の行は、itemsに何もない場合、[]inputLocalに割り当てられることを示します.

4. Create

document.querySelector(".studyList").addEventListener("submit", Create);

以上のコードはinputに値を入力しenterキーを押して値を追加することを実現します.Createはあなた自身が実装した関数です.次のコードを参照してください.
documentから「学習リスト」と名付けられたクラス.このクラスはinputを含むフォームを表します.

if(input!="") {
    inputLocal.push(input);
    localStorage.setItem('items', JSON.stringify(inputLocal));
    item = JSON.parse(localStorage.getItem('items'));
    document.querySelector(".input").value = "";
  }

入力に入力がある場合は、pushでlocalStorageに値を追加します.

5. Read

var list = "";
  for(var i=0; i<inputLocal.length; i++) {
    list+="<li>"+inputLocal[i]+"<span class='ReviewBtn' id="+i+">"+"→"+"</span></li>";
  }
  document.querySelector(".output").innerHTML=list;

以上のコードは画面表示のコードです.
リポジトリからインポートした要素をinnerHTMLで追加します.

innerTextではなくinnerHTMLを使用する理由
output分野にliとspanラベルを追加したいです.innerTextを使用すると、liとspanがタグ形式ではなく文字列形式に追加されます.
span->/spanそう!
したがって、innerHTMLを使用してタグを追加します.

innerHTMLの欠点
主に3つの欠点がある.1)攻撃を受けやすい;2)要素ノードのすべてのサブノードを削除する;3)新しい要素を挿入するときに位置を指定できない.
このプロジェクトでは、localStorageを使用して値をリスト形式で格納し、リストにアクセスしたインデックスで画面に表示するため、2回目と3回目の問題は発生しません.そこでinnerHTMLを使います.

6. Delete

削除すると、localStorageと一致して消去されます.削除する前に≪復習|復習|復習|emdw≫ページに移動する必要があるため、このセクションを実行してから削除することができます.以下のコードを参考にしてください!

function Delete() {
  NextPage();
  var i = this.getAttribute("id");
  item.splice(i,1);
  inputLocal = item;
  localStorage.setItem('items', JSON.stringify(inputLocal));
  Read()
}

NextPage()関数は次のページに進みます.このセクションでは、復習ページを別のhtmlファイルとして作成し、リンクします.

function NextPage() {
  location.href = "page/question.html";
}

上記のコードは、「復習」ページに移動できるコードです.

location.href:htmlファイル移動

もう一度Delete関数を見てみましょう.変数iはidという属性値を格納する空間である.これは、いくつかのリストの矢印であることを決定することを意味します.spliceでiに割り当てられたインデックス値から1つ削除します.選択したアイテムが削除されます.リポジトリの削除に適用するためにsetItemにリセットします.

7.ナイトモード

夜間モードはリフレッシュ時にも初期化の問題があります.また、「復習」ページには同じパターンを適用する必要がありますが、これらの問題を解決するためにリポジトリを再使用しました.

function NightAndDay() {
  document.querySelector("body").classList.toggle("night");
  let classLocal = localStorage.getItem('modes')?JSON.parse(localStorage.getItem('modes')):"";
  classLocal=document.querySelector("body").classList.value;
  localStorage.setItem('modes', JSON.stringify(classLocal));
  LocalMode();
}

document.querySelector(".Night").addEventListener("click", NightAndDay);

最後の行は、月アイコンをクリックしたときにNightAndDay関数を実行するコードです.
夜間モードを実施する際には切替を使用した.切り替えは、クラスを順番に実行します.ご一緒にご理解いただければ、下記でご確認ください!

document.querySelector("body").classList.add(クラス名)
:クラスの追加
ex)「day」→「day night」(nightクラスが追加されたと仮定)

document.querySelector("body").classList.remove(クラス名)
:クラスの削除
ex) "day night"→ "day"

document.querySelector("body").classList.切り替え(クラス名)
:クラスの交換
ex)"day night"→ "day"→ "day night"→ ...

クラス名を変更したら、リポジトリに保存します.
[復習]ページでは、このモードを参照して夜間モードに変更します.
復習を終えてホームページに戻るときも同じパターンにしましょうか?LocalMode()には、この内容が含まれています.

function LocalMode() {
  let BodyClassName = JSON.parse(localStorage.getItem('modes'));
  if(BodyClassName === "day night") {
    document.querySelector(".dayTitle").classList.add("nightTitle");
    document.querySelector(".day").classList.add("night");
    document.querySelector(".output").classList.add("output-night");
    document.querySelector(".Night").classList.add("Day");
    document.querySelector(".input").classList.add("inputNight");
  } else {
    document.querySelector(".dayTitle").classList.remove("nightTitle");
    document.querySelector(".day").classList.remove("night");
    document.querySelector(".output").classList.remove("output-night");
    document.querySelector(".Night").classList.remove("Day");
    document.querySelector(".input").classList.remove("inputNight");
  }
}

上記のコードは、スタイルをナイトモードに変更します.追加してスタイルを変更し、ナイトモードがオンのときに削除してスタイルを元のデフォルトのdayモードに変更します.

以上の画像は主に平面コードです.

以上の画像は復習ページのコードです.
*モダンJavaScript Deep Diveの本を参考に.