JavaScript 3.4~

44344 ワード

テキストリンク

3.4

html

<!DOCTYPE html>
<html>
  <head>
    <title>Something</title>
    <link rel="stylesheet" href="style.css" />
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="js-clock">
      <h1>00:00</h1>
    </div>
    <form class="js-form form">
      <input type="text" placeholder="what is your name?" />
    </form>
    <h4 class="js-greetings gretting"></h4>

    <!--todolist 추가html-->
    <form class="js-toDoForm">
      <input type="text" placeholder="Write a to do" />
    </form>
    <ul class="js-toDoList"></ul>

    <script src="clock.js"></script>
    <script src="gretting.js"></script>
    <script src="todo.js"></script>
  </body>
</html>

javascript

const toDoForm = document.querySelector(".js-toDoForm"),
    toDoInput = toDoForm.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");

const TODOS_LS = 'toDos';

function paintToDo(text){
    console.log(text);

}

function handleSubmit(event){
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
}

function loadToDos(){
    const toDos = localStorage.getItem(TODOS_LS);
    if(toDos !== null){

    }
}

function init() {
    loadToDos();
    toDoForm.addEventListener("submit", handleSubmit)

}

init();

結果

function handleSubmit(event){
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    //값 입력하면 제출하고 다시 wirte a to do 화면으로 넘어가기
    toDoInput.value ="";
}

結果

javascript


const toDoForm = document.querySelector(".js-toDoForm"),
    toDoInput = toDoForm.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");

const TODOS_LS = 'toDos';

function paintToDo(text){
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    delBtn.innerText = "❌";
    const span = document.createElement("span");
    span.innerText = text;
    li.appendChild(span);
    li.appendChild(delBtn);
    toDoList.appendChild(li);
}

function handleSubmit(event){
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    //값 입력하면 제출하고 다시 wirte a to do 화면으로 넘어가기
    toDoInput.value ="";
}

function loadToDos(){
    const toDos = localStorage.getItem(TODOS_LS);
    if(toDos !== null){

    }
}

function init() {
    loadToDos();
    toDoForm.addEventListener("submit", handleSubmit);

}

init();

結果

でもおばさんはよく(😍😍❌ これが私のおばさんです.

<meta charset="utf-8" />

それを<head>内に入れる

3.5

javascript

//해야할 일을 생성했을 때 배열에 추가되도록.
const toDos = [];

function paintToDo(text){
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    delBtn.innerText = "❌";
    const span = document.createElement("span");
    span.innerText = text;
    li.appendChild(span);
    li.appendChild(delBtn);
    toDoList.appendChild(li);
    //해야할 일을 생성했을 때 배열에 추가되도록.
    const toDoObj = {
        text: text,
        id: toDos.length + 1

    };

    toDos.push(toDoObj);
}

結果

私もliにidを割り当てます.これにより、後でボタンをクリックするときにどのliを削除するかがわかります.
上のコードにidを割り当てて、より美しく+li

//해야할 일을 생성했을 때 배열에 추가되도록.
const toDos = [];

function paintToDo(text){
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    const span = document.createElement("span");
    const newId = toDos.length + 1;
    delBtn.innerText = "❌";
    span.innerText = text;
    li.appendChild(span);
    li.appendChild(delBtn);
    li.id = newId;
    toDoList.appendChild(li);
    //해야할 일을 생성했을 때 배열에 추가되도록.
    const toDoObj = {
        text: text,
        id: newId

    };

    toDos.push(toDoObj);
}

結果

値を入力して要素をチェックすると、idが与えられているほど良いことがわかります.
Q.なぜこうやってtodoを保存するのか?
A.ローカルストレージにtodoを保存する必要があるため

//해야할 일을 생성했을 때 배열에 추가되도록.
const toDos = [];

function saveToDos(){
    localStorage.setItem(TODOS_LS, toDos);
}

function paintToDo(text){
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    const span = document.createElement("span");
    const newId = toDos.length + 1;
    delBtn.innerText = "❌";
    span.innerText = text;
    li.appendChild(span);
    li.appendChild(delBtn);
    li.id = newId;
    toDoList.appendChild(li);
    //해야할 일을 생성했을 때 배열에 추가되도록.
    const toDoObj = {
        text: text,
        id: newId

    };

    toDos.push(toDoObj);
    //꼭 toDos안에 집어넣은 이후에 불러야함.
    saveToDos();
}

結果

でも[object Object]に見えますよね?こんなの欲しくない!
理由)ローカルstroogはJavaScriptのデータを格納できず、文字列のみを格納できます.
JavaScriptはlocalstorageのすべてのデータをstringとして格納しようとしています.
=>だからobjectをstringにしなければなりません.

function saveToDos(){
    localStorage.setItem(TODOS_LS, JSON.stringify(toDos));
}

JSON.stringgify JavaScriptオブジェクトをstringに変換
結果

toDosを読み込み

function loadToDos(){
    const loadedToDos = localStorage.getItem(TODOS_LS);
    if(loadedToDos !== null){
        console.log(loadedToDos);
    }
}

結果
コンソールウィンドウでこんなに遅い
[{"text":"asdf","id":1},{"text":"asdf","id":2}]
問題はstringです.
Tip)JSONはobject->stringとstring->objectに変換できます

function loadToDos(){
    const loadedToDos = localStorage.getItem(TODOS_LS);
    if(loadedToDos !== null){
        console.log(loadedToDos);
        const parsedToDos = JSON.parse(loadedToDos);
        console.log(parsedToDos);
    }
}

結果

すべてのtodoプロジェクトに対してprintToDo関数を実行します.つまり、解析されたToDosのプロジェクトに対してprintToDo関数を実行します.
forEachはデフォルトで1つの関数を実行し、各配列に含まれる関数は1回実行されます.

function loadToDos(){
    const loadedToDos = localStorage.getItem(TODOS_LS);
    if(loadedToDos !== null){
        const parsedToDos = JSON.parse(loadedToDos);
        parsedToDos.forEach(function(toDo) {
            console.log(toDo.text);
        })
    }
}

結果

やるべきことを貯金すれば、そのままコンソールにいます.
ウィンドウが終了してから再開すると、以前に入力した値が保存されるため、以前に入力した処理対象の値はコンソールで一時停止します.
機能は外に分けることができます

function something(toDo) {
    console.log(toDo.text);
}

function loadToDos(){
    const loadedToDos = localStorage.getItem(TODOS_LS);
    if(loadedToDos !== null){
        const parsedToDos = JSON.parse(loadedToDos);
        parsedToDos.forEach(something);
    }
}

このように
todosの各インスタンスに対して関数を実行する
結果はさっきと同じです.
しかし、尼先生と私は後者ではなく電子方式を使います.

function loadToDos(){
    const loadedToDos = localStorage.getItem(TODOS_LS);
    if(loadedToDos !== null){
        const parsedToDos = JSON.parse(loadedToDos);
        parsedToDos.forEach(function(toDo) {
            paintToDo(toDo.text);
        })
    }
}

結果

wow今はtodolistを更新しても消えない様子

Reference

この問題について(JavaScript 3.4~), 我々は、より多くの情報をここで見つけました https://velog.io/@123cjstj/자바스크립트-3.4

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

[python]削除プログラマーの最小数(lv.1)

宇宙神との交感1774号