19日目TIL

16116 ワード
TIL テキストリンク
一週間はもうすぐ過ぎます.いずれにしても、与えられた問題を解決して、答えがなぜなのかを言うことができます.
コードを見て、なぜそうするのか分かりました.でも!
知らない不快感を理解していたのですが、ちょっと物足りない….そこで再度コンセプトアレンジを行うことにしました.

Node?, Element?



Googleにはnodeとelementの違いに関する文章がたくさんあります.その中で上の図面が最も直感的にこの違いを体現していると思います.
1.Nodeとは、DOM API(Documenetオブジェクトモデル-アプリケーションプログラミングインターフェース)上のすべてのコンテンツを指す.
2.elementはノードのサブ固有のタイプの1つです.ここでHTMLのタグはHTML Elementの子であるため、HTML Elementの属性を持つ.また、各ラベルには属性があります.
** 3. ノードはドキュメントのリアルタイム状態を反映するため、要素を瞬時に変更することでダイナミックドキュメントを実現できます.

特定のボタンをクリックしたときにイベントを実行


ミッション!ボタンをクリックすると、特定のスタイルが有効になります!
<!-- html -->
<body>
  <button class="button">Push!!</button>
</body>
このボタンをクリックするとjavascriptを使用してclassを追加します.
//javascript
const button = document.querySelector('.button'); // html <button> 접근할 변수를 선언한다.
const buttonClassList = button.classList; // <button>의 classList에 접근할 변수를 선언한다.
//DOM을 확인해보면 button의 하위 항목에 classList가 있고, 내부에는 해당 class가 object형태의 속성으로 나와있음을 확인 할 수 있다. 

button.onclick = push; // 버튼이 클릭되었을때 push 함수가 실행되도록 했다.
// onclick은 해당 요소를 클릭했을때 이벤트를 발생시킨다.

//동작할 함수를 만들었다.
function push() { //함수선언식
  if (buttonClassList[1] === undefined) {  // button의 classList는 Object이고 key값은 인덱스 형태로 되어있다.
    //key값 1이 아무것도 없다면 true, 있다면 false를 반환하도록 했다.
    buttonClassList.add('pushed'); //class에 'pushed'를 추가한다
  } else {
    buttonClassList.remove('pushed'); //class에 'pushed'를 제거한다
  }
}
cssは各クラスに以下のプロパティを追加します.
.button {
  font-weight: 700;
  background-color: white;
  width: 100px;
  height: 50px;
  border: 3px solid green;
  transition: 0.1s;
}

.pushed {
  background-color: greenyellow;
  border: 3px solid green;
  box-shadow: 0 0 3px 1px green;
}
上記特定の条件下で動的に変化するボタンを実現した.
!!!! 実装コード中に関数式を使用して上記push関数を作成した場合、正常に動作しません.
なぜなら、関数宣言式は、JavaScriptの最上位にあるように関数宣言で使用されるが、関数式と変数宣言のように順番に操作されるため、button.onclick = pushの前に関数式が必要になるからだ.
これは無視された概念であり,実習を通じて概念を再確立する機会となった.

jsを使用してhtml tagインプリメンテーションまたはコンテンツを必要な場所に追加


ターゲット!ボタンをクリックしてInputウィンドウの内容をlistに追加します.
まず次のような仕組みを作ります
<!-- html -->
<body>
  <section>
    <input type="text" class="submitText" />
    <input type="submit" value="submit" class="submit" />
  </section>
  <ol class="list">
      make child
  <li>origin</li>
  </ol>
</body>

この状態でinputウィンドウにコンテンツを挿入し、submitをクリックして2にします.コンテンツとして追加!
//javascript
const list = document.querySelector('.list'); //<ol> tag내부에 list를 추가하기 위해 선택자생성.
const newList = document.createElement('li'); //새로운 <li> tag 생성 변수 생성.
const submitText = document.querySelector('.submitText'); //input창에 접근하기위한 선택자생성.
const submit = document.querySelector('.submit'); //submit 클릭시 이벤트 실행을 위해 submit에 접근자 생성

submit.onclick = set; //summit click시 set 함수 실행.
function set() {
  newList.textContent = `${submitText.value}`; //input창에 입력된 값에 접근하여 그 내용을 생성된 list에 추가
  // newList.classList.add('ok'); class 추가방법 1
  newList.setAttribute('class', 'ok'); //class 추가방법 2
  list.append(newList);// 내용과 class가 추가된 새로운 <li></li>를 <ol> 내부에 생성한다.
  submitText.value = ''; //생성 후 input창은 지워준다.
}
Inputウィンドウに内容を入力します.

submitをクリックしてコンテンツを追加し、inputウィンドウのコンテンツをキャンセルします.

そしてまたコンテンツを追加したい...2.コンテンツが再上書きされ、追加できないという問題が発生しました!!
コードを修正することで、問題の原因を見つけることができます.新しいnewListは関数の外にあるので、その値しか見えません.!解決策は、関数が実行されるたびにnewListを関数に移動して再実行し、正常に追加されていることを確認することです.
function set() {
  const newList = document.createElement('li'); // <<<<<<<<해결!!
  newList.textContent = `${submitText.value}`;
  // newList.classList.add('ok');
  newList.setAttribute('class', 'ok');
  list.append(newList);
  submitText.value = '';
}

明日は削除ボタンを半分聞くつもりです.他のコンセプトも整理して時間が経つのが早すぎる
[プログラマ]-文字列内で任意にソート(JAVA)
Spring]スプリング入門START(21.08.26)