본문 바로가기

FRONT-END/JAVASCRIPT7

[JS] onkeydown, onkeypress 차이점 키보드에서 키를 눌렀을 때 이벤트를 발생시키는 이벤트 처리기가 있다. onkeydown / onkeypress 인데 두 이벤트 처리기의 차이점을 간단하게 정리하려고 한다. 우선, 차이점을 알아보기 위해 input 태그를 하나 생성한다. 그리고 name 프로퍼티 값이 title인 input 태그에서 키를 눌렀을 때 어떤 키가 눌렸는지 확인하기 위해 keycode를 console.log()로 출력하는 script 코드를 작성한다. onkeydown input 태그에 abcdABCD를 입력했을 때 console에는 65(A),66(B),67(C),68(D)가 순서대로 반복돼서 찍히는 것을 확인할 수 있다. 소문자 a의 ASCII CODE값은 97인데 대소문자와는 상관없이 모두 대문자의 ASCII CODE값을 .. 2023. 1. 31.
[JS] input type="checkbox" 일 때 이벤트 핸들러 활용 input type이 checkbox 일 때, JS의 이벤트 핸들러를 활용해 합계 금액이 자동으로 변경되는 작고 소중한 웹 애플리케이션을 만들어보았다. HTML 소스코드 체육관 이용 요금 1 기본 사용료(4시간) 40,800원 야간조명(20,000원) 배구네트 x 2장(4,000원) 배구공 x 10(20,000원) 합계금액:원정​ JS 소스코드 우선, 이벤트 핸들러 방식 중 DOM을 조작하는 방식인 getElementsByName을 이용해 check 변수에 태그 name이 'option' 인 input 태그들을 담았다. 여기서 check 변수의 타입은 console.log()를 이용해서 확인해보면 NodeList라는 것을 알 수 있다. NodeList는 JS의 API가 아닌 Web Browser의 API.. 2023. 1. 30.