18-[クローン]バニラJSを使用したクロムアプリケーションの作成

https://nomadcoders.co/javascript-for-beginners/lobby
クローンエンコーディングのコードレスデコーダレッスンを受講した後に作成されたTIL.
TILに入る前に、この授業でDOMコントロールを熟知したいと思います.
TILによりDOM制御の定理を整理したが,実戦に応用すべきであると考えた.しかし、授業を受けるにつれて、新しい認識がたくさんあるので、TILで記録したいと思います.

👉🏻 リアルタイムクロックを表示

const clock = document.querySelector("#clock");

function getClock(){
    const time = new Date();
    const hours = String(time.getHours()).padStart(2,"0");
    const minutes = String(time.getMinutes()).padStart(2,"0");
    const seconds = String(time.getSeconds()).padStart(2,"0");
    clock.innerText = `${hours} : ${minutes} : ${seconds}`
}

getClock();
setInterval(getClock,1000);

✍🏻 new Date()

現在の日付と時刻の組み込み関数を取得します.
注意:https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
getHours()取得時間のみ
getMinutes()
getSeconds()取得秒数

✍🏻 padStart()

str.padStart(targetLength [, padString])
文字列がターゲット長に達していない場合は、ターゲット長に設定された値で入力して返します.

✍🏻 setInterval()

setInterval(func|code, [delay], [arg1], [arg2], ...)
settimeoutと似た概念で、一定の時間間隔で関数を実行します.

👉🏻 ログイン名、Todo-list localStorageに保存して表示

ブラウザをリフレッシュすると、ログインしたユーザーの名前とユーザーが保存したto-listを表示するためにlocalStorageにデータを格納します.
localStorage.setItem(USERNAME_KEY,username);
現在のドメインのlocalStorageオブジェクトにアクセスした後、保存します.setItem()を使用してプロジェクトを追加します.
const username = localStorage.getItem(USERNAME_KEY);
上に追加したlocalStorageエントリを参照してください.
開発者ツールでlocalStorageを表示できます.

👉🏻 リフレッシュのブロック

function onToDoSubmit (event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    printToDo(newTodo);
}

aラベルまたはsubmitラベルをクリックするとhrefで移動できます.
ウィンドウがリフレッシュされ、実行されます.
これらの動作はpreventDefaultで阻止できます.

👉🏻 画像をランダムに表示

const imgs = ["img0.jpg","img1.jpg","img2.jpg"];
const randomImg = imgs[Math.floor(Math.random() * imgs.length)];

const bgImg = document.createElement("img");
bgImg.src = `images/${randomImg}`;

document.body.appendChild(bgImg);

89 Mathオブジェクト

Mathオブジェクトは数学でよく使われる定数と関数をあらかじめ実現したJavaScript標準内蔵オブジェクトである.

✍🏻 Math.random()

Math.random()メソッドは、0以上1未満のランダムな数値を返します.(ランダムに0～1の値を返します)

✍🏻 Math.floor()

Math.floor()メソッドが返す整数は、引数から伝達される値以下です.

DOM制御

✍🏻 document.createElement("html tag")

jsでhtmlタグを生成します.
()にhtmlタグが入っています.

✍🏻 body.appendChild();

bodyの最後にcreateElementで作成したhtmlタグを追加します.
appendChild()<->prependChild().
210711 update

👉🏻 ToDoList

✅ event.target

function deleteToDo(event){
    const li = event.target.parentElement; // 삭제하고 싶은 li
    li.remove();
}

targetは私がクリックした(イベントが発生した)ラベルを教えてくれます.ul>liのような寸法でliのボタンをクリックすると、どのliをクリックしたか分かりません.
それを他の人に伝えるのが目標です.ターゲットの親を削除する必要があるため、parentElementを使用して親のタグを削除します.

配列形式でtodoをlocalstorageに保存

localstorageに格納されるデータ型はstringのみです.
todoを「」に並べ、文字列にします.
これらの機能を提供しているのはJSONです.stringify(toDos)

function saveToDos(){
    localStorage.setItem("todos",JSON.stringify(toDos)); // 배열을 텍스트로 바꿔줌 ([] => "[]")
}

逆にstringを配列に設定するとJSONになります.parse(savedToDos);

const savedToDos = localStorage.getItem("todos");
if(savedToDos) { // 만약에 savedToDos가 Null이 아니면
    const parsedToDos = JSON.parse(savedToDos); // 문자열을 배열로 바꿔줌
    toDos = parsedToDos;
    parsedToDos.forEach(paintToDo);
}

新しいtodoを追加するとlocalstorageが更新されます(既存のtodoを保持します)

todoを入力してリフレッシュすると、再びtodoを入力するとlocalstorageが初期化されます.
以前はconstと呼ばれていたtodos.

const toDos = [];

letに変更して更新します.

let toDos = [];

条件文としてgetItemで取得したlocalstoragevalue
savedToDosがnullでなければ、
配列の開始値に前の配列値を加えて開始

const savedToDos = localStorage.getItem("todos");

if(savedToDos) { // 만약에 savedToDos가 Null이 아니면
    const parsedToDos = JSON.parse(savedToDos); // 문자열을 배열로 바꿔줌
    toDos = parsedToDos // 배열 시작값을 이전의 배열(값)을 넣고 시작하기
    parsedToDos.forEach(paintToDo);
}

todo localstorageから削除

上にtargetでクリックしたliが、削除してくれました.
ただし、todoを配列としてlocalstorageに格納するため、画面上のliは消えている可能性がありますが、localstorageにはデータが残っています.
liにid値を与えて、対応するliを検索します.
newToDoを対象にする

function handleToDoSubmit(event){
    event.preventDefault();
    const newTodo = {
        text : toDoInput.value,
        id : Date.now()
    }
    toDoInput.value = "";
    toDos.push(newTodo);
    paintToDo(newTodo);
    saveToDos();
}

function deleteToDo(event){
    event.preventDefault();
    const li = event.target.parentElement; // 삭제하고 싶은 btn의 부모태그(li)
    li.remove();
    toDos = toDos.filter((todo)=> todo.id !== parseInt(li.id)); // 배열에서 삭제 , li의 id는 문자열이니까 parseInt를 통해 Number로 바꿔줌
    saveToDos(); // 바뀐 배열을 다시 저장을 해줌
}

filterでtrue値のみを収集し、配列を再作成し、saveToDosに保存します.( フィルタメソッドを参照 )