📝 TIL

[TIL] JS 퀴즈 파티

오늘 ONEUL 2022. 4. 19. 23:50

✍ Today I Learned

  • [travel 링크 이동 없이 이미지 바꾸기]
    • document에 addEventListner를 걸었을 경우, 페이지 내 어떤 곳이든 클릭될 수 있기 때문에 조건문으로 범위를 잡아줘야 한다.
    • contains() 메서드는 class에 해당 값이 존재하는지를 true or false로 반환한다.
let targetCls = e.target.classList.contains('click'); // true or false 반환
  • [퀴즈 1 영화 제목 입출력하기]
    • 입력하자마자 바로 출력(HTML에 결괏값 데이터 쌓기) -> innerHTML로 배열[배열.length-1]
    • 버튼뿐만 아니라 입력 창도 disabled
    • HTMLElement.focus() 메서드는 지정된 요소로 포커스를 설정한다.
  • [퀴즈 2 가장 큰 수와 가장 작은 수]
    • 랜덤 숫자 자꾸 헷갈리게 하네?
    • sort() 정렬 arrow function으로 깔끔하게
(random() * ((목표값-시작값)+1)) + (시작값)
rNums.sort(function(a,b){return a-b}); // 원래 버전
rNums.sort((a,b)=>a-b); // arrow function
  • [퀴즈 3 홀수의 합과 짝수의 합]
    • 데이터 저장은 변수, 배열, 객체 전부 가능하다.
    • validation은 HTML 태그에서도 가능하다. (min, max)
  • [퀴즈 4 인원수대로 이름과 나이 출력]
    • 입력한 인원수대로 input 태그를 만들어낸다.(동적 HTML)
    • 이때 포인트는 고유의 id가 부여되도록 id값에 i를 더해준다.
    • button도 함께 만들어 주었는데 동적 HTML이기 때문에 addEventListenr가 읽어 들이지 못한다.
    • travel처럼 document에 addEventListenr를 걸고 if문으로 button을 콕 찝어준다.
    • 나는 2차원 배열을 사용했는데 배열 속 객체에 저장하는 것도 좋은 듯하다.
    • button은 본인의 기능을 다 한 후 disabled 해준다.(this 키워드 적극 활용)
  • [퀴즈 5 6과목 점수 등급 출력]
    • 등급을 연산할 때 if문 대신 삼항 연산자를 사용하면 코드량을 줄일 수 있다.
    • total을 구할 땐 reduce() 메서드를 사용해보자.
let total = allScore.reduce((t, v)=>t+v); // reduce() 메서드 사용
  • [퀴즈 6 인원수만큼 점수, 총점, 평균 출력]
    • 나는 이번에도 2차원 배열을 사용했는데 객체 안의 배열은 좀 신선한 듯?
    • html에서 number 데이터를 받아올 땐 언제나 데이터 타입을 신경 쓰자.
  • [퀴즈 7 호텔 객실 관리 프로그램]
    • 안 그래도 호수가 맘에 걸렸는데 층을 나누기 위해 이중 반복문으로 배열 안에 배열 안에 객체
    • 구조가 조금 복잡하기 때문에 출력이 필요할 땐 index를 잘 생각하고 접근해야 한다.
    • 객실 객체를 가져오는 함수를 따로 분리하는 것도 좋다.
    • 실제 유저라고 생각하면 설정해야 할 기능이 아주 많다!
  • 무작정 덤비지 말고 어떤식으로 풀어나갈지 계획하고 코드 작성하기!
저작자표시