[TIL] 이벤트 객체, 유효성 검사 과제 회고

이벤트 객체

onclick 직접 할당과 addEventListener의 차이

onclick은 값을 덮어쓰기하고, addEventListener는 누적한다.

let button = documnet.querySelector('.btn'); //button은 클래스가 btn인 첫번째 요소를 가리킨다. 

button.onclick = function(){
  console.log("한 번 누름")
}

button.onclick = function(){
  console.log("두 번 누름")
}

button.onclick = function(){
  console.log("세 번 누름")
}
//콘솔에 출력되는 값은 "세 번 누름" 하나 뿐임. 

//button 변수가 위와 똑같다고 가정할 때 

button.addEventListener('click',function(){
  console.log("한 번 누름");
})

button.addEventListener('click',function(){
  console.log("두 번 누름");
})

button.addEventListener('click',function(){
  console.log("세 번 누름");
})

//이 때는 콘솔에 "한 번 누름", "두 번 누름", "세 번 누름"이 모두 출력된다.

• .target : 이벤트가 발생한 대상 객체를 가리킴.

유효성 검사 과제

Bare minimum 이후 advanced 과제를 해결할 때 새롭게 배운 내용을 정리해본다.

switch case문

복수의 if 조건문을 switch문으로 바꾸어 사용할 수 있다.
switch문은 하나 이상의 case문으로 구성된다.
default 값은 꼭 필요한 건 아니라고 함.
break를 써주지 않으면 기준에 부합하더라도 다음 케이스로 이동하여 실행하므로 주의해야 함.

function whatpie(x){
switch(x){
  case 'apple': console.log('apple pie!'); break;
  case 'pecan': console.log('pecan pie!'); break;
  case 'meat': console.log('meat pie!'); break;
  default : console.log('what kind of pie is it?')
}};

let pie = "pecan"

whatpie(pie)//pecan pie!
whatpie('none')//what kind of pie is it?
}

아래와 같이 여러 case에 한 가지 실행을 걸수도 있고, (예시 출처 : MDN )

var Animal = 'Giraffe';
switch (Animal) {
  case 'Cow':
  case 'Giraffe':
  case 'Dog':
  case 'Pig':
    console.log('This animal will go on Noah\'s Ark.');
    break;
  case 'Dinosaur':
  default:
    console.log('This animal will not.');
}
//콘솔에는 'This animal will go on Noah\'s Ark.'가 찍힌다. 

여러가지 case에 연쇄적인 실행을 걸어줄 수도 있다. (예시 출처 : MDN )

var foo = 1;
var output = 'Output: ';
switch (foo) {
  case 0:
    output += 'So ';
  case 1:
    output += 'What ';
    output += 'Is ';
  case 2:
    output += 'Your ';
  case 3:
    output += 'Name';
  case 4:
    output += '?';
    console.log(output);
    break;
  case 5:
    output += '!';
    console.log(output);
    break;
  default:
    console.log('Please pick a number from 0 to 5!');
}
// Output : What Is Your Name? 이 콘솔에 찍힘. 

fontawesome 사용해보기

fontawesome에서 제공하는 코드 라인을 복붙해서 사용하거나,
이미지 자체를 다운 받아서 img 태그에 넣어서 사용할 수 있다.

가져오는 건 복붙만 하면 되니 첫번째 방법이 좀 더 간편한 것 같은데,
저 상태에서 아이콘의 색상을 변경한다거나 하는 것이 어려워 그냥 img 태그를 사용했고,
CSS를 통해서 아이콘 색상을 변경하기로 했다.

이미지의 색상을 변경하는 것은 filter 속성을 이용했다.
filter 속성은 흐림, 색상 변형 등의 그래픽 효과를 요소에 적용하는데, 주로 이미지나 배경, 테두리 렌더링을 조정하는 데 쓰인다고 한다.
(출처:MDN)

아래와 같이 사용 가능한데, 아래에 사용된 값 외에도 여러가지 속성 값을 사용할 수 있음.
(ex: blur, brightness, contrast, grayscale...etc)

div{
	filter : opacity(50%) drop-shadow(0 0 0 #00663b);
}

오답노트

1. DOM의 객체는 node의 계층 구조로 이루어져 있다. root의 요소로부터 중첩된 여러 요소들이 뻗어나오고, 말단 노드에는 각 요소의 콘텐츠가 있다. node는 Element의 상위 개념이며(노드에는 요소가 아닌 그냥 text도 노드가 될 수 있다), Element는 node의 특정 타입이다.node의 기능을 적용한 객체는 여러 타입이 있는데, 그 중 가장 많이 사용되는 타입이 Element이다.

2. HTML 구조가 Js의 객체 구조와 같은 트리 구조라서 Js의 DOM이 브라우저에 접근하기 가장 바람직함. (DOM은 documnet 객체를 통해 HTML(root document)에 접근.) 다른 언어도 DOM을 가지고 있지만, JS의 DOM이 오래쓰였고 안정적임.

3. document.cloneNode : 복제 매서드 // document.importNode : template 활용해 내용 붙여넣을 때 사용하는 매서드.

4. document.getElementsByTagName()은 부모 자식 관계 없이 해당 태그 요소 전부를 조회함.
   (querySelectorAll 도 부모 자식 관계 없이 해당 요소 전부 조회)

5. document.getElementById().append.Child()를 통하면 자식요소로 연결시킬 수 있다.