유효성 테스트를 하며 배운 것들 정리

 먼저, DOM 구조에 대해 배웠고 그걸 어떻게 적용시키는지 방법에 대해 배웠다.

그리고 이후엔 짝지어진 친구들과 같이 CSS를 꾸며봤다.

다행히 의사소통이 굉장히 좋았던 친구들이여서 다양한 의견들을 모두 반영하는데 성공할 수 있었다.

 

- Javascrip -

 

Document: keyup event

.onkeyup /  .onclick 등 다양한 이벤트

 

예제)

eventTarget.addEventListener ( "keyup", event => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  
 // 키가 올라 갈때 마다 해당 이벤트 발생

 

다양한 DOM 이벤트들 참조

https://developer.mozilla.org/ko/docs/Web/Events

 

 

 Element.classList

add( String [, String [, ...]] )지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.

 

remove( String [, String [, ...]] ) 지정한 클래스 값을 제거한다.

 

item( Number ) 콜렉션의 인덱스를 이용하여 클래스 값을 반환한다.

 

toggle( String [, force] )하나의 인수만 있을 때: 클래스 값을 토글링한다.

즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.

두번째 인수가 있을 때: 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거한다.

 

contains( String )지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.

 

replace( oldClass, newClass ) 존재하는 클래스를 새로운 클래스로 교체한다.

 

예제)

const div = document.createElement('div');
div.className = 'foo';

// our starting state: <div class="foo"></div>
console.log(div.outerHTML);

// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

console.log(div.classList.contains("foo"));

// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);

// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");

 

.innerText / .textContent

차이점

• textContent는 <script>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져옵니다. 반면 innerText는 "사람이 읽을 수 있는" 요소만 처리합니다.
• textContent는 노드의 모든 요소를 반환합니다. 그에 비해 innerText는 스타일링을 고려하며, "숨겨진" 요소의 텍스트는 반환하지 않습니다.
• Internet Explorer 기준, innerText를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴합니다. 이로 인해, 해당 텍스트 노드를 이후에 다른 노드는 물론 같은 노드에 삽입하는 것도 불가능합니다.

 

 

 

- CSS -

 

 .disabled

비활성 요소 :  활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 없는 요소

 

예제

let usernameOkay = false;
let pwOkay = false;

document.onkeyup = function () {
  if (usernameOkay && pwOkay) {
    btn.disabled = false;
  } else {
    btn.disabled = true;
  }